@3driseai/3drise-viewer 0.1.16 → 0.1.17

package/dist/components/effects/SmokeRingEffect.js

@@ -1,161 +1,286 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useMemo } from 'react';
-import { useFrame } from '@react-three/fiber';
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
 import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
 import { useObjectReady } from '../../hooks/useObjectReady.js';
-// ── Per-ring puff shader (one Points per ring — GPU computes torus positions) ──
+/**
+ * Physically simulated vortex rings.
+ *
+ * A tiny vortex-filament simulation runs on the CPU (at most 4 rings): each
+ * ring moves at Kelvin's self-induced speed U = G/(4 pi R) (ln(8R/a) - 1/4),
+ * rings push each other through Biot-Savart induction (so pairs leapfrog),
+ * entrain air and widen, and lose circulation to viscosity. The GPU places
+ * smoke particles in each ring's Rankine core, spins them around it and adds
+ * a Widnall-style wobble as the ring ages.
+ *
+ * Launch settings are read from uniforms, so keyframe animations drive them too.
+ */
+const PRE_NORMAL = { transparent: true, depthWrite: false, blending: THREE.NormalBlending, premultipliedAlpha: true };
+const RING_SLOTS = 4;
+const PARTICLES_PER_RING = 1400;
+function mulberry32(seed) {
+    return () => {
+        seed |= 0;
+        seed = (seed + 0x6d2b79f5) | 0;
+        let r = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+        r = (r + Math.imul(r ^ (r >>> 7), 61 | r)) ^ r;
+        return ((r ^ (r >>> 14)) >>> 0) / 4294967296;
+    };
+}
+function buildRingParticles() {
+    const rand = mulberry32(23);
+    const n = RING_SLOTS * PARTICLES_PER_RING;
+    const aParticle = new Float32Array(n * 4);
+    const aSize = new Float32Array(n);
+    for (let s = 0; s < RING_SLOTS; s++) {
+        for (let i = 0; i < PARTICLES_PER_RING; i++) {
+            const k = s * PARTICLES_PER_RING + i;
+            aParticle[k * 4] = s;
+            aParticle[k * 4 + 1] = rand() * Math.PI * 2;
+            // most smoke sits in the core, a thinner halo trails outside it
+            aParticle[k * 4 + 2] = rand() < 0.75 ? Math.sqrt(rand()) : 1 + rand() * 1.2;
+            aParticle[k * 4 + 3] = rand() * Math.PI * 2;
+            aSize[k] = 0.5 + rand() * 0.9;
+        }
+    }
+    return { count: n, aParticle, aSize };
+}
+function createRingSim() {
+    return {
+        rings: Array.from({ length: RING_SLOTS }, () => ({ alive: false, R: 0, Z: 0, a: 0, G: 0, age: 0, theta: 0, alpha: 0, seed: 0 })),
+        timer: 0,
+        launches: 0,
+    };
+}
+/** Advances the rings by dt and writes uRingA (R, Z, a, age) and uRingB (G, alpha, theta, seed) per slot. */
+function stepRingSim(sim, dt, p, outA, outB) {
+    const bound = p.bound;
+    const maxRings = Math.round(Math.min(Math.max(p.ringCount, 1), RING_SLOTS));
+    const R0 = bound * 0.6;
+    const a0 = Math.max(bound * p.thickness * 0.55, R0 * 0.05);
+    const U0 = bound * p.riseSpeed * 0.9;
+    // Kelvin's self-induced speed: U = G/(4 pi R) (ln(8R/a) - 1/4)
+    const kelvin = (R, a) => Math.log(8 * R / a) - 0.25;
+    const G0 = (U0 * 4 * Math.PI * R0) / kelvin(R0, a0);
+    sim.timer -= dt;
+    const alive = sim.rings.filter((r) => r.alive).length;
+    const pair = p.leapfrog && maxRings >= 2;
+    if (sim.timer <= 0 && alive + (pair ? 2 : 1) <= maxRings) {
+        const spawn = (dz, dr) => {
+            const r = sim.rings.find((x) => !x.alive);
+            if (!r)
+                return;
+            Object.assign(r, { alive: true, R: R0 * dr, Z: bound * 0.55 + dz, a: a0, G: G0, age: 0, theta: 0, alpha: 0, seed: (sim.launches++ * 1.618) % 6.283 });
+        };
+        if (pair) {
+            spawn(0, 1);
+            spawn(-R0 * 0.55, 1);
+        }
+        else
+            spawn(0, 1);
+        sim.timer = Math.max(p.intervalSeconds, 0.3) * (pair ? 1.8 : 1);
+    }
+    const sub = 3;
+    const h = dt / sub;
+    const live = sim.rings.filter((r) => r.alive);
+    for (let s = 0; s < sub; s++) {
+        const vel = live.map((ri) => {
+            let vz = (ri.G / (4 * Math.PI * ri.R)) * kelvin(ri.R, ri.a);
+            let vr = 0;
+            if (p.leapfrog) {
+                for (const rj of live) {
+                    if (rj === ri)
+                        continue;
+                    const [ur, uz] = ringInduced(ri.R, ri.Z, rj.R, rj.Z, rj.G, rj.a);
+                    vr += ur;
+                    vz += uz;
+                }
+            }
+            return [vr, vz];
+        });
+        live.forEach((ri, k) => {
+            ri.R += (vel[k][0] + 0.04 * vel[k][1]) * h; // entrainment slowly widens the ring
+            ri.R = Math.max(ri.R, R0 * 0.3);
+            ri.Z += vel[k][1] * h;
+            ri.a += 0.015 * Math.abs(vel[k][1]) * h;
+            ri.G *= Math.exp(-0.12 * h); // viscous decay
+            // flow runs up through the ring and down outside it, so the core turns this way
+            ri.theta -= (ri.G / (2 * Math.PI * ri.a * ri.a)) * h * 0.25;
+            ri.age += h;
+        });
+    }
+    const maxR = bound * Math.max(p.expansionRadius, 1.2);
+    const maxZ = bound * (1.2 + p.expansionRadius);
+    for (const r of sim.rings) {
+        if (!r.alive) {
+            r.alpha = 0;
+            continue;
+        }
+        const fadeIn = Math.min(r.age / 0.4, 1);
+        const outR = 1 - smooth(maxR * 0.75, maxR, r.R);
+        const outZ = 1 - smooth(maxZ * 0.6, maxZ, r.Z);
+        const outG = smooth(G0 * 0.12, G0 * 0.3, r.G);
+        r.alpha = fadeIn * Math.min(outR, outZ, outG);
+        if (r.age > 1 && r.alpha < 0.003)
+            r.alive = false;
+    }
+    sim.rings.forEach((r, i) => {
+        outA[i * 4] = r.R;
+        outA[i * 4 + 1] = r.Z;
+        outA[i * 4 + 2] = r.a;
+        outA[i * 4 + 3] = r.age;
+        outB[i * 4] = r.G;
+        outB[i * 4 + 1] = r.alive ? r.alpha : 0;
+        outB[i * 4 + 2] = r.theta;
+        outB[i * 4 + 3] = r.seed;
+    });
+}
+/** Induced (radial, axial) velocity at (R, Z) from a circular vortex filament (Rj, Zj, G, a). */
+function ringInduced(R, Z, Rj, Zj, G, a) {
+    const N = 48;
+    let vr = 0, vz = 0;
+    const dphi = (Math.PI * 2) / N;
+    for (let k = 0; k < N; k++) {
+        const ph = (k + 0.5) * dphi;
+        const c = Math.cos(ph), s = Math.sin(ph);
+        // filament point and tangent (x, y=axial, z)
+        const rx = R - Rj * c, ry = Z - Zj, rz = -Rj * s;
+        const dlx = -Rj * s * dphi, dlz = Rj * c * dphi;
+        const d2 = rx * rx + ry * ry + rz * rz + a * a;
+        const inv = 1 / (d2 * Math.sqrt(d2));
+        // (dl x r): dl = (dlx, 0, dlz)
+        const cx = 0 * rz - dlz * ry;
+        const cy = dlz * rx - dlx * rz;
+        vr += cx * inv;
+        vz += cy * inv;
+    }
+    // sign chosen so a ring with G > 0 induces +y flow through its own centre
+    const f = -G / (4 * Math.PI);
+    return [vr * f, vz * f];
+}
+function smooth(e0, e1, x) {
+    const t = Math.min(Math.max((x - e0) / (e1 - e0), 0), 1);
+    return t * t * (3 - 2 * t);
+}
 const ringVert = /* glsl */ `
-  attribute float aAngle;    // 0..TAU position around torus
-  attribute float aPuff;     // sub-angle within tube cross-section 0..TAU
-  attribute float aPhase;
-
-  uniform float uProgress;   // 0=born, 1=dead
-  uniform float uMaxRadius;
-  uniform float uThickness;  // tube radius
-  uniform float uRiseSpeed;  // Y lift per unit progress
-  uniform float uBaseY;
-  uniform float u_time;
-
+  attribute vec4 aParticle;       // x: ring slot, y: toroidal angle, z: rho (core units), w: poloidal phase
+  attribute float aSize;
+  uniform vec4  uRingA[4];        // R, Z, core radius a, age
+  uniform vec4  uRingB[4];        // circulation, alpha, core rotation angle, seed
+  uniform float uWobble;
+  uniform float uIntensity;
   varying float vAlpha;
-
-  void main() {
-    if (uProgress < 0.0 || uProgress > 1.0) {
+  varying float vShade;
+  void main(){
+    int slot = int(aParticle.x + 0.5);
+    vec4 A = uRingA[slot];
+    vec4 B = uRingB[slot];
+    if (B.y < 0.002){
       gl_PointSize = 0.0;
-      gl_Position  = vec4(0.0);
+      gl_Position = vec4(2.0, 2.0, 2.0, 1.0);
       vAlpha = 0.0;
+      vShade = 0.0;
       return;
     }
-
-    float ringR = uMaxRadius * uProgress;
-
-    // Tube cross-section wiggles outward slightly as ring expands
-    float tubeR = uThickness * (0.8 + 0.4 * uProgress);
-    float tubePhi = aPuff + u_time * 0.4 + aPhase;
-    float offR = tubeR * cos(tubePhi);
-    float offY = tubeR * sin(tubePhi);
-
-    float r   = ringR + offR;
-    float x   = cos(aAngle) * r;
-    float z   = sin(aAngle) * r;
-    float y   = uBaseY + uProgress * uRiseSpeed + offY;
-
-    // Puff grows then fades
-    float lifeAlpha = smoothstep(0.0, 0.12, uProgress) * smoothstep(1.0, 0.65, uProgress);
-    vAlpha = lifeAlpha;
-
-    float puffSize = uThickness * 50.0 * lifeAlpha;
-
-    vec4 mv = modelViewMatrix * vec4(x, y, z, 1.0);
-    gl_PointSize = puffSize * (200.0 / -mv.z);
-    gl_Position  = projectionMatrix * mv;
+    float R = A.x, Z = A.y, a = A.z, age = A.w;
+    float rho = aParticle.z * a;
+    // Rankine vortex: solid-body rotation inside the core, falling off as
+    // 1/rho^2 outside it, so the outer smoke lags behind and shears into a spiral.
+    float k = aParticle.z <= 1.0 ? 1.0 : 1.0 / (aParticle.z * aParticle.z);
+    float th = aParticle.w + B.z * k;
+    float phi = aParticle.y;
+    // Widnall instability: an azimuthal wave of mode 7 grows as the ring ages
+    float wob = uWobble * a * min(0.04 * age * age, 1.6) * sin(7.0 * phi + age * 0.5 + B.w);
+    float Rr = R + wob + rho * cos(th);
+    float y = Z + rho * sin(th) + wob * 0.6;
+    vec3 pos = vec3(cos(phi) * Rr, y, sin(phi) * Rr);
+    vec4 mv = modelViewMatrix * vec4(pos, 1.0);
+    vAlpha = B.y * exp(-aParticle.z * aParticle.z * 0.8);
+    vShade = 0.6 + 0.4 * sin(th);        // top of the core catches more light
+    gl_PointSize = aSize * a * uIntensity * 420.0 / max(-mv.z, 1e-3);
+    gl_Position = projectionMatrix * mv;
   }
 `;
 const ringFrag = /* glsl */ `
   uniform vec3  uSmokeColor;
   uniform float uOpacity;
   varying float vAlpha;
-
-  void main() {
-    if (vAlpha < 0.01) discard;
-    vec2  c = gl_PointCoord - 0.5;
+  varying float vShade;
+  void main(){
+    vec2 c = gl_PointCoord - 0.5;
     float d = length(c);
-    if (d > 0.5) discard;
-    float g = exp(-d * d * 3.0);
-    gl_FragColor = vec4(uSmokeColor, g * vAlpha * uOpacity);
+    if (d > 0.5 || vAlpha < 0.002) discard;
+    float g = exp(-d * d * 14.0);
+    float a = g * vAlpha * uOpacity * 0.7;
+    gl_FragColor = vec4(uSmokeColor * (0.55 + 0.6 * vShade) * a, a);
   }
 `;
-const PUFFS_PER_RING = 120;
 const SmokeRingEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { ringCount, expansionRadius, riseSpeed, intervalSeconds, smokeColor, thickness, opacity, speed, intensity } = config;
-    const startValuesCacheRef = useRef({});
+    const { intensity = 1, speed = 1, opacity = 0.65, ringCount = 2, expansionRadius = 3, riseSpeed = 0.5, intervalSeconds = 2.5, smokeColor = '#c4c4c8', thickness = 0.18, leapfrog = true, wobble = 0.5, } = config;
     const rootRef = useRef(null);
+    const animCache = useRef({});
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
-    const N = Math.max(1, Math.min(ringCount, 4));
-    // Ring states — one per slot
-    const ringStates = useRef([]);
-    const { geos, mats } = useMemo(() => {
-        const maxR = boundingRadius * expansionRadius;
-        const tubeR = boundingRadius * thickness;
-        const riseH = boundingRadius * riseSpeed;
-        const sc = new THREE.Color(smokeColor);
-        const scv = new THREE.Vector3(sc.r, sc.g, sc.b);
-        // Stagger initial timers so rings don't all fire together
-        ringStates.current = Array.from({ length: N }, (_, i) => ({
-            progress: 0,
-            timer: (i / N) * intervalSeconds,
-            active: false,
-        }));
-        const geos = [];
-        const mats = [];
-        for (let ri = 0; ri < N; ri++) {
-            const aAngle = new Float32Array(PUFFS_PER_RING);
-            const aPuff = new Float32Array(PUFFS_PER_RING);
-            const aPhase = new Float32Array(PUFFS_PER_RING);
-            for (let i = 0; i < PUFFS_PER_RING; i++) {
-                aAngle[i] = (i / PUFFS_PER_RING) * Math.PI * 2;
-                aPuff[i] = Math.random() * Math.PI * 2;
-                aPhase[i] = Math.random() * Math.PI * 2;
-            }
-            const geo = new THREE.BufferGeometry();
-            geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(PUFFS_PER_RING * 3), 3));
-            geo.setAttribute('aAngle', new THREE.BufferAttribute(aAngle, 1));
-            geo.setAttribute('aPuff', new THREE.BufferAttribute(aPuff, 1));
-            geo.setAttribute('aPhase', new THREE.BufferAttribute(aPhase, 1));
-            geo.frustumCulled = false;
-            const mat = new THREE.ShaderMaterial({
-                vertexShader: ringVert,
-                fragmentShader: ringFrag,
-                uniforms: {
-                    uProgress: { value: -1 }, // -1 = hidden
-                    uMaxRadius: { value: maxR },
-                    uThickness: { value: tubeR * intensity },
-                    uRiseSpeed: { value: riseH },
-                    uBaseY: { value: -boundingRadius * 0.2 },
-                    u_time: { value: 0 },
-                    uSmokeColor: { value: scv },
-                    uOpacity: { value: opacity },
-                },
-                transparent: true,
-                depthWrite: false,
-                blending: THREE.NormalBlending,
-            });
-            geos.push(geo);
-            mats.push(mat);
-        }
-        return { geos, mats };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [N, boundingRadius, expansionRadius, riseSpeed, intervalSeconds, smokeColor, thickness, opacity, intensity]);
-    useFrame((state, delta) => {
-        const t = state.clock.getElapsedTime();
-        const dt = delta * speed;
-        ringStates.current.forEach((ring, ri) => {
-            const mat = mats[ri];
-            mat.uniforms.u_time.value = t;
-            if (ring.active) {
-                ring.progress += dt * 0.32;
-                if (ring.progress >= 1) {
-                    ring.active = false;
-                    ring.progress = 0;
-                    ring.timer = intervalSeconds / speed;
-                    mat.uniforms.uProgress.value = -1;
-                }
-                else {
-                    mat.uniforms.uProgress.value = ring.progress;
-                }
-            }
-            else {
-                ring.timer -= delta;
-                if (ring.timer <= 0) {
-                    ring.active = true;
-                    ring.progress = 0;
-                }
-            }
-        });
-        if (animations?.length) {
-            applyGenerativeAnimations(mats, animations, startValuesCacheRef.current, Date.now(), false);
+    // a standalone effect gets boundingRadius 1; guard against an empty host
+    const b = boundingRadius > 0 ? boundingRadius : 1;
+    const uniforms = useMemo(() => ({
+        uSpeed: { value: 1 },
+        uIntensity: { value: 1 },
+        uOpacity: { value: 1 },
+        uSmokeColor: { value: new THREE.Color() },
+        uWobble: { value: 0.5 },
+        uRingA: { value: Array.from({ length: RING_SLOTS }, () => new THREE.Vector4()) },
+        uRingB: { value: Array.from({ length: RING_SLOTS }, () => new THREE.Vector4()) },
+        // read by the simulation, not the shader
+        uRingCount: { value: 2 },
+        uExpansionRadius: { value: 3 },
+        uRiseSpeed: { value: 0.5 },
+        uIntervalSeconds: { value: 2.5 },
+        uThickness: { value: 0.18 },
+    }), []);
+    const materials = useMemo(() => [
+        new THREE.ShaderMaterial({ vertexShader: ringVert, fragmentShader: ringFrag, uniforms, ...PRE_NORMAL }),
+    ], [uniforms]);
+    useEffect(() => () => materials.forEach((m) => m.dispose()), [materials]);
+    const geometry = useMemo(() => {
+        const p = buildRingParticles();
+        const g = new THREE.BufferGeometry();
+        g.setAttribute('position', new THREE.BufferAttribute(new Float32Array(p.count * 3), 3));
+        g.setAttribute('aParticle', new THREE.BufferAttribute(p.aParticle, 4));
+        g.setAttribute('aSize', new THREE.BufferAttribute(p.aSize, 1));
+        return g;
+    }, []);
+    useEffect(() => () => geometry.dispose(), [geometry]);
+    const sim = useMemo(() => ({ state: createRingSim(), A: new Float32Array(16), B: new Float32Array(16), params: {} }), []);
+    useLayoutEffect(() => {
+        uniforms.uSpeed.value = speed;
+        uniforms.uIntensity.value = intensity;
+        uniforms.uOpacity.value = opacity;
+        uniforms.uSmokeColor.value.set(smokeColor);
+        uniforms.uWobble.value = wobble;
+        uniforms.uRingCount.value = ringCount;
+        uniforms.uExpansionRadius.value = expansionRadius;
+        uniforms.uRiseSpeed.value = riseSpeed;
+        uniforms.uIntervalSeconds.value = intervalSeconds;
+        uniforms.uThickness.value = thickness;
+    }, [uniforms, speed, intensity, opacity, smokeColor, wobble, ringCount, expansionRadius, riseSpeed, intervalSeconds, thickness]);
+    useFrame((_, delta) => {
+        if (animations?.length)
+            applyGenerativeAnimations(materials, animations, animCache.current, Date.now(), false);
+        const p = sim.params;
+        p.bound = b;
+        p.ringCount = uniforms.uRingCount.value;
+        p.expansionRadius = uniforms.uExpansionRadius.value;
+        p.riseSpeed = uniforms.uRiseSpeed.value;
+        p.intervalSeconds = uniforms.uIntervalSeconds.value;
+        p.thickness = uniforms.uThickness.value;
+        p.leapfrog = leapfrog;
+        stepRingSim(sim.state, Math.min(delta, 0.05) * uniforms.uSpeed.value, p, sim.A, sim.B);
+        for (let i = 0; i < RING_SLOTS; i++) {
+            uniforms.uRingA.value[i].fromArray(sim.A, i * 4);
+            uniforms.uRingB.value[i].fromArray(sim.B, i * 4);
         }
     });
-    return (_jsx("group", { ref: rootRef, children: geos.map((geo, i) => (_jsx("points", { geometry: geo, material: mats[i] }, i))) }));
+    return (_jsx("group", { ref: rootRef, children: _jsx("points", { geometry: geometry, material: materials[0], frustumCulled: false }) }));
 };
 export default SmokeRingEffect;

package/dist/components/effects/StrangeAttractorEffect.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { AnimationOptions, StrangeAttractorConfig } from '@3driseai/3drise-core';
+import type { ObjectReadyProps } from '../../types/objectReady';
+export interface StrangeAttractorEffectProps extends ObjectReadyProps {
+    boundingRadius: number;
+    config: StrangeAttractorConfig;
+    animations?: AnimationOptions[];
+}
+declare const StrangeAttractorEffect: React.FC<StrangeAttractorEffectProps>;
+export default StrangeAttractorEffect;
+//# sourceMappingURL=StrangeAttractorEffect.d.ts.map

package/dist/components/effects/StrangeAttractorEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StrangeAttractorEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/StrangeAttractorEffect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAGtF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,2BAA4B,SAAQ,gBAAgB;IACjE,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,sBAAsB,CAAC;IAC/B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AA0KD,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA8DjE,CAAC;AACF,eAAe,sBAAsB,CAAC"}