@3driseai/3drise-viewer 0.1.40 → 0.1.41

package/dist/components/gallery/kit/feeds.js

@@ -0,0 +1,83 @@
+import { texturesManager } from '@3driseai/3drise-core';
+function findIn(scene, id) {
+    let found = null;
+    scene.traverse((o) => { if (!found && o.userData?.id === id)
+        found = o; });
+    return found;
+}
+function attached(o, scene) {
+    let p = o;
+    while (p) {
+        if (p === scene)
+            return true;
+        p = p.parent;
+    }
+    return false;
+}
+/** The target's own door: an image object's feedImage, else the first mesh material with a map slot. */
+function doorOf(obj) {
+    let feed;
+    let mesh;
+    obj.traverse((c) => {
+        if (!feed && typeof c.userData?.feedImage === 'function')
+            feed = c.userData.feedImage;
+        const m = c.material;
+        if (!mesh && m && !Array.isArray(m) && 'map' in m)
+            mesh = c;
+    });
+    return feed ? { feed } : mesh ? { mesh } : null;
+}
+const loadTexture = (url) => texturesManager.loadTexture(url.split('/').pop()?.split('.')[0] || `feed-${Date.now()}`, url, 'images');
+export function createFeeds(scene) {
+    const fed = new Map();
+    const send = (id, url) => {
+        let f = fed.get(id);
+        if (f && !attached(f.obj, scene)) {
+            fed.delete(id);
+            f = undefined;
+        } // the target remounted: start over
+        if (f && f.url === url)
+            return;
+        const obj = f?.obj ?? findIn(scene, id);
+        if (!obj)
+            return;
+        const door = doorOf(obj);
+        if (!door)
+            return;
+        if (door.feed) {
+            door.feed(url);
+            if (!f)
+                fed.set(id, { obj, url, release: () => door.feed(null) });
+            else
+                f.url = url;
+            return;
+        }
+        const mesh = door.mesh, mat = mesh.material;
+        if (!f) {
+            const own = mat.map;
+            fed.set(id, { obj, url, release: () => { mat.map = own; mat.needsUpdate = true; } });
+        }
+        else
+            f.url = url;
+        loadTexture(url).then((t) => { if (fed.get(id)?.url === url) {
+            mat.map = t;
+            mat.needsUpdate = true;
+        } }).catch(() => { });
+    };
+    return {
+        /** Bring every target in line: `ids` fed with `url` (null = no picture: release them all). */
+        sync(ids, url) {
+            const want = new Set(url ? ids : []);
+            for (const [id, f] of fed)
+                if (!want.has(id)) {
+                    f.release();
+                    fed.delete(id);
+                }
+            if (url)
+                for (const id of want)
+                    send(id, url);
+        },
+        dispose() { for (const f of fed.values())
+            f.release(); fed.clear(); },
+    };
+}

package/dist/components/gallery/kit/galleryKit.d.ts

@@ -0,0 +1,118 @@
+import * as THREE from 'three';
+export declare const fragHead = "\n    layout(location = 0) out highp vec4 pc_fragColor;\n    #define gl_FragColor pc_fragColor\n";
+export declare const col: (c: any) => THREE.Color;
+export declare const smooth: (a: any, b: any, x: any) => number;
+export declare function mulberry32(a: any): () => number;
+export declare const wrap: (d: any, n: any) => any;
+/** The scroll: one float index on a damped spring; drag moves it, release throws, then it snaps. */
+export declare function createScroll(cfg: any, onChange: any): {
+    st: {
+        s: number;
+        v: number;
+        target: number;
+        dragging: boolean;
+        dragS0: number;
+        dragX0: number;
+        lastDx: number;
+        count: number;
+        autoT: number;
+        pitch: number;
+    };
+    controls: {
+        next(): void;
+        prev(): void;
+        goTo(i: any): void;
+        jump(i: any): void;
+        readonly index: number;
+        readonly count: number;
+        readonly busy: boolean;
+        dragBegin(x: any): void;
+        dragMove(x: any): void;
+        dragEnd(dt: any): void;
+        readonly dragging: boolean;
+        hover(): void;
+    };
+    step: (dt: any, pointer: any) => void;
+};
+/** Focus of item i at scroll s: 1 at the front, 0 a full step away (continuous in s, never switches). */
+export declare const focusAt: (i: any, s: any, n: any) => number;
+/** Move `value` toward `target` at a constant rate (1 / seconds): a sweep that can reverse half-way, never jumps. */
+export declare const approach: (value: any, target: any, dt: any, seconds: any) => number;
+/** Colours blended by the items' focus, so a light follows the row without jumping. */
+export declare function blendByFocus(colors: any, s: any, n: any, out: any): number;
+/** One texture per picture, cut out of the array (for the standard, scene-lit materials). Returns [textures, average colours]. */
+export declare function sliceTextures(tex: any, count: any): any[][];
+/**
+ * The lean (every gallery): the whole gallery turns a little toward the cursor about its vertical axis and eases
+ * back when it leaves — the interaction of Halo. Wraps a built gallery: its content moves into a rig that turns;
+ * `lean` (config) is the strength, 0 = off. Pointer: { nx } in NDC (-1..1), or a plane x as a fallback.
+ */
+export declare function withLean(api: any, c: any): any;
+export declare const LAYOUTS: string[];
+export declare const LAYOUT_NAMES: {
+    row: string;
+    wave: string;
+    ring: string;
+    helix: string;
+    tunnel: string;
+    stack: string;
+    fan: string;
+    constellation: string;
+};
+export declare const LAYOUT_HINTS: {
+    row: string;
+    wave: string;
+    ring: string;
+    helix: string;
+    tunnel: string;
+    stack: string;
+    fan: string;
+    constellation: string;
+};
+/** What `shape` does on each layout (one knob, its meaning per layout). */
+export declare const SHAPE_HINTS: {
+    row: string;
+    wave: string;
+    ring: string;
+    helix: string;
+    tunnel: string;
+    stack: string;
+    fan: string;
+    constellation: string;
+};
+export declare const LAYOUT_KEYS: string[];
+export declare const LAYOUT_GUI: ({
+    key: string;
+    options: string[];
+    tip: string;
+    min?: undefined;
+    max?: undefined;
+    step?: undefined;
+} | {
+    key: string;
+    min: number;
+    max: number;
+    step: number;
+    tip: string;
+    options?: undefined;
+})[];
+export declare const MAX_PICTURES = 32;
+export declare function createLayout(W: any, H: any): {
+    place: (i: any, s: any, n: any, c: any, m: any) => {
+        d: any;
+        focus: number;
+        fade: number;
+    };
+};
+/** For the shader looks: one matrix per picture; its last element (normally 1) carries the fade, to keep the
+ *  vertex uniforms small (32 mat4 = 128 vectors). */
+export declare function layoutUniforms(): {
+    uPlace: {
+        value: THREE.Matrix4[];
+    };
+};
+/** Fill uPlace for n pictures at scroll s. */
+export declare function fillLayout(layout: any, u: any, s: any, n: any, c: any): void;
+/** GLSL: declarations the shader looks include. */
+export declare const layoutGlsl = "\n    uniform mat4 uPlace[32];\n    vec3 placeAt(float img, vec3 local){ mat4 M = uPlace[int(img + 0.5)]; M[3][3] = 1.0; return (M * vec4(local, 1.0)).xyz; }\n    float fadeAt(float img){ return uPlace[int(img + 0.5)][3][3]; }\n";
+//# sourceMappingURL=galleryKit.d.ts.map

package/dist/components/gallery/kit/galleryKit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"galleryKit.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/kit/galleryKit.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,QAAQ,qGAGpB,CAAC;AACF,eAAO,MAAM,GAAG,GAAI,MAAC,gBAAuB,CAAC;AAC7C,eAAO,MAAM,MAAM,GAAI,MAAC,EAAE,MAAC,EAAE,MAAC,WAA2F,CAAC;AAC1H,wBAAgB,UAAU,CAAC,CAAC,KAAA,gBAAuM;AACnO,eAAO,MAAM,IAAI,GAAI,MAAC,EAAE,MAAC,QAAoD,CAAC;AAG9E,oGAAoG;AACpG,wBAAgB,YAAY,CAAC,GAAG,KAAA,EAAE,QAAQ,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqBzC;AAED,yGAAyG;AACzG,eAAO,MAAM,OAAO,GAAI,MAAC,EAAE,MAAC,EAAE,MAAC,WAA+C,CAAC;AAC/E,qHAAqH;AACrH,eAAO,MAAM,QAAQ,GAAI,UAAK,EAAE,WAAM,EAAE,OAAE,EAAE,YAAO,WAA4I,CAAC;AAChM,uFAAuF;AACvF,wBAAgB,YAAY,CAAC,MAAM,KAAA,EAAE,CAAC,KAAA,EAAE,CAAC,KAAA,EAAE,GAAG,KAAA,UAA2Q;AAEzT,kIAAkI;AAClI,wBAAgB,aAAa,CAAC,GAAG,KAAA,EAAE,KAAK,KAAA,WAOvC;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,GAAG,KAAA,EAAE,CAAC,KAAA,OAe9B;AAWD,eAAO,MAAM,OAAO,UAA8E,CAAC;AACnG,eAAO,MAAM,YAAY;;;;;;;;;CAA2I,CAAC;AACrK,eAAO,MAAM,YAAY;;;;;;;;;CASxB,CAAC;AACF,2EAA2E;AAC3E,eAAO,MAAM,WAAW;;;;;;;;;CAAkP,CAAC;AAC3Q,eAAO,MAAM,WAAW,UAAqD,CAAC;AAC9E,eAAO,MAAM,UAAU;;;;;;;;;;;;;;IAMtB,CAAC;AACF,eAAO,MAAM,YAAY,KAAK,CAAC;AAI/B,wBAAgB,YAAY,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA;;;;;;EA0FhC;AAED;qDACqD;AACrD,wBAAgB,cAAc;;;;EAE7B;AACD,8CAA8C;AAC9C,wBAAgB,UAAU,CAAC,MAAM,KAAA,EAAE,CAAC,KAAA,EAAE,CAAC,KAAA,EAAE,CAAC,KAAA,EAAE,CAAC,KAAA,QAE5C;AACD,mDAAmD;AACnD,eAAO,MAAM,UAAU,yOAItB,CAAC"}

package/dist/components/gallery/kit/galleryKit.js

@@ -0,0 +1,298 @@
+// The gallery lab's shared helpers and layouts, verbatim (Claude outputs/gallery-lab/labCommon.mjs +
+// layouts.mjs). Plain JS-shaped code; typed at its one door, GalleryVariant.tsx.
+// Shared lab helpers for the gallery ideas: images as one cover-fit array texture, a damped-spring
+// scroll with drag / throw / snap (the navigation contract), small maths.
+import * as THREE from 'three';
+export const fragHead = /* glsl */ `
+    layout(location = 0) out highp vec4 pc_fragColor;
+    #define gl_FragColor pc_fragColor
+`;
+export const col = (c) => new THREE.Color(c);
+export const smooth = (a, b, x) => { const t = Math.min(1, Math.max(0, (x - a) / (b - a))); return t * t * (3 - 2 * t); };
+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 const wrap = (d, n) => (n > 1 ? ((d + n / 2) % n + n) % n - n / 2 : d);
+/** The scroll: one float index on a damped spring; drag moves it, release throws, then it snaps. */
+export function createScroll(cfg, onChange) {
+    const st = { s: 0, v: 0, target: 0, dragging: false, dragS0: 0, dragX0: 0, lastDx: 0, count: 0, autoT: 0, pitch: 1 };
+    const index = () => (st.count ? ((Math.round(st.s) % st.count) + st.count) % st.count : 0);
+    const controls = {
+        next() { st.target = Math.round(st.target) + 1; st.autoT = 0; onChange?.(+1); },
+        prev() { st.target = Math.round(st.target) - 1; st.autoT = 0; onChange?.(-1); },
+        goTo(i) { const n = st.count; if (!n)
+            return; const dd = wrap(i - index(), n); if (!dd)
+            return; st.target = Math.round(st.s) + dd; st.autoT = 0; onChange?.(Math.sign(dd)); },
+        jump(i) { st.s = st.target = i; st.v = 0; },
+        get index() { return index(); }, get count() { return st.count; },
+        get busy() { return Math.abs(st.target - st.s) > 0.02 || Math.abs(st.v) > 0.05; },
+        dragBegin(x) { st.dragging = true; st.dragS0 = st.s; st.dragX0 = x; st.v = 0; st.lastDx = 0; },
+        dragMove(x) { if (!st.dragging)
+            return; const ns = st.dragS0 - (x - st.dragX0) / st.pitch; st.lastDx = ns - st.s; st.s = ns; },
+        dragEnd(dt) { if (!st.dragging)
+            return; st.dragging = false; st.v = st.lastDx / Math.max(dt, 1 / 120); st.target = Math.round(st.s + st.v * (cfg.throwing ?? 0.15)); st.autoT = 0; onChange?.(Math.sign(st.v) || 1); },
+        get dragging() { return st.dragging; },
+        hover() { },
+    };
+    function step(dt, pointer) {
+        if (!st.dragging) {
+            const sub = 4, h = dt / sub;
+            for (let q = 0; q < sub; q++) {
+                st.v += ((cfg.stiffness ?? 40) * (st.target - st.s) - (cfg.damping ?? 9) * st.v) * h;
+                st.s += st.v * h;
+            }
+            if (Math.abs(st.target - st.s) < 1e-4 && Math.abs(st.v) < 1e-3) {
+                st.s = st.target;
+                st.v = 0;
+            }
+        }
+        if ((cfg.autoplay ?? 0) > 0 && st.count > 1 && !pointer && !st.dragging) {
+            st.autoT += dt;
+            if (st.autoT >= cfg.autoplay)
+                controls.next();
+        }
+    }
+    return { st, controls, step };
+}
+/** Focus of item i at scroll s: 1 at the front, 0 a full step away (continuous in s, never switches). */
+export const focusAt = (i, s, n) => 1 - smooth(0, 1, Math.abs(wrap(i - s, n)));
+/** Move `value` toward `target` at a constant rate (1 / seconds): a sweep that can reverse half-way, never jumps. */
+export const approach = (value, target, dt, seconds) => { const step = dt / Math.max(0.05, seconds); return value < target ? Math.min(target, value + step) : Math.max(target, value - step); };
+/** Colours blended by the items' focus, so a light follows the row without jumping. */
+export function blendByFocus(colors, s, n, out) { out.setRGB(0, 0, 0); let w = 0; for (let i = 0; i < n; i++) {
+    const f = focusAt(i, s, n);
+    if (f <= 0 || !colors[i])
+        continue;
+    out.r += colors[i].r * f;
+    out.g += colors[i].g * f;
+    out.b += colors[i].b * f;
+    w += f;
+} if (w > 0)
+    out.multiplyScalar(1 / w); return w; }
+/** One texture per picture, cut out of the array (for the standard, scene-lit materials). Returns [textures, average colours]. */
+export function sliceTextures(tex, count) {
+    const img = tex.image, W = img.width, H = img.height, d = img.data, per = W * H * 4, out = [], avg = [];
+    for (let i = 0; i < count; i++) {
+        const t = new THREE.DataTexture(d.slice(i * per, (i + 1) * per), W, H);
+        t.colorSpace = THREE.SRGBColorSpace;
+        t.minFilter = THREE.LinearMipmapLinearFilter;
+        t.magFilter = THREE.LinearFilter;
+        t.generateMipmaps = true;
+        t.anisotropy = 4;
+        t.needsUpdate = true;
+        out.push(t);
+        let r = 0, g = 0, b = 0, n = 0;
+        for (let p = i * per; p < (i + 1) * per; p += 4 * 101) {
+            r += d[p];
+            g += d[p + 1];
+            b += d[p + 2];
+            n++;
+        }
+        avg.push(new THREE.Color(r / n / 255, g / n / 255, b / n / 255));
+    }
+    return [out, avg];
+}
+/**
+ * The lean (every gallery): the whole gallery turns a little toward the cursor about its vertical axis and eases
+ * back when it leaves — the interaction of Halo. Wraps a built gallery: its content moves into a rig that turns;
+ * `lean` (config) is the strength, 0 = off. Pointer: { nx } in NDC (-1..1), or a plane x as a fallback.
+ */
+export function withLean(api, c) {
+    const rig = new THREE.Group();
+    for (const ch of [...api.object.children])
+        rig.add(ch);
+    api.object.add(rig);
+    let strength = c.lean ?? 1, lean = 0;
+    const apply = api.apply.bind(api), update = api.update.bind(api);
+    api.apply = (k) => { if (k.lean !== undefined)
+        strength = k.lean; apply(k); };
+    api.update = (dt, pointer, state) => {
+        const nx = pointer ? Math.max(-1, Math.min(1, pointer.nx ?? pointer.x / 3)) : 0;
+        lean += (nx * 0.18 * strength - lean) * (1 - Math.exp(-Math.min(dt, 0.05) * 3));
+        rig.rotation.y = lean;
+        update(dt, pointer, state);
+    };
+    api.rig = rig;
+    return api;
+}
+// layouts — where the pictures of a gallery sit, shared by every look. A layout is one function: from a picture's
+// offset d = i − s (s = the scroll's float index, wrapped over the set) it gives the picture's place, turn and size
+// in the gallery's frame, its focus (1 at the front, 0 a step away) and its fade. The active picture always lands
+// at the origin facing +z, so every look keeps its framing on every layout. Continuous in s: nothing ever jumps.
+//
+// The looks consume it two ways: mesh looks set each picture's matrix; shader looks read the same matrices from a
+// uniform array (uPlace[i]) and the fades from uFade[i] — computed once per frame here, in JS.
+export const LAYOUTS = ['row', 'wave', 'ring', 'helix', 'tunnel', 'stack', 'fan', 'constellation'];
+export const LAYOUT_NAMES = { row: 'Row', wave: 'Wave', ring: 'Ring', helix: 'Helix', tunnel: 'Tunnel', stack: 'Stack', fan: 'Fan', constellation: 'Constellation' };
+export const LAYOUT_HINTS = {
+    row: 'a straight row; the neighbours stand back at depth.',
+    wave: 'the row snakes gently in depth; the neighbours turn along the curve.',
+    ring: 'a tilted ring facing outward; the set turns round it.',
+    helix: 'a spiral staircase around you: the pictures face inward, the set turns and rises along it.',
+    tunnel: 'a corridor into depth; the next picture comes forward through the others, the passed one flies past the camera.',
+    stack: 'a deck in depth; the front picture slides aside and the deck steps forward.',
+    fan: 'a hand of cards spread from one hinge below; the active one swings upright.',
+    constellation: 'a loose cloud in space; the whole cloud glides to bring the next picture to the front.',
+};
+/** What `shape` does on each layout (one knob, its meaning per layout). */
+export const SHAPE_HINTS = { row: 'unused', wave: 'height of the wave', ring: 'tilt of the ring', helix: 'rise of the spiral', tunnel: 'drift of the corridor to the side', stack: 'offset of the deck', fan: 'spread of the fan', constellation: 'scatter of the cloud' };
+export const LAYOUT_KEYS = ['layout', 'spacing', 'depth', 'visible', 'shape'];
+export const LAYOUT_GUI = [
+    { key: 'layout', options: LAYOUTS, tip: 'Where the pictures sit' },
+    { key: 'spacing', min: 0.8, max: 2.5, step: 0.01, tip: 'Distance between neighbours, in picture widths' },
+    { key: 'depth', min: 0, max: 3, step: 0.01, tip: 'How far the inactive pictures stand back' },
+    { key: 'visible', min: 1, max: 6, step: 0.1, tip: 'How many neighbours show on each side' },
+    { key: 'shape', min: 0, max: 2, step: 0.01, tip: 'The layout’s own shape (wave height, ring tilt, spiral rise, …)' },
+];
+export const MAX_PICTURES = 32;
+const _q = new THREE.Quaternion(), _e = new THREE.Euler(), _p = new THREE.Vector3(), _s = new THREE.Vector3();
+export function createLayout(W, H) {
+    let cloud = null;
+    /** Constellation: n points, no two overlapping as pictures, chained nearest-neighbour so each hop is short. */
+    function cloudPoints(n, c) {
+        const sh = c.shape ?? 1, key = `${n}|${c.spacing}|${sh}|${c.depth}`;
+        if (cloud && cloud.key === key)
+            return cloud.pts;
+        const rnd = mulberry32(17), Wp = W * c.spacing;
+        let spanX = Wp * Math.sqrt(n) * (1.0 + 0.5 * sh), spanY = H * Math.sqrt(n) * (0.9 + 0.45 * sh), pts = [];
+        for (let grow = 0; grow < 8 && pts.length < n; grow++, spanX *= 1.15, spanY *= 1.15) {
+            pts = [];
+            for (let k = 0; k < 6000 && pts.length < n; k++) {
+                const p = [(rnd() - 0.5) * spanX, (rnd() - 0.5) * spanY, (rnd() - 0.5) * 1.6 * c.depth * sh, rnd() - 0.5];
+                if (pts.every(q => Math.abs(q[0] - p[0]) > Wp * 0.95 || Math.abs(q[1] - p[1]) > H * 1.12))
+                    pts.push(p);
+            }
+        }
+        while (pts.length < n)
+            pts.push([pts.length * Wp, 0, 0, 0]);
+        // chain: start nearest the centre, then always the nearest unvisited
+        const order = [], left = pts.slice();
+        let cur = left.reduce((b, p) => (Math.hypot(p[0], p[1]) < Math.hypot(b[0], b[1]) ? p : b), left[0]);
+        while (left.length) {
+            left.splice(left.indexOf(cur), 1);
+            order.push(cur);
+            if (!left.length)
+                break;
+            cur = left.reduce((b, p) => (Math.hypot(p[0] - cur[0], p[1] - cur[1]) < Math.hypot(b[0] - cur[0], b[1] - cur[1]) ? p : b), left[0]);
+        }
+        cloud = { key, pts: order };
+        return order;
+    }
+    /**
+     * Place picture i of n at scroll s. Writes its matrix (gallery frame) into m; returns { d, focus, fade }.
+     * c: { layout, spacing, depth, visible, shape }.
+     */
+    function place(i, s, n, c, m) {
+        const d = wrap(i - s, n), ad = Math.abs(d), focus = 1 - smooth(0, 1, ad);
+        const Wp = W * c.spacing, sh = c.shape ?? 1, vis = c.visible ?? 2.4, back = 1 - focus;
+        let x = 0, y = 0, z = 0, yaw = 0, pitch = 0, roll = 0, sc = 1;
+        let fade = 1 - smooth(vis - 0.6, vis, ad);
+        switch (c.layout) {
+            case 'wave': {
+                const A = sh * W * 0.32, k = 1.25;
+                x = d * Wp;
+                z = -c.depth * back + A * Math.sin(d * k);
+                yaw = -Math.atan2(A * k * Math.cos(d * k), Wp) * 0.8;
+                break;
+            }
+            case 'ring': {
+                const R = Math.max(Wp * n / (2 * Math.PI), W * 0.8), a = d * 2 * Math.PI / Math.max(n, 1), t = sh * 8 * Math.PI / 180;
+                const ca = Math.cos(a), sa = Math.sin(a), r = R - c.depth * 0.35 * back;
+                x = r * sa;
+                y = R * Math.sin(t) * (1 - ca);
+                z = (r * ca - R) * Math.cos(t);
+                yaw = a;
+                sc = 1 - 0.25 * (0.5 - 0.5 * ca);
+                fade = 1; // the whole ring shows
+                break;
+            }
+            case 'helix': {
+                // a spiral staircase around the viewer: the pictures face inward, the neighbours come round at the sides
+                const R = Wp * 2.2, a = d * Wp / R, r = R + c.depth * 0.5 * back;
+                x = r * Math.sin(a);
+                z = R - r * Math.cos(a);
+                y = d * H * 0.45 * sh;
+                yaw = -a;
+                break;
+            }
+            case 'tunnel': {
+                const step = Wp * 0.95;
+                if (d >= 0) {
+                    x = sh * 0.45 * W * d;
+                    y = sh * 0.12 * H * d;
+                    z = -d * step;
+                    fade = 1 - smooth(vis * 1.4 - 0.8, vis * 1.4, d);
+                }
+                else {
+                    x = d * W * 0.15;
+                    z = -d * step * 1.2;
+                    fade = 1 - smooth(0.05, 0.45, -d);
+                }
+                break;
+            }
+            case 'stack': {
+                if (d >= 0) {
+                    x = d * W * 0.1 * sh;
+                    y = d * H * 0.09 * sh;
+                    z = -d * (0.25 + c.depth * 0.4);
+                    sc = 1 - 0.04 * d;
+                    fade = 1 - smooth(vis - 0.6, vis, d);
+                }
+                else {
+                    const e = -d;
+                    x = -e * Wp * 1.05;
+                    z = -e * 0.25;
+                    yaw = -e * 0.45;
+                    fade = 1 - smooth(0.7, 1.4, e);
+                }
+                break;
+            }
+            case 'fan': {
+                const piv = H * 1.35, a = -d * 0.2 * (0.4 + 0.6 * sh) * c.spacing;
+                x = piv * Math.sin(-a);
+                y = piv * (Math.cos(a) - 1);
+                z = -c.depth * 0.45 * back - ad * 0.04;
+                roll = a;
+                break;
+            }
+            case 'constellation': {
+                const pts = cloudPoints(n, c), fl = Math.floor(s), t = s - fl;
+                const A = pts[((fl % n) + n) % n], B = pts[(((fl + 1) % n) + n) % n], P = pts[((i % n) + n) % n];
+                const e = t * t * (3 - 2 * t);
+                x = P[0] - (A[0] + (B[0] - A[0]) * e);
+                y = P[1] - (A[1] + (B[1] - A[1]) * e);
+                z = P[2] - (A[2] + (B[2] - A[2]) * e) - c.depth * 0.5 * back;
+                yaw = P[3] * 0.6 * back;
+                const dist = Math.hypot(x, y);
+                fade = 1 - smooth(Wp * vis * 0.9, Wp * vis * 1.25, dist);
+                break;
+            }
+            default: { // row
+                x = d * Wp;
+                z = -c.depth * back;
+            }
+        }
+        _e.set(pitch, yaw, roll, 'YXZ');
+        _q.setFromEuler(_e);
+        m.compose(_p.set(x, y, z), _q, _s.setScalar(sc));
+        return { d, focus, fade };
+    }
+    return { place };
+}
+/** For the shader looks: one matrix per picture; its last element (normally 1) carries the fade, to keep the
+ *  vertex uniforms small (32 mat4 = 128 vectors). */
+export function layoutUniforms() {
+    return { uPlace: { value: Array.from({ length: MAX_PICTURES }, () => new THREE.Matrix4()) } };
+}
+/** Fill uPlace for n pictures at scroll s. */
+export function fillLayout(layout, u, s, n, c) {
+    for (let i = 0; i < n; i++) {
+        const m = u.uPlace.value[i];
+        const r = layout.place(i, s, n, c, m);
+        m.elements[15] = r.fade;
+    }
+}
+/** GLSL: declarations the shader looks include. */
+export const layoutGlsl = /* glsl */ `
+    uniform mat4 uPlace[${MAX_PICTURES}];
+    vec3 placeAt(float img, vec3 local){ mat4 M = uPlace[int(img + 0.5)]; M[3][3] = 1.0; return (M * vec4(local, 1.0)).xyz; }
+    float fadeAt(float img){ return uPlace[int(img + 0.5)][3][3]; }
+`;

package/dist/components/gallery/kit/lookBase.d.ts

@@ -0,0 +1,157 @@
+import * as THREE from 'three';
+import { fragHead, withLean } from './galleryKit';
+import { LAYOUT_GUI } from './galleryKit';
+export { fragHead, LAYOUT_GUI, withLean };
+export declare const MAXI = 32;
+export declare const BASE_DEFAULTS: {
+    enabled: boolean;
+    lean: number;
+    imageUrls: any[];
+    autoplay: number;
+    intensity: number;
+    opacity: number;
+    layout: string;
+    spacing: number;
+    depth: number;
+    visible: number;
+    shape: number;
+    stiffness: number;
+    damping: number;
+    throwing: number;
+    changeTime: number;
+    wave: number;
+    slant: number;
+    dim: number;
+    pointerStrength: number;
+    pointerRadius: number;
+};
+export declare const BASE_GUI_MOTION: ({
+    key: string;
+    min: number;
+    max: number;
+    step: number;
+    tip?: undefined;
+} | {
+    key: string;
+    min: number;
+    max: number;
+    step: number;
+    tip: string;
+})[];
+export declare const BASE_GUI_TAIL: {
+    key: string;
+    min: number;
+    max: number;
+    step: number;
+}[];
+export declare function baseUniforms(): {
+    uTex: {
+        value: any;
+    };
+    uS: {
+        value: number;
+    };
+    uCount: {
+        value: number;
+    };
+    uTime: {
+        value: number;
+    };
+    uAct: {
+        value: Float32Array<ArrayBuffer>;
+    };
+    uW: {
+        value: number;
+    };
+    uH: {
+        value: number;
+    };
+    uWave: {
+        value: number;
+    };
+    uSlant: {
+        value: number;
+    };
+    uDim: {
+        value: number;
+    };
+    uIntensity: {
+        value: number;
+    };
+    uOpacity: {
+        value: number;
+    };
+    uPointer: {
+        value: THREE.Vector3;
+    };
+    uPointerActive: {
+        value: number;
+    };
+    uPointerMode: {
+        value: number;
+    };
+    uPointerStrength: {
+        value: number;
+    };
+    uPointerRadius: {
+        value: number;
+    };
+    uPlace: {
+        value: THREE.Matrix4[];
+    };
+};
+export declare function applyBase(u: any, c: any, modes: any): (k: any, v: any) => void;
+/** GLSL shared by every shader of the batch (vertex and fragment). */
+export declare const baseGlsl = "\n    uniform float uS, uCount, uTime, uW, uH, uWave, uSlant, uDim, uIntensity, uOpacity;\n    uniform float uAct[32];\n    uniform vec3 uPointer; uniform float uPointerActive, uPointerMode, uPointerStrength, uPointerRadius;\n    \n    uniform mat4 uPlace[32];\n    vec3 placeAt(float img, vec3 local){ mat4 M = uPlace[int(img + 0.5)]; M[3][3] = 1.0; return (M * vec4(local, 1.0)).xyz; }\n    float fadeAt(float img){ return uPlace[int(img + 0.5)][3][3]; }\n\n    float actOf(float img){ return uAct[int(img + 0.5)]; }\n    float waveAt(float act, vec2 g){\n        float pos = mix(g.x, 1.0 - g.y, uSlant * 0.5);\n        float front = act * (1.0 + uWave) - uWave * 0.5;\n        float w = smoothstep(front + uWave * 0.5, front - uWave * 0.5, pos);\n        return w * w * (3.0 - 2.0 * w);\n    }\n    float maskAt(vec2 p){ if (uPointerMode < -0.5) return 0.0; float d = length(p - uPointer.xy); return uPointerActive * uPointerStrength * (1.0 - smoothstep(uPointerRadius * 0.4, uPointerRadius, d)); }\n    float lumOf(vec3 c){ return dot(c, vec3(0.299, 0.587, 0.114)); }\n    // the inactive look: the picture's own luminance, grey and dim\n    vec3 fadedOf(vec3 pic){ return vec3(0.1 + 0.9 * lumOf(pic)) * uDim; }\n";
+/** An instanced geometry: `base` repeated `per` times for each of the 32 pictures; aI = (picture, index, u, v). */
+export declare function instanced(base: any, per: any, cell: any): THREE.InstancedBufferGeometry;
+/** A self-coloured ShaderMaterial of the batch (premultiplied). */
+export declare function shaderMaterial(u: any, vertexShader: any, fragmentShader: any, opts?: {}): THREE.ShaderMaterial;
+/**
+ * A scene-lit standard material whose geometry and colour come from the look's own GLSL:
+ *   vertex.head / vertex.body — body sets `gPos` (local position, before the layout) and `gNrm` (local normal);
+ *                               the layout's matrix is applied here.
+ *   fragment.head / fragment.body — body sets `diffuseColor.rgb` (and may scale `diffuseColor.a`).
+ * It lights with the scene's lights like any standard material (the gallery adds none).
+ */
+export declare function litMaterial(u: any, key: any, vertex: any, fragment: any, opts?: {}): THREE.MeshStandardMaterial;
+/**
+ * The shadow twin of a litMaterial: the same geometry (vertex.body + the layout) and the same cut-out
+ * (cutout.head / cutout.body, which may `discard`), so the look casts true shadows of its own shape.
+ * Set as mesh.customDepthMaterial (directional and spot lights).
+ */
+export declare function litDepthMaterial(u: any, key: any, vertex: any, cutout?: {
+    head: string;
+    body: string;
+}): THREE.MeshDepthMaterial;
+/**
+ * The gallery shell: navigation, layout, act, cursor, texture. `meshes` are added under the object; `setCount(n)`
+ * is called when the pictures change (set instance counts); `extra(dt, pointer, state)` runs every frame after
+ * the shared state is up to date.
+ */
+export declare function makeGallery(u: any, c: any, opts: any): {
+    object: THREE.Group<THREE.Object3DEventMap>;
+    controls: {
+        next(): void;
+        prev(): void;
+        goTo(i: any): void;
+        jump(i: any): void;
+        readonly index: number;
+        readonly count: number;
+        readonly busy: boolean;
+        dragBegin(x: any): void;
+        dragMove(x: any): void;
+        dragEnd(dt: any): void;
+        readonly dragging: boolean;
+        hover(): void;
+    } & {
+        setTexture(tex: any, count: any): void;
+    };
+    pickMesh: THREE.Mesh<THREE.PlaneGeometry, THREE.MeshBasicMaterial, THREE.Object3DEventMap>;
+    materials: any;
+    cfg: any;
+    apply(k: any): void;
+    update(dt: any, pointer: any, state: any): void;
+    dispose(): void;
+};
+//# sourceMappingURL=lookBase.d.ts.map

package/dist/components/gallery/kit/lookBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lookBase.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/kit/lookBase.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAmC,QAAQ,EAAE,MAAM,cAAc,CAAC;AACnF,OAAO,EAAwD,UAAU,EAAE,MAAM,cAAc,CAAC;AAEhG,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;AAC1C,eAAO,MAAM,IAAI,KAAK,CAAC;AAEvB,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;CAMzB,CAAC;AACF,eAAO,MAAM,eAAe;;;;;;;;;;;;IAM3B,CAAC;AACF,eAAO,MAAM,aAAa;;;;;GAGzB,CAAC;AAEF,wBAAgB,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQ3B;AACD,wBAAgB,SAAS,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,EAAE,KAAK,KAAA,4BAMpC;AAED,sEAAsE;AACtE,eAAO,MAAM,QAAQ,ssCAgBpB,CAAC;AAEF,mHAAmH;AACnH,wBAAgB,SAAS,CAAC,IAAI,KAAA,EAAE,GAAG,KAAA,EAAE,IAAI,KAAA,iCASxC;AAED,mEAAmE;AACnE,wBAAgB,cAAc,CAAC,CAAC,KAAA,EAAE,YAAY,KAAA,EAAE,cAAc,KAAA,EAAE,IAAI,KAAK,wBAExE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,GAAG,KAAA,EAAE,MAAM,KAAA,EAAE,QAAQ,KAAA,EAAE,IAAI,KAAK,8BAc9D;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,KAAA,EAAE,GAAG,KAAA,EAAE,MAAM,KAAA,EAAE,MAAM;;;CAAyB,2BAa/E;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,EAAE,IAAI,KAAA;;;;;;;;;;;;;;;;;;;;;;;;EAoCrC"}