phoria2 1.2.0 → 1.4.0

package/src/material/Texture.js

@@ -43,9 +43,18 @@ const HINTS = {
   scale: "use 'repeat' - [u, v] times across",
 }
 
+/**
+ * Part of an image, in its pixels from the top left, as needsUpdate() takes it.
+ * @typedef {{ x: number, y: number, width: number, height: number }} TextureRegion
+ */
+
+// how many updates a texture remembers the region of, for a renderer catching up on several - a
+// frame of paint can make a hundred or so
+const CHANGES_KEPT = 256
+
 /**
  * An image for a material map. A video's frames upload by themselves as it plays; after drawing on
- * a canvas, call `needsUpdate()`.
+ * a canvas, call `needsUpdate()` - with the rectangle drawn in, to send only that.
  */
 export class Texture {
   /** The options it takes, and hints for names people reach for instead. */
@@ -77,6 +86,8 @@ export class Texture {
   flipY = false
   /** @internal Bumped by needsUpdate() so renderers re-upload. */
   version = 0
+  /** What each recent update changed - its region, or null for all of it. @type {{ version: number, region: TextureRegion | null }[]} */
+  #changes = []
   /** Resolves when the image is available (immediately when one was given). @type {Promise<Texture>} */
   ready
 
@@ -180,11 +191,53 @@ export class Texture {
   /** @internal Whether the app chose the colour space, rather than leaving the default. @returns {boolean} */
   get colorSpaceSet() { return this.#colorSpaceSet }
 
-  needsUpdate() {
+  /**
+   * Upload the image again, after drawing on it (a canvas) or changing its pixels. Give the
+   * rectangle that changed - in the image's pixels, from its top left - and only that is sent: for a
+   * big canvas drawn on a little at a time, far less to send each frame.
+   *
+   *     ctx.fillRect(x, y, 20, 20)
+   *     texture.needsUpdate({ x, y, width: 20, height: 20 })
+   * @param {TextureRegion} [region]
+   * @returns {this}
+   */
+  needsUpdate(region) {
+    /** @type {TextureRegion | null} */
+    let changed = null
+    if (region !== undefined) {
+      const { x, y, width, height } = region ?? /** @type {any} */ ({})
+      if (![x, y, width, height].every((v) => typeof v === 'number' && Number.isFinite(v)) || width < 0 || height < 0) {
+        fail('Texture', `needsUpdate() takes the region changed, { x, y, width, height } in the image's pixels, got ${describe(region)}`)
+      }
+      // whole pixels, covering every one the region touches
+      const x0 = Math.floor(x), y0 = Math.floor(y)
+      changed = { x: x0, y: y0, width: Math.ceil(x + width) - x0, height: Math.ceil(y + height) - y0 }
+    }
     this.version++
+    this.#changes.push({ version: this.version, region: changed })
+    if (this.#changes.length > CHANGES_KEPT) this.#changes.shift()
     return this
   }
 
+  /**
+   * @internal What changed since a version a renderer uploaded: each update's region since, or null
+   * when that's all of it - an update without a region, or one too long ago to know.
+   * @param {number} version
+   * @returns {TextureRegion[] | null}
+   */
+  changedSince(version) {
+    const first = this.#changes[0]
+    if (!first || first.version > version + 1) return null
+    /** @type {TextureRegion[]} */
+    const regions = []
+    for (const { version: v, region } of this.#changes) {
+      if (v <= version) continue
+      if (!region) return null
+      regions.push(region)
+    }
+    return regions.length ? regions : null
+  }
+
   /** Release the GPU copy. @returns {void} */
   dispose() {
     for (const fn of this.#onDispose) fn()

package/src/particles/Emitter.js

@@ -1,7 +1,8 @@
 // A particle system as one Points node: particles are born at the emitter's origin, move under
 // velocity, gravity and drag, fade through a list of colours and die. The simulation runs in the
 // emitter's own update handler, so it follows the scene clock (frame-rate independent) and its
-// arrays go to the GPU as one buffer refill per frame.
+// arrays go to the GPU as one buffer refill per frame. Particles that grow, fade or turn give the
+// geometry per-point sizes, opacities or angles, and are drawn as squares.
 import * as mat4 from '../math/mat4.js'
 import { Geometry } from '../geometry/Geometry.js'
 import { Material } from '../material/Material.js'
@@ -48,17 +49,32 @@ import { checkNumber, describe, fail } from '../validate.js'
  *   frustumCulled?: boolean,
  *   renderOrder?: number,
  *   onParticle?: ((p: Particle) => boolean | void) | null,
- * }} EmitterOptions
+ *   sort?: boolean,
+ * } & LookOptions} EmitterOptions
  * max: most live particles at once (default 1000). rate: particles born per second (default 100).
  * gravity: acceleration, e.g. [0, -9.8, 0] (default none). drag: share of velocity lost per second
  * (default 0). follow: a node whose position becomes the origin each frame - a trail that stays
  * behind it. onParticle: called for every live particle each frame after it moves; return false to
- * remove it (a particle hitting something).
+ * remove it (a particle hitting something). sort: draw furthest first, for soft particles with
+ * blending 'normal' (smoke) that would otherwise layer wrongly.
+ */
+
+/**
+ * How particles look over their lives, beyond colour.
+ * @typedef {object} LookOptions
+ * @property {number | number[]} [size] a multiple of the material's size, or several each particle goes
+ *   through over its life - [0.5, 3] for smoke that billows out (default 1)
+ * @property {number} [sizeSpread] each particle's size varies by up to this share either way, 0-1 (default 0)
+ * @property {number | number[]} [opacity] 0-1, or several each particle goes through - [0, 1, 0] fades in
+ *   and out (default 1)
+ * @property {number | [number, number]} [spin] radians per second: a number turns each particle up to that
+ *   fast either way, [min, max] a range. Spinning particles start at a random angle (default 0)
  */
 
 const SPAWN_OPTIONS = ['origin', 'originSpread', 'velocity', 'velocitySpread', 'lifetime', 'color']
-const OPTIONS = [...Points.OPTIONS, ...SPAWN_OPTIONS,
-  'max', 'rate', 'gravity', 'drag', 'follow', 'onParticle']
+const LOOK_OPTIONS = ['size', 'sizeSpread', 'opacity', 'spin']
+const BEHAVIOUR_OPTIONS = ['rate', 'gravity', 'drag', 'follow', 'onParticle', ...LOOK_OPTIONS]
+const OPTIONS = [...Points.OPTIONS, ...SPAWN_OPTIONS, 'max', ...BEHAVIOUR_OPTIONS]
 const HINTS = {
   count: "use 'max' for the most particles alive at once, 'rate' for how many are born per second",
   lifetimeRnd: "give 'lifetime' a [min, max] range",
@@ -111,6 +127,13 @@ export class Emitter extends Points {
   /** @type {Map<string, number>} */ #paletteIds = new Map()
   /** @type {Uint8Array} */ #palette
   #spawnPalette = 0
+  // the looks: stops over each particle's life, and each one's own size factor and turn rate
+  /** @type {number[]} */ #size = [1]
+  #sizeSpread = 0
+  /** @type {number[]} */ #opacity = [1]
+  /** @type {[number, number]} */ #spin = [0, 0]
+  /** @type {Float32Array | null} */ #sizeFactors = null
+  /** @type {Float32Array | null} */ #spins = null
   /** Last frame's origin, so a moving source leaves an even trail rather than clumps. */
   #lastOrigin = /** @type {Vec3 | null} */ (null)
   #particle = /** @type {Particle} */ ({ position: new Vec3(), velocity: new Vec3(), age: 0, lifetime: 0 })
@@ -144,12 +167,12 @@ export class Emitter extends Points {
   /**
    * Change several settings at once - a preset, say. Vectors are copied into the emitter's own,
    * so anything bound to `emitter.gravity` and friends stays bound. Live particles carry on.
-   * @param {SpawnOptions & { rate?: number, gravity?: Vec3Input, drag?: number, follow?: Node | null,
+   * @param {SpawnOptions & LookOptions & { rate?: number, gravity?: Vec3Input, drag?: number, follow?: Node | null,
    *   onParticle?: ((p: Particle) => boolean | void) | null }} options
    * @returns {this}
    */
   set(options) {
-    const known = [...SPAWN_OPTIONS, 'rate', 'gravity', 'drag', 'follow', 'onParticle']
+    const known = [...SPAWN_OPTIONS, ...BEHAVIOUR_OPTIONS]
     for (const key of Object.keys(options ?? {})) {
       if (!known.includes(key)) fail('Emitter', `set() doesn't take '${key}' - it takes ${known.join(', ')}`)
     }
@@ -169,6 +192,22 @@ export class Emitter extends Points {
   /** @returns {[number, number, number][]} */
   get color() { return /** @type {[number, number, number][]} */ (this.#palettes[0].map((s) => [...s])) }
 
+  /** Each particle's size over its life, as multiples of the material's. @param {number | number[]} v */
+  set size(v) { this.#setLooks({ size: v }) }
+  /** @returns {number[]} */
+  get size() { return [...this.#size] }
+  /** How much each particle's size varies, 0-1 either way. @param {number} v */
+  set sizeSpread(v) { this.#setLooks({ sizeSpread: v }) }
+  get sizeSpread() { return this.#sizeSpread }
+  /** Each particle's opacity over its life. @param {number | number[]} v */
+  set opacity(v) { this.#setLooks({ opacity: v }) }
+  /** @returns {number[]} */
+  get opacity() { return [...this.#opacity] }
+  /** How fast particles turn, radians per second, as a [min, max] range. @param {number | [number, number]} v */
+  set spin(v) { this.#setLooks({ spin: v }) }
+  /** @returns {[number, number]} */
+  get spin() { return [...this.#spin] }
+
   /**
    * Birth `count` particles at once - explosions, splashes. Options override the emitter's own
    * spawn settings for this burst only.
@@ -211,6 +250,7 @@ export class Emitter extends Points {
     const v = this.#velocities, ages = this.#ages, lives = this.#lifetimes
     const g = this.gravity, keep = Math.exp(-this.drag * dt)
     const hook = this.onParticle, particle = this.#particle
+    const angles = this.geometry.angles, spins = this.#spins
 
     for (let i = 0; i < this.#alive;) {
       const age = ages[i] += dt
@@ -223,6 +263,7 @@ export class Emitter extends Points {
         v[i3 + k] = (v[i3 + k] + g[k] * dt) * keep
         p[i3 + k] += v[i3 + k] * dt
       }
+      if (angles && spins) angles[i] += spins[i] * dt
       this.#paint(i, age / lives[i])
       if (hook) {
         particle.position.set(p[i3], p[i3 + 1], p[i3 + 2])
@@ -256,7 +297,7 @@ export class Emitter extends Points {
     const rest = super.cloneOptions()
     delete rest.geometry
     return { ...rest, ...this.#saveSpawn(), max: this.#max, rate: this.rate, gravity: this.gravity.clone(),
-      drag: this.drag, follow: this.follow, onParticle: this.onParticle, color: this.color }
+      drag: this.drag, follow: this.follow, onParticle: this.onParticle, color: this.color, ...this.#looks() }
   }
 
   /** @internal @returns {Record<string, unknown>} */
@@ -266,7 +307,8 @@ export class Emitter extends Points {
     return { ...rest, max: this.#max, rate: this.rate, gravity: this.gravity.toArray(), drag: this.drag,
       origin: this.origin.toArray(), originSpread: this.originSpread, velocity: this.velocity.toArray(),
       velocitySpread: typeof this.velocitySpread === 'number' ? this.velocitySpread : this.velocitySpread.toArray(),
-      lifetime: [...this.lifetime], color: this.#palettes[0].map((s) => new Color().setSRGB(s[0], s[1], s[2]).toJSON()) }
+      lifetime: [...this.lifetime], color: this.#palettes[0].map((s) => new Color().setSRGB(s[0], s[1], s[2]).toJSON()),
+      ...this.#looks() }
   }
 
   // birth one particle somewhere between a and b, already `head` seconds into its life
@@ -287,6 +329,12 @@ export class Emitter extends Points {
     this.#lifetimes[i] = min + Math.random() * (max - min)
     this.#ages[i] = head
     this.#palette[i] = this.#spawnPalette
+    if (this.#sizeFactors) this.#sizeFactors[i] = 1 + (Math.random() * 2 - 1) * this.#sizeSpread
+    const angles = this.geometry.angles, spins = this.#spins
+    if (angles && spins) {
+      spins[i] = this.#spin[0] + Math.random() * (this.#spin[1] - this.#spin[0])
+      angles[i] = Math.random() * Math.PI * 2 + spins[i] * head
+    }
     this.#paint(i, head / this.#lifetimes[i])
   }
 
@@ -302,10 +350,16 @@ export class Emitter extends Points {
     this.#ages[i] = this.#ages[last]
     this.#lifetimes[i] = this.#lifetimes[last]
     this.#palette[i] = this.#palette[last]
+    for (const a of [this.geometry.sizes, this.geometry.opacities, this.geometry.angles, this.#sizeFactors, this.#spins]) {
+      if (a) a[i] = a[last]
+    }
   }
 
   /** @param {number} i @param {number} t 0-1 through its life */
   #paint(i, t) {
+    const { sizes, opacities } = this.geometry
+    if (sizes) sizes[i] = along(this.#size, t) * (this.#sizeFactors ? this.#sizeFactors[i] : 1)
+    if (opacities) opacities[i] = along(this.#opacity, t)
     const c = /** @type {Float32Array} */ (this.geometry.colors), stops = this.#palettes[this.#palette[i]]
     if (stops.length === 1) {
       c.set(stops[0], i * 3)
@@ -349,8 +403,9 @@ export class Emitter extends Points {
     if (o.color !== undefined) this.#palettes[0] = colorStops(o.color)
   }
 
-  /** @param {{ rate?: number, gravity?: Vec3Input, drag?: number, follow?: Node | null, onParticle?: ((p: Particle) => boolean | void) | null }} o */
+  /** @param {LookOptions & { rate?: number, gravity?: Vec3Input, drag?: number, follow?: Node | null, onParticle?: ((p: Particle) => boolean | void) | null }} o */
   #setBehaviour(o) {
+    this.#setLooks(o)
     const owner = 'Emitter'
     if (o.rate !== undefined) this.rate = Math.max(0, checkNumber(owner, 'rate', o.rate))
     if (o.gravity !== undefined) this.gravity.copy(o.gravity, owner)
@@ -359,6 +414,31 @@ export class Emitter extends Points {
     if (o.onParticle !== undefined) this.onParticle = o.onParticle
   }
 
+  // Sizes, opacities and angles go on the geometry when first wanted (the points are then drawn as
+  // squares) and stay; live particles get the plain values until they are next painted.
+  /** @param {LookOptions} o */
+  #setLooks(o) {
+    const owner = 'Emitter', g = this.geometry, max = this.#max
+    if (o.size !== undefined) this.#size = lookStops('size', o.size, Infinity)
+    if (o.sizeSpread !== undefined) this.#sizeSpread = Math.min(Math.max(checkNumber(owner, 'sizeSpread', o.sizeSpread), 0), 1)
+    if (o.opacity !== undefined) this.#opacity = lookStops('opacity', o.opacity, 1)
+    if (o.spin !== undefined) this.#spin = spinRange(o.spin)
+    const plain = (/** @type {number[]} */ stops) => stops.length === 1 && stops[0] === 1
+    if (!g.sizes && (!plain(this.#size) || this.#sizeSpread)) g.sizes = new Float32Array(max).fill(1)
+    if (!this.#sizeFactors && this.#sizeSpread) this.#sizeFactors = new Float32Array(max).fill(1)
+    if (!g.opacities && !plain(this.#opacity)) g.opacities = new Float32Array(max).fill(1)
+    if (!g.angles && (this.#spin[0] || this.#spin[1])) {
+      g.angles = new Float32Array(max)
+      this.#spins = new Float32Array(max)
+    }
+  }
+
+  /** The looks, as options. @returns {LookOptions} */
+  #looks() {
+    return { size: unstop(this.#size), sizeSpread: this.#sizeSpread, opacity: unstop(this.#opacity),
+      spin: /** @type {[number, number]} */ ([...this.#spin]) }
+  }
+
   /** The spawn settings other than colour, as options. @returns {SpawnOptions} */
   #saveSpawn() {
     return { origin: this.origin.clone(), originSpread: this.originSpread, velocity: this.velocity.clone(),
@@ -397,6 +477,37 @@ function lifetimeRange(v) {
   return [Math.min(range[0], range[1]), Math.max(range[0], range[1])]
 }
 
+/** @param {string} name @param {number | number[]} v @param {number} most @returns {number[]} */
+function lookStops(name, v, most) {
+  const list = Array.isArray(v) ? v : [v]
+  if (!list.length || !list.every((n) => typeof n === 'number' && Number.isFinite(n) && n >= 0)) {
+    fail('Emitter', `'${name}' must be a number of 0 or more, or a list of them a particle goes through, got ${describe(v)}`)
+  }
+  return list.map((n) => Math.min(n, most))
+}
+
+/** One stop as a number, several as a list. @param {number[]} stops @returns {number | number[]} */
+function unstop(stops) {
+  return stops.length === 1 ? stops[0] : [...stops]
+}
+
+/** The value t (0-1) of the way through evenly spaced stops. @param {number[]} stops @param {number} t */
+function along(stops, t) {
+  if (stops.length === 1) return stops[0]
+  const x = Math.min(Math.max(t, 0), 1) * (stops.length - 1)
+  const s = Math.min(Math.floor(x), stops.length - 2)
+  return stops[s] + (stops[s + 1] - stops[s]) * (x - s)
+}
+
+/** @param {number | [number, number]} v @returns {[number, number]} */
+function spinRange(v) {
+  const range = typeof v === 'number' ? [-Math.abs(v), Math.abs(v)] : v
+  if (!Array.isArray(range) || range.length !== 2 || !range.every((n) => typeof n === 'number' && Number.isFinite(n))) {
+    fail('Emitter', `'spin' must be radians per second, or a [min, max] range, got ${describe(v)}`)
+  }
+  return [Math.min(range[0], range[1]), Math.max(range[0], range[1])]
+}
+
 /** @param {ColorInput | ColorInput[]} v @returns {number[][]} */
 function colorStops(v) {
   // a single [r, g, b] array is one colour, not three

package/src/scene/drawables.js

@@ -215,7 +215,9 @@ export class Drawable extends Node {
 
   /** @internal @param {Box3} box */
   expandBounds(box) {
-    if (this.geometry.vertexCount) box.union(this.geometry.bounds.clone().applyMatrix4(this.worldMatrix))
+    if (!this.geometry.vertexCount) return box
+    const own = this.geometry.bounds.clone().applyMatrix4(this.worldMatrix)
+    box.union(padForHooks(own, this.material))
     return box
   }
 
@@ -249,7 +251,7 @@ export class Drawable extends Node {
   dispose() {
     this.geometry.dispose()
     this.material.dispose()
-    for (const [, t] of this.material.textures) t.dispose()
+    for (const [, t] of this.material.allTextures) t.dispose()
     super.dispose()
   }
 }
@@ -411,9 +413,11 @@ export class InstancedMesh extends Mesh {
 
   /** @internal @param {Box3} box */
   expandBounds(box) {
+    // as far as a shader hook can move a vertex, round each copy
+    const pad = this.material.shader?.vertex ? this.material.shader.bounds ?? 0 : 0
     this.eachInstanceBox((x0, y0, z0, x1, y1, z1) => {
-      box.expandByXYZ(x0, y0, z0)
-      box.expandByXYZ(x1, y1, z1)
+      box.expandByXYZ(x0 - pad, y0 - pad, z0 - pad)
+      box.expandByXYZ(x1 + pad, y1 + pad, z1 + pad)
     })
     return box
   }
@@ -466,20 +470,44 @@ export class InstancedMesh extends Mesh {
 /** Each vertex drawn as a square point sprite: star fields, particles, scatter plots. */
 export class Points extends Drawable {
   static type = 'points'
-  static get OPTIONS() { return [...DRAWABLE_OPTIONS, 'labels'] }
+  static get OPTIONS() { return [...DRAWABLE_OPTIONS, 'labels', 'sort'] }
 
   /** A label per point from its row of data - or a list of them, several per point. @type {ReturnType<typeof instanceLabels>} */
   labels = null
+  /**
+   * Draw the points back to front, furthest first, each frame - for soft points that cover what is
+   * behind them (smoke, with blending 'normal'), which then layer the right way round. Drawn as squares.
+   */
+  sort = false
 
-  /** @param {DrawableOptions & { labels?: InstanceLabels | InstanceLabels[] | null }} options */
+  /** @param {DrawableOptions & { labels?: InstanceLabels | InstanceLabels[] | null, sort?: boolean }} options */
   constructor(options) {
     super(options)
     this.labels = instanceLabels(this.constructor.name, options?.labels)
+    if (options?.sort !== undefined) {
+      if (typeof options.sort !== 'boolean') fail(this.constructor.name, `'sort' is true or false, got ${describe(options.sort)}`)
+      this.sort = options.sort
+    }
+  }
+
+  /**
+   * @internal Drawn as squares, one a point, rather than as GL points: when the geometry gives each
+   * point its own size, opacity or angle, or the points are sorted. Squares can be any size and stay
+   * whole at the edge of the view.
+   */
+  get drawsSprites() {
+    const g = this.geometry
+    return this.sort || !!(g.sizes || g.opacities || g.angles)
   }
 
   /** @internal @returns {Record<string, unknown>} */
   cloneOptions() {
-    return { ...super.cloneOptions(), labels: this.labels }
+    return { ...super.cloneOptions(), labels: this.labels, sort: this.sort }
+  }
+
+  /** @internal @returns {Record<string, unknown>} */
+  jsonOptions() {
+    return { ...super.jsonOptions(), ...(this.sort ? { sort: true } : {}) }
   }
 
   /** @returns {'points'} */
@@ -488,12 +516,52 @@ export class Points extends Drawable {
   }
 }
 
+const ARROWS = ['none', 'start', 'end', 'both']
+
+/**
+ * @typedef {DrawableOptions & { arrows?: 'none' | 'start' | 'end' | 'both', arrowSize?: number }} LinesOptions
+ */
+
 /**
  * Line segments: indices (or consecutive vertices) in pairs. Width is in pixels and works on
- * every platform. edges(geometry) makes a wireframe of any geometry.
+ * every platform. edges(geometry) makes a wireframe of any geometry. Segments each starting where
+ * the one before ended make a chain - a polyline - which dashes run on along and arrowheads finish.
  */
 export class Lines extends Drawable {
   static type = 'lines'
+  static get OPTIONS() { return [...DRAWABLE_OPTIONS, 'arrows', 'arrowSize'] }
+
+  /** Arrowheads at the ends of each chain: at its 'start', its 'end', 'both' or 'none'. @type {'none' | 'start' | 'end' | 'both'} */
+  arrows = 'none'
+  /** Arrowhead length in pixels; 0 sizes them from the material's width. */
+  arrowSize = 0
+
+  /** @param {LinesOptions} options */
+  constructor(options) {
+    super(options)
+    if (options?.arrows !== undefined) this.arrows = /** @type {any} */ (checkOneOf('Lines', 'arrows', options.arrows, ARROWS))
+    if (options?.arrowSize !== undefined) this.arrowSize = Math.max(0, checkNumber('Lines', 'arrowSize', options.arrowSize))
+  }
+
+  /** @internal Which ends get arrowheads, for the shader: 1 the start, 2 the end. */
+  get arrowBits() {
+    return ARROWS.indexOf(this.arrows)
+  }
+
+  /** @internal An arrowhead's length in pixels, before the pixel ratio. @param {number} width */
+  arrowPixels(width) {
+    return this.arrowSize || 6 + width * 3
+  }
+
+  /** @internal @returns {Record<string, unknown>} */
+  cloneOptions() {
+    return { ...super.cloneOptions(), arrows: this.arrows, arrowSize: this.arrowSize }
+  }
+
+  /** @internal @returns {Record<string, unknown>} */
+  jsonOptions() {
+    return { ...super.jsonOptions(), ...(this.arrows !== 'none' ? { arrows: this.arrows } : {}), ...(this.arrowSize ? { arrowSize: this.arrowSize } : {}) }
+  }
 
   /** @returns {'lines'} */
   get drawMode() {
@@ -583,3 +651,16 @@ export class Label extends Node {
     return json
   }
 }
+
+/**
+ * A drawable's world box, grown by as far as its shader's vertex hook says it can move a vertex.
+ * @param {import('../value/Box3.js').Box3} box @param {import('../material/Material.js').Material} material
+ */
+function padForHooks(box, material) {
+  const pad = material.shader?.vertex ? material.shader.bounds ?? 0 : 0
+  if (pad > 0 && !box.isEmpty()) {
+    box.min.set(box.min[0] - pad, box.min[1] - pad, box.min[2] - pad)
+    box.max.set(box.max[0] + pad, box.max[1] + pad, box.max[2] + pad)
+  }
+  return box
+}

package/src/watch.js

@@ -10,6 +10,8 @@
 /** @type {WeakMap<object, number>} */
 const ids = new WeakMap()
 let nextId = 1
+/** Does a material's shader hook read the clock? @param {{ vertex: string, fragment: string, lit: string }} h */
+export const usesTime = (h) => /\buTime\b/.test(h.vertex + h.fragment + h.lit)
 /** @param {object} o */
 const idOf = (o) => {
   let id = ids.get(o)
@@ -24,14 +26,17 @@ export class ChangeWatch {
   #previousCount = -1
   /** @type {string[]} */ #strings = []
   /** @type {string[]} */ #previousStrings = []
+  #time = 0
 
   /**
    * Has anything that affects the picture changed since the last call? The first call says yes.
    * @param {Scene} scene
    * @param {Camera} camera
+   * @param {number} [time] the View's clock, which shader hooks reading uTime follow
    * @returns {boolean}
    */
-  changed(scene, camera) {
+  changed(scene, camera, time = 0) {
+    this.#time = time
     this.#count = 0
     this.#strings = []
     this.#camera(camera)
@@ -147,7 +152,11 @@ export class ChangeWatch {
     this.#push(g.version)
     this.#push(g.drawCount ?? -1)
     this.#push(node.renderOrder)
-    this.#push((node.castShadow ? 1 : 0) | (node.receiveShadow ? 2 : 0))
+    this.#push((node.castShadow ? 1 : 0) | (node.receiveShadow ? 2 : 0) | (node.sort ? 4 : 0))
+    if ('arrowBits' in node) {
+      this.#push(node.arrowBits)
+      this.#push(node.arrowSize)
+    }
     // per-instance labels come from these, so swapping either redraws
     this.#push(node.labels ? idOf(node.labels) : 0)
     this.#push(node.data && typeof node.data === 'object' ? idOf(node.data) : 0)
@@ -164,6 +173,9 @@ export class ChangeWatch {
     this.#push(m.metalness)
     this.#push(m.size)
     this.#push(m.width)
+    this.#push(m.dash)
+    this.#push(m.gap)
+    this.#push(m.dashOffset)
     this.#push(m.alphaTest)
     this.#push(m.normalScale)
     this.#push(m.aoMapIntensity)
@@ -187,7 +199,18 @@ export class ChangeWatch {
     this.#pushAll(m.translucencyColor)
     this.#push((m.unlit ? 1 : 0) | (m.flatShading ? 2 : 0) | (m.doubleSided ? 4 : 0) | (m.vertexColors ? 8 : 0) |
       (m.depthWrite ? 16 : 0) | (m.depthTest ? 32 : 0) | (m.sizeAttenuation ? 64 : 0) | (m.blending === 'additive' ? 128 : m.blending === 'multiply' ? 1024 : 0) | (m.transparent ? 256 : 0) | (m.fog ? 512 : 0))
-    for (const [, texture] of m.textures) this.#texture(texture)
+    for (const [, texture] of m.allTextures) this.#texture(texture)
+    const hooks = m.shader
+    if (hooks) {
+      this.#push(idOf(hooks))
+      for (const v of Object.values(hooks.uniforms)) {
+        if (typeof v === 'number') this.#push(v)
+        // numbers and colours - textures count through their versions, above
+        else if (Array.isArray(v) || ArrayBuffer.isView(v)) this.#pushAll(/** @type {ArrayLike<number>} */ (v))
+      }
+      // a hook that reads the clock moves on its own while time runs
+      if (usesTime(hooks)) this.#push(this.#time)
+    }
   }
 
   /** @param {any} texture */