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";