@3driseai/3drise-viewer 0.1.40 → 0.1.41

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

@@ -0,0 +1,179 @@
+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;
+    rows: number;
+    relief: number;
+    lineWidth: number;
+    smoothing: number;
+    lineColor: string;
+    fillColor: string;
+    fillOpacity: number;
+    changeTime: number;
+    wave: number;
+    slant: number;
+    dim: number;
+    pointerMode: string;
+    pointerRadius: number;
+    raise: 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;
+    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: {
+        rows?: undefined;
+        relief?: undefined;
+        lineWidth?: undefined;
+        smoothing?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        rows: number;
+        relief: number;
+        lineWidth: number;
+        smoothing?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        rows: number;
+        relief: number;
+        smoothing: number;
+        lineWidth: number;
+    };
+})[];
+export declare function createUniforms(): {
+    uRows: {
+        value: number;
+    };
+    uRelief: {
+        value: number;
+    };
+    uLine: {
+        value: number;
+    };
+    uSmooth: {
+        value: number;
+    };
+    uRaise: {
+        value: number;
+    };
+    uLineColor: {
+        value: THREE.Color;
+    };
+    uFillColor: {
+        value: THREE.Color;
+    };
+    uFillA: {
+        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=ridgelines.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ridgelines.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/ridgelines.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,OAAO;;;;;;;;;CAE+D,CAAC;AAEpF,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG7B;AACD,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAG/B;AA+CD,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}

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

@@ -0,0 +1,111 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// ridgelines.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.ridgelines) do not carry; its own autoplay is never used.
+// ridgelines — every picture is a stack of horizontal hairlines, each lifted by the brightness along its own row,
+// the rows set one behind another in depth so every ridge hides the lines behind it (the "joy plot" look). Each row
+// is a strip from its ridge down over the rows below: its top edge is the line (anti-aliased with fwidth), its body
+// is the fill that does the hiding. An inactive picture is flat grey lines over a dark fill. When it becomes the
+// active one a soft wave crosses it: behind the wave the ridges rise into the picture's own relief and the fills take
+// the picture's colour, so the picture is whole, drawn in ridges. The cursor raises the ridges near 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: 'ridgelines', name: 'Ridgelines', camera: { position: [0.5, 0.6, 4.5], target: [0, 0, 0] },
+    description: 'Pictures as stacked horizontal hairlines lifted by their brightness, each ridge hiding the lines behind it: inactive ones are flat grey lines, the active one rises into ridges and fills with the picture’s colour behind a soft wave; the cursor raises the ridges. Use for music, data, tech and editorial showcases.',
+    tags: ['gallery', 'ridgelines', 'lines', 'relief', 'joy-plot', 'interactive'] };
+export const DEFAULTS = {
+    ...BASE_DEFAULTS, type: 'ridgelines', aspect: 1.4, width: 2.2, rows: 64, // structural
+    relief: 0.15, lineWidth: 0.0035, smoothing: 1.8, lineColor: '#e8ecf4', fillColor: '#07080c', fillOpacity: 1,
+    changeTime: 2.0, wave: 0.4, slant: 0.1, dim: 0.55,
+    pointerMode: 'raise', pointerRadius: 0.5, raise: 0.08,
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'width', 'rows'];
+export const POINTER_MODES = ['raise'];
+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: 'rows', min: 12, max: 160, step: 1, tip: 'Ridgelines down a picture' },
+    ...LAYOUT_GUI, ...BASE_GUI_MOTION,
+    { key: 'relief', min: 0, max: 0.4, step: 0.005, tip: 'How high the brightest point lifts its ridge' }, { key: 'lineWidth', min: 0.001, max: 0.015, step: 0.0005, tip: 'Width of a ridgeline' },
+    { key: 'smoothing', min: 0, max: 5, step: 0.1, tip: 'How much the brightness is smoothed before it lifts the ridges' },
+    { key: 'fillOpacity', min: 0, max: 1, step: 0.01, tip: 'Opacity of an inactive picture’s fill (what hides the lines behind)' },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, ...BASE_GUI_TAIL, { key: 'raise', min: 0, max: 0.3, step: 0.005, tip: 'How far the cursor raises the ridges' },
+    { key: 'lineColor', color: true }, { key: 'fillColor', color: true },
+];
+export const PRESETS = [
+    { name: 'Ridgelines', description: 'The default.', patch: {} },
+    { name: 'Pulsar', description: 'Many fine rows, tall ridges.', patch: { rows: 110, relief: 0.16, lineWidth: 0.0025 } },
+    { name: 'Hills', description: 'Few rows, broad soft ridges.', patch: { rows: 28, relief: 0.07, smoothing: 3.2, lineWidth: 0.005 } },
+];
+export function createUniforms() {
+    return { ...baseUniforms(), uRows: { value: 64 }, uRelief: { value: 0.09 }, uLine: { value: 0.0035 }, uSmooth: { value: 1.8 }, uRaise: { value: 0.08 },
+        uLineColor: { value: new THREE.Color('#e8ecf4') }, uFillColor: { value: new THREE.Color('#07080c') }, uFillA: { value: 1 } };
+}
+export function applyConfig(u, c) {
+    const set = applyBase(u, c, POINTER_MODES);
+    set('uRelief', c.relief);
+    set('uLine', c.lineWidth);
+    set('uSmooth', c.smoothing);
+    set('uRaise', c.raise);
+    set('uLineColor', c.lineColor);
+    set('uFillColor', c.fillColor);
+    set('uFillA', c.fillOpacity);
+}
+const vert = /* glsl */ `
+    precision highp sampler2DArray;
+    uniform sampler2DArray uTex;
+    attribute vec4 aI;      // picture, row
+    ${baseGlsl}
+    uniform float uRows, uRelief, uSmooth, uRaise;
+    varying vec2 vUv; varying float vImg; varying float vD; varying float vW; varying float vAlpha;
+    void main(){
+        float img = aI.x, j = aI.y; float act = actOf(img);
+        float yj = (j + 0.5) / uRows;                               // the row's place, 0 at the bottom
+        vec2 g = vec2(position.x + 0.5, yj);
+        float L = lumOf(textureLod(uTex, vec3(g, img), uSmooth).rgb);
+        float w = waveAt(act, g);
+        vec2 p0 = vec2(position.x * uW, (yj - 0.5) * uH);
+        float h = (uRelief * L + uRaise * maskAt(p0)) * w;
+        float rowH = uH / uRows;
+        float top = step(0.0, position.y);
+        float yTop = p0.y + h, yBot = p0.y - rowH * 4.0;              // the fill reaches down over the rows in front
+        float y = mix(yBot, yTop, top);
+        vD = (1.0 - top) * (yTop - yBot);                            // distance below this row's line
+        vUv = vec2(g.x, clamp((y + uH * 0.5) / uH, 0.0, 1.0)); vImg = img; vW = w; vAlpha = fadeAt(img);
+        vec3 local = vec3(p0.x, max(y, -uH * 0.5), -j * 0.0025);      // rows further up stand further back
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(placeAt(img, local), 1.0);
+    }
+`;
+const frag = /* glsl */ `
+    ${fragHead}
+    precision highp sampler2DArray;
+    uniform sampler2DArray uTex;
+    ${baseGlsl}
+    uniform float uLine, uFillA; uniform vec3 uLineColor, uFillColor;
+    varying vec2 vUv; varying float vImg; varying float vD; varying float vW; varying float vAlpha;
+    void main(){
+        vec3 pic = texture(uTex, vec3(vUv, vImg)).rgb;
+        float fw = max(fwidth(vD), 1e-5);
+        float line = 1.0 - smoothstep(uLine - fw, uLine + fw, vD);
+        vec3 lineC = mix(fadedOf(pic) * 0.8 + uLineColor * uDim * 0.9, mix(uLineColor, pic * 1.4, 0.5), vW);
+        vec3 fill = mix(uFillColor, pic, vW);
+        vec3 c = mix(fill, lineC, line * mix(1.0, 0.45, vW));
+        float a = mix(mix(uFillA, 1.0, vW), 1.0, line) * 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, R = Math.max(4, c.rows | 0);
+    u.uRows.value = R;
+    const geo = instanced(new THREE.PlaneGeometry(1, 1, 180, 1), R, () => [0, 0]);
+    const mat = shaderMaterial(u, vert, frag);
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.frustumCulled = false;
+    mesh.raycast = () => { };
+    const g = makeGallery(u, c, { W, H, meshes: [mesh], setCount: (n) => { geo.instanceCount = n * R; } });
+    const apply = g.apply;
+    g.apply = (k) => { apply(k); applyConfig(u, k); };
+    return g;
+}

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

@@ -0,0 +1,152 @@
+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;
+    sheets: number;
+    separation: number;
+    smoothing: number;
+    roughness: number;
+    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[];
+})[];
+export declare const PRESETS: ({
+    name: string;
+    description: string;
+    patch: {
+        sheets?: undefined;
+        separation?: undefined;
+        smoothing?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        sheets: number;
+        separation: number;
+        smoothing?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        sheets: number;
+        separation: number;
+        smoothing: number;
+    };
+})[];
+export declare function createUniforms(): {
+    uSheets: {
+        value: number;
+    };
+    uSep: {
+        value: number;
+    };
+    uSmooth: {
+        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=shadowBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shadowBox.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/shadowBox.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,OAAO;;;;;;;;;CAE6D,CAAC;AAElF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIpB,CAAC;AACF,eAAO,MAAM,UAAU,UAA6C,CAAC;AACrE,eAAO,MAAM,aAAa,UAAW,CAAC;AACtC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;IAQf,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;IAInB,CAAC;AACF,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA0G;AACxI,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAAyG;AA4BzI,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}

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

@@ -0,0 +1,82 @@
+// The approved lab module, verbatim but for its import paths and the lab's picture loader (Claude outputs/gallery-lab/
+// shadowbox.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.shadowBox) do not carry; its own autoplay is never used.
+// shadowbox — "Shadow Box". Depth Layers made of cut paper and lit by the scene: every picture is split by its
+// own brightness into a few paper sheets, each cut along its level (the back sheet whole, every sheet in front
+// holding only what is brighter than its level), standing one behind another in a shallow box. Because the sheets
+// are real geometry lit by the scene and cast their own cut-out shadows (a matching depth material), every layer
+// throws a soft shadow onto the one behind it. An inactive picture's sheets are pressed together, grey and flat.
+// When it becomes the active one the sheets open into depth and take their colour; leaving presses them together
+// again. The cursor opens the sheets a little further. Scene-lit (standard material + shadows); the gallery adds no
+// light — the shadows are the studio lights'.
+import * as THREE from 'three';
+import { BASE_DEFAULTS, BASE_GUI_MOTION, BASE_GUI_TAIL, LAYOUT_GUI, baseUniforms, applyBase, instanced, litMaterial, litDepthMaterial, makeGallery, withLean } from '../kit/lookBase.js';
+export const catalog = { key: 'shadowBox', name: 'Shadow Box', camera: { position: [1.2, 0.35, 4.4], target: [0, 0, 0] },
+    description: 'Pictures as cut-paper layers in a shadow box, lit by the scene so each sheet casts a real soft shadow on the one behind: inactive ones are pressed flat and grey, the active one opens into depth in full colour. Use for editorial, craft, kids and storytelling showcases.',
+    tags: ['gallery', 'paper', 'layers', 'shadows', 'scene-lit', 'interactive'] };
+export const DEFAULTS = {
+    ...BASE_DEFAULTS, type: 'shadowBox', aspect: 1.4, width: 2.2, sheets: 5, // structural
+    separation: 0.1, smoothing: 2.6, roughness: 0.85, changeTime: 1.8, dim: 0.5,
+    pointerMode: 'open', pointerRadius: 0.6,
+};
+export const STRUCTURAL = ['imageUrls', 'aspect', 'width', 'sheets'];
+export const POINTER_MODES = ['open'];
+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: 'sheets', min: 2, max: 9, step: 1, tip: 'Paper sheets per picture' },
+    ...LAYOUT_GUI, ...BASE_GUI_MOTION,
+    { key: 'separation', min: 0, max: 0.4, step: 0.005, tip: 'Distance between the sheets when open' },
+    { key: 'smoothing', min: 0, max: 5, step: 0.1, tip: 'How much the brightness is smoothed before the sheets are cut (rounder cuts)' },
+    { key: 'roughness', min: 0, max: 1, step: 0.01 },
+    { key: 'pointerMode', options: ['none', ...POINTER_MODES] }, ...BASE_GUI_TAIL,
+];
+export const PRESETS = [
+    { name: 'Shadow box', description: 'The default.', patch: {} },
+    { name: 'Deep box', description: 'Few sheets far apart: long shadows.', patch: { sheets: 3, separation: 0.22 } },
+    { name: 'Diorama', description: 'Many close sheets.', patch: { sheets: 8, separation: 0.06, smoothing: 3.2 } },
+];
+export function createUniforms() { return { ...baseUniforms(), uSheets: { value: 5 }, uSep: { value: 0.1 }, uSmooth: { value: 2.6 } }; }
+export function applyConfig(u, c) { const set = applyBase(u, c, POINTER_MODES); set('uSep', c.separation); set('uSmooth', c.smoothing); }
+const vertex = {
+    head: /* glsl */ `uniform float uSheets, uSep; varying vec2 vUv; varying float vImg; varying float vK; varying float vE; varying float vAlpha;`,
+    body: /* glsl */ `
+        float img = aI.x, k = aI.y; float act = actOf(img);
+        float e = act * act * (3.0 - 2.0 * act);
+        vec2 p = vec2(position.x * uW, position.y * uH);
+        float open = e * (1.0 + 1.2 * maskAt(p));
+        gPos = vec3(p, k * (uSep * open + 0.003));                  // never quite coplanar: no z-fighting when pressed
+        vUv = position.xy + 0.5; vImg = img; vK = k; vE = e; vAlpha = fadeAt(img);
+    `,
+};
+const cut = /* glsl */ `
+    float L = lumOf(textureLod(uTex, vec3(vUv, vImg), uSmooth).rgb);
+    if (vK > 0.5 && L < vK / uSheets) discard;                      // each sheet is cut along its level
+`;
+const fragment = {
+    head: /* glsl */ `uniform float uSheets, uSmooth; varying vec2 vUv; varying float vImg; varying float vK; varying float vE; varying float vAlpha;`,
+    body: /* glsl */ `
+        ${cut}
+        vec3 pic = texture(uTex, vec3(vUv, vImg)).rgb;
+        diffuseColor.rgb = mix(fadedOf(pic) * 1.8, pic, vE) * uIntensity;
+        diffuseColor.a *= vAlpha * uOpacity; if (diffuseColor.a < 0.01) discard;
+    `,
+};
+const depthCut = { head: /* glsl */ `uniform float uSheets, uSmooth; varying vec2 vUv; varying float vImg; varying float vK; varying float vE; varying float vAlpha;`, body: cut + 'if (vAlpha < 0.5) discard;' };
+export function build(u, c) { return withLean(buildGallery(u, c), c); }
+function buildGallery(u, c) {
+    const W = c.width, H = W / c.aspect, N = Math.max(2, c.sheets | 0);
+    u.uSheets.value = N;
+    const geo = instanced(new THREE.PlaneGeometry(1, 1, 8, 6), N, () => [0, 0]);
+    const mat = litMaterial(u, 'shadowbox', vertex, fragment, { roughness: c.roughness });
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.frustumCulled = false;
+    mesh.raycast = () => { };
+    mesh.castShadow = true;
+    mesh.receiveShadow = true;
+    mesh.customDepthMaterial = litDepthMaterial(u, 'shadowbox', vertex, depthCut);
+    const g = makeGallery(u, c, { W, H, meshes: [mesh], setCount: (n) => { geo.instanceCount = n * N; }, dispose: () => mesh.customDepthMaterial.dispose() });
+    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/silk.d.ts

@@ -0,0 +1,140 @@
+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;
+    resolution: number;
+    layout: string;
+    spacing: number;
+    depth: number;
+    visible: number;
+    shape: number;
+    dim: number;
+    stiffness: number;
+    damping: number;
+    throwing: number;
+    wind: number;
+    gravity: number;
+    drag: number;
+    iterations: number;
+    fallTime: number;
+    sheen: number;
+    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: {
+        wind?: undefined;
+        gravity?: undefined;
+        fallTime?: undefined;
+        drag?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        wind: number;
+        gravity: number;
+        fallTime: number;
+        drag?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    patch: {
+        wind: number;
+        gravity: number;
+        drag: number;
+        fallTime?: undefined;
+    };
+})[];
+export declare function createUniforms(): {
+    uTex: {
+        value: any;
+    };
+    uKey: {
+        value: THREE.Vector3;
+    };
+    uKeyColor: {
+        value: THREE.Color;
+    };
+    uBackColor: {
+        value: THREE.Color;
+    };
+    uTrans: {
+        value: number;
+    };
+    uSheen: {
+        value: number;
+    };
+    uIntensity: {
+        value: number;
+    };
+    uOpacity: {
+        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=silk.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"silk.d.ts","sourceRoot":"","sources":["../../../../src/components/gallery/looks/silk.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,OAAO;;;;;;;;;CAE2E,CAAC;AAEhG,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQpB,CAAC;AACF,eAAO,MAAM,UAAU,UAAiD,CAAC;AACzE,eAAO,MAAM,aAAa,UAAsB,CAAC;AACjD,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAWf,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;IAInB,CAAC;AAEF,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAK7B;AACD,wBAAgB,WAAW,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,QAI/B;AAkFD,wBAAgB,KAAK,CAAC,CAAC,KAAA,EAAE,CAAC,KAAA,OAA6C"}