@kupcad/ui 0.1.7 → 0.1.8

package/src/viewer/faces.js

@@ -1,24 +1,18 @@
 // A mesh's faces, as its feature edges bound them: the triangles joined across their edges where
-// they meet at less than EDGE_ANGLE_DEG (model.js draws an edge where they meet at more). A face
+// they don't turn (topology.js; model.js draws an edge where they do). A face
 // is flat when its triangles all face one way, curved otherwise (a cylinder's side); its area is
 // in the scene's millimetres. A geometry's faces are found once, as the pointer first meets each;
 // a face's triangles are what the viewer marks the face under the pointer with.
 
 import { Vector3 } from 'three';
-import { EDGE_ANGLE_DEG } from './model.js';
+import { topologyOf, turns } from './topology.js';
 
 /** @import { BufferGeometry, Matrix4, Mesh } from 'three' */
 /** @import { Face } from './types.js' */
+/** @import { Topology } from './topology.js' */
 
 /** Triangles that face ways this close (the cosine of their angle) are one flat face's. */
 const FLAT_COS = Math.cos((0.5 * Math.PI) / 180);
-const SMOOTH_COS = Math.cos((EDGE_ANGLE_DEG * Math.PI) / 180);
-/** Two corners nearer than this, of the geometry's size, are one point: its triangles meet there. */
-const SAME_POINT = 1e-6;
-/** Slots in a hash table per key it is given, at least: it stays at most half full. */
-const TABLE_ROOM = 2;
-/** Odd numbers that spread a key's parts over a hash table's slots. */
-const SPREAD = [0x9e3779b1, 0x85ebca77, 0xc2b2ae3d];
 /** A face's way is an axis's when this close to it (the cosine). */
 const AXIS_COS = Math.cos((1 * Math.PI) / 180);
 /** The axes a face may face, and what the views call them. */
@@ -32,14 +26,8 @@ const AXES = /** @type {const} */ ([
 ]);
 
 /**
- * A geometry's triangles, which meet which across an edge, and the face each was found in (-1
- * for none yet). A triangle's sides are numbered `triangle * 3 + corner`, each from its corner
- * to the next.
- * @typedef {object} Topology
- * @property {Float32Array} normals a unit normal per triangle, 3 numbers each
- * @property {Int32Array} edgeOf the edge each side lies on, by its ends' points
- * @property {Int32Array} start where each edge's sides begin in `sides` (one more, the end)
- * @property {Int32Array} sides the sides on each edge, edge by edge
+ * A geometry's faces as found so far: the face each triangle was found in (-1 for none yet).
+ * @typedef {object} Faces
  * @property {Int32Array} faceOf
  * @property {FaceOf[]} faces
  */
@@ -53,8 +41,8 @@ const AXES = /** @type {const} */ ([
  * @property {{ matrix: Matrix4, value: number } | null} area
  */
 
-/** @type {WeakMap<BufferGeometry, Topology>} */
-const topologies = new WeakMap();
+/** @type {WeakMap<BufferGeometry, Faces>} */
+const found = new WeakMap();
 
 /**
  * The face of `mesh` its triangle `triangle` is in, in the scene's terms.
@@ -93,144 +81,25 @@ export function faceTriangles(mesh, triangle) {
  * @param {number} triangle
  */
 function faceContaining(geometry, triangle) {
-  let topology = topologies.get(geometry);
-  if (!topology) {
-    topology = topologyOf(geometry);
-    topologies.set(geometry, topology);
+  const topology = topologyOf(geometry);
+  let faces = found.get(geometry);
+  if (!faces) {
+    faces = { faceOf: new Int32Array(topology.normals.length / 3).fill(-1), faces: [] };
+    found.set(geometry, faces);
   }
-  if (topology.faceOf[triangle] < 0) findFace(topology, triangle);
-  return topology.faces[topology.faceOf[triangle]];
+  if (faces.faceOf[triangle] < 0) findFace(topology, faces, triangle);
+  return faces.faces[faces.faceOf[triangle]];
 }
 
 /**
- * The triangles of `geometry`, their normals, and which meet which: across an edge whose two
- * ends each triangle has (by their points, as a mesh's faces each have corners of their own).
- * Typed arrays throughout: a mesh of a million triangles took seconds, a string and an array
- * made for each.
- * @param {BufferGeometry} geometry
- * @returns {Topology}
- */
-function topologyOf(geometry) {
-  const position = geometry.getAttribute('position');
-  const index = geometry.getIndex();
-  const count = (index ? index.count : position.count) / 3;
-  const sideCount = count * 3;
-  /** @param {number} side */
-  const vertex = (side) => (index ? index.getX(side) : side);
-  const pointOf = pointsOf(geometry);
-  const normals = new Float32Array(count * 3);
-  const a = new Vector3();
-  const b = new Vector3();
-  const c = new Vector3();
-  for (let t = 0; t < count; t++) {
-    a.fromBufferAttribute(position, vertex(t * 3));
-    b.fromBufferAttribute(position, vertex(t * 3 + 1));
-    c.fromBufferAttribute(position, vertex(t * 3 + 2));
-    c.sub(b)
-      .cross(a.sub(b))
-      .normalize()
-      .toArray(normals, t * 3);
-  }
-  // Each side's ends, the lower point first, so a side and its twin are one key
-  const low = new Int32Array(sideCount);
-  const high = new Int32Array(sideCount);
-  for (let side = 0; side < sideCount; side++) {
-    const next = side % 3 === 2 ? side - 2 : side + 1;
-    const p = pointOf[vertex(side)];
-    const q = pointOf[vertex(next)];
-    low[side] = Math.min(p, q);
-    high[side] = Math.max(p, q);
-  }
-  const edges = intern(
-    sideCount,
-    (side) => Math.imul(low[side], SPREAD[0]) ^ Math.imul(high[side], SPREAD[1]),
-    (side, other) => low[side] === low[other] && high[side] === high[other],
-  );
-  const start = new Int32Array(edges.count + 1);
-  for (let side = 0; side < sideCount; side++) start[edges.ids[side] + 1]++;
-  for (let edge = 0; edge < edges.count; edge++) start[edge + 1] += start[edge];
-  const sides = new Int32Array(sideCount);
-  const filled = start.slice(0, edges.count);
-  for (let side = 0; side < sideCount; side++) sides[filled[edges.ids[side]]++] = side;
-  return {
-    normals,
-    edgeOf: edges.ids,
-    start,
-    sides,
-    faceOf: new Int32Array(count).fill(-1),
-    faces: [],
-  };
-}
-
-/**
- * The point each vertex of `geometry` is at: vertices nearer than SAME_POINT of its size are at
- * one.
- * @param {BufferGeometry} geometry
- */
-function pointsOf(geometry) {
-  const position = geometry.getAttribute('position');
-  geometry.computeBoundingBox();
-  const size = geometry.boundingBox?.getSize(new Vector3()).length() || 1;
-  const step = size * SAME_POINT;
-  const grid = new Float64Array(position.count * 3);
-  for (let v = 0; v < position.count; v++) {
-    grid[v * 3] = Math.round(position.getX(v) / step);
-    grid[v * 3 + 1] = Math.round(position.getY(v) / step);
-    grid[v * 3 + 2] = Math.round(position.getZ(v) / step);
-  }
-  return intern(
-    position.count,
-    (v) =>
-      Math.imul(grid[v * 3], SPREAD[0]) ^
-      Math.imul(grid[v * 3 + 1], SPREAD[1]) ^
-      Math.imul(grid[v * 3 + 2], SPREAD[2]),
-    (v, w) =>
-      grid[v * 3] === grid[w * 3] &&
-      grid[v * 3 + 1] === grid[w * 3 + 1] &&
-      grid[v * 3 + 2] === grid[w * 3 + 2],
-  ).ids;
-}
-
-/**
- * Ids for `count` keys, the same for equal keys and counted from 0 in the order they first
- * come: by an open-addressing table of the first key of each id.
- * @param {number} count
- * @param {(key: number) => number} hash
- * @param {(key: number, other: number) => boolean} same
- * @returns {{ ids: Int32Array, count: number }}
- */
-function intern(count, hash, same) {
-  let size = 1;
-  while (size < count * TABLE_ROOM) size *= 2;
-  const mask = size - 1;
-  const firsts = new Int32Array(size).fill(-1);
-  const ids = new Int32Array(count);
-  let distinct = 0;
-  for (let key = 0; key < count; key++) {
-    for (let slot = hash(key) & mask; ; slot = (slot + 1) & mask) {
-      const first = firsts[slot];
-      if (first < 0) {
-        firsts[slot] = key;
-        ids[key] = distinct++;
-        break;
-      }
-      if (same(key, first)) {
-        ids[key] = ids[first];
-        break;
-      }
-    }
-  }
-  return { ids, count: distinct };
-}
-
-/**
- * Finds the face `seed` is in: the triangles reached across edges that turn less than the
- * feature edges' angle; flat when they all face the seed's way.
+ * Finds the face `seed` is in: the triangles reached across edges that don't turn; flat when
+ * they all face the seed's way.
  * @param {Topology} topology
+ * @param {Faces} found the faces found so far, which it joins
  * @param {number} seed
  */
-function findFace(topology, seed) {
-  const { normals, edgeOf, start, sides, faceOf, faces } = topology;
+function findFace(topology, { faceOf, faces }, seed) {
+  const { normals, edgeOf, start, sides } = topology;
   const id = faces.length;
   /** @param {number} t @param {number} u */
   const cos = (t, u) =>
@@ -246,7 +115,7 @@ function findFace(topology, seed) {
       const edge = edgeOf[side];
       for (let on = start[edge]; on < start[edge + 1]; on++) {
         const u = Math.floor(sides[on] / 3);
-        if (faceOf[u] >= 0 || cos(t, u) < SMOOTH_COS) continue;
+        if (faceOf[u] >= 0 || turns(topology, t, u)) continue;
         faceOf[u] = id;
         triangles.push(u);
         if (cos(seed, u) < FLAT_COS) flat = false;

package/src/viewer/hits.js

@@ -0,0 +1,41 @@
+// What a ray meets among a model's meshes, through a bounds tree of each geometry
+// (three-mesh-bvh), made the first time a ray is cast at it: three.js's own raycast tests every
+// triangle, 14 ms a pointer move at 500k triangles. The tree is indirect, so the geometry's
+// index stays as it is and a hit's `faceIndex` is the triangle the faces (faces.js) know.
+
+import { MeshBVH } from 'three-mesh-bvh';
+
+/** @import { BufferGeometry, Intersection, Mesh, Raycaster } from 'three' */
+
+/** @type {WeakMap<BufferGeometry, MeshBVH>} */
+const trees = new WeakMap();
+
+/**
+ * The hits of `raycaster`'s ray on `meshes` (not their children), nearest first, as
+ * `raycaster.intersectObjects(meshes, false)` gives them.
+ * @param {Raycaster} raycaster
+ * @param {Mesh[]} meshes
+ * @returns {Intersection[]}
+ */
+export function intersectMeshes(raycaster, meshes) {
+  /** @type {Intersection[]} */
+  const hits = [];
+  for (const mesh of meshes) {
+    if (!mesh.layers.test(raycaster.layers)) continue;
+    treeOf(mesh.geometry).raycastObject3D(mesh, raycaster, hits);
+  }
+  return hits.toSorted((a, b) => a.distance - b.distance);
+}
+
+/**
+ * @param {BufferGeometry} geometry
+ * @returns {MeshBVH}
+ */
+function treeOf(geometry) {
+  let tree = trees.get(geometry);
+  if (!tree) {
+    tree = new MeshBVH(geometry, { indirect: true });
+    trees.set(geometry, tree);
+  }
+  return tree;
+}

package/src/viewer/hover-mark.js

@@ -19,6 +19,8 @@ import { faceTriangles } from './faces.js';
 /** How much of the selection's colour the copy under the pointer takes on, and its face. */
 export const COPY_GLOW = 0.2;
 export const FACE_GLOW = 0.4;
+/** A mark is drawn this far after its mesh in the order: before the next (orders are whole). */
+const MARK_AFTER = 0.5;
 /** What a mark draws while it marks nothing. */
 const NOTHING = new BufferGeometry();
 
@@ -72,6 +74,9 @@ export class HoverMark {
           material.needsUpdate = true;
         }
         mesh.add(this.#copy);
+        // Over the mesh, a drawing's shape drawn in its order (model.js), before what is next
+        this.#copy.renderOrder = mesh.renderOrder + MARK_AFTER;
+        this.#face.renderOrder = mesh.renderOrder + MARK_AFTER;
       }
     }
     this.#face.removeFromParent();

package/src/viewer/model.js

@@ -7,7 +7,6 @@
 
 import {
   DoubleSide,
-  EdgesGeometry,
   Float32BufferAttribute,
   BufferGeometry,
   GreaterDepth,
@@ -21,14 +20,14 @@ import {
 } from 'three';
 import { SVGLoader } from 'three/addons/loaders/SVGLoader.js';
 import { disposeGeometries } from './dispose.js';
+import { LAYERS } from './environment.js';
+import { featureEdgesOf } from './topology.js';
 
 /** @import { Material, Object3D } from 'three' */
 /** @import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js' */
 /** @import { Model, Part } from '@kupcad/protocol/types' */
 /** @import { SceneModel, Shape, Theme } from './types.js' */
 
-/** Where a solid's faces meet at more than this many degrees, an edge is drawn: its features. */
-export const EDGE_ANGLE_DEG = 20;
 /** A ghost is seen through. */
 export const GHOST_OPACITY = 0.2;
 /** How much of a highlighted solid shows where something hides it. */
@@ -147,7 +146,7 @@ function solidShape(mesh, partOf, nodeName, { edgeMaterial, highlightEdges }, th
   if (highlighted) material.color.set(theme.highlight);
   Object.assign(material, FACES_BEHIND_EDGES);
   const edges = new LineSegments(
-    new EdgesGeometry(mesh.geometry, EDGE_ANGLE_DEG),
+    featureEdgesOf(mesh.geometry),
     highlighted ? highlightEdges : edgeMaterial,
   );
   mesh.add(edges);
@@ -204,7 +203,9 @@ function partAbove(object, partOf, nodeName) {
 /**
  * A drawing (export_svg's) on the XY plane: each filled path a shape named by its id, with its
  * outline; an open path its outline alone. The core negated every y, SVG's running down the
- * page; the group turns it back.
+ * page; the group turns it back. Its paths are drawn in the file's order, each over the floor
+ * and the ones before it, as SVG draws them: all at z = 0, by depth they fought, a shape's
+ * letters lost in streaks of the plate under them, and the floor's grid over both.
  * @param {string} svg
  * @param {Theme} theme
  * @returns {SceneModel}
@@ -212,8 +213,11 @@ function partAbove(object, partOf, nodeName) {
 function drawing(svg, theme) {
   const root = new Group();
   root.scale.y = -1;
-  // Outlines on the background
-  const edgeMaterial = new LineBasicMaterial({ color: theme.wire });
+  root.renderOrder = LAYERS.drawing;
+  let order = 0;
+  // Outlines on the background. Each thing a drawing draws is see-through to three.js, as are
+  // its fills, which it draws after everything opaque whatever their order: one list, in order
+  const edgeMaterial = new LineBasicMaterial({ color: theme.wire, transparent: true });
   /** @type {Shape[]} */
   const shapes = [];
   for (const path of new SVGLoader().parse(svg).paths) {
@@ -222,6 +226,7 @@ function drawing(svg, theme) {
     const filled = style.fill !== undefined && style.fill !== 'none';
     const edges = new LineSegments(outlineOf(path, filled), edgeMaterial);
     if (!filled) {
+      edges.renderOrder = order++;
       root.add(edges);
       continue;
     }
@@ -229,11 +234,14 @@ function drawing(svg, theme) {
     const material = new MeshBasicMaterial({
       color: path.color,
       side: DoubleSide,
-      transparent: opacity < 1,
+      transparent: true,
       opacity,
-      ...FACES_BEHIND_EDGES,
+      // Over what is drawn before it; it writes no depth then, so its outline, after it, shows
+      depthTest: false,
     });
     const mesh = new Mesh(new ShapeGeometry(path.toShapes()), material);
+    mesh.renderOrder = order++;
+    edges.renderOrder = order++;
     mesh.add(edges);
     root.add(mesh);
     const id = /** @type {Element | undefined} */ (path.userData?.node)?.getAttribute('id');

package/src/viewer/section.js

@@ -2,13 +2,14 @@
 // cuts capped where the plane runs inside a solid, by three.js's stencil technique
 // (webgl_clipping_stencil): each solid's back faces count up in the stencil buffer and its front
 // faces down, both clipped, so where the count isn't 0 the plane is inside a solid, and a plane
-// drawn there in the cap's colour closes the cut.
+// drawn there in the cap's colour closes the cut. A face on the plane (a cut at the bottom, or
+// at a step's height) is kept: whether it was clipped was the rounding of each pixel's, so the
+// count, and the cap, came and went in streaks.
 
 import {
   AlwaysStencilFunc,
   BackSide,
   DecrementWrapStencilOp,
-  DoubleSide,
   FrontSide,
   Group,
   IncrementWrapStencilOp,
@@ -35,6 +36,11 @@ export const RENDER_ORDER = { stencil: 1, cap: 1.1, model: 2 };
 const AXES = { x: new Vector3(1, 0, 0), y: new Vector3(0, 1, 0), z: new Vector3(0, 0, 1) };
 /** The cap plane reaches this far past the model's bounding sphere's radius. */
 const CAP_REACH = 4;
+/**
+ * The plane lies this far (of the model's radius) past the offset, toward what is cut away, so
+ * a face at the offset is kept whatever the rounding: far past it, a hair to the eye.
+ */
+const KEEP_ON_PLANE = 1e-4;
 const PLANE_NORMAL = new Vector3(0, 0, 1);
 
 export class SectionView {
@@ -58,8 +64,9 @@ export class SectionView {
   constructor(theme) {
     const material = new MeshStandardMaterial({
       color: theme.cap,
-      // Seen from the side cut away, against the plane's normal, which points to what is kept
-      side: DoubleSide,
+      // Seen from the side cut away, its back: its normal is the plane's, which points to what
+      // is kept. From that side the solid hides it, so a face on the plane can't fight it there
+      side: BackSide,
       stencilWrite: true,
       stencilRef: 0,
       stencilFunc: NotEqualStencilFunc,
@@ -95,6 +102,7 @@ export class SectionView {
       // What lies past the offset, along the axis (against it when flipped), is cut away
       this.plane.normal.copy(AXES[cut.section.axis]).multiplyScalar(cut.section.flip ? 1 : -1);
       this.plane.constant = cut.section.flip ? -cut.section.offset : cut.section.offset;
+      this.plane.constant += bounds.radius * KEEP_ON_PLANE;
     }
     this.cap.visible = cut !== null && capped;
     for (const material of [...(model ? ownMaterials(model) : []), ...also]) {

package/src/viewer/theme.js

@@ -3,16 +3,18 @@
 // a picked part in its orangered, on the neutrals of @kupcad/ui's tokens; a section's cut
 // faces in dodgerblue, so no other warm colour reads as the selection.
 
+import { BRAND } from './brand.js';
+
 /** @import { Theme } from './types.js' */
 
 /** @type {Theme} */
 export const LIGHT = {
   background: '#eef1f4',
   grid: '#c9cfd6',
-  plate: '#e3e7eb',
-  edges: '#1a1b1c',
-  wire: '#1a1b1c',
-  selection: '#ff5f14',
+  plate: BRAND.gainsboro,
+  edges: BRAND.black,
+  wire: BRAND.black,
+  selection: BRAND.orange,
   cap: '#0099ff',
   ghost: '#7d8794',
   highlight: '#d6409f',
@@ -25,7 +27,7 @@ export const DARK = {
   plate: '#1f2022',
   edges: '#0b0b0c',
   wire: '#c9ced4',
-  selection: '#ff5f14',
+  selection: BRAND.orange,
   cap: '#3daeff',
   ghost: '#8a94a1',
   highlight: '#f06cb8',

package/src/viewer/topology.js

@@ -0,0 +1,223 @@
+// A geometry's triangles as a surface: which meet which across an edge, by their corners' points
+// (a mesh's faces may each have corners of their own), and the way each faces. Found once per
+// geometry and kept beside it: the model's feature edges are drawn from it (model.js), where two
+// triangles turn by more than EDGE_ANGLE_DEG, and the faces they bound are found in it (faces.js),
+// so an edge and a face's border are one.
+
+import { BufferGeometry, Float32BufferAttribute, Vector3 } from 'three';
+
+/** Where a solid's faces meet at more than this many degrees, an edge is drawn: its features. */
+export const EDGE_ANGLE_DEG = 20;
+const EDGE_COS = Math.cos((EDGE_ANGLE_DEG * Math.PI) / 180);
+/** Two corners nearer than this, of the geometry's size, are one point: its triangles meet there. */
+const SAME_POINT = 1e-6;
+/** Slots in a hash table per key it is given, at least: it stays at most half full. */
+const TABLE_ROOM = 2;
+/** Odd numbers that spread a key's parts over a hash table's slots. */
+const SPREAD = [0x9e3779b1, 0x85ebca77, 0xc2b2ae3d];
+
+/**
+ * A geometry's triangles and which meet which across an edge. A triangle's sides are numbered
+ * `triangle * 3 + corner`, each from its corner to the next.
+ * @typedef {object} Topology
+ * @property {Float32Array} normals a unit normal per triangle, 3 numbers each
+ * @property {Uint8Array} degenerate 1 for a triangle two of whose corners are one point
+ * @property {Int32Array} edgeOf the edge each side lies on, by its ends' points
+ * @property {Int32Array} start where each edge's sides begin in `sides` (one more, the end)
+ * @property {Int32Array} sides the sides on each edge, edge by edge
+ */
+
+/** @type {WeakMap<BufferGeometry, Topology>} */
+const topologies = new WeakMap();
+
+/**
+ * The topology of `geometry`, found the first time it is asked for.
+ * @param {BufferGeometry} geometry
+ * @returns {Topology}
+ */
+export function topologyOf(geometry) {
+  let topology = topologies.get(geometry);
+  if (!topology) {
+    topology = build(geometry);
+    topologies.set(geometry, topology);
+  }
+  return topology;
+}
+
+/**
+ * Whether triangles `t` and `u` turn by more than EDGE_ANGLE_DEG where they meet: an edge is
+ * drawn between them, and they are of two faces.
+ * @param {Topology} topology
+ * @param {number} t
+ * @param {number} u
+ */
+export function turns({ normals }, t, u) {
+  const cos =
+    normals[t * 3] * normals[u * 3] +
+    normals[t * 3 + 1] * normals[u * 3 + 1] +
+    normals[t * 3 + 2] * normals[u * 3 + 2];
+  return cos <= EDGE_COS;
+}
+
+/**
+ * The feature edges of `geometry` as line segments: each edge where its two triangles turn by
+ * more than EDGE_ANGLE_DEG, or with one triangle (the border of an open mesh) or more than two;
+ * a degenerate triangle has none. As three.js's EdgesGeometry draws them, which made a string for
+ * each corner: 1.2 s at 500k triangles.
+ * @param {BufferGeometry} geometry
+ * @returns {BufferGeometry}
+ */
+export function featureEdgesOf(geometry) {
+  const topology = topologyOf(geometry);
+  const { degenerate, start, sides } = topology;
+  const position = geometry.getAttribute('position');
+  const index = geometry.getIndex();
+  /** @param {number} side */
+  const vertex = (side) => (index ? index.getX(side) : side);
+  const drawn = [];
+  for (let edge = 0; edge + 1 < start.length; edge++) {
+    let first = -1;
+    let count = 0;
+    let turned = false;
+    for (let on = start[edge]; on < start[edge + 1]; on++) {
+      const t = Math.floor(sides[on] / 3);
+      if (degenerate[t]) continue;
+      if (count === 0) first = sides[on];
+      else turned = turns(topology, Math.floor(first / 3), t);
+      count++;
+    }
+    if (count === 1 || count > 2 || turned) drawn.push(first);
+  }
+  const positions = new Float32Array(drawn.length * 6);
+  drawn.forEach((side, i) => {
+    for (const [end, v] of [vertex(side), vertex(nextSide(side))].entries()) {
+      positions[i * 6 + end * 3] = position.getX(v);
+      positions[i * 6 + end * 3 + 1] = position.getY(v);
+      positions[i * 6 + end * 3 + 2] = position.getZ(v);
+    }
+  });
+  return new BufferGeometry().setAttribute('position', new Float32BufferAttribute(positions, 3));
+}
+
+/**
+ * The side after `side` around its triangle.
+ * @param {number} side
+ */
+function nextSide(side) {
+  return side % 3 === 2 ? side - 2 : side + 1;
+}
+
+/**
+ * The triangles of `geometry`, their normals, and which meet which: across an edge whose two
+ * ends each triangle has (by their points, as a mesh's faces each have corners of their own).
+ * Typed arrays throughout: a mesh of a million triangles took seconds, a string and an array
+ * made for each.
+ * @param {BufferGeometry} geometry
+ * @returns {Topology}
+ */
+function build(geometry) {
+  const position = geometry.getAttribute('position');
+  const index = geometry.getIndex();
+  const count = (index ? index.count : position.count) / 3;
+  const sideCount = count * 3;
+  /** @param {number} side */
+  const vertex = (side) => (index ? index.getX(side) : side);
+  const pointOf = pointsOf(geometry);
+  const normals = new Float32Array(count * 3);
+  const a = new Vector3();
+  const b = new Vector3();
+  const c = new Vector3();
+  for (let t = 0; t < count; t++) {
+    a.fromBufferAttribute(position, vertex(t * 3));
+    b.fromBufferAttribute(position, vertex(t * 3 + 1));
+    c.fromBufferAttribute(position, vertex(t * 3 + 2));
+    c.sub(b)
+      .cross(a.sub(b))
+      .normalize()
+      .toArray(normals, t * 3);
+  }
+  // Each side's ends, the lower point first, so a side and its twin are one key
+  const low = new Int32Array(sideCount);
+  const high = new Int32Array(sideCount);
+  const degenerate = new Uint8Array(count);
+  for (let side = 0; side < sideCount; side++) {
+    const p = pointOf[vertex(side)];
+    const q = pointOf[vertex(nextSide(side))];
+    low[side] = Math.min(p, q);
+    high[side] = Math.max(p, q);
+    if (p === q) degenerate[Math.floor(side / 3)] = 1;
+  }
+  const edges = intern(
+    sideCount,
+    (side) => Math.imul(low[side], SPREAD[0]) ^ Math.imul(high[side], SPREAD[1]),
+    (side, other) => low[side] === low[other] && high[side] === high[other],
+  );
+  const start = new Int32Array(edges.count + 1);
+  for (let side = 0; side < sideCount; side++) start[edges.ids[side] + 1]++;
+  for (let edge = 0; edge < edges.count; edge++) start[edge + 1] += start[edge];
+  const sides = new Int32Array(sideCount);
+  const filled = start.slice(0, edges.count);
+  for (let side = 0; side < sideCount; side++) sides[filled[edges.ids[side]]++] = side;
+  return { normals, degenerate, edgeOf: edges.ids, start, sides };
+}
+
+/**
+ * The point each vertex of `geometry` is at: vertices nearer than SAME_POINT of its size are at
+ * one.
+ * @param {BufferGeometry} geometry
+ */
+function pointsOf(geometry) {
+  const position = geometry.getAttribute('position');
+  geometry.computeBoundingBox();
+  const size = geometry.boundingBox?.getSize(new Vector3()).length() || 1;
+  const step = size * SAME_POINT;
+  const grid = new Float64Array(position.count * 3);
+  for (let v = 0; v < position.count; v++) {
+    grid[v * 3] = Math.round(position.getX(v) / step);
+    grid[v * 3 + 1] = Math.round(position.getY(v) / step);
+    grid[v * 3 + 2] = Math.round(position.getZ(v) / step);
+  }
+  return intern(
+    position.count,
+    (v) =>
+      Math.imul(grid[v * 3], SPREAD[0]) ^
+      Math.imul(grid[v * 3 + 1], SPREAD[1]) ^
+      Math.imul(grid[v * 3 + 2], SPREAD[2]),
+    (v, w) =>
+      grid[v * 3] === grid[w * 3] &&
+      grid[v * 3 + 1] === grid[w * 3 + 1] &&
+      grid[v * 3 + 2] === grid[w * 3 + 2],
+  ).ids;
+}
+
+/**
+ * Ids for `count` keys, the same for equal keys and counted from 0 in the order they first
+ * come: by an open-addressing table of the first key of each id.
+ * @param {number} count
+ * @param {(key: number) => number} hash
+ * @param {(key: number, other: number) => boolean} same
+ * @returns {{ ids: Int32Array, count: number }}
+ */
+function intern(count, hash, same) {
+  let size = 1;
+  while (size < count * TABLE_ROOM) size *= 2;
+  const mask = size - 1;
+  const firsts = new Int32Array(size).fill(-1);
+  const ids = new Int32Array(count);
+  let distinct = 0;
+  for (let key = 0; key < count; key++) {
+    for (let slot = hash(key) & mask; ; slot = (slot + 1) & mask) {
+      const first = firsts[slot];
+      if (first < 0) {
+        firsts[slot] = key;
+        ids[key] = distinct++;
+        break;
+      }
+      if (same(key, first)) {
+        ids[key] = ids[first];
+        break;
+      }
+    }
+  }
+  return { ids, count: distinct };
+}