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);
}