canvas

interactive / lines

What this shows

Fifty randomly colored Line and LineSegments copies of one random walk, nested under a random parent transform, are raycast every frame so a red sphere marks the line under the pointer while the camera slowly orbits.

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

Differences from three.js

The three.js renderer enables antialias; EASEL rasterizes the lines and the red marker sphere on the CPU without anti-aliasing, so their edges are jagged.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

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


const lineGeometry = new EASEL.Geometry();
lineGeometry.setAttribute("position", new EASEL.Attribute(new Float32Array(points), 3));
const material = new EASEL.LineMaterial({ color: Math.random() * 0xffffff });
const object = Math.random() > 0.5
  ? new EASEL.Line(lineGeometry, material)
  : new EASEL.LineSegments(lineGeometry, material);
parentTransform.add(object);

const raycaster = new EASEL.Raycaster();

raycaster.lineThreshold = 3;

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

raycaster.setFromCamera(pointer, camera);
const hit = raycaster.intersectObjects(parentTransform.children, true)[0];
sphereInter.visible = hit !== undefined;

if (hit) sphereInter.position.copy(hit.point);

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