phoria2 1.1.0 → 1.3.0

package/src/area.js

@@ -0,0 +1,131 @@
+// Picking an area of the canvas: everything whose place on screen falls inside a box or a lasso drawn
+// over it - each point, instance and line segment on its own, and a mesh by its middle. Positions
+// are tested, not surfaces, so what is hidden behind other things is found too: selecting a region
+// of a scatter takes the whole region, front to back.
+import * as mat4 from './math/mat4.js'
+import { hiddenInstance } from './scene/drawables.js'
+import { Vec3 } from './value/Vec3.js'
+import { describe, fail } from './validate.js'
+
+/** @import { Hit } from './Raycaster.js' */
+/** @import { Node } from './scene/Node.js' */
+/** @import { Camera } from './scene/cameras.js' */
+
+/**
+ * A box on the canvas, CSS pixels from its top left - width and height may be negative, as a drag
+ * up or left makes them - or a lasso: the points of a polygon, [x, y] each.
+ * @typedef {{ x: number, y: number, width: number, height: number } | [number, number][]} PickArea
+ */
+
+const instanceWorld = new Float32Array(16)
+
+/**
+ * The polygon an area is, and its bounding box, for the inside test.
+ * @param {PickArea} area
+ * @returns {{ points: number[], left: number, top: number, right: number, bottom: number }}
+ */
+function outline(area) {
+  /** @type {number[]} */
+  let points
+  if (Array.isArray(area)) {
+    if (area.length < 3 || !area.every((p) => Array.isArray(p) && p.length === 2 && p.every(Number.isFinite))) {
+      fail('View', `pickArea() takes a box { x, y, width, height } or a lasso of three or more [x, y] points, got ${describe(area)}`)
+    }
+    points = area.flat()
+  } else {
+    const { x, y, width, height } = area ?? /** @type {any} */ ({})
+    if (![x, y, width, height].every(Number.isFinite)) {
+      fail('View', `pickArea() takes a box { x, y, width, height } or a lasso of three or more [x, y] points, got ${describe(area)}`)
+    }
+    points = [x, y, x + width, y, x + width, y + height, x, y + height]
+  }
+  let left = Infinity, top = Infinity, right = -Infinity, bottom = -Infinity
+  for (let i = 0; i < points.length; i += 2) {
+    left = Math.min(left, points[i])
+    right = Math.max(right, points[i])
+    top = Math.min(top, points[i + 1])
+    bottom = Math.max(bottom, points[i + 1])
+  }
+  return { points, left, top, right, bottom }
+}
+
+/** Is (x, y) inside the polygon? Even-odd crossings. @param {number[]} p @param {number} x @param {number} y */
+function inside(p, x, y) {
+  let into = false
+  for (let i = 0, j = p.length - 2; i < p.length; j = i, i += 2) {
+    const yi = p[i + 1], yj = p[j + 1]
+    if ((yi > y) !== (yj > y) && x < p[i] + (p[j] - p[i]) * (y - yi) / (yj - yi)) into = !into
+  }
+  return into
+}
+
+/**
+ * Everything in the scene the camera shows, pickable, whose place falls inside the area - nearest
+ * the camera first.
+ * @param {Node} scene @param {Camera} camera @param {Float32Array} viewProjection
+ * @param {number} width @param {number} height the canvas, CSS pixels
+ * @param {PickArea} area
+ * @returns {Hit[]}
+ */
+export function pickArea(scene, camera, viewProjection, width, height, area) {
+  const shape = outline(area)
+  const eye = camera.worldPosition
+  const m = viewProjection
+  /** @type {Hit[]} */
+  const hits = []
+  /** World position (x, y, z) inside the area? @param {number} x @param {number} y @param {number} z */
+  const within = (x, y, z) => {
+    const w = m[3] * x + m[7] * y + m[11] * z + m[15]
+    if (w <= 0) return false
+    const nz = (m[2] * x + m[6] * y + m[10] * z + m[14]) / w
+    if (nz < -1 || nz > 1) return false
+    const sx = ((m[0] * x + m[4] * y + m[8] * z + m[12]) / w * 0.5 + 0.5) * width
+    const sy = (0.5 - (m[1] * x + m[5] * y + m[9] * z + m[13]) / w * 0.5) * height
+    return sx >= shape.left && sx <= shape.right && sy >= shape.top && sy <= shape.bottom && inside(shape.points, sx, sy)
+  }
+  /** @param {any} node @param {number} x @param {number} y @param {number} z @param {number | null} face @param {number | null} instance */
+  const hit = (node, x, y, z, face, instance) => {
+    const point = new Vec3(x, y, z)
+    hits.push({ node, point, distance: point.distanceTo(eye), normal: null, face, instance, uv: null, datum: node.datumAt(instance ?? face) })
+  }
+  const p = new Vec3()
+
+  /** @param {Node} node */
+  const visit = (node) => {
+    if (!node.shownTo(camera) || !node.pickable) return
+    const n = /** @type {any} */ (node)
+    if (n.isDrawable && n.geometry.vertexCount) {
+      const g = n.geometry, world = n.worldMatrix
+      if (n.drawMode === 'points') {
+        const pos = g.positions
+        for (let i = 0; i < g.drawnVertices; i++) {
+          p.set(pos[i * 3], pos[i * 3 + 1], pos[i * 3 + 2]).applyMatrix4(world)
+          if (within(p[0], p[1], p[2])) hit(n, p[0], p[1], p[2], i, null)
+        }
+      } else if (n.drawMode === 'lines') {
+        // a segment by its middle
+        const pos = g.positions, idx = g.indices
+        for (let s = 0; s < Math.floor(g.drawnCount / 2); s++) {
+          const a = idx ? idx[s * 2] : s * 2, b = idx ? idx[s * 2 + 1] : s * 2 + 1
+          p.set((pos[a * 3] + pos[b * 3]) / 2, (pos[a * 3 + 1] + pos[b * 3 + 1]) / 2, (pos[a * 3 + 2] + pos[b * 3 + 2]) / 2).applyMatrix4(world)
+          if (within(p[0], p[1], p[2])) hit(n, p[0], p[1], p[2], s, null)
+        }
+      } else if (n.instanceMatrices) {
+        // each instance by the middle of its copy of the geometry; hidden ones aren't there
+        const centre = g.bounds.getCenter()
+        for (let i = 0; i < n.count; i++) {
+          if (hiddenInstance(n.instanceMatrices, i)) continue
+          mat4.multiply(instanceWorld, world, n.instanceMatrices.subarray(i * 16, i * 16 + 16))
+          p.copy(centre).applyMatrix4(instanceWorld)
+          if (within(p[0], p[1], p[2])) hit(n, p[0], p[1], p[2], null, i)
+        }
+      } else {
+        p.copy(g.bounds.getCenter()).applyMatrix4(world)
+        if (within(p[0], p[1], p[2])) hit(n, p[0], p[1], p[2], null, null)
+      }
+    }
+    for (const child of node.children) visit(child)
+  }
+  visit(scene)
+  return hits.sort((a, b) => a.distance - b.distance)
+}

package/src/charts/Chart.js

@@ -118,6 +118,22 @@ export class Chart extends Group {
     return `Chart (${s.mark}): ${shown} of ${s.rows.length} rows shown${axes.length ? `; ${axes.join(', ')}` : ''}${s.links.length ? `; ${s.links.length} links` : ''}`
   }
 
+  /**
+   * One sentence about this chart for screen readers - the spec's description, or its title and what
+   * it shows: "Sales by month: bar chart of 12 rows by Month, Sales". A View with keyboard: true labels
+   * its canvas with this.
+   * @returns {string}
+   */
+  summary() {
+    const s = /** @type {ReturnType<typeof normalise>} */ (this.#spec), o = /** @type {any} */ (s.options)
+    if (o.description) return String(o.description)
+    // each field once, though it may set more than one channel (z and colour by region)
+    const by = [...new Set(['x', 'y', 'z', 'color', 'size'].map((k) => /** @type {any} */ (s.channels)[k]).filter((c) => c?.field).map((c) => c.title))]
+    const count = (n, one) => `${n} ${n === 1 ? one : `${one}s`}`
+    const what = `${s.mark} chart of ${count(s.rows.length, 'row')}${by.length ? ` by ${by.join(', ')}` : ''}${s.links.length ? ` and ${count(s.links.length, 'link')}` : ''}`
+    return o.title ? `${o.title}: ${what}` : what
+  }
+
   /** @internal @returns {Record<string, unknown>} */
   jsonOptions() {
     return { ...this.#input }
@@ -305,14 +321,16 @@ export class Chart extends Group {
 
   /** @param {number} dt */
   #step(dt) {
-    this.#mark?.tick?.(dt)
+    // with motion reduced (the View's reducedMotion), flows stand still and a change shows at once
+    const still = /** @type {any} */ (this.root).motionReduced === true
+    if (!still) this.#mark?.tick?.(dt)
     const tw = this.#tween
     if (!tw) return
     const o = this.#input.transition ?? {}
     const duration = o.duration ?? 0.5
     const ease = EASES[o.ease ?? 'out']
     if (!ease) fail('chart()', `transition ease '${o.ease}' - expected ${Object.keys(EASES).map((e) => `'${e}'`).join(', ')}`)
-    tw.t = Math.min(1, tw.t + dt / duration)
+    tw.t = still ? 1 : Math.min(1, tw.t + dt / duration)
     const k = ease(tw.t)
     const state = new Float32Array(tw.from.length)
     for (let i = 0; i < state.length; i++) state[i] = tw.from[i] + (tw.to[i] - tw.from[i]) * k

package/src/charts/marks.js

@@ -3,6 +3,7 @@
 // lay out and draw, never animate.
 import { Geometry } from '../geometry/Geometry.js'
 import { box as boxGeometry, icosphere } from '../geometry/generators.js'
+import { Texture } from '../material/Texture.js'
 import { InstancedMesh, Lines, Mesh, Points } from '../scene/drawables.js'
 import { fail } from '../validate.js'
 import { distinct } from './scales.js'
@@ -154,8 +155,10 @@ export function pointMark(ctx) {
   /** @type {any} */
   let node = sized
     ? new InstancedMesh({ geometry: icosphere({ radius: 1, detail: 1 }), material, count: 64, labels: labelsOf(ctx, 'above') })
-    : new Points({ geometry: emptyPoints(64), material: { size: ctx.spec.channels.size?.value ?? unit * 1.4, vertexColors: true, ...material },
-      labels: labelsOf(ctx, 'above') })
+    // dots with a darker rim, so each one reads where they crowd together - drawn furthest first, so
+    // each blends over the ones behind it
+    : new Points({ geometry: emptyPoints(64), material: { size: ctx.spec.channels.size?.value ?? unit * 1.4, vertexColors: true, map: dot(), depthWrite: false, ...material },
+      sort: true, labels: labelsOf(ctx, 'above') })
   if (sized) node.count = 0
   const mark = {
     nodes: [node],
@@ -205,6 +208,30 @@ export function pointMark(ctx) {
   return mark
 }
 
+/** @type {Texture | null} */
+let dotTexture = null
+
+/**
+ * A dot: a white disc whose outer part darkens to a rim, with a soft edge - pixels of its own, so
+ * charts need no canvas to make it. Shared by every scatter.
+ */
+function dot() {
+  if (dotTexture) return dotTexture
+  const size = 64, data = new Uint8Array(size * size * 4), r = size / 2
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const d = Math.hypot(x + 0.5 - r, y + 0.5 - r) / r
+      // the colour full to 0.78 of the radius, then down to 0.62 at the edge; alpha soft over the last pixel and a half
+      const shade = d < 0.78 ? 1 : 1 - (d - 0.78) / 0.22 * 0.38
+      const alpha = Math.min(1, Math.max(0, (1 - d) * r / 1.5))
+      const o = (y * size + x) * 4
+      data[o] = data[o + 1] = data[o + 2] = Math.round(shade * 255)
+      data[o + 3] = Math.round(alpha * 255)
+    }
+  }
+  return (dotTexture = new Texture({ image: { data, width: size, height: size } }))
+}
+
 /** @param {number} n */
 function emptyPoints(n) {
   const g = new Geometry({ positions: new Float32Array(n * 3), colors: new Float32Array(n * 3) })

package/src/explain.js

@@ -22,7 +22,7 @@ import { Box3 } from './value/Box3.js'
  * @property {boolean} autoLight
  * @property {boolean} contextLost
  * @property {boolean} [sharedContext] drawn with the page's shared WebGL context
- * @property {{ hover: number, click: number, tooltip: boolean, highlight: boolean }} interaction
+ * @property {{ hover: number, click: number, tooltip: boolean, highlight: boolean, keyboard?: boolean, reducedMotion?: boolean, description?: string | null }} interaction
  * @property {string[]} [notes] lines from nodes that describe themselves, such as charts
  */
 
@@ -115,7 +115,7 @@ export function explain(info) {
 
   if (info.labels && info.labels.total) {
     const s = info.labels
-    lines.push(`Labels: ${s.shown} shown, ${s.dimmed ? `${s.dimmed} dimmed (covered by labels or geometry), ` : ''}${s.overlapped} hidden by overlap, ${s.occluded} hidden behind geometry, ${s.offscreen} off screen`)
+    lines.push(`Labels: ${s.shown} shown, ${s.dimmed ? `${s.dimmed} dimmed (covered by labels or geometry), ` : ''}${s.overlapped} hidden by overlap, ${s.occluded} hidden behind geometry, ${s.offscreen} off screen${s.zoomedOut ? `, ${s.zoomedOut} waiting to be zoomed in to (minScale)` : ''}`)
     if (s.overlapped > s.shown * 3) warnings.push(`${s.overlapped} labels are hidden by overlap - give the important ones a higher priority, label fewer things, or use overlap: 'dim' or 'show'`)
     if (s.offscreen === s.total) warnings.push('every label is off screen - check their positions, or call view.frame()')
   }
@@ -125,6 +125,10 @@ export function explain(info) {
     lines.push(`Interaction: ${[ix.hover && plural(ix.hover, 'hover handler'), ix.click && plural(ix.click, 'click handler'),
       ix.tooltip && 'tooltip', ix.highlight && 'hover highlight'].filter(Boolean).join(', ')}`)
   }
+  if (ix.keyboard || ix.reducedMotion || ix.description) {
+    lines.push(`Accessibility: ${[ix.keyboard && 'keyboard (arrow keys step through what can be hovered)', ix.reducedMotion && 'reduced motion',
+      ix.description && `described as "${ix.description}"`].filter(Boolean).join(', ')}`)
+  }
 
   if (info.width < 2 || info.height < 2) warnings.unshift(`the canvas is ${info.width} x ${info.height} - give it a size in the page (CSS width and height)`)
   if (info.contextLost) warnings.unshift('the WebGL context is lost - nothing draws until the browser restores it')

package/src/frame.js

@@ -6,6 +6,7 @@ import { Box3 } from './value/Box3.js'
 import { warnOnce } from './validate.js'
 import { fitPointShadow, fitShadow, fitSpotShadow, SPOT_TILES } from './shadow.js'
 import { worldPlane } from './clip.js'
+import { hiddenInstance } from './scene/drawables.js'
 
 /** @import { Scene } from './scene/Scene.js' */
 /** @import { Camera } from './scene/cameras.js' */
@@ -89,6 +90,8 @@ export const LIGHT_LIMITS = { punctual: 4, directional: 2 }
  * @property {[number, number]} ndc [x, y] in -1..1
  * @property {number} depth
  * @property {boolean} visible in front of the camera and inside the view
+ * @property {number} scale how far zoomed in at the point: half the view's height, in world units, is 1 / scale -
+ *   the layer turns it into pixels to one world unit, for minScale
  */
 
 /**
@@ -239,13 +242,13 @@ export function collect(scene, camera) {
           else capped.set(item.clip, [item])
         }
         frame.stats.drawn++
-        if (node.labels) instanceLabels(node, viewProjection, view, frame.labels)
+        if (node.labels) instanceLabels(node, viewProjection, view, projection[5], frame.labels)
       } else {
         frame.stats.culled++
       }
     } else if (node.isLabel) {
       const position = node.worldPosition
-      frame.labels.push({ key: node, node, index: null, text: node.text, style: node, position, ...project(position, viewProjection, view) })
+      frame.labels.push({ key: node, node, index: null, text: node.text, style: node, position, ...project(position, viewProjection, view, projection[5]) })
     } else if (node.lightKind) {
       addLight(/** @type {Light} */ (node))
     }
@@ -323,7 +326,7 @@ export function collect(scene, camera) {
   if (items.length && sun >= 0) {
     const light = frame.lights[sun]
     const bounds = (/** @type {any} */ n) => n.expandBounds(new Box3())
-    const fit = fitShadow(/** @type {Vec3} */ (light.direction), items.map((c) => bounds(c.node)), receivers.map(bounds))
+    const fit = fitShadow(/** @type {Vec3} */ (light.direction), items.map((c) => bounds(c.node)), receivers.map(bounds), undefined, /** @type {any} */ (light.node).shadowBounds)
     if (fit) {
       frame.lights.splice(sun, 1)
       frame.lights.unshift(light)
@@ -392,10 +395,22 @@ let nextId = 1
 
 /**
  * Labels for every instance or point that has text, from the node's `labels` option.
- * @param {any} node InstancedMesh or Points @param {Mat4} viewProjection @param {Mat4} view @param {FrameLabel[]} out
+ * @param {any} node InstancedMesh or Points @param {Mat4} viewProjection @param {Mat4} view
+ * @param {number} yScale the projection's vertical scale @param {FrameLabel[]} out
  */
-function instanceLabels(node, viewProjection, view, out) {
-  const { labels, worldMatrix: w } = node
+function instanceLabels(node, viewProjection, view, yScale, out) {
+  // several labels per instance: the first keeps the plain key, so a single set's labels don't change identity
+  if (Array.isArray(node.labels)) {
+    node.labels.forEach((labels, layer) => instanceLabelSet(node, labels, layer, viewProjection, view, yScale, out))
+  } else instanceLabelSet(node, node.labels, 0, viewProjection, view, yScale, out)
+}
+
+/**
+ * @param {any} node @param {any} labels one set of instance labels @param {number} layer its place in the list
+ * @param {Mat4} viewProjection @param {Mat4} view @param {number} yScale @param {FrameLabel[]} out
+ */
+function instanceLabelSet(node, labels, layer, viewProjection, view, yScale, out) {
+  const { worldMatrix: w } = node
   let id = ids.get(node)
   if (id === undefined) ids.set(node, id = nextId++)
   const instanced = 'instanceMatrices' in node
@@ -409,6 +424,8 @@ function instanceLabels(node, viewProjection, view, out) {
   const data = Array.isArray(node.data) ? node.data : null
   const byRow = typeof labels.priority === 'function'
   for (let i = 0; i < n; i++) {
+    // an instance scaled to nothing is hidden, and so is its label
+    if (instanced && hiddenInstance(node.instanceMatrices, i)) continue
     const row = data ? data[i] : null
     const text = labels.text(row, i)
     if (text === null || text === undefined || text === '') continue
@@ -427,7 +444,7 @@ function instanceLabels(node, viewProjection, view, out) {
       w[1] * x + w[5] * y + w[9] * z + w[13],
       w[2] * x + w[6] * y + w[10] * z + w[14])
     const style = byRow ? { ...labels, priority: labels.priority(row, i) } : labels
-    out.push({ key: `${id}:${i}`, node, index: i, text: String(text), style, position, ...project(position, viewProjection, view) })
+    out.push({ key: layer ? `${id}:${i}:${layer}` : `${id}:${i}`, node, index: i, text: String(text), style, position, ...project(position, viewProjection, view, yScale) })
   }
 }
 
@@ -453,10 +470,13 @@ export function toScreen(position, viewProjection) {
  * units, for both kinds of camera (an orthographic one's clip w is always 1).
  * @param {Vec3} position @param {Mat4} viewProjection @param {Mat4} view
  */
-function project(position, viewProjection, view) {
+function project(position, viewProjection, view, yScale) {
   const { ndc, visible } = toScreen(position, viewProjection)
   const depth = -(view[2] * position[0] + view[6] * position[1] + view[10] * position[2] + view[14])
-  return { ndc: /** @type {[number, number]} */ ([ndc[0], ndc[1]]), depth, visible }
+  // clip w at the point: its depth for a perspective camera, 1 for an orthographic one
+  const m = viewProjection
+  const w = m[3] * position[0] + m[7] * position[1] + m[11] * position[2] + m[15]
+  return { ndc: /** @type {[number, number]} */ ([ndc[0], ndc[1]]), depth, visible, scale: w > 0 ? yScale / w : 0 }
 }
 
 // The six planes (a, b, c, d with the normal pointing inwards) of a view-projection matrix.

package/src/geometry/Geometry.js

@@ -9,10 +9,16 @@ import { checkOptions, describe, fail } from '../validate.js'
  * @property {ArrayLike<number>} [uvs2] a second uv per vertex, for maps that need every surface on its own
  *   patch of texture - baked occlusion and light maps (a texture's uvSet: 1 reads it)
  * @property {ArrayLike<number>} [colors] rgb per vertex, sRGB 0-1 like every colour input
+ * @property {ArrayLike<number>} [sizes] points: one per vertex, a multiple of the material's size
+ * @property {ArrayLike<number>} [opacities] points: one per vertex, 0-1, multiplying the material's opacity
+ * @property {ArrayLike<number>} [angles] points: one per vertex, radians anticlockwise on screen - turns
+ *   each point's texture
  * @property {ArrayLike<number>} [indices] vertex indices; triangles for meshes, pairs for lines
  */
 
-const OPTIONS = ['positions', 'normals', 'uvs', 'uvs2', 'colors', 'indices']
+const OPTIONS = ['positions', 'normals', 'uvs', 'uvs2', 'colors', 'sizes', 'opacities', 'angles', 'indices']
+// the per-point arrays: Points with any of them draw each point as its own square, sized, faded and turned
+const POINT_ARRAYS = /** @type {const} */ (['sizes', 'opacities', 'angles'])
 
 /**
  * Vertex data: flat typed arrays plus an optional index. Generators such as box() and sphere()
@@ -25,6 +31,9 @@ export class Geometry {
   /** @type {Float32Array | null} */ uvs = null
   /** A second UV set, for baked occlusion and light maps. @type {Float32Array | null} */ uvs2 = null
   /** @type {Float32Array | null} */ colors = null
+  /** Points: each one's size, as a multiple of the material's. @type {Float32Array | null} */ sizes = null
+  /** Points: each one's opacity, 0-1, times the material's. @type {Float32Array | null} */ opacities = null
+  /** Points: each one's turn on screen, in radians anticlockwise. @type {Float32Array | null} */ angles = null
   /** @type {Uint16Array | Uint32Array | null} */ indices = null
 
   /** @internal Bumped by needsUpdate() so renderers know to re-upload. */
@@ -45,6 +54,8 @@ export class Geometry {
 
   /** @type {Float32Array | null} */
   #normals = null
+  /** The normals were worked out on first read, rather than given or asked for: they follow the shape. */
+  #autoNormals = false
   /** @type {Box3 | null} */
   #bounds = null
   /** @type {Set<() => void>} */
@@ -60,6 +71,7 @@ export class Geometry {
     if (options.uvs) this.uvs = toFloat32('uvs', options.uvs, 2, n)
     if (options.uvs2) this.uvs2 = toFloat32('uvs2', options.uvs2, 2, n)
     if (options.colors) this.colors = toFloat32('colors', options.colors, 3, n)
+    for (const name of POINT_ARRAYS) if (options[name]) this[name] = toFloat32(name, options[name], 1, n)
     if (options.indices) {
       // -1: no indices at all refer to no vertex, so an empty geometry can say so
       let max = -1
@@ -75,16 +87,22 @@ export class Geometry {
 
   /**
    * xyz per vertex. Computed (smooth) from the triangles on first read when not supplied, so
-   * points and lines - whose geometry has no triangles - never pay for them.
+   * points and lines - whose geometry has no triangles - never pay for them - and computed again after
+   * needsUpdate(), so they follow positions edited in place. Normals that were supplied, assigned or
+   * made by calling computeNormals() are kept as they are.
    * @type {Float32Array}
    */
   get normals() {
-    if (!this.#normals) this.computeNormals()
+    if (!this.#normals) {
+      this.computeNormals()
+      this.#autoNormals = true
+    }
     return /** @type {Float32Array} */ (this.#normals)
   }
 
   set normals(v) {
     this.#normals = v
+    this.#autoNormals = false
   }
 
   /** True once normals exist, supplied or computed. */
@@ -121,9 +139,14 @@ export class Geometry {
     return this.#bounds ??= new Box3().expandByPositions(this.positions)
   }
 
-  /** Call after editing the arrays in place. It is no longer what its generator made, so toJSON() saves the arrays. @returns {this} */
+  /**
+   * Call after editing the arrays in place. It is no longer what its generator made, so toJSON() saves
+   * the arrays; normals that were worked out on first read are worked out again on the next.
+   * @returns {this}
+   */
   needsUpdate() {
     this.source = null
+    if (this.#autoNormals) this.#normals = null
     return this.#changed()
   }
 
@@ -178,6 +201,9 @@ export class Geometry {
       uvs: this.uvs ?? undefined,
       uvs2: this.uvs2 ?? undefined,
       colors: this.colors ?? undefined,
+      sizes: this.sizes ?? undefined,
+      opacities: this.opacities ?? undefined,
+      angles: this.angles ?? undefined,
       indices: this.indices ?? undefined,
     })
     g.source = this.source && { ...this.source }
@@ -205,6 +231,7 @@ export class Geometry {
     if (this.uvs) json.uvs = Array.from(this.uvs)
     if (this.uvs2) json.uvs2 = Array.from(this.uvs2)
     if (this.colors) json.colors = Array.from(this.colors)
+    for (const name of POINT_ARRAYS) if (this[name]) json[name] = Array.from(/** @type {Float32Array} */ (this[name]))
     if (this.indices) json.indices = Array.from(this.indices)
     return json
   }
@@ -229,6 +256,7 @@ export class Geometry {
     this.uvs = expand(this.uvs, 2)
     this.uvs2 = expand(this.uvs2, 2)
     this.colors = expand(this.colors, 3)
+    for (const name of POINT_ARRAYS) this[name] = expand(this[name], 1)
     this.indices = null
     this.source = null
   }

package/src/index.js

@@ -50,6 +50,7 @@ export { PhoriaError } from './validate.js'
 /** @typedef {import('./presets.js').CameraPreset} CameraPreset */
 /** @typedef {import('./tooltip.js').TooltipContent} TooltipContent */
 /** @typedef {import('./Raycaster.js').Hit} Hit */
+/** @typedef {import('./area.js').PickArea} PickArea */
 /** @typedef {import('./scene/drawables.js').LabelPlacement} LabelPlacement */
 /** @typedef {import('./scene/drawables.js').LabelPlace} LabelPlace */
 /** @typedef {import('./scene/drawables.js').InstanceLabels} InstanceLabels */