canvas

interactive / cubes

What this shows

Two thousand randomly colored, rotated, and scaled Lambert cubes are raycast every frame while the camera slowly orbits, and the cube under the pointer turns red.

Side by side with the three.js r186 original: webgl_interactive_cubes.html

Differences from three.js

EASEL bakes Lambert lighting per vertex (Gouraud) instead of per fragment, and it rasterizes the cubes on the CPU without anti-aliasing, so cube edges are jagged where the three.js renderer enables antialias.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

import * as EASEL from "@xsyetopz/easel";


const light = new EASEL.DirectionalLight(0xffffff, 3);
light.position.set(1, 1, 1).normalize();

scene.add(light);

const geometry = new EASEL.BoxGeometry();
const object = new EASEL.Mesh(
  geometry,
  new EASEL.LambertMaterial({ color: Math.random() * 0xffffff, vertexColors: false }),
);

scene.add(object);

camera.lookAt(scene.position);
camera.updateMatrixWorld();

const raycaster = new EASEL.Raycaster();

raycaster.setFromCamera(pointer, camera);
const hit = raycaster.intersectObjects(scene.children, false)[0];
if (hit) hit.object.material.emissive.hex = 0xff0000;

renderer.prepare(scene, camera);
renderer.render(scene, camera);