Overdraw Stress Test
Overlapping translucent planes to measure overdraw and transparency cost.
Controls
Layer Count
2
50
import * as EASEL from "easel";
const scene = new EASEL.Scene();
const camera = new EASEL.PerspectiveCamera({
fov: 60, aspect: width / height, near: 0.1, far: 100,
});
camera.position.set(0, 0, 5);
const renderer = new EASEL.Renderer({ canvas, width, height });
scene.add(new EASEL.AmbientLight(0xffffff, 0.4));
const geometry = new EASEL.PlaneGeometry(4, 4);
// Stack translucent planes along Z axis
for (let i = 0; i < 10; i++) {
const mesh = new EASEL.Mesh(
geometry,
new EASEL.LambertMaterial({
color: palette[i % 6],
opacity: 4, // 0=opaque, 8=nearly transparent
}),
);
mesh.position.z = i * 0.1;
scene.add(mesh);
}