phoria2 1.0.0 → 1.1.0

package/src/material/Material.js

@@ -30,8 +30,36 @@ import { Texture } from './Texture.js'
  * @property {MapInput | null} [aoMap] ambient occlusion in its red channel; darkens environment and ambient light
  * @property {number} [aoMapIntensity] 0-1 (default 1)
  * @property {MapInput | null} [emissiveMap] multiplies the emissive colour
+ * @property {MapInput | null} [lightMap] light baked into a texture, added as light from all round - usually on
+ *   the second UV set (uvSet: 1)
+ * @property {number} [lightMapIntensity] (default 1)
+ * @property {number} [environmentIntensity] this material's share of the environment's light and reflections:
+ *   lower for a matte floor in a shiny showroom, higher to make one thing catch the light (default 1)
  * @property {ColorInput} [emissive] glow colour (default black)
  * @property {number} [emissiveIntensity] (default 1)
+ * @property {number} [transmission] 0-1: how much light passes through, as through glass (default 0). Unlike
+ *   opacity, which fades the whole surface, glass keeps its reflections, and shows less of what is behind it
+ *   towards its edges. Its colour shows in proportion to 1 - transmission
+ * @property {number} [clearcoat] 0-1: a clear glossy layer over the surface - car paint, lacquer, varnish (default 0)
+ * @property {number} [clearcoatRoughness] 0-1: how glossy the coat is, 0 a mirror (default 0)
+ * @property {number} [sheen] 0-1: the soft bright rim of cloth at grazing angles - velvet, felt, upholstery (default 0)
+ * @property {ColorInput} [sheenColor] the sheen's colour (default white)
+ * @property {number} [sheenRoughness] 0-1: a thin bright rim at 0, a broad soft glow at 1 (default 0.5)
+ * @property {number} [ior] index of refraction, 1 or more: how strongly a non-metal reflects - water 1.33, glass and
+ *   plastic 1.5 (the default), diamond 2.4
+ * @property {number} [specularIntensity] 0-1: scales a non-metal's reflections, 0 for none - chalk, clay (default 1)
+ * @property {ColorInput} [specularColor] tints a non-metal's reflections face on (default white)
+ * @property {number} [anisotropy] 0-1: brushed metal - highlights drawn out along the brushing, which runs along
+ *   the UVs' u (around the mesh where it has no UVs) (default 0)
+ * @property {number} [anisotropyRotation] turns the brushing from the UVs' u, in radians (default 0)
+ * @property {number} [translucency] 0-1: light through thin surfaces, lighting them from behind - leaves, paper,
+ *   lampshades, curtains (default 0)
+ * @property {ColorInput} [translucencyColor] tints the light that comes through (default white)
+ * @property {MapInput | null} [matcap] a picture of a lit sphere that gives the whole look - clay, wax, chrome,
+ *   a painted ball - picked by which way the surface faces the camera. Lights, shadows and the environment are
+ *   ignored; the colour and colour map multiply it
+ * @property {number} [toon] cartoon shading in this many flat tones (2 or more) with a hard-edged highlight;
+ *   0 (the default) is smooth
  * @property {boolean} [unlit] flat colour that ignores lights (default false)
  * @property {boolean} [flatShading] faceted look from face normals (default false)
  * @property {boolean} [doubleSided] draw back faces too (default false)
@@ -46,18 +74,26 @@ import { Texture } from './Texture.js'
  * @property {number} [width] Lines: width in pixels (default 1)
  */
 
-const MAPS = ['map', 'roughnessMap', 'metalnessMap', 'normalMap', 'bumpMap', 'aoMap', 'emissiveMap']
+// the matcap last: the first map's repeat and offset are every map's, and a matcap has none
+const MAPS = ['map', 'roughnessMap', 'metalnessMap', 'normalMap', 'bumpMap', 'aoMap', 'emissiveMap', 'lightMap', 'matcap']
 // data maps hold numbers, not colours
 const LINEAR_MAPS = new Set(['roughnessMap', 'metalnessMap', 'normalMap', 'bumpMap', 'aoMap'])
 const FLAGS = ['unlit', 'flatShading', 'doubleSided', 'vertexColors', 'depthWrite', 'depthTest', 'sizeAttenuation', 'transparent', 'fog']
 const NUMBERS = { opacity: [0, 1], roughness: [0, 1], metalness: [0, 1], emissiveIntensity: [0, Infinity], size: [0, Infinity], width: [0, Infinity],
-  alphaTest: [0, 1], normalScale: [-Infinity, Infinity], aoMapIntensity: [0, 1], triplanar: [0, Infinity], bumpScale: [-Infinity, Infinity] }
+  alphaTest: [0, 1], normalScale: [-Infinity, Infinity], aoMapIntensity: [0, 1], triplanar: [0, Infinity], bumpScale: [-Infinity, Infinity],
+  transmission: [0, 1], clearcoat: [0, 1], clearcoatRoughness: [0, 1], sheen: [0, 1], sheenRoughness: [0, 1], ior: [1, Infinity],
+  specularIntensity: [0, 1], anisotropy: [0, 1], anisotropyRotation: [-Infinity, Infinity], translucency: [0, 1], toon: [0, 16],
+  lightMapIntensity: [0, Infinity], environmentIntensity: [0, Infinity] }
+// colours, and their defaults
+const COLORS = { color: 0xffffff, emissive: 0x000000, sheenColor: 0xffffff, specularColor: 0xffffff, translucencyColor: 0xffffff }
 const DEFAULTS = {
-  name: '', opacity: 1, alphaTest: 0, roughness: 0.5, metalness: 0, normalScale: 1, bumpScale: 1, aoMapIntensity: 1, triplanar: 0, emissiveIntensity: 1, unlit: false, flatShading: false,
+  name: '', opacity: 1, alphaTest: 0, roughness: 0.5, metalness: 0, normalScale: 1, bumpScale: 1, aoMapIntensity: 1, triplanar: 0, emissiveIntensity: 1,
+  transmission: 0, clearcoat: 0, clearcoatRoughness: 0, sheen: 0, sheenRoughness: 0.5, ior: 1.5, specularIntensity: 1, anisotropy: 0,
+  anisotropyRotation: 0, translucency: 0, toon: 0, lightMapIntensity: 1, environmentIntensity: 1, unlit: false, flatShading: false,
   doubleSided: false, vertexColors: false, blending: 'normal', depthWrite: true, depthTest: true, fog: true,
   size: 1, sizeAttenuation: true, width: 1,
 }
-const OPTIONS = ['name', 'color', 'emissive', ...MAPS, ...FLAGS, ...Object.keys(NUMBERS), 'blending']
+const OPTIONS = ['name', ...Object.keys(COLORS), ...MAPS, ...FLAGS, ...Object.keys(NUMBERS), 'blending']
 
 // what agents (and three.js habits) will reach for
 const HINTS = {
@@ -65,7 +101,17 @@ const HINTS = {
   side: "use 'doubleSided: true'",
   wireframe: 'use new Lines({ geometry: edges(geometry) }) for a wireframe',
   shininess: "use 'roughness' (0 = mirror, 1 = matte)",
-  specular: "use 'roughness' and 'metalness'",
+  envMapIntensity: "use 'environmentIntensity'",
+  reflectivityScale: "use 'environmentIntensity'",
+  matcapMap: "use 'matcap'",
+  gradientMap: "use 'toon' - the number of flat tones",
+  cel: "use 'toon' - the number of flat tones",
+  celShading: "use 'toon' - the number of flat tones",
+  specular: "use 'specularIntensity' and 'specularColor' for a non-metal's reflections, or 'roughness' and 'metalness'",
+  reflectivity: "use 'ior' (1.5 by default) or 'specularIntensity'",
+  anisotropyStrength: "use 'anisotropy'",
+  diffuseTransmission: "use 'translucency'",
+  subsurface: "use 'translucency' for light through thin surfaces",
   colour: "use 'color'",
   emissiveColor: "use 'emissive'",
   alpha: "use 'opacity'",
@@ -91,6 +137,19 @@ export class Material {
   /** @type {number} */ roughness
   /** @type {number} */ metalness
   /** @type {number} */ emissiveIntensity
+  /** How much light passes through, as through glass: 0-1. @type {number} */ transmission
+  /** A clear glossy layer over the surface: 0-1. @type {number} */ clearcoat
+  /** How glossy the coat is, 0 a mirror. @type {number} */ clearcoatRoughness
+  /** The soft bright rim of cloth: 0-1. @type {number} */ sheen
+  /** A thin bright rim at 0, a broad soft glow at 1. @type {number} */ sheenRoughness
+  /** Index of refraction: how strongly a non-metal reflects (1.5). @type {number} */ ior
+  /** Scales a non-metal's reflections, 0-1. @type {number} */ specularIntensity
+  /** Brushed metal: 0-1. @type {number} */ anisotropy
+  /** Turns the brushing from the UVs' u, in radians. @type {number} */ anisotropyRotation
+  /** Light through thin surfaces: 0-1. @type {number} */ translucency
+  /** Cartoon shading in this many flat tones; 0 is smooth. @type {number} */ toon
+  /** @type {number} */ lightMapIntensity
+  /** This material's share of the environment's light and reflections. @type {number} */ environmentIntensity
   /** @type {boolean} */ unlit
   /** @type {boolean} */ flatShading
   /** @type {boolean} */ doubleSided
@@ -103,8 +162,8 @@ export class Material {
   /** @type {boolean} */ sizeAttenuation
   /** @type {number} */ width
 
-  #color = new Color(0xffffff)
-  #emissive = new Color(0x000000)
+  /** @type {Record<string, Color>} */
+  #colors = Object.fromEntries(Object.entries(COLORS).map(([key, hex]) => [key, new Color(hex)]))
   #transparent = false
   /** @type {Record<string, Texture | null>} */
   #maps = Object.fromEntries(MAPS.map((m) => [m, null]))
@@ -117,8 +176,7 @@ export class Material {
     Object.assign(this, DEFAULTS)
     for (const [key, value] of /** @type {[string, any][]} */ (Object.entries(options))) {
       if (value === undefined) continue
-      if (key === 'color') this.color = value
-      else if (key === 'emissive') this.emissive = value
+      if (key in COLORS) this.#colors[key].set(value, 'Material')
       else if (MAPS.includes(key)) this.setMap(key, value)
       else if (FLAGS.includes(key)) this[key] = bool(key, value)
       else if (key in NUMBERS) this[key] = range(key, value, NUMBERS[key])
@@ -141,14 +199,29 @@ export class Material {
   }
 
   /** Base colour; assign any colour input. @returns {Color} */
-  get color() { return this.#color }
+  get color() { return this.#colors.color }
   /** @param {ColorInput} v */
-  set color(v) { this.#color.set(v, 'Material') }
+  set color(v) { this.#colors.color.set(v, 'Material') }
 
   /** Glow colour; assign any colour input. @returns {Color} */
-  get emissive() { return this.#emissive }
+  get emissive() { return this.#colors.emissive }
   /** @param {ColorInput} v */
-  set emissive(v) { this.#emissive.set(v, 'Material') }
+  set emissive(v) { this.#colors.emissive.set(v, 'Material') }
+
+  /** The sheen's colour; assign any colour input. @returns {Color} */
+  get sheenColor() { return this.#colors.sheenColor }
+  /** @param {ColorInput} v */
+  set sheenColor(v) { this.#colors.sheenColor.set(v, 'Material') }
+
+  /** Tints a non-metal's reflections face on; assign any colour input. @returns {Color} */
+  get specularColor() { return this.#colors.specularColor }
+  /** @param {ColorInput} v */
+  set specularColor(v) { this.#colors.specularColor.set(v, 'Material') }
+
+  /** Tints the light that comes through a translucent surface; assign any colour input. @returns {Color} */
+  get translucencyColor() { return this.#colors.translucencyColor }
+  /** @param {ColorInput} v */
+  set translucencyColor(v) { this.#colors.translucencyColor.set(v, 'Material') }
 
   /** @returns {Texture | null} */
   get map() { return this.#maps.map }
@@ -178,9 +251,17 @@ export class Material {
   get emissiveMap() { return this.#maps.emissiveMap }
   /** @param {MapInput | null} v */
   set emissiveMap(v) { this.setMap('emissiveMap', v) }
+  /** Light baked into a texture. @returns {Texture | null} */
+  get lightMap() { return this.#maps.lightMap }
+  /** @param {MapInput | null} v */
+  set lightMap(v) { this.setMap('lightMap', v) }
+  /** A picture of a lit sphere that gives the whole look. @returns {Texture | null} */
+  get matcap() { return this.#maps.matcap }
+  /** @param {MapInput | null} v */
+  set matcap(v) { this.setMap('matcap', v) }
 
   /** @internal
-   * @param {string} slot one of map, roughnessMap, metalnessMap, normalMap, aoMap, emissiveMap
+   * @param {string} slot one of map, roughnessMap, metalnessMap, normalMap, bumpMap, aoMap, emissiveMap, lightMap, matcap
    * @param {MapInput | null} value
    */
   setMap(slot, value) {
@@ -213,7 +294,7 @@ export class Material {
 
   /** Rendered in the transparent pass: an opacity below 1, additive or multiply blending, or set for maps with soft alpha. @returns {boolean} */
   get transparent() {
-    return this.#transparent || this.opacity < 1 || this.blending !== 'normal'
+    return this.#transparent || this.opacity < 1 || this.transmission > 0 || this.blending !== 'normal'
   }
   /** @param {boolean} v */
   set transparent(v) { this.#transparent = !!v }
@@ -226,6 +307,12 @@ export class Material {
     const parts = [this.unlit ? 'unlit' : 'lit']
     for (const [slot] of this.textures) parts.push(slot)
     if (this.alphaTest > 0) parts.push('cutout')
+    if (this.transmission > 0) parts.push('glass')
+    if (this.clearcoat > 0) parts.push('clearcoat')
+    if (this.sheen > 0) parts.push('sheen')
+    if (this.anisotropy > 0) parts.push('brushed')
+    if (this.translucency > 0) parts.push('translucent')
+    if (this.toon > 0) parts.push('toon')
     if (this.flatShading) parts.push('flat')
     if (this.vertexColors) parts.push('vcolor')
     return parts.join('+')
@@ -240,8 +327,7 @@ export class Material {
   clone() {
     const copy = new Material(this.toJSON(true))
     // the colours exactly: a description rounds them to 8-bit sRGB and can't hold values past 1
-    copy.color.set(this.#color)
-    copy.emissive.set(this.#emissive)
+    for (const [key, c] of Object.entries(this.#colors)) copy.#colors[key].set(c)
     return copy
   }
 
@@ -268,8 +354,7 @@ export class Material {
       if (this[key] !== value) json[key] = this[key]
     }
     if (this.#transparent) json.transparent = true
-    if (this.#color.getHex() !== 0xffffff) json.color = this.#color.getStyle()
-    if (this.#emissive.getHex() !== 0) json.emissive = this.#emissive.getStyle()
+    for (const [key, c] of Object.entries(this.#colors)) if (c.getHex() !== COLORS[key]) json[key] = c.getStyle()
     for (const [slot, t] of this.textures) {
       const desc = keepTextures ? t : t.toJSON()
       if (desc) json[slot] = desc

package/src/material/Texture.js

@@ -10,36 +10,49 @@ import { checkNumber, checkOneOf, checkOptions, describe, fail } from '../valida
  * @typedef {object} TextureOptions
  * @property {TextureImage} [image] the pixels; omit and give a url to load them
  * @property {string} [url] image to load (starts loading immediately in a browser); a .hdr file loads as
- *   linear HDR radiance, for scene.environment
+ *   linear HDR radiance, for scene.environment; a video (.mp4, .webm, .ogv, .mov, .m4v) plays muted and on a
+ *   loop, and texture.image is its <video> to pause, seek or unmute
  * @property {'srgb' | 'linear'} [colorSpace] 'srgb' for colour maps (default), 'linear' for data
  *   maps such as normal and roughness maps
  * @property {'repeat' | 'clamp' | 'mirror'} [wrap] (default 'repeat')
  * @property {number[]} [repeat] [u, v] (default [1, 1])
  * @property {number[]} [offset] [u, v] (default [0, 0])
+ * @property {number} [rotation] turns the image on the surface, in radians, about `center` (default 0)
+ * @property {number[]} [center] [u, v] the point rotation turns about, in repeated UVs (default [0, 0], the
+ *   corner, as glTF has it; [0.5, 0.5] for the middle of an unrepeated image)
+ * @property {0 | 1} [uvSet] which UV set to read: 0 the first, 1 the second (Geometry uvs2) - baked occlusion
+ *   and light maps usually come on the second (default 0)
  * @property {'linear' | 'nearest'} [filter] (default 'linear')
- * @property {boolean} [mipmaps] (default true)
+ * @property {boolean} [mipmaps] (default true; false for a video, which would make them every frame)
  * @property {number} [anisotropy] samples along a surface seen at a glancing angle - floors and roads
  *   stay sharp into the distance. Up to what the GPU allows; 1 is off (default 8)
  * @property {boolean} [flipY] flip on upload; false for glTF-style UVs (default false)
  */
 
-const OPTIONS = ['image', 'url', 'colorSpace', 'wrap', 'repeat', 'offset', 'filter', 'mipmaps', 'anisotropy', 'flipY']
-const DEFAULTS = { colorSpace: 'srgb', wrap: 'repeat', repeat: [1, 1], offset: [0, 0], filter: 'linear', mipmaps: true, anisotropy: 8, flipY: false }
+const OPTIONS = ['image', 'url', 'colorSpace', 'wrap', 'repeat', 'offset', 'rotation', 'center', 'uvSet', 'filter', 'mipmaps', 'anisotropy', 'flipY']
+const DEFAULTS = { colorSpace: 'srgb', wrap: 'repeat', repeat: [1, 1], offset: [0, 0], rotation: 0, center: [0, 0], uvSet: 0, filter: 'linear',
+  mipmaps: true, anisotropy: 8, flipY: false }
 
 const HINTS = {
   src: "use 'url' for the image address",
   encoding: "use colorSpace: 'srgb' | 'linear'",
   wrapS: "use wrap: 'repeat' | 'clamp' | 'mirror' (applies to both directions)",
   maxAnisotropy: "use 'anisotropy' - samples along glancing angles, 1 for off",
+  channel: "use 'uvSet' - 0 for the first UV set, 1 for the second",
+  texCoord: "use 'uvSet' - 0 for the first UV set, 1 for the second",
+  scale: "use 'repeat' - [u, v] times across",
 }
 
-/** An image for a material map. Canvas and video textures: set `needsUpdate()` after drawing. */
+/**
+ * An image for a material map. A video's frames upload by themselves as it plays; after drawing on
+ * a canvas, call `needsUpdate()`.
+ */
 export class Texture {
   /** The options it takes, and hints for names people reach for instead. */
   static OPTIONS = OPTIONS
   static HINTS = HINTS
-  /** @type {TextureImage | null} null until loaded */
-  image = null
+  /** @type {TextureImage | null} */
+  #image = null
   /** @type {string | null} */
   url = null
   /** @type {'srgb' | 'linear'} */
@@ -50,6 +63,12 @@ export class Texture {
   wrap = 'repeat'
   repeat = [1, 1]
   offset = [0, 0]
+  /** Turns the image on the surface, in radians, about `center`. */
+  rotation = 0
+  /** [u, v] the point rotation turns about, in repeated UVs. */
+  center = [0, 0]
+  /** Which UV set it reads: 0 the first, 1 the second (Geometry uvs2). @type {0 | 1} */
+  uvSet = 0
   /** @type {'linear' | 'nearest'} */
   filter = 'linear'
   mipmaps = true
@@ -75,7 +94,12 @@ export class Texture {
     this.filter = checkOneOf('Texture', 'filter', o.filter, ['linear', 'nearest'])
     this.repeat = pair('repeat', o.repeat)
     this.offset = pair('offset', o.offset)
-    this.mipmaps = !!o.mipmaps
+    this.rotation = checkNumber('Texture', 'rotation', o.rotation)
+    this.center = pair('center', o.center)
+    if (o.uvSet !== 0 && o.uvSet !== 1) fail('Texture', `'uvSet' is 0 (the first UV set) or 1 (the second), got ${describe(o.uvSet)}`)
+    this.uvSet = o.uvSet
+    // a video would make mipmaps every frame: off unless asked for
+    this.mipmaps = options.mipmaps !== undefined ? !!options.mipmaps : !(isVideo(o.image) || (!o.image && VIDEO.test(o.url ?? '')))
     this.anisotropy = checkNumber('Texture', 'anisotropy', o.anisotropy)
     if (!(this.anisotropy >= 1)) fail('Texture', `'anisotropy' is how many samples along a glancing angle - 1 (off) or more, got ${this.anisotropy}`)
     this.flipY = !!o.flipY
@@ -83,7 +107,8 @@ export class Texture {
 
     if (o.image) {
       this.image = o.image
-      this.ready = Promise.resolve(this)
+      this.ready = isVideo(o.image) ? loaded(/** @type {HTMLVideoElement} */ (o.image)).then(() => this) : Promise.resolve(this)
+      this.ready.catch(() => {})
     } else if (this.url) {
       this.ready = this.#load(this.url)
       // a failed load is reported by whoever awaits `ready`; don't also raise an unhandled rejection
@@ -94,6 +119,57 @@ export class Texture {
   }
 
   /** Call after redrawing a canvas or advancing a video. @returns {this} */
+  /**
+   * The pixels: null until loaded. A <video>'s frames upload by themselves while it plays.
+   * @returns {TextureImage | null}
+   */
+  get image() { return this.#image }
+  /** @param {TextureImage | null} v */
+  set image(v) {
+    this.#image = v
+    this.needsUpdate()
+    if (isVideo(v)) this.#follow(/** @type {HTMLVideoElement} */ (v))
+  }
+
+  // Each new frame of a playing video marks the texture changed, so views redraw with it: the
+  // browser's own per-frame callback where there is one, otherwise a check every animation frame
+  // while it plays. Following stops when the image is replaced.
+  /** @param {HTMLVideoElement} video */
+  #follow(video) {
+    if (typeof video.requestVideoFrameCallback === 'function') {
+      const frame = () => {
+        if (this.#image !== video) return
+        this.needsUpdate()
+        video.requestVideoFrameCallback(frame)
+      }
+      video.requestVideoFrameCallback(frame)
+      return
+    }
+    let last = -1, running = false
+    const tick = () => {
+      if (this.#image !== video || video.paused || video.ended) {
+        running = false
+        return
+      }
+      if (video.currentTime !== last) {
+        last = video.currentTime
+        this.needsUpdate()
+      }
+      requestAnimationFrame(tick)
+    }
+    const start = () => {
+      if (running || this.#image !== video) return
+      running = true
+      requestAnimationFrame(tick)
+    }
+    video.addEventListener('play', start)
+    // a seek while paused shows a new frame too
+    video.addEventListener('seeked', () => {
+      if (this.#image === video) this.needsUpdate()
+    })
+    if (!video.paused) start()
+  }
+
   /** 'srgb' for colour (decoded to linear by the GPU), 'linear' for data such as normals and roughness. Call needsUpdate() after changing it. @returns {'srgb' | 'linear'} */
   get colorSpace() { return this.#colorSpace }
   set colorSpace(v) {
@@ -139,12 +215,26 @@ export class Texture {
 
   /** @param {string} url @returns {Promise<Texture>} */
   async #load(url) {
+    if (VIDEO.test(url)) {
+      if (typeof document === 'undefined') throw new Error(`Texture: can't load '${url}' - no video support in this environment`)
+      const video = document.createElement('video')
+      // muted, so browsers let it play by itself; inline, so phones don't take it full screen
+      Object.assign(video, { crossOrigin: 'anonymous', muted: true, loop: true, playsInline: true, autoplay: true, src: url })
+      try {
+        await loaded(video)
+      } catch {
+        throw new Error(`Texture: failed to load '${url}'`)
+      }
+      // a browser that won't autoplay leaves it paused on its first frame: video.play() on a click starts it
+      video.play()?.catch(() => {})
+      this.image = video
+      return this
+    }
     if (/\.hdr($|[?#])/i.test(url)) {
       const [{ parseHDR }, response] = await Promise.all([import('../hdr.js'), fetch(url)])
       if (!response.ok) throw new Error(`Texture: failed to load '${url}' (${response.status})`)
       this.image = parseHDR(await response.arrayBuffer())
       this.colorSpace = 'linear'
-      this.needsUpdate()
       return this
     }
     if (typeof Image === 'undefined') {
@@ -159,11 +249,26 @@ export class Texture {
       throw new Error(`Texture: failed to load '${url}'`)
     }
     this.image = img
-    this.needsUpdate()
     return this
   }
 }
 
+const VIDEO = /\.(mp4|webm|ogv|mov|m4v)($|[?#])/i
+
+/** @internal A <video>, whose frames change as it plays. @param {unknown} image @returns {boolean} */
+export function isVideo(image) {
+  return typeof HTMLVideoElement !== 'undefined' && image instanceof HTMLVideoElement
+}
+
+/** Resolves once a video has a frame to show. @param {HTMLVideoElement} video @returns {Promise<void>} */
+function loaded(video) {
+  if (video.readyState >= 2) return Promise.resolve()
+  return new Promise((resolve, reject) => {
+    video.addEventListener('loadeddata', () => resolve(), { once: true })
+    video.addEventListener('error', () => reject(new Error('Texture: the video failed to load')), { once: true })
+  })
+}
+
 /**
  * Load an image as a texture; resolves once it has decoded.
  * @param {string} url

package/src/watch.js

@@ -169,6 +169,22 @@ export class ChangeWatch {
     this.#push(m.aoMapIntensity)
     this.#push(m.triplanar)
     this.#push(m.bumpScale)
+    this.#push(m.transmission)
+    this.#push(m.clearcoat)
+    this.#push(m.clearcoatRoughness)
+    this.#push(m.sheen)
+    this.#pushAll(m.sheenColor)
+    this.#push(m.sheenRoughness)
+    this.#push(m.ior)
+    this.#push(m.specularIntensity)
+    this.#pushAll(m.specularColor)
+    this.#push(m.anisotropy)
+    this.#push(m.anisotropyRotation)
+    this.#push(m.translucency)
+    this.#push(m.toon)
+    this.#push(m.lightMapIntensity)
+    this.#push(m.environmentIntensity)
+    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)
@@ -179,6 +195,9 @@ export class ChangeWatch {
     this.#push(idOf(texture))
     this.#push(texture.version)
     this.#pushAll(texture.repeat)
+    this.#push(texture.rotation)
+    this.#pushAll(texture.center)
+    this.#push(texture.uvSet)
     this.#pushAll(texture.offset)
   }
 

package/src/webgl/WebGLRenderer.js

@@ -6,6 +6,7 @@ import { CLIP_ONLY_FRAGMENT, MESH_VERTEX } from './shaders.js'
 import { collect } from '../frame.js'
 import { checkNumber, checkOneOf, checkOptions, checkRange, describe, fail, warnOnce } from '../validate.js'
 import { GLContext } from './context.js'
+import { uvMatrix } from './resources.js'
 
 /** @import { FrameDescription, DrawItem, FrameLight, FrameCap } from '../frame.js' */
 /** @import { Scene } from '../scene/Scene.js' */
@@ -32,6 +33,7 @@ import { GLContext } from './context.js'
  *   this canvas, instead of giving the canvas a context of its own - for pages with many views
  *   (browsers allow about 16 live contexts). The View decides this; see its 'context' option.
  * @property {boolean} [antialias] multisampling (default true; a shared context always has it)
+ * @property {boolean} [outlineAntialias] soft-edged outlines with round corners (default: as antialias)
  * @property {ToneMapping} [toneMapping] how lit colours are mapped to the screen: 'neutral' keeps colours
  *   true (Khronos PBR Neutral, the default), 'aces' is filmic, 'none' clips
  * @property {number} [exposure] (default 1)
@@ -39,7 +41,7 @@ import { GLContext } from './context.js'
  * @property {boolean | BloomOptions} [bloom] glow round bright parts (default off); loads its code the first time
  */
 
-const OPTIONS = ['canvas', 'shared', 'antialias', 'toneMapping', 'exposure', 'pixelRatio', 'bloom']
+const OPTIONS = ['canvas', 'shared', 'antialias', 'outlineAntialias', 'toneMapping', 'exposure', 'pixelRatio', 'bloom']
 const BLOOM = { strength: 1, radius: 0.6, threshold: 0.6 }
 /** What bloom: { ... } takes, and hints for names people reach for instead. */
 export const BLOOM_OPTIONS = Object.keys(BLOOM)
@@ -66,10 +68,10 @@ const TONE_MAPPING = { none: 0, aces: 1, neutral: 2 }
 // material maps and the shader feature each one switches on (all but emissive need lighting)
 /** @type {import('./passes.js').ShadowMap[]} */
 const NO_SHADOWS = []
-const MAP_DEFINES = { roughnessMap: 'ROUGHNESS_MAP', metalnessMap: 'METALNESS_MAP', normalMap: 'NORMAL_MAP', bumpMap: 'BUMP_MAP', aoMap: 'AO_MAP' }
+const MAP_DEFINES = { roughnessMap: 'ROUGHNESS_MAP', metalnessMap: 'METALNESS_MAP', normalMap: 'NORMAL_MAP', bumpMap: 'BUMP_MAP', aoMap: 'AO_MAP', lightMap: 'LIGHT_MAP' }
 // every map a mesh can sample - triplanar projection is only worth its varyings when there is one
 const MAP_SLOTS = ['map', 'emissiveMap', ...Object.keys(MAP_DEFINES)]
-const MAP_UNIFORMS = { map: 'uMap', roughnessMap: 'uRoughnessMap', metalnessMap: 'uMetalnessMap', normalMap: 'uNormalMap', bumpMap: 'uBumpMap', aoMap: 'uAoMap', emissiveMap: 'uEmissiveMap' }
+const MAP_UNIFORMS = { matcap: 'uMatcap', map: 'uMap', roughnessMap: 'uRoughnessMap', metalnessMap: 'uMetalnessMap', normalMap: 'uNormalMap', bumpMap: 'uBumpMap', aoMap: 'uAoMap', emissiveMap: 'uEmissiveMap', lightMap: 'uLightMap' }
 // counting a cap's faces into the stencil: the solids' surfaces, colour and depth left alone
 const CLIP_MASK = /** @type {[string, string]} */ ([MESH_VERTEX, CLIP_ONLY_FRAGMENT])
 // a cap: a square on the plane, two units across, facing +Y until it is placed
@@ -96,6 +98,8 @@ export class WebGLRenderer {
   /** @type {ToneMapping} */ toneMapping = 'neutral'
   exposure = 1
   pixelRatio = 1
+  /** Outlines with soft edges and round corners, or hard pixel steps; takes effect on the next frame. */
+  outlineAntialias = true
   /** @type {Required<BloomOptions> | null} */ #bloom = null
   /** Counts from the last frame and the GPU caches. */
   info = { drawCalls: 0, triangles: 0, programs: 0, geometries: 0, textures: 0, compiling: 0 }
@@ -129,6 +133,8 @@ export class WebGLRenderer {
     if (options.exposure !== undefined) this.exposure = checkRange('WebGLRenderer', 'exposure', options.exposure, 0)
     if (options.pixelRatio !== undefined) this.pixelRatio = checkRange('WebGLRenderer', 'pixelRatio', options.pixelRatio, 0, Infinity, { above: true })
     this.#bloom = bloomSettings('WebGLRenderer', options.bloom)
+    // outlines follow the picture's antialiasing unless told otherwise (a shared context always has it)
+    this.outlineAntialias = options.outlineAntialias !== undefined ? !!options.outlineAntialias : options.shared || options.antialias !== false
 
     if (options.shared) {
       this.#gpu = GLContext.shared()
@@ -230,7 +236,7 @@ export class WebGLRenderer {
       frame.pointShadow && passes.pointShadowMap(frame.pointShadow),
     ].filter((s) => !!s)
     // outlines' mask, drawn before the scene, so the scene's own target need not be left
-    const outline = passes && frame.outlines.length ? passes.outlineMask(frame.outlines, frame, width, height, this.pixelRatio) : null
+    const outline = passes && frame.outlines.length ? passes.outlineMask(frame.outlines, frame, width, height, this.pixelRatio, this.outlineAntialias) : null
 
     // with bloom, the scene is drawn into a buffer of its own first (drawn plainly while its code loads)
     const bloom = this.#bloom ? gpu.loadBloom() : null
@@ -268,7 +274,7 @@ export class WebGLRenderer {
     gl.enable(gl.BLEND)
     for (const item of frame.transparent) this.#draw(item, frame, true)
     // outlines over everything
-    if (outline && passes) passes.outlineComposite(outline, height)
+    if (outline && passes) passes.outlineComposite(outline)
     gl.depthMask(true)
     gl.disable(gl.BLEND)
     gl.bindVertexArray(null)
@@ -400,7 +406,7 @@ export class WebGLRenderer {
     const shadows = receives ? this.#shadows : NO_SHADOWS
 
     const clip = kind === 'mesh' ? item.clip : null
-    const defines = this.#defines(kind, material, geometry.colors !== null, !!instances)
+    const defines = this.#defines(kind, material, geometry.colors !== null, !!instances, geometry.uvs2 !== null)
     for (const shadow of shadows) defines.push(shadow.define)
     const fog = material.fog ? frame.fog : null
     if (fog) {
@@ -477,15 +483,38 @@ export class WebGLRenderer {
     if (material.bumpMap) program.set('uBumpScale', material.bumpScale)
     if (material.triplanar > 0) program.set('uTriplanar', material.triplanar)
     program.set('uAoMapIntensity', material.aoMapIntensity)
+    if (material.transmission > 0) program.set('uTransmission', material.transmission)
+    if (material.clearcoat > 0) {
+      program.set('uClearcoat', material.clearcoat)
+      program.set('uClearcoatRoughness', material.clearcoatRoughness)
+    }
+    // a non-metal's reflectance face on, from its ior and specular settings, and at grazing angles
+    const ior = (material.ior - 1) / (material.ior + 1), sc = material.specularColor, si = material.specularIntensity
+    program.set('uSpecular', [Math.min(ior * ior * sc[0], 1) * si, Math.min(ior * ior * sc[1], 1) * si, Math.min(ior * ior * sc[2], 1) * si, si])
+    if (material.sheen > 0) {
+      const c = material.sheenColor, k = material.sheen
+      program.set('uSheenColor', [c[0] * k, c[1] * k, c[2] * k])
+      program.set('uSheenRoughness', material.sheenRoughness)
+    }
+    if (material.anisotropy > 0) {
+      program.set('uAnisotropy', material.anisotropy)
+      program.set('uAnisotropyDirection', [Math.cos(material.anisotropyRotation), Math.sin(material.anisotropyRotation)])
+    }
+    if (material.translucency > 0) {
+      const c = material.translucencyColor, k = material.translucency
+      program.set('uTranslucency', [c[0] * k, c[1] * k, c[2] * k, k])
+    }
+    if (material.toon > 0) program.set('uToon', Math.max(2, Math.round(material.toon)))
     program.set('uAlphaTest', material.alphaTest)
     /** @type {[string, Texture][]} */
     const maps = kind === 'mesh' ? material.textures : material.map ? [['map', material.map]] : []
     // GL textures first (uploads use a unit of their own), then bind them to the samplers
     const bound = maps.map(([slot, texture]) => [MAP_UNIFORMS[slot], this.#gpu.resources.texture(texture)])
     for (const [name, texture] of bound) program.set(name, texture)
-    // one UV transform for every map: the first map's (glTF models share theirs)
-    const first = maps[0]?.[1]
-    program.set('uUvTransform', first ? [first.repeat[0], first.repeat[1], first.offset[0], first.offset[1]] : [1, 1, 0, 0])
+    // each map's own repeat, rotation and offset (a matcap takes no UVs)
+    for (const [slot, texture] of maps) if (slot !== 'matcap') program.set(`${MAP_UNIFORMS[slot]}Uv`, uvMatrix(texture))
+    if (material.lightMap) program.set('uLightMapIntensity', material.lightMapIntensity)
+    program.set('uEnvStrength', material.environmentIntensity)
 
     // render state
     gl.depthMask(!transparent && material.depthWrite)
@@ -535,7 +564,7 @@ export class WebGLRenderer {
     // drawing's outline - shows whole rather than fighting it pixel by pixel
     gl.enable(gl.POLYGON_OFFSET_FILL)
     gl.polygonOffset(1, 2)
-    this.info.triangles += this.#gpu.resources.drawTriangles(geometry, instances)
+    this.info.triangles += this.#gpu.resources.drawTriangles(geometry, instances, material.anisotropy > 0 && !material.unlit)
     gl.disable(gl.POLYGON_OFFSET_FILL)
     this.info.drawCalls++
   }
@@ -613,10 +642,10 @@ export class WebGLRenderer {
 
   /**
    * @param {'mesh' | 'points' | 'lines'} kind @param {Material} material
-   * @param {boolean} hasColors @param {boolean} instanced
+   * @param {boolean} hasColors @param {boolean} instanced @param {boolean} hasUvs2
    * @returns {string[]}
    */
-  #defines(kind, material, hasColors, instanced) {
+  #defines(kind, material, hasColors, instanced, hasUvs2) {
     const d = []
     if (material.vertexColors && hasColors) d.push('VERTEX_COLORS')
     if (kind === 'mesh') {
@@ -626,6 +655,13 @@ export class WebGLRenderer {
         d.push(...this.#lightDefines)
         if (this.#environment) d.push('ENV_MAP')
         else if (this.#studio) d.push('STUDIO')
+        if (material.transmission > 0) d.push('TRANSMISSION')
+        if (material.clearcoat > 0) d.push('CLEARCOAT')
+        if (material.sheen > 0) d.push('SHEEN')
+        if (material.anisotropy > 0) d.push('ANISOTROPY')
+        if (material.translucency > 0) d.push('TRANSLUCENCY')
+        if (material.matcap) d.push('MATCAP')
+        if (material.toon > 0) d.push('TOON')
       }
       if (material.map) d.push('MAP')
       if (material.emissiveMap) d.push('EMISSIVE_MAP')
@@ -633,6 +669,9 @@ export class WebGLRenderer {
       if (material.flatShading) d.push('FLAT_SHADING')
       if (material.doubleSided) d.push('DOUBLE_SIDED')
       if (material.triplanar > 0 && MAP_SLOTS.some((slot) => material[slot])) d.push('TRIPLANAR')
+      // maps on the second UV set read it - where the geometry has one
+      const second = hasUvs2 ? material.textures.filter(([slot, t]) => t.uvSet === 1 && slot !== 'matcap') : []
+      if (second.length) d.push('UV2', ...second.map(([slot]) => `${MAP_UNIFORMS[slot]}Set vUv2`))
       if (instanced) d.push('INSTANCED')
     } else if (kind === 'points') {
       if (material.map) d.push('MAP')