@3driseai/3drise-viewer 0.1.40 → 0.1.41

package/dist/components/gallery/looks/lightThreads.js

@@ -0,0 +1,246 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// threads.mjs). Plain JS-shaped code (the viewer compiles non-strict); typed at its one door, kit/GalleryVariant.tsx. Its own DEFAULTS only fill knobs the
+// core defaults (DEFAULT_GALLERY_OBJECTS.lightThreads) do not carry; its own autoplay is never used.
+// threads — "Light threads": every picture is a curtain of fine vertical threads of light, each thread
+// carrying one column of the image like a string of beads. Curtains hang in a row along the scroll; the
+// one at the front is resolved — its threads pulled into one plane — and lit; the neighbours hang at
+// depth, grey and faint, and the
+// picture only resolves as the curtain comes to the centre. A change re-strings the incoming curtain:
+// light runs down each thread, thread after thread in a sweep, from the faded colours to the full ones; the outgoing one
+// fades. A real point light under the front curtain carries the picture's own average colour.
+import * as THREE from 'three';
+import { fragHead, col, mulberry32, createScroll, focusAt, approach, withLean } from '../kit/galleryKit.js';
+import { createLayout, layoutUniforms, fillLayout, layoutGlsl, LAYOUT_GUI } from '../kit/galleryKit.js';
+export const catalog = { key: 'threads', name: 'Light Threads', camera: { position: [0.3, 0.1, 4.8], target: [0, 0, 0] },
+    description: 'Pictures as curtains of fine threads of light, each thread a column of the image; the front curtain resolves and glows, the others hang grey and faint at depth; light runs down the threads on every change. Use for installations, dark lobbies, music and tech showcases.',
+    tags: ['gallery', 'threads', 'light', 'curtain', 'installation', 'navigation', 'interactive'] };
+export const DEFAULTS = {
+    type: 'threads', enabled: true, lean: 1, imageUrls: [], autoplay: 0, intensity: 1, opacity: 1,
+    aspect: 1.5, threads: 160, width: 2.4, // structural
+    layout: 'row', spacing: 1.35, depth: 1.2, visible: 2.4, shape: 1, dim: 0.16,
+    stiffness: 35, damping: 9, throwing: 0.15,
+    restring: 1.4, sweep: 0.6, headGlow: 1.2, beads: 0.12,
+    rail: false,
+    threadColor: '#8fb8ff', railColor: '#9aa3b5',
+    pointerMode: 'reveal', pointerStrength: 1, pointerRadius: 0.5, pointerColor: '#ffd9a6',
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'threads', 'width'];
+export const POINTER_MODES = ['reveal'];
+export const GUI = [
+    { key: 'lean', min: 0, max: 3, step: 0.01, tip: 'The gallery turns toward the cursor' },
+    { key: 'aspect', min: 0.6, max: 2.5, step: 0.01 }, { key: 'threads', min: 40, max: 400, step: 1 }, { key: 'width', min: 1, max: 4, step: 0.01 },
+    ...LAYOUT_GUI, { key: 'dim', min: 0, max: 1, step: 0.01 },
+    { key: 'stiffness', min: 5, max: 150, step: 1 }, { key: 'damping', min: 2, max: 30, step: 0.1 }, { key: 'throwing', min: 0, max: 0.5, step: 0.01 },
+    { key: 'restring', min: 0.3, max: 4, step: 0.05 }, { key: 'sweep', min: 0, max: 1, step: 0.01 }, { key: 'headGlow', min: 0, max: 3, step: 0.01 }, { key: 'beads', min: 0, max: 1, step: 0.01 },
+    { key: 'rail' }, { key: 'autoplay', min: 0, max: 20, step: 0.5 },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, { key: 'pointerStrength', min: 0, max: 3, step: 0.01 }, { key: 'pointerRadius', min: 0.2, max: 3, step: 0.01 },
+    { key: 'intensity', min: 0, max: 3, step: 0.01 }, { key: 'opacity', min: 0, max: 1, step: 0.01 },
+    { key: 'threadColor', color: true }, { key: 'railColor', color: true }, { key: 'pointerColor', color: true },
+];
+export const PRESETS = [
+    { name: 'Installation', description: 'The default.', patch: {} },
+    { name: 'Dense', description: 'Many fine threads — almost a picture.', patch: { threads: 320, beads: 0.15 } },
+    { name: 'Sparse', description: 'Few threads, a long slow restring, a bright head.', patch: { threads: 70, restring: 2.4, headGlow: 2 } },
+];
+const MAXI = 32;
+export function createUniforms() {
+    return {
+        ...layoutUniforms(), uTex: { value: null }, uS: { value: 0 }, uCount: { value: 1 }, uTime: { value: 0 },
+        uReveal: { value: new Float32Array(MAXI).fill(0) },
+        uSpacing: { value: 1.35 }, uDepth: { value: 1.2 }, uScatter: { value: 0.35 }, uVisible: { value: 2.4 }, uDim: { value: 0.12 },
+        uHead: { value: 1.2 }, uBeads: { value: 0.35 }, uSway: { value: 0.4 }, uIntensity: { value: 1 }, uOpacity: { value: 1 },
+        uThreadColor: { value: col('#8fb8ff') }, uPointerColor: { value: col('#ffd9a6') },
+        uPointer: { value: new THREE.Vector3() }, uPointerActive: { value: 0 }, uPointerMode: { value: 0 }, uPointerStrength: { value: 1 }, uPointerRadius: { value: 0.8 },
+        uW: { value: 2.4 }, uH: { value: 1.6 }, uN: { value: 160 },
+    };
+}
+export function applyConfig(u, c) {
+    const set = (k, v) => { if (v === undefined)
+        return; if (u[k].value && u[k].value.isColor) {
+        if (v.isColor)
+            u[k].value.copy(v);
+        else
+            u[k].value.set(v);
+    }
+    else
+        u[k].value = v; };
+    set('uSpacing', c.spacing);
+    set('uDepth', c.depth);
+    set('uVisible', c.visible);
+    set('uDim', c.dim);
+    set('uHead', c.headGlow);
+    set('uBeads', c.beads);
+    set('uIntensity', c.intensity);
+    set('uOpacity', c.opacity);
+    set('uThreadColor', c.threadColor);
+    set('uPointerColor', c.pointerColor);
+    set('uPointerStrength', c.pointerStrength);
+    set('uPointerRadius', c.pointerRadius);
+    if (c.pointerMode !== undefined)
+        u.uPointerMode.value = POINTER_MODES.indexOf(c.pointerMode);
+}
+const vert = /* glsl */ `
+    attribute vec4 aInst;   // image, thread k, hash, hash2
+    uniform float uS, uCount, uTime, uSpacing, uDepth, uScatter, uVisible, uSway, uW, uH, uN;
+    uniform float uReveal[${MAXI}];
+    uniform vec3 uPointer; uniform float uPointerActive, uPointerMode, uPointerStrength, uPointerRadius;
+    varying vec2 vUv; varying float vImg; varying float vK; varying float vFocus; varying float vAlpha; varying float vReveal; varying float vLift; varying float vPw; varying float vH;
+    ${layoutGlsl}
+    float wrapd(float d, float n){ return n > 1.0 ? mod(d + n * 0.5, n) - n * 0.5 : d; }
+    void main(){
+        float img = aInst.x, k = aInst.y, h1 = aInst.z, h2 = aInst.w;
+        float d = wrapd(img - uS, uCount); float ad = abs(d);
+        float focus = 1.0 - smoothstep(0.0, 1.0, ad);
+        vFocus = focus;
+        // the thread's place in its curtain; neighbours' threads scatter in depth, the front one's pull into a plane
+        float tx = (k / uN - 0.5) * uW + (0.5 / uN) * uW;
+        float tz = 0.0;                                   // aligned: every curtain's threads in one plane
+        // a slow sway, each thread its own phase (threads are hung, not fixed)
+        float sw = 0.0;                                   // still: no sway
+        int ii = int(img + 0.5);
+        float reveal = uReveal[ii];
+        vReveal = reveal; vLift = 0.0;
+        float yTop = uH * 0.5;
+        // position.y is -0.5..0.5 for the quad; the quad spans the full height, the fragment clips to the reveal
+        vec3 p = placeAt(img, vec3(tx + sw + position.x, yTop - (0.5 - position.y) * uH, tz));
+        // reveal: a soft light around the cursor brings the colour back (fragment)
+        vec2 dp = p.xy - uPointer.xy; float dist = length(dp);
+        float pw = uPointerActive * uPointerStrength * (1.0 - smoothstep(uPointerRadius * 0.35, uPointerRadius, dist));
+        vPw = pw;
+        vUv = vec2(k / uN + 0.5 / uN, 1.0 - (0.5 - position.y));
+        vImg = img; vK = k; vH = h2;
+        vAlpha = fadeAt(img);
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
+    }
+`;
+const frag = /* glsl */ `
+    ${fragHead}
+    precision highp sampler2DArray;
+    uniform sampler2DArray uTex;
+    uniform float uDim, uHead, uBeads, uIntensity, uOpacity, uTime, uPointerMode;
+    uniform vec3 uThreadColor, uPointerColor;
+    varying vec2 vUv; varying float vImg; varying float vK; varying float vFocus; varying float vAlpha; varying float vReveal; varying float vLift; varying float vPw; varying float vH;
+    void main(){
+        // the thread: a bright core across the quad's width
+        float x = abs(gl_PointCoord.x); // unused
+        vec3 pic = texture(uTex, vec3(vUv, vImg)).rgb;
+        float yFromTop = 1.0 - vUv.y;
+        // every curtain is strung: faded, a little desaturated. The active part (above the front) is in full colour;
+        // each thread's front runs a touch behind its left neighbour's, so the light sweeps across as it falls.
+        float rev = clamp(vReveal * 1.25 - vUv.x * 0.25, 0.0, 1.0);
+        float lit = 1.0 - smoothstep(rev - 0.015, rev + 0.015, yFromTop);
+        float head = exp(-pow((yFromTop - rev) * 34.0, 2.0)) * step(0.001, rev) * step(rev, 0.999);
+        float beads = 1.0 - uBeads * 0.5 * (0.5 + 0.5 * sin(vUv.y * 420.0 + vH * 6.283));
+        float lum = dot(pic, vec3(0.299, 0.587, 0.114));
+        // inactive: grey and faint. The light (the front, or the cursor's reveal) brings colour and opacity.
+        float act = max(lit, vPw * step(-0.5, uPointerMode) * (1.0 - lit));
+        vec3 faded = vec3(lum) * uDim;
+        vec3 full = pic * 1.25;
+        vec3 c = mix(faded, full, act) * beads;
+        c += (pic * 2.0 + uThreadColor) * head * uHead;
+        float a = vAlpha * uOpacity;
+        if (a < 0.003) discard;
+        gl_FragColor = vec4(c * uIntensity * a, a);
+        #include <tonemapping_fragment>
+        #include <colorspace_fragment>
+    }
+`;
+export function build(u, c) { return withLean(buildGallery(u, c), c); }
+function buildGallery(u, c) {
+    const N = Math.max(8, c.threads | 0), W = c.width, H = W / c.aspect;
+    u.uW.value = W;
+    u.uH.value = H;
+    u.uN.value = N;
+    const quad = new THREE.PlaneGeometry(W / N * 0.85, 1); // thin strip, height 1 (scaled by uH in the shader)
+    const geo = new THREE.InstancedBufferGeometry();
+    geo.index = quad.index;
+    geo.attributes.position = quad.attributes.position;
+    geo.attributes.uv = quad.attributes.uv;
+    const rnd = mulberry32(3);
+    const inst = new Float32Array(MAXI * N * 4);
+    for (let i = 0; i < MAXI; i++)
+        for (let k = 0; k < N; k++)
+            inst.set([i, k, rnd(), rnd()], (i * N + k) * 4);
+    geo.setAttribute('aInst', new THREE.InstancedBufferAttribute(inst, 4));
+    geo.instanceCount = 0;
+    geo.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 20);
+    const mat = new THREE.ShaderMaterial({ uniforms: u, vertexShader: vert, fragmentShader: frag, glslVersion: THREE.GLSL3, side: THREE.DoubleSide, transparent: true, depthWrite: true, premultipliedAlpha: true }); // threads hide what hangs behind them (layouts overlap)
+    const threads = new THREE.Mesh(geo, mat);
+    threads.frustumCulled = false;
+    threads.raycast = () => { };
+    // the rail the threads hang from
+    const rail = new THREE.Mesh(new THREE.CylinderGeometry(0.012, 0.012, 1, 10), new THREE.MeshStandardMaterial({ color: c.railColor, roughness: 0.4, metalness: 0.8 }));
+    rail.rotation.z = Math.PI / 2;
+    const pick = new THREE.Mesh(new THREE.PlaneGeometry(W, H), new THREE.MeshBasicMaterial({ visible: false }));
+    pick.userData.pick = 'front';
+    const object = new THREE.Group();
+    object.add(threads, rail, pick);
+    const layout = createLayout(W, H);
+    const _inv = new THREE.Matrix4(), _p = new THREE.Vector3();
+    const cfg = { ...c };
+    const scroll = createScroll(cfg, (dir) => { });
+    scroll.st.pitch = W * c.spacing;
+    const st = { avg: [], prevIndex: 0, time: 0, pointer: null };
+    const reveal = u.uReveal.value;
+    const _c = new THREE.Color();
+    const controls = Object.assign(scroll.controls, {
+        setTexture(tex, count) {
+            if (u.uTex.value)
+                u.uTex.value.dispose();
+            u.uTex.value = tex;
+            scroll.st.count = Math.min(count, MAXI);
+            u.uCount.value = scroll.st.count;
+            geo.instanceCount = scroll.st.count * N;
+            // average colour per picture, for the light
+            const img = tex.image, W2 = img.width, H2 = img.height, d = img.data;
+            st.avg = [];
+            for (let i = 0; i < scroll.st.count; i++) {
+                let r = 0, g = 0, b = 0, n = 0;
+                for (let p = i * W2 * H2 * 4; p < (i + 1) * W2 * H2 * 4; p += 4 * 97) {
+                    r += d[p];
+                    g += d[p + 1];
+                    b += d[p + 2];
+                    n++;
+                }
+                st.avg.push(new THREE.Color(r / n / 255, g / n / 255, b / n / 255));
+            }
+            reveal.fill(0);
+            reveal[controls.index] = 1;
+        },
+    });
+    object.userData.gallery = controls;
+    return {
+        object, controls, pickMesh: pick, materials: [mat, rail.material],
+        apply(k) { Object.assign(cfg, k); applyConfig(u, k); scroll.st.pitch = W * cfg.spacing; if (k.railColor)
+            rail.material.color.set(k.railColor); rail.visible = cfg.rail !== false; },
+        update(dt, pointer) {
+            dt = Math.min(dt, 0.05);
+            st.time += dt;
+            u.uTime.value = st.time;
+            scroll.step(dt, pointer);
+            u.uS.value = scroll.st.s;
+            const n = scroll.st.count;
+            fillLayout(layout, u, scroll.st.s, n, cfg);
+            // each curtain's light follows its own focus at a constant rate: arriving runs it down, leaving runs it back up
+            for (let i = 0; i < n; i++)
+                reveal[i] = approach(reveal[i], focusAt(i, scroll.st.s, n) > 0.5 ? 1 : 0, dt, cfg.restring);
+            // the rail spans the visible curtains
+            const span = (Math.min(n, 2 * cfg.visible + 1)) * W * cfg.spacing;
+            rail.scale.set(1, span, 1);
+            rail.position.set(0, H / 2 + 0.02, 0);
+            // the light under the front curtain, in the picture's own colour
+            // the front slot is always at x = 0 (the curtains move, not the slot): the light stays there and blends colours
+            pick.position.x = 0;
+            // pointer on the z = 0 plane
+            if (pointer) {
+                threads.parent.updateMatrix();
+                _inv.copy(threads.parent.matrix).invert(); /* the cursor arrives in the gallery's own frame; undo the lean */
+                _p.set(pointer.x, pointer.y, 0).applyMatrix4(_inv);
+                u.uPointer.value.set(_p.x, _p.y, 0);
+            }
+            u.uPointerActive.value += ((pointer ? 1 : 0) - u.uPointerActive.value) * (1 - Math.exp(-dt * 6));
+        },
+        dispose() { geo.dispose(); quad.dispose(); mat.dispose(); rail.geometry.dispose(); rail.material.dispose(); pick.geometry.dispose(); if (u.uTex.value)
+            u.uTex.value.dispose(); },
+    };
+}

package/dist/components/gallery/looks/loom.d.ts

@@ -0,0 +1,238 @@
+import * as THREE from 'three';
+export declare const catalog: {
+    key: string;
+    name: string;
+    camera: {
+        position: number[];
+        target: number[];
+    };
+    description: string;
+    tags: string[];
+};
+export declare const DEFAULTS: {
+    type: string;
+    enabled: boolean;
+    lean: number;
+    imageUrls: any[];
+    autoplay: number;
+    intensity: number;
+    opacity: number;
+    aspect: number;
+    width: number;
+    warp: number;
+    weft: number;
+    layout: string;
+    spacing: number;
+    depth: number;
+    visible: number;
+    shape: number;
+    dim: number;
+    stiffness: number;
+    damping: number;
+    throwing: number;
+    weaveTime: number;
+    unravelTime: number;
+    wave: number;
+    slant: number;
+    thread: number;
+    shuttle: number;
+    weave: number;
+    warpGlow: number;
+    warpColor: string;
+    shuttleColor: string;
+    pointerMode: string;
+    pointerStrength: number;
+    pointerRadius: number;
+    pointerColor: string;
+};
+export declare const STRUCTURAL: string[];
+export declare const POINTER_MODES: string[];
+export declare const 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;
+} | {
+    key: string;
+    min: number;
+    max: number;
+    step: number;
+    options?: undefined;
+    color?: undefined;
+} | {
+    key: string;
+    options: string[];
+    min?: undefined;
+    max?: undefined;
+    step?: undefined;
+    color?: undefined;
+} | {
+    key: string;
+    color: boolean;
+    min?: undefined;
+    max?: undefined;
+    step?: undefined;
+    options?: undefined;
+})[];
+export declare const PRESETS: ({
+    name: string;
+    description: string;
+    patch: {
+        warp?: undefined;
+        weft?: undefined;
+        weaveTime?: undefined;
+        thread?: undefined;
+        wave?: undefined;
+        warpGlow?: undefined;
+        slant?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        warp: number;
+        weft: number;
+        weaveTime: number;
+        thread: number;
+        wave?: undefined;
+        warpGlow?: undefined;
+        slant?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        warp: number;
+        weft: number;
+        weaveTime: number;
+        wave: number;
+        thread: number;
+        warpGlow: number;
+        slant?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        slant: number;
+        wave: number;
+        warp?: undefined;
+        weft?: undefined;
+        weaveTime?: undefined;
+        thread?: undefined;
+        warpGlow?: undefined;
+    };
+})[];
+export declare function createUniforms(): {
+    uTex: {
+        value: any;
+    };
+    uS: {
+        value: number;
+    };
+    uCount: {
+        value: number;
+    };
+    uTime: {
+        value: number;
+    };
+    uWoven: {
+        value: Float32Array<ArrayBuffer>;
+    };
+    uSpacing: {
+        value: number;
+    };
+    uDepth: {
+        value: number;
+    };
+    uVisible: {
+        value: number;
+    };
+    uDim: {
+        value: number;
+    };
+    uShuttle: {
+        value: number;
+    };
+    uWave: {
+        value: number;
+    };
+    uSlant: {
+        value: number;
+    };
+    uThread: {
+        value: number;
+    };
+    uWeave: {
+        value: number;
+    };
+    uWarpGlow: {
+        value: number;
+    };
+    uSway: {
+        value: number;
+    };
+    uIntensity: {
+        value: number;
+    };
+    uOpacity: {
+        value: number;
+    };
+    uWarpColor: {
+        value: THREE.Color;
+    };
+    uRimColor: {
+        value: THREE.Color;
+    };
+    uShuttleColor: {
+        value: THREE.Color;
+    };
+    uPointerColor: {
+        value: THREE.Color;
+    };
+    uPointer: {
+        value: THREE.Vector3;
+    };
+    uPointerActive: {
+        value: number;
+    };
+    uPointerMode: {
+        value: number;
+    };
+    uPointerStrength: {
+        value: number;
+    };
+    uPointerRadius: {
+        value: number;
+    };
+    uW: {
+        value: number;
+    };
+    uH: {
+        value: number;
+    };
+    uNw: {
+        value: number;
+    };
+    uNf: {
+        value: number;
+    };
+    uKey: {
+        value: THREE.Vector3;
+    };
+    uPlace: {
+        value: THREE.Matrix4[];
+    };
+};
+export declare function applyConfig(u: any, c: any): void;
+export declare function build(u: any, c: any): any;
+//# sourceMappingURL=loom.d.ts.map

package/dist/components/gallery/looks/loom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loom.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/loom.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,OAAO;;;;;;;;;CAEsE,CAAC;AAE3F,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQpB,CAAC;AACF,eAAO,MAAM,UAAU,UAAmD,CAAC;AAC3E,eAAO,MAAM,aAAa,UAAa,CAAC;AACxC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWf,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKnB,CAAC;AAEF,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAU7B;AACD,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAM/B;AAgGD,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}