canvas

buffergeometry / lines / indexed

What this shows

Four rows of Koch snowflake curves at four iteration depths, drawn as one indexed LineSegments geometry with random per-vertex colors, spinning around the view axis.

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

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.index = indices;
geometry.setAttribute("position", new EASEL.Attribute(new Float32Array(positions), 3));
geometry.setAttribute("color", new EASEL.Attribute(new Float32Array(colors), 3));

const lineSegments = new EASEL.LineSegments(
  geometry,
  new EASEL.LineMaterial({ vertexColors: true }),
);
const parentNode = new EASEL.Node();
parentNode.add(lineSegments);

scene.add(parentNode);

parentNode.rotation.z = Date.now() * 0.001 * 0.5;
renderer.prepare(scene, camera);
renderer.render(scene, camera);