canvas

lod

What this shows

Fly through 1000 wireframe icosahedra whose LOD objects swap between five detail levels by camera distance.

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

Differences from three.js

EASEL's IcosahedronGeometry reads detail as 4^detail recursive splits, so the port builds the five icosahedra with three.js's (detail + 1)^2 subdivision in the example itself; the vertex positions match three.js.
EASEL draws wireframe edges as 1-pixel aliased lines in each triangle's flat-shaded color, so the material uses Shading.Flat to get lit at all; the red point light and white directional light shade each face uniformly instead of per fragment.
EASEL does not apply fog to wireframe edges, so distant icosahedra stay at full brightness instead of fading to black toward the 15000-unit fog far distance.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

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


const lod = new EASEL.LOD();

for (const [levelGeometry, distance] of geometry) {
  lod.addLevel(new EASEL.Mesh(levelGeometry, material), distance);
}

const controls = new EASEL.FlyControls(camera, canvas);
controls.movementSpeed = 1000;

controls.update(timer.update().delta);
renderer.prepare(scene, camera);
lod.update(camera);
renderer.render(scene, camera);