Frustum Culling Test

Large grid of objects with camera aimed at one corner to test frustum culling effectiveness.

Controls

Total Objects

100
3000
import * as EASEL from "easel";

const scene = new EASEL.Scene();
const camera = new EASEL.PerspectiveCamera({
  fov: 45, aspect: width / height, near: 0.1, far: 80,
});
camera.position.set(-20, 12, -20);
camera.lookAt(new EASEL.Vector3(0, 0, 0));

const renderer = new EASEL.Renderer({ canvas, width, height });
scene.add(new EASEL.AmbientLight(0xffffff, 0.4));

const geometry = new EASEL.BoxGeometry(0.4, 0.4, 0.4);
geometry.computeBoundingSphere();

// Spread 1000 boxes across a 3D grid
for (let i = 0; i < 1000; i++) {
  const mesh = new EASEL.Mesh(
    geometry,
    new EASEL.LambertMaterial({ color: colors[i % 6] }),
  );
  mesh.position.x = (i % cols) * 1.5 - offsetX;
  mesh.position.z = Math.floor(i / cols) % rows * 1.5 - offsetZ;
  mesh.position.y = Math.floor(i / (cols * rows)) * 1.5 - offsetY;
  scene.add(mesh);
}

// Camera aimed at one corner — frustum culling skips ~70% of meshes