canvas

buffergeometry / indexed

What this shows

A 10x10 indexed grid Geometry with per-vertex normals and a red-green gradient over full blue tumbles under a hemisphere light, with a wireframe toggle.

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

Differences from three.js

MeshPhongMaterial becomes LambertMaterial with Gouraud (per-vertex) lighting, so the grid has no specular highlight.
The wireframe is drawn by the CPU rasterizer without anti-aliasing.

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(vertices), 3));
geometry.setAttribute("normal", new EASEL.Attribute(new Float32Array(normals), 3));
geometry.setAttribute("color", new EASEL.Attribute(new Float32Array(colors), 3));

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

scene.add(mesh);

mesh.rotation.x = time * 0.25;
mesh.rotation.y = time * 0.5;
renderer.prepare(scene, camera);
renderer.render(scene, camera);