react-cheminfo 0.10.0 → 0.11.0

package/src/scatter3d/ui/CloudShellLayer.tsx

@@ -0,0 +1,107 @@
+import type { ReactElement } from 'react';
+import { memo, useId } from 'react';
+
+import type { ConfidenceEllipsoid } from '../core/confidenceEllipsoid.ts';
+import type { OrbitCamera, OrbitViewport } from '../core/orbitCamera.ts';
+
+import { projectShellOutline } from './cloudGeometry.ts';
+import { SHELL_FILL_OPACITY, shellGlassStops } from './cloudShellStyles.ts';
+
+/** One group's shell, fitted once and ready to be turned. */
+export interface CloudShell {
+  /** A stable key, so a re-render does not rebuild every shell. */
+  id: string;
+  /** Its colour, which is its group's. */
+  color: string;
+  /** The shape it summarises, in cube units. */
+  ellipsoid: ConfidenceEllipsoid;
+  /**
+   * How strongly it is drawn, from a legend entry switching its group off.
+   * @default 1
+   */
+  opacity?: number;
+}
+
+/** What {@link CloudShellLayer} draws. */
+export interface CloudShellLayerProps {
+  /** The shells, one per group that has one. */
+  shells: readonly CloudShell[];
+  /** Where the reader is standing. */
+  camera: OrbitCamera;
+  /** Where the middle of the cube is, and how large it is drawn. */
+  viewport: OrbitViewport;
+  /**
+   * How solid one wall of the glass is. Turn it down when many groups overlap,
+   * since two shells crossing compound to twice this.
+   * @default 0.1
+   */
+  fillOpacity?: number;
+}
+
+/**
+ * The group shells, as translucent glass.
+ *
+ * Each one is drawn as a single ellipse, because that is exactly what a shell
+ * looks like: an orthographic camera sends a sphere carried by three axes to
+ * an ellipse, whatever it is turned to. So the outline is a curve rather than
+ * a ring of facets, it stays a curve at any zoom, and there are no seams
+ * between neighbouring faces to read as a wireframe.
+ *
+ * What the faces were for is kept in the fill. A ray through a shell crosses
+ * it twice — the near wall and the far one — so the glass is darkest where the
+ * reader looks through both walls at a glancing angle, which is the rim, and
+ * lightest through the middle where the far wall is turned away. That is one
+ * gradient, and it says the shell is a solid the same way a hundred and sixty
+ * stacked polygons did.
+ * @param props - See {@link CloudShellLayerProps}.
+ * @returns The shells.
+ */
+export const CloudShellLayer = memo(function CloudShellLayer(
+  props: CloudShellLayerProps,
+): ReactElement {
+  const { shells, camera, viewport, fillOpacity = SHELL_FILL_OPACITY } = props;
+  const prefix = useId();
+
+  const drawn = [];
+  for (const shell of shells) {
+    const outline = projectShellOutline(shell.ellipsoid, camera, viewport);
+    if (outline === null) continue;
+    drawn.push({ shell, outline });
+  }
+  // Furthest first, so a shell in front of another is drawn over it.
+  drawn.sort((a, b) => a.outline.depth - b.outline.depth);
+
+  return (
+    <g data-layer="shells" pointerEvents="none">
+      {drawn.map(({ shell, outline }) => {
+        const paint = `${prefix}${shell.id}`;
+        return (
+          <g key={shell.id} data-shell={shell.id}>
+            <defs>
+              <radialGradient id={paint}>
+                {shellGlassStops((shell.opacity ?? 1) * fillOpacity).map(
+                  (stop) => (
+                    <stop
+                      key={stop.offset}
+                      offset={stop.offset}
+                      stopColor={shell.color}
+                      stopOpacity={stop.opacity}
+                    />
+                  ),
+                )}
+              </radialGradient>
+            </defs>
+            <ellipse
+              cx={outline.cx}
+              cy={outline.cy}
+              rx={outline.rx}
+              ry={outline.ry}
+              transform={`rotate(${outline.angle} ${outline.cx} ${outline.cy})`}
+              fill={`url(#${paint})`}
+            />
+          </g>
+        );
+      })}
+    </g>
+  );
+});

package/src/scatter3d/ui/ScatterCloud.tsx

@@ -0,0 +1,312 @@
+import type { MouseEvent as ReactMouseEvent, ReactElement } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+import {
+  CHART_WHEEL_DWELL,
+  useWheelZoom,
+} from '../../chart/ui/useWheelZoom.ts';
+import type { ScatterSelectionMode } from '../../scatter/core/scatterSelection.ts';
+import { nearestPointIndex } from '../../scatter/core/screenPoints.ts';
+import { ScatterLabelLayer } from '../../scatter/ui/ScatterLabelLayer.tsx';
+import { ScatterMarkLayer } from '../../scatter/ui/ScatterMarkLayer.tsx';
+import { surfacePosition } from '../../scatter/ui/lassoGesture.ts';
+import {
+  SCATTER_GROUP_LABEL_SIZE,
+  SCATTER_LABEL_SIZE,
+} from '../../scatter/ui/scatterLabelBoxes.ts';
+import { placeScatterLabels } from '../../scatter/ui/scatterLabelPlacement.ts';
+import {
+  scatterGroupLabels,
+  scatterPointLabels,
+} from '../../scatter/ui/scatterLabels.ts';
+import {
+  LASSO_STYLE,
+  scatterGroupInk,
+} from '../../scatter/ui/scatterPlotModel.ts';
+import { useScatterInteraction } from '../../scatter/ui/useScatterInteraction.ts';
+import { cubePoints } from '../core/cubePoints.ts';
+import type { OrbitCamera } from '../core/orbitCamera.ts';
+import { DEFAULT_ORBIT_CAMERA } from '../core/orbitCamera.ts';
+
+import { CloudFrameLayer } from './CloudFrameLayer.tsx';
+import { CloudPointLayer } from './CloudPointLayer.tsx';
+import type { CloudShell } from './CloudShellLayer.tsx';
+import { CloudShellLayer } from './CloudShellLayer.tsx';
+import { cloudView, projectCloud } from './cloudGeometry.ts';
+import { clampCloudZoom } from './cloudZoom.ts';
+import { cloudLabel, cloudShells } from './scatterCloudModel.ts';
+import type { ScatterCloudProps } from './scatterCloudProps.ts';
+import { useOrbitDrag } from './useOrbitDrag.ts';
+
+export type { CloudGesture, ScatterCloudProps } from './scatterCloudProps.ts';
+
+/**
+ * A cloud of samples in a box the reader can turn, with a glass shell around
+ * each group.
+ *
+ * It is the flat scatter's twin and shares with it everything it can — the
+ * selection, the lasso, the hover card, the labels and the group colours are
+ * the same hooks and the same helpers — because a reader who has learned the
+ * map must not have to learn this separately. What it cannot share is the
+ * frame: three axes seen from an angle have no room for three sets of tick
+ * labels, so the axes are all stretched to one cube, the frame names them, and
+ * the numbers stay in the card the pointer raises.
+ *
+ * It draws in SVG rather than in WebGL, and that is a decision about saving
+ * rather than about drawing. Every other figure in this package is saved from
+ * the bar above it as an SVG, and a canvas laid over the same picture would
+ * leave a hole in that file exactly where the shells are.
+ * @param props - See {@link ScatterCloudProps}.
+ * @returns The cloud.
+ */
+export function ScatterCloud(props: ScatterCloudProps): ReactElement {
+  const { x, y, z, width, height, xLabel, yLabel, zLabel } = props;
+  const { groupOf, groups, mutedGroups, ellipsoid = null } = props;
+  const { ellipsoidMinimumPoints, ellipsoidFillOpacity } = props;
+  const { showGroupLabels = false, pointLabels, pointRadius = 3.5 } = props;
+  const { outlinedFrom, selected, defaultSelected, onSelectionChange } = props;
+  const { selectMode = 'replace', onHoverChange, overlay } = props;
+  const { onPointDoubleClick } = props;
+  const { gesture = 'turn', wheelZoom = true, label, testId } = props;
+
+  const [ownCamera, setOwnCamera] = useState<OrbitCamera>(DEFAULT_ORBIT_CAMERA);
+  const [ownZoom, setOwnZoom] = useState(1);
+  const camera = props.camera ?? ownCamera;
+  const zoom = props.zoom ?? ownZoom;
+  const selecting = gesture === 'select';
+
+  const view = useMemo(
+    () => cloudView(width, height, zoom),
+    [height, width, zoom],
+  );
+  const cube = useMemo(() => cubePoints(x, y, z), [x, y, z]);
+  const cloud = useMemo(
+    () => projectCloud(cube, camera, view.viewport),
+    [camera, cube, view.viewport],
+  );
+  const ink = useMemo(
+    () => scatterGroupInk(groups, mutedGroups),
+    [groups, mutedGroups],
+  );
+  const shells = useMemo<readonly CloudShell[]>(
+    () =>
+      ellipsoid === null || groupOf === undefined || groups === undefined
+        ? NO_SHELLS
+        : cloudShells({
+            cube,
+            groupOf,
+            groups,
+            ink,
+            size: ellipsoid,
+            minimumPoints: ellipsoidMinimumPoints,
+          }),
+    [cube, ellipsoid, ellipsoidMinimumPoints, groupOf, groups, ink],
+  );
+
+  const interaction = useScatterInteraction({
+    points: cloud.points,
+    selected,
+    defaultSelected,
+    onSelectionChange,
+    selectMode,
+    enabled: selecting,
+    touchLasso: selecting,
+    hoverRadius: pointRadius + HOVER_SLACK,
+    onHoverChange,
+  });
+
+  // Everything a gesture callback reads is taken from here rather than from
+  // the closure, so a caller that owns the camera and answers with an inline
+  // arrow — which is how every caller writes it — does not rebuild the drag
+  // sixty times during its own turn.
+  const live = useRef({ camera, zoom, points: cloud.points, props });
+  useLayoutEffect(() => {
+    live.current = { camera, zoom, points: cloud.points, props };
+  });
+
+  const { select, mask } = interaction.selection;
+  const { moveTo, leave, pin, unpin, hovered } = interaction.hover;
+
+  const onOrbit = useCallback((turn: (was: OrbitCamera) => OrbitCamera) => {
+    const next = turn(live.current.camera);
+    // Written back so the frames of one drag compose, rather than each of them
+    // turning the camera React has not re-rendered with yet.
+    live.current.camera = next;
+    if (live.current.props.camera === undefined) setOwnCamera(next);
+    live.current.props.onCameraChange?.(next);
+  }, []);
+
+  const onTap = useCallback(
+    (tapX: number, tapY: number, mode: ScatterSelectionMode) => {
+      const radius = (live.current.props.pointRadius ?? 3.5) + HOVER_SLACK;
+      const index = nearestPointIndex(live.current.points, tapX, tapY, radius);
+      if (index === -1) {
+        unpin();
+        if (mode === 'replace') interaction.selection.clear();
+        return;
+      }
+      select([index], mode, 'point');
+      pin(index);
+    },
+    [interaction.selection, pin, select, unpin],
+  );
+
+  const onWheel = useCallback((_x: number, _y: number, factor: number) => {
+    // A factor above one widens a frame, which on a box means standing back.
+    const next = clampCloudZoom(live.current.zoom / factor);
+    live.current.zoom = next;
+    if (live.current.props.zoom === undefined) setOwnZoom(next);
+    live.current.props.onZoomChange?.(next);
+  }, []);
+
+  function handleDoubleClick(event: ReactMouseEvent<SVGRectElement>): void {
+    if (onPointDoubleClick === undefined) return;
+    const at = surfacePosition(event, 0, 0);
+    const radius = (live.current.props.pointRadius ?? 3.5) + HOVER_SLACK;
+    const index = nearestPointIndex(live.current.points, at.x, at.y, radius);
+    if (index === -1) return;
+    onPointDoubleClick({
+      index,
+      x: at.x,
+      y: at.y,
+      clientX: event.clientX,
+      clientY: event.clientY,
+    });
+  }
+
+  const orbit = useOrbitDrag({
+    enabled: !selecting,
+    onOrbit,
+    onTap,
+    onMove: moveTo,
+    onLeave: leave,
+    mode: selectMode,
+  });
+  const { ref: wheelSurface } = useWheelZoom<SVGRectElement>({
+    enabled: wheelZoom,
+    delay: CHART_WHEEL_DWELL,
+    onZoom: onWheel,
+  });
+
+  const named = useMemo(
+    () =>
+      pointLabels === undefined
+        ? undefined
+        : placeScatterLabels(
+            scatterPointLabels(cloud.points, pointLabels, {
+              groupOf,
+              colors: ink.colors,
+            }),
+            {
+              fontSize: SCATTER_LABEL_SIZE,
+              radius: pointRadius,
+              bounds: view.rect,
+            },
+          ),
+    [cloud.points, groupOf, ink.colors, pointLabels, pointRadius, view.rect],
+  );
+  const crowds = useMemo(
+    () =>
+      showGroupLabels && groups !== undefined
+        ? placeScatterLabels(
+            scatterGroupLabels(
+              cloud.points,
+              groups.map((group) => group.label),
+              { groupOf, colors: ink.colors },
+            ),
+            {
+              fontSize: SCATTER_GROUP_LABEL_SIZE,
+              bold: true,
+              centered: true,
+              radius: pointRadius,
+              bounds: view.rect,
+            },
+          )
+        : undefined,
+    [
+      cloud.points,
+      groupOf,
+      groups,
+      ink.colors,
+      pointRadius,
+      showGroupLabels,
+      view.rect,
+    ],
+  );
+
+  return (
+    <div
+      data-testid={testId}
+      style={{ position: 'relative', width, height }}
+      role="img"
+      aria-label={label ?? cloudLabel(xLabel, yLabel, zLabel, cube.length)}
+    >
+      <svg width={width} height={height} style={SVG_STYLE}>
+        <CloudFrameLayer
+          camera={camera}
+          viewport={view.viewport}
+          xLabel={xLabel}
+          yLabel={yLabel}
+          zLabel={zLabel}
+        />
+        <CloudShellLayer
+          shells={shells}
+          camera={camera}
+          viewport={view.viewport}
+          fillOpacity={ellipsoidFillOpacity}
+        />
+        <CloudPointLayer
+          points={cloud.points}
+          depths={cloud.depths}
+          order={cloud.order}
+          groupOf={groupOf}
+          colors={ink.colors}
+          opacities={ink.opacities}
+          radius={pointRadius}
+          outlinedFrom={outlinedFrom}
+        />
+        <ScatterMarkLayer
+          points={cloud.points}
+          selected={mask}
+          hovered={hovered}
+          radius={pointRadius}
+        />
+        {named === undefined ? null : (
+          <ScatterLabelLayer labels={named} radius={pointRadius} />
+        )}
+        {crowds === undefined ? null : (
+          <ScatterLabelLayer labels={crowds} radius={pointRadius} strong />
+        )}
+        {interaction.lasso.pathData === '' ? null : (
+          <path d={interaction.lasso.pathData} {...LASSO_STYLE} />
+        )}
+        <rect
+          x={0}
+          y={0}
+          width={Math.max(0, width)}
+          height={Math.max(0, height)}
+          ref={wheelSurface}
+          fill="transparent"
+          onDoubleClick={handleDoubleClick}
+          {...(selecting ? interaction.surface : orbit.surface)}
+        />
+      </svg>
+      {overlay}
+    </div>
+  );
+}
+
+/**
+ * How much further than a dot's own radius the pointer may be and still catch
+ * it.
+ *
+ * More slack than the map allows, because a dot in a cloud is a smaller target
+ * than the same dot on a map: the box is turned, so the dots are packed into a
+ * hexagon rather than spread over a rectangle, and the ones at the back are
+ * drawn smaller still.
+ */
+const HOVER_SLACK = 8.5;
+
+const NO_SHELLS: readonly CloudShell[] = [];
+
+const SVG_STYLE = { display: 'block', touchAction: 'none' } as const;

package/src/scatter3d/ui/cloudGeometry.ts

@@ -0,0 +1,200 @@
+/**
+ * Where the cube, the cloud and the shells land on screen for one camera.
+ *
+ * Everything a cloud draws is cut once, in cube units, and re-projected on
+ * every turn — so an orbit costs one multiply-add per vertex and nothing else.
+ * That is what keeps a drag smooth on a figure holding a dozen shells of a
+ * hundred and sixty faces each, and it is why the cutting and the projecting
+ * are two steps rather than one.
+ */
+
+import type { ScreenPoints } from '../../scatter/core/screenPoints.ts';
+import type { ConfidenceEllipsoid } from '../core/confidenceEllipsoid.ts';
+import { ellipsoidSilhouette } from '../core/ellipsoidSilhouette.ts';
+import type {
+  OrbitCamera,
+  OrbitViewport,
+  Vector3,
+} from '../core/orbitCamera.ts';
+import { projectPoint } from '../core/orbitCamera.ts';
+
+/** Room kept between the figure's edge and the cube, in pixels. */
+export const CLOUD_MARGIN = 16;
+
+/**
+ * How much of the shorter side the cube spans before the reader zooms.
+ *
+ * Well short of the whole: the cube is drawn turned, so its silhouette is a
+ * hexagon as wide as its body diagonal, and a cube sized to the box edge-on
+ * would push two of its corners past the frame the moment it was turned.
+ */
+export const CLOUD_FILL = 0.62;
+
+/** The rectangle the cloud is drawn in, and how the cube maps into it. */
+export interface CloudView {
+  /** The drawing area, ready to spread onto a `<rect>`. */
+  rect: { x: number; y: number; width: number; height: number };
+  /** Where the middle of the cube sits, and how large it is drawn. */
+  viewport: OrbitViewport;
+}
+
+/**
+ * The drawing area and the cube's place in it.
+ * @param width - Total width of the figure, in pixels.
+ * @param height - Total height.
+ * @param zoom - What the reader has zoomed to; `1` is the resting size.
+ * @returns See {@link CloudView}.
+ */
+export function cloudView(
+  width: number,
+  height: number,
+  zoom: number,
+): CloudView {
+  const inner = Math.max(0, width - CLOUD_MARGIN * 2);
+  const tall = Math.max(0, height - CLOUD_MARGIN * 2);
+  const factor = Number.isFinite(zoom) && zoom > 0 ? zoom : 1;
+  return {
+    rect: { x: CLOUD_MARGIN, y: CLOUD_MARGIN, width: inner, height: tall },
+    viewport: {
+      scale: (Math.min(inner, tall) / 2) * CLOUD_FILL * factor,
+      centerX: CLOUD_MARGIN + inner / 2,
+      centerY: CLOUD_MARGIN + tall / 2,
+    },
+  };
+}
+
+/** Where every sample landed, and in what order they are painted. */
+export interface CloudCloud {
+  /** The positions, in the same space a gesture arrives in. */
+  points: ScreenPoints;
+  /** How far towards the reader each one is, in cube units. */
+  depths: Float64Array;
+  /** The rows, furthest first, which is the order they are drawn in. */
+  order: Uint32Array;
+}
+
+/**
+ * Every sample, projected and ordered back to front.
+ *
+ * The order is what makes the cloud read as a solid: a dot at the front drawn
+ * over a dot at the back says which is which, where the same two dots in row
+ * order say nothing at all. It is a separate array rather than a sorted copy
+ * of the points because the hit test, the labels and the selection all index
+ * by row and must not be reordered with the painting.
+ * @param cube - Every sample, in cube units.
+ * @param camera - Where the reader is standing.
+ * @param viewport - Where the middle of the cube is, and how large it is drawn.
+ * @returns See {@link CloudCloud}.
+ */
+export function projectCloud(
+  cube: readonly Vector3[],
+  camera: OrbitCamera,
+  viewport: OrbitViewport,
+): CloudCloud {
+  const count = cube.length;
+  const x = new Float64Array(count);
+  const y = new Float64Array(count);
+  const depths = new Float64Array(count);
+  for (let index = 0; index < count; index++) {
+    const at = projectPoint(cube[index] as Vector3, camera, viewport);
+    x[index] = at.x;
+    y[index] = at.y;
+    depths[index] = at.depth;
+  }
+
+  const rows = new Uint32Array(count);
+  for (let index = 0; index < count; index++) rows[index] = index;
+  const order = rows.toSorted(
+    (a, b) => (depths[a] as number) - (depths[b] as number),
+  );
+
+  return { points: { x, y }, depths, order };
+}
+
+/** One shell's outline, ready to be filled. */
+export interface CloudOutline {
+  /** Where its middle landed, in pixels from the left. */
+  cx: number;
+  /** And from the top. */
+  cy: number;
+  /** Half its longest width, in pixels. */
+  rx: number;
+  /** Half its width across that, in pixels. */
+  ry: number;
+  /** How far the long axis is turned from the horizontal, in degrees. */
+  angle: number;
+  /** How far towards the reader its middle is, in cube units. */
+  depth: number;
+}
+
+/**
+ * Where one shell's outline lands on screen.
+ * @param ellipsoid - The shell, in cube units.
+ * @param camera - Where the reader is standing.
+ * @param viewport - Where the middle of the cube is, and how large it is drawn.
+ * @returns See {@link CloudOutline}, or `null` when the camera sends the shell nowhere a browser can draw.
+ */
+export function projectShellOutline(
+  ellipsoid: ConfidenceEllipsoid,
+  camera: OrbitCamera,
+  viewport: OrbitViewport,
+): CloudOutline | null {
+  const at = projectPoint(ellipsoid.center, camera, viewport);
+  const { rx, ry, angle } = ellipsoidSilhouette(ellipsoid, camera);
+  const outline = {
+    cx: round(at.x),
+    cy: round(at.y),
+    rx: round(rx * viewport.scale),
+    ry: round(ry * viewport.scale),
+    angle: round((angle * 180) / Math.PI),
+    depth: at.depth,
+  };
+  for (const value of [outline.cx, outline.cy, outline.rx, outline.ry]) {
+    if (!Number.isFinite(value)) return null;
+  }
+  return outline;
+}
+
+/** A segment of the frame, in pixels. */
+export interface CloudSegment {
+  /** Where it starts. */
+  x1: number;
+  /** Where it starts. */
+  y1: number;
+  /** Where it ends. */
+  x2: number;
+  /** Where it ends. */
+  y2: number;
+}
+
+/**
+ * A run of cube-space segments, projected.
+ * @param segments - The segments, as pairs of corners in cube units.
+ * @param camera - Where the reader is standing.
+ * @param viewport - Where the middle of the cube is, and how large it is drawn.
+ * @returns The segments, in pixels, in the order they were given.
+ */
+export function projectSegments(
+  segments: ReadonlyArray<readonly [Vector3, Vector3]>,
+  camera: OrbitCamera,
+  viewport: OrbitViewport,
+): CloudSegment[] {
+  const lines: CloudSegment[] = [];
+  for (const [from, to] of segments) {
+    const start = projectPoint(from, camera, viewport);
+    const end = projectPoint(to, camera, viewport);
+    lines.push({
+      x1: round(start.x),
+      y1: round(start.y),
+      x2: round(end.x),
+      y2: round(end.y),
+    });
+  }
+  return lines;
+}
+
+/*
+ * Two decimals, which is under a tenth of a device pixel at any zoom a browser
+ * offers and keeps the markup short enough to read in a failing test.
+ */
+const round = (value: number): number => Math.round(value * 100) / 100;

package/src/scatter3d/ui/cloudShellStyles.ts

@@ -0,0 +1,74 @@
+/**
+ * How solid the glass is, and how it thickens from the middle to the rim.
+ */
+
+/**
+ * How solid one wall of the glass is, seen square on, by default.
+ *
+ * Low, because a ray straight through a shell already meets two walls, and two
+ * shells that overlap put four in the reader's way.
+ */
+export const SHELL_FILL_OPACITY = 0.1;
+
+/**
+ * How many walls' worth of glass the rim is allowed to reach.
+ *
+ * The path through a shell grows as the secant of the angle it is seen at, so
+ * at the silhouette it is unbounded and the rim would go opaque. Held to a few
+ * walls it reads as the swell of a ball; unheld it reads as a ring drawn round
+ * a disc, which is the wireframe this fill replaced.
+ */
+const RIM_WALLS = 6;
+
+/** One stop of the glass gradient. */
+export interface ShellGlassStop {
+  /** How far out it sits, from `0` at the middle to `1` at the rim. */
+  offset: number;
+  /** How solid the glass is there. */
+  opacity: number;
+}
+
+/**
+ * The gradient one shell is filled with, which is what gives it its relief.
+ *
+ * A shell is a surface, not a filled solid, so what the reader looks through
+ * is two walls of it. Straight through the middle they are met square on and
+ * the glass is at its thinnest; towards the rim the same two walls are met at
+ * a closing angle and the path through them lengthens as the secant of it, so
+ * the shell swells towards its edge and reads as round. That is the whole of
+ * the modelling the tessellated version did, minus the seams between the faces
+ * it needed to do it.
+ *
+ * The walls are composited rather than added, so two of them at a tenth are
+ * not a fifth but a nineteenth-something — the same arithmetic the browser was
+ * doing when they were stacked polygons.
+ * @param strength - How solid one wall is, after the group's own opacity.
+ * @returns The stops, from the middle outwards.
+ */
+export function shellGlassStops(strength: number): ShellGlassStop[] {
+  const wall = Math.min(1, Math.max(0, strength));
+  const clear = 1 - wall;
+  return GLASS_OFFSETS.map((offset) => ({
+    offset,
+    opacity: round(1 - clear ** wallsAt(offset)),
+  }));
+}
+
+/**
+ * How much glass a ray meets at a given distance out from the middle.
+ * @param offset - How far out, from `0` at the middle to `1` at the rim.
+ * @returns The number of walls' worth, held to {@link RIM_WALLS}.
+ */
+function wallsAt(offset: number): number {
+  const facing = Math.sqrt(Math.max(0, 1 - offset * offset));
+  if (facing <= 0) return RIM_WALLS;
+  return Math.min(RIM_WALLS, 2 / facing);
+}
+
+/*
+ * Close together near the rim, where the glass thickens quickest, and sparse
+ * through the middle, where it barely changes.
+ */
+const GLASS_OFFSETS = [0, 0.3, 0.5, 0.66, 0.78, 0.87, 0.93, 0.97, 1];
+
+const round = (value: number): number => Math.round(value * 10000) / 10000;