@3driseai/3drise-viewer 0.1.40 → 0.1.42

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

@@ -0,0 +1,282 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// shift.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.particleShift) do not carry; its own autoplay is never used.
+// shift — "Particle Shift". An inactive picture is a grey halftone on its own surface (one dot per cell, sized by
+// the picture's brightness, anti-aliased, foreshortening with the surface), so it reads clearly from any angle. When a picture becomes the
+// active one a small soft wave moves across it; where the wave passes, the particles rise very slightly off the
+// surface, swell, take their colour and settle back fused into the solid picture. Leaving runs the wave back.
+//
+// One quantity drives it all, per particle: s = wave(act, place) × (1 − cursor mask). act is the picture's own
+// active value (0 → 1 at a constant rate, so the change never jumps and reverses cleanly half-way); the wave turns
+// it into a soft front crossing the picture; the cursor mask turns the area under the cursor (pointerRadius) of an
+// active picture back toward its particle state, with the same soft edge. Self-coloured: no lighting of its own.
+import * as THREE from 'three';
+import { fragHead, mulberry32, createScroll, focusAt, approach, withLean } from '../kit/galleryKit.js';
+import { createLayout, layoutUniforms, fillLayout, layoutGlsl, LAYOUT_GUI } from '../kit/galleryKit.js';
+export const catalog = { key: 'particleShift', name: 'Particle Shift', camera: { position: [0.2, 0.15, 4.8], target: [0, 0, 0] },
+    description: 'Pictures made of particles: inactive ones are a crisp grey halftone; on the active one a small soft wave crosses the picture, its particles rising slightly, swelling and fusing into the solid picture in full colour; the cursor turns the area it passes back into particles. Use for art, tech and dreamy showcases.',
+    tags: ['gallery', 'particles', 'stipple', 'transform', 'dissolve', 'navigation', 'interactive'] };
+export const DEFAULTS = {
+    type: 'particleShift', enabled: true, lean: 1, imageUrls: [], autoplay: 0, intensity: 1, opacity: 1,
+    aspect: 1.4, width: 2.2, grains: 150, // structural: particles across
+    layout: 'row', spacing: 1.35, depth: 1.0, visible: 2.4, shape: 1,
+    stiffness: 22, damping: 8, throwing: 0.1,
+    changeTime: 1.8, wave: 0.3, slant: 0.3, lift: 0.05,
+    particleSize: 0.5, faded: 0.35, grain: 1.0,
+    pointerMode: 'shift', pointerStrength: 1, pointerRadius: 0.45,
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'width', 'grains'];
+export const POINTER_MODES = ['shift'];
+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: 'width', min: 1, max: 4, step: 0.01 }, { key: 'grains', min: 60, max: 260, step: 2 },
+    ...LAYOUT_GUI,
+    { key: 'stiffness', min: 5, max: 120, step: 1 }, { key: 'damping', min: 2, max: 30, step: 0.1 },
+    { key: 'changeTime', min: 0.6, max: 6, step: 0.1 }, { key: 'wave', min: 0.05, max: 1, step: 0.01, tip: 'Width of the soft wave' }, { key: 'slant', min: 0, max: 1, step: 0.01, tip: 'How diagonal the wave is' }, { key: 'lift', min: 0, max: 0.3, step: 0.005, tip: 'How far the particles rise as the wave passes' },
+    { key: 'particleSize', min: 0.1, max: 1, step: 0.01, tip: 'Size of the halftone dots of the waiting pictures' }, { key: 'faded', min: 0, max: 1, step: 0.01, tip: 'Brightness of the waiting pictures' }, { key: 'grain', min: 0.4, max: 2.5, step: 0.01 },
+    { key: 'autoplay', min: 0, max: 20, step: 0.5 },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, { key: 'pointerStrength', min: 0, max: 1, step: 0.01 }, { key: 'pointerRadius', min: 0.1, max: 2, step: 0.01, tip: 'Radius of the area the cursor turns back into particles' },
+    { key: 'intensity', min: 0, max: 3, step: 0.01 }, { key: 'opacity', min: 0, max: 1, step: 0.01 },
+];
+export const PRESETS = [
+    { name: 'Shift', description: 'The default.', patch: {} },
+    { name: 'Breath', description: 'A wide, very soft wave; the particles barely rise.', patch: { wave: 0.7, lift: 0.02, changeTime: 2.4 } },
+    { name: 'Fine', description: 'Fine particles at rest, a narrow straight wave.', patch: { particleSize: 0.36, grains: 200, wave: 0.18, slant: 0 } },
+];
+const MAXI = 32;
+export function createUniforms() {
+    return {
+        ...layoutUniforms(), uTex: { value: null }, uS: { value: 0 }, uCount: { value: 1 }, uTime: { value: 0 },
+        uAct: { value: new Float32Array(MAXI).fill(0) },
+        uSpacing: { value: 1.35 }, uDepth: { value: 1 }, uVisible: { value: 2.4 },
+        uWave: { value: 0.3 }, uSlant: { value: 0.3 }, uLift: { value: 0.05 }, uSize: { value: 0.5 }, uFaded: { value: 0.35 }, uGrain: { value: 1 },
+        uIntensity: { value: 1 }, uOpacity: { value: 1 },
+        uW: { value: 2.2 }, uH: { value: 1.57 }, uGx: { value: 150 }, uGy: { value: 107 }, uDpr: { value: 1 }, uVh: { value: 560 },
+        uPointer: { value: new THREE.Vector3() }, uPointerActive: { value: 0 }, uPointerMode: { value: 0 }, uPointerStrength: { value: 1 }, uPointerRadius: { value: 0.45 },
+    };
+}
+export function applyConfig(u, c) {
+    const set = (k, v) => { if (v !== undefined)
+        u[k].value = v; };
+    set('uSpacing', c.spacing);
+    set('uDepth', c.depth);
+    set('uVisible', c.visible);
+    set('uWave', c.wave);
+    set('uSlant', c.slant);
+    set('uLift', c.lift);
+    set('uSize', c.particleSize);
+    set('uFaded', c.faded);
+    set('uGrain', c.grain);
+    set('uIntensity', c.intensity);
+    set('uOpacity', c.opacity);
+    set('uPointerStrength', c.pointerStrength);
+    set('uPointerRadius', c.pointerRadius);
+    if (c.pointerMode !== undefined)
+        u.uPointerMode.value = POINTER_MODES.indexOf(c.pointerMode);
+}
+const common = /* glsl */ `
+    uniform float uS, uCount, uTime, uSpacing, uDepth, uVisible, uW, uH, uWave, uSlant;
+    uniform float uAct[${MAXI}];
+    uniform vec3 uPointer; uniform float uPointerActive, uPointerMode, uPointerStrength, uPointerRadius;
+    ${layoutGlsl}
+    float wrapd(float d, float n){ return n > 1.0 ? mod(d + n * 0.5, n) - n * 0.5 : d; }
+    // the wave: a soft front crossing the picture from the left (slightly diagonal); 1 behind it, 0 ahead of it
+    float waveAt(float act, vec2 g){
+        float pos = mix(g.x, 1.0 - g.y, uSlant * 0.5);
+        float front = act * (1.0 + uWave) - uWave * 0.5;
+        float w = smoothstep(front + uWave * 0.5, front - uWave * 0.5, pos);
+        return w * w * (3.0 - 2.0 * w);
+    }
+    // the cursor's area turns back into particles (soft edge)
+    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.45, uPointerRadius, d)); }
+    vec3 plateAt(float img, vec2 g, out float focus, out float act){
+        float d = wrapd(img - uS, uCount); focus = 1.0 - smoothstep(0.0, 1.0, abs(d));
+        act = uAct[int(img + 0.5)];
+        return placeAt(img, vec3((g.x - 0.5) * uW, (g.y - 0.5) * uH, 0.0));
+    }
+    float alphaAt(float img){ return fadeAt(img); }
+`;
+// ---- the solid picture: shown only where s is near 1 (an active, settled picture outside the cursor's area)
+const plateVert = /* glsl */ `
+    attribute float aImg;
+    ${common}
+    varying vec2 vUv; varying float vImg; varying float vAct; varying float vAlpha; varying vec2 vP;
+    void main(){
+        float focus, act; vec3 p = plateAt(aImg, uv, focus, act);
+        vUv = uv; vImg = aImg; vAct = act; vAlpha = alphaAt(aImg); vP = p.xy;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
+    }
+`;
+const plateFrag = /* glsl */ `
+    ${fragHead}
+    precision highp sampler2DArray;
+    ${common}
+    uniform sampler2DArray uTex; uniform float uIntensity, uOpacity, uSize, uFaded, uGx, uGy;
+    varying vec2 vUv; varying float vImg; varying float vAct; varying float vAlpha; varying vec2 vP;
+    void main(){
+        float mk = maskAt(vP);
+        float s = waveAt(vAct, vUv) * (1.0 - mk);
+        vec3 pic = texture(uTex, vec3(vUv, vImg)).rgb;
+        // the settled picture
+        float solid = smoothstep(0.55, 0.95, s);
+        // the waiting picture: a halftone on the picture's own surface — one dot per cell, its size set by the
+        // brightness there, so the picture reads clearly in grey and the dots foreshorten with the surface at any angle
+        vec2 c = vUv * vec2(uGx, uGy);
+        vec2 cellUv = (floor(c) + 0.5) / vec2(uGx, uGy);
+        float L = dot(textureLod(uTex, vec3(cellUv, vImg), 1.5).rgb, vec3(0.299, 0.587, 0.114));
+        float r = 0.5 * mix(0.35, 1.0, uSize) * sqrt(mix(0.06, 1.0, L));        // dot radius, in cells
+        float d = length(fract(c) - 0.5);
+        float aa = max(length(fwidth(c)) * 0.7, 1e-4);                          // one pixel, in cells
+        float dotA = 1.0 - smoothstep(r - aa, r + aa, d);
+        // cells smaller than a pixel: the dots blend into their average coverage instead of shimmering
+        dotA = mix(dotA, min(3.1416 * r * r, 1.0), smoothstep(0.35, 0.9, aa));
+        // it stays under the wave until the settled picture takes over (no gap between the two), dimmed while the
+        // particles lift off it
+        float hdot = dotA * (1.0 - 0.5 * smoothstep(0.05, 0.4, s));
+        // grey on a waiting picture; under the cursor on the active one the halftone keeps the picture's colour
+        vec3 grey = mix(vec3(0.35 + 0.65 * L) * uFaded, textureLod(uTex, vec3(cellUv, vImg), 1.5).rgb, vAct * mk);
+        float a = (solid + (1.0 - solid) * hdot) * vAlpha * uOpacity;
+        if (a < 0.003) discard;
+        vec3 col = (pic * solid + grey * (1.0 - solid) * hdot) / max(solid + (1.0 - solid) * hdot, 1e-4);
+        gl_FragColor = vec4(col * uIntensity * a, a);
+        #include <tonemapping_fragment>
+        #include <colorspace_fragment>
+    }
+`;
+// ---- the particles: always there below s = 1 — small and grey at 0, swelling, drifting and colouring as s rises
+const grainVert = /* glsl */ `
+    attribute vec4 aG;     // image, u, v, hash
+    ${common}
+    uniform float uLift, uSize, uFaded, uGrain, uGx, uGy, uDpr, uVh;
+    varying vec2 vUv; varying float vImg; varying float vS; varying float vAlpha;
+    void main(){
+        float img = aG.x, h = aG.w;
+        // each particle jittered inside its own cell: no regular grid, so no moiré when the picture is seen at an angle
+        vec2 g = aG.yz + (vec2(h, fract(h * 97.131)) - 0.5) * 0.8 / vec2(uGx, uGy);
+        float focus, act; vec3 plate = plateAt(img, g, focus, act);
+        float s = waveAt(act, g) * (1.0 - maskAt(plate.xy));
+        // the crest of the wave: the particles rise a little off the surface and settle back (0 before and after)
+        float crest = 4.0 * s * (1.0 - s);
+        // (the rise is along the picture's own normal, whatever the layout turns it to)
+        vec3 p = placeAt(img, vec3((g.x - 0.5) * uW, (g.y - 0.5) * uH, uLift * crest * (0.8 + 0.4 * h) + 0.004 * sin(uTime * 0.9 + h * 40.0) * (1.0 - s)));
+        vUv = g; vImg = img; vS = s; vAlpha = alphaAt(img);
+        vec4 mv = modelViewMatrix * vec4(p, 1.0);
+        gl_Position = projectionMatrix * mv;
+        float size = mix(uSize, 1.0, smoothstep(0.0, 0.8, s)) * (1.0 + 0.15 * crest);
+        // a point sprite always faces the camera, but the picture does not: seen at an angle the same particles crowd
+        // into less screen area. Shrink each sprite's area by how much the picture faces the camera, so the stipple
+        // keeps its density at any angle
+        vec3 o = placeAt(img, vec3(0.0)), nz = placeAt(img, vec3(0.0, 0.0, 1.0)) - o;
+        float facing = abs(dot(normalize((modelViewMatrix * vec4(nz, 0.0)).xyz), normalize(-mv.xyz)));
+        float px = uGrain * (uW / uGx) * 3.0 * uVh * 0.5 / max(-mv.z, 0.1) * uDpr * size * sqrt(max(facing, 0.05));
+        // never below 1 px (a smaller sprite still rasterises as one pixel and flickers): it fades instead
+        float pxC = max(px, 1.0);
+        vAlpha *= px / pxC;
+        gl_PointSize = pxC;
+    }
+`;
+const grainFrag = /* glsl */ `
+    ${fragHead}
+    precision highp sampler2DArray;
+    uniform sampler2DArray uTex; uniform float uFaded, uIntensity, uOpacity;
+    varying vec2 vUv; varying float vImg; varying float vS; varying float vAlpha;
+    void main(){
+        vec2 q = gl_PointCoord - 0.5; float r2 = dot(q, q); if (r2 > 0.25) discard;
+        float soft = 1.0 - smoothstep(0.05, 0.25, r2);
+        vec3 pic = texture(uTex, vec3(vUv, vImg)).rgb;
+        float lum = dot(pic, vec3(0.299, 0.587, 0.114));
+        float colour = smoothstep(0.1, 0.8, vS);
+        vec3 c = mix(vec3(0.18 + 0.82 * lum) * uFaded, pic, colour);
+        // the particles hand over to the solid picture as they settle; faint at rest, fuller as they colour
+        // swollen particles overlap: thin them as they grow so the wave's crest never flares
+        // (they cross-fade with the solid picture so the sum stays even — no bright band on the wave)
+        float a = soft * vAlpha * uOpacity * smoothstep(0.02, 0.25, vS) * (1.0 - smoothstep(0.55, 0.95, vS)) * mix(0.75, 0.9, colour);
+        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 W = c.width, H = W / c.aspect, gx = Math.max(20, c.grains | 0), gy = Math.max(12, Math.round(gx / c.aspect)), per = gx * gy;
+    u.uW.value = W;
+    u.uH.value = H;
+    u.uGx.value = gx;
+    u.uGy.value = gy;
+    const rnd = mulberry32(9);
+    const quad = new THREE.PlaneGeometry(1, 1, 24, 16);
+    const pgeo = new THREE.InstancedBufferGeometry();
+    pgeo.index = quad.index;
+    pgeo.attributes.position = quad.attributes.position;
+    pgeo.attributes.uv = quad.attributes.uv;
+    const pi = new Float32Array(MAXI);
+    for (let i = 0; i < MAXI; i++)
+        pi[i] = i;
+    pgeo.setAttribute('aImg', new THREE.InstancedBufferAttribute(pi, 1));
+    pgeo.instanceCount = 0;
+    pgeo.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 30);
+    const pmat = new THREE.ShaderMaterial({ uniforms: u, vertexShader: plateVert, fragmentShader: plateFrag, glslVersion: THREE.GLSL3, side: THREE.DoubleSide, transparent: true, depthWrite: true, premultipliedAlpha: true });
+    const plates = new THREE.Mesh(pgeo, pmat);
+    plates.frustumCulled = false;
+    plates.raycast = () => { };
+    const geo = new THREE.BufferGeometry();
+    const a = new Float32Array(MAXI * per * 4);
+    for (let i = 0; i < MAXI; i++)
+        for (let j = 0; j < gy; j++)
+            for (let k = 0; k < gx; k++)
+                a.set([i, (k + 0.5) / gx, (j + 0.5) / gy, rnd()], ((i * gy + j) * gx + k) * 4);
+    geo.setAttribute('aG', new THREE.BufferAttribute(a, 4));
+    geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(MAXI * per * 3), 3));
+    geo.setDrawRange(0, 0);
+    geo.boundingSphere = new THREE.Sphere(new THREE.Vector3(), 30);
+    const gmat = new THREE.ShaderMaterial({ uniforms: u, vertexShader: grainVert, fragmentShader: grainFrag, glslVersion: THREE.GLSL3, transparent: true, depthWrite: false, premultipliedAlpha: true });
+    const points = new THREE.Points(geo, gmat);
+    points.frustumCulled = false;
+    points.raycast = () => { };
+    points.renderOrder = 1;
+    const pick = new THREE.Mesh(new THREE.PlaneGeometry(W, H), new THREE.MeshBasicMaterial({ visible: false }));
+    const object = new THREE.Group();
+    object.add(plates, points, pick);
+    const cfg = { ...c };
+    const scroll = createScroll(cfg, () => { });
+    scroll.st.pitch = W * c.spacing;
+    const layout = createLayout(W, H);
+    const st = { time: 0 };
+    const act = u.uAct.value;
+    const _inv = new THREE.Matrix4(), _p = new THREE.Vector3();
+    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; pgeo.instanceCount = scroll.st.count; geo.setDrawRange(0, scroll.st.count * per); act.fill(0); act[controls.index] = 1; },
+    });
+    object.userData.gallery = controls;
+    return {
+        object, controls, pickMesh: pick, materials: [pmat, gmat],
+        apply(k) { Object.assign(cfg, k); applyConfig(u, k); scroll.st.pitch = W * cfg.spacing; },
+        update(dt, pointer, state) {
+            dt = Math.min(dt, 0.05);
+            st.time += dt;
+            u.uTime.value = st.time;
+            if (state) {
+                u.uDpr.value = state.dpr;
+                u.uVh.value = state.h;
+            }
+            scroll.step(dt, pointer);
+            u.uS.value = scroll.st.s;
+            const n = scroll.st.count;
+            fillLayout(layout, u, scroll.st.s, n, cfg);
+            for (let i = 0; i < n; i++)
+                act[i] = approach(act[i], focusAt(i, scroll.st.s, n) > 0.5 ? 1 : 0, dt, cfg.changeTime);
+            // the cursor in the gallery's own frame (the lean turns the gallery; the mask must turn with it)
+            if (pointer) {
+                plates.parent.updateMatrix();
+                _inv.copy(plates.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 * 5));
+        },
+        dispose() { geo.dispose(); pgeo.dispose(); quad.dispose(); pmat.dispose(); gmat.dispose(); pick.geometry.dispose(); if (u.uTex.value)
+            u.uTex.value.dispose(); },
+    };
+}

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

@@ -0,0 +1,175 @@
+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;
+    aspect: number;
+    width: number;
+    pins: number;
+    relief: number;
+    pinSize: number;
+    base: number;
+    roughness: number;
+    metalness: number;
+    boardColor: string;
+    changeTime: number;
+    dim: number;
+    pointerMode: string;
+    pointerRadius: number;
+    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;
+    wave: number;
+    slant: number;
+    pointerStrength: number;
+};
+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;
+} | {
+    key: string;
+    options: string[];
+    color?: undefined;
+} | {
+    key: string;
+    color: boolean;
+    options?: undefined;
+})[];
+export declare const PRESETS: ({
+    name: string;
+    description: string;
+    patch: {
+        pins?: undefined;
+        metalness?: undefined;
+        roughness?: undefined;
+        relief?: undefined;
+        pinSize?: undefined;
+        base?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        pins: number;
+        metalness: number;
+        roughness: number;
+        relief: number;
+        pinSize?: undefined;
+        base?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        pins: number;
+        pinSize: number;
+        relief: number;
+        base: number;
+        metalness?: undefined;
+        roughness?: undefined;
+    };
+})[];
+export declare function createUniforms(): {
+    uRelief: {
+        value: number;
+    };
+    uBase: {
+        value: number;
+    };
+    uPin: {
+        value: number;
+    };
+    uPitch: {
+        value: number;
+    };
+    uGy: {
+        value: number;
+    };
+    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 applyConfig(u: any, c: any): void;
+export declare function build(u: any, c: any): any;
+//# sourceMappingURL=pinscreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pinscreen.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/pinscreen.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,OAAO;;;;;;;;;CAE4D,CAAC;AAEjF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKpB,CAAC;AACF,eAAO,MAAM,UAAU,UAA2C,CAAC;AACnE,eAAO,MAAM,aAAa,UAAY,CAAC;AACvC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;IASf,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAInB,CAAC;AACF,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAE7B;AACD,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAG/B;AA6BD,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}

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

@@ -0,0 +1,96 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// pinscreen.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.pinscreen) do not carry; its own autoplay is never used.
+// pinscreen — every picture is a bed of fine square pins, lit by the scene. Each pin's height follows the
+// picture's brightness at its place; its head carries the picture's colour. An inactive picture is a flat grey bed
+// of pin heads flush with the board. When it becomes the active one a soft wave crosses it and pushes the pins out
+// into a real relief in full colour; leaving lets them sink back. The cursor presses the pins in, like a hand on a
+// pin toy. Scene-lit (standard material): the studio's lights draw the relief; the gallery adds none.
+import * as THREE from 'three';
+import { BASE_DEFAULTS, BASE_GUI_MOTION, BASE_GUI_TAIL, LAYOUT_GUI, baseUniforms, applyBase, instanced, litMaterial, makeGallery, withLean } from '../kit/lookBase.js';
+export const catalog = { key: 'pinscreen', name: 'Pinscreen', camera: { position: [0.9, 0.35, 4.6], target: [0, 0, 0] },
+    description: 'Pictures as beds of fine pins lit by the scene: inactive ones are a flat grey bed, the active one is pushed out by a soft wave into a relief in full colour; the cursor presses the pins in. Use for product, tech and tactile showcases.',
+    tags: ['gallery', 'pins', 'relief', 'tactile', 'scene-lit', 'interactive'] };
+export const DEFAULTS = {
+    ...BASE_DEFAULTS, type: 'pinscreen', aspect: 1.4, width: 2.2, pins: 64, // structural: pins across
+    relief: 0.16, pinSize: 0.84, base: 0.12, roughness: 0.45, metalness: 0.15, boardColor: '#15161b',
+    changeTime: 2.0, dim: 0.42,
+    pointerMode: 'press', pointerRadius: 0.4,
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'width', 'pins'];
+export const POINTER_MODES = ['press'];
+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: 'width', min: 1, max: 4, step: 0.01 }, { key: 'pins', min: 24, max: 110, step: 1, tip: 'Pins across a picture' },
+    ...LAYOUT_GUI, ...BASE_GUI_MOTION,
+    { key: 'relief', min: 0, max: 0.5, step: 0.005, tip: 'How far the brightest pins stand out' }, { key: 'base', min: 0, max: 0.6, step: 0.01, tip: 'Relief of the darkest pins, as a share of the brightest' },
+    { key: 'pinSize', min: 0.3, max: 1, step: 0.01, tip: 'Pin width, as a share of the spacing' },
+    { key: 'roughness', min: 0, max: 1, step: 0.01 }, { key: 'metalness', min: 0, max: 1, step: 0.01 },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, ...BASE_GUI_TAIL,
+    { key: 'boardColor', color: true },
+];
+export const PRESETS = [
+    { name: 'Pinscreen', description: 'The default.', patch: {} },
+    { name: 'Steel pins', description: 'Fine metal pins, a deeper relief.', patch: { pins: 90, metalness: 0.75, roughness: 0.3, relief: 0.22 } },
+    { name: 'Blocks', description: 'Few fat pins, shallow.', patch: { pins: 36, pinSize: 0.94, relief: 0.1, base: 0.3 } },
+];
+export function createUniforms() {
+    return { ...baseUniforms(), uRelief: { value: 0.16 }, uBase: { value: 0.12 }, uPin: { value: 0.84 }, uPitch: { value: 0.03 }, uGy: { value: 46 } };
+}
+export function applyConfig(u, c) {
+    const set = applyBase(u, c, POINTER_MODES);
+    set('uRelief', c.relief);
+    set('uBase', c.base);
+    set('uPin', c.pinSize);
+}
+const vertex = {
+    head: /* glsl */ `uniform float uRelief, uBase, uPin, uPitch; varying vec3 vCol; varying float vAlpha;`,
+    body: /* glsl */ `
+        float img = aI.x; vec2 g = aI.zw; float act = actOf(img);
+        vec3 pic = textureLod(uTex, vec3(g, img), 1.5).rgb;
+        float lum = lumOf(pic);
+        vec2 cen = vec2((g.x - 0.5) * uW, (g.y - 0.5) * uH);
+        float w = waveAt(act, g);
+        float press = 1.0 - 0.92 * maskAt(cen);
+        float h = uRelief * (uBase + (1.0 - uBase) * lum) * w * press;
+        float top = step(0.49, position.z);
+        // the pin stands on the board: from just behind it (z = -0.01) up to its head at h
+        gPos = vec3(cen + position.xy * uPitch * uPin, mix(-0.01, h + 0.002, position.z + 0.5));
+        vec3 c = mix(fadedOf(pic), pic, smoothstep(0.0, 1.0, w));
+        vCol = c * mix(0.55, 1.0, top);                   // the head carries the picture, the sides are its shade
+        vAlpha = fadeAt(img);
+    `,
+};
+const fragment = {
+    head: /* glsl */ `varying vec3 vCol; varying float vAlpha;`,
+    body: /* glsl */ `diffuseColor.rgb = vCol * uIntensity; diffuseColor.a *= vAlpha * uOpacity; if (diffuseColor.a < 0.01) discard;`,
+};
+const boardVertex = {
+    head: /* glsl */ `varying float vAlpha;`,
+    body: /* glsl */ `gPos = vec3(position.x * uW, position.y * uH, -0.004); vAlpha = fadeAt(aI.x);`,
+};
+const boardFragment = { head: /* glsl */ `varying float vAlpha;`, body: /* glsl */ `diffuseColor.a *= vAlpha * uOpacity; if (diffuseColor.a < 0.01) discard;` };
+export function build(u, c) { return withLean(buildGallery(u, c), c); }
+function buildGallery(u, c) {
+    const W = c.width, H = W / c.aspect, gx = Math.max(8, c.pins | 0), gy = Math.max(6, Math.round(gx / c.aspect)), per = gx * gy;
+    u.uPitch.value = W / gx;
+    const pinGeo = instanced(new THREE.BoxGeometry(1, 1, 1), per, (k) => [((k % gx) + 0.5) / gx, (Math.floor(k / gx) + 0.5) / gy]);
+    const pinMat = litMaterial(u, 'pinscreen-pin', vertex, fragment, { roughness: c.roughness, metalness: c.metalness });
+    const pins = new THREE.Mesh(pinGeo, pinMat);
+    pins.frustumCulled = false;
+    pins.raycast = () => { };
+    pins.receiveShadow = true;
+    const boardGeo = instanced(new THREE.PlaneGeometry(1, 1), 1, () => [0.5, 0.5]);
+    const boardMat = litMaterial(u, 'pinscreen-board', boardVertex, boardFragment, { color: c.boardColor, roughness: 0.85 });
+    const board = new THREE.Mesh(boardGeo, boardMat);
+    board.frustumCulled = false;
+    board.raycast = () => { };
+    board.receiveShadow = true;
+    const g = makeGallery(u, c, { W, H, meshes: [pins, board], setCount: (n) => { pinGeo.instanceCount = n * per; boardGeo.instanceCount = n; } });
+    const apply = g.apply;
+    g.apply = (k) => { apply(k); applyConfig(u, k); if (k.roughness !== undefined)
+        pinMat.roughness = k.roughness; if (k.metalness !== undefined)
+        pinMat.metalness = k.metalness; if (k.boardColor)
+        boardMat.color.set(k.boardColor); };
+    return g;
+}