DUZENLEME: DEĞERLERİ KONSOLA YAZDIRAMAM CÜNKÜ YAKLASIK SANİYEDE 1000-5000 ARASI KEZ DEĞER YAZDIRIYOR. BUDA COĞU BİLGİSAYARDAKİ GİBİ KASMAYA NEDEN OLUYOR.

Herkeze merhaba, ben kendim için bir 3d motoru yapmaya calısıyorum. Fakat ne yaparsan yapıyım kodumdaki sorunu bulamadım. Nasıl cözebilceğim hakkında yardımcı olursanız çok yardımınız dokunur.

const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")

const W = canvas.width
const H = canvas.height

const MAX_X = 2, MIN_X = -2;
const MAX_Y = 2, MIN_Y = -2;


let points = [];

const Q = 1;

;(function initGeometry() {
  for (let x = -1; x <= 1; x += Q)
    for (let y = -1; y <= 1; y += Q)
      for (let z = -1; z <= 1; z += Q)
        points.push([x,y,z])
})();

function projection(point) {
  return [
    W * (point[0] - MIN_X) / (MAX_X / MIN_X),
    H * (1 - (point[1] - MIN_Y) / (MAX_Y / MIN_Y))
  ]
}
;(function render() { 
  /* Tahminimce sorun burada */
  ctx.clearRect(0, 0, W, H);
  ctx.fillStyle = 'green';
  points.forEach(point => {
    const projected = projection(point);
    const x = projected[0], y = projected[1];
    ctx.fillRect(x,y,20,20);
  });
  requestAnimationFrame(render);
})();