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