canvas

buffergeometry / points

What this shows

A cube of 500,000 points colored by their position tumbles in dark linear fog, drawn from one Geometry with position and color attributes.

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

Differences from three.js

EASEL PointsMaterial has no sizeAttenuation and takes an integer pixel radius, so the size-15 points, about 1 pixel square in three.js at this canvas size, become fixed 1-pixel-radius points (a 5-pixel plus shape, 3 pixels wide) that do not grow as they come closer, so the cube reads as a denser, nearly solid block.
Drawing all 500,000 fogged points on the CPU is slow: the median EASEL frame measured about 45 ms at 640x360 in a Bun smoke test, so the animation runs near 22 frames per second instead of the display rate.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

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


scene.fog = new EASEL.Fog({ color: 0x050505, near: 2000, far: 3500 }).updateLut();

const geometry = new EASEL.Geometry();
geometry.setAttribute("position", new EASEL.Attribute(new Float32Array(positions), 3));
geometry.setAttribute("color", new EASEL.Attribute(new Float32Array(colors), 3));

const points = new EASEL.Points(
  geometry,
  new EASEL.PointsMaterial({ size: 1, vertexColors: true }),
);

scene.add(points);

const time = Date.now() * 0.001;
points.rotation.x = time * 0.25;
points.rotation.y = time * 0.5;
renderer.prepare(scene, camera);
renderer.render(scene, camera);