@3driseai/3drise-viewer 0.1.39 → 0.1.41

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

@@ -0,0 +1,113 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// flowlines.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.flowLines) do not carry; its own autoplay is never used.
+// flowlines — "Flow Lines". Every picture is a field of fine lines that flow like water through it: the level sets
+// of a stream function made of the line spacing, the picture's own brightness (the lines bend around its forms) and
+// a slow meander (domain-warped noise drifting in time), anti-aliased with fwidth. Along each line runs a soft dash
+// pattern moving with the flow, faster where the picture is bright. An inactive picture is thin grey dashed lines
+// drifting. When it becomes the active one a soft wave crosses it: behind the wave the dashes close into solid lines,
+// the lines thicken and take the picture's colour until they meet and the picture is whole; the flow keeps moving in
+// its fine grain. The cursor parts the lines around it. Self-coloured.
+import * as THREE from 'three';
+import { BASE_DEFAULTS, BASE_GUI_MOTION, BASE_GUI_TAIL, LAYOUT_GUI, baseUniforms, applyBase, baseGlsl, instanced, shaderMaterial, makeGallery, withLean, fragHead } from '../kit/lookBase.js';
+export const catalog = { key: 'flowLines', name: 'Flow Lines', camera: { position: [0.3, 0.15, 4.6], target: [0, 0, 0] },
+    description: 'Pictures as fine lines flowing like water around their own forms: inactive ones are thin grey dashed lines drifting, the active one closes the dashes and thickens the lines into the picture in full colour behind a soft wave; the cursor parts the lines. Use for wellness, nature, music and calm showcases.',
+    tags: ['gallery', 'flow', 'lines', 'streamlines', 'calm', 'interactive'] };
+export const DEFAULTS = {
+    ...BASE_DEFAULTS, type: 'flowLines', aspect: 1.4, width: 2.2,
+    lines: 64, bend: 2.2, meander: 0.6, flow: 0.35, dashes: 9, hairline: 0.22, smoothing: 2.4, changeTime: 2.2, dim: 0.6,
+    pointerMode: 'part', pointerRadius: 0.5, part: 1.6,
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'width'];
+export const POINTER_MODES = ['part'];
+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 },
+    ...LAYOUT_GUI, ...BASE_GUI_MOTION,
+    { key: 'lines', min: 16, max: 200, step: 1, tip: 'Lines across the picture' }, { key: 'bend', min: 0, max: 6, step: 0.01, tip: 'How much the picture’s forms bend the lines' },
+    { key: 'meander', min: 0, max: 2, step: 0.01, tip: 'Slow meander of the lines' }, { key: 'flow', min: 0, max: 2, step: 0.01, tip: 'Speed of the flow along the lines' },
+    { key: 'dashes', min: 0, max: 30, step: 0.5, tip: 'Dashes per picture width along an inactive line (0 = solid)' },
+    { key: 'hairline', min: 0.05, max: 0.8, step: 0.01, tip: 'Width of an inactive line, as a share of a bright line' },
+    { key: 'smoothing', min: 0, max: 5, step: 0.1, tip: 'How much the brightness is smoothed before it bends the lines' },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, ...BASE_GUI_TAIL, { key: 'part', min: 0, max: 4, step: 0.01, tip: 'How strongly the cursor parts the lines' },
+];
+export const PRESETS = [
+    { name: 'Flow', description: 'The default.', patch: {} },
+    { name: 'Silk water', description: 'Many fine lines, slow and smooth.', patch: { lines: 120, meander: 0.35, flow: 0.2, hairline: 0.16 } },
+    { name: 'Current', description: 'Few strong lines, quick flow.', patch: { lines: 36, flow: 0.9, dashes: 5, bend: 3 } },
+];
+export function createUniforms() {
+    return { ...baseUniforms(), uLines: { value: 64 }, uBend: { value: 2.2 }, uMeander: { value: 0.6 }, uFlowT: { value: 0 }, uDashes: { value: 9 }, uHair: { value: 0.22 }, uSmooth: { value: 2.4 }, uPart: { value: 1.6 } };
+}
+export function applyConfig(u, c) {
+    const set = applyBase(u, c, POINTER_MODES);
+    set('uLines', c.lines);
+    set('uBend', c.bend);
+    set('uMeander', c.meander);
+    set('uDashes', c.dashes);
+    set('uHair', c.hairline);
+    set('uSmooth', c.smoothing);
+    set('uPart', c.part);
+}
+const vert = /* glsl */ `
+    attribute vec4 aI;
+    ${baseGlsl}
+    varying vec2 vUv; varying vec2 vP; varying float vImg; varying float vAct; varying float vAlpha;
+    void main(){
+        float img = aI.x; vec2 g = position.xy + 0.5;
+        vec2 p = vec2(position.x * uW, position.y * uH);
+        vUv = g; vP = p; vImg = img; vAct = actOf(img); vAlpha = fadeAt(img);
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(placeAt(img, vec3(p, 0.0)), 1.0);
+    }
+`;
+const frag = /* glsl */ `
+    ${fragHead}
+    precision highp sampler2DArray;
+    uniform sampler2DArray uTex;
+    ${baseGlsl}
+    uniform float uLines, uBend, uMeander, uFlowT, uDashes, uHair, uSmooth, uPart;
+    varying vec2 vUv; varying vec2 vP; varying float vImg; varying float vAct; varying float vAlpha;
+    float h21(vec2 p){ p = fract(p * vec2(123.34, 456.21)); p += dot(p, p + 45.32); return fract(p.x * p.y); }
+    float vnoise(vec2 p){ vec2 i = floor(p), f = fract(p); vec2 w = f * f * (3.0 - 2.0 * f);
+        return mix(mix(h21(i), h21(i + vec2(1, 0)), w.x), mix(h21(i + vec2(0, 1)), h21(i + vec2(1, 1)), w.x), w.y); }
+    void main(){
+        vec3 pic = texture(uTex, vec3(vUv, vImg)).rgb;
+        float L = lumOf(textureLod(uTex, vec3(vUv, vImg), uSmooth).rgb);
+        float s = waveAt(vAct, vUv);
+        // the stream function: spacing + the picture's forms + a slow drifting meander (+ the cursor parting it)
+        vec2 q = vP * 1.1;
+        vec2 warp = vec2(vnoise(q + vec2(0.0, uTime * 0.05)), vnoise(q + vec2(5.2, -uTime * 0.04)));
+        float m = maskAt(vP);
+        float psi = vP.y * uLines / uH + uBend * L + uMeander * (vnoise(q * 1.3 + warp * 1.5 + uTime * 0.03) - 0.5) * 3.0
+                  + uPart * m * sign(vP.y - uPointer.y);
+        float dist = abs(fract(psi) - 0.5);
+        float px = max(fwidth(psi), 1e-4);
+        float bright = lumOf(pic);
+        float width = mix(0.5 * uHair * (0.3 + 0.7 * bright), 0.56, s * s);
+        float line = 1.0 - smoothstep(width - px, width + px, dist);
+        // dashes moving along the flow, closing into solid lines as the picture comes in
+        float along = vP.x / uW * uDashes - uFlowT * (0.4 + L) + h21(vec2(floor(psi), 3.7)) * 7.0;   // each line its own dash phase: no columns
+        float dash = uDashes < 0.01 ? 1.0 : smoothstep(0.12, 0.22, abs(fract(along) - 0.5));   // ~a third of each dash period is a gap
+        dash = mix(dash, 1.0, smoothstep(0.0, 0.6, s));
+        vec3 c = mix(fadedOf(pic) * 1.3, pic, s);
+        float a = line * dash * 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 W = c.width, H = W / c.aspect;
+    const geo = instanced(new THREE.PlaneGeometry(1, 1, 1, 1), 1, () => [0, 0]);
+    const mat = shaderMaterial(u, vert, frag);
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.frustumCulled = false;
+    mesh.raycast = () => { };
+    // the flow's phase is integrated on the CPU, so changing its speed never makes the dashes jump
+    const g = makeGallery(u, c, { W, H, meshes: [mesh], setCount: (n) => { geo.instanceCount = n; }, extra: (dt) => { u.uFlowT.value += dt * (g?.cfg.flow ?? c.flow); } });
+    const apply = g.apply;
+    g.apply = (k) => { apply(k); applyConfig(u, k); };
+    return g;
+}

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

@@ -0,0 +1,209 @@
+import * as THREE from 'three';
+export declare const FOLD_TYPES: string[];
+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;
+    panels: number;
+    foldType: string;
+    folded: number;
+    creases: number;
+    rollRadius: number;
+    crumple: number;
+    roughness: number;
+    paperColor: string;
+    changeTime: number;
+    dim: number;
+    pointerMode: string;
+    pointerRadius: number;
+    press: 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: {
+        foldType?: undefined;
+        panels?: undefined;
+        folded?: undefined;
+        rollRadius?: undefined;
+        crumple?: undefined;
+        creases?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        foldType: string;
+        panels: number;
+        folded: number;
+        rollRadius?: undefined;
+        crumple?: undefined;
+        creases?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        foldType: string;
+        rollRadius: number;
+        panels?: undefined;
+        folded?: undefined;
+        crumple?: undefined;
+        creases?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        foldType: string;
+        crumple: number;
+        panels: number;
+        folded?: undefined;
+        rollRadius?: undefined;
+        creases?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        panels: number;
+        folded: number;
+        creases: number;
+        foldType?: undefined;
+        rollRadius?: undefined;
+        crumple?: undefined;
+    };
+})[];
+export declare function createUniforms(): {
+    uF: {
+        value: number;
+    };
+    uType: {
+        value: number;
+    };
+    uFold: {
+        value: number;
+    };
+    uCrease: {
+        value: number;
+    };
+    uRoll: {
+        value: number;
+    };
+    uCrumple: {
+        value: number;
+    };
+    uPress: {
+        value: number;
+    };
+    uPaper: {
+        value: THREE.Color;
+    };
+    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=fold.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fold.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/fold.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,UAAU,UAA2D,CAAC;AAEnF,eAAO,MAAM,OAAO;;;;;;;;;CAE2D,CAAC;AAEhF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKpB,CAAC;AACF,eAAO,MAAM,UAAU,UAA6C,CAAC;AACrE,eAAO,MAAM,aAAa,UAAY,CAAC;AACvC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;IAUf,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAQnB,CAAC;AACF,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAE7B;AACD,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAK/B;AAsED,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}

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

@@ -0,0 +1,155 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// fold.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.fold) do not carry; its own autoplay is never used.
+// fold — every picture is a sheet of paper, lit by the scene, folded one of several ways (foldType). The folded
+// sheet is a closed-form surface P(u, v, e) of the flat sheet's coordinates and the unfold progress e (0 = folded
+// tight, grey; 1 = flat, full colour, with soft creases left over); its normals are taken from the surface itself
+// (finite differences), so the scene's lights draw every ridge. When a picture becomes the active one it unfolds and
+// comes to colour; leaving folds it back up. The cursor presses a gentle dent into the paper.
+//
+//   accordion  F equal panels alternately tilted ±α: width W·cos α, ridges (W/F)·sin α deep.
+//   miura      a herringbone fold: accordion columns whose creases zig-zag row by row (the Miura-ori look),
+//              with shallower cross folds, so the sheet shrinks both ways.
+//   fan        accordion pleats pinched toward the bottom edge, like a closed hand fan opening.
+//   roll       rolled up into a scroll (a tightening spiral) that unrolls across the sheet.
+//   curl       a page curled from a corner along a diagonal, uncurling flat.
+//   crumple    crumpled into ridged creases (ridged noise) that smooth out as the paper is pressed flat.
+//
+// Scene-lit (standard material): the studio's lights draw the ridges; 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 FOLD_TYPES = ['accordion', 'miura', 'fan', 'roll', 'curl', 'crumple'];
+export const catalog = { key: 'fold', name: 'Fold', camera: { position: [1.0, 0.45, 4.5], target: [0, 0, 0] },
+    description: 'Pictures printed on paper folded in one of six ways (accordion, herringbone, fan, scroll, page curl, crumple) and lit by the scene: inactive ones are folded tight and grey, the active one unfolds flat into full colour; the cursor presses a dent into it. Use for print, editorial, fashion and craft showcases.',
+    tags: ['gallery', 'paper', 'fold', 'origami', 'scene-lit', 'interactive'] };
+export const DEFAULTS = {
+    ...BASE_DEFAULTS, type: 'fold', aspect: 1.4, width: 2.2, panels: 10, // structural
+    foldType: 'accordion', folded: 74, creases: 4, rollRadius: 0.12, crumple: 0.3, roughness: 0.75, paperColor: '#d9d4cb',
+    changeTime: 1.6, dim: 0.5,
+    pointerMode: 'press', pointerRadius: 0.55, press: 0.07,
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'width', 'panels'];
+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: 'panels', min: 2, max: 30, step: 1, tip: 'Panels across a picture (the fold’s scale)' },
+    { key: 'foldType', options: FOLD_TYPES, tip: 'How the paper is folded' },
+    ...LAYOUT_GUI, ...BASE_GUI_MOTION,
+    { key: 'folded', min: 10, max: 88, step: 1, tip: 'Fold angle of an inactive picture (degrees; accordion, herringbone, fan)' }, { key: 'creases', min: 0, max: 15, step: 0.5, tip: 'The soft creases an unfolded sheet keeps (degrees)' },
+    { key: 'rollRadius', min: 0.03, max: 0.4, step: 0.005, tip: 'Radius of the scroll and the page curl' }, { key: 'crumple', min: 0, max: 1, step: 0.01, tip: 'Depth of the crumpled creases' },
+    { key: 'roughness', min: 0, max: 1, step: 0.01 },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, ...BASE_GUI_TAIL, { key: 'press', min: 0, max: 0.3, step: 0.005, tip: 'Depth of the cursor’s dent' },
+    { key: 'paperColor', color: true },
+];
+export const PRESETS = [
+    { name: 'Accordion', description: 'The default.', patch: {} },
+    { name: 'Herringbone', description: 'A Miura-like fold that shrinks both ways.', patch: { foldType: 'miura', panels: 12, folded: 70 } },
+    { name: 'Hand fan', description: 'Narrow pleats pinched at the bottom.', patch: { foldType: 'fan', panels: 22, folded: 80 } },
+    { name: 'Scroll', description: 'Rolled up, unrolling across.', patch: { foldType: 'roll', rollRadius: 0.1 } },
+    { name: 'Page curl', description: 'Curled from a corner.', patch: { foldType: 'curl', rollRadius: 0.16 } },
+    { name: 'Crumpled', description: 'Crumpled paper pressed flat.', patch: { foldType: 'crumple', crumple: 0.35, panels: 14 } },
+    { name: 'Screen', description: 'A three-panel screen, half open when inactive.', patch: { panels: 3, folded: 45, creases: 8 } },
+];
+export function createUniforms() {
+    return { ...baseUniforms(), uF: { value: 10 }, uType: { value: 0 }, uFold: { value: 1.29 }, uCrease: { value: 0.07 }, uRoll: { value: 0.12 }, uCrumple: { value: 0.5 }, uPress: { value: 0.07 }, uPaper: { value: new THREE.Color('#d9d4cb') } };
+}
+export function applyConfig(u, c) {
+    const set = applyBase(u, c, POINTER_MODES);
+    set('uPress', c.press);
+    set('uPaper', c.paperColor);
+    set('uRoll', c.rollRadius);
+    set('uCrumple', c.crumple);
+    if (c.folded !== undefined)
+        u.uFold.value = c.folded * Math.PI / 180;
+    if (c.creases !== undefined)
+        u.uCrease.value = c.creases * Math.PI / 180;
+    if (c.foldType !== undefined)
+        u.uType.value = Math.max(0, FOLD_TYPES.indexOf(c.foldType));
+}
+const vertex = {
+    head: /* glsl */ `
+        uniform float uF, uType, uFold, uCrease, uRoll, uCrumple, uPress;
+        varying vec2 vUv; varying float vImg; varying float vE; varying float vShade; varying float vAlpha;
+        float tri(float t){ float s2 = fract(t * 0.5) * 2.0; return s2 < 1.0 ? s2 : 2.0 - s2; }    // 0 valley .. 1 ridge
+        float h21(vec2 p){ p = fract(p * vec2(123.34, 456.21)); p += dot(p, p + 45.32); return fract(p.x * p.y); }
+        float vnoise(vec2 p){ vec2 i = floor(p), f = fract(p); vec2 w = f * f * (3.0 - 2.0 * f);
+            return mix(mix(h21(i), h21(i + vec2(1, 0)), w.x), mix(h21(i + vec2(0, 1)), h21(i + vec2(1, 1)), w.x), w.y); }
+        float ridged(vec2 p){ float s = 0.0, a = 0.5; for (int k = 0; k < 2; k++){ s += a * (1.0 - abs(vnoise(p) * 2.0 - 1.0)); p = p * 2.03 + 7.1; a *= 0.5; } return s; }
+        /** The folded sheet: flat coordinates uv (0..1) → local position, at unfold progress e. */
+        vec3 foldAt(vec2 uv, float e){
+            float al = mix(uFold, uCrease, e), pw = uW / uF;
+            vec2 q = vec2((uv.x - 0.5) * uW, (uv.y - 0.5) * uH);
+            vec3 p;
+            if (uType < 0.5) {                                   // accordion
+                p = vec3(q.x * cos(al), q.y, pw * sin(al) * (tri(uv.x * uF) - 0.5));
+            } else if (uType < 1.5) {                            // herringbone (Miura-like)
+                float Fy = max(2.0, floor(uF * uH / uW + 0.5)), ph = uH / Fy, be = al * 0.45;
+                float t = uv.x * uF + 0.5 * tri(uv.y * Fy);       // the column creases zig-zag row by row
+                p = vec3(q.x * cos(al), q.y * cos(be), pw * sin(al) * (tri(t) - 0.5) + ph * sin(be) * (tri(uv.y * Fy) - 0.5));
+            } else if (uType < 2.5) {                            // fan: pleats pinched toward the bottom edge
+                float a2 = al * mix(1.0, 0.35, uv.y);
+                p = vec3(q.x * cos(a2), q.y, pw * sin(a2) * (tri(uv.x * uF) - 0.5));
+            } else if (uType < 4.5) {                            // roll (scroll) / curl (page corner)
+                vec2 dir = uType < 3.5 ? vec2(1.0, 0.0) : normalize(vec2(1.0, 0.75));
+                float span = abs(dir.x) * uW + abs(dir.y) * uH;
+                float a = dot(q, dir) + span * 0.5;              // 0 .. span along the unrolling direction
+                float a0 = uType < 3.5 ? e * span : mix(span * 0.5, span, e);   // the flat part reaches this far (a curl is half over when inactive)
+                p = vec3(q, 0.0);
+                if (a > a0) {
+                    float s = a - a0, R = uRoll, th = s / R;
+                    float Rr = max(R - 0.006 * th, R * 0.35);     // a tightening spiral: the layers never meet
+                    p.xy += dir * (Rr * sin(th) - s);
+                    p.z = Rr * (1.0 - cos(th));
+                }
+                if (uType < 3.5) p.x += (1.0 - e) * uW * 0.5;    // the scroll sits centred while rolled
+            } else {                                             // crumple
+                float amp = 1.0 - e;
+                float n = ridged(uv * vec2(uF * 0.35, uF * 0.35 * uH / uW));
+                p = vec3(q * (1.0 - 0.22 * amp * uCrumple), uCrumple * 0.16 * uW / max(uF * 0.25, 1.0) * amp * (n - 0.5) * 4.0);
+            }
+            return p;
+        }
+    `,
+    body: /* glsl */ `
+        float img = aI.x; float act = actOf(img);
+        float e = act * act * (3.0 - 2.0 * act);
+        vec2 uv = position.xy + 0.5;
+        vec3 p = foldAt(uv, e);
+        // normals from the surface itself (finite differences), so every fold type lights correctly
+        float d = 1.0 / 256.0;
+        vec3 pu = foldAt(uv + vec2(d, 0.0), e) - p, pv = foldAt(uv + vec2(0.0, d), e) - p;
+        vec3 n = normalize(cross(pu, pv));
+        float m = maskAt(p.xy);
+        p -= n * uPress * m;
+        gPos = p; gNrm = n;
+        vUv = uv; vImg = img; vE = e; vAlpha = fadeAt(img);
+        vShade = 1.0 - 0.2 * (1.0 - e) * (1.0 - abs(n.z));      // steep faces a touch darker while folded
+    `,
+};
+const fragment = {
+    head: /* glsl */ `uniform vec3 uPaper; varying vec2 vUv; varying float vImg; varying float vE; varying float vShade; varying float vAlpha;`,
+    body: /* glsl */ `
+        vec3 pic = texture(uTex, vec3(vUv, vImg)).rgb;
+        vec3 grey = mix(uPaper * 0.5, fadedOf(pic) * 2.0, 0.6);
+        diffuseColor.rgb = mix(grey, pic, vE) * vShade * uIntensity;
+        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, F = Math.max(1, c.panels | 0);
+    u.uF.value = F;
+    // enough vertices for every fold type: 8 per panel across (a vertex on every crease), the rolls and crumples
+    const sx = F * Math.max(8, Math.ceil(120 / F)), sy = Math.max(Math.round(F * 8 / c.aspect), 72);
+    const geo = instanced(new THREE.PlaneGeometry(1, 1, sx, sy), 1, () => [0, 0]);
+    const mat = litMaterial(u, 'fold', vertex, fragment, { roughness: c.roughness });
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.frustumCulled = false;
+    mesh.raycast = () => { };
+    mesh.receiveShadow = true;
+    const g = makeGallery(u, c, { W, H, meshes: [mesh], setCount: (n) => { geo.instanceCount = n; } });
+    const apply = g.apply;
+    g.apply = (k) => { apply(k); applyConfig(u, k); if (k.roughness !== undefined)
+        mat.roughness = k.roughness; };
+    return g;
+}

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

@@ -0,0 +1,133 @@
+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;
+    thickness: number;
+    layout: string;
+    spacing: number;
+    depth: number;
+    visible: number;
+    shape: number;
+    dim: number;
+    focusLift: number;
+    stiffness: number;
+    damping: number;
+    throwing: number;
+    turnTime: number;
+    turnAngle: number;
+    edgeGlow: number;
+    roughness: number;
+    ior: number;
+    tint: string;
+    edgeColor: 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: {
+        thickness?: undefined;
+        roughness?: undefined;
+        tint?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        thickness: number;
+        roughness: number;
+        tint?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        thickness: number;
+        roughness: number;
+        tint: string;
+    };
+})[];
+export declare function createUniforms(): {
+    uTex: {
+        value: any;
+    };
+    uIntensity: {
+        value: number;
+    };
+    uOpacity: {
+        value: number;
+    };
+    uKey: {
+        value: THREE.Vector3;
+    };
+    uEdgeColor: {
+        value: THREE.Color;
+    };
+    uEdgeGlow: {
+        value: number;
+    };
+    uPointerColor: {
+        value: THREE.Color;
+    };
+};
+export declare function applyConfig(u: any, c: any): void;
+export declare function build(u: any, c: any): any;
+//# sourceMappingURL=glassPanes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"glassPanes.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/glassPanes.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,OAAO;;;;;;;;;CAEuD,CAAC;AAE5E,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQpB,CAAC;AACF,eAAO,MAAM,UAAU,UAAgD,CAAC;AACxE,eAAO,MAAM,aAAa,UAAW,CAAC;AACtC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAUf,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;IAInB,CAAC;AAEF,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;EAE7B;AACD,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAG/B;AAwCD,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}