canvas

geometry / convex

What this shows

A translucent convex hull built around the twenty vertices of a dodecahedron spins beside an axes helper, with the source vertices drawn as blue points and orbit controls for the camera.

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

Differences from three.js

EASEL points are filled discs with an integer pixel radius and no texture sampling, alphaTest or size attenuation, so solid blue discs of radius 2 stand in for the disc.png sprites whose size shrinks with distance.
The hull's opacity 0.5 maps to EASEL's discrete opacity level 4 of 8, so the hull blends through one of nine fixed translucency steps (here exactly half) rather than a continuous alpha.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

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


const dodecahedron = new EASEL.DodecahedronGeometry(10);
dodecahedron.deleteAttribute("normal");
dodecahedron.deleteAttribute("uv");
dodecahedron.mergeVertices();

const position = dodecahedron.getAttribute("position");
const vertices = [];

for (let i = 0; i < position.count; i++) {
  vertices.push(new EASEL.Vector3().fromBufferAttribute(position, i));
}

group.add(new EASEL.Points(
  new EASEL.Geometry().setFromPoints(vertices),
  new EASEL.PointsMaterial({ color: 0x0080ff, size: 2, vertexColors: false }),
));
group.add(new EASEL.Mesh(
  new EASEL.ConvexGeometry(vertices),
  new EASEL.LambertMaterial({ opacity: 4, side: EASEL.Side.Double, transparent: true }),
));

group.rotation.y += 0.005;
renderer.prepare(scene, camera);
renderer.render(scene, camera);