@3driseai/3drise-viewer 0.1.16 → 0.1.18

package/dist/components/ReactionDiffusionGrid.js

@@ -0,0 +1,376 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
+import { useObjectReady } from '../hooks/useObjectReady.js';
+import { useGridSurface } from '../hooks/useGridSurface.js';
+import { ReactionDiffusionGridMaterial } from '@3driseai/3drise-core';
+// Side-effect import registers <reactionDiffusionGridMaterial> via extend().
+void ReactionDiffusionGridMaterial;
+/** ReactionDiffusionGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export const defaultReactionDiffusionGridConfig = {
+    cellSize: 3,
+    size: 50,
+    flat: true,
+    segments: undefined,
+    lineMode: 0,
+    cellMode: 0,
+    lineWidth: 1.1,
+    sectionSize: 5,
+    sectionWidth: 1.2,
+    animSpeed: 1,
+    animScale: 0.5,
+    animIntensity: 0.6,
+    fadeDistance: undefined,
+    fadeStrength: 0.7,
+    displace: 0,
+    feed: 0.037,
+    kill: 0.06,
+    variation: 0.55,
+    tileCells: 7,
+    lineColor: '#7ff0d4',
+    sectionColor: '#f0a26a',
+    cellColor: '#0d4b52',
+    glowColor: '#2fd9c8',
+    bgColor: '#03080a',
+    bgOpacity: 0,
+    followMouse: false,
+    reveal: 1,
+    revealDuration: 0,
+};
+const gridFragHeader = /* glsl */ `
+  precision highp float;
+
+  uniform float u_time;
+  uniform float u_cellSize;
+  uniform float u_lineWidth;
+  uniform float u_sectionSize;
+  uniform float u_sectionWidth;
+  uniform vec3  u_lineColor;
+  uniform vec3  u_sectionColor;
+  uniform vec3  u_cellColor;
+  uniform vec3  u_glowColor;
+  uniform vec3  u_bgColor;
+  uniform float u_bgOpacity;
+  uniform float u_lineMode;
+  uniform float u_cellMode;
+  uniform float u_animSpeed;
+  uniform float u_animScale;
+  uniform float u_animIntensity;
+  uniform float u_fadeDistance;
+  uniform float u_fadeStrength;
+  uniform vec2  u_focus;
+  uniform float u_reveal;
+
+  varying vec2 vGridPos;
+
+  float lineAt(float c, float width, float fp){
+    float d = abs(fract(c - 0.5) - 0.5);
+    return 1.0 - clamp(d / max(fp * max(width, 0.05), 1e-6), 0.0, 1.0);
+  }
+`;
+const gridCommon = /* glsl */ `
+  const float PI  = 3.14159265359;
+  const float TAU = 6.28318530718;
+
+  float hash21(vec2 p){
+    p = fract(p * vec2(123.34, 456.21));
+    p += dot(p, p + 45.32);
+    return fract(p.x * p.y);
+  }
+`;
+const gridTail = /* glsl */ `
+    // ---- line animation --------------------------------------------------
+    float lineAnim = 1.0;
+    if (u_lineMode > 0.5){
+      if (u_lineMode < 1.5){
+        lineAnim = 0.5 + 0.5 * sin(cellDist * u_animScale - t);
+      } else if (u_lineMode < 2.5){
+        lineAnim = 0.5 + 0.5 * sin(flowCoord * u_animScale - t);
+      } else if (u_lineMode < 3.5){
+        float s = fract(scanCoord * 0.05 * u_animScale - t * 0.15);
+        lineAnim = 0.25 + smoothstep(0.0, 0.15, s) * (1.0 - smoothstep(0.15, 0.35, s));
+      } else {
+        lineAnim = 0.5 + 0.5 * sin(t);
+      }
+    }
+    lineAnim = mix(1.0, lineAnim, u_animIntensity);
+
+    // ---- cell fill -------------------------------------------------------
+    float cell = 0.0;
+    if (u_cellMode > 0.5){
+      if (u_cellMode < 1.5){
+        cell = 0.5 + 0.5 * sin(flowCoord * 0.5 * u_animScale - t);
+      } else if (u_cellMode < 2.5){
+        cell = 0.5 + 0.5 * sin(t * (0.6 + cellH) + cellH * TAU);
+      } else if (u_cellMode < 3.5){
+        cell = smoothstep(0.6, 1.0, sin(cellDist * u_animScale - t));
+      } else {
+        cell = step(0.5, cellH) * (0.5 + 0.5 * sin(t));
+      }
+    }
+    cell *= u_animIntensity * edgeKeep;
+
+    float tone = step(0.55, cellH);
+
+    vec3 col = u_bgColor * u_bgOpacity;
+    float a  = u_bgOpacity;
+
+    col += mix(u_cellColor, u_cellColor * 2.2, tone) * cell;
+    a = max(a, cell * 0.9);
+    float linesI = lines * lineAnim;
+    col += u_lineColor * linesI;            a = max(a, linesI);
+    float accentI = accent * lineAnim;
+    col += u_sectionColor * accentI;        a = max(a, accentI);
+    col += u_glowColor * (linesI * 0.2 + cell * 0.35) * u_animIntensity;
+
+    col = col * regionMask + extraCol;
+    a   = max(a * regionMask, extraA);
+
+    float fade = 1.0 - smoothstep(1.0 - u_fadeStrength, 1.0, fadeR);
+    col *= fade;
+    a   *= fade;
+
+    // ---- reveal ----------------------------------------------------------
+    // The build boundary sweeps outward from the focus point with a bright
+    // leading edge, so the grid reads as assembling itself.
+    if (u_reveal < 0.999){
+      float rd = length(vGridPos - u_focus) / max(u_fadeDistance, 1e-4);
+      float edge = u_reveal * 1.1;
+      float mask = 1.0 - smoothstep(edge - 0.05, edge, rd);
+      float front = mask * smoothstep(edge - 0.22, edge - 0.05, rd);
+      col = col * mask + u_glowColor * front * (a * 1.8 + 0.08);
+      a   = max(a * mask, front * 0.10);
+    }
+
+    if (a < 0.002) discard;
+    gl_FragColor = vec4(col, a);
+  }
+`;
+const gridVertexHead = /* glsl */ `
+  uniform float u_time;
+  uniform float u_cellSize;
+  uniform float u_displace;
+  uniform float u_animSpeed;
+  uniform float u_animScale;
+
+  varying vec2 vGridPos;
+`;
+// ---------------------------------------------------------------------------
+// Gray-Scott reaction-diffusion. Two chemicals diffuse at different rates and
+// react as u + 2v -> 3v: the autocatalyst v eats u, u is fed in at rate F and
+// v is removed at rate F + k. Because v diffuses at half the rate of u, an even
+// mixture is unstable (Turing instability) and the field breaks into fronts
+// that grow, split and heal. F and k pick the morphology: coral and labyrinths
+// near (0.037, 0.060), dividing spots near (0.030, 0.057), stable dots higher.
+// The simulation runs on a 256^2 float texture with periodic boundaries, so it
+// tiles seamlessly, and the plane just samples it.
+// ---------------------------------------------------------------------------
+const SIM_SIZE = 256;
+const fsVert = /* glsl */ `
+  varying vec2 vUv;
+  void main(){
+    vUv = uv;
+    gl_Position = vec4(position.xy, 0.0, 1.0);
+  }
+`;
+const simFrag = /* glsl */ `
+  precision highp float;
+  uniform sampler2D u_state;
+  uniform vec2  u_texel;
+  uniform float u_feed;
+  uniform float u_kill;
+  uniform float u_variation;
+  uniform float u_age;
+  varying vec2 vUv;
+
+  void main(){
+    vec2 e = u_texel;
+    vec4 c = texture2D(u_state, vUv);
+    // 9-point laplacian (0.2 orthogonal, 0.05 diagonal), wrapped by the texture
+    vec2 lap =
+        (texture2D(u_state, vUv + vec2( e.x, 0.0)).rg
+       +  texture2D(u_state, vUv + vec2(-e.x, 0.0)).rg
+       +  texture2D(u_state, vUv + vec2( 0.0, e.y)).rg
+       +  texture2D(u_state, vUv + vec2( 0.0,-e.y)).rg) * 0.2
+      + (texture2D(u_state, vUv + vec2( e.x, e.y)).rg
+       +  texture2D(u_state, vUv + vec2(-e.x, e.y)).rg
+       +  texture2D(u_state, vUv + vec2( e.x,-e.y)).rg
+       +  texture2D(u_state, vUv + vec2(-e.x,-e.y)).rg) * 0.05
+      - c.rg;
+
+    // F and k drift smoothly across the tile; both modulations are periodic in
+    // uv, so the torus still matches itself at the seam.
+    float sx = sin(6.2831853 * vUv.x);
+    float sy = sin(6.2831853 * vUv.y);
+    float cx = cos(6.2831853 * vUv.x);
+    float cy = cos(6.2831853 * vUv.y);
+    float F = u_feed + u_variation * 0.009 * (sx * cy) + 0.0006 * sin(u_age * 0.031);
+    float K = u_kill + u_variation * 0.004 * (cx * sy) + 0.0003 * cos(u_age * 0.023);
+
+    float uv2 = c.r * c.g * c.g;
+    float nu = c.r + (1.0 * lap.x - uv2 + F * (1.0 - c.r));
+    float nv = c.g + (0.5 * lap.y + uv2 - (F + K) * c.g);
+    gl_FragColor = vec4(clamp(nu, 0.0, 1.0), clamp(nv, 0.0, 1.0), 0.0, 1.0);
+  }
+`;
+const seedFrag = /* glsl */ `
+  precision highp float;
+  uniform float u_spots;
+  varying vec2 vUv;
+
+  float hash21s(vec2 p){
+    p = fract(p * vec2(123.34, 456.21));
+    p += dot(p, p + 45.32);
+    return fract(p.x * p.y);
+  }
+
+  void main(){
+    // a scatter of seeded blobs; everything else is pure substrate
+    vec2 g = vUv * 9.0;
+    vec2 id = floor(g);
+    vec2 f = fract(g) - 0.5;
+    float h = hash21s(id + 3.7);
+    vec2 off = (vec2(hash21s(id + 1.3), hash21s(id + 7.1)) - 0.5) * 0.5;
+    float d = length(f - off);
+    float blob = step(h, u_spots) * (1.0 - smoothstep(0.10, 0.22, d));
+    gl_FragColor = vec4(1.0 - 0.5 * blob, 0.25 * blob, 0.0, 1.0);
+  }
+`;
+function createExtraUniforms() {
+    return {
+        u_field: { value: null },
+        u_tileCells: { value: 7 },
+    };
+}
+/** The simulation: two half-float targets ping-ponged through the Gray-Scott step. */
+function createRuntime(u, renderer, c) {
+    const targetOptions = {
+        type: THREE.HalfFloatType,
+        format: THREE.RGBAFormat,
+        minFilter: THREE.LinearFilter,
+        magFilter: THREE.LinearFilter,
+        wrapS: THREE.RepeatWrapping,
+        wrapT: THREE.RepeatWrapping,
+        depthBuffer: false,
+        stencilBuffer: false,
+        generateMipmaps: false,
+    };
+    const simMaterial = new THREE.ShaderMaterial({
+        vertexShader: fsVert,
+        fragmentShader: simFrag,
+        uniforms: {
+            u_state: { value: null },
+            u_texel: { value: new THREE.Vector2(1 / SIM_SIZE, 1 / SIM_SIZE) },
+            u_feed: { value: 0.037 },
+            u_kill: { value: 0.06 },
+            u_variation: { value: 0.55 },
+            u_age: { value: 0 },
+        },
+        depthTest: false,
+        depthWrite: false,
+    });
+    const seedMaterial = new THREE.ShaderMaterial({
+        vertexShader: fsVert,
+        fragmentShader: seedFrag,
+        uniforms: { u_spots: { value: 0.3 } },
+        depthTest: false,
+        depthWrite: false,
+    });
+    const quadGeometry = new THREE.PlaneGeometry(2, 2);
+    const quad = new THREE.Mesh(quadGeometry, simMaterial);
+    quad.frustumCulled = false;
+    const scene = new THREE.Scene();
+    scene.add(quad);
+    return {
+        read: new THREE.WebGLRenderTarget(SIM_SIZE, SIM_SIZE, targetOptions),
+        write: new THREE.WebGLRenderTarget(SIM_SIZE, SIM_SIZE, targetOptions),
+        scene: scene,
+        camera: new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1),
+        quad: quad,
+        quadGeometry: quadGeometry,
+        simMaterial: simMaterial,
+        seedMaterial: seedMaterial,
+        seeded: false,
+        age: 0,
+        carry: 0,
+    };
+}
+function updateRuntime(rt, u, c, dt, renderer) {
+    const previousTarget = renderer.getRenderTarget();
+    if (!rt.seeded) {
+        rt.quad.material = rt.seedMaterial;
+        renderer.setRenderTarget(rt.read);
+        renderer.render(rt.scene, rt.camera);
+        rt.quad.material = rt.simMaterial;
+        rt.seeded = true;
+    }
+    const sim = rt.simMaterial.uniforms;
+    sim.u_feed.value = u.u_feed.value;
+    sim.u_kill.value = u.u_kill.value;
+    sim.u_variation.value = u.u_variation.value;
+    // fixed step count per second so the pattern grows at the same rate on any machine
+    rt.carry += Math.min(dt, 0.1) * 240 * Math.max(u.u_animSpeed.value, 0);
+    let steps = Math.floor(rt.carry);
+    rt.carry -= steps;
+    if (steps > 16)
+        steps = 16;
+    for (let i = 0; i < steps; i++) {
+        rt.age += 1;
+        sim.u_age.value = rt.age;
+        sim.u_state.value = rt.read.texture;
+        renderer.setRenderTarget(rt.write);
+        renderer.render(rt.scene, rt.camera);
+        const swap = rt.read;
+        rt.read = rt.write;
+        rt.write = swap;
+    }
+    renderer.setRenderTarget(previousTarget);
+    u.u_field.value = rt.read.texture;
+}
+function disposeRuntime(rt) {
+    rt.read.dispose();
+    rt.write.dispose();
+    rt.quadGeometry.dispose();
+    rt.simMaterial.dispose();
+    rt.seedMaterial.dispose();
+}
+/**
+ * A Gray-Scott reaction-diffusion field simulated on the GPU and sampled by the plane: coral, labyrinths and dividing spots grow, merge and keep evolving, wrapped seamlessly as a torus.
+ */
+export function ReactionDiffusionGrid({ config = defaultReactionDiffusionGridConfig, groupProps, onObjectReady, onObjectDispose }) {
+    const matRef = useRef(null);
+    const rootRef = useRef(null);
+    const meshRef = useRef(null);
+    useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
+    const { cellSize, size, segments, flat, lineMode, cellMode, lineWidth, sectionSize, sectionWidth, animSpeed, animScale, animIntensity, fadeDistance, fadeStrength, displace, feed, kill, variation, tileCells, lineColor, sectionColor, cellColor, glowColor, bgColor, bgOpacity, followMouse, reveal, revealDuration, } = config;
+    // the relief follows the pattern itself, which is a few texels wide
+    const segs = segments ?? (displace > 0 ? Math.min(512, Math.max(128, Math.ceil(size / Math.max(cellSize, 1e-4)) * 12)) : 1);
+    const fade = fadeDistance ?? size * 0.5;
+    const colors = useMemo(() => ({
+        line: new THREE.Color(lineColor),
+        section: new THREE.Color(sectionColor),
+        cell: new THREE.Color(cellColor),
+        glow: new THREE.Color(glowColor),
+        bg: new THREE.Color(bgColor),
+    }), [lineColor, sectionColor, cellColor, glowColor, bgColor]);
+    useGridSurface(matRef, meshRef, { followMouse, reveal, revealDuration });
+    // the simulation behind this grid: created on mount, stepped every frame
+    const runtimeRef = useRef(null);
+    useFrame((state, delta) => {
+        const mat = matRef.current;
+        if (!mat)
+            return;
+        if (!runtimeRef.current)
+            runtimeRef.current = createRuntime(mat.uniforms, state.gl, config);
+        updateRuntime(runtimeRef.current, mat.uniforms, config, Math.min(delta, 0.1), state.gl);
+    });
+    useEffect(() => () => {
+        if (runtimeRef.current) {
+            disposeRuntime(runtimeRef.current);
+            runtimeRef.current = null;
+        }
+    }, []);
+    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("reactionDiffusionGridMaterial", { ref: matRef, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, u_cellSize: cellSize, u_lineWidth: lineWidth, u_sectionSize: sectionSize, u_sectionWidth: sectionWidth, u_lineMode: lineMode, u_cellMode: cellMode, u_animSpeed: animSpeed, u_animScale: animScale, u_animIntensity: animIntensity, u_fadeDistance: fade, u_fadeStrength: fadeStrength, u_displace: displace, u_feed: feed, u_kill: kill, u_variation: variation, u_tileCells: tileCells, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, ReactionDiffusionGridMaterial.key)] }) }));
+}
+export default ReactionDiffusionGrid;

package/dist/components/WallpaperGrid.d.ts

@@ -0,0 +1,15 @@
+import type { ThreeElements } from '@react-three/fiber';
+import type { ObjectReadyProps } from '../types/objectReady';
+import type { WallpaperGridConfig } from '../types/gridConfigs';
+export interface WallpaperGridProps extends ObjectReadyProps {
+    config?: WallpaperGridConfig;
+    groupProps?: ThreeElements['group'];
+}
+/** WallpaperGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
+export declare const defaultWallpaperGridConfig: WallpaperGridConfig;
+/**
+ * Wallpaper-group kaleidoscope: a drifting lattice-periodic Fourier motif summed over the coset representatives of one of the 17 plane crystallographic groups. The runtime builds the group tables and crossfades from group to group.
+ */
+export declare function WallpaperGrid({ config, groupProps, onObjectReady, onObjectDispose }: WallpaperGridProps): import("react").JSX.Element;
+export default WallpaperGrid;
+//# sourceMappingURL=WallpaperGrid.d.ts.map

package/dist/components/WallpaperGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WallpaperGrid.d.ts","sourceRoot":"","sources":["../../src/components/WallpaperGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IACxD,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAKD,gGAAgG;AAChG,eAAO,MAAM,0BAA0B,EAAE,mBA6BxC,CAAC;AAocF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAmC,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,kBAAkB,+BAgFpI;AAED,eAAe,aAAa,CAAC"}