Resolution Scaling Test

Measure how rendering cost scales with canvas resolution.

Controls

Resolution Scale

0.25
2
import * as EASEL from "easel";

const scene = new EASEL.Scene();
const camera = new EASEL.PerspectiveCamera({
  fov: 50, aspect: width / height, near: 0.1, far: 100,
});
camera.position.z = 4;

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

const mesh = new EASEL.Mesh(
  new EASEL.TorusKnotGeometry(1, 0.3, 128, 16),
  new EASEL.LambertMaterial({ color: 0x5577dd }),
);
scene.add(mesh);

// Scale internal resolution while keeping display size constant
const scale = 0.5;
renderer.setSize(width * scale, height * scale);
canvas.style.width = width + "px";
canvas.style.height = height + "px";