canvas

interactive / buffergeometry

What this shows

Five thousand randomly placed, vertex-colored triangles in one rotating Geometry are raycast every frame, and a white outline traces the triangle under the pointer.

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

Differences from three.js

EASEL has no MeshPhongMaterial, so the triangles use LambertMaterial and lose the white specular highlights (shininess 250) of the three.js original.
EASEL bakes lighting per vertex and rasterizes the triangles and the outline on the CPU without anti-aliasing, so 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 geometry = new EASEL.Geometry();
geometry.setAttribute("position", new EASEL.Attribute(positions, 3));
geometry.setAttribute("normal", new EASEL.Attribute(normals, 3));
geometry.setAttribute("color", new EASEL.Attribute(colors, 3));
geometry.computeBoundingSphere();

const mesh = new EASEL.Mesh(
  geometry,
  new EASEL.LambertMaterial({ color: 0xaaaaaa, side: EASEL.Side.Double, vertexColors: true }),
);

scene.add(mesh);

raycaster.setFromCamera(pointer, camera);
const intersect = raycaster.intersectObject(mesh)[0];

if (intersect) {
  const linePosition = line.geometry.getAttribute("position");
  const meshPosition = mesh.geometry.getAttribute("position");
  linePosition.copyAt(0, meshPosition, intersect.face.a);
  linePosition.copyAt(1, meshPosition, intersect.face.b);
  linePosition.copyAt(2, meshPosition, intersect.face.c);
  linePosition.copyAt(3, meshPosition, intersect.face.a);
  mesh.updateMatrix();
  line.geometry.applyMatrix4(mesh.matrix);
}
line.visible = intersect !== undefined;

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