@3driseai/3drise-viewer 0.1.40 → 0.1.42

package/dist/components/image/core/prism.js

@@ -0,0 +1,164 @@
+// GENERATED from the lab (Claude outputs/gallery-lab/image/prism.mjs) by emit_image.mjs — change the lab and re-emit.
+// prism — an image variant (type 'image', config.type 'prism'). Material: MeshStandardMaterial (lit by the scene;
+// object effects attach).
+//
+// A trivision sign: the picture is printed across a row of slim triangular prisms standing side by side. Each
+// prism has three faces; the outgoing picture is on the face turned to the viewer, the incoming one on the next
+// face. A change turns every prism a third of a turn about its own axis, one after the other in a travelling
+// wave, with a short critically-damped settle — the faces pass through the scene's light, so the turn reads as
+// light travelling across facets. The third face carries the slat colour. Rest angles accumulate (uSeq), so a
+// change that is reversed half-way turns the prisms back the way they came. Idle: a barely visible ripple of
+// the prisms (a degree) runs across, making the facets shimmer. One InstancedMesh, one draw call.
+// Cursor: `tilt` turns the prisms near the cursor a few degrees toward it (glints), `wave` sends a small
+// ripple of turns out from the cursor.
+import * as THREE from 'three';
+import { baseUniforms, applyBase, setU, createPicture, stepPointer, patchMaterial, depthTwin } from './imageCore.js';
+export const POINTER_MODES = ['tilt', 'wave'];
+export const STRUCTURAL = ['imageUrls', 'count', 'vertical'];
+export function createUniforms() {
+    return { ...baseUniforms(), uCount: { value: 56 }, uVert: { value: 1 }, uSettle: { value: 0.5 }, uGap: { value: 0.06 }, uSlat: { value: new THREE.Color('#15171c') }, uSelf: { value: 0.1 } };
+}
+export function applyConfig(u, c) {
+    applyBase(u, c, POINTER_MODES);
+    setU(u, 'uSettle', c.settle);
+    setU(u, 'uGap', c.gap);
+    setU(u, 'uSlat', c.slatColor);
+    setU(u, 'uSelf', c.selfLight);
+}
+const vertexPars = /* glsl */ `
+uniform float uCount, uVert, uSettle, uGap, uSelf; uniform vec3 uSlat;
+attribute float aIndex; attribute float aFace;   // prism index (instance), face of this vertex (0..2, 3 = cap)
+varying vec2 vPic; varying float vFace; varying float vWhich;
+// the turn of one prism: 0 -> 1 with a critically-damped settle (overshoot ~ uSettle)
+float turnCurve(float l){
+  float x = clamp(l, 0.0, 1.0);
+  float e = 1.0 - pow(1.0 - x, 3.0);
+  return e + uSettle * 0.12 * sin(PI * x) * sin(PI * x) * (x > 0.5 ? 1.0 : 0.0) * sin(PI * (x - 0.5) * 2.0);
+}
+`;
+const fragPars = /* glsl */ `
+uniform float uCount, uVert, uSettle, uGap, uSelf; uniform vec3 uSlat;
+varying vec2 vPic; varying float vFace; varying float vWhich;
+`;
+// The cross-section lives in (across, depth) with depth toward the viewer. Face k's outward normal is at
+// 90 + 120 k degrees, so a turn of a = -120 (seq + t) degrees brings face (seq + t) mod 3 to the front: A sits on face
+// seq mod 3, B on the next, the third face is the slat. Face k's tangent (its left -> right when in front) is at 120 k.
+const vertex = /* glsl */ `
+  float i = aIndex; float face = aFace;
+  float across = (i + 0.5) / uCount;                                 // centre of this prism, 0..1 across
+  float along0 = position.y + 0.5;                                   // 0..1 along the prism
+  vec2 suv = uVert > 0.5 ? vec2(across, along0) : vec2(along0, across);
+  float l = localP(suv);
+  float t = turnCurve(l);
+  float pitch = (uVert > 0.5 ? uSize.x : uSize.y) / uCount;
+  vec2 xy = (suv - 0.5) * uSize;
+  float rest = uBreathe * 0.018 * sin(uTime * 0.7 - across * 9.0);   // idle shimmer (about a degree)
+  float pb = pointerBump(xy);
+  float toward = uVert > 0.5 ? clamp((uPointer.x - xy.x) * 3.0, -1.0, 1.0) : clamp((uPointer.y - xy.y) * 3.0, -1.0, 1.0);
+  if (uPointerMode > -0.5 && uPointerMode < 0.5) rest += 0.22 * pb * toward;
+  else if (uPointerMode > 0.5) { float d = length(xy - uPointer.xy); rest += 0.2 * uPointerActive * uPointerStrength * sin(d * 18.0 - uTime * 5.0) * exp(-d * 2.5 / max(uPointerRadius, 0.05)); }
+  float ang = -(uSeq + t) * 2.0943951 + rest;
+  vec2 cs = position.xz, csn = normal.xz;
+  float ca = cos(ang), sa = sin(ang);
+  vec2 rc = vec2(ca * cs.x - sa * cs.y, sa * cs.x + ca * cs.y);
+  vec2 rn = vec2(ca * csn.x - sa * csn.y, sa * csn.x + ca * csn.y);
+  float R = pitch * (1.0 - uGap) / 1.7320508;                        // circumradius from the face width
+  float zc = -R * 0.5;                                               // the front face sits at z = 0 at rest
+  if (uVert > 0.5) { fxP = vec3(xy.x + rc.x * R, xy.y, zc + rc.y * R); fxN = vec3(rn.x, normal.y, rn.y); }
+  else { fxP = vec3(xy.x, xy.y + rc.x * R, zc + rc.y * R); fxN = vec3(normal.y, rn.x, rn.y); }
+  float fa = mod(uSeq, 3.0), fb = mod(uSeq + 1.0, 3.0);
+  vWhich = face > 2.5 ? 2.0 : (abs(face - fa) < 0.5 ? 0.0 : (abs(face - fb) < 0.5 ? 1.0 : 2.0));
+  vec2 tk = vec2(cos(face * 2.0943951), sin(face * 2.0943951));
+  float acrossUv = across + dot(cs, tk) / 1.7320508 / uCount * (1.0 - uGap);
+  vPic = uVert > 0.5 ? vec2(acrossUv, along0) : vec2(along0, acrossUv);
+  vFace = face;
+`;
+const diffuse = /* glsl */ `
+  vec3 c = vWhich < 0.5 ? picA(vPic) : (vWhich < 1.5 ? picB(vPic) : uSlat);
+  diffuseColor.rgb = c * (vWhich < 1.5 ? uIntensity : 1.0);
+  diffuseColor.a *= uOpacity;
+`;
+const emissive = /* glsl */ `
+  totalEmissiveRadiance += (vWhich < 1.5 ? diffuseColor.rgb * uSelf : vec3(0.0));
+`;
+/** One prism: three flat faces + two end caps; the cross-section (x across, z toward the viewer) is a unit-circumradius triangle, length 1 along y. */
+function prismGeometry(segsAlong) {
+    const pos = [], nor = [], face = [], idx = [];
+    const D = Math.PI / 180;
+    for (let f = 0; f < 3; f++) {
+        const th = (90 + 120 * f) * D;
+        const nx = Math.cos(th), nz = Math.sin(th);
+        const L = [Math.cos(th + 60 * D), Math.sin(th + 60 * D)], Rr = [Math.cos(th - 60 * D), Math.sin(th - 60 * D)]; // left / right corners when in front
+        const base = pos.length / 3;
+        for (let j = 0; j <= segsAlong; j++) {
+            const y = j / segsAlong - 0.5;
+            pos.push(L[0], y, L[1], Rr[0], y, Rr[1]);
+            nor.push(nx, 0, nz, nx, 0, nz);
+            face.push(f, f);
+        }
+        for (let j = 0; j < segsAlong; j++) {
+            const a = base + j * 2;
+            idx.push(a, a + 1, a + 3, a, a + 3, a + 2);
+        }
+    }
+    for (const y of [-0.5, 0.5]) {
+        const base = pos.length / 3;
+        for (let k = 0; k < 3; k++) {
+            const a = (90 + 60 + 120 * k) * D;
+            pos.push(Math.cos(a), y, Math.sin(a));
+            nor.push(0, Math.sign(y), 0);
+            face.push(3);
+        }
+        if (y > 0)
+            idx.push(base, base + 2, base + 1);
+        else
+            idx.push(base, base + 1, base + 2);
+    }
+    const g = new THREE.BufferGeometry();
+    g.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
+    g.setAttribute('normal', new THREE.Float32BufferAttribute(nor, 3));
+    g.setAttribute('aFace', new THREE.Float32BufferAttribute(face, 1));
+    g.setIndex(idx);
+    return g;
+}
+export function build(u, c) {
+    const object = new THREE.Group();
+    const n = Math.max(4, c.count | 0);
+    u.uCount.value = n;
+    u.uVert.value = c.vertical ? 1 : 0;
+    const base = prismGeometry(24);
+    const geo = new THREE.InstancedBufferGeometry();
+    geo.index = base.index;
+    geo.setAttribute('position', base.attributes.position);
+    geo.setAttribute('normal', base.attributes.normal);
+    geo.setAttribute('aFace', base.attributes.aFace);
+    const ids = new Float32Array(n);
+    for (let i = 0; i < n; i++)
+        ids[i] = i;
+    geo.setAttribute('aIndex', new THREE.InstancedBufferAttribute(ids, 1));
+    geo.instanceCount = n;
+    geo.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 1.4);
+    const P = { key: 'prism', uniforms: u, pars: '', vertexPars, fragmentPars: fragPars, vertex, diffuse, emissive };
+    const mat = patchMaterial(new THREE.MeshStandardMaterial({ roughness: c.roughness, metalness: 0 }), P);
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.castShadow = true;
+    mesh.receiveShadow = true;
+    mesh.frustumCulled = false;
+    mat.side = THREE.FrontSide;
+    mesh.customDepthMaterial = depthTwin(P);
+    object.add(mesh);
+    const cfg = { ...c };
+    const pic = createPicture(u, cfg);
+    const pst = {};
+    const api = {
+        object, materials: [mat],
+        controls: { show: (t) => pic.show(t), get busy() { return pic.busy; }, pic },
+        apply(k) { Object.assign(cfg, k); applyConfig(u, k); if (k.roughness !== undefined)
+            mat.roughness = k.roughness; if (k.opacity !== undefined) {
+            mat.transparent = k.opacity < 1;
+        } },
+        update(dt, pointer) { dt = Math.min(dt, 0.1); u.uTime.value += dt; pic.step(dt); stepPointer(u, pointer, dt, pst); },
+        dispose() { base.dispose(); geo.dispose(); mat.dispose(); mesh.customDepthMaterial.dispose(); pic.dispose(); },
+    };
+    return api;
+}

package/dist/components/image/core/projector.d.ts

@@ -0,0 +1,135 @@
+import * as THREE from 'three';
+export declare const POINTER_MODES: string[];
+export declare const STRUCTURAL: string[];
+export declare function createUniforms(): {
+    uLens: {
+        value: THREE.Vector3;
+    };
+    uHaze: {
+        value: number;
+    };
+    uDust: {
+        value: number;
+    };
+    uDrift: {
+        value: number;
+    };
+    uFocus: {
+        value: number;
+    };
+    uGate: {
+        value: number;
+    };
+    uLamp: {
+        value: number;
+    };
+    uVignette: {
+        value: number;
+    };
+    uLampColor: {
+        value: THREE.Color;
+    };
+    uGain: {
+        value: number;
+    };
+    uHot: {
+        value: THREE.Vector2;
+    };
+    uTexA: {
+        value: any;
+    };
+    uTexB: {
+        value: any;
+    };
+    uFitA: {
+        value: THREE.Vector2;
+    };
+    uFitB: {
+        value: THREE.Vector2;
+    };
+    uP: {
+        value: number;
+    };
+    uHasA: {
+        value: number;
+    };
+    uSeq: {
+        value: number;
+    };
+    uSize: {
+        value: THREE.Vector2;
+    };
+    uTime: {
+        value: number;
+    };
+    uDir: {
+        value: THREE.Vector2;
+    };
+    uSpread: {
+        value: number;
+    };
+    uBlank: {
+        value: THREE.Color;
+    };
+    uIntensity: {
+        value: number;
+    };
+    uOpacity: {
+        value: number;
+    };
+    uBreathe: {
+        value: number;
+    };
+    uPointer: {
+        value: THREE.Vector3;
+    };
+    uPointerVel: {
+        value: THREE.Vector2;
+    };
+    uPointerActive: {
+        value: number;
+    };
+    uPointerMode: {
+        value: number;
+    };
+    uPointerStrength: {
+        value: number;
+    };
+    uPointerRadius: {
+        value: number;
+    };
+    uPointerColor: {
+        value: THREE.Color;
+    };
+};
+export declare function applyConfig(u: any, c: any): void;
+export declare function build(u: any, c: any): {
+    object: THREE.Group<THREE.Object3DEventMap>;
+    materials: THREE.ShaderMaterial[];
+    controls: {
+        show: (t: any) => void;
+        readonly busy: boolean;
+        pic: {
+            st: {
+                A: any;
+                B: any;
+                aspA: number;
+                aspB: number;
+                p: number;
+                dir: number;
+                pending: any;
+                seq: number;
+                frame: number;
+            };
+            show: (tex: any) => void;
+            jump: (tex: any) => void;
+            step: (dt: any) => void;
+            readonly busy: boolean;
+            dispose(): void;
+        };
+    };
+    apply(k: any): void;
+    update(dt: any, pointer: any): void;
+    dispose(): void;
+};
+//# sourceMappingURL=projector.d.ts.map

package/dist/components/image/core/projector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"projector.d.ts","sourceRoot":"","sources":["../../../../src/components/image/core/projector.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,aAAa,UAAsB,CAAC;AACjD,eAAO,MAAM,UAAU,UAA6B,CAAC;AAErD,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG7B;AACD,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAG/B;AAqHD,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyDzB"}

package/dist/components/image/core/projector.js

@@ -0,0 +1,225 @@
+// GENERATED from the lab (Claude outputs/gallery-lab/image/projector.mjs) by emit_image.mjs — change the lab and re-emit.
+// projector — an image variant (type 'image', config.type 'projector'). Material: own ShaderMaterials, self-coloured.
+// No light of its own: the projected picture, the beam and the dust are emissive, the scene's lights are untouched.
+//
+// The picture is projected: it exists as light on a matte screen, thrown from a lens that hangs above and in front
+// of it. The beam is visible in the air — a haze pyramid from the lens to the screen whose every fragment shows
+// the colour of the picture where its ray lands, fading with the lamp's inverse square — and dust motes drift
+// through it, each lit by the pixel it floats in. All three read one function, proj(uv): the slide in the gate,
+// the gate's focus and the lamp, so beam, dust and screen always agree. A change is a slide change: the lens
+// racks softly out of focus, the slide carriage moves — the old slide slides out of the gate as the new one slides
+// in, its frame edge passing across the screen as a soft, defocused shadow — and focus comes back with a small
+// hunt. The first picture is the lamp warming up on a fresh slide. Idle: the dust drifts, the lamp breathes a
+// percent. Cursor: `stir` — the dust swirls where the cursor's ray crosses the beam; `hotspot` — the lamp's
+// hotspot leans toward the cursor.
+import * as THREE from 'three';
+import { baseUniforms, applyBase, setU, createPicture, stepPointer, GLSL_COMMON, fragHead, mulberry32 } from './imageCore.js';
+export const POINTER_MODES = ['stir', 'hotspot'];
+export const STRUCTURAL = ['imageUrls', 'dustCount'];
+export function createUniforms() {
+    return { ...baseUniforms(), uLens: { value: new THREE.Vector3(0, 1.3, 2.4) }, uHaze: { value: 0.6 }, uDust: { value: 0.5 }, uDrift: { value: 0 }, uFocus: { value: 0 }, uGate: { value: 0 },
+        uLamp: { value: 1 }, uVignette: { value: 0.35 }, uLampColor: { value: new THREE.Color('#fff3e2') }, uGain: { value: 1 }, uHot: { value: new THREE.Vector2() } };
+}
+export function applyConfig(u, c) {
+    applyBase(u, c, POINTER_MODES);
+    setU(u, 'uHaze', c.haze);
+    setU(u, 'uDust', c.dust);
+    setU(u, 'uVignette', c.vignette);
+    setU(u, 'uLampColor', c.lampColor);
+    setU(u, 'uGain', c.screenGain);
+}
+// proj(uv): what the lens puts on the screen at uv — the two slides in the moving gate, out of focus by uFocus
+const projGlsl = /* glsl */ `
+uniform vec3 uLens; uniform float uHaze, uDust, uDrift, uFocus, uGate, uLamp, uVignette, uGain; uniform vec3 uLampColor; uniform vec2 uHot;
+vec3 slide(sampler2D t, vec2 fitS, vec2 uv, float has, float off, float blur){
+  // the slide in the gate; out of focus = a small disc of taps on a pre-blurred mip (smooth, never blocky)
+  vec2 g = uv + vec2(off, 0.0);
+  float soft = 0.004 + 0.05 * blur;
+  float m = smoothstep(-soft, soft, g.x) * smoothstep(-soft, soft, 1.0 - g.x);
+  if (m <= 0.0 || has <= 0.0) return vec3(0.0);
+  float r = 0.022 * blur;
+  float lod = blur * 2.5;
+  vec3 c = vec3(0.0);
+  for (int i = 0; i < 7; i++) {
+    float a = float(i) * 2.3999632 + 0.5;
+    vec2 o = (i == 0) ? vec2(0.0) : vec2(cos(a), sin(a)) * r * sqrt(float(i) / 6.0);
+    vec2 q = clamp(g + o, 0.0, 1.0);
+    c += PROJ_SAMPLE(t, 0.5 + (q - 0.5) * fitS, lod).rgb;
+  }
+  return c / 7.0 * m * has;
+}
+vec3 proj(vec2 uv){
+  float blur = uFocus;
+  vec3 c = slide(uTexA, uFitA, uv, uHasA, -uGate * 1.08, blur) + slide(uTexB, uFitB, uv, 1.0, (1.0 - uGate) * 1.08, blur);
+  vec2 q = (uv - 0.5) * vec2(uSize.x / uSize.y, 1.0) - uHot;
+  float vig = 1.0 - uVignette * 0.6 * dot(q, q);
+  return c * uLampColor * uLamp * vig;
+}
+// the ray from the lens through a local point p lands on the screen (z = 0) at:
+vec2 screenUv(vec3 p){ float t = uLens.z / max(uLens.z - p.z, 1e-4); vec2 s = uLens.xy + (p.xy - uLens.xy) * t; return s / uSize + 0.5; }
+`;
+const screenVert = /* glsl */ `
+${GLSL_COMMON}
+varying vec2 vPic;
+void main(){ vPic = position.xy + 0.5; gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xy * uSize, 0.0, 1.0); }`;
+const screenFrag = /* glsl */ `
+${fragHead}
+${GLSL_COMMON}
+#define PROJ_SAMPLE texture
+${projGlsl}
+varying vec2 vPic;
+void main(){
+  vec3 c = proj(vPic) * uGain;
+  c += (hash12(gl_FragCoord.xy) - 0.5) * 0.006;                       // matte screen grain / dither
+  gl_FragColor = vec4(max(c, 0.0) * uIntensity, uOpacity);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}`;
+const hazeVert = /* glsl */ `
+${GLSL_COMMON}
+attribute float aSurf;
+varying vec3 vP; varying float vSurf;
+void main(){ vP = position; vSurf = aSurf; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`;
+const hazeFrag = /* glsl */ `
+${fragHead}
+${GLSL_COMMON}
+#define PROJ_SAMPLE(t, uv, b) textureLod(t, uv, 2.0 + b)
+${projGlsl}
+varying vec3 vP; varying float vSurf;
+void main(){
+  vec2 uv = screenUv(vP);
+  float t = clamp(1.0 - vP.z / uLens.z, 0.0, 1.0);                   // 0 at the lens, 1 at the screen
+  vec2 e = min(uv, 1.0 - uv);
+  float edge = smoothstep(0.0, 0.06, min(e.x, e.y));
+  float falloff = 1.0 / (0.3 + 3.0 * t * t);
+  float wisps = 0.8 + 0.2 * vnoise(vec2(uv.x * 6.0 + uTime * 0.05, t * 4.0 - uTime * 0.04));
+  vec3 c = (0.65 * proj(clamp(uv, 0.0, 1.0)) + 0.06 * uLampColor * uLamp) * edge * falloff * wisps * uHaze * (vSurf > 0.5 ? 0.12 : 0.22);
+  c *= smoothstep(0.0, 0.08, t) * smoothstep(1.0, 0.97, t);
+  c += (hash12(gl_FragCoord.xy) - 0.5) * 0.003;
+  gl_FragColor = vec4(max(c, 0.0) * uIntensity * uOpacity, 0.0);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}`;
+const dustVert = /* glsl */ `
+${GLSL_COMMON}
+#define PROJ_SAMPLE(t, uv, b) textureLod(t, uv, 1.5 + b)
+${projGlsl}
+attribute vec4 aSeed;
+varying vec3 vCol; varying vec2 vQ;
+void main(){
+  float h = aSeed.w;
+  vec2 uv = aSeed.xy + 0.05 * vec2(sin(uDrift * (0.21 + 0.3 * h) + h * 31.0), cos(uDrift * (0.17 + 0.25 * h) + h * 17.0));
+  float t = fract(aSeed.z + uDrift * 0.01 * (0.5 + h));
+  uv = fract(uv);
+  vec3 S = vec3((uv - 0.5) * uSize, 0.0);
+  vec3 p = mix(uLens, S, 0.08 + 0.9 * t);
+  if (uPointerMode > -0.5 && uPointerMode < 0.5) {                    // stir: swirl about the cursor's ray
+    vec3 a = uLens, b = vec3(uPointer.xy, 0.0); vec3 ab = normalize(b - a);
+    vec3 ap = p - a; vec3 off = ap - ab * dot(ap, ab);
+    float d = length(off);
+    float w = uPointerActive * uPointerStrength * (1.0 - smoothstep(0.0, uPointerRadius * 0.5, d));
+    vec3 sw = cross(ab, off);
+    p += (sw * 1.4 + off * 0.25) * w * (0.7 + 0.3 * sin(uTime * 2.0 + h * 40.0));
+  }
+  vec2 suv = screenUv(p);
+  vec2 e = min(suv, 1.0 - suv);
+  float inside = smoothstep(0.0, 0.03, min(e.x, e.y));
+  float falloff = smoothstep(0.0, 0.35, t) / (0.6 + 2.0 * t * t);
+  vCol = (proj(clamp(suv, 0.0, 1.0)) + 0.05 * uLampColor) * inside * falloff * (0.35 + 0.65 * h) * uDust;
+  vQ = position.xy;
+  vec4 mv = modelViewMatrix * vec4(p, 1.0);
+  mv.xy += position.xy * (0.003 + 0.005 * h);
+  gl_Position = projectionMatrix * mv;
+}`;
+const dustFrag = /* glsl */ `
+${fragHead}
+uniform float uIntensity, uOpacity;
+varying vec3 vCol; varying vec2 vQ;
+void main(){
+  float r = length(vQ); if (r > 1.0) discard;
+  float core = exp(-r * r * 3.5);
+  gl_FragColor = vec4(vCol * core * 0.6 * uIntensity * uOpacity, 0.0);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}`;
+export function build(u, c) {
+    const object = new THREE.Group();
+    const geo = new THREE.PlaneGeometry(1, 1);
+    const screenMat = new THREE.ShaderMaterial({ uniforms: u, vertexShader: screenVert, fragmentShader: screenFrag, glslVersion: THREE.GLSL3 });
+    const screen = new THREE.Mesh(geo, screenMat);
+    screen.frustumCulled = false;
+    // the beam: 4 faces of the pyramid (lens -> screen corners) + 2 slices through its axis, rewritten when the frame / lens move
+    const hazeGeo = new THREE.BufferGeometry();
+    hazeGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(18 * 3), 3));
+    hazeGeo.setAttribute('aSurf', new THREE.BufferAttribute(new Float32Array([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0]), 1));
+    const hazeMat = new THREE.ShaderMaterial({ uniforms: u, vertexShader: hazeVert, fragmentShader: hazeFrag, glslVersion: THREE.GLSL3, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, premultipliedAlpha: true, side: THREE.DoubleSide });
+    const haze = new THREE.Mesh(hazeGeo, hazeMat);
+    haze.frustumCulled = false;
+    haze.renderOrder = 5;
+    haze.raycast = () => { };
+    const n = Math.max(0, c.dustCount | 0), rnd = mulberry32(11);
+    const quad = new THREE.PlaneGeometry(2, 2);
+    const dgeo = new THREE.InstancedBufferGeometry();
+    dgeo.index = quad.index;
+    dgeo.setAttribute('position', quad.attributes.position);
+    const seeds = new Float32Array(Math.max(1, n) * 4);
+    for (let i = 0; i < n * 4; i++)
+        seeds[i] = rnd();
+    dgeo.setAttribute('aSeed', new THREE.InstancedBufferAttribute(seeds, 4));
+    dgeo.instanceCount = n;
+    const dustMat = new THREE.ShaderMaterial({ uniforms: u, vertexShader: dustVert, fragmentShader: dustFrag, glslVersion: THREE.GLSL3, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, premultipliedAlpha: true });
+    const dust = new THREE.Mesh(dgeo, dustMat);
+    dust.frustumCulled = false;
+    dust.renderOrder = 6;
+    dust.raycast = () => { };
+    object.add(screen, haze, dust);
+    const cfg = { ...c };
+    const pic = createPicture(u, cfg);
+    const pst = {};
+    let flickT = 0, last = '';
+    function beam() {
+        const L = u.uLens.value.set(0, cfg.lensHeight, cfg.throw), s = u.uSize.value;
+        const key = `${L.y},${L.z},${s.x},${s.y}`;
+        if (key === last)
+            return;
+        last = key;
+        const hx = s.x / 2, hy = s.y / 2, Lp = [L.x, L.y, L.z];
+        const C = [[-hx, -hy, 0], [hx, -hy, 0], [hx, hy, 0], [-hx, hy, 0]];
+        const tris = [Lp, C[0], C[1], Lp, C[1], C[2], Lp, C[2], C[3], Lp, C[3], C[0], Lp, [0, -hy, 0], [0, hy, 0], Lp, [-hx, 0, 0], [hx, 0, 0]];
+        const a = hazeGeo.attributes.position.array;
+        tris.forEach((p, i) => a.set(p, i * 3));
+        hazeGeo.attributes.position.needsUpdate = true;
+        hazeGeo.computeBoundingSphere();
+    }
+    const api = {
+        object, materials: [screenMat, hazeMat, dustMat],
+        controls: { show: (t) => pic.show(t), get busy() { return pic.busy; }, pic },
+        apply(k) { Object.assign(cfg, k); applyConfig(u, k); },
+        update(dt, pointer) {
+            dt = Math.min(dt, 0.1);
+            u.uTime.value += dt;
+            pic.step(dt);
+            stepPointer(u, pointer, dt, pst);
+            u.uDrift.value += dt * cfg.dustDrift;
+            const p = u.uP.value;
+            // the slide change: focus racks out and back with a small hunt; the carriage moves in the middle
+            const out = Math.pow(Math.sin(Math.PI * p), 1.3);
+            const hunt = cfg.hunt * 0.25 * Math.sin(Math.PI * Math.min(1, Math.max(0, (p - 0.7) / 0.3))) * (p > 0.7 ? 1 : 0);
+            u.uFocus.value = Math.max(0, cfg.defocus * (out + hunt));
+            const g = Math.min(1, Math.max(0, (p - 0.2) / 0.6));
+            u.uGate.value = g * g * (3 - 2 * g);
+            // the lamp: a slow breath, a fine flicker, a slight dip as the carriage moves; the entrance warms it up
+            flickT += dt;
+            const fl = 1 - cfg.flicker * (0.03 * Math.sin(flickT * 23) * Math.sin(flickT * 7.3) + 0.015 * Math.sin(flickT * 1.3)) - cfg.breathe * 0.01 * Math.sin(flickT * 0.5);
+            const warm = u.uHasA.value > 0.5 ? 1 : Math.min(1, p * 1.4);
+            u.uLamp.value = fl * (1 - 0.12 * out) * warm;
+            // hotspot leans toward the cursor
+            const hot = (cfg.pointerMode === 'hotspot' && pointer) ? [pointer.x * 0.25 * cfg.pointerStrength / u.uSize.value.y, pointer.y * 0.25 * cfg.pointerStrength / u.uSize.value.y] : [0, 0];
+            u.uHot.value.x += (hot[0] - u.uHot.value.x) * (1 - Math.exp(-dt * 3));
+            u.uHot.value.y += (hot[1] - u.uHot.value.y) * (1 - Math.exp(-dt * 3));
+            beam();
+        },
+        dispose() { geo.dispose(); hazeGeo.dispose(); quad.dispose(); dgeo.dispose(); screenMat.dispose(); hazeMat.dispose(); dustMat.dispose(); pic.dispose(); },
+    };
+    return api;
+}

package/dist/components/image/core/relief.d.ts

@@ -0,0 +1,111 @@
+import * as THREE from 'three';
+export declare const POINTER_MODES: string[];
+export declare const STRUCTURAL: string[];
+export declare function createUniforms(): {
+    uDepth: {
+        value: number;
+    };
+    uCrest: {
+        value: number;
+    };
+    uSelf: {
+        value: number;
+    };
+    uTexA: {
+        value: any;
+    };
+    uTexB: {
+        value: any;
+    };
+    uFitA: {
+        value: THREE.Vector2;
+    };
+    uFitB: {
+        value: THREE.Vector2;
+    };
+    uP: {
+        value: number;
+    };
+    uHasA: {
+        value: number;
+    };
+    uSeq: {
+        value: number;
+    };
+    uSize: {
+        value: THREE.Vector2;
+    };
+    uTime: {
+        value: number;
+    };
+    uDir: {
+        value: THREE.Vector2;
+    };
+    uSpread: {
+        value: number;
+    };
+    uBlank: {
+        value: THREE.Color;
+    };
+    uIntensity: {
+        value: number;
+    };
+    uOpacity: {
+        value: number;
+    };
+    uBreathe: {
+        value: number;
+    };
+    uPointer: {
+        value: THREE.Vector3;
+    };
+    uPointerVel: {
+        value: THREE.Vector2;
+    };
+    uPointerActive: {
+        value: number;
+    };
+    uPointerMode: {
+        value: number;
+    };
+    uPointerStrength: {
+        value: number;
+    };
+    uPointerRadius: {
+        value: number;
+    };
+    uPointerColor: {
+        value: THREE.Color;
+    };
+};
+export declare function applyConfig(u: any, c: any): void;
+export declare function build(u: any, c: any): {
+    object: THREE.Group<THREE.Object3DEventMap>;
+    materials: any[];
+    controls: {
+        show: (t: any) => void;
+        readonly busy: boolean;
+        pic: {
+            st: {
+                A: any;
+                B: any;
+                aspA: number;
+                aspB: number;
+                p: number;
+                dir: number;
+                pending: any;
+                seq: number;
+                frame: number;
+            };
+            show: (tex: any) => void;
+            jump: (tex: any) => void;
+            step: (dt: any) => void;
+            readonly busy: boolean;
+            dispose(): void;
+        };
+    };
+    apply(k: any): void;
+    update(dt: any, pointer: any): void;
+    dispose(): void;
+};
+//# sourceMappingURL=relief.d.ts.map

package/dist/components/image/core/relief.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relief.d.ts","sourceRoot":"","sources":["../../../../src/components/image/core/relief.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,aAAa,UAAoB,CAAC;AAC/C,eAAO,MAAM,UAAU,UAA0B,CAAC;AAElD,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAE7B;AACD,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAG/B;AA2CD,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBzB"}