EASEL.js

canvas

points / billboards

What this shows

Ten thousand randomly placed point billboards cycle through hues in exponential fog while the camera follows the pointer.

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

Differences from three.js

  • EASEL points are filled discs with an integer pixel radius and no texture sampling or alphaTest, so solid discs stand in for the alpha-tested disc.png sprites, and disc.png is not loaded.
  • EASEL PointsMaterial has no sizeAttenuation, so with the toggle on every point uses one radius, taken from the three.js size-35 formula at the 1000-unit camera distance (3 pixels at 640x360), instead of growing as it comes closer; with the toggle off the radius is 18 pixels, matching the 35-pixel sprites.
EASEL (Canvas2D)
This example needs a canvas-capable browser.

Loading scene…

three.js r186 (WebGL)
This example needs a canvas-capable browser.

Loading scene…

Loading scene…

Key API excerpt

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


scene.fog = new EASEL.FogExp2(0x000000, 0.001);

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

// Integer pixel radius: no sizeAttenuation, map or alphaTest.
const material = new EASEL.PointsMaterial({ size: 3, transparent: true, vertexColors: false });

scene.add(new EASEL.Points(geometry, material));

camera.lookAt(scene.position);
material.color.setHSL(h, 0.5, 0.5);
renderer.prepare(scene, camera);
renderer.render(scene, camera);