@3driseai/3drise-viewer 0.1.18 → 0.1.20

package/dist/components/particles/NeonRainParticles.js

@@ -0,0 +1,716 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
+import { GENERATIVE_PARTICLES_ANIMATABLE } from '@3driseai/3drise-core';
+import { applyConfigKeyframeAnimations } from '../../utils/configAnimations.js';
+import { createPointerUniforms, stepPointerField, usePointerField } from '../../utils/pointerField.js';
+import { createTrailUniforms, applyTrailConfig, createCpuTrail } from '../../utils/particleTrails.js';
+import { useObjectReady } from '../../hooks/useObjectReady.js';
+import { useConfigLiveHandle } from '../../hooks/useConfigLive.js';
+/**
+ * Neon Rain — Night rain lit by neon: Marshall–Palmer drops at terminal velocity, gusting sheets, splash crowns and rim drips, each drop lit like a tiny lens; the cursor is an umbrella, a gust or a headlight. Use for city, noir and cinematic scenes.
+ */
+// Neon Rain — rain at night lit by off-screen neon and a streetlamp, filmed at high speed.
+// The object is the rain alone: drops, splash crowns and drips. The lights are not drawn; they only
+// exist as the light the drops scatter.
+// Movement: raindrops with Marshall–Palmer sizes (N(D) ~ exp(-Lambda D), Lambda = 4.1 R^-0.21 /mm)
+//           falling at their Atlas terminal velocity v(D) = 9.65 - 10.3 exp(-0.6 D) m/s. Each drop
+//           relaxes to the local air velocity with its own drag time tau = v_t / g, so small drops
+//           follow the gusts and big ones cut through. The wind is a steady breeze plus travelling
+//           gust fronts that sweep sheets of rain across. On the ground plane the splash
+//           parameter K = We^1/2 Re^1/4 decides: K > 57.7 throws a crown of secondary droplets
+//           (Mundo's threshold), smaller drops just deposit.
+// Colour:   drops are tiny water lenses lit by two neon lights and a sodium streetlamp: forward
+//           refraction (Henyey–Greenstein lobe), Fresnel reflection, and the primary rainbow caustic
+//           at 138 degrees with its spectral split. Out-of-focus drops become bokeh discs (thin lens).
+// Mouse (pointerMode):
+//   umbrella  — an invisible umbrella: drops hitting the canopy splash off it (outlining its dome),
+//               water runs to the rim and drips in heavy streams, leaving a dry column below.
+//   gust      — the cursor is a gust of wind: a moving-body flow with a wake that bends and swirls
+//               the rain sheets (small drops follow, big drops cut through).
+//   headlight — an oncoming headlight at the back of the street, placed by the cursor and aimed at
+//               the viewer: drops in the beam flare in their forward-scattering lobe.
+// Trails (trailMode): streak = shutter streaks, comet = wet threads, echo = splash afterglow.
+//
+// Generated from the approved lab module (particle lab, batch 3). Sim units = object-local / size.
+// ---------------------------------------------------------------------------------------------
+// Engine features
+// ---------------------------------------------------------------------------------------------
+const QUALITY_SCALE = { low: 0.5, medium: 1, high: 1.6 };
+/** mulberry32 — seeded PRNG, returns a function giving floats in [0,1). */
+function mulberry32(seed) {
+    let a = seed >>> 0;
+    return function () {
+        a = (a + 0x6d2b79f5) >>> 0;
+        let t = a;
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+/** Standard normal from a uniform PRNG (Box–Muller, one value per call). */
+function gauss(rng) {
+    const u = Math.max(rng(), 1e-9);
+    const v = rng();
+    return Math.sqrt(-2 * Math.log(u)) * Math.cos(6.283185307 * v);
+}
+/** Viewport-height hook so point sizes are pixel-correct at any canvas size. */
+function attachViewH(obj, u) {
+    const scratch = new THREE.Vector2();
+    obj.onBeforeRender = (renderer) => {
+        renderer.getDrawingBufferSize(scratch);
+        u.uViewH.value = scratch.y;
+    };
+}
+function colorUniform(hex) {
+    return { value: new THREE.Color(hex) };
+}
+function qualityScale(q) { return QUALITY_SCALE[q] || 1; }
+function seedMix(base, seed) {
+    let h = (base ^ Math.imul((Math.round(seed) | 0) + 0x9e37, 0x85ebca6b)) >>> 0;
+    h = Math.imul(h ^ (h >>> 13), 0xc2b2ae35) >>> 0;
+    return (h ^ (h >>> 16)) >>> 0;
+}
+function createFixedStep(H, maxSteps) {
+    let acc = 0;
+    return {
+        H,
+        run(d, step) {
+            acc += Math.max(d, 0);
+            let k = 0;
+            while (acc >= H && k < maxSteps) {
+                step(H);
+                acc -= H;
+                k++;
+            }
+            if (k === maxSteps)
+                acc = Math.min(acc, H);
+            return acc / H;
+        },
+        reset() { acc = 0; },
+    };
+}
+function createPickProxy(center, radius) {
+    const geo = new THREE.SphereGeometry(1, 16, 10);
+    const mat = new THREE.MeshBasicMaterial({ visible: false });
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.name = 'pickProxy';
+    mesh.position.set(center[0], center[1], center[2]);
+    mesh.scale.setScalar(radius);
+    return { mesh, dispose() { geo.dispose(); mat.dispose(); } };
+}
+const _frustum = new THREE.Frustum();
+const _pm = new THREE.Matrix4();
+const _sphere = new THREE.Sphere();
+function inView(object, camera, center, radius, size) {
+    if (!camera || !camera.projectionMatrix)
+        return true;
+    object.updateWorldMatrix(true, false);
+    _sphere.center.set(center[0], center[1], center[2]).multiplyScalar(size).applyMatrix4(object.matrixWorld);
+    _sphere.radius = radius * size * object.matrixWorld.getMaxScaleOnAxis();
+    _pm.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+    _frustum.setFromProjectionMatrix(_pm);
+    return _frustum.intersectsSphere(_sphere);
+}
+const POINTER_MODES = ['umbrella', 'gust', 'headlight'];
+// ---- world (sim units = metres), laid out round the object origin ----
+const GROUND = -1.0; // road / puddle height
+const TOP = 1.0; // rain enters here
+const XH = 1.3, ZH = 0.85; // half extents of the rain volume
+const ZS = -1.05; // plane of the (off-screen) neon lights, behind the rain
+const SLOWMO = 0.3; // physics seconds per shown second (a high-speed camera)
+const H_STEP = 1 / 60;
+const GRAV = 9.81;
+const TR_MODE = { streak: 0.04, comet: 0.06, echo: 0.08 }; // physics seconds per trail unit
+const TRAIL_GAIN = { streak: 3, comet: 3.5, echo: 4.5 };
+const BOUNDS = { center: [0, 0, 0], radius: 1.75 };
+// neon light sources behind the rain (never drawn): segments [x0, y0, x1, y1, colour index], and a ring [cx, cy, r, colour]
+const SEGS = [[-0.9, -0.35, -0.9, 0.65, 0]];
+const RING = [0.78, 0.2, 0.3, 1];
+const LAMP = [-0.45, 1.35, -0.55];
+// point-light samples of the tubes (for lighting the drops): x, y, colour index, power
+function tubeLights() {
+    const L = [];
+    for (const s of SEGS) {
+        const k = Math.max(2, Math.round(Math.hypot(s[2] - s[0], s[3] - s[1]) / 0.33));
+        for (let i = 0; i < k; i++) {
+            const t = (i + 0.5) / k;
+            L.push([s[0] + (s[2] - s[0]) * t, s[1] + (s[3] - s[1]) * t, s[4], 1 / k * Math.hypot(s[2] - s[0], s[3] - s[1])]);
+        }
+    }
+    for (let i = 0; i < 5; i++) {
+        const a = (i / 5) * 6.2831853 + 0.3;
+        L.push([RING[0] + RING[2] * Math.cos(a), RING[1] + RING[2] * Math.sin(a), RING[3], 1.0 / 5]); // both lights carry the same total power
+    }
+    return L;
+}
+const LIGHTS = tubeLights();
+function createUniforms() {
+    return {
+        uTime: { value: 0 },
+        uPhysT: { value: 0 },
+        uSize: { value: 1 },
+        uViewH: { value: 800 },
+        uIntensity: { value: 1 },
+        uSpeed: { value: 1 },
+        uOpacity: { value: 0.9 },
+        uColor: colorUniform('#ffffff'),
+        uParticleCount: { value: 0 },
+        uRainRate: { value: 18 },
+        uWindSpeed: { value: 1.6 },
+        uGustiness: { value: 0.6 },
+        uNeonColor2: colorUniform('#ffffff'),
+        uLampColor: colorUniform('#ffffff'),
+        uNeonLight: { value: 1 },
+        uAperture: { value: 0.5 },
+        uDropSize: { value: 1 },
+        uPointerMode: { value: 0 },
+        uPointerStrength: { value: 1 },
+        uPointerRadius: { value: 1 },
+        uPointerColor: colorUniform('#ffffff'),
+        uFocus: { value: 3.3 },
+        uCamLocal: { value: new THREE.Vector3(0, 0, 3) },
+        uHeadPos: { value: new THREE.Vector3() },
+        uHeadDir: { value: new THREE.Vector3(0, 0, -1) },
+        uHead: { value: 0 }, // headlight power (0 = off)
+        uTrailGain: { value: 1 },
+        ...createPointerUniforms(),
+        ...createTrailUniforms(),
+    };
+}
+function applyConfig(u, c, size) {
+    u.uSize.value = size;
+    u.uIntensity.value = c.intensity;
+    u.uSpeed.value = c.speed;
+    u.uOpacity.value = c.opacity;
+    u.uColor.value.set(c.color);
+    u.uParticleCount.value = c.particleCount;
+    u.uRainRate.value = c.rainRate;
+    u.uWindSpeed.value = c.windSpeed;
+    u.uGustiness.value = c.gustiness;
+    u.uNeonColor2.value.set(c.neonColor2);
+    u.uLampColor.value.set(c.lampColor);
+    u.uNeonLight.value = c.neonLight;
+    u.uAperture.value = c.aperture;
+    u.uDropSize.value = c.dropSize;
+    u.uPointerMode.value = POINTER_MODES.indexOf(c.pointerMode); // -1 = 'none' (off)
+    u.uPointerStrength.value = c.pointerStrength;
+    u.uPointerRadius.value = c.pointerRadius;
+    u.uPointerColor.value.set(c.pointerColor);
+    applyTrailConfig(u, c);
+}
+const BASE_U = 'uniform float uSize, uViewH, uIntensity, uOpacity;';
+const f3 = (v) => v.toFixed(4);
+// ---- light on a water drop at p seen from the eye: refraction lobe + Fresnel + rainbow ----
+const DROP_LIGHT_GLSL = /* glsl */ `
+uniform vec3 uColor, uNeonColor2, uLampColor, uPointerColor;
+uniform float uNeonLight, uHead;
+uniform vec3 uHeadPos, uHeadDir;
+uniform vec3 uCamLocal;
+// scattering by a water sphere; cosT = cos(scattering angle), 1 = straight through
+vec3 dropPhase(float cosT) {
+  float g = 0.75;
+  float hg = (1.0 - g * g) / pow(max(1.0 + g * g - 2.0 * g * cosT, 1e-4), 1.5) * 0.08;  // refraction lobe
+  float refl = 0.06;                                                                     // external reflection
+  // primary rainbow caustic near 138 deg, red outside, violet inside (Airy-ish widths)
+  float th = degrees(acos(clamp(cosT, -1.0, 1.0)));
+  vec3 bow = vec3(exp(-pow((th - 137.8) / 0.9, 2.0)), exp(-pow((th - 138.7) / 0.9, 2.0)), exp(-pow((th - 139.6) / 0.9, 2.0)));
+  bow += 0.25 * smoothstep(138.0, 150.0, th) * (1.0 - smoothstep(150.0, 170.0, th));  // brighter sky inside the bow
+  return vec3(hg + refl) + bow * 0.9;
+}
+vec3 pointLight(vec3 p, vec3 e, vec3 L, float pw) {
+  vec3 d = p - L;
+  float r2 = dot(d, d);
+  return vec3(pw / (r2 + 0.25)) * dropPhase(dot(normalize(d), e));
+}
+vec3 dropLight(vec3 p) {
+  vec3 e = normalize(uCamLocal - p);
+  vec3 acc = vec3(0.0);
+${LIGHTS.map((l) => `  acc += ${['uColor', 'uNeonColor2'][l[2]]} * pointLight(p, e, vec3(${f3(l[0])}, ${f3(l[1] - 0.25)}, ${f3(ZS)}), ${f3(l[3] * 7.0)}) * uNeonLight;`).join('\n')}
+  acc += uLampColor * pointLight(p, e, vec3(${LAMP.map(f3).join(', ')}), 3.0);
+  if (uHead > 0.001) {
+    vec3 d = p - uHeadPos;
+    float r2 = dot(d, d);
+    vec3 dn = d * inversesqrt(max(r2, 1e-6));
+    float cone = smoothstep(0.7, 0.93, dot(dn, uHeadDir));
+    acc += uPointerColor * (uHead * 5.0 * cone / (r2 + 0.05)) * dropPhase(dot(dn, e));
+  }
+  acc += vec3(0.05, 0.07, 0.12) * 0.8;                                                  // city sky glow
+  return acc;
+}
+`;
+// ---- drops (rain, splash droplets, rim drips) ----
+const dropVertex = /* glsl */ `
+${BASE_U}
+${DROP_LIGHT_GLSL}
+uniform float uAperture, uFocus, uDropSize;
+attribute float aD;          // diameter in mm, 0 = not in flight
+attribute float aKind;       // 0 rain, 1 splash droplet, 2 rim drip, 3 canopy spray
+varying vec3 vCol;
+varying float vA;
+varying float vBokeh;
+void main() {
+  vec3 p = position;
+  vec4 mv = modelViewMatrix * vec4(p * uSize, 1.0);
+  float dist = -mv.z;
+  float alive = step(0.01, aD);
+  // fades: entering at the top, at the sides of the volume
+  float fade = smoothstep(${f3(TOP)}, ${f3(TOP - 0.2)}, p.y) * smoothstep(${f3(XH)}, ${f3(XH - 0.2)}, abs(p.x)) * smoothstep(${f3(ZH + 0.1)}, ${f3(ZH - 0.1)}, abs(p.z));
+  vec3 L = dropLight(p);
+  // a drop's light scales with its cross-section, gently (the sprites are much bigger than drops)
+  float s = sqrt(clamp(aD, 0.2, 5.0));
+  float lum = dot(L, vec3(0.3, 0.5, 0.2));
+  float basePx = uDropSize * uSize * uViewH * (0.0035 + 0.002 * s) * (1.0 + 0.6 * min(lum, 2.5)) / dist;
+  float coc = uAperture * uViewH * 0.05 * abs(dist - uFocus) / max(dist, 0.05);
+  float px = sqrt(basePx * basePx + coc * coc);
+  float spread = clamp((basePx * basePx) / (px * px), 0.02, 1.0);
+  vBokeh = smoothstep(4.0, 14.0, coc);
+  vCol = (L * (0.6 + 0.4 * s) + uPointerColor * (step(2.5, aKind) * 1.4 + step(1.5, aKind) * (1.0 - step(2.5, aKind)) * 0.5)) * uIntensity;
+  vA = uOpacity * alive * fade * mix(1.0, spread * 2.5, vBokeh);
+  gl_PointSize = clamp(px, 1.0, 72.0) * step(0.001, vA);
+  gl_Position = projectionMatrix * mv;
+}
+`;
+const dropFragment = /* glsl */ `
+varying vec3 vCol;
+varying float vA;
+varying float vBokeh;
+void main() {
+  vec2 d = gl_PointCoord * 2.0 - 1.0;
+  float r2 = dot(d, d);
+  if (r2 > 1.0) discard;
+  float core = (exp(-r2 * 7.0) + 0.2 * exp(-r2 * 2.0)) * (1.0 - r2);
+  float r = sqrt(r2);
+  float disc = (1.0 - smoothstep(0.8, 1.0, r)) * (0.65 + 0.35 * smoothstep(0.5, 0.95, r));
+  float a = mix(core, disc * 0.45, vBokeh) * vA;
+  if (a < 0.002) discard;
+  gl_FragColor = vec4(vCol, a);
+}
+`;
+function build(u, c, size) {
+    const q = qualityScale(c.quality);
+    const nr = Math.max(200, Math.round(c.particleCount * q));
+    const ns = Math.round(nr * 0.55);
+    const n = nr + ns;
+    const rng = mulberry32(seedMix(0x7a1f, c.seed));
+    const pos = new Float32Array(n * 3), vel = new Float32Array(n * 3);
+    const Dm = new Float32Array(n); // diameter (mm); 0 = not in flight
+    const vt = new Float32Array(n); // terminal velocity (m/s)
+    const kind = new Uint8Array(n); // 0 rain, 1 splash droplet, 2 rim drip
+    const K = new Float32Array(n); // trail brightness weight
+    const kindF = new Float32Array(n); // kind, as a vertex attribute
+    let trail = null;
+    const atlas = (D) => Math.max(0.3, 9.65 - 10.3 * Math.exp(-0.6 * D));
+    function sampleD() {
+        const R = Math.max(u.uRainRate.value, 0.5);
+        const lam = 4.1 * Math.pow(R, -0.21);
+        let D = 0;
+        do {
+            D = -Math.log(Math.max(rng(), 1e-9)) / lam;
+        } while (D < 0.3 || D > 5.5);
+        return D;
+    }
+    // wind: breeze + travelling gust fronts + two slow eddies (divergence-free in x-y)
+    let physT = 0;
+    const wind = new Float32Array(3);
+    function windAt(x, y, z) {
+        const U = u.uWindSpeed.value, G = u.uGustiness.value;
+        const xi = x - U * physT * 0.8;
+        const front = Math.sin(0.9 * xi + 1.3) * Math.sin(0.31 * physT + 0.7 * z) + 0.5 * Math.sin(2.1 * xi - 0.4 * physT + 1.9);
+        const ex = Math.sin(2.3 * y + 0.9 * physT) * Math.cos(1.7 * x), ey = -Math.cos(2.3 * y + 0.9 * physT) * Math.sin(1.7 * x) * (1.7 / 2.3);
+        wind[0] = U * (1 + 0.55 * G * front) + 0.6 * G * ex;
+        wind[1] = 0.6 * G * ey;
+        wind[2] = 0.35 * G * Math.sin(1.1 * xi + 0.5 * physT);
+    }
+    function spawnRain(i, anywhere) {
+        const j = i * 3;
+        const D = sampleD();
+        Dm[i] = D;
+        vt[i] = atlas(D);
+        kind[i] = 0;
+        kindF[i] = 0;
+        const U = u.uWindSpeed.value;
+        const fall = (TOP - GROUND) / vt[i];
+        // spawn upwind of the volume so the slanted rain fills it; rain sheets: accept by a travelling band
+        let x = 0, zz = 0;
+        for (let tries = 0; tries < 4; tries++) {
+            const drift = Math.max(-0.45, Math.min(0.45, U * fall * 0.6));
+            x = -XH + rng() * 2 * XH - drift * rng() * (anywhere ? 0 : 1);
+            zz = (rng() * 2 - 1) * ZH;
+            const band = 0.55 + 0.45 * Math.sin(1.4 * (x - U * physT * 0.8) + 0.9 * Math.sin(0.6 * zz + 0.2 * physT));
+            if (rng() < band)
+                break;
+        }
+        pos[j] = x;
+        pos[j + 2] = zz;
+        pos[j + 1] = anywhere ? GROUND + rng() * (TOP - GROUND) : TOP + 0.02 * rng();
+        vel[j] = U;
+        vel[j + 1] = -vt[i];
+        vel[j + 2] = 0;
+        K[i] = Math.sqrt(D);
+        if (trail)
+            trail.reset(i);
+    }
+    let sHead = 0;
+    function spawnSplash(x, y, z, vx, vy, vz, D, kd) {
+        const i = nr + (sHead % ns);
+        sHead++;
+        const j = i * 3;
+        pos[j] = x;
+        pos[j + 1] = y;
+        pos[j + 2] = z;
+        vel[j] = vx;
+        vel[j + 1] = vy;
+        vel[j + 2] = vz;
+        Dm[i] = D;
+        vt[i] = atlas(D);
+        kind[i] = kd;
+        kindF[i] = kd;
+        K[i] = Math.sqrt(D) * (kd === 1 || kd === 3 ? 1.4 : 1);
+        if (trail)
+            trail.reset(i);
+    }
+    for (let i = 0; i < nr; i++)
+        spawnRain(i, true);
+    const hp = new THREE.Vector3(), hv = new THREE.Vector3();
+    let emitAcc = 0, dripAcc = 0;
+    const hr = mulberry32(seedMix(0x5b1a, c.seed));
+    function step(hShown) {
+        const h = hShown * SLOWMO;
+        physT += h;
+        u.uPhysT.value = physT;
+        const mode = u.uPointerMode.value;
+        const S = u.uPointerStrength.value, act = u.uPointerActive.value, Rr = u.uPointerRadius.value;
+        hp.copy(u.uPointer.value);
+        hv.copy(u.uPointerVel.value);
+        const useUmb = mode === 0 && S > 0.01 && act > 0.02;
+        const useGust = mode === 1 && S > 0.01 && act > 0.01;
+        // umbrella: a dome of radius RU at the cursor (hand height), canopy apex a little above the rim
+        const RU = 0.42 * Rr * Math.min(Math.max(S, 0.3), 2);
+        const ux = hp.x, uy = Math.max(Math.min(hp.y, TOP - 0.1), GROUND + 0.4), uz = Math.max(Math.min(hp.z, ZH), -ZH);
+        // gust: a moving body in the air, velocity in physics time (a hand sweep is a strong gust)
+        const GS = 0.3 * Rr;
+        const AIR = 3.0 * S * act / SLOWMO;
+        const bvx = hv.x * AIR, bvy = hv.y * AIR, bvz = hv.z * AIR;
+        const bsp = Math.hypot(bvx, bvy, bvz), bn = bsp > 1e-4 ? 1 / bsp : 0;
+        const gustOn = useGust && bsp > 0.05;
+        const tauMin = 0.02;
+        // emission keeps the pool's live share tied to the rain rate
+        const liveShare = Math.min(1, 0.3 + u.uRainRate.value / 30);
+        emitAcc += (liveShare * nr * h) / ((TOP - GROUND) / 5.0);
+        let intercepted = 0;
+        for (let i = 0; i < n; i++) {
+            if (Dm[i] === 0) {
+                if (i < nr && emitAcc >= 1) {
+                    emitAcc -= 1;
+                    spawnRain(i, false);
+                }
+                continue;
+            }
+            const j = i * 3;
+            let x = pos[j], y = pos[j + 1], z = pos[j + 2];
+            let vx = vel[j], vy = vel[j + 1], vz = vel[j + 2];
+            windAt(x, y, z);
+            let ax = wind[0], ay = wind[1], az = wind[2];
+            if (gustOn) {
+                const qx = x - hp.x, qy = y - hp.y, qz = z - hp.z;
+                const r2 = qx * qx + qy * qy + qz * qz;
+                if (r2 < 49 * GS * GS) {
+                    const r = Math.sqrt(r2) + 1e-6;
+                    if (r > GS) {
+                        const k3 = (GS * GS * GS) / (2 * r2 * r);
+                        const vr = (bvx * qx + bvy * qy + bvz * qz) / r;
+                        ax += k3 * (3 * vr * qx / r - bvx);
+                        ay += k3 * (3 * vr * qy / r - bvy);
+                        az += k3 * (3 * vr * qz / r - bvz);
+                    }
+                    else {
+                        ax += bvx;
+                        ay += bvy;
+                        az += bvz;
+                    }
+                    const behind = -(qx * bvx + qy * bvy + qz * bvz) * bn;
+                    if (behind > 0) {
+                        const perp2 = r2 - behind * behind;
+                        const wk = Math.exp(-perp2 / (GS * GS * 1.5) - behind / (6 * GS));
+                        // the wake rolls up: a swirl about the gust direction
+                        ax += bvx * wk * 0.7 + (qy * bvz - qz * bvy) * bn * wk * 2.0;
+                        ay += bvy * wk * 0.7 + (qz * bvx - qx * bvz) * bn * wk * 2.0;
+                        az += bvz * wk * 0.7 + (qx * bvy - qy * bvx) * bn * wk * 2.0;
+                    }
+                }
+            }
+            // drag relaxation toward the air + terminal fall: tau = v_t / g (exact exponential update)
+            const tau = Math.max(vt[i] / GRAV, tauMin);
+            const dcy = Math.exp(-h / tau);
+            vx = ax + (vx - ax) * dcy;
+            vz = az + (vz - az) * dcy;
+            vy = (ay - vt[i]) + (vy - (ay - vt[i])) * dcy;
+            const py = y;
+            x += vx * h;
+            y += vy * h;
+            z += vz * h;
+            // umbrella canopy
+            if (useUmb && (kind[i] === 0 || kind[i] === 2) && py > uy) {
+                const dx = x - ux, dz = z - uz;
+                const rr2 = dx * dx + dz * dz;
+                if (rr2 < RU * RU) {
+                    const cy = uy + 0.16 * RU * (1 - rr2 / (RU * RU));
+                    if (y <= cy) {
+                        const rr = Math.sqrt(rr2) + 1e-4;
+                        intercepted += Dm[i] * Dm[i] * Dm[i];
+                        // the drop shatters on the fabric: small droplets fly off along the dome's slope
+                        const nSpray = Dm[i] > 0.6 ? 2 : 1;
+                        for (let k = 0; k < nSpray; k++) {
+                            const out = 0.6 + 1.4 * hr(), a = (hr() - 0.5) * 1.2;
+                            const ox = dx / rr * Math.cos(a) - dz / rr * Math.sin(a), oz = dz / rr * Math.cos(a) + dx / rr * Math.sin(a);
+                            spawnSplash(x, cy + 0.004, z, ox * out + vx * 0.2, 0.5 + 1.0 * hr(), oz * out + vz * 0.2, 0.5 + 0.5 * hr(), 3);
+                        }
+                        Dm[i] = 0;
+                        pos[j] = x;
+                        pos[j + 1] = cy;
+                        pos[j + 2] = z;
+                        vel[j] = vel[j + 1] = vel[j + 2] = 0;
+                        continue;
+                    }
+                }
+            }
+            // the road: splash (K = We^1/2 Re^1/4 > 57.7) or deposit
+            if (y <= GROUND) {
+                if (Math.abs(x) < XH + 0.05 && Math.abs(z) < ZH + 0.15 && (kind[i] === 0 || kind[i] === 2)) {
+                    const v = Math.hypot(vx, vy, vz), D = Dm[i] * 1e-3;
+                    const We = (1000 * v * v * D) / 0.072, Re = (v * D) / 1e-6;
+                    const Ks = Math.sqrt(We) * Math.pow(Re, 0.25);
+                    if (Ks > 57.7) {
+                        const m = 2 + Math.min(5, Math.floor((Ks - 57.7) / 90));
+                        const vs = 0.22 * v;
+                        for (let k = 0; k < m; k++) {
+                            if (hr() > 0.7)
+                                continue;
+                            const a = 6.2831853 * hr(), el = 0.6 + 0.5 * hr();
+                            const sp = vs * (0.6 + 0.8 * hr());
+                            spawnSplash(x, GROUND + 0.002, z, Math.cos(a) * Math.cos(el) * sp, Math.sin(el) * sp, Math.sin(a) * Math.cos(el) * sp, Dm[i] * (0.2 + 0.15 * hr()), 1);
+                        }
+                        // Worthington jet: one droplet straight up
+                        if (Dm[i] > 2 && hr() < 0.5)
+                            spawnSplash(x, GROUND + 0.003, z, vx * 0.05, 0.3 * v, vz * 0.05, Dm[i] * 0.45, 1);
+                    }
+                }
+                Dm[i] = 0;
+                pos[j] = x;
+                pos[j + 1] = GROUND;
+                pos[j + 2] = z;
+                vel[j] = vel[j + 1] = vel[j + 2] = 0;
+                continue;
+            }
+            if (Math.abs(x) > XH + 0.45 || Math.abs(z) > ZH + 0.5 || y > TOP + 0.5) {
+                // left the street: parked on the road (hidden) until re-emitted
+                Dm[i] = 0;
+                vel[j] = vel[j + 1] = vel[j + 2] = 0;
+                pos[j] = 0;
+                pos[j + 1] = GROUND;
+                pos[j + 2] = 0;
+                continue;
+            }
+            pos[j] = x;
+            pos[j + 1] = y;
+            pos[j + 2] = z;
+            vel[j] = vx;
+            vel[j + 1] = vy;
+            vel[j + 2] = vz;
+        }
+        if (emitAcc > 50)
+            emitAcc = 50;
+        // rim drips: intercepted water runs to the rim and leaves as heavy drops
+        if (useUmb) {
+            dripAcc += intercepted / 8;
+            while (dripAcc >= 1) {
+                dripAcc -= 1;
+                const a = 6.2831853 * hr();
+                spawnSplash(ux + RU * 1.01 * Math.cos(a), uy - 0.005, uz + RU * 1.01 * Math.sin(a), 0, -0.2, 0, 3.2 + 1.2 * hr(), 2);
+            }
+        }
+        if (dripAcc > 20)
+            dripAcc = 20;
+    }
+    const stepper = createFixedStep(H_STEP, 4);
+    for (let s = 0; s < 90; s++)
+        step(H_STEP);
+    // ---- geometry ----
+    const geo = new THREE.BufferGeometry();
+    const posAttr = new THREE.BufferAttribute(pos, 3).setUsage(THREE.DynamicDrawUsage);
+    const dAttr = new THREE.BufferAttribute(Dm, 1).setUsage(THREE.DynamicDrawUsage);
+    geo.setAttribute('position', posAttr);
+    geo.setAttribute('aD', dAttr);
+    const kAttr = new THREE.BufferAttribute(kindF, 1).setUsage(THREE.DynamicDrawUsage);
+    geo.setAttribute('aKind', kAttr);
+    const mat = new THREE.ShaderMaterial({
+        uniforms: u, vertexShader: dropVertex, fragmentShader: dropFragment,
+        transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+    });
+    const drops = new THREE.Points(geo, mat);
+    drops.frustumCulled = false;
+    attachViewH(drops, u);
+    const object = new THREE.Group();
+    const proxy = createPickProxy(BOUNDS.center, BOUNDS.radius);
+    object.add(drops, proxy.mesh);
+    const anchor = new THREE.Vector3(0, 0, 0.25);
+    const anchorHead = new THREE.Vector3(0, 0, -0.55); // the headlight sits at the back of the street
+    const focusPt = new THREE.Vector3();
+    const camDir = new THREE.Vector3();
+    // ---- trails: every sample lit by the same lights as the drops ----
+    const trailGLSL = /* glsl */ `
+${DROP_LIGHT_GLSL}
+uniform float uTrailGain;
+vec3 trailShade(vec3 p, float f) {
+  float fade = smoothstep(${f3(TOP)}, ${f3(TOP - 0.2)}, p.y) * step(${f3(GROUND)}, p.y);
+  return dropLight(p) * (0.5 + 0.5 * TRAIL_K) * 0.55 * uTrailGain * fade;
+}
+vec3 trailView(vec3 mv, out float mag) { mag = 1.0; return mv; }
+`;
+    const materials = [mat];
+    let trailKey = '', trailTR = TR_MODE.streak;
+    function buildTrails(mode, share) {
+        trailTR = TR_MODE[mode] || TR_MODE.streak;
+        const key = mode + ':' + share;
+        if (key === trailKey)
+            return;
+        trailKey = key;
+        if (trail) {
+            object.remove(trail.object);
+            trail.dispose();
+            trail = null;
+        }
+        materials.length = 1;
+        u.uTrailGain.value = TRAIL_GAIN[mode] || 1;
+        trail = createCpuTrail(mode, { u, n, pos, vel, k: K, glsl: trailGLSL, sizePx: 0.0055, spacing: 0.004, sub: 8 });
+        if (!trail)
+            return;
+        object.add(trail.object);
+        materials.push(...trail.materials);
+    }
+    buildTrails(c.trailMode, c.trailShare);
+    function upload() { posAttr.needsUpdate = true; dAttr.needsUpdate = true; kAttr.needsUpdate = true; }
+    return {
+        object,
+        materials,
+        apply(cfg) { if (cfg)
+            buildTrails(cfg.trailMode, cfg.trailShare); },
+        update(dt, camera, pointer) {
+            const rdt = Math.min(Math.max(dt, 0), 1 / 20);
+            if (camera && !inView(object, camera, BOUNDS.center, BOUNDS.radius, u.uSize.value))
+                return;
+            const d = rdt * u.uSpeed.value;
+            u.uTime.value += d;
+            if (camera) {
+                object.localToWorld(focusPt.set(0, 0, 0));
+                u.uFocus.value = camera.position.distanceTo(focusPt);
+                object.worldToLocal(u.uCamLocal.value.copy(camera.position)).divideScalar(u.uSize.value);
+                if (pointer)
+                    stepPointerField(u, pointer, camera, object, u.uSize.value, rdt, u.uPointerMode.value === 2 ? anchorHead : anchor);
+                // headlight: an oncoming car at the back of the street, aimed at the viewer and tipped down,
+                // so the drops between it and the eye flare in the forward-scattering lobe
+                const on = u.uPointerMode.value === 2 ? u.uPointerStrength.value * u.uPointerActive.value : 0;
+                u.uHead.value = on;
+                if (on > 0) {
+                    camDir.copy(u.uCamLocal.value).sub(u.uPointer.value).normalize();
+                    camDir.y -= 0.12;
+                    camDir.normalize();
+                    u.uHeadDir.value.copy(camDir);
+                    u.uHeadPos.value.copy(u.uPointer.value);
+                }
+            }
+            u.uVelScale.value = trailTR;
+            let simD = 0;
+            stepper.run(d, (hh) => { step(hh); simD += hh; });
+            if (simD > 0) {
+                upload();
+                if (trail)
+                    trail.update((simD * SLOWMO) / trailTR);
+            }
+        },
+        seek(t) { for (let s = 0; s < Math.round(t / H_STEP); s++)
+            step(H_STEP); upload(); },
+        dispose() {
+            geo.dispose();
+            mat.dispose();
+            proxy.dispose();
+            if (trail)
+                trail.dispose();
+        },
+        _state: { pos, vel, Dm, kind },
+    };
+}
+/** Defaults for every knob, so an older saved config still renders (identical to the catalog entry). */
+const DEFAULTS = {
+    intensity: 1,
+    speed: 1,
+    opacity: 0.9,
+    size: 1,
+    color: '#ff2f9a',
+    particleCount: 10000,
+    rainRate: 18,
+    windSpeed: 0.8,
+    gustiness: 0.6,
+    neonColor2: '#22dcff',
+    lampColor: '#ffae52',
+    neonLight: 1,
+    aperture: 0.5,
+    dropSize: 1,
+    seed: 1,
+    quality: 'medium',
+    pointerMode: 'umbrella',
+    pointerStrength: 1,
+    pointerRadius: 1,
+    pointerColor: '#eaf2ff',
+    trailMode: 'streak',
+    trailLength: 1.2,
+    trailOpacity: 0.7,
+    trailColor: '#9fb8ff',
+    trailShare: 0.6,
+};
+/** Knobs that rebuild the simulation: they change on commit, never through the live path. */
+const STRUCTURAL = ['particleCount', 'seed', 'quality'];
+/** Knobs an animation (or mouse move) may drive per frame — generated from applyConfig. */
+const ANIMATABLE = new Set(GENERATIVE_PARTICLES_ANIMATABLE.neonRain.map((p) => p.value));
+const NeonRainParticles = ({ id, size, config, animations, onObjectReady, onObjectDispose }) => {
+    const rootRef = useRef(null);
+    useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
+    const s = size > 0 ? size : 1;
+    const cfg = useMemo(() => ({ ...DEFAULTS, ...config }), [config]);
+    // uniforms outlive the objects, so keyframe animations survive a rebuild
+    const uniforms = useMemo(() => createUniforms(), []);
+    // rebuilt only when a structural knob changes (trails rebuild inside apply())
+    const instance = useMemo(() => build(uniforms, cfg, s), [uniforms, cfg.particleCount, cfg.seed, cfg.quality]);
+    useEffect(() => () => instance.dispose(), [instance]);
+    useLayoutEffect(() => {
+        applyConfig(uniforms, cfg, s);
+        instance.apply(cfg);
+    }, [instance, uniforms, cfg, s]);
+    // Slider drags and keyframe animations are both overrides on the committed config.
+    // This is the one place they are merged and pushed, so they compose instead of
+    // overwriting each other; the animation wins, because it is the active driver.
+    const keyframes = animations?.particles?.animations;
+    const animOverride = useRef({});
+    const animFrom = useRef({});
+    const animStart = useRef(0);
+    // Editing a keyframe restarts its cycle rather than dropping the user mid-way.
+    useEffect(() => { animStart.current = performance.now(); animFrom.current = {}; }, [keyframes]);
+    const push = useCallback((overrides) => {
+        const merged = { ...cfg, ...overrides, ...animOverride.current };
+        const z = merged.size;
+        applyConfig(uniforms, merged, z && z > 0 ? z : s);
+    }, [cfg, uniforms, s]);
+    const live = useConfigLiveHandle(rootRef, id, 'particles', cfg, STRUCTURAL, push);
+    const pointer = usePointerField();
+    useFrame((state, delta) => {
+        instance.update(Math.min(delta, 0.1), state.camera, pointer);
+        if (keyframes?.length) {
+            applyConfigKeyframeAnimations(keyframes, animFrom.current, cfg, animOverride.current, performance.now() - animStart.current, ANIMATABLE);
+            push(live.current);
+        }
+    });
+    return (_jsx("group", { ref: rootRef, children: _jsx("primitive", { object: instance.object }) }));
+};
+export default NeonRainParticles;