phoria2 1.0.0 → 1.1.0

package/dist/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["describe","fail","STYLE","GAP","Tooltip","content","style","className","hit","render","x","y","w","h","left","top","box","title","rows","entries","name","value","n","v"],"sources":["../src/tooltip.js"],"sourcesContent":["// The hover tooltip: one element that follows the pointer and shows what the app says about the\n// thing under it. Its default look is in a :where() rule, which has no specificity, so any CSS for\n// .phoria-tooltip overrides it.\nimport { describe, fail } from './validate.js'\n\n/** @import { Hit } from './Raycaster.js' */\n\n/**\n * What a tooltip function returns: text (new lines kept), an element, or a title with rows of\n * name/value pairs. null (or '') shows nothing.\n * @typedef {string | number | Node | { title?: string, rows?: Record<string, unknown> | Array<[string, unknown]> } | null | undefined | false} TooltipContent\n */\n\nconst STYLE = `\n:where(.phoria-tooltip) { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; max-width: 320px;\n  padding: 6px 10px; border-radius: 6px; background: rgba(20, 20, 24, 0.92); color: #fff;\n  font: 12px/1.45 system-ui, sans-serif; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); white-space: pre-line; }\n:where(.phoria-tooltip-title) { font-weight: 600; }\n:where(.phoria-tooltip-rows) { display: grid; grid-template-columns: auto auto; column-gap: 12px; }\n:where(.phoria-tooltip-rows > :nth-child(odd)) { opacity: 0.7; }\n:where(.phoria-tooltip-rows > :nth-child(even)) { text-align: right; font-variant-numeric: tabular-nums; }\n`\n// space between the pointer and the tooltip, in CSS pixels\nconst GAP = 14\n\nexport class Tooltip {\n  /** @type {HTMLDivElement} */ el\n  /** @type {(hit: Hit) => TooltipContent} */ content\n\n  /** @param {(hit: Hit) => TooltipContent} content @param {string} [className] */\n  constructor(content, className = '') {\n    if (typeof content !== 'function') fail('View', `tooltip() takes a function (hit) => text, got ${describe(content)}`)\n    this.content = content\n    if (!document.getElementById('phoria-tooltip-style')) {\n      const style = document.createElement('style')\n      style.id = 'phoria-tooltip-style'\n      style.textContent = STYLE\n      document.head.prepend(style)\n    }\n    this.el = document.createElement('div')\n    this.el.className = `phoria-tooltip${className ? ` ${className}` : ''}`\n    this.el.setAttribute('role', 'tooltip')\n    this.el.hidden = true\n    document.body.append(this.el)\n  }\n\n  /** Show what the content function says about a hit, near the pointer. @param {Hit} hit @param {number} x @param {number} y */\n  show(hit, x, y) {\n    const content = this.content(hit)\n    if (content === null || content === undefined || content === false || content === '') return this.hide()\n    this.el.replaceChildren(render(content))\n    this.el.hidden = false\n    this.move(x, y)\n  }\n\n  /** Follow the pointer, staying inside the window. @param {number} x @param {number} y client pixels */\n  move(x, y) {\n    if (this.el.hidden) return\n    const w = this.el.offsetWidth, h = this.el.offsetHeight\n    const left = x + GAP + w > window.innerWidth ? x - GAP - w : x + GAP\n    const top = y + GAP + h > window.innerHeight ? y - GAP - h : y + GAP\n    this.el.style.transform = `translate(${Math.round(Math.max(0, left))}px, ${Math.round(Math.max(0, top))}px)`\n  }\n\n  hide() {\n    this.el.hidden = true\n  }\n\n  dispose() {\n    this.el.remove()\n  }\n}\n\n/** @param {TooltipContent} content @returns {Node} */\nfunction render(content) {\n  if (typeof content === 'string' || typeof content === 'number') return document.createTextNode(String(content))\n  if (content instanceof Node) return content\n  if (typeof content === 'object' && content && ('title' in content || 'rows' in content)) {\n    const box = document.createDocumentFragment()\n    if (content.title !== undefined) {\n      const title = document.createElement('div')\n      title.className = 'phoria-tooltip-title'\n      title.textContent = String(content.title)\n      box.append(title)\n    }\n    if (content.rows) {\n      const rows = document.createElement('div')\n      rows.className = 'phoria-tooltip-rows'\n      const entries = Array.isArray(content.rows) ? content.rows : Object.entries(content.rows)\n      for (const [name, value] of entries) {\n        const n = document.createElement('span'), v = document.createElement('span')\n        n.textContent = String(name)\n        v.textContent = typeof value === 'number' ? value.toLocaleString() : String(value)\n        rows.append(n, v)\n      }\n      box.append(rows)\n    }\n    return box\n  }\n  return fail('View', `a tooltip function returns text, an element or { title, rows }, got ${describe(content)}`)\n}\n"],"mappings":";;AAaA,IAAME,IAAQ,2oBAURC,IAAM,IAECC,IAAb,MAAqB;CACW;CACc;CAG5C,YAAY,GAAS,IAAY,IAAI;EAGnC,IAFI,OAAOC,KAAY,cAAYJ,EAAK,QAAQ,iDAAiDD,EAASK,CAAO,GAAG,GACpH,KAAK,UAAUA,GACX,CAAC,SAAS,eAAe,sBAAsB,GAAG;GACpD,IAAMC,IAAQ,SAAS,cAAc,OAAO;GAG5C,AAFA,EAAM,KAAK,wBACX,EAAM,cAAcJ,GACpB,SAAS,KAAK,QAAQI,CAAK;EAC7B;EAKA,AAJA,KAAK,KAAK,SAAS,cAAc,KAAK,GACtC,KAAK,GAAG,YAAY,iBAAiBC,IAAY,IAAIA,MAAc,MACnE,KAAK,GAAG,aAAa,QAAQ,SAAS,GACtC,KAAK,GAAG,SAAS,IACjB,SAAS,KAAK,OAAO,KAAK,EAAE;CAC9B;CAGA,KAAK,GAAK,GAAG,GAAG;EACd,IAAMF,IAAU,KAAK,QAAQG,CAAG;EAChC,IAAIH,KAAY,QAAiCA,MAAY,MAASA,MAAY,IAAI,OAAO,KAAK,KAAK;EAGvG,AAFA,KAAK,GAAG,gBAAgBI,EAAOJ,CAAO,CAAC,GACvC,KAAK,GAAG,SAAS,IACjB,KAAK,KAAKK,GAAGC,CAAC;CAChB;CAGA,KAAK,GAAG,GAAG;EACT,IAAI,KAAK,GAAG,QAAQ;EACpB,IAAMC,IAAI,KAAK,GAAG,aAAaC,IAAI,KAAK,GAAG,cACrCC,IAAOJ,IAAIP,IAAMS,IAAI,OAAO,aAAaF,IAAIP,IAAMS,IAAIF,IAAIP,GAC3DY,IAAMJ,IAAIR,IAAMU,IAAI,OAAO,cAAcF,IAAIR,IAAMU,IAAIF,IAAIR;EACjE,KAAK,GAAG,MAAM,YAAY,aAAa,KAAK,MAAM,KAAK,IAAI,GAAGW,CAAI,CAAC,EAAE,MAAM,KAAK,MAAM,KAAK,IAAI,GAAGC,CAAG,CAAC,EAAE;CAC1G;CAEA,OAAO;EACL,KAAK,GAAG,SAAS;CACnB;CAEA,UAAU;EACR,KAAK,GAAG,OAAO;CACjB;AACF;AAGA,SAASN,EAAO,GAAS;CACvB,IAAI,OAAOJ,KAAY,YAAY,OAAOA,KAAY,UAAU,OAAO,SAAS,eAAe,OAAOA,CAAO,CAAC;CAC9G,IAAIA,aAAmB,MAAM,OAAOA;CACpC,IAAI,OAAOA,KAAY,YAAYA,MAAY,WAAWA,KAAW,UAAUA,IAAU;EACvF,IAAMW,IAAM,SAAS,uBAAuB;EAC5C,IAAIX,EAAQ,UAAU,KAAA,GAAW;GAC/B,IAAMY,IAAQ,SAAS,cAAc,KAAK;GAG1C,AAFA,EAAM,YAAY,wBAClB,EAAM,cAAc,OAAOZ,EAAQ,KAAK,GACxCW,EAAI,OAAOC,CAAK;EAClB;EACA,IAAIZ,EAAQ,MAAM;GAChB,IAAMa,IAAO,SAAS,cAAc,KAAK;GACzC,EAAK,YAAY;GACjB,IAAMC,IAAU,MAAM,QAAQd,EAAQ,IAAI,IAAIA,EAAQ,OAAO,OAAO,QAAQA,EAAQ,IAAI;GACxF,KAAK,IAAM,CAACe,GAAMC,MAAUF,GAAS;IACnC,IAAMG,IAAI,SAAS,cAAc,MAAM,GAAGC,IAAI,SAAS,cAAc,MAAM;IAG3E,AAFA,EAAE,cAAc,OAAOH,CAAI,GAC3B,EAAE,cAAc,OAAOC,KAAU,WAAWA,EAAM,eAAe,IAAI,OAAOA,CAAK,GACjFH,EAAK,OAAOI,GAAGC,CAAC;GAClB;GACA,EAAI,OAAOL,CAAI;EACjB;EACA,OAAOF;CACT;CACA,OAAOf,EAAK,QAAQ,uEAAuED,EAASK,CAAO,GAAG;AAChH"}
+{"version":3,"file":"tooltip.js","names":["fail","describe","STYLE","GAP","Tooltip","content","style","className","hit","render","x","y","w","h","left","top","box","title","rows","entries","name","value","n","v"],"sources":["../src/tooltip.js"],"sourcesContent":["// The hover tooltip: one element that follows the pointer and shows what the app says about the\n// thing under it. Its default look is in a :where() rule, which has no specificity, so any CSS for\n// .phoria-tooltip overrides it.\nimport { describe, fail } from './validate.js'\n\n/** @import { Hit } from './Raycaster.js' */\n\n/**\n * What a tooltip function returns: text (new lines kept), an element, or a title with rows of\n * name/value pairs. null (or '') shows nothing.\n * @typedef {string | number | Node | { title?: string, rows?: Record<string, unknown> | Array<[string, unknown]> } | null | undefined | false} TooltipContent\n */\n\nconst STYLE = `\n:where(.phoria-tooltip) { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; max-width: 320px;\n  padding: 6px 10px; border-radius: 6px; background: rgba(20, 20, 24, 0.92); color: #fff;\n  font: 12px/1.45 system-ui, sans-serif; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); white-space: pre-line; }\n:where(.phoria-tooltip-title) { font-weight: 600; }\n:where(.phoria-tooltip-rows) { display: grid; grid-template-columns: auto auto; column-gap: 12px; }\n:where(.phoria-tooltip-rows > :nth-child(odd)) { opacity: 0.7; }\n:where(.phoria-tooltip-rows > :nth-child(even)) { text-align: right; font-variant-numeric: tabular-nums; }\n`\n// space between the pointer and the tooltip, in CSS pixels\nconst GAP = 14\n\nexport class Tooltip {\n  /** @type {HTMLDivElement} */ el\n  /** @type {(hit: Hit) => TooltipContent} */ content\n\n  /** @param {(hit: Hit) => TooltipContent} content @param {string} [className] */\n  constructor(content, className = '') {\n    if (typeof content !== 'function') fail('View', `tooltip() takes a function (hit) => text, got ${describe(content)}`)\n    this.content = content\n    if (!document.getElementById('phoria-tooltip-style')) {\n      const style = document.createElement('style')\n      style.id = 'phoria-tooltip-style'\n      style.textContent = STYLE\n      document.head.prepend(style)\n    }\n    this.el = document.createElement('div')\n    this.el.className = `phoria-tooltip${className ? ` ${className}` : ''}`\n    this.el.setAttribute('role', 'tooltip')\n    this.el.hidden = true\n    document.body.append(this.el)\n  }\n\n  /** Show what the content function says about a hit, near the pointer. @param {Hit} hit @param {number} x @param {number} y */\n  show(hit, x, y) {\n    const content = this.content(hit)\n    if (content === null || content === undefined || content === false || content === '') return this.hide()\n    this.el.replaceChildren(render(content))\n    this.el.hidden = false\n    this.move(x, y)\n  }\n\n  /** Follow the pointer, staying inside the window. @param {number} x @param {number} y client pixels */\n  move(x, y) {\n    if (this.el.hidden) return\n    const w = this.el.offsetWidth, h = this.el.offsetHeight\n    const left = x + GAP + w > window.innerWidth ? x - GAP - w : x + GAP\n    const top = y + GAP + h > window.innerHeight ? y - GAP - h : y + GAP\n    this.el.style.transform = `translate(${Math.round(Math.max(0, left))}px, ${Math.round(Math.max(0, top))}px)`\n  }\n\n  hide() {\n    this.el.hidden = true\n  }\n\n  dispose() {\n    this.el.remove()\n  }\n}\n\n/** @param {TooltipContent} content @returns {Node} */\nfunction render(content) {\n  if (typeof content === 'string' || typeof content === 'number') return document.createTextNode(String(content))\n  if (content instanceof Node) return content\n  if (typeof content === 'object' && content && ('title' in content || 'rows' in content)) {\n    const box = document.createDocumentFragment()\n    if (content.title !== undefined) {\n      const title = document.createElement('div')\n      title.className = 'phoria-tooltip-title'\n      title.textContent = String(content.title)\n      box.append(title)\n    }\n    if (content.rows) {\n      const rows = document.createElement('div')\n      rows.className = 'phoria-tooltip-rows'\n      const entries = Array.isArray(content.rows) ? content.rows : Object.entries(content.rows)\n      for (const [name, value] of entries) {\n        const n = document.createElement('span'), v = document.createElement('span')\n        n.textContent = String(name)\n        v.textContent = typeof value === 'number' ? value.toLocaleString() : String(value)\n        rows.append(n, v)\n      }\n      box.append(rows)\n    }\n    return box\n  }\n  return fail('View', `a tooltip function returns text, an element or { title, rows }, got ${describe(content)}`)\n}\n"],"mappings":";;AAaA,IAAME,IAAQ,2oBAURC,IAAM,IAECC,IAAb,MAAqB;CACW;CACc;CAG5C,YAAY,GAAS,IAAY,IAAI;EAGnC,IAFI,OAAOC,KAAY,cAAYL,EAAK,QAAQ,iDAAiDC,EAASI,CAAO,GAAG,GACpH,KAAK,UAAUA,GACX,CAAC,SAAS,eAAe,sBAAsB,GAAG;GACpD,IAAMC,IAAQ,SAAS,cAAc,OAAO;GAG5C,AAFA,EAAM,KAAK,wBACX,EAAM,cAAcJ,GACpB,SAAS,KAAK,QAAQI,CAAK;EAC7B;EAKA,AAJA,KAAK,KAAK,SAAS,cAAc,KAAK,GACtC,KAAK,GAAG,YAAY,iBAAiBC,IAAY,IAAIA,MAAc,MACnE,KAAK,GAAG,aAAa,QAAQ,SAAS,GACtC,KAAK,GAAG,SAAS,IACjB,SAAS,KAAK,OAAO,KAAK,EAAE;CAC9B;CAGA,KAAK,GAAK,GAAG,GAAG;EACd,IAAMF,IAAU,KAAK,QAAQG,CAAG;EAChC,IAAIH,KAAY,QAAiCA,MAAY,MAASA,MAAY,IAAI,OAAO,KAAK,KAAK;EAGvG,AAFA,KAAK,GAAG,gBAAgBI,EAAOJ,CAAO,CAAC,GACvC,KAAK,GAAG,SAAS,IACjB,KAAK,KAAKK,GAAGC,CAAC;CAChB;CAGA,KAAK,GAAG,GAAG;EACT,IAAI,KAAK,GAAG,QAAQ;EACpB,IAAMC,IAAI,KAAK,GAAG,aAAaC,IAAI,KAAK,GAAG,cACrCC,IAAOJ,IAAIP,IAAMS,IAAI,OAAO,aAAaF,IAAIP,IAAMS,IAAIF,IAAIP,GAC3DY,IAAMJ,IAAIR,IAAMU,IAAI,OAAO,cAAcF,IAAIR,IAAMU,IAAIF,IAAIR;EACjE,KAAK,GAAG,MAAM,YAAY,aAAa,KAAK,MAAM,KAAK,IAAI,GAAGW,CAAI,CAAC,EAAE,MAAM,KAAK,MAAM,KAAK,IAAI,GAAGC,CAAG,CAAC,EAAE;CAC1G;CAEA,OAAO;EACL,KAAK,GAAG,SAAS;CACnB;CAEA,UAAU;EACR,KAAK,GAAG,OAAO;CACjB;AACF;AAGA,SAASN,EAAO,GAAS;CACvB,IAAI,OAAOJ,KAAY,YAAY,OAAOA,KAAY,UAAU,OAAO,SAAS,eAAe,OAAOA,CAAO,CAAC;CAC9G,IAAIA,aAAmB,MAAM,OAAOA;CACpC,IAAI,OAAOA,KAAY,YAAYA,MAAY,WAAWA,KAAW,UAAUA,IAAU;EACvF,IAAMW,IAAM,SAAS,uBAAuB;EAC5C,IAAIX,EAAQ,UAAU,KAAA,GAAW;GAC/B,IAAMY,IAAQ,SAAS,cAAc,KAAK;GAG1C,AAFA,EAAM,YAAY,wBAClB,EAAM,cAAc,OAAOZ,EAAQ,KAAK,GACxCW,EAAI,OAAOC,CAAK;EAClB;EACA,IAAIZ,EAAQ,MAAM;GAChB,IAAMa,IAAO,SAAS,cAAc,KAAK;GACzC,EAAK,YAAY;GACjB,IAAMC,IAAU,MAAM,QAAQd,EAAQ,IAAI,IAAIA,EAAQ,OAAO,OAAO,QAAQA,EAAQ,IAAI;GACxF,KAAK,IAAM,CAACe,GAAMC,MAAUF,GAAS;IACnC,IAAMG,IAAI,SAAS,cAAc,MAAM,GAAGC,IAAI,SAAS,cAAc,MAAM;IAG3E,AAFA,EAAE,cAAc,OAAOH,CAAI,GAC3B,EAAE,cAAc,OAAOC,KAAU,WAAWA,EAAM,eAAe,IAAI,OAAOA,CAAK,GACjFH,EAAK,OAAOI,GAAGC,CAAC;GAClB;GACA,EAAI,OAAOL,CAAI;EACjB;EACA,OAAOF;CACT;CACA,OAAOhB,EAAK,QAAQ,uEAAuEC,EAASI,CAAO,GAAG;AAChH"}

package/dist/types/View.d.ts

@@ -73,6 +73,11 @@ export type ViewOptions = {
      * (default true)
      */
     antialias?: boolean;
+    /**
+     * soft-edged outlines with round corners (default: as antialias); change it
+     * any time with view.renderer.outlineAntialias
+     */
+    outlineAntialias?: boolean;
     /**
      * 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

package/dist/types/geometry/Geometry.d.ts

@@ -12,6 +12,11 @@ export type GeometryOptions = {
      * uv per vertex - glTF convention, (0, 0) is the image's top left
      */
     uvs?: ArrayLike<number>;
+    /**
+     * 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)
+     */
+    uvs2?: ArrayLike<number>;
     /**
      * rgb per vertex, sRGB 0-1 like every colour input
      */
@@ -31,6 +36,7 @@ export declare class Geometry {
     static OPTIONS: string[];
     /** @type {Float32Array} */ positions: Float32Array;
     /** @type {Float32Array | null} */ uvs: Float32Array | null;
+    /** A second UV set, for baked occlusion and light maps. @type {Float32Array | null} */ uvs2: Float32Array | null;
     /** @type {Float32Array | null} */ colors: Float32Array | null;
     /** @type {Uint16Array | Uint32Array | null} */ indices: Uint16Array | Uint32Array | null;
     /**

package/dist/types/material/Material.d.ts

@@ -76,6 +76,20 @@ export type MaterialOptions = {
      * multiplies the emissive colour
      */
     emissiveMap?: MapInput | null;
+    /**
+     * light baked into a texture, added as light from all round - usually on
+     * the second UV set (uvSet: 1)
+     */
+    lightMap?: MapInput | null;
+    /**
+     * (default 1)
+     */
+    lightMapIntensity?: number;
+    /**
+     * 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)
+     */
+    environmentIntensity?: number;
     /**
      * glow colour (default black)
      */
@@ -84,6 +98,74 @@ export type MaterialOptions = {
      * (default 1)
      */
     emissiveIntensity?: number;
+    /**
+     * 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
+     */
+    transmission?: number;
+    /**
+     * 0-1: a clear glossy layer over the surface - car paint, lacquer, varnish (default 0)
+     */
+    clearcoat?: number;
+    /**
+     * 0-1: how glossy the coat is, 0 a mirror (default 0)
+     */
+    clearcoatRoughness?: number;
+    /**
+     * 0-1: the soft bright rim of cloth at grazing angles - velvet, felt, upholstery (default 0)
+     */
+    sheen?: number;
+    /**
+     * the sheen's colour (default white)
+     */
+    sheenColor?: ColorInput;
+    /**
+     * 0-1: a thin bright rim at 0, a broad soft glow at 1 (default 0.5)
+     */
+    sheenRoughness?: number;
+    /**
+     * 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
+     */
+    ior?: number;
+    /**
+     * 0-1: scales a non-metal's reflections, 0 for none - chalk, clay (default 1)
+     */
+    specularIntensity?: number;
+    /**
+     * tints a non-metal's reflections face on (default white)
+     */
+    specularColor?: ColorInput;
+    /**
+     * 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)
+     */
+    anisotropy?: number;
+    /**
+     * turns the brushing from the UVs' u, in radians (default 0)
+     */
+    anisotropyRotation?: number;
+    /**
+     * 0-1: light through thin surfaces, lighting them from behind - leaves, paper,
+     * lampshades, curtains (default 0)
+     */
+    translucency?: number;
+    /**
+     * tints the light that comes through (default white)
+     */
+    translucencyColor?: ColorInput;
+    /**
+     * 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
+     */
+    matcap?: MapInput | null;
+    /**
+     * cartoon shading in this many flat tones (2 or more) with a hard-edged highlight;
+     * 0 (the default) is smooth
+     */
+    toon?: number;
     /**
      * flat colour that ignores lights (default false)
      */
@@ -144,7 +226,17 @@ export declare class Material {
         side: string;
         wireframe: string;
         shininess: string;
+        envMapIntensity: string;
+        reflectivityScale: string;
+        matcapMap: string;
+        gradientMap: string;
+        cel: string;
+        celShading: string;
         specular: string;
+        reflectivity: string;
+        anisotropyStrength: string;
+        diffuseTransmission: string;
+        subsurface: string;
         colour: string;
         emissiveColor: string;
         alpha: string;
@@ -159,6 +251,19 @@ export declare class Material {
     /** @type {number} */ roughness: number;
     /** @type {number} */ metalness: number;
     /** @type {number} */ emissiveIntensity: number;
+    /** How much light passes through, as through glass: 0-1. @type {number} */ transmission: number;
+    /** A clear glossy layer over the surface: 0-1. @type {number} */ clearcoat: number;
+    /** How glossy the coat is, 0 a mirror. @type {number} */ clearcoatRoughness: number;
+    /** The soft bright rim of cloth: 0-1. @type {number} */ sheen: number;
+    /** A thin bright rim at 0, a broad soft glow at 1. @type {number} */ sheenRoughness: number;
+    /** Index of refraction: how strongly a non-metal reflects (1.5). @type {number} */ ior: number;
+    /** Scales a non-metal's reflections, 0-1. @type {number} */ specularIntensity: number;
+    /** Brushed metal: 0-1. @type {number} */ anisotropy: number;
+    /** Turns the brushing from the UVs' u, in radians. @type {number} */ anisotropyRotation: number;
+    /** Light through thin surfaces: 0-1. @type {number} */ translucency: number;
+    /** Cartoon shading in this many flat tones; 0 is smooth. @type {number} */ toon: number;
+    /** @type {number} */ lightMapIntensity: number;
+    /** This material's share of the environment's light and reflections. @type {number} */ environmentIntensity: number;
     /** @type {boolean} */ unlit: boolean;
     /** @type {boolean} */ flatShading: boolean;
     /** @type {boolean} */ doubleSided: boolean;
@@ -180,6 +285,18 @@ export declare class Material {
     get emissive(): Color;
     /** @param {ColorInput} v */
     set emissive(v: ColorInput);
+    /** The sheen's colour; assign any colour input. @returns {Color} */
+    get sheenColor(): Color;
+    /** @param {ColorInput} v */
+    set sheenColor(v: ColorInput);
+    /** Tints a non-metal's reflections face on; assign any colour input. @returns {Color} */
+    get specularColor(): Color;
+    /** @param {ColorInput} v */
+    set specularColor(v: ColorInput);
+    /** Tints the light that comes through a translucent surface; assign any colour input. @returns {Color} */
+    get translucencyColor(): Color;
+    /** @param {ColorInput} v */
+    set translucencyColor(v: ColorInput);
     /** @returns {Texture | null} */
     get map(): Texture | null;
     /** @param {MapInput | null} v */
@@ -208,6 +325,14 @@ export declare class Material {
     get emissiveMap(): Texture | null;
     /** @param {MapInput | null} v */
     set emissiveMap(v: MapInput | null);
+    /** Light baked into a texture. @returns {Texture | null} */
+    get lightMap(): Texture | null;
+    /** @param {MapInput | null} v */
+    set lightMap(v: MapInput | null);
+    /** A picture of a lit sphere that gives the whole look. @returns {Texture | null} */
+    get matcap(): Texture | null;
+    /** @param {MapInput | null} v */
+    set matcap(v: MapInput | null);
     /** The maps that are set, by slot. @returns {[string, Texture][]} */
     get textures(): [string, Texture][];
     /** Rendered in the transparent pass: an opacity below 1, additive or multiply blending, or set for maps with soft alpha. @returns {boolean} */

package/dist/types/material/Texture.d.ts

@@ -11,7 +11,8 @@ export type TextureOptions = {
     image?: TextureImage;
     /**
      * 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
      */
     url?: string;
     /**
@@ -31,12 +32,26 @@ export type TextureOptions = {
      * [u, v] (default [0, 0])
      */
     offset?: number[];
+    /**
+     * turns the image on the surface, in radians, about `center` (default 0)
+     */
+    rotation?: number;
+    /**
+     * [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)
+     */
+    center?: number[];
+    /**
+     * 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)
+     */
+    uvSet?: 0 | 1;
     /**
      * (default 'linear')
      */
     filter?: 'linear' | 'nearest';
     /**
-     * (default true)
+     * (default true; false for a video, which would make them every frame)
      */
     mipmaps?: boolean;
     /**
@@ -49,7 +64,10 @@ export type TextureOptions = {
      */
     flipY?: boolean;
 };
-/** 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 declare class Texture {
     #private;
     /** The options it takes, and hints for names people reach for instead. */
@@ -59,15 +77,22 @@ export declare class Texture {
         encoding: string;
         wrapS: string;
         maxAnisotropy: string;
+        channel: string;
+        texCoord: string;
+        scale: string;
     };
-    /** @type {TextureImage | null} null until loaded */
-    image: TextureImage | null;
     /** @type {string | null} */
     url: string | null;
     /** @type {'repeat' | 'clamp' | 'mirror'} */
     wrap: 'repeat' | 'clamp' | 'mirror';
     repeat: number[];
     offset: number[];
+    /** Turns the image on the surface, in radians, about `center`. */
+    rotation: number;
+    /** [u, v] the point rotation turns about, in repeated UVs. */
+    center: number[];
+    /** Which UV set it reads: 0 the first, 1 the second (Geometry uvs2). @type {0 | 1} */
+    uvSet: 0 | 1;
     /** @type {'linear' | 'nearest'} */
     filter: 'linear' | 'nearest';
     mipmaps: boolean;
@@ -79,6 +104,13 @@ export declare class Texture {
     /** @param {TextureOptions | string} [options] options, or just a url */
     constructor(options?: TextureOptions | string);
     /** 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(): TextureImage | null;
+    /** @param {TextureImage | null} v */
+    set image(v: TextureImage | null);
     /** '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(): 'srgb' | 'linear';
     set colorSpace(v: 'srgb' | 'linear');

package/dist/types/webgl/WebGLRenderer.d.ts

@@ -29,6 +29,10 @@ export type WebGLRendererOptions = {
      * multisampling (default true; a shared context always has it)
      */
     antialias?: boolean;
+    /**
+     * soft-edged outlines with round corners (default: as antialias)
+     */
+    outlineAntialias?: boolean;
     /**
      * how lit colours are mapped to the screen: 'neutral' keeps colours
      * true (Khronos PBR Neutral, the default), 'aces' is filmic, 'none' clips
@@ -80,6 +84,8 @@ export declare class WebGLRenderer {
     /** @type {ToneMapping} */ toneMapping: ToneMapping;
     exposure: number;
     pixelRatio: number;
+    /** Outlines with soft edges and round corners, or hard pixel steps; takes effect on the next frame. */
+    outlineAntialias: boolean;
     /** Counts from the last frame and the GPU caches. */
     info: {
         drawCalls: number;

package/dist/types/webgl/passes.d.ts

@@ -24,6 +24,30 @@ export type ShadowMap = {
     sampler: string;
     texture: WebGLTexture;
 };
+export type Target = {
+    texture: WebGLTexture;
+    framebuffer: WebGLFramebuffer;
+};
+export type OutlineTargets = {
+    width: number;
+    height: number;
+    smooth: boolean;
+    mask: Target;
+    wide: Target;
+    coverage: Target | null;
+    msaa: {
+        framebuffer: WebGLFramebuffer;
+        renderbuffers: WebGLRenderbuffer[];
+    } | null;
+};
+export type OutlineMask = {
+    mask: WebGLTexture;
+    wide: WebGLTexture;
+    coverage: WebGLTexture | null;
+    radius: number;
+    width: number;
+    height: number;
+};
 /**
  * @typedef {object} Environment
  * @property {WebGLTexture} source the HDR image, mipmapped
@@ -38,6 +62,12 @@ export type ShadowMap = {
  * a pass that returns one of these.
  * @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 declare class Passes {
     #private;
     gl: WebGL2RenderingContext;
@@ -88,25 +118,19 @@ export declare 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: FrameOutline[], frame: FrameDescription, width: number, height: number, pixelRatio: number): {
-        mask: WebGLTexture;
-        wide: WebGLTexture;
-        radius: number;
-    };
+    outlineMask(outlines: FrameOutline[], frame: FrameDescription, width: number, height: number, pixelRatio: number, smooth: boolean): OutlineMask;
     /**
      * 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: {
-        mask: WebGLTexture;
-        wide: WebGLTexture;
-        radius: number;
-    }, height: number): void;
+    outlineComposite(outline: OutlineMask): void;
 }

package/dist/types/webgl/resources.d.ts

@@ -41,6 +41,26 @@ export type MeshBuffers = {
      */
     layout?: string;
 };
+/**
+ * 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 declare function tangentsOf(g: Geometry): Float32Array;
+/**
+ * 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 declare function uvMatrix(t: {
+    repeat: number[];
+    offset: number[];
+    rotation: number;
+    center: number[];
+}): Float32Array;
 export declare class Resources {
     #private;
     /** @type {WebGL2RenderingContext} */ gl: WebGL2RenderingContext;
@@ -59,17 +79,19 @@ export declare 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: Geometry, instances: {
         instanceMatrices: Float32Array;
         instanceColors: Float32Array | null;
         version: number;
-    } | null, withNormals: boolean): MeshBuffers;
+    } | null, withNormals: boolean, withTangents?: boolean): MeshBuffers;
     /**
      * 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: Geometry, instances: {
@@ -77,7 +99,7 @@ export declare class Resources {
         instanceColors: Float32Array | null;
         version: number;
         count: number;
-    } | null): number;
+    } | null, withTangents?: boolean): number;
     /**
      * Vertex array for Lines: one instance per segment with its two endpoints (and colours),
      * expanded to a screen-space quad in the vertex shader.

package/dist/types/webgl/shaders.d.ts

@@ -6,6 +6,8 @@ export declare const ATTRIBUTES: {
     color: number;
     instanceMatrix: number;
     instanceColor: number;
+    tangent: number;
+    uv2: number;
     segmentStart: number;
     segmentEnd: number;
     segmentColorStart: number;
@@ -14,12 +16,12 @@ export declare const ATTRIBUTES: {
 };
 export declare const CLIP = "\n#ifdef CLIP\nuniform vec4 uClipPlane; // world space, unit normal: cut away where dot(n, p) + d > 0\nvoid clipAway(vec3 p) {\n  if (dot(uClipPlane.xyz, p) + uClipPlane.w > 0.0) discard;\n}\n#else\nvoid clipAway(vec3 p) {}\n#endif\n";
 export declare const FOG = "\n#ifdef FOG\nuniform vec3 uFogColor;   // linear\nuniform vec2 uFogRange;   // linear fog: near, far\nuniform float uFogDensity; // exponential fog\nin float vFogDepth;\nvec3 fogged(vec3 c) {\n#ifdef FOG_LINEAR\n  float f = clamp((vFogDepth - uFogRange.x) / max(uFogRange.y - uFogRange.x, 1e-4), 0.0, 1.0);\n#else\n  float d = uFogDensity * vFogDepth;\n  float f = 1.0 - exp(-d * d);\n#endif\n#ifdef FOG_ADD\n  return c * (1.0 - f);\n#elif defined(FOG_MULTIPLY)\n  // a filter in the fog fades to white, which leaves what is behind it as it was\n  return mix(c, vec3(1.0), f);\n#else\n  return mix(c, uFogColor, f);\n#endif\n}\n#else\nvec3 fogged(vec3 c) { return c; }\n#endif\n";
-export declare const CLIP_ONLY_FRAGMENT = "\nprecision highp float;\nin vec3 vWorldPosition;\nout vec4 fragColor;\n#ifdef ALPHA_TEST\n// a cut-out casts the shadow of what is left of it - leaves, fences, grilles - not of its rectangle\nin vec2 vUv;\nuniform float uOpacity;\nuniform float uAlphaTest;\n#ifdef MAP\nuniform sampler2D uMap;\n\n#ifdef TRIPLANAR\nin vec3 vObjectPosition;\nin vec3 vObjectNormal;\nin mat3 vObjectToWorld;\nuniform float uTriplanar; // repeats per unit of the mesh's own space\nuniform vec4 uUvTransform; // the map's repeat xy and offset zw, applied to each projection as to UVs\n\nvec2 projected(vec2 p) {\n  return p * uUvTransform.xy + uUvTransform.zw;\n}\n\n// how much each axis's projection counts: mostly the one the surface faces, blended at the turns\nvec3 triplanarWeights(vec3 n) {\n  vec3 w = pow(abs(n), vec3(4.0));\n  return w / (w.x + w.y + w.z);\n}\n// a map seen from the three axes and blended - for meshes with no UVs, scans and CAD models\nvec4 triplanar(sampler2D s) {\n  vec3 p = vObjectPosition * uTriplanar, w = triplanarWeights(normalize(vObjectNormal));\n  return texture(s, projected(p.zy)) * w.x + texture(s, projected(p.xz)) * w.y + texture(s, projected(p.xy)) * w.z;\n}\n#define SAMPLE(s) triplanar(s)\n#else\n#define SAMPLE(s) texture(s, vUv)\n#endif\n\n#endif\n#endif\n\n#ifdef CLIP\nuniform vec4 uClipPlane; // world space, unit normal: cut away where dot(n, p) + d > 0\nvoid clipAway(vec3 p) {\n  if (dot(uClipPlane.xyz, p) + uClipPlane.w > 0.0) discard;\n}\n#else\nvoid clipAway(vec3 p) {}\n#endif\n\nvoid main() {\n  clipAway(vWorldPosition);\n#ifdef ALPHA_TEST\n  float alpha = uOpacity;\n#ifdef MAP\n  alpha *= SAMPLE(uMap).a;\n#endif\n  if (alpha < uAlphaTest) discard;\n#endif\n  fragColor = vec4(1.0);\n}\n";
+export declare const CLIP_ONLY_FRAGMENT: string;
 export declare const COMMON = "\nvec3 srgbToLinear(vec3 c) {\n  return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\n";
 export declare const EQUIRECT = "\nvec2 equirectUv(vec3 d) {\n  return vec2(atan(d.z, d.x) * 0.15915494 + 0.5, acos(clamp(d.y, -1.0, 1.0)) * 0.31830989);\n}\nvec3 equirectDirection(vec2 uv) {\n  float phi = (uv.x - 0.5) * 6.28318531, theta = uv.y * 3.14159265;\n  return vec3(cos(phi) * sin(theta), cos(theta), sin(phi) * sin(theta));\n}\n";
 export declare const FULLSCREEN_VERTEX = "\nout vec2 vUv;\nvoid main() {\n  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));\n  vUv = p;\n  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);\n}\n";
 export declare const TONE_MAP = "\nuniform float uExposure;\nuniform int uToneMapping;    // 0 none, 1 aces, 2 neutral\n\nvec3 toneMap(vec3 c) {\n  c *= uExposure;\n  if (uToneMapping == 1) {\n    // ACES filmic, Narkowicz's fit\n    c = clamp((c * (2.51 * c + 0.03)) / (c * (2.43 * c + 0.59) + 0.14), 0.0, 1.0);\n  } else if (uToneMapping == 2) {\n    // Khronos PBR Neutral\n    float x = min(c.r, min(c.g, c.b));\n    float offset = x < 0.08 ? x - 6.25 * x * x : 0.04;\n    c -= offset;\n    float peak = max(c.r, max(c.g, c.b));\n    if (peak > 0.8) {\n      float d = 0.2;\n      float newPeak = 1.0 - d * d / (peak + d - 0.8);\n      c *= newPeak / peak;\n      float g = 1.0 - 1.0 / (0.15 * (peak - newPeak) + 1.0);\n      c = mix(c, vec3(newPeak), g);\n    }\n  }\n  return c;\n}\n";
-export declare const MESH_VERTEX = "\nlayout(location = 0) in vec3 position;\nlayout(location = 1) in vec3 normal;\nlayout(location = 2) in vec2 uv;\nlayout(location = 3) in vec3 color;\n#ifdef INSTANCED\nlayout(location = 4) in mat4 instanceMatrix;\nlayout(location = 8) in vec3 instanceColor;\n#endif\n\nuniform mat4 uModel;\nuniform mat3 uNormalMatrix;\nuniform mat4 uViewProjection;\nuniform vec4 uUvTransform; // repeat xy, offset zw\nuniform int uHighlightIndex; // -2 none, -1 the whole node, otherwise the instance\n#ifdef FOG\nuniform mat4 uView;\nout float vFogDepth;\n#endif\n\nout vec3 vWorldPosition;\nout vec3 vNormal;\nout vec2 vUv;\nout vec3 vColor;\nflat out float vHighlight;\n#ifdef TRIPLANAR\n// the mesh's own space, so projected maps stay on it as it moves; and how its normals turn into the world\nout vec3 vObjectPosition;\nout vec3 vObjectNormal;\nout mat3 vObjectToWorld;\n#endif\n#ifdef PICK\nflat out uint vPickElement; // which instance, point or segment, for GPU picking\n#endif\n\n\nvec3 srgbToLinear(vec3 c) {\n  return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\n\n\n// Matrices times vectors only - a matrix times a matrix per vertex is four times the work, and\n// with 100,000 instances the vertex stage is most of the frame.\nvoid main() {\n  vColor = vec3(1.0);\n  vHighlight = uHighlightIndex == -1 ? 1.0 : 0.0;\n#ifdef INSTANCED\n  vec4 local = instanceMatrix * vec4(position, 1.0);\n  // the instance's normal matrix as its cofactor: the inverse transpose up to scale, from three\n  // cross products, flipped back for mirroring transforms\n  mat3 m = mat3(instanceMatrix);\n  mat3 instanceNormal = mat3(cross(m[1], m[2]), cross(m[2], m[0]), cross(m[0], m[1])) * sign(dot(m[0], cross(m[1], m[2])));\n  vec3 n = instanceNormal * normal;\n  vColor *= instanceColor;\n  if (gl_InstanceID == uHighlightIndex) vHighlight = 1.0;\n#else\n  vec4 local = vec4(position, 1.0);\n  vec3 n = normal;\n#endif\n#ifdef VERTEX_COLORS\n  vColor *= srgbToLinear(color);\n#endif\n  vec4 world = uModel * local;\n  vWorldPosition = world.xyz;\n  vNormal = uNormalMatrix * n;\n  vUv = uv * uUvTransform.xy + uUvTransform.zw;\n#ifdef TRIPLANAR\n  vObjectPosition = position;\n  vObjectNormal = normal;\n#ifdef INSTANCED\n  vObjectToWorld = uNormalMatrix * instanceNormal;\n#else\n  vObjectToWorld = uNormalMatrix;\n#endif\n#endif\n  gl_Position = uViewProjection * world;\n#ifdef FOG\n  vFogDepth = -(uView * world).z;\n#endif\n#ifdef PICK\n  vPickElement = uint(gl_InstanceID);\n#endif\n}\n";
+export declare const MESH_VERTEX = "\nlayout(location = 0) in vec3 position;\nlayout(location = 1) in vec3 normal;\nlayout(location = 2) in vec2 uv;\nlayout(location = 3) in vec3 color;\n#ifdef INSTANCED\nlayout(location = 4) in mat4 instanceMatrix;\nlayout(location = 8) in vec3 instanceColor;\n#endif\n#ifdef ANISOTROPY\nlayout(location = 9) in vec4 tangent;\nout vec4 vTangent;\n#endif\n#ifdef UV2\nlayout(location = 10) in vec2 uv2;\nout vec2 vUv2;\n#endif\n\nuniform mat4 uModel;\nuniform mat3 uNormalMatrix;\nuniform mat4 uViewProjection;\nuniform int uHighlightIndex; // -2 none, -1 the whole node, otherwise the instance\n#ifdef FOG\nuniform mat4 uView;\nout float vFogDepth;\n#endif\n\nout vec3 vWorldPosition;\nout vec3 vNormal;\nout vec2 vUv;\nout vec3 vColor;\nflat out float vHighlight;\n#ifdef TRIPLANAR\n// the mesh's own space, so projected maps stay on it as it moves; and how its normals turn into the world\nout vec3 vObjectPosition;\nout vec3 vObjectNormal;\nout mat3 vObjectToWorld;\n#endif\n#ifdef PICK\nflat out uint vPickElement; // which instance, point or segment, for GPU picking\n#endif\n\n\nvec3 srgbToLinear(vec3 c) {\n  return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\n\n\n// Matrices times vectors only - a matrix times a matrix per vertex is four times the work, and\n// with 100,000 instances the vertex stage is most of the frame.\nvoid main() {\n  vColor = vec3(1.0);\n  vHighlight = uHighlightIndex == -1 ? 1.0 : 0.0;\n#ifdef INSTANCED\n  vec4 local = instanceMatrix * vec4(position, 1.0);\n  // the instance's normal matrix as its cofactor: the inverse transpose up to scale, from three\n  // cross products, flipped back for mirroring transforms\n  mat3 m = mat3(instanceMatrix);\n  mat3 instanceNormal = mat3(cross(m[1], m[2]), cross(m[2], m[0]), cross(m[0], m[1])) * sign(dot(m[0], cross(m[1], m[2])));\n  vec3 n = instanceNormal * normal;\n  vColor *= instanceColor;\n  if (gl_InstanceID == uHighlightIndex) vHighlight = 1.0;\n#else\n  vec4 local = vec4(position, 1.0);\n  vec3 n = normal;\n#endif\n#ifdef VERTEX_COLORS\n  vColor *= srgbToLinear(color);\n#endif\n  vec4 world = uModel * local;\n  vWorldPosition = world.xyz;\n  vNormal = uNormalMatrix * n;\n  vUv = uv;\n#ifdef UV2\n  vUv2 = uv2;\n#endif\n#ifdef ANISOTROPY\n  // a direction along the surface, so it turns as the model does\n#ifdef INSTANCED\n  vTangent = vec4(mat3(uModel) * (m * tangent.xyz), tangent.w);\n#else\n  vTangent = vec4(mat3(uModel) * tangent.xyz, tangent.w);\n#endif\n#endif\n#ifdef TRIPLANAR\n  vObjectPosition = position;\n  vObjectNormal = normal;\n#ifdef INSTANCED\n  vObjectToWorld = uNormalMatrix * instanceNormal;\n#else\n  vObjectToWorld = uNormalMatrix;\n#endif\n#endif\n  gl_Position = uViewProjection * world;\n#ifdef FOG\n  vFogDepth = -(uView * world).z;\n#endif\n#ifdef PICK\n  vPickElement = uint(gl_InstanceID);\n#endif\n}\n";
 export declare const POINTS_VERTEX = "\nlayout(location = 0) in vec3 position;\nlayout(location = 3) in vec3 color;\n\nuniform mat4 uModel;\nuniform mat4 uView;\nuniform mat4 uProjection;\nuniform float uSize;        // pixels (with the pixel ratio applied), or world units when attenuated\nuniform float uScale;       // projection focal term x half the buffer height: world size -> pixels at depth 1\nuniform int uHighlightIndex; // -2 none, -1 every point, otherwise the point\n\nout vec3 vColor;\nflat out float vHighlight;\n#ifdef PICK\nflat out uint vPickElement; // which instance, point or segment, for GPU picking\n#endif\n#ifdef FOG\nout float vFogDepth;\n#endif\n\n\nvec3 srgbToLinear(vec3 c) {\n  return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\n\n\nvoid main() {\n  vec4 viewPosition = uView * (uModel * vec4(position, 1.0));\n  gl_Position = uProjection * viewPosition;\n#ifdef FOG\n  vFogDepth = -viewPosition.z;\n#endif\n#ifdef SIZE_ATTENUATION\n  // perspective shrinks with distance; an orthographic projection (w row 0, 0, 0, 1) doesn't\n  float depth = uProjection[3][3] == 1.0 ? 1.0 : max(-viewPosition.z, 1e-4);\n  gl_PointSize = uSize * uScale / depth;\n#else\n  gl_PointSize = uSize;\n#endif\n  vColor = vec3(1.0);\n#ifdef VERTEX_COLORS\n  vColor = srgbToLinear(color);\n#endif\n  vHighlight = uHighlightIndex == -1 || gl_VertexID == uHighlightIndex ? 1.0 : 0.0;\n#ifdef PICK\n  vPickElement = uint(gl_VertexID);\n#endif\n}\n";
 export declare const LINES_VERTEX = "\nlayout(location = 0) in vec3 segmentStart;\nlayout(location = 1) in vec3 segmentEnd;\nlayout(location = 2) in vec3 segmentColorStart;\nlayout(location = 3) in vec3 segmentColorEnd;\nlayout(location = 4) in vec2 corner; // x: 0 at start, 1 at end; y: -1 or 1 across\n\nuniform mat4 uModel;\nuniform mat4 uView;\nuniform mat4 uProjection;\nuniform vec2 uResolution;   // drawing buffer size in pixels\nuniform float uWidth;       // pixels, already scaled by the pixel ratio\nuniform float uNear;\n\nout vec3 vColor;\n#ifdef PICK\nflat out uint vPickElement; // which instance, point or segment, for GPU picking\n#endif\n#ifdef FOG\nout float vFogDepth;\n#endif\n\n\nvec3 srgbToLinear(vec3 c) {\n  return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\n\n\nvoid main() {\n  vec4 a = uView * (uModel * vec4(segmentStart, 1.0));\n  vec4 b = uView * (uModel * vec4(segmentEnd, 1.0));\n  // clip the segment to the near plane so lines passing behind the camera stay correct\n  float clipZ = -uNear;\n  if (a.z > clipZ && b.z > clipZ) {\n    gl_Position = vec4(2.0, 2.0, 2.0, 1.0); // wholly behind: off screen\n    return;\n  }\n  if (a.z > clipZ) a = mix(a, b, (clipZ - a.z) / (b.z - a.z));\n  if (b.z > clipZ) b = mix(b, a, (clipZ - b.z) / (a.z - b.z));\n\n  vec4 ca = uProjection * a;\n  vec4 cb = uProjection * b;\n  vec2 sa = ca.xy / ca.w * uResolution * 0.5;\n  vec2 sb = cb.xy / cb.w * uResolution * 0.5;\n  vec2 dir = sb - sa;\n  float len = length(dir);\n  dir = len > 0.0 ? dir / len : vec2(1.0, 0.0);\n  vec2 normal = vec2(-dir.y, dir.x);\n\n  vec4 clip = mix(ca, cb, corner.x);\n#ifdef FOG\n  vFogDepth = -mix(a.z, b.z, corner.x);\n#endif\n  // extend past each end by half the width so joins look continuous\n  vec2 offset = normal * corner.y * uWidth * 0.5 + dir * (corner.x * 2.0 - 1.0) * uWidth * 0.5;\n  clip.xy += offset / (uResolution * 0.5) * clip.w;\n  gl_Position = clip;\n#ifdef PICK\n  vPickElement = uint(gl_InstanceID);\n#endif\n\n  vColor = vec3(1.0);\n#ifdef VERTEX_COLORS\n  vColor = srgbToLinear(mix(segmentColorStart, segmentColorEnd, corner.x));\n#endif\n}\n";
 export type ShaderKind = 'mesh' | 'points' | 'lines';