@3driseai/3drise-viewer 0.1.16 → 0.1.17

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

@@ -1,7 +1,7 @@
-import React from "react";
-import type { SmokePlumeConfig, AnimationOptions } from "@3driseai/3drise-core";
+import React from 'react';
+import type { AnimationOptions, SmokePlumeConfig } from '@3driseai/3drise-core';
 import type { ObjectReadyProps } from '../../types/objectReady';
-interface SmokePlumeEffectProps extends ObjectReadyProps {
+export interface SmokePlumeEffectProps extends ObjectReadyProps {
     boundingRadius: number;
     config: SmokePlumeConfig;
     animations?: AnimationOptions[];

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

@@ -1 +1 @@
-{"version":3,"file":"SmokePlumeEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/SmokePlumeEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,UAAU,qBAAsB,SAAQ,gBAAgB;IACpD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AA6ED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA8DrD,CAAC;AACF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SmokePlumeEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/SmokePlumeEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AA4JD,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+DrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/effects/SmokePlumeEffect.js

@@ -1,144 +1,208 @@
 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';
-// ── Fully GPU-animated smoke puff vertex shader ───────────────────────────────
-// Each particle has a lifetime t ∈ [0,1). It rises, expands, and billows.
-// All motion driven by u_time — zero CPU writes per frame.
-const smokeVert = /* glsl */ `
-  attribute float aT;       // birth offset 0..1 → staggered spawn
-  attribute vec2  aBase;    // (x,z) spawn footprint
-  attribute float aPhase;   // per-particle noise phase
-  attribute float aRotOff;  // per-particle billboard rotation offset
-  attribute float aSize;    // per-particle max size
-
-  uniform float u_time;
-  uniform float u_speed;
+/**
+ * A buoyant smoke plume rising from the top of the host.
+ *
+ * Puffs follow Morton-Taylor-Turner plume theory: height grows as t^(3/4) and
+ * the width grows linearly with height. A divergence-free curl field makes the
+ * billows, a crosswind bends the column as z^2, and an optional hot base glows
+ * like firelight. Each puff is lit from above and premultiplied, so dense
+ * smoke darkens what is behind it.
+ *
+ * Everything moves in the vertex shader; the CPU only uploads seeds once.
+ */
+const PRE_NORMAL = { transparent: true, depthWrite: false, blending: THREE.NormalBlending, premultipliedAlpha: true };
+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 buildPlumeParticles(count) {
+    const n = Math.round(Math.min(Math.max(count, 40), 600));
+    const rand = mulberry32(17);
+    const aT = new Float32Array(n);
+    const aSeed = new Float32Array(n * 3);
+    for (let i = 0; i < n; i++) {
+        aT[i] = i / n;
+        // gaussian-ish disc: the plume is densest on its axis
+        const r = Math.sqrt(-2 * Math.log(1 - rand() * 0.95)) * 0.45;
+        const a = rand() * Math.PI * 2;
+        aSeed[i * 3] = Math.cos(a) * r;
+        aSeed[i * 3 + 1] = Math.sin(a) * r;
+        aSeed[i * 3 + 2] = rand();
+    }
+    return { count: n, aT, aSeed };
+}
+const plumeVert = /* glsl */ `
+  attribute float aT;
+  attribute vec3  aSeed;          // x,y: base disc position (-1..1), z: random
+  uniform float uTime;
   uniform float uHeight;
   uniform float uSpread;
-  uniform float uTurb;
-  uniform float uSizeScale;
-
-  varying float vLife;   // 0=just born, 1=about to die
+  uniform float uTurbulence;
+  uniform float uWind;
+  uniform float uBound;
+  uniform float uIntensity;
+  varying float vLife;
   varying float vAlpha;
+  varying float vRot;
+  varying float vSeed;
+  varying vec3  vLight;
 
-  void main() {
-    // Age loops continuously
-    float life = fract(aT + u_time * u_speed * 0.22);
-    vLife = life;
-
-    // Footprint expands as smoke rises and dissipates
-    float expand  = 1.0 + life * 2.5;
-    float x = aBase.x * expand * uSpread;
-    float z = aBase.y * expand * uSpread;
-
-    // Turbulent horizontal drift — two layers of sine turbulence
-    float t1 = sin(life * 4.2 + aPhase)               * uTurb * uSpread * life * 0.9;
-    float t2 = sin(life * 7.1 + aPhase * 1.7 + 1.3)   * uTurb * uSpread * life * 0.4;
-    float t3 = cos(life * 3.5 - aPhase * 0.8)          * uTurb * uSpread * life * 0.3;
-    x += t1 + t2;
-    z += t3 + t2 * 0.5;
-
-    float y = life * uHeight - uHeight * 0.45;
-
-    // Particle grows from tiny to large, then fades to nothing
-    float growFade = smoothstep(0.0, 0.15, life) * smoothstep(1.0, 0.6, life);
-    float sz = aSize * uSizeScale * growFade;
+  // Divergence-free swirl: the curl of A = (sin(k1 y), sin(k2 z), sin(k3 x))
+  // is (-k2 cos(k2 z), -k3 cos(k3 x), -k1 cos(k1 y)), summed over two octaves.
+  vec3 curlField(vec3 p, float t){
+    vec3 c = -vec3(1.7 * cos(1.7 * p.z + t * 0.6), 1.3 * cos(1.3 * p.x - t * 0.4), 1.1 * cos(1.1 * p.y + t * 0.5));
+    vec3 q = vec3(p.y, p.z, p.x) * 2.3 + 4.0;
+    c += -0.5 * vec3(3.1 * cos(3.1 * q.z - t), 2.7 * cos(2.7 * q.x + t * 0.8), 2.9 * cos(2.9 * q.y - t * 0.7));
+    return c * 0.35;
+  }
 
-    // Alpha: ramp in quickly, stay opaque, fade out
-    vAlpha = growFade * growFade;
+  void main(){
+    float life = fract(aT + uTime * 0.11);
+    vLife = life;
+    // Morton-Taylor-Turner point-source plume: rise z ~ t^(3/4),
+    // width grows linearly with height (constant entrainment).
+    float Hs = uHeight * uBound;
+    float Ss = uSpread * uBound;
+    float z = pow(life, 0.75) * Hs;
+    float w = Ss * 0.35 + 0.24 * z;
+    vec3 base = vec3(aSeed.x * w, 0.0, aSeed.y * w);
+    // the plume leaves from the top of the object
+    vec3 pos = base + vec3(0.0, z + uBound * 0.6, 0.0);
+    pos += curlField(vec3(aSeed.xy * 2.0, z / max(Hs, 1e-3) * 3.0), uTime * 0.5 + aSeed.z * 6.0) * uTurbulence * w * 1.6;
+    // a crosswind bends the plume parabolically
+    pos.x += uWind * z * z / max(Hs, 1e-3);
 
-    vec4 mv = modelViewMatrix * vec4(x, y, z, 1.0);
-    gl_PointSize = sz * (200.0 / -mv.z);
-    gl_Position  = projectionMatrix * mv;
+    vec4 mv = modelViewMatrix * vec4(pos, 1.0);
+    float grow = smoothstep(0.0, 0.08, life);
+    float size = (0.45 * Ss + 0.5 * w) * grow;
+    // mass spreads over a growing cross-section, so density thins out
+    float thin = pow(clamp(Ss * 0.35 / max(w, 1e-3), 0.0, 1.0), 0.9);
+    vAlpha = grow * (1.0 - smoothstep(0.7, 1.0, life)) * (0.35 + 0.65 * thin);
+    vRot = aSeed.z * 6.2832 + life * (aSeed.z - 0.5) * 2.0;
+    vSeed = aSeed.z;
+    vLight = normalize((viewMatrix * vec4(0.35, 1.0, 0.25, 0.0)).xyz);
+    gl_PointSize = size * uIntensity * 900.0 / max(-mv.z, 1e-3);
+    gl_Position = projectionMatrix * mv;
   }
 `;
-const smokeFrag = /* glsl */ `
+const plumeFrag = /* glsl */ `
   uniform vec3  uSmokeColor;
   uniform float uOpacity;
+  uniform float uHeat;
   varying float vLife;
   varying float vAlpha;
+  varying float vRot;
+  varying float vSeed;
+  varying vec3  vLight;
 
-  void main() {
-    if (vAlpha < 0.01) discard;
-
-    vec2  c = gl_PointCoord - 0.5;
-    float d = length(c);
-    if (d > 0.5) discard;
-
-    // Soft gaussian puff — not a crisp disc
-    float g = exp(-d * d * 3.8);
+  
+  float hash12(vec2 p){
+    vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+    p3 += dot(p3, p3.yzx + 33.33);
+    return fract((p3.x + p3.y) * p3.z);
+  }
+  float vnoise2(vec2 p){
+    vec2 i = floor(p);
+    vec2 f = fract(p);
+    f = f * f * (3.0 - 2.0 * f);
+    return mix(mix(hash12(i), hash12(i + vec2(1.0, 0.0)), f.x),
+               mix(hash12(i + vec2(0.0, 1.0)), hash12(i + vec2(1.0, 1.0)), f.x), f.y);
+  }
+  float fbm2(vec2 p){
+    float a = 0.5, s = 0.0;
+    for (int i = 0; i < 4; i++){
+      s += a * vnoise2(p);
+      p = mat2(1.6, 1.2, -1.2, 1.6) * p;
+      a *= 0.5;
+    }
+    return s;
+  }
 
-    // Slightly darken as smoke ages (hot white → grey → dark)
-    float darkening = 1.0 - vLife * 0.45;
-    vec3  col = uSmokeColor * darkening;
 
-    gl_FragColor = vec4(col, g * vAlpha * uOpacity);
+  void main(){
+    vec2 c = gl_PointCoord * 2.0 - 1.0;
+    c.y = -c.y;
+    float cr = cos(vRot), sr = sin(vRot);
+    vec2 rc = mat2(cr, -sr, sr, cr) * c;
+    float r = length(c);
+    if (r > 1.0) discard;
+    // billows: the silhouette is eroded by fBm, so no two puffs match
+    float b = fbm2(rc * 1.7 + vSeed * 31.0 + vLife * 0.8);
+    float shape = 1.0 - smoothstep(0.35, 1.0, r + (b - 0.5) * 0.6);
+    if (shape < 0.01) discard;
+    // treat the puff as a soft sphere: wrap lighting from above plus a
+    // bright rim on the side facing the light
+    vec3 n = normalize(vec3(c * 0.9, sqrt(max(1.0 - r * r, 0.0))));
+    float diff = 0.5 + 0.5 * dot(n, vLight);
+    float rim = pow(1.0 - n.z, 2.0) * max(dot(normalize(vec3(c, 0.0) + 1e-5), vLight.xyz), 0.0) * 0.5;
+    vec3 col = uSmokeColor * (0.25 + 0.85 * diff) * (0.75 + 0.5 * b) + vec3(rim) * uSmokeColor;
+    // hot smoke glows near the source: a blackbody-like ramp that cools fast
+    float hot = uHeat * exp(-vLife * 7.0);
+    col += mix(vec3(1.0, 0.25, 0.04), vec3(1.0, 0.75, 0.35), hot) * hot * 1.6;
+    float a = shape * vAlpha * uOpacity;
+    gl_FragColor = vec4(col * a, a);
   }
 `;
 const SmokePlumeEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { particleCount, height, spread, smokeColor, turbulence, opacity, speed, intensity } = config;
-    const startValuesCacheRef = useRef({});
+    const { intensity = 1, speed = 1, opacity = 0.6, particleCount = 180, height = 2, spread = 0.5, smokeColor = '#b4b4b8', turbulence = 0.5, heat = 0, wind = 0, } = config;
     const rootRef = useRef(null);
+    const animCache = useRef({});
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
-    const h = boundingRadius * height;
-    const s = boundingRadius * spread;
-    const { geo, mat } = useMemo(() => {
-        const N = Math.max(40, particleCount);
-        const aT = new Float32Array(N);
-        const aBase = new Float32Array(N * 2);
-        const aPhase = new Float32Array(N);
-        const aRotOff = new Float32Array(N);
-        const aSize = new Float32Array(N);
-        for (let i = 0; i < N; i++) {
-            aT[i] = i / N;
-            // Concentrate spawns near center, sparse toward edges
-            const r = Math.pow(Math.random(), 0.6) * s;
-            const a = Math.random() * Math.PI * 2;
-            aBase[i * 2] = Math.cos(a) * r;
-            aBase[i * 2 + 1] = Math.sin(a) * r;
-            aPhase[i] = Math.random() * Math.PI * 2;
-            aRotOff[i] = Math.random() * Math.PI * 2;
-            aSize[i] = 35 + Math.random() * 45; // puff screen size
-        }
+    // a standalone effect gets boundingRadius 1; guard against an empty host
+    const b = boundingRadius > 0 ? boundingRadius : 1;
+    const uniforms = useMemo(() => ({
+        uTime: { value: 0 },
+        uSpeed: { value: 1 },
+        uBound: { value: 1 },
+        uIntensity: { value: 1 },
+        uOpacity: { value: 1 },
+        uHeight: { value: 2 },
+        uSpread: { value: 0.5 },
+        uTurbulence: { value: 0.5 },
+        uWind: { value: 0 },
+        uHeat: { value: 0 },
+        uSmokeColor: { value: new THREE.Color() },
+    }), []);
+    const materials = useMemo(() => [
+        new THREE.ShaderMaterial({ vertexShader: plumeVert, fragmentShader: plumeFrag, uniforms, ...PRE_NORMAL }),
+    ], [uniforms]);
+    useEffect(() => () => materials.forEach((m) => m.dispose()), [materials]);
+    const geometry = useMemo(() => {
+        const p = buildPlumeParticles(particleCount);
         const g = new THREE.BufferGeometry();
-        g.setAttribute('position', new THREE.BufferAttribute(new Float32Array(N * 3), 3));
-        g.setAttribute('aT', new THREE.BufferAttribute(aT, 1));
-        g.setAttribute('aBase', new THREE.BufferAttribute(aBase, 2));
-        g.setAttribute('aPhase', new THREE.BufferAttribute(aPhase, 1));
-        g.setAttribute('aRotOff', new THREE.BufferAttribute(aRotOff, 1));
-        g.setAttribute('aSize', new THREE.BufferAttribute(aSize, 1));
-        g.frustumCulled = false;
-        const sc = new THREE.Color(smokeColor);
-        const m = new THREE.ShaderMaterial({
-            vertexShader: smokeVert,
-            fragmentShader: smokeFrag,
-            uniforms: {
-                u_time: { value: 0 },
-                u_speed: { value: speed },
-                uHeight: { value: h },
-                uSpread: { value: s },
-                uTurb: { value: turbulence },
-                uSizeScale: { value: intensity },
-                uSmokeColor: { value: new THREE.Vector3(sc.r, sc.g, sc.b) },
-                uOpacity: { value: opacity },
-            },
-            transparent: true,
-            depthWrite: false,
-            // Normal blending (not additive) — smoke should look opaque/grey, not glowy
-            blending: THREE.NormalBlending,
-        });
-        return { geo: g, mat: m };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [particleCount, h, s, smokeColor, turbulence, opacity, speed, intensity]);
-    useFrame((state) => {
-        mat.uniforms.u_time.value = state.clock.getElapsedTime();
-        if (animations?.length) {
-            applyGenerativeAnimations([mat], animations, startValuesCacheRef.current, Date.now(), false);
-        }
+        g.setAttribute('position', new THREE.BufferAttribute(new Float32Array(p.count * 3), 3));
+        g.setAttribute('aT', new THREE.BufferAttribute(p.aT, 1));
+        g.setAttribute('aSeed', new THREE.BufferAttribute(p.aSeed, 3));
+        return g;
+    }, [particleCount]);
+    useEffect(() => () => geometry.dispose(), [geometry]);
+    useLayoutEffect(() => {
+        uniforms.uSpeed.value = speed;
+        uniforms.uBound.value = b;
+        uniforms.uIntensity.value = intensity;
+        uniforms.uOpacity.value = opacity;
+        uniforms.uHeight.value = height;
+        uniforms.uSpread.value = spread;
+        uniforms.uTurbulence.value = turbulence;
+        uniforms.uWind.value = wind;
+        uniforms.uHeat.value = heat;
+        uniforms.uSmokeColor.value.set(smokeColor);
+    }, [uniforms, speed, b, intensity, opacity, height, spread, turbulence, wind, heat, smokeColor]);
+    useFrame((_, delta) => {
+        uniforms.uTime.value += delta * uniforms.uSpeed.value;
+        if (animations?.length)
+            applyGenerativeAnimations(materials, animations, animCache.current, Date.now(), false);
     });
-    return _jsx("points", { ref: rootRef, geometry: geo, material: mat });
+    return (_jsx("group", { ref: rootRef, children: _jsx("points", { geometry: geometry, material: materials[0], frustumCulled: false }) }));
 };
 export default SmokePlumeEffect;

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

@@ -1,7 +1,7 @@
-import React from "react";
-import type { SmokeRingConfig, AnimationOptions } from "@3driseai/3drise-core";
+import React from 'react';
+import type { AnimationOptions, SmokeRingConfig } from '@3driseai/3drise-core';
 import type { ObjectReadyProps } from '../../types/objectReady';
-interface SmokeRingEffectProps extends ObjectReadyProps {
+export interface SmokeRingEffectProps extends ObjectReadyProps {
     boundingRadius: number;
     config: SmokeRingConfig;
     animations?: AnimationOptions[];

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

@@ -1 +1 @@
-{"version":3,"file":"SmokeRingEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/SmokeRingEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,UAAU,oBAAqB,SAAQ,gBAAgB;IACnD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAiED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2FnD,CAAC;AACF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"SmokeRingEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/SmokeRingEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAoND,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+EnD,CAAC;AAEF,eAAe,eAAe,CAAC"}