phoria2 1.0.0 → 1.1.0

package/src/webgl/passes.js

@@ -5,6 +5,7 @@ import * as mat4 from '../math/mat4.js'
 import { irradianceSH } from '../irradiance.js'
 import { POINT_SHADOW_SIZE, SHADOW_MAP_SIZE, SPOT_ATLAS_SIZE } from '../shadow.js'
 import { CLIP, CLIP_ONLY_FRAGMENT, COMMON, EQUIRECT, FULLSCREEN_VERTEX, MESH_VERTEX, TONE_MAP } from './shaders.js'
+import { uvMatrix } from './resources.js'
 
 /** @import { Programs } from './programs.js' */
 /** @import { Resources } from './resources.js' */
@@ -154,9 +155,98 @@ void main() {
   fragColor = vec4(linearToSrgb(ring.rgb), 1.0);
 }
 `
+// Antialiased outlines. The mask is drawn multisampled, with a second target saying how much of
+// each pixel it covers; once resolved, the mask holds colour and width times that coverage. The
+// ring is then measured from the shape's edge, not from masked pixels' middles - a pixel's edge is
+// its coverage less a half beyond its middle - and in true distance, so corners come out round. Its
+// outer edge fades over a pixel, and its inner edge leaves the shape's share of each pixel alone.
+const OUTLINE_COVER_FRAGMENT = /* glsl */ `
+precision highp float;
+in vec3 vWorldPosition;
+uniform vec4 uMask;
+layout(location = 0) out vec4 fragColor;
+layout(location = 1) out vec4 fragCoverage;
+${CLIP}
+void main() {
+  clipAway(vWorldPosition);
+  fragColor = uMask;
+  fragCoverage = vec4(1.0);
+}
+`
+const SMOOTH = /* glsl */ `
+uniform sampler2D uMask;
+uniform sampler2D uCoverage;
+uniform vec2 uTexel;
+uniform int uRadius;
+// a masked pixel's colour and width, from the resolved mask and its coverage
+vec4 masked(vec2 uv, float coverage) {
+  vec4 m = texture(uMask, uv) / coverage;
+  return vec4(m.rgb, m.a * ${OUTLINE_MAX}.0);
+}
+`
+// across: each pixel notes which masked pixel along its row has the nearest edge, as an offset
+const OUTLINE_SMOOTH_WIDEN_FRAGMENT = /* glsl */ `
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+${SMOOTH}
+void main() {
+  float nearest = 1e9;
+  int at = 0;
+  bool found = false;
+  for (int i = -${OUTLINE_MAX + 1}; i <= ${OUTLINE_MAX + 1}; i++) {
+    if (abs(i) > uRadius + 1) continue;
+    vec2 uv = vUv + vec2(float(i) * uTexel.x, 0.0);
+    float c = texture(uCoverage, uv).r;
+    if (c <= 0.0) continue;
+    float d = abs(float(i)) - (c - 0.5);
+    if (d < masked(uv, c).a + 0.5 && d < nearest) {
+      nearest = d;
+      at = i;
+      found = true;
+    }
+  }
+  fragColor = found ? vec4(float(at + 32) / 255.0, 0.0, 0.0, 1.0) : vec4(0.0);
+}
+`
+// down, over the scene: the nearest of the rows' nearest, in true distance, faded at both edges
+const OUTLINE_SMOOTH_COMPOSITE_FRAGMENT = /* glsl */ `
+precision highp float;
+in vec2 vUv;
+uniform sampler2D uNearest;
+out vec4 fragColor;
+${COMMON}
+${SMOOTH}
+void main() {
+  float here = texture(uCoverage, vUv).r;
+  if (here >= 1.0) discard;
+  float nearest = 1e9;
+  vec4 ring = vec4(0.0);
+  for (int j = -${OUTLINE_MAX + 1}; j <= ${OUTLINE_MAX + 1}; j++) {
+    if (abs(j) > uRadius + 1) continue;
+    vec2 row = vUv + vec2(0.0, float(j) * uTexel.y);
+    vec4 n = texture(uNearest, row);
+    if (n.a <= 0.0) continue;
+    int i = int(n.r * 255.0 + 0.5) - 32;
+    vec2 uv = row + vec2(float(i) * uTexel.x, 0.0);
+    float c = texture(uCoverage, uv).r;
+    float d = length(vec2(float(i), float(j))) - (c - 0.5);
+    if (d < nearest) {
+      nearest = d;
+      ring = masked(uv, c);
+    }
+  }
+  float alpha = clamp(ring.a - nearest + 0.5, 0.0, 1.0) * (1.0 - here);
+  if (alpha <= 0.0) discard;
+  fragColor = vec4(linearToSrgb(ring.rgb) * alpha, alpha);
+}
+`
 const OUTLINE_MASK = /** @type {[string, string]} */ ([MESH_VERTEX, OUTLINE_MASK_FRAGMENT])
 const OUTLINE_WIDEN = /** @type {[string, string]} */ ([FULLSCREEN_VERTEX, OUTLINE_WIDEN_FRAGMENT])
 const OUTLINE_COMPOSITE = /** @type {[string, string]} */ ([FULLSCREEN_VERTEX, OUTLINE_COMPOSITE_FRAGMENT])
+const OUTLINE_COVER = /** @type {[string, string]} */ ([MESH_VERTEX, OUTLINE_COVER_FRAGMENT])
+const OUTLINE_SMOOTH_WIDEN = /** @type {[string, string]} */ ([FULLSCREEN_VERTEX, OUTLINE_SMOOTH_WIDEN_FRAGMENT])
+const OUTLINE_SMOOTH_COMPOSITE = /** @type {[string, string]} */ ([FULLSCREEN_VERTEX, OUTLINE_SMOOTH_COMPOSITE_FRAGMENT])
 
 // shadow maps only need depth - of what isn't cut away
 const DEPTH = /** @type {[string, string]} */ ([MESH_VERTEX, CLIP_ONLY_FRAGMENT])
@@ -183,12 +273,19 @@ const ENV_LEVELS = 6
  * @typedef {{ define: string, uniforms: Record<string, unknown>, sampler: string, texture: WebGLTexture }} ShadowMap
  */
 
+/**
+ * @typedef {{ texture: WebGLTexture, framebuffer: WebGLFramebuffer }} Target
+ * @typedef {{ width: number, height: number, smooth: boolean, mask: Target, wide: Target, coverage: Target | null,
+ *   msaa: { framebuffer: WebGLFramebuffer, renderbuffers: WebGLRenderbuffer[] } | null }} OutlineTargets
+ * @typedef {{ mask: WebGLTexture, wide: WebGLTexture, coverage: WebGLTexture | null, radius: number, width: number, height: number }} OutlineMask
+ */
+
 export class Passes {
   /** @type {WeakMap<Texture, Environment>} */ #environments = new WeakMap()
   /** @type {{ texture: WebGLTexture, framebuffer: WebGLFramebuffer } | null} */ #shadow = null
   /** Spot lights' shadows, a tile each. @type {{ texture: WebGLTexture, framebuffer: WebGLFramebuffer } | null} */ #spotShadow = null
   /** A point light's shadow: a depth cube, a framebuffer a face. @type {{ texture: WebGLTexture, framebuffers: WebGLFramebuffer[] } | null} */ #pointShadow = null
-  /** Outlines' mask and its widened copy. @type {{ width: number, height: number, mask: { texture: WebGLTexture, framebuffer: WebGLFramebuffer }, wide: { texture: WebGLTexture, framebuffer: WebGLFramebuffer } } | null} */ #outline = null
+  /** Outlines' mask and its widened copy. @type {OutlineTargets | null} */ #outline = null
   /** Rendering to float textures, which environments need. */
   floatTargets = false
 
@@ -413,6 +510,8 @@ export class Passes {
       // read the map as the drawn surface reads it - projected, for a triplanar one
       const triplanar = cutout && !!material.map && material.triplanar > 0
       if (cutout) defines.push('ALPHA_TEST', ...(material.map ? ['MAP'] : []), ...(triplanar ? ['TRIPLANAR'] : []))
+      // a map on the second UV set reads it here too
+      if (cutout && material.map?.uvSet === 1 && item.geometry.uvs2) defines.push('UV2', 'uMapSet vUv2')
       const program = this.programs.ready('depth', defines, DEPTH)
       gl.useProgram(program.program)
       program.set('uViewProjection', viewProjection)
@@ -422,8 +521,10 @@ export class Passes {
         program.set('uOpacity', material.opacity)
         program.set('uAlphaTest', material.alphaTest)
         const map = material.map
-        program.set('uUvTransform', map ? [map.repeat[0], map.repeat[1], map.offset[0], map.offset[1]] : [1, 1, 0, 0])
-        if (map) program.set('uMap', this.resources.texture(map))
+        if (map) {
+          program.set('uMapUv', uvMatrix(map))
+          program.set('uMap', this.resources.texture(map))
+        }
         if (triplanar) program.set('uTriplanar', material.triplanar)
       }
       this.resources.drawTriangles(item.geometry, instances)
@@ -434,15 +535,19 @@ export class Passes {
    * The first half of drawing outlines, before the scene: a mask of the outlined subtrees - each
    * pixel they cover in their colour, with the line's width in alpha - then that mask widened
    * sideways. outlineComposite() widens it up and down and draws the ring left round each mask.
+   * Smooth outlines draw the mask multisampled, with how much of each pixel it covers, and measure
+   * the ring from the shape's edge; otherwise each pixel is in or out.
    * @param {FrameOutline[]} outlines @param {FrameDescription} frame
    * @param {number} width @param {number} height drawing buffer pixels
    * @param {number} pixelRatio
-   * @returns {{ mask: WebGLTexture, wide: WebGLTexture, radius: number }}
+   * @param {boolean} smooth antialiased: soft edges and round corners
+   * @returns {OutlineMask}
    */
-  outlineMask(outlines, frame, width, height, pixelRatio) {
+  outlineMask(outlines, frame, width, height, pixelRatio, smooth) {
     const gl = this.gl
-    const targets = this.#outlineTargets(width, height)
-    gl.bindFramebuffer(gl.FRAMEBUFFER, targets.mask.framebuffer)
+    const targets = this.#outlineTargets(width, height, smooth)
+    gl.bindFramebuffer(gl.FRAMEBUFFER, targets.msaa ? targets.msaa.framebuffer : targets.mask.framebuffer)
+    if (targets.msaa) gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1])
     gl.viewport(0, 0, width, height)
     gl.clearColor(0, 0, 0, 0)
     gl.clear(gl.COLOR_BUFFER_BIT)
@@ -457,7 +562,7 @@ export class Passes {
       for (const item of outline.items) {
         const defines = item.instances ? ['INSTANCED'] : []
         if (item.clip) defines.push('CLIP')
-        const program = this.programs.ready('outline-mask', defines, OUTLINE_MASK)
+        const program = smooth ? this.programs.ready('outline-cover', defines, OUTLINE_COVER) : this.programs.ready('outline-mask', defines, OUTLINE_MASK)
         gl.useProgram(program.program)
         program.set('uViewProjection', frame.camera.viewProjection)
         program.set('uModel', item.worldMatrix)
@@ -466,35 +571,62 @@ export class Passes {
         this.resources.drawTriangles(item.geometry, item.instances)
       }
     }
+    // the samples resolved: the mask into its texture, the coverage into its own
+    if (targets.msaa && targets.coverage) {
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, targets.msaa.framebuffer)
+      for (const [attachment, target] of /** @type {[number, Target][]} */ ([[gl.COLOR_ATTACHMENT0, targets.mask], [gl.COLOR_ATTACHMENT1, targets.coverage]])) {
+        gl.readBuffer(attachment)
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, target.framebuffer)
+        gl.blitFramebuffer(0, 0, width, height, 0, 0, width, height, gl.COLOR_BUFFER_BIT, gl.NEAREST)
+      }
+    }
     // widened sideways
     gl.bindFramebuffer(gl.FRAMEBUFFER, targets.wide.framebuffer)
     gl.clear(gl.COLOR_BUFFER_BIT)
-    const widen = this.programs.ready('outline-widen', [], OUTLINE_WIDEN)
-    gl.useProgram(widen.program)
-    widen.set('uSource', targets.mask.texture)
-    widen.set('uStep', [1 / width, 0])
-    widen.set('uRadius', radius)
+    if (targets.coverage) {
+      const widen = this.programs.ready('outline-smooth-widen', [], OUTLINE_SMOOTH_WIDEN)
+      gl.useProgram(widen.program)
+      widen.set('uMask', targets.mask.texture)
+      widen.set('uCoverage', targets.coverage.texture)
+      widen.set('uTexel', [1 / width, 1 / height])
+      widen.set('uRadius', radius)
+    } else {
+      const widen = this.programs.ready('outline-widen', [], OUTLINE_WIDEN)
+      gl.useProgram(widen.program)
+      widen.set('uSource', targets.mask.texture)
+      widen.set('uStep', [1 / width, 0])
+      widen.set('uRadius', radius)
+    }
     this.programs.drawFullscreen()
     gl.depthMask(true)
     gl.enable(gl.DEPTH_TEST)
     gl.bindFramebuffer(gl.FRAMEBUFFER, null)
-    return { mask: targets.mask.texture, wide: targets.wide.texture, radius }
+    return { mask: targets.mask.texture, wide: targets.wide.texture, coverage: targets.coverage?.texture ?? null, radius, width, height }
   }
 
   /**
    * Draw the outlines over the finished scene, into whatever is bound: the sideways-widened mask
    * widened up and down too, less the mask itself, so a ring is left round each subtree.
-   * @param {{ mask: WebGLTexture, wide: WebGLTexture, radius: number }} outline
-   * @param {number} height drawing buffer pixels
+   * @param {OutlineMask} outline
    */
-  outlineComposite(outline, height) {
+  outlineComposite(outline) {
     const gl = this.gl
-    const program = this.programs.ready('outline-composite', [], OUTLINE_COMPOSITE)
-    gl.useProgram(program.program)
-    program.set('uSource', outline.wide)
-    program.set('uMask', outline.mask)
-    program.set('uStep', [0, 1 / height])
-    program.set('uRadius', outline.radius)
+    if (outline.coverage) {
+      const program = this.programs.ready('outline-smooth-composite', [], OUTLINE_SMOOTH_COMPOSITE)
+      gl.useProgram(program.program)
+      program.set('uNearest', outline.wide)
+      program.set('uMask', outline.mask)
+      program.set('uCoverage', outline.coverage)
+      program.set('uTexel', [1 / outline.width, 1 / outline.height])
+      program.set('uRadius', outline.radius)
+    } else {
+      const program = this.programs.ready('outline-composite', [], OUTLINE_COMPOSITE)
+      gl.useProgram(program.program)
+      program.set('uSource', outline.wide)
+      program.set('uMask', outline.mask)
+      program.set('uStep', [0, 1 / outline.height])
+      program.set('uRadius', outline.radius)
+    }
     gl.disable(gl.DEPTH_TEST)
     gl.disable(gl.CULL_FACE)
     gl.depthMask(false)
@@ -505,22 +637,32 @@ export class Passes {
     gl.enable(gl.DEPTH_TEST)
   }
 
-  /** The mask and its widened copy, made again when the size changes. @param {number} width @param {number} height */
-  #outlineTargets(width, height) {
+  /**
+   * The mask and its widened copy - and, for smooth outlines, the multisampled buffers drawn into
+   * and the resolved coverage - made again when the size or the kind changes.
+   * @param {number} width @param {number} height @param {boolean} smooth
+   * @returns {OutlineTargets}
+   */
+  #outlineTargets(width, height, smooth) {
     const t = this.#outline
-    if (t && t.width === width && t.height === height) return t
+    if (t && t.width === width && t.height === height && t.smooth === smooth) return t
     const gl = this.gl
     if (t) {
-      for (const { texture, framebuffer } of [t.mask, t.wide]) {
-        gl.deleteTexture(texture)
-        gl.deleteFramebuffer(framebuffer)
+      for (const target of [t.mask, t.wide, t.coverage]) {
+        if (!target) continue
+        gl.deleteTexture(target.texture)
+        gl.deleteFramebuffer(target.framebuffer)
+      }
+      if (t.msaa) {
+        gl.deleteFramebuffer(t.msaa.framebuffer)
+        for (const buffer of t.msaa.renderbuffers) gl.deleteRenderbuffer(buffer)
       }
     }
-    const make = () => {
+    const make = (/** @type {number} */ format = gl.RGBA8) => {
       const texture = /** @type {WebGLTexture} */ (gl.createTexture())
       gl.activeTexture(gl.TEXTURE15)
       gl.bindTexture(gl.TEXTURE_2D, texture)
-      gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, width, height)
+      gl.texStorage2D(gl.TEXTURE_2D, 1, format, width, height)
       // read texel for texel: no blending between neighbours
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
@@ -531,7 +673,23 @@ export class Passes {
       gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0)
       return { texture, framebuffer }
     }
-    this.#outline = { width, height, mask: make(), wide: make() }
+    /** @type {OutlineTargets['msaa']} */
+    let msaa = null
+    if (smooth) {
+      // two multisampled targets drawn at once: the mask, and its coverage
+      const samples = Math.min(4, gl.getParameter(gl.MAX_SAMPLES))
+      const framebuffer = /** @type {WebGLFramebuffer} */ (gl.createFramebuffer())
+      gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer)
+      const renderbuffers = [gl.RGBA8, gl.R8].map((format, i) => {
+        const buffer = /** @type {WebGLRenderbuffer} */ (gl.createRenderbuffer())
+        gl.bindRenderbuffer(gl.RENDERBUFFER, buffer)
+        gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, format, width, height)
+        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, gl.RENDERBUFFER, buffer)
+        return buffer
+      })
+      msaa = { framebuffer, renderbuffers }
+    }
+    this.#outline = { width, height, smooth, mask: make(), wide: make(), coverage: smooth ? make(gl.R8) : null, msaa }
     gl.bindFramebuffer(gl.FRAMEBUFFER, null)
     return this.#outline
   }

package/src/webgl/picking.js

@@ -232,7 +232,6 @@ export class Picker {
     program.set('uModel', worldMatrix)
     program.set('uPickId', id)
     program.set('uHighlightIndex', -2)
-    program.set('uUvTransform', [1, 1, 0, 0])
     if (item.clip) program.set('uClipPlane', item.clip.plane)
 
     if (kind === 'lines') {

package/src/webgl/resources.js

@@ -2,6 +2,7 @@
 // CPU objects through their `version` counters. Everything is keyed by object in WeakMaps, so a
 // dropped geometry's entry goes with it; dispose() frees the GL objects straight away.
 import { ATTRIBUTES } from './shaders.js'
+import { isVideo } from '../material/Texture.js'
 
 /** @import { Geometry } from '../geometry/Geometry.js' */
 /** @import { Texture, DataImage } from '../material/Texture.js' */
@@ -31,9 +32,79 @@ const UPLOAD_UNIT = 15
  * @param {{ instanceMatrices: Float32Array, instanceColors: Float32Array | null } | null} instances
  * @param {boolean} withNormals
  */
-function layoutOf(g, instances, withNormals) {
-  return [g.positions.length, withNormals, g.uvs?.length, g.colors?.length, g.indices?.length,
-    instances?.instanceMatrices.length, instances?.instanceColors?.length].join()
+function layoutOf(g, instances, withNormals, withTangents) {
+  return [g.positions.length, withNormals, g.uvs?.length, g.uvs2?.length, g.colors?.length, g.indices?.length,
+    instances?.instanceMatrices.length, instances?.instanceColors?.length, withTangents].join()
+}
+
+/**
+ * Per-vertex tangents along the UVs' u, with the way v runs in w (Lengyel's method): smooth where
+ * the normals are. Without UVs, around the mesh's up axis.
+ * @param {Geometry} g
+ * @returns {Float32Array}
+ */
+export function tangentsOf(g) {
+  const p = g.positions, n = g.normals, uv = g.uvs, count = p.length / 3
+  const out = new Float32Array(count * 4)
+  const t = new Float32Array(count * 3), b = new Float32Array(count * 3)
+  if (uv) {
+    const idx = g.indices, triangles = (idx ? idx.length : count) / 3
+    for (let k = 0; k < triangles; k++) {
+      const i0 = idx ? idx[k * 3] : k * 3, i1 = idx ? idx[k * 3 + 1] : k * 3 + 1, i2 = idx ? idx[k * 3 + 2] : k * 3 + 2
+      const e1x = p[i1 * 3] - p[i0 * 3], e1y = p[i1 * 3 + 1] - p[i0 * 3 + 1], e1z = p[i1 * 3 + 2] - p[i0 * 3 + 2]
+      const e2x = p[i2 * 3] - p[i0 * 3], e2y = p[i2 * 3 + 1] - p[i0 * 3 + 1], e2z = p[i2 * 3 + 2] - p[i0 * 3 + 2]
+      const du1 = uv[i1 * 2] - uv[i0 * 2], dv1 = uv[i1 * 2 + 1] - uv[i0 * 2 + 1]
+      const du2 = uv[i2 * 2] - uv[i0 * 2], dv2 = uv[i2 * 2 + 1] - uv[i0 * 2 + 1]
+      const det = du1 * dv2 - du2 * dv1
+      if (Math.abs(det) < 1e-12) continue
+      const r = 1 / det
+      const tx = (e1x * dv2 - e2x * dv1) * r, ty = (e1y * dv2 - e2y * dv1) * r, tz = (e1z * dv2 - e2z * dv1) * r
+      const bx = (e2x * du1 - e1x * du2) * r, by = (e2y * du1 - e1y * du2) * r, bz = (e2z * du1 - e1z * du2) * r
+      for (const i of [i0, i1, i2]) {
+        t[i * 3] += tx; t[i * 3 + 1] += ty; t[i * 3 + 2] += tz
+        b[i * 3] += bx; b[i * 3 + 1] += by; b[i * 3 + 2] += bz
+      }
+    }
+  }
+  for (let i = 0; i < count; i++) {
+    const nx = n[i * 3], ny = n[i * 3 + 1], nz = n[i * 3 + 2]
+    let tx = t[i * 3], ty = t[i * 3 + 1], tz = t[i * 3 + 2]
+    // onto the surface, square to the normal
+    const d = nx * tx + ny * ty + nz * tz
+    tx -= nx * d; ty -= ny * d; tz -= nz * d
+    let len = Math.hypot(tx, ty, tz)
+    if (len < 1e-9) {
+      // no UVs here: around the up axis, or the x axis for a surface facing up or down
+      if (Math.abs(ny) < 0.999) { tx = nz; ty = 0; tz = -nx } else { tx = 1; ty = 0; tz = 0 }
+      const e = nx * tx + ny * ty + nz * tz
+      tx -= nx * e; ty -= ny * e; tz -= nz * e
+      len = Math.hypot(tx, ty, tz) || 1
+    }
+    out[i * 4] = tx / len; out[i * 4 + 1] = ty / len; out[i * 4 + 2] = tz / len
+    // which way v runs against n x t: mirrored UVs turn the other way
+    const cx = ny * tz - nz * ty, cy = nz * tx - nx * tz, cz = nx * ty - ny * tx
+    out[i * 4 + 3] = cx * b[i * 3] + cy * b[i * 3 + 1] + cz * b[i * 3 + 2] < 0 ? -1 : 1
+  }
+  return out
+}
+
+const UV_MATRIX = new Float32Array(9)
+
+/**
+ * A map's UV transform as a 3x3 (column-major): repeat, then rotation about its centre, then offset -
+ * glTF's KHR_texture_transform order, turning the way three.js and glTF viewers do. Written into one
+ * shared array, so set it as a uniform straight away.
+ * @param {{ repeat: number[], offset: number[], rotation: number, center: number[] }} t
+ * @returns {Float32Array}
+ */
+export function uvMatrix(t) {
+  const c = Math.cos(t.rotation), s = Math.sin(t.rotation)
+  const [sx, sy] = t.repeat, [cx, cy] = t.center
+  const m = UV_MATRIX
+  m[0] = c * sx; m[1] = -s * sx; m[2] = 0
+  m[3] = s * sy; m[4] = c * sy; m[5] = 0
+  m[6] = cx - c * cx - s * cy + t.offset[0]; m[7] = cy + s * cx - c * cy + t.offset[1]; m[8] = 1
+  return m
 }
 
 // a quad as a triangle strip of [along, across] corners, shared by every Lines draw
@@ -78,17 +149,20 @@ export class Resources {
    * @param {Geometry} geometry
    * @param {{ instanceMatrices: Float32Array, instanceColors: Float32Array | null, version: number } | null} instances
    * @param {boolean} withNormals
+   * @param {boolean} [withTangents] add tangents, for brushed metal - kept once added
    * @returns {MeshBuffers}
    */
-  mesh(geometry, instances, withNormals) {
+  mesh(geometry, instances, withNormals, withTangents = false) {
     const key = instances ?? geometry
     this.#mark(key)
     const cache = withNormals ? this.#triangles : this.#points
     let entry = cache.get(key)
     // instanced buffers are kept by the node, so check it still has the same geometry
     const same = entry?.geometry === geometry
-    if (entry && same && entry.version === geometry.version && (!instances || entry.instanceVersion === instances.version)) return entry
-    const layout = layoutOf(geometry, instances, withNormals)
+    withTangents = withNormals && (withTangents || (same && !!entry?.attributes?.tangent))
+    if (entry && same && entry.version === geometry.version && (!instances || entry.instanceVersion === instances.version) &&
+      withTangents === !!entry.attributes?.tangent) return entry
+    const layout = layoutOf(geometry, instances, withNormals, withTangents)
     if (entry && same && entry.layout === layout) {
       // the data changed but kept its shape (moving vertices, particles, instances): refill in place
       if (entry.version !== geometry.version) {
@@ -96,7 +170,9 @@ export class Resources {
         this.#refill(a.position, geometry.positions)
         if (withNormals) this.#refill(a.normal, geometry.normals)
         if (geometry.uvs) this.#refill(a.uv, geometry.uvs)
+        if (geometry.uvs2) this.#refill(a.uv2, geometry.uvs2)
         if (geometry.colors) this.#refill(a.color, geometry.colors)
+        if (withTangents) this.#refill(a.tangent, tangentsOf(geometry))
         if (geometry.indices) {
           // the element binding belongs to the vertex array, so bind that first
           this.gl.bindVertexArray(entry.vao)
@@ -142,8 +218,10 @@ export class Resources {
     if (withNormals) attributes.normal = attribute(ATTRIBUTES.normal, geometry.normals, 3)
     if (geometry.uvs) attributes.uv = attribute(ATTRIBUTES.uv, geometry.uvs, 2)
     else gl.vertexAttrib2f(ATTRIBUTES.uv, 0, 0)
+    if (geometry.uvs2) attributes.uv2 = attribute(ATTRIBUTES.uv2, geometry.uvs2, 2)
     if (geometry.colors) attributes.color = attribute(ATTRIBUTES.color, geometry.colors, 3)
     else gl.vertexAttrib3f(ATTRIBUTES.color, 1, 1, 1)
+    if (withTangents) attributes.tangent = attribute(ATTRIBUTES.tangent, tangentsOf(geometry), 4)
 
     let matrixBuffer = null, colorBuffer = null
     if (instances) {
@@ -181,11 +259,12 @@ export class Resources {
    * Draw a mesh's triangles - instanced or not, indexed or not - with the program in use, as far as
    * its drawn count goes. Every pass that draws meshes draws them this way.
    * @param {Geometry} geometry @param {{ instanceMatrices: Float32Array, instanceColors: Float32Array | null, version: number, count: number } | null} instances
+   * @param {boolean} [withTangents] for brushed metal
    * @returns {number} triangles drawn
    */
-  drawTriangles(geometry, instances) {
+  drawTriangles(geometry, instances, withTangents = false) {
     const gl = this.gl
-    const buffers = this.mesh(geometry, instances, true)
+    const buffers = this.mesh(geometry, instances, true, withTangents)
     gl.bindVertexArray(buffers.vao)
     const elements = geometry.drawnCount - geometry.drawnCount % 3
     const count = instances ? instances.count : 1
@@ -272,6 +351,8 @@ export class Resources {
     const gl = this.gl
     let entry = this.#textures.get(texture)
     if (entry && entry.version === texture.version) return entry.texture
+    // a video with no frame yet: what it showed before, or white - and try again next frame
+    if (isVideo(texture.image) && /** @type {HTMLVideoElement} */ (texture.image).readyState < 2) return entry?.texture ?? this.#whiteTexture()
     if (!entry) {
       entry = { texture: /** @type {WebGLTexture} */ (gl.createTexture()), version: -1 }
       this.#textures.set(texture, entry)