phoria2 1.0.0 → 1.2.0

package/dist/types/scene/drawables.d.ts

@@ -4,7 +4,7 @@ import type { Geometry } from '../geometry/Geometry.js';
 import type { Material, MaterialOptions } from '../material/Material.js';
 import type { GeometryOptions } from '../geometry/Geometry.js';
 import type { NodeOptions } from './Node.js';
-import type { ColorInput, Vec3Input } from '../types.js';
+import type { ColorInput, QuatInput, Vec3Input } from '../types.js';
 export type DrawableOptions = NodeOptions & {
     geometry: Geometry | GeometryOptions;
     material?: Material | MaterialOptions;
@@ -52,6 +52,11 @@ export type LabelPlacement = {
      * the edge and up or down (default null: by its point)
      */
     edge?: 'left' | 'right' | null;
+    /**
+     * show the label only when zoomed in this far: at least this many CSS pixels to
+     * one world unit, at the label's point - details that appear as you come closer (default 0: always)
+     */
+    minScale?: number;
 };
 export type LabelPlace = 'center' | 'above' | 'below' | 'left' | 'right';
 export type InstanceLabels = Omit<LabelPlacement, 'priority'> & {
@@ -64,7 +69,7 @@ export type InstanceLabels = Omit<LabelPlacement, 'priority'> & {
 /** @import { Material, MaterialOptions } from '../material/Material.js' */
 /** @import { GeometryOptions } from '../geometry/Geometry.js' */
 /** @import { NodeOptions } from './Node.js' */
-/** @import { ColorInput, Vec3Input } from '../types.js' */
+/** @import { ColorInput, QuatInput, Vec3Input } from '../types.js' */
 /**
  * @typedef {NodeOptions & {
  *   geometry: Geometry | GeometryOptions,
@@ -95,10 +100,13 @@ export type InstanceLabels = Omit<LabelPlacement, 'priority'> & {
  * @property {'left' | 'right' | null} [edge] set the label at the view's left or right edge, level with its
  *   point - callouts in a column down the side of a diagram, with leader: true. offset then moves it in from
  *   the edge and up or down (default null: by its point)
+ * @property {number} [minScale] show the label only when zoomed in this far: at least this many CSS pixels to
+ *   one world unit, at the label's point - details that appear as you come closer (default 0: always)
  */
 /** @typedef {'center' | 'above' | 'below' | 'left' | 'right'} LabelPlace */
 /**
- * One label per instance or point, from its row of data.
+ * One label per instance or point, from its row of data - or a list of these, for several each (a symbol
+ * always, its details when zoomed in).
  * @typedef {Omit<LabelPlacement, 'priority'> & {
  *   text: (datum: any, index: number) => string | number | null | undefined,
  *   priority?: number | ((datum: any, index: number) => number),
@@ -109,10 +117,12 @@ export type InstanceLabels = Omit<LabelPlacement, 'priority'> & {
  * label the point itself.
  */
 export declare const LABEL_PLACES: LabelPlace[];
-/** @param {string} owner @param {unknown} v @returns {(InstanceLabels & Required<Omit<LabelPlacement, 'priority'>> & { priority: number | ((datum: any, index: number) => number) }) | null} */
-declare function instanceLabels(owner: string, v: unknown): (InstanceLabels & Required<Omit<LabelPlacement, 'priority'>> & {
+export type CheckedLabels = InstanceLabels & Required<Omit<LabelPlacement, 'priority'>> & {
     priority: number | ((datum: any, index: number) => number);
-}) | null;
+};
+/** @typedef {InstanceLabels & Required<Omit<LabelPlacement, 'priority'>> & { priority: number | ((datum: any, index: number) => number) }} CheckedLabels */
+/** @param {string} owner @param {unknown} v @returns {CheckedLabels | CheckedLabels[] | null} */
+declare function instanceLabels(owner: string, v: unknown): CheckedLabels | CheckedLabels[] | null;
 /** Base for nodes with geometry and a material: Mesh, InstancedMesh, Points and Lines. */
 export declare class Drawable extends Node {
     #private;
@@ -157,7 +167,10 @@ export type InstanceOptions = {
      * Euler angles in radians, XYZ order
      */
     rotation?: Vec3Input | Euler;
-    quaternion?: ArrayLike<number>;
+    /**
+     * [x, y, z, w] or { x, y, z, w } - as physics engines give them
+     */
+    quaternion?: QuatInput;
     scale?: Vec3Input | number;
     /**
      * multiplies the material colour
@@ -166,7 +179,8 @@ export type InstanceOptions = {
 };
 /**
  * Many copies of one geometry and material, drawn together. Set each copy with setInstance().
- * Picking reports which instance was hit.
+ * Picking reports which instance was hit. An instance scaled to 0 is hidden - it draws nothing, and
+ * framing, culling, shadows and labels leave it out - so a pool of instances can keep spares.
  */
 export declare class InstancedMesh extends Mesh {
     #private;
@@ -178,11 +192,11 @@ export declare class InstancedMesh extends Mesh {
     instanceMatrices: Float32Array;
     /** Linear rgb per instance, or null until a colour is set. @type {Float32Array | null} */
     instanceColors: Float32Array | null;
-    /** A label per instance, from its row of data. @type {ReturnType<typeof instanceLabels>} */
+    /** A label per instance from its row of data - or a list of them, several per instance. @type {ReturnType<typeof instanceLabels>} */
     labels: ReturnType<typeof instanceLabels>;
     /**
      * @param {DrawableOptions & { count?: number, instances?: InstanceOptions[], instanceMatrices?: ArrayLike<number>,
-     *   instanceColors?: ArrayLike<number>, labels?: InstanceLabels | null }} options count defaults to the number
+     *   instanceColors?: ArrayLike<number>, labels?: InstanceLabels | InstanceLabels[] | null }} options count defaults to the number
      *   of instances or rows of data; instanceMatrices/instanceColors are raw data, as toJSON() writes
      */
     constructor(options: DrawableOptions & {
@@ -190,7 +204,7 @@ export declare class InstancedMesh extends Mesh {
         instances?: InstanceOptions[];
         instanceMatrices?: ArrayLike<number>;
         instanceColors?: ArrayLike<number>;
-        labels?: InstanceLabels | null;
+        labels?: InstanceLabels | InstanceLabels[] | null;
     });
     /**
      * Set an instance's transform and optional colour. Unset transform parts default to identity.
@@ -222,11 +236,11 @@ export declare class InstancedMesh extends Mesh {
 export declare class Points extends Drawable {
     static type: string;
     static get OPTIONS(): string[];
-    /** A label per point, from its row of data. @type {ReturnType<typeof instanceLabels>} */
+    /** A label per point from its row of data - or a list of them, several per point. @type {ReturnType<typeof instanceLabels>} */
     labels: ReturnType<typeof instanceLabels>;
-    /** @param {DrawableOptions & { labels?: InstanceLabels | null }} options */
+    /** @param {DrawableOptions & { labels?: InstanceLabels | InstanceLabels[] | null }} options */
     constructor(options: DrawableOptions & {
-        labels?: InstanceLabels | null;
+        labels?: InstanceLabels | InstanceLabels[] | null;
     });
     /** @returns {'points'} */
     get drawMode(): 'points';
@@ -261,6 +275,8 @@ export declare class Label extends Node {
         pointer: string;
         anchor: string;
         zIndex: string;
+        minZoom: string;
+        lod: string;
         collision: string;
     };
     text: string;
@@ -280,6 +296,8 @@ export declare class Label extends Node {
     leader: boolean;
     /** Set at the view's left or right edge, level with its point, or null for by its point. @type {'left' | 'right' | null} */
     edge: 'left' | 'right' | null;
+    /** Shown only when zoomed in this far: CSS pixels to one world unit at its point; 0 for always. */
+    minScale: number;
     /** @param {LabelOptions} options */
     constructor(options: LabelOptions);
 }

package/dist/types/scene/lights.d.ts

@@ -1,8 +1,9 @@
 import { Color } from '../value/Color.js';
 import { Vec3 } from '../value/Vec3.js';
+import { Box3 } from '../value/Box3.js';
 import { Node } from './Node.js';
 import type { NodeOptions } from './Node.js';
-import type { ColorInput, Vec3Input } from '../types.js';
+import type { Box3Input, ColorInput, Vec3Input } from '../types.js';
 export type LightOptions = NodeOptions & {
     color?: ColorInput;
     intensity?: number;
@@ -87,13 +88,26 @@ declare class AimedLight extends Light {
 }
 /** Parallel light from far away, like the sun. Position only matters for its shadow. */
 export declare class DirectionalLight extends AimedLight {
+    #private;
     static type: string;
     static get OPTIONS(): string[];
     castShadow: boolean;
-    /** @param {AimedLightOptions & { castShadow?: boolean }} [options] */
+    /** @param {AimedLightOptions & { castShadow?: boolean, shadowBounds?: Box3Input | null }} [options] */
     constructor(options?: AimedLightOptions & {
         castShadow?: boolean;
+        shadowBounds?: Box3Input | null;
     });
+    /**
+     * The part of the world, in world units, that has shadows - or null (the default) to follow
+     * whatever casts them. The shadow map is fitted to what casts every frame, so one caster flung far
+     * off spreads its texels over everything and every shadow blurs; set the area where things happen
+     * and its shadows stay sharp. Casters outside it still shadow it, from wherever they stand.
+     * Assigning copies.
+     * @returns {Box3 | null}
+     */
+    get shadowBounds(): Box3 | null;
+    /** @param {Box3Input | null} v */
+    set shadowBounds(v: Box3Input | null);
 }
 /** Light from a point in all directions, falling off with the square of the distance. */
 export declare class PointLight extends Light {

package/dist/types/shadow.d.ts

@@ -25,9 +25,10 @@ export type ShadowFit = {
  * @param {Box3[]} casters world bounds
  * @param {Box3[]} receivers world bounds
  * @param {number} [size] map size in texels
+ * @param {Box3 | null} [area] the light's shadowBounds: the map covers this across, whatever casts
  * @returns {ShadowFit | null}
  */
-export declare function fitShadow(direction: ArrayLike<number>, casters: Box3[], receivers: Box3[], size?: number): ShadowFit | null;
+export declare function fitShadow(direction: ArrayLike<number>, casters: Box3[], receivers: Box3[], size?: number, area?: Box3 | null): ShadowFit | null;
 /** Spot shadows' map: four tiles of half its size, one a light. */
 export declare const SPOT_ATLAS_SIZE = 2048;
 export declare const SPOT_TILES = 4;

package/dist/types/types.d.ts

@@ -7,12 +7,26 @@ export type XYZ = {
     z: number;
 };
 export type Vec3Input = Vec3Like | XYZ;
+export type XYZW = {
+    x: number;
+    y: number;
+    z: number;
+    w: number;
+};
+export type QuatInput = ArrayLike<number> | XYZW;
+export type Box3Input = import('./value/Box3.js').Box3 | {
+    min: Vec3Input;
+    max: Vec3Input;
+};
 export type ColorInput = string | number | number[] | Float32Array | import('./value/Color.js').Color;
 /** @typedef {Float32Array | number[]} Vec2Like */
 /** @typedef {Float32Array | number[]} Vec3Like */
 /** @typedef {Float32Array | number[]} Vec4Like */
 /** A position or direction as an object literal. @typedef {{ x: number, y: number, z: number }} XYZ */
 /** A vector as accepted on input: [x, y, z], { x, y, z } or a Vec3. @typedef {Vec3Like | XYZ} Vec3Input */
+/** A quaternion as an object literal - as physics engines such as Rapier return them. @typedef {{ x: number, y: number, z: number, w: number }} XYZW */
+/** A rotation quaternion as accepted on input: [x, y, z, w], { x, y, z, w } or a Quat. @typedef {ArrayLike<number> | XYZW} QuatInput */
+/** A box as accepted on input: a Box3, or its lowest and highest corners. @typedef {import('./value/Box3.js').Box3 | { min: Vec3Input, max: Vec3Input }} Box3Input */
 /**
  * A colour as accepted on input, in sRGB: '#ff8800', '#f80', 0xff8800, 'rgb(255 136 0)',
  * 'hsl(32 100% 50%)', a CSS colour name, or [r, g, b] with components 0-1.

package/dist/types/value/Color.d.ts

@@ -1,8 +1,4 @@
 import type { ColorInput } from '../types.js';
-/**
- * An RGB colour. Input is sRGB, as everywhere in phoria2; the components are stored **linear**,
- * ready for lighting maths. `toJSON()` gives sRGB '#rrggbb' back.
- */
 export declare class Color extends Float32Array {
     #private;
     0: any;

package/dist/types/value/Quat.d.ts

@@ -1,3 +1,5 @@
+import type { QuatInput } from '../types.js';
+/** @import { QuatInput } from '../types.js' */
 /**
  * A rotation quaternion [x, y, z, w]: a Float32Array(4) with accessors and chainable methods.
  * A node's quaternion and its Euler `rotation` keep each other in sync through these setters;
@@ -44,8 +46,8 @@ export declare class Quat extends Float32Array {
      */
     /** @param {number | ArrayLike<number>} x @param {number} [y] @param {number} [z] @param {number} [w] */
     set(array: ArrayLike<number>, offset?: number): void;
-    /** @param {ArrayLike<number>} q [x, y, z, w] @param {string} [owner] @returns {this} */
-    copy(q: ArrayLike<number>, owner?: string): this;
+    /** @param {QuatInput} q [x, y, z, w], or { x, y, z, w } as physics engines give them @param {string} [owner] @returns {this} */
+    copy(q: QuatInput, owner?: string): this;
     /** @returns {Quat} */
     clone(): Quat;
     /** @returns {this} */

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';