Materials & Lighting

Vertex Color Review

What this shows

Authored vertex colors remain visible on a lit mesh.

This example needs a Canvas2D-capable browser.

Loading scene…

Loading scene…

Key API excerpt

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

const geometry = new EASEL.BoxGeometry(2.5, 2.5, 2.5);
const position = geometry.getAttribute("position");
const colors = new Float32Array(position.count * 3);

for (let vertex = 0; vertex < position.count; vertex++) {
  const offset = vertex * 3;
  colors[offset] = 0.35 + 0.65 * (position.getX(vertex) / 2.5 + 0.5);
  colors[offset + 1] = 0.35 + 0.65 * (position.getY(vertex) / 2.5 + 0.5);
  colors[offset + 2] = 0.35 + 0.65 * (position.getZ(vertex) / 2.5 + 0.5);
}
geometry.setColors(colors);

const material = new EASEL.LambertMaterial({ color: 0xffffff, vertexColors: true });
const mesh = new EASEL.Mesh(geometry, material);