@3driseai/3drise-viewer 0.1.40 → 0.1.41

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

@@ -0,0 +1,156 @@
+// GENERATED from the lab (Claude outputs/gallery-lab/image/frost.mjs) by emit_image.mjs — change the lab and re-emit.
+// frost — an image variant (type 'image', config.type 'frost'). Materials: the print is a MeshStandardMaterial,
+// the pane in front of it a MeshPhysicalMaterial with transmission (both lit by the scene; object effects attach).
+//
+// A print behind a pane of real glass, a small gap between them. Frost on the glass is the glass's own
+// roughness: three's transmission samples the scene behind the pane through a blur that grows with roughness, so
+// frosted glass genuinely blurs the print (and anything behind it), refracted through the pane's thickness, and
+// clear glass shows it sharp with the scene's highlights on top. A change is a breath on the glass: frost
+// crystallises in from the edges (a front shaped by distance to the edge and a dendritic ridged-noise field, so it
+// grows in feathers, not a fade), the print changes behind the fully frosted pane, and the frost clears from the
+// centre outward. Idle: a fine rim of frost stays at the edges and breathes. Cursor: `wipe` — a finger wipes the
+// glass clear along its path and it frosts back over a few seconds; `fog` — the cursor breathes frost onto it.
+import * as THREE from 'three';
+import { baseUniforms, applyBase, setU, createPicture, stepPointer, patchMaterial, depthTwin } from './imageCore.js';
+export const POINTER_MODES = ['wipe', 'fog'];
+const TRAIL = 24;
+export const STRUCTURAL = ['imageUrls'];
+export function createUniforms() {
+    return { ...baseUniforms(), uFrost: { value: 0.75 }, uWhite: { value: 0.25 }, uFeather: { value: 0.6 }, uRim: { value: 0.25 }, uSelf: { value: 0.12 },
+        uFrostColor: { value: new THREE.Color('#eef3f8') }, uTrail: { value: Array.from({ length: TRAIL }, () => new THREE.Vector3(0, 0, 99)) }, uRefrost: { value: 3 } };
+}
+export function applyConfig(u, c) {
+    applyBase(u, c, POINTER_MODES);
+    setU(u, 'uFrost', c.frost);
+    setU(u, 'uWhite', c.whiteness);
+    setU(u, 'uFeather', c.feather);
+    setU(u, 'uRim', c.rim);
+    setU(u, 'uSelf', c.selfLight);
+    setU(u, 'uFrostColor', c.frostColor);
+    setU(u, 'uRefrost', c.refrost);
+}
+// ---- the print
+const printPars = /* glsl */ `
+uniform float uSelf; varying vec2 vPic;
+`;
+const printVertex = /* glsl */ `
+  fxP = vec3(position.xy * uSize, 0.0);
+  vPic = position.xy + 0.5;
+`;
+const printDiffuse = /* glsl */ `
+  float sw = smoothstep(0.4, 0.6, uP);                                // behind the fully frosted glass
+  diffuseColor.rgb = mix(picA(vPic), picB(vPic), sw) * uIntensity;
+  diffuseColor.a *= uOpacity;
+`;
+const printEmissive = /* glsl */ `  totalEmissiveRadiance += diffuseColor.rgb * uSelf;\n`;
+// ---- the pane
+const panePars = /* glsl */ `
+uniform float uFrost, uWhite, uFeather, uRim, uRefrost; uniform vec3 uFrostColor; uniform vec3 uTrail[${TRAIL}];
+varying vec2 vPic;
+float ridged(vec2 p){ float s = 0.0, a = 0.5; for (int i = 0; i < 4; i++){ s += a * (1.0 - abs(2.0 * vnoise(p) - 1.0)); p = mat2(1.6, 1.2, -1.2, 1.6) * p + 3.1; a *= 0.5; } return s; }
+// frost coverage 0..1 at uv: a front in 'reach' (edge distance + feathers) driven by the breath of the change
+float frostAt(vec2 uv, out float crystal){
+  vec2 q = (uv - 0.5) * uSize;
+  vec2 hs = 0.5 * uSize;
+  float box = min(hs.x - abs(q.x), hs.y - abs(q.y)) / min(hs.x, hs.y);
+  float oval = 1.0 - length(q / hs);
+  float edge = clamp(mix(box, oval, 0.6), 0.0, 1.0);                          // 0 at the edge, ~1 at the centre (rounded)
+  crystal = ridged(q * 9.0);
+  float reach = edge * 0.8 + uFeather * 0.45 * (crystal - 0.45) + 0.06;
+  float breath = pow(sin(PI * uP), 0.8) * 1.05;
+  float rest = uRim * (0.32 + 0.02 * uBreathe * sin(uTime * 0.6 + q.x));
+  float a = max(breath, rest);
+  float F = smoothstep(reach - 0.05, reach + 0.05, a);
+  // the wiped trail frosts back over uRefrost seconds
+  float wipe = 0.0;
+  if (uPointerMode > -0.5 && uPointerMode < 0.5) {
+    for (int i = 0; i < ${TRAIL}; i++) {
+      vec3 t = uTrail[i];
+      float age = t.z / max(uRefrost, 0.1);
+      if (age < 1.0) { float d = length(q - t.xy) / max(uPointerRadius, 1e-3); wipe = max(wipe, (1.0 - smoothstep(0.55, 1.0, d)) * (1.0 - age * age) * uPointerStrength); }
+    }
+    F *= 1.0 - clamp(wipe, 0.0, 1.0);
+  } else if (uPointerMode > 0.5) F = max(F, smoothstep(0.0, 0.7, pointerBump(q)) * smoothstep(reach - 0.3, reach + 0.1, 0.9));
+  return F;
+}
+`;
+const paneVertex = /* glsl */ `
+  fxP = vec3(position.xy * uSize, 0.0);
+  vPic = position.xy + 0.5;
+`;
+const paneDiffuse = /* glsl */ `
+  float crystal; float F = frostAt(vPic, crystal);
+  diffuseColor.rgb = uFrostColor;
+  diffuseColor.a *= uOpacity;
+`;
+const paneRough = /* glsl */ `
+  { float crystal; float F = frostAt(vPic, crystal);
+    roughnessFactor = mix(0.03, 0.18 + 0.5 * uFrost * (0.75 + 0.35 * crystal), F * uFrost); }
+`;
+const paneNormal = /* glsl */ `
+  { float crystal; float F = frostAt(vPic, crystal);
+    vec2 g = vec2(dFdx(crystal), dFdy(crystal));
+    normal = normalize(normal + vec3(g * 1.2, 0.0) * F * uFeather); }
+`;
+export function build(u, c) {
+    const object = new THREE.Group();
+    const geo = new THREE.PlaneGeometry(1, 1, 1, 1);
+    // print
+    const PP = { key: 'frost-print', uniforms: u, pars: printPars, vertex: printVertex, diffuse: printDiffuse, emissive: printEmissive };
+    const printMat = patchMaterial(new THREE.MeshStandardMaterial({ roughness: 0.7 }), PP);
+    const print = new THREE.Mesh(geo, printMat);
+    print.castShadow = true;
+    print.receiveShadow = true;
+    print.frustumCulled = false;
+    print.customDepthMaterial = depthTwin(PP);
+    // pane: transmission (the frost is its roughness); the frost's white scatter lowers transmission where it lies
+    const PG = { key: 'frost-pane', uniforms: u, pars: panePars, vertex: paneVertex, diffuse: paneDiffuse, roughness: paneRough, normalFrag: paneNormal };
+    const paneMat = patchMaterial(new THREE.MeshPhysicalMaterial({ transmission: 1, thickness: 0.03, ior: 1.5, roughness: 0.05, metalness: 0, specularIntensity: 1 }), PG);
+    const own = paneMat.onBeforeCompile;
+    paneMat.onBeforeCompile = (sh, r) => {
+        own(sh, r);
+        sh.fragmentShader = sh.fragmentShader.replace('#include <transmission_fragment>', THREE.ShaderChunk.transmission_fragment.replace('material.transmission = transmission;', 'float crystalT; float FT = frostAt(vPic, crystalT);\n\tmaterial.transmission = transmission * (1.0 - uWhite * 0.75 * FT * uFrost * (0.7 + 0.3 * crystalT));'));
+    };
+    const pane = new THREE.Mesh(geo, paneMat);
+    pane.frustumCulled = false;
+    pane.renderOrder = 2;
+    object.add(print, pane);
+    const cfg = { ...c };
+    const pic = createPicture(u, cfg);
+    const pst = {}, trail = u.uTrail.value;
+    let trailHead = 0, trailT = 0, last = null;
+    const api = {
+        object, materials: [printMat, paneMat],
+        controls: { show: (t) => pic.show(t), get busy() { return pic.busy; }, pic },
+        apply(k) { Object.assign(cfg, k); applyConfig(u, k); if (k.opacity !== undefined) {
+            printMat.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);
+            pane.position.z = cfg.gap;
+            for (const t of trail)
+                t.z += dt;
+            trailT += dt;
+            if (pointer && cfg.pointerMode === 'wipe') {
+                const moved = !last || Math.hypot(pointer.x - last.x, pointer.y - last.y) > 0.025;
+                if (moved && trailT > 0.016) {
+                    trail[trailHead].set(pointer.x, pointer.y, 0);
+                    trailHead = (trailHead + 1) % TRAIL;
+                    trailT = 0;
+                    last = { x: pointer.x, y: pointer.y };
+                }
+                else {
+                    const prevI = (trailHead - 1 + TRAIL) % TRAIL;
+                    trail[prevI].z = Math.min(trail[prevI].z, 0);
+                } // resting finger keeps its spot clear
+            }
+            else
+                last = null;
+        },
+        dispose() { geo.dispose(); printMat.dispose(); paneMat.dispose(); print.customDepthMaterial.dispose(); pic.dispose(); },
+    };
+    return api;
+}

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

@@ -0,0 +1,110 @@
+import * as THREE from 'three';
+export declare const WIDTH = 2;
+export declare const col: (c: any) => THREE.Color;
+export declare const clamp01: (x: any) => number;
+export declare const smooth: (x: any) => number;
+export declare function mulberry32(a: any): () => number;
+export declare function blankTexture(hex?: string): THREE.DataTexture;
+export declare const aspectOf: (tex: any) => number;
+/** The uniforms every variant has (picture, change, pointer, look). */
+export declare function baseUniforms(): {
+    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;
+    };
+};
+/** Write one config value into a uniform (colours accept a hex string or a THREE.Color). */
+export declare function setU(u: any, k: any, v: any): void;
+/** The shared part of the one door: every variant's applyConfig starts here. */
+export declare function applyBase(u: any, c: any, modes: any): void;
+/** The picture state machine (see the header). `cfg` is read live (duration, aspect). */
+export declare function createPicture(u: any, cfg: any): {
+    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;
+};
+/** cover-fit: uv' = 0.5 + (uv - 0.5) * s, s <= 1 on the axis that overflows. */
+export declare function fit(texAspect: any, frameAspect: any, out: any): void;
+/** Pointer in the image's own plane (lab: the stage gives {x, y} on z = 0), with a smoothed velocity and an eased presence. */
+export declare function stepPointer(u: any, pointer: any, dt: any, st: any): void;
+export declare const GLSL_COMMON = "\n#ifndef PI\n#define PI 3.141592653589793\n#endif\nuniform sampler2D uTexA, uTexB; uniform vec2 uFitA, uFitB, uSize, uDir;\nuniform float uP, uHasA, uSeq, uTime, uSpread, uIntensity, uOpacity, uBreathe;\nuniform vec3 uBlank;\nuniform vec3 uPointer; uniform vec2 uPointerVel; uniform float uPointerActive, uPointerMode, uPointerStrength, uPointerRadius; uniform vec3 uPointerColor;\nvec2 fitA(vec2 uv){ return 0.5 + (uv - 0.5) * uFitA; }\nvec2 fitB(vec2 uv){ return 0.5 + (uv - 0.5) * uFitB; }\nvec3 picA(vec2 uv){ return mix(uBlank, texture(uTexA, fitA(uv)).rgb, uHasA); }\nvec3 picB(vec2 uv){ return texture(uTexB, fitB(uv)).rgb; }\nvec3 picAL(vec2 uv, float lod){ return mix(uBlank, textureLod(uTexA, fitA(uv), lod).rgb, uHasA); }\nvec3 picBL(vec2 uv, float lod){ return textureLod(uTexB, fitB(uv), lod).rgb; }\nfloat luma(vec3 c){ return dot(c, vec3(0.2126, 0.7152, 0.0722)); }\nfloat hash12(vec2 p){ vec3 p3 = fract(vec3(p.xyx) * 0.1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); }\nfloat vnoise(vec2 p){ vec2 i = floor(p), f = fract(p); vec2 w = f * f * (3.0 - 2.0 * f);\n  return mix(mix(hash12(i), hash12(i + vec2(1, 0)), w.x), mix(hash12(i + vec2(0, 1)), hash12(i + vec2(1, 1)), w.x), w.y); }\nfloat fbm(vec2 p){ float s = 0.0, a = 0.5; for (int i = 0; i < 4; i++){ s += a * vnoise(p); p = p * 2.03 + 17.1; a *= 0.5; } return s; }\n// the travelling front: 0 where the change starts, 1 where it ends (sweep along uDir across the frame, softly warped)\nfloat frontField(vec2 uv){\n  vec2 q = (uv - 0.5) * uSize;\n  float ext = 0.5 * (abs(uDir.x) * uSize.x + abs(uDir.y) * uSize.y);\n  float f = 0.5 + 0.5 * dot(q, uDir) / ext;\n  return clamp(f + 0.05 * (vnoise(uv * 3.0 + 7.0) - 0.5), 0.0, 1.0);\n}\n// local progress of the change at uv (0 = still A, 1 = already B); reversible because it is a pure function of uP\nfloat localP(vec2 uv){ return clamp((uP * (1.0 + uSpread) - frontField(uv)) / uSpread, 0.0, 1.0); }\nfloat sstep(float x){ return x * x * (3.0 - 2.0 * x); }\n// pointer bump in plane units (0 outside the radius)\nfloat pointerBump(vec2 xy){ float d = length(xy - uPointer.xy) / max(uPointerRadius, 1e-3); float b = max(0.0, 1.0 - d * d); return b * b * uPointerActive * uPointerStrength; }\n";
+export declare function patchMaterial(mat: any, P: any): any;
+/** The shadow twin of a patched material: the same vertex code (and an optional discard), so shadows follow the shape. */
+export declare function depthTwin(P: any): any;
+export declare const fragHead = "\n    layout(location = 0) out highp vec4 pc_fragColor;\n    #define gl_FragColor pc_fragColor\n";
+//# sourceMappingURL=imageCore.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"imageCore.d.ts","sourceRoot":"","sources":["../../../../src/components/image/core/imageCore.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,KAAK,IAAI,CAAC;AACvB,eAAO,MAAM,GAAG,GAAI,MAAC,gBAAuB,CAAC;AAC7C,eAAO,MAAM,OAAO,GAAI,MAAC,WAAgC,CAAC;AAC1D,eAAO,MAAM,MAAM,GAAI,MAAC,WAAoD,CAAC;AAC7E,wBAAgB,UAAU,CAAC,CAAC,KAAA,gBAAuM;AAEnO,wBAAgB,YAAY,CAAC,GAAG,SAAY,qBAK3C;AACD,eAAO,MAAM,QAAQ,GAAI,QAAG,WAAuI,CAAC;AAEpK,uEAAuE;AACvE,wBAAgB,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAY3B;AACD,4FAA4F;AAC5F,wBAAgB,IAAI,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,EAAE,CAAC,KAAA,QAA6J;AACzL,gFAAgF;AAChF,wBAAgB,SAAS,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,EAAE,KAAK,KAAA,QAMpC;AAED,yFAAyF;AACzF,wBAAgB,aAAa,CAAC,CAAC,KAAA,EAAE,GAAG,KAAA;;;;;;;;;;;;;;;;;EAsCnC;AACD,gFAAgF;AAChF,wBAAgB,GAAG,CAAC,SAAS,KAAA,EAAE,WAAW,KAAA,EAAE,GAAG,KAAA,QAAiH;AAEhK,+HAA+H;AAC/H,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,OAAO,KAAA,EAAE,EAAE,KAAA,EAAE,EAAE,KAAA,QAU7C;AAGD,eAAO,MAAM,WAAW,usEA+BvB,CAAC;AAaF,wBAAgB,aAAa,CAAC,GAAG,KAAA,EAAE,CAAC,KAAA,OAoBnC;AACD,0HAA0H;AAC1H,wBAAgB,SAAS,CAAC,CAAC,KAAA,OAG1B;AAED,eAAO,MAAM,QAAQ,qGAGpB,CAAC"}

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

@@ -0,0 +1,269 @@
+// GENERATED from the lab (Claude outputs/gallery-lab/image/imageCommon.mjs) by emit_image.mjs — change the lab and re-emit.
+// imageCommon — the shared core of the image-object variants (lab).
+//
+// An image variant shows ONE picture, 2 units wide, the height from the picture's aspect. A change of picture is
+// a progress p 0 -> 1 between the outgoing picture A and the incoming B (the variant keeps A itself). The rules
+// the state machine enforces for every variant:
+//   - continuous: every uniform a shader reads is continuous in time; at p = 0 a variant shows exactly A, at
+//     p = 1 exactly B, at rest (p = 1, A == B) nothing is left over;
+//   - reversible half-way: asking for the outgoing picture mid-change runs p backwards; asking for anything else
+//     mid-change queues it (the newest wins) and it plays when the current change lands;
+//   - the first picture plays the variant's own entrance (A = blank, uHasA = 0);
+//   - the frame's aspect eases from A's to B's with the change (`aspect` > 0 pins it).
+// `uSeq` counts completed changes so a variant whose rest state accumulates (prisms turning a third each time)
+// stays continuous: its rest angle is (uSeq + p).
+import * as THREE from 'three';
+export const WIDTH = 2;
+export const col = (c) => new THREE.Color(c);
+export const clamp01 = (x) => Math.min(1, Math.max(0, x));
+export const smooth = (x) => { x = clamp01(x); return x * x * (3 - 2 * x); };
+export function mulberry32(a) { return function () { a |= 0; a = (a + 0x6D2B79F5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; }
+export function blankTexture(hex = '#0e1016') {
+    const c = new THREE.Color(hex);
+    const t = new THREE.DataTexture(new Uint8Array([c.r * 255, c.g * 255, c.b * 255, 255]), 1, 1);
+    t.colorSpace = THREE.SRGBColorSpace;
+    t.needsUpdate = true;
+    return t;
+}
+export const aspectOf = (tex) => { const im = tex?.image; const w = im?.width || im?.naturalWidth || 16, h = im?.height || im?.naturalHeight || 10; return w / h; };
+/** The uniforms every variant has (picture, change, pointer, look). */
+export function baseUniforms() {
+    return {
+        uTexA: { value: null }, uTexB: { value: null },
+        uFitA: { value: new THREE.Vector2(1, 1) }, uFitB: { value: new THREE.Vector2(1, 1) },
+        uP: { value: 1 }, uHasA: { value: 0 }, uSeq: { value: 0 },
+        uSize: { value: new THREE.Vector2(2, 1.25) }, uTime: { value: 0 },
+        uDir: { value: new THREE.Vector2(1, 0) }, uSpread: { value: 0.5 },
+        uBlank: { value: col('#0e1016') },
+        uIntensity: { value: 1 }, uOpacity: { value: 1 }, uBreathe: { value: 0.5 },
+        uPointer: { value: new THREE.Vector3() }, uPointerVel: { value: new THREE.Vector2() }, uPointerActive: { value: 0 },
+        uPointerMode: { value: -1 }, uPointerStrength: { value: 1 }, uPointerRadius: { value: 0.6 }, uPointerColor: { value: col('#9ad7ff') },
+    };
+}
+/** Write one config value into a uniform (colours accept a hex string or a THREE.Color). */
+export function setU(u, k, v) { if (v === undefined)
+    return; const o = u[k]; if (o.value && o.value.isColor) {
+    if (v.isColor)
+        o.value.copy(v);
+    else
+        o.value.set(v);
+}
+else
+    o.value = v; }
+/** The shared part of the one door: every variant's applyConfig starts here. */
+export function applyBase(u, c, modes) {
+    const set = (k, v) => setU(u, k, v);
+    set('uIntensity', c.intensity);
+    set('uOpacity', c.opacity);
+    set('uBreathe', c.breathe);
+    set('uSpread', c.spread !== undefined ? Math.max(0.05, c.spread) : undefined);
+    set('uPointerStrength', c.pointerStrength);
+    set('uPointerRadius', c.pointerRadius);
+    set('uPointerColor', c.pointerColor);
+    if (c.sweepAngle !== undefined) {
+        const a = c.sweepAngle * Math.PI / 180;
+        u.uDir.value.set(Math.cos(a), Math.sin(a));
+    }
+    if (c.pointerMode !== undefined)
+        u.uPointerMode.value = modes.indexOf(c.pointerMode);
+}
+/** The picture state machine (see the header). `cfg` is read live (duration, aspect). */
+export function createPicture(u, cfg) {
+    const blank = blankTexture();
+    const st = { A: null, B: null, aspA: 1.6, aspB: 1.6, p: 0, dir: 0, pending: null, seq: 0, frame: 1.6 };
+    u.uTexA.value = blank;
+    u.uTexB.value = blank;
+    u.uP.value = 0;
+    function bind() {
+        u.uTexA.value = st.A || blank;
+        u.uTexB.value = st.B || blank;
+        u.uHasA.value = st.A ? 1 : 0;
+        u.uSeq.value = st.seq;
+    }
+    function begin(tex) { st.A = st.B; st.aspA = st.aspB; st.B = tex; st.aspB = aspectOf(tex); st.p = 0; st.dir = 1; st.seq += 1; bind(); }
+    function show(tex) {
+        if (!tex)
+            return;
+        if (!st.B) {
+            st.A = null;
+            st.B = tex;
+            st.aspA = st.aspB = aspectOf(tex);
+            st.p = 0;
+            st.dir = 1;
+            bind();
+            return;
+        } // entrance
+        if (st.dir === 0) {
+            if (tex !== st.B)
+                begin(tex);
+            return;
+        }
+        if (st.dir > 0 && st.A && tex === st.A) {
+            st.dir = -1;
+            st.pending = null;
+            return;
+        } // back half-way
+        if (st.dir < 0 && tex === st.B) {
+            st.dir = 1;
+            st.pending = null;
+            return;
+        } // forward again
+        if (st.dir > 0 && tex === st.B) {
+            st.pending = null;
+            return;
+        }
+        st.pending = tex; // the newest wins
+    }
+    function step(dt) {
+        if (st.dir) {
+            st.p += st.dir * dt / Math.max(0.05, cfg.duration ?? 1.6);
+            if (st.p >= 1) {
+                st.p = 1;
+                st.dir = 0;
+                st.A = st.B;
+                st.aspA = st.aspB;
+                bind();
+                flush();
+            }
+            else if (st.p <= 0) {
+                st.dir = 0;
+                if (st.A) {
+                    st.B = st.A;
+                    st.aspB = st.aspA;
+                    st.p = 1;
+                    st.seq -= 1;
+                }
+                else {
+                    st.B = null;
+                    st.p = 0;
+                } // reversed entrance: back to nothing
+                bind();
+                flush();
+            }
+        }
+        u.uP.value = st.p;
+        // the frame's aspect eases with the change; each picture is cover-fitted into it
+        const e = st.p * st.p * (3 - 2 * st.p);
+        st.frame = (cfg.aspect > 0) ? cfg.aspect : st.aspA + (st.aspB - st.aspA) * e;
+        u.uSize.value.set(WIDTH, WIDTH / st.frame);
+        fit(st.aspA, st.frame, u.uFitA.value);
+        fit(st.aspB, st.frame, u.uFitB.value);
+    }
+    /** Show a picture at rest with no change (a rebuild landing on the current picture). */
+    function jump(tex) { if (!tex)
+        return; st.A = st.B = tex; st.aspA = st.aspB = aspectOf(tex); st.p = 1; st.dir = 0; st.pending = null; bind(); step(0); }
+    function flush() { if (st.pending) {
+        const t = st.pending;
+        st.pending = null;
+        show(t);
+    } }
+    return { st, show, jump, step, get busy() { return st.dir !== 0; }, dispose() { blank.dispose(); } };
+}
+/** cover-fit: uv' = 0.5 + (uv - 0.5) * s, s <= 1 on the axis that overflows. */
+export function fit(texAspect, frameAspect, out) { if (texAspect > frameAspect)
+    out.set(frameAspect / texAspect, 1);
+else
+    out.set(1, texAspect / frameAspect); }
+/** Pointer in the image's own plane (lab: the stage gives {x, y} on z = 0), with a smoothed velocity and an eased presence. */
+export function stepPointer(u, pointer, dt, st) {
+    const k = 1 - Math.exp(-dt * 8);
+    if (pointer) {
+        const px = pointer.x, py = pointer.y;
+        if (st.had) {
+            const vx = (px - st.x) / Math.max(dt, 1e-3), vy = (py - st.y) / Math.max(dt, 1e-3);
+            u.uPointerVel.value.x += (Math.max(-6, Math.min(6, vx)) - u.uPointerVel.value.x) * k;
+            u.uPointerVel.value.y += (Math.max(-6, Math.min(6, vy)) - u.uPointerVel.value.y) * k;
+        }
+        st.x = px;
+        st.y = py;
+        st.had = true;
+        st.idle = 0;
+        u.uPointer.value.set(px, py, 0);
+    }
+    else {
+        st.had = false;
+        u.uPointerVel.value.multiplyScalar(1 - k);
+    }
+    const on = pointer && u.uPointerMode.value >= 0 ? 1 : 0;
+    u.uPointerActive.value += (on - u.uPointerActive.value) * (1 - Math.exp(-dt * (on ? 7 : 2.5)));
+}
+// ---------------------------------------------------------------- GLSL shared by every variant
+export const GLSL_COMMON = /* glsl */ `
+#ifndef PI
+#define PI 3.141592653589793
+#endif
+uniform sampler2D uTexA, uTexB; uniform vec2 uFitA, uFitB, uSize, uDir;
+uniform float uP, uHasA, uSeq, uTime, uSpread, uIntensity, uOpacity, uBreathe;
+uniform vec3 uBlank;
+uniform vec3 uPointer; uniform vec2 uPointerVel; uniform float uPointerActive, uPointerMode, uPointerStrength, uPointerRadius; uniform vec3 uPointerColor;
+vec2 fitA(vec2 uv){ return 0.5 + (uv - 0.5) * uFitA; }
+vec2 fitB(vec2 uv){ return 0.5 + (uv - 0.5) * uFitB; }
+vec3 picA(vec2 uv){ return mix(uBlank, texture(uTexA, fitA(uv)).rgb, uHasA); }
+vec3 picB(vec2 uv){ return texture(uTexB, fitB(uv)).rgb; }
+vec3 picAL(vec2 uv, float lod){ return mix(uBlank, textureLod(uTexA, fitA(uv), lod).rgb, uHasA); }
+vec3 picBL(vec2 uv, float lod){ return textureLod(uTexB, fitB(uv), lod).rgb; }
+float luma(vec3 c){ return dot(c, vec3(0.2126, 0.7152, 0.0722)); }
+float hash12(vec2 p){ vec3 p3 = fract(vec3(p.xyx) * 0.1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); }
+float vnoise(vec2 p){ vec2 i = floor(p), f = fract(p); vec2 w = f * f * (3.0 - 2.0 * f);
+  return mix(mix(hash12(i), hash12(i + vec2(1, 0)), w.x), mix(hash12(i + vec2(0, 1)), hash12(i + vec2(1, 1)), w.x), w.y); }
+float fbm(vec2 p){ float s = 0.0, a = 0.5; for (int i = 0; i < 4; i++){ s += a * vnoise(p); p = p * 2.03 + 17.1; a *= 0.5; } return s; }
+// the travelling front: 0 where the change starts, 1 where it ends (sweep along uDir across the frame, softly warped)
+float frontField(vec2 uv){
+  vec2 q = (uv - 0.5) * uSize;
+  float ext = 0.5 * (abs(uDir.x) * uSize.x + abs(uDir.y) * uSize.y);
+  float f = 0.5 + 0.5 * dot(q, uDir) / ext;
+  return clamp(f + 0.05 * (vnoise(uv * 3.0 + 7.0) - 0.5), 0.0, 1.0);
+}
+// local progress of the change at uv (0 = still A, 1 = already B); reversible because it is a pure function of uP
+float localP(vec2 uv){ return clamp((uP * (1.0 + uSpread) - frontField(uv)) / uSpread, 0.0, 1.0); }
+float sstep(float x){ return x * x * (3.0 - 2.0 * x); }
+// pointer bump in plane units (0 outside the radius)
+float pointerBump(vec2 xy){ float d = length(xy - uPointer.xy) / max(uPointerRadius, 1e-3); float b = max(0.0, 1.0 - d * d); return b * b * uPointerActive * uPointerStrength; }
+`;
+/**
+ * GLSL injected into a three.js built-in material (Standard / Physical / Depth) through onBeforeCompile, keeping
+ * every built-in anchor in place so the object-effect layers can still attach on top.
+ *   vertex   : runs at the top of main() with `vec3 fxP = position; vec3 fxN = normal;` in scope — rewrite them
+ *   diffuse  : replaces map_fragment — set `diffuseColor.rgb` (and may discard)
+ *   normalFrag / roughness / emissive / clearcoatNormal : after the matching built-in chunk
+ */
+// begin_vertex with our position, keeping the anchor text (as a comment the include pass ignores) so an object-effect
+// layer that splices "after begin_vertex" still lands after our displacement and can move it further.
+const BEGIN_VERTEX = 'vec3 transformed = fxP;\n#ifdef USE_ALPHAHASH\n\tvPosition = vec3( position );\n#endif\n// #include <begin_vertex>';
+const BEGIN_NORMAL = 'vec3 objectNormal = fxN;\n#ifdef USE_TANGENT\n\tvec3 objectTangent = vec3( tangent.xyz );\n#endif\n// #include <beginnormal_vertex>';
+export function patchMaterial(mat, P) {
+    mat.onBeforeCompile = (sh) => {
+        Object.assign(sh.uniforms, P.uniforms);
+        sh.vertexShader = sh.vertexShader
+            .replace('#include <common>', '#include <common>\n' + GLSL_COMMON + (P.pars || '') + (P.vertexPars || ''));
+        const pre = `vec3 fxP = position; vec3 fxN = normal;\n${P.vertex || ''}\n`;
+        sh.vertexShader = sh.vertexShader
+            .replace('void main() {', 'void main() {\n' + pre)
+            .replace('#include <beginnormal_vertex>', BEGIN_NORMAL)
+            .replace('#include <begin_vertex>', BEGIN_VERTEX);
+        sh.fragmentShader = sh.fragmentShader.replace('#include <common>', '#include <common>\n' + GLSL_COMMON + (P.pars || '') + (P.fragmentPars || ''));
+        if (P.depthFrag && sh.fragmentShader.includes('#include <clipping_planes_fragment>'))
+            sh.fragmentShader = sh.fragmentShader.replace('#include <clipping_planes_fragment>', '#include <clipping_planes_fragment>\n' + P.depthFrag);
+        if (P.diffuse)
+            sh.fragmentShader = sh.fragmentShader.replace('#include <map_fragment>', P.diffuse);
+        if (P.roughness)
+            sh.fragmentShader = sh.fragmentShader.replace('#include <metalnessmap_fragment>', '#include <metalnessmap_fragment>\n' + P.roughness);
+        if (P.normalFrag)
+            sh.fragmentShader = sh.fragmentShader.replace('#include <normal_fragment_maps>', '#include <normal_fragment_maps>\n' + P.normalFrag);
+        if (P.clearcoatNormal)
+            sh.fragmentShader = sh.fragmentShader.replace('#include <clearcoat_normal_fragment_maps>', '#include <clearcoat_normal_fragment_maps>\n' + P.clearcoatNormal);
+        if (P.emissive)
+            sh.fragmentShader = sh.fragmentShader.replace('#include <emissivemap_fragment>', '#include <emissivemap_fragment>\n' + P.emissive);
+    };
+    mat.customProgramCacheKey = () => 'image-' + P.key;
+    return mat;
+}
+/** The shadow twin of a patched material: the same vertex code (and an optional discard), so shadows follow the shape. */
+export function depthTwin(P) {
+    const m = new THREE.MeshDepthMaterial({ depthPacking: THREE.RGBADepthPacking });
+    return patchMaterial(m, { key: P.key + '-depth', uniforms: P.uniforms, pars: P.pars, vertexPars: P.vertexPars, fragmentPars: P.fragmentPars, vertex: P.vertex, depthFrag: P.depthDiscard || '' });
+}
+export const fragHead = /* glsl */ `
+    layout(location = 0) out highp vec4 pc_fragColor;
+    #define gl_FragColor pc_fragColor
+`;

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

@@ -0,0 +1,129 @@
+import * as THREE from 'three';
+export declare const POINTER_MODES: string[];
+export declare const STRUCTURAL: string[];
+export declare function createUniforms(): {
+    uLenses: {
+        value: number;
+    };
+    uThick: {
+        value: number;
+    };
+    uSharp: {
+        value: number;
+    };
+    uGhost: {
+        value: number;
+    };
+    uRidge: {
+        value: number;
+    };
+    uSelf: {
+        value: number;
+    };
+    uTexP: {
+        value: any;
+    };
+    uFitP: {
+        value: THREE.Vector2;
+    };
+    uHasP: {
+        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=lenticular.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lenticular.d.ts","sourceRoot":"","sources":["../../../../src/components/image/core/lenticular.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,aAAa,UAAmB,CAAC;AAC9C,eAAO,MAAM,UAAU,UAAgB,CAAC;AAExC,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG7B;AACD,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAG/B;AA4DD,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBzB"}