phoria2 1.0.0 → 1.1.0

package/llms-full.txt

@@ -15,8 +15,8 @@ editors that drag, snap and undo. Picking, tooltips, hover highlights, HTML labe
 image-based light are built in, and a view draws only when something changes, so idle pages cost
 nothing. A dashboard of many small views just works - each tile its own `new View({ canvas })`,
 with no limit on WebGL contexts to manage (after the first four, views share one). Apps come out short: typically a few dozen lines. For games, custom shaders or
-post-processing pipelines, three.js is the better fit: phoria2 has no shader hook (no fresnel or
-custom effects), no clearcoat, and no shadow-softness setting.
+post-processing pipelines, three.js is the better fit: phoria2 has no shader hook (no custom
+effects), no refraction, and no shadow-softness setting.
 
 ## Install
 
@@ -285,8 +285,9 @@ extrude({
 })
 ```
 
-Your own: `new Geometry({ positions, normals?, uvs?, colors?, indices? })` - flat arrays, xyz per
-vertex; `colors` are rgb 0-1 per vertex (use `material: { vertexColors: true }`).
+Your own: `new Geometry({ positions, normals?, uvs?, uvs2?, colors?, indices? })` - flat arrays, xyz per
+vertex; `colors` are rgb 0-1 per vertex (use `material: { vertexColors: true }`); `uvs2` is a second UV
+set, for baked occlusion and light maps (below).
 
 ## Materials
 
@@ -296,7 +297,14 @@ One material type, given as a plain object:
 { color: 'white' }                                   // lit, physically based
 { color: '#c33', roughness: 0.2, metalness: 1 }      // metal
 { color: 'orange', unlit: true }                     // flat colour, ignores lights
-{ color: '#8cf', opacity: 0.4 }                      // transparent
+{ color: '#8cf', opacity: 0.4 }                      // transparent: fades the whole surface
+{ transmission: 1, roughness: 0.05 }                 // clear glass
+{ color: '#a3121f', metalness: 0.6, clearcoat: 1 }   // car paint: a glossy coat over it
+{ color: '#1f2d6e', roughness: 0.9, sheen: 1 }       // velvet: cloth's bright rim
+{ color: '#ccc', metalness: 1, anisotropy: 0.8 }     // brushed metal
+{ color: '#f2e4c4', translucency: 0.8 }              // paper: lit from behind too
+{ matcap: 'clay.png' }                               // the look from a picture of a lit sphere
+{ color: '#e4572e', toon: 3 }                        // cartoon: three flat tones
 { emissive: '#ff0', emissiveIntensity: 3 }           // glows
 { map: 'wood.jpg', normalMap: 'wood_n.png' }         // textures from urls
 ```
@@ -313,7 +321,8 @@ Properties: `color`, `opacity`, `roughness` (0.5), `metalness` (0), `emissive`,
 (`'normal'`, `'additive'` - adds light, for glows and sparks - or `'multiply'` - darkens what is behind, as a colour
 filter does: cyan over magenta is blue), `alphaTest` (cut-outs: drop pixels with less alpha - leaves, fences),
 `map`, `normalMap`/`normalScale`, `bumpMap`/`bumpScale`, `roughnessMap`, `metalnessMap`, `aoMap`,
-`emissiveMap`; `size`/`sizeAttenuation` for Points, `width` for Lines. Change later through
+`emissiveMap`, `lightMap`/`lightMapIntensity`, `environmentIntensity` (1), `transmission`, `clearcoat`/`clearcoatRoughness`, `sheen`/`sheenColor`/`sheenRoughness`, `ior`/
+`specularIntensity`/`specularColor`, `anisotropy`/`anisotropyRotation`, `translucency`/`translucencyColor`, `matcap`, `toon` (below); `size`/`sizeAttenuation` for Points, `width` for Lines. Change later through
 `mesh.material.color.set('#0f0')`, `mesh.material.opacity = 0.5`, or a whole new one: `mesh.material = { color: 'red' }`
 (options become a Material, as in the constructor; `mesh.geometry = box(2)` likewise).
 
@@ -324,6 +333,83 @@ into the distance. A cut-out (`alphaTest`) casts the shadow of what is left of i
 data map (`normalMap`, `bumpMap`, `roughnessMap`, `metalnessMap`, `aoMap`) is read as data, not colour,
 unless its `colorSpace` was set on purpose - `normalMap: await loadTexture('n.png')` just works.
 
+**Canvas and video textures**: a texture's `image` can be a canvas - draw on it, then call
+`texture.needsUpdate()` - or a `<video>`, whose frames upload by themselves while it plays, with
+nothing to call. `new Texture({ url: 'promo.mp4' })` (or .webm, .ogv, .mov, .m4v) makes the video
+for you, muted and looping so browsers let it start by itself; `texture.image` is that `<video>` -
+pause, seek or unmute it as any other. A browser that blocks autoplay leaves it on its first frame
+until `texture.image.play()` from a click. Video textures make no mipmaps (they would be remade
+every frame) unless `mipmaps: true`. Put one on an unlit plane for a screen:
+`{ map: new Texture({ url: 'promo.mp4', wrap: 'clamp' }), unlit: true }`.
+
+**Placing a texture**: `repeat` ([u, v] times across), `offset`, and `rotation` (radians, about
+`center`: [0, 0], the corner, by default - [0.5, 0.5] for the middle) - applied in that order, as glTF's
+`KHR_texture_transform` does, and each map keeps its own: a fabric's colour can repeat 7 times while
+its normal map repeats twice. Animate them to scroll or spin a pattern.
+
+**Baked occlusion and light maps**: occlusion and lighting baked in Blender, Unreal or Unity need
+every surface on its own patch of texture, so they come on a second UV set while the first tiles
+colour and detail. Give the geometry `uvs2` and the texture `uvSet: 1` - glTF models do both
+for you (`TEXCOORD_1`, `texCoord: 1`). Read through the first set, baked occlusion lands in the
+wrong places as dark smudges. `lightMap` is light baked into a texture, added as light from all
+round (`lightMapIntensity`, 1) - the soft, cheap lighting of architectural scenes.
+
+**Environment strength per material**: `environmentIntensity` (1) scales how much of the
+scene's environment - its light and its reflections - one material takes: lower for a matte floor in
+a shiny showroom, higher to make one product catch the light, without changing the scene's.
+
+**Glass**: `transmission` (0-1) lets light through as glass does. Unlike `opacity`, which fades
+everything - reflections too, so faded things look washed out, as dimmed chart bars should - glass
+keeps its reflections whole, and shows less of what is behind it towards its edges, where it
+reflects nearly everything. Its colour shows in proportion to `1 - transmission`: `transmission: 0.6`
+with a colour is tinted glass. Keep `roughness` low for clear glass, higher for frosted. There is
+no refraction - what is behind isn't bent. It shines with an `environment` to reflect
+(`'studio'`, or better an `.hdr`).
+
+**Clearcoat**: `clearcoat` (0-1) puts a clear glossy layer over the surface - car paint, lacquered
+wood, varnish - with its own sharp reflection over the base's softer one; `clearcoatRoughness` (0,
+a mirror) makes it satin. Normal and bump maps show under a smooth coat.
+
+**Sheen**: `sheen` (0-1) is the soft bright rim of cloth at grazing angles - velvet, felt,
+upholstery - which plain roughness can't give: without it fabric looks like matte plastic.
+`sheenColor` (white) tints it, often lighter than the cloth or another colour entirely;
+`sheenRoughness` (0.5) runs from a thin bright rim (0) to a broad soft glow (1).
+
+**Reflectance**: `ior` (1.5) sets how strongly a non-metal reflects - water 1.33, glass and plastic
+1.5, diamond 2.4 - and glass with `transmission` reflects more the higher it is.
+`specularIntensity` (1) scales a non-metal's reflections, 0 for none (chalk, clay, unglazed
+pottery); `specularColor` tints them face on. Metals take their reflections from `color`, so
+these leave them alone.
+
+**Brushed metal**: `anisotropy` (0-1) - the material's, not a texture's filtering - draws highlights and reflections out along the brushing -
+brushed aluminium, steel appliances, the bottom of a pan. The brushing runs along the UVs' u (round
+a sphere or cylinder, say; round the up axis on a mesh with no UVs); `anisotropyRotation`
+(radians) turns it - `Math.PI / 2` runs it along v. Use it with `metalness: 1` and a middling
+`roughness` (0.2-0.4).
+
+**Translucency**: `translucency` (0-1) lets light through thin surfaces, so they are lit from
+behind as well as in front - leaves against the sun, paper lanterns and lampshades with a light
+inside, curtains. What passes through is taken from what is scattered back, so at 1 a surface is lit
+only through it. `translucencyColor` (white) tints the light that comes through. It is light
+through a thin sheet, not light scattering inside a solid: a lantern glows, marble stays marble.
+
+**Matcap**: `matcap` is a picture of a lit sphere - clay, wax, chrome, a painted ball - that gives the
+whole look: each point takes the colour from where a sphere facing the same way would show it. It is
+the clay look of sculpting tools and CAD viewers, good for reading a model's shape, and costs one
+texture lookup - no lights, shadows or environment, which it ignores. Its shine stays put as the camera
+turns, since the light is in the picture, so it looks out of place beside lit things. `color` and
+`map` multiply it, so one grey matcap serves any colour; normal and bump maps and `flatShading`
+still shape it. Any matcap image works, or draw one on a canvas (`new Texture({ image: canvas })`).
+
+**Toon**: `toon: 3` shades in that many flat tones (2 or more; 0, the default, is smooth), with one
+hard-edged highlight - a cartoon. Lights and shadows work as usual; the shaded tone is the scene's
+ambient and hemisphere light, so add some for a lighter shade. Metals keep their colour, with a
+highlight of it. Pair it with `outline` on the nodes for inked edges.
+
+glTF models bring glass, clearcoat, sheen, reflectance, brushed metal and translucency from `KHR_materials_transmission`, `KHR_materials_clearcoat`,
+`KHR_materials_sheen`, `KHR_materials_ior`, `KHR_materials_specular`, `KHR_materials_anisotropy`
+and `KHR_materials_diffuse_transmission` (by their factors; their textures aren't read).
+
 **Models without UVs** (scans, CAD exports) can still take maps: `triplanar: 40` projects them
 from the mesh's three axes instead of using UVs, repeating 40 times per unit of the mesh's own space.
 The maps stay on the mesh as it moves; normal maps follow the surface; a map's `repeat` and `offset` apply
@@ -458,7 +544,10 @@ chair.onDrag = (drag) => {
 ```
 
 - **Outline**: `outline: '#ffcc00'` or `{ color, width }` (pixels, up to 8; default 2) on a node draws
-  a line round its silhouette, over everything - for what is selected. Set it any time; `null` removes it.
+  a line round its silhouette, over everything - for what is selected, or as an inked edge for a
+  drawn look. Set it any time; `null` removes it. Outlines are antialiased - soft edges and round
+  corners - as the canvas is; `outlineAntialias: false` on the View (or `view.renderer.outlineAntialias =
+  false`, any time) draws them in hard pixel steps instead.
 - `view.controls.cancel()` lets go of the orbit gesture in progress, for apps that take over a press.
 
 ## Charts: `phoria2/charts`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoria2",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Small, friendly 3D for the web - a WebGL 2 renderer with charts, labels, picking, particles and glTF",
   "keywords": [
     "3d",

package/schema/scene.schema.json

@@ -703,6 +703,23 @@
           "minItems": 2,
           "maxItems": 2
         },
+        "rotation": {
+          "type": "number",
+          "description": "Turns the image on the surface, in radians, about center."
+        },
+        "center": {
+          "type": "array",
+          "description": "The point rotation turns about, in repeated UVs ([0, 0], the corner, by default).",
+          "items": {
+            "type": "number"
+          },
+          "minItems": 2,
+          "maxItems": 2
+        },
+        "uvSet": {
+          "enum": [0, 1],
+          "description": "Which UV set to read: 0 the first, 1 the second (uvs2) - baked occlusion and light maps usually come on the second."
+        },
         "filter": {
           "enum": ["linear", "nearest"]
         },
@@ -801,6 +818,28 @@
             }
           ]
         },
+        "lightMap": {
+          "description": "Light baked into a texture, added as light from all round - usually on the second UV set.",
+          "anyOf": [
+            {
+              "$ref": "#/$defs/texture"
+            },
+            {
+              "type": "null"
+            }
+          ]
+        },
+        "matcap": {
+          "description": "A picture of a lit sphere that gives the whole look - clay, wax, chrome - picked by which way the surface faces the camera; lights are ignored.",
+          "anyOf": [
+            {
+              "$ref": "#/$defs/texture"
+            },
+            {
+              "type": "null"
+            }
+          ]
+        },
         "unlit": {
           "type": "boolean",
           "description": "Ignore lights: draws exactly its colour."
@@ -873,6 +912,15 @@
           "minimum": 0,
           "maximum": 1
         },
+        "lightMapIntensity": {
+          "type": "number",
+          "minimum": 0
+        },
+        "environmentIntensity": {
+          "type": "number",
+          "description": "This material's share of the environment's light and reflections (1).",
+          "minimum": 0
+        },
         "triplanar": {
           "type": "number",
           "description": "Repeats per unit, projecting maps from three axes instead of using UVs; 0 uses the UVs.",
@@ -881,6 +929,78 @@
         "bumpScale": {
           "type": "number"
         },
+        "transmission": {
+          "type": "number",
+          "description": "How much light passes through, as through glass: reflections stay whole, and less of what is behind shows towards the edges. Unlike opacity, which fades the whole surface.",
+          "minimum": 0,
+          "maximum": 1
+        },
+        "clearcoat": {
+          "type": "number",
+          "description": "A clear glossy layer over the surface - car paint, lacquer, varnish.",
+          "minimum": 0,
+          "maximum": 1
+        },
+        "clearcoatRoughness": {
+          "type": "number",
+          "description": "How glossy the coat is, 0 a mirror.",
+          "minimum": 0,
+          "maximum": 1
+        },
+        "sheen": {
+          "type": "number",
+          "description": "The soft bright rim of cloth at grazing angles - velvet, felt, upholstery.",
+          "minimum": 0,
+          "maximum": 1
+        },
+        "sheenColor": {
+          "$ref": "#/$defs/color"
+        },
+        "sheenRoughness": {
+          "type": "number",
+          "description": "A thin bright rim at 0, a broad soft glow at 1.",
+          "minimum": 0,
+          "maximum": 1
+        },
+        "ior": {
+          "type": "number",
+          "description": "Index of refraction: how strongly a non-metal reflects - water 1.33, glass and plastic 1.5 (the default), diamond 2.4.",
+          "minimum": 1
+        },
+        "specularIntensity": {
+          "type": "number",
+          "description": "Scales a non-metal's reflections, 0 for none.",
+          "minimum": 0,
+          "maximum": 1
+        },
+        "specularColor": {
+          "$ref": "#/$defs/color"
+        },
+        "anisotropy": {
+          "type": "number",
+          "description": "Brushed metal: highlights drawn out along the brushing, which runs along the UVs' u.",
+          "minimum": 0,
+          "maximum": 1
+        },
+        "anisotropyRotation": {
+          "type": "number",
+          "description": "Turns the brushing from the UVs' u, in radians."
+        },
+        "translucency": {
+          "type": "number",
+          "description": "Light through thin surfaces, lighting them from behind - leaves, paper, lampshades.",
+          "minimum": 0,
+          "maximum": 1
+        },
+        "translucencyColor": {
+          "$ref": "#/$defs/color"
+        },
+        "toon": {
+          "type": "number",
+          "description": "Cartoon shading in this many flat tones (2 or more), with a hard-edged highlight; 0 is smooth.",
+          "minimum": 0,
+          "maximum": 16
+        },
         "blending": {
           "enum": ["normal", "additive", "multiply"]
         }
@@ -1129,6 +1249,13 @@
                 "type": "number"
               }
             },
+            "uvs2": {
+              "type": "array",
+              "description": "A second UV set, for baked occlusion and light maps.",
+              "items": {
+                "type": "number"
+              }
+            },
             "colors": {
               "type": "array",
               "items": {

package/src/View.js

@@ -53,6 +53,8 @@ import { checkOneOf, checkOptions, checkRange, describe, fail, warnOnce } from '
  * @property {(hit: Hit) => TooltipContent} [tooltip] what to show for the thing under the pointer - see tooltip()
  * @property {number} [pixelRatio] default min(devicePixelRatio, 2)
  * @property {boolean} [antialias] (default true)
+ * @property {boolean} [outlineAntialias] soft-edged outlines with round corners (default: as antialias); change it
+ *   any time with view.renderer.outlineAntialias
  * @property {'auto' | 'own' | 'shared'} [context] which WebGL context draws it: 'own' gives the canvas one of
  *   its own; 'shared' draws with the page's one shared context and copies the picture over, so a page can hold
  *   any number of views (browsers allow about 16 live contexts). 'auto' (default): own for the first four
@@ -69,7 +71,7 @@ import { checkOneOf, checkOptions, checkRange, describe, fail, warnOnce } from '
 /** @typedef {(hit: Hit | null, event: PointerEvent | MouseEvent | null) => void} ViewHandler */
 
 const OPTIONS = ['canvas', 'scene', 'camera', 'orbit', 'background', 'renderMode', 'framing', 'highlight', 'tooltip', 'pixelRatio',
-  'antialias', 'context', 'toneMapping', 'exposure', 'bloom', 'autoLight', 'maxDelta']
+  'antialias', 'outlineAntialias', 'context', 'toneMapping', 'exposure', 'bloom', 'autoLight', 'maxDelta']
 const FRAMING_OPTIONS = ['keep', 'aspect']
 const HINTS = {
   renderer: 'the View makes its renderer - read it from view.renderer',
@@ -213,7 +215,7 @@ export class View {
     // the renderer checks these too; checked here, the error names the View
     if (options.exposure !== undefined) checkRange('View', 'exposure', options.exposure, 0)
     const shared = context === 'shared' || (context === 'auto' && ownContexts >= OWN_CONTEXTS)
-    this.renderer = new WebGLRenderer({ canvas: this.canvas, shared, antialias: options.antialias, toneMapping: options.toneMapping, exposure: options.exposure, bloom: options.bloom })
+    this.renderer = new WebGLRenderer({ canvas: this.canvas, shared, antialias: options.antialias, outlineAntialias: options.outlineAntialias, toneMapping: options.toneMapping, exposure: options.exposure, bloom: options.bloom })
     if (!shared) {
       this.#ownContext = true
       ownContexts++

package/src/geometry/Geometry.js

@@ -6,11 +6,13 @@ import { checkOptions, describe, fail } from '../validate.js'
  * @property {ArrayLike<number>} positions xyz per vertex
  * @property {ArrayLike<number>} [normals] xyz per vertex; computed (smooth) when missing
  * @property {ArrayLike<number>} [uvs] uv per vertex - glTF convention, (0, 0) is the image's top left
+ * @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>} [indices] vertex indices; triangles for meshes, pairs for lines
  */
 
-const OPTIONS = ['positions', 'normals', 'uvs', 'colors', 'indices']
+const OPTIONS = ['positions', 'normals', 'uvs', 'uvs2', 'colors', 'indices']
 
 /**
  * Vertex data: flat typed arrays plus an optional index. Generators such as box() and sphere()
@@ -21,6 +23,7 @@ export class Geometry {
   static OPTIONS = OPTIONS
   /** @type {Float32Array} */ positions
   /** @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
   /** @type {Uint16Array | Uint32Array | null} */ indices = null
 
@@ -55,6 +58,7 @@ export class Geometry {
     const n = this.vertexCount
     if (options.normals) this.#normals = toFloat32('normals', options.normals, 3, n)
     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)
     if (options.indices) {
       // -1: no indices at all refer to no vertex, so an empty geometry can say so
@@ -172,6 +176,7 @@ export class Geometry {
       positions: this.positions,
       normals: this.#normals ?? undefined,
       uvs: this.uvs ?? undefined,
+      uvs2: this.uvs2 ?? undefined,
       colors: this.colors ?? undefined,
       indices: this.indices ?? undefined,
     })
@@ -198,6 +203,7 @@ export class Geometry {
     const json = { positions: Array.from(this.positions) }
     if (this.#normals) json.normals = Array.from(this.#normals)
     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)
     if (this.indices) json.indices = Array.from(this.indices)
     return json
@@ -221,6 +227,7 @@ export class Geometry {
     }
     this.positions = /** @type {Float32Array} */ (expand(this.positions, 3))
     this.uvs = expand(this.uvs, 2)
+    this.uvs2 = expand(this.uvs2, 2)
     this.colors = expand(this.colors, 3)
     this.indices = null
     this.source = null

package/src/gltf/load.js

@@ -25,7 +25,8 @@ import { Animation } from './Animation.js'
  */
 
 const SUPPORTED = new Set(['KHR_materials_emissive_strength', 'KHR_texture_transform', 'KHR_lights_punctual',
-  'KHR_materials_unlit', 'KHR_mesh_quantization'])
+  'KHR_materials_unlit', 'KHR_mesh_quantization', 'KHR_materials_transmission', 'KHR_materials_clearcoat', 'KHR_materials_sheen',
+  'KHR_materials_ior', 'KHR_materials_specular', 'KHR_materials_anisotropy', 'KHR_materials_diffuse_transmission'])
 const COMPRESSION = new Set(['KHR_draco_mesh_compression', 'EXT_meshopt_compression', 'KHR_texture_basisu'])
 
 const COMPONENTS = { SCALAR: 1, VEC2: 2, VEC3: 3, VEC4: 4, MAT2: 4, MAT3: 9, MAT4: 16 }
@@ -266,6 +267,7 @@ class Builder {
     const options = { positions: this.#accessor(a.POSITION) }
     if (a.NORMAL !== undefined) options.normals = this.#accessor(a.NORMAL)
     if (a.TEXCOORD_0 !== undefined) options.uvs = this.#accessor(a.TEXCOORD_0)
+    if (a.TEXCOORD_1 !== undefined) options.uvs2 = this.#accessor(a.TEXCOORD_1)
     if (a.COLOR_0 !== undefined) options.colors = srgbColors(/** @type {Float32Array} */ (this.#accessor(a.COLOR_0)), COMPONENTS[this.json.accessors[a.COLOR_0].type])
     if (p.indices !== undefined) options.indices = this.#accessor(p.indices, true)
     const geometry = new Geometry(options)
@@ -364,6 +366,43 @@ class Builder {
     }
     material.emissiveIntensity = m.extensions?.KHR_materials_emissive_strength?.emissiveStrength ?? 1
     if (m.extensions?.KHR_materials_unlit) material.unlit = true
+    // glass, clear coat, cloth, reflectance, brushed metal and translucency, by their factors - their
+    // own textures aren't read
+    const clamp = (/** @type {number} */ v) => Math.min(Math.max(v, 0), 1)
+    const x = m.extensions ?? {}
+    const transmission = x.KHR_materials_transmission, coat = x.KHR_materials_clearcoat, sheen = x.KHR_materials_sheen
+    if (transmission) material.transmission = clamp(transmission.transmissionFactor ?? 0)
+    if (coat) {
+      material.clearcoat = clamp(coat.clearcoatFactor ?? 0)
+      material.clearcoatRoughness = clamp(coat.clearcoatRoughnessFactor ?? 0)
+    }
+    if (sheen) {
+      const c = sheen.sheenColorFactor ?? [0, 0, 0]
+      // glTF's sheen is its colour alone: black is none
+      if (Math.max(c[0], c[1], c[2]) > 0) {
+        material.sheen = 1
+        material.sheenColor.setLinear(c[0], c[1], c[2])
+      }
+      material.sheenRoughness = clamp(sheen.sheenRoughnessFactor ?? 0)
+    }
+    if (x.KHR_materials_ior?.ior >= 1) material.ior = x.KHR_materials_ior.ior
+    const specular = x.KHR_materials_specular
+    if (specular) {
+      material.specularIntensity = clamp(specular.specularFactor ?? 1)
+      const c = specular.specularColorFactor ?? [1, 1, 1]
+      material.specularColor.setLinear(c[0], c[1], c[2])
+    }
+    const brushed = x.KHR_materials_anisotropy
+    if (brushed) {
+      material.anisotropy = clamp(brushed.anisotropyStrength ?? 0)
+      material.anisotropyRotation = brushed.anisotropyRotation ?? 0
+    }
+    const translucent = x.KHR_materials_diffuse_transmission
+    if (translucent) {
+      material.translucency = clamp(translucent.diffuseTransmissionFactor ?? 0)
+      const c = translucent.diffuseTransmissionColorFactor ?? [1, 1, 1]
+      material.translucencyColor.setLinear(c[0], c[1], c[2])
+    }
     if (m.alphaMode === 'BLEND') {
       material.opacity = base[3]
       material.transparent = true
@@ -390,10 +429,12 @@ class Builder {
    */
   #texture(info, colorSpace) {
     const transform = info.extensions?.KHR_texture_transform
-    const texCoord = transform?.texCoord ?? info.texCoord ?? 0
-    if (texCoord !== 0) warnOnce(this.model, 'textures on a second UV set (TEXCOORD_1) are drawn with the first')
-    if (transform?.rotation) warnOnce(this.model, "rotated texture transforms (KHR_texture_transform rotation) aren't supported - drawn unrotated")
-    const key = JSON.stringify([info.index, colorSpace, transform?.offset, transform?.scale])
+    let texCoord = transform?.texCoord ?? info.texCoord ?? 0
+    if (texCoord > 1) {
+      warnOnce(this.model, `textures on a third UV set or later (TEXCOORD_${texCoord}) are drawn with the first`)
+      texCoord = 0
+    }
+    const key = JSON.stringify([info.index, colorSpace, transform?.offset, transform?.scale, transform?.rotation, texCoord])
     const cached = this.#textures.get(key)
     if (cached) return cached
 
@@ -420,6 +461,8 @@ class Builder {
       flipY: false,
       repeat: transform?.scale ?? [1, 1],
       offset: transform?.offset ?? [0, 0],
+      rotation: transform?.rotation ?? 0,
+      uvSet: texCoord,
     })
     this.#textures.set(key, texture)
     return texture
@@ -538,5 +581,6 @@ function lineList(g, mode) {
 function withIndices(g, indices, triangles) {
   // only normals the file gave - reading g.normals would work them out from the strip's own indices,
   // taken as a triangle list; the new geometry works them out from its real triangles instead
-  return new Geometry({ positions: g.positions, normals: triangles && g.hasNormals ? g.normals : undefined, uvs: g.uvs ?? undefined, colors: g.colors ?? undefined, indices })
+  return new Geometry({ positions: g.positions, normals: triangles && g.hasNormals ? g.normals : undefined, uvs: g.uvs ?? undefined, uvs2: g.uvs2 ?? undefined,
+    colors: g.colors ?? undefined, indices })
 }