r3f-vfx 0.0.5 → 0.0.7

package/dist/index.js

@@ -1141,7 +1141,7 @@ ${" ".repeat(indent - 2)}}`;
         }
       );
     };
-    useScrubber = (value, onChange, step2 = 0.01, min, max) => {
+    useScrubber = (value, onChange, step = 0.01, min, max) => {
       const isDraggingRef = useRef(false);
       const hasMoved = useRef(false);
       const startX = useRef(0);
@@ -1166,11 +1166,11 @@ ${" ".repeat(indent - 2)}}`;
               setIsDragging(true);
             }
             const sensitivity = e2.shiftKey ? 0.1 : 0.5;
-            const change = delta * step2 * sensitivity;
+            const change = delta * step * sensitivity;
             let newValue = startValue.current + change;
             if (min !== void 0) newValue = Math.max(min, newValue);
             if (max !== void 0) newValue = Math.min(max, newValue);
-            const precision = step2 < 1 ? Math.ceil(-Math.log10(step2)) : 0;
+            const precision = step < 1 ? Math.ceil(-Math.log10(step)) : 0;
             newValue = parseFloat(newValue.toFixed(precision));
             onChange(newValue);
           };
@@ -1190,7 +1190,7 @@ ${" ".repeat(indent - 2)}}`;
           document.addEventListener("mousemove", handleMouseMove);
           document.addEventListener("mouseup", handleMouseUp);
         },
-        [value, onChange, step2, min, max]
+        [value, onChange, step, min, max]
       );
       return { handleMouseDown, hasMoved, isDragging };
     };
@@ -1199,7 +1199,7 @@ ${" ".repeat(indent - 2)}}`;
       onChange,
       min,
       max,
-      step: step2 = 0.01,
+      step = 0.01,
       style,
       placeholder
     }) => {
@@ -1209,7 +1209,7 @@ ${" ".repeat(indent - 2)}}`;
       const { handleMouseDown, hasMoved, isDragging } = useScrubber(
         value,
         onChange,
-        step2,
+        step,
         min,
         max
       );
@@ -1298,8 +1298,8 @@ ${" ".repeat(indent - 2)}}`;
         }
       );
     };
-    NumberInput = ({ label, value, onChange, min, max, step: step2 = 0.01 }) => {
-      const { handleMouseDown } = useScrubber(value, onChange, step2, min, max);
+    NumberInput = ({ label, value, onChange, min, max, step = 0.01 }) => {
+      const { handleMouseDown } = useScrubber(value, onChange, step, min, max);
       return /* @__PURE__ */ jsxs("div", { style: styles.row, children: [
         /* @__PURE__ */ jsx(
           "label",
@@ -1317,7 +1317,7 @@ ${" ".repeat(indent - 2)}}`;
             onChange,
             min,
             max,
-            step: step2,
+            step,
             style: styles.input
           }
         )
@@ -1329,7 +1329,7 @@ ${" ".repeat(indent - 2)}}`;
       onChange,
       min = -100,
       max = 100,
-      step: step2 = 0.01
+      step = 0.01
     }) => {
       const [minVal, maxVal] = parseRange(value, [0, 0]);
       const [linked, setLinked] = useState(false);
@@ -1356,7 +1356,7 @@ ${" ".repeat(indent - 2)}}`;
       const { handleMouseDown } = useScrubber(
         minVal,
         handleMinChange,
-        step2,
+        step,
         min,
         max
       );
@@ -1389,7 +1389,7 @@ ${" ".repeat(indent - 2)}}`;
               onChange: handleMinChange,
               min,
               max,
-              step: step2,
+              step,
               style: styles.rangeInput,
               placeholder: "min"
             }
@@ -1427,7 +1427,7 @@ ${" ".repeat(indent - 2)}}`;
               onChange: handleMaxChange,
               min,
               max,
-              step: step2,
+              step,
               style: styles.rangeInput,
               placeholder: "max"
             }
@@ -5117,7 +5117,7 @@ ${" ".repeat(indent - 2)}}`;
   }
 });
 
-// src/VFXParticles.jsx
+// src/VFXParticles.tsx
 import {
   forwardRef,
   useImperativeHandle,
@@ -5129,280 +5129,41 @@ import {
 } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import * as THREE2 from "three/webgpu";
+import { uniform, instancedArray } from "three/tsl";
 import {
-  Fn,
-  If,
-  uniform,
-  float,
-  uv,
-  vec2,
-  vec3,
-  vec4,
-  hash,
-  mix,
-  floor,
-  step,
-  mod,
-  texture,
-  instancedArray,
-  instanceIndex,
-  positionLocal,
-  cos,
-  sin,
-  atan,
-  sqrt,
-  acos,
-  PI,
-  mx_noise_vec3,
-  screenUV,
-  viewportDepthTexture,
-  positionView,
-  cameraNear,
-  cameraFar,
-  clamp
-} from "three/tsl";
+  Appearance as Appearance2,
+  Blending as Blending2,
+  EmitterShape as EmitterShape2,
+  Lighting as Lighting2,
+  MAX_ATTRACTORS,
+  hexToRgb,
+  toRange,
+  easingToType,
+  axisToNumber,
+  toRotation3D,
+  lifetimeToFadeRate,
+  createCombinedCurveTexture,
+  createInitCompute,
+  createSpawnCompute,
+  createUpdateCompute,
+  createParticleMaterial
+} from "core-vfx";
+import {
+  Appearance,
+  Blending,
+  EmitterShape,
+  AttractorType as AttractorType2,
+  Easing as Easing2,
+  Lighting,
+  bakeCurveToArray,
+  createCombinedCurveTexture as createCombinedCurveTexture2
+} from "core-vfx";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var Appearance, Blending, EmitterShape, AttractorType, Easing, Lighting, MAX_ATTRACTORS, hexToRgb, toRange, easingToType, axisToNumber, CURVE_RESOLUTION, evaluateBezierSegment, sampleCurveAtX, bakeCurveToArray, createCombinedCurveTexture, toRotation3D, VFXParticles;
+var VFXParticles;
 var init_VFXParticles = __esm({
-  "src/VFXParticles.jsx"() {
+  "src/VFXParticles.tsx"() {
     "use strict";
     init_react_store();
-    Appearance = Object.freeze({
-      DEFAULT: "default",
-      GRADIENT: "gradient",
-      CIRCULAR: "circular"
-    });
-    Blending = Object.freeze({
-      NORMAL: THREE2.NormalBlending,
-      ADDITIVE: THREE2.AdditiveBlending,
-      MULTIPLY: THREE2.MultiplyBlending,
-      SUBTRACTIVE: THREE2.SubtractiveBlending
-    });
-    EmitterShape = Object.freeze({
-      POINT: 0,
-      // Single point emission
-      BOX: 1,
-      // Box/cube volume (uses startPosition ranges)
-      SPHERE: 2,
-      // Sphere surface or volume
-      CONE: 3,
-      // Cone shape (great for fire, fountains)
-      DISK: 4,
-      // Flat disk/circle
-      EDGE: 5
-      // Line between two points
-    });
-    AttractorType = Object.freeze({
-      POINT: 0,
-      // Pull toward a point (or push if negative strength)
-      VORTEX: 1
-      // Swirl around an axis
-    });
-    Easing = Object.freeze({
-      LINEAR: 0,
-      EASE_IN: 1,
-      EASE_OUT: 2,
-      EASE_IN_OUT: 3
-    });
-    Lighting = Object.freeze({
-      BASIC: "basic",
-      // No lighting, flat colors (MeshBasicNodeMaterial)
-      STANDARD: "standard",
-      // Standard PBR (MeshStandardNodeMaterial)
-      PHYSICAL: "physical"
-      // Advanced PBR with clearcoat, transmission, etc. (MeshPhysicalNodeMaterial)
-    });
-    MAX_ATTRACTORS = 4;
-    hexToRgb = (hex) => {
-      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-      return result ? [
-        parseInt(result[1], 16) / 255,
-        parseInt(result[2], 16) / 255,
-        parseInt(result[3], 16) / 255
-      ] : [1, 1, 1];
-    };
-    toRange = (value, defaultVal = [0, 0]) => {
-      if (value === void 0 || value === null) return defaultVal;
-      if (Array.isArray(value))
-        return value.length === 2 ? value : [value[0], value[0]];
-      return [value, value];
-    };
-    easingToType = (easing) => {
-      if (typeof easing === "number") return easing;
-      switch (easing) {
-        case "easeIn":
-          return 1;
-        case "easeOut":
-          return 2;
-        case "easeInOut":
-          return 3;
-        default:
-          return 0;
-      }
-    };
-    axisToNumber = (axis) => {
-      switch (axis) {
-        case "x":
-        case "+x":
-        case "X":
-        case "+X":
-          return 0;
-        case "y":
-        case "+y":
-        case "Y":
-        case "+Y":
-          return 1;
-        case "z":
-        case "+z":
-        case "Z":
-        case "+Z":
-          return 2;
-        case "-x":
-        case "-X":
-          return 3;
-        case "-y":
-        case "-Y":
-          return 4;
-        case "-z":
-        case "-Z":
-          return 5;
-        default:
-          return 2;
-      }
-    };
-    CURVE_RESOLUTION = 256;
-    evaluateBezierSegment = (t, p0, p1, h0Out, h1In) => {
-      const cp0 = p0;
-      const cp1 = [p0[0] + ((h0Out == null ? void 0 : h0Out[0]) || 0), p0[1] + ((h0Out == null ? void 0 : h0Out[1]) || 0)];
-      const cp2 = [p1[0] + ((h1In == null ? void 0 : h1In[0]) || 0), p1[1] + ((h1In == null ? void 0 : h1In[1]) || 0)];
-      const cp3 = p1;
-      const mt = 1 - t;
-      const mt2 = mt * mt;
-      const mt3 = mt2 * mt;
-      const t2 = t * t;
-      const t3 = t2 * t;
-      return [
-        mt3 * cp0[0] + 3 * mt2 * t * cp1[0] + 3 * mt * t2 * cp2[0] + t3 * cp3[0],
-        mt3 * cp0[1] + 3 * mt2 * t * cp1[1] + 3 * mt * t2 * cp2[1] + t3 * cp3[1]
-      ];
-    };
-    sampleCurveAtX = (x, points) => {
-      var _a, _b, _c, _d;
-      if (!points || points.length < 2) return x;
-      if (!((_a = points[0]) == null ? void 0 : _a.pos) || !((_b = points[points.length - 1]) == null ? void 0 : _b.pos)) return x;
-      let segmentIdx = 0;
-      for (let i = 0; i < points.length - 1; i++) {
-        if (((_c = points[i]) == null ? void 0 : _c.pos) && ((_d = points[i + 1]) == null ? void 0 : _d.pos) && x >= points[i].pos[0] && x <= points[i + 1].pos[0]) {
-          segmentIdx = i;
-          break;
-        }
-      }
-      const p0 = points[segmentIdx];
-      const p1 = points[segmentIdx + 1];
-      if (!(p0 == null ? void 0 : p0.pos) || !(p1 == null ? void 0 : p1.pos)) return x;
-      let tLow = 0, tHigh = 1, t = 0.5;
-      for (let iter = 0; iter < 20; iter++) {
-        const [px] = evaluateBezierSegment(
-          t,
-          p0.pos,
-          p1.pos,
-          p0.handleOut,
-          p1.handleIn
-        );
-        if (Math.abs(px - x) < 1e-4) break;
-        if (px < x) {
-          tLow = t;
-        } else {
-          tHigh = t;
-        }
-        t = (tLow + tHigh) / 2;
-      }
-      const [, py] = evaluateBezierSegment(
-        t,
-        p0.pos,
-        p1.pos,
-        p0.handleOut,
-        p1.handleIn
-      );
-      return Math.max(-0.5, Math.min(1.5, py));
-    };
-    bakeCurveToArray = (curveData, resolution = CURVE_RESOLUTION) => {
-      const data = new Float32Array(resolution);
-      if (!(curveData == null ? void 0 : curveData.points) || !Array.isArray(curveData.points) || curveData.points.length < 2) {
-        for (let i = 0; i < resolution; i++) {
-          data[i] = 1 - i / (resolution - 1);
-        }
-        return data;
-      }
-      const firstPoint = curveData.points[0];
-      const lastPoint = curveData.points[curveData.points.length - 1];
-      if (!(firstPoint == null ? void 0 : firstPoint.pos) || !(lastPoint == null ? void 0 : lastPoint.pos) || !Array.isArray(firstPoint.pos) || !Array.isArray(lastPoint.pos)) {
-        for (let i = 0; i < resolution; i++) {
-          data[i] = 1 - i / (resolution - 1);
-        }
-        return data;
-      }
-      for (let i = 0; i < resolution; i++) {
-        const x = i / (resolution - 1);
-        data[i] = sampleCurveAtX(x, curveData.points);
-      }
-      return data;
-    };
-    createCombinedCurveTexture = (sizeCurve, opacityCurve, velocityCurve, rotationSpeedCurve) => {
-      const sizeData = bakeCurveToArray(sizeCurve);
-      const opacityData = bakeCurveToArray(opacityCurve);
-      const velocityData = bakeCurveToArray(velocityCurve);
-      const rotationSpeedData = bakeCurveToArray(rotationSpeedCurve);
-      const rgba = new Float32Array(CURVE_RESOLUTION * 4);
-      for (let i = 0; i < CURVE_RESOLUTION; i++) {
-        rgba[i * 4] = sizeData[i];
-        rgba[i * 4 + 1] = opacityData[i];
-        rgba[i * 4 + 2] = velocityData[i];
-        rgba[i * 4 + 3] = rotationSpeedData[i];
-      }
-      const tex = new THREE2.DataTexture(
-        rgba,
-        CURVE_RESOLUTION,
-        1,
-        THREE2.RGBAFormat,
-        THREE2.FloatType
-      );
-      tex.minFilter = THREE2.LinearFilter;
-      tex.magFilter = THREE2.LinearFilter;
-      tex.wrapS = THREE2.ClampToEdgeWrapping;
-      tex.needsUpdate = true;
-      return tex;
-    };
-    toRotation3D = (value) => {
-      if (value === void 0 || value === null)
-        return [
-          [0, 0],
-          [0, 0],
-          [0, 0]
-        ];
-      if (typeof value === "number")
-        return [
-          [value, value],
-          [value, value],
-          [value, value]
-        ];
-      if (Array.isArray(value)) {
-        if (Array.isArray(value[0])) {
-          return [
-            toRange(value[0], [0, 0]),
-            toRange(value[1], [0, 0]),
-            toRange(value[2], [0, 0])
-          ];
-        }
-        const range = toRange(value, [0, 0]);
-        return [range, range, range];
-      }
-      return [
-        [0, 0],
-        [0, 0],
-        [0, 0]
-      ];
-    };
     VFXParticles = forwardRef(function VFXParticles2({
       name,
       // Optional name for registering with useVFXStore (enables VFXEmitter linking)
@@ -5437,7 +5198,7 @@ var init_VFXParticles = __esm({
       friction = { intensity: 0, easing: "linear" },
       // { intensity: [start, end] or single value, easing: string }
       // intensity: 1 = max friction (almost stopped), 0 = no friction (normal), negative = boost/acceleration
-      appearance = Appearance.GRADIENT,
+      appearance = Appearance2.GRADIENT,
       alphaMap = null,
       flipbook = null,
       // { rows: 4, columns: 8 }
@@ -5455,11 +5216,11 @@ var init_VFXParticles = __esm({
       // Which local axis aligns with velocity: "x", "y", "z", "-x", "-y", "-z"
       stretchBySpeed = null,
       // { factor: 2, maxStretch: 5 } - stretch particles in velocity direction based on effective speed
-      lighting = Lighting.STANDARD,
+      lighting = Lighting2.STANDARD,
       // 'basic' | 'standard' | 'physical' - material type for geometry mode
       shadow = false,
       // Enable both castShadow and receiveShadow on geometry instances
-      blending = Blending.NORMAL,
+      blending = Blending2.NORMAL,
       intensity = 1,
       position = [0, 0, 0],
       autoStart = true,
@@ -5476,7 +5237,7 @@ var init_VFXParticles = __esm({
       // TSL node or function for shadow map output (what shadow the particle casts)
       emitCount = 1,
       // Emitter shape props
-      emitterShape = EmitterShape.BOX,
+      emitterShape = EmitterShape2.BOX,
       // Emission shape type
       emitterRadius = [0, 1],
       // [inner, outer] radius for sphere/cone/disk (inner=0 for solid)
@@ -5510,7 +5271,7 @@ var init_VFXParticles = __esm({
       debug = false
     }, ref) {
       const { gl: renderer } = useThree();
-      const spriteRef = useRef2();
+      const spriteRef = useRef2(null);
       const initialized = useRef2(false);
       const nextIndex = useRef2(0);
       const [emitting, setEmitting] = useState2(autoStart);
@@ -5559,7 +5320,6 @@ var init_VFXParticles = __esm({
         velocityCurve,
         rotationSpeedCurve
       ]);
-      const lifetimeToFadeRate = (seconds) => 1 / seconds;
       const sizeRange = useMemo(() => toRange(size, [0.1, 0.3]), [size]);
       const speedRange = useMemo(() => toRange(speed, [0.1, 0.1]), [speed]);
       const fadeSizeRange = useMemo(() => toRange(fadeSize, [1, 0]), [fadeSize]);
@@ -5618,8 +5378,9 @@ var init_VFXParticles = __esm({
         return [0, 0];
       }, [friction]);
       const frictionEasingType = useMemo(() => {
+        var _a;
         if (typeof friction === "object" && friction !== null && "easing" in friction) {
-          return easingToType(friction.easing);
+          return easingToType((_a = friction.easing) != null ? _a : "linear");
         }
         return 0;
       }, [friction]);
@@ -5850,14 +5611,15 @@ var init_VFXParticles = __esm({
         );
         for (let i = 0; i < MAX_ATTRACTORS; i++) {
           const a = attractorList[i];
+          const u = uniforms;
           if (a) {
-            uniforms[`attractor${i}Pos`].value.set(...(_d = a.position) != null ? _d : [0, 0, 0]);
-            uniforms[`attractor${i}Strength`].value = (_e = a.strength) != null ? _e : 1;
-            uniforms[`attractor${i}Radius`].value = (_f = a.radius) != null ? _f : 0;
-            uniforms[`attractor${i}Type`].value = a.type === "vortex" ? 1 : 0;
-            uniforms[`attractor${i}Axis`].value.set(...(_g = a.axis) != null ? _g : [0, 1, 0]).normalize();
+            u[`attractor${i}Pos`].value.set(...(_d = a.position) != null ? _d : [0, 0, 0]);
+            u[`attractor${i}Strength`].value = (_e = a.strength) != null ? _e : 1;
+            u[`attractor${i}Radius`].value = (_f = a.radius) != null ? _f : 0;
+            u[`attractor${i}Type`].value = a.type === "vortex" ? 1 : 0;
+            u[`attractor${i}Axis`].value.set(...(_g = a.axis) != null ? _g : [0, 1, 0]).normalize();
           } else {
-            uniforms[`attractor${i}Strength`].value = 0;
+            u[`attractor${i}Strength`].value = 0;
           }
         }
         uniforms.attractToCenter.value = attractToCenter ? 1 : 0;
@@ -5919,16 +5681,7 @@ var init_VFXParticles = __esm({
         orientAxis,
         stretchBySpeed
       ]);
-      const {
-        positions,
-        velocities,
-        lifetimes,
-        fadeRates,
-        particleSizes,
-        particleRotations,
-        particleColorStarts,
-        particleColorEnds
-      } = useMemo(
+      const storage = useMemo(
         () => ({
           positions: instancedArray(activeMaxParticles, "vec3"),
           velocities: instancedArray(activeMaxParticles, "vec3"),
@@ -5936,774 +5689,60 @@ var init_VFXParticles = __esm({
           fadeRates: instancedArray(activeMaxParticles, "float"),
           particleSizes: instancedArray(activeMaxParticles, "float"),
           particleRotations: instancedArray(activeMaxParticles, "vec3"),
-          // X, Y, Z rotations
           particleColorStarts: instancedArray(activeMaxParticles, "vec3"),
           particleColorEnds: instancedArray(activeMaxParticles, "vec3")
         }),
         [activeMaxParticles]
       );
-      const selectColor = (idx, c0, c1, c2, c3, c4, c5, c6, c7) => {
-        return idx.lessThan(1).select(
-          c0,
-          idx.lessThan(2).select(
-            c1,
-            idx.lessThan(3).select(
-              c2,
-              idx.lessThan(4).select(
-                c3,
-                idx.lessThan(5).select(
-                  c4,
-                  idx.lessThan(6).select(c5, idx.lessThan(7).select(c6, c7))
-                )
-              )
-            )
-          )
-        );
-      };
-      const computeInit = useMemo(() => {
-        return Fn(() => {
-          const position2 = positions.element(instanceIndex);
-          const velocity = velocities.element(instanceIndex);
-          const lifetime2 = lifetimes.element(instanceIndex);
-          const fadeRate = fadeRates.element(instanceIndex);
-          const particleSize = particleSizes.element(instanceIndex);
-          const particleRotation = particleRotations.element(instanceIndex);
-          const colorStart2 = particleColorStarts.element(instanceIndex);
-          const colorEnd2 = particleColorEnds.element(instanceIndex);
-          position2.assign(vec3(0, -1e3, 0));
-          velocity.assign(vec3(0, 0, 0));
-          lifetime2.assign(float(0));
-          fadeRate.assign(float(0));
-          particleSize.assign(float(0));
-          particleRotation.assign(vec3(0, 0, 0));
-          colorStart2.assign(vec3(1, 1, 1));
-          colorEnd2.assign(vec3(1, 1, 1));
-        })().compute(activeMaxParticles);
-      }, [
-        activeMaxParticles,
-        positions,
-        velocities,
-        lifetimes,
-        fadeRates,
-        particleSizes,
-        particleRotations,
-        particleColorStarts,
-        particleColorEnds
-      ]);
-      const computeSpawn = useMemo(() => {
-        return Fn(() => {
-          const idx = float(instanceIndex);
-          const startIdx = uniforms.spawnIndexStart;
-          const endIdx = uniforms.spawnIndexEnd;
-          const seed = uniforms.spawnSeed;
-          const inRange = startIdx.lessThan(endIdx).select(
-            idx.greaterThanEqual(startIdx).and(idx.lessThan(endIdx)),
-            idx.greaterThanEqual(startIdx).or(idx.lessThan(endIdx))
-          );
-          If(inRange, () => {
-            const position2 = positions.element(instanceIndex);
-            const velocity = velocities.element(instanceIndex);
-            const lifetime2 = lifetimes.element(instanceIndex);
-            const fadeRate = fadeRates.element(instanceIndex);
-            const particleSize = particleSizes.element(instanceIndex);
-            const particleRotation = particleRotations.element(instanceIndex);
-            const pColorStart = particleColorStarts.element(instanceIndex);
-            const pColorEnd = particleColorEnds.element(instanceIndex);
-            const particleSeed = idx.add(seed);
-            const randDirX = hash(particleSeed.add(333));
-            const randDirY = hash(particleSeed.add(444));
-            const randDirZ = hash(particleSeed.add(555));
-            const randFade = hash(particleSeed.add(666));
-            const randColorStart = hash(particleSeed.add(777));
-            const randColorEnd = hash(particleSeed.add(888));
-            const randSize = hash(particleSeed.add(999));
-            const randSpeed = hash(particleSeed.add(1111));
-            const randRotationX = hash(particleSeed.add(2222));
-            const randRotationY = hash(particleSeed.add(3333));
-            const randRotationZ = hash(particleSeed.add(4444));
-            const randPosX = hash(particleSeed.add(5555));
-            const randPosY = hash(particleSeed.add(6666));
-            const randPosZ = hash(particleSeed.add(7777));
-            const randRadius = hash(particleSeed.add(8880));
-            const randTheta = hash(particleSeed.add(9990));
-            const randPhi = hash(particleSeed.add(10100));
-            const randHeight = hash(particleSeed.add(11110));
-            const shapeType = uniforms.emitterShapeType;
-            const radiusInner = uniforms.emitterRadiusInner;
-            const radiusOuter = uniforms.emitterRadiusOuter;
-            const coneAngle = uniforms.emitterAngle;
-            const heightMin = uniforms.emitterHeightMin;
-            const heightMax = uniforms.emitterHeightMax;
-            const surfaceOnly = uniforms.emitterSurfaceOnly;
-            const emitDir = uniforms.emitterDir;
-            const theta = randTheta.mul(PI.mul(2));
-            const phi = acos(float(1).sub(randPhi.mul(2)));
-            const radiusT = surfaceOnly.greaterThan(0.5).select(
-              float(1),
-              randRadius.pow(float(1).div(3))
-              // Cube root for uniform volume
-            );
-            const radius = mix(radiusInner, radiusOuter, radiusT);
-            const cosAngle = emitDir.y;
-            const axisX = emitDir.z.negate();
-            const axisZ = emitDir.x;
-            const axisLenSq = axisX.mul(axisX).add(axisZ.mul(axisZ));
-            const axisLen = sqrt(axisLenSq.max(1e-4));
-            const kx = axisX.div(axisLen);
-            const kz = axisZ.div(axisLen);
-            const sinAngle = axisLen;
-            const oneMinusCos = float(1).sub(cosAngle);
-            const rotateToEmitDir = (localPos) => {
-              const crossX = kz.mul(localPos.y).negate();
-              const crossY = kz.mul(localPos.x).sub(kx.mul(localPos.z));
-              const crossZ = kx.mul(localPos.y);
-              const kDotV = kx.mul(localPos.x).add(kz.mul(localPos.z));
-              const rotatedX = localPos.x.mul(cosAngle).add(crossX.mul(sinAngle)).add(kx.mul(kDotV).mul(oneMinusCos));
-              const rotatedY = localPos.y.mul(cosAngle).add(crossY.mul(sinAngle));
-              const rotatedZ = localPos.z.mul(cosAngle).add(crossZ.mul(sinAngle)).add(kz.mul(kDotV).mul(oneMinusCos));
-              return cosAngle.greaterThan(0.999).select(
-                localPos,
-                cosAngle.lessThan(-0.999).select(
-                  vec3(localPos.x, localPos.y.negate(), localPos.z),
-                  vec3(rotatedX, rotatedY, rotatedZ)
-                )
-              );
-            };
-            const boxOffsetX = mix(
-              uniforms.startPosMinX,
-              uniforms.startPosMaxX,
-              randPosX
-            );
-            const boxOffsetY = mix(
-              uniforms.startPosMinY,
-              uniforms.startPosMaxY,
-              randPosY
-            );
-            const boxOffsetZ = mix(
-              uniforms.startPosMinZ,
-              uniforms.startPosMaxZ,
-              randPosZ
-            );
-            const boxPos = vec3(boxOffsetX, boxOffsetY, boxOffsetZ);
-            const sphereX = radius.mul(sin(phi)).mul(cos(theta));
-            const sphereY = radius.mul(cos(phi));
-            const sphereZ = radius.mul(sin(phi)).mul(sin(theta));
-            const spherePos = vec3(sphereX, sphereY, sphereZ);
-            const coneH = mix(heightMin, heightMax, randHeight);
-            const coneR = coneH.mul(sin(coneAngle)).mul(radiusT);
-            const coneLocalX = coneR.mul(cos(theta));
-            const coneLocalY = coneH.mul(cos(coneAngle));
-            const coneLocalZ = coneR.mul(sin(theta));
-            const conePos = rotateToEmitDir(
-              vec3(coneLocalX, coneLocalY, coneLocalZ)
-            );
-            const diskR = surfaceOnly.greaterThan(0.5).select(
-              radiusOuter,
-              mix(radiusInner, radiusOuter, sqrt(randRadius))
-              // sqrt for uniform area distribution
-            );
-            const diskLocalX = diskR.mul(cos(theta));
-            const diskLocalZ = diskR.mul(sin(theta));
-            const diskPos = rotateToEmitDir(vec3(diskLocalX, float(0), diskLocalZ));
-            const edgeT = randPosX;
-            const edgePos = vec3(
-              mix(uniforms.startPosMinX, uniforms.startPosMaxX, edgeT),
-              mix(uniforms.startPosMinY, uniforms.startPosMaxY, edgeT),
-              mix(uniforms.startPosMinZ, uniforms.startPosMaxZ, edgeT)
-            );
-            const pointPos = vec3(0, 0, 0);
-            const shapeOffset = shapeType.lessThan(0.5).select(
-              pointPos,
-              // 0: POINT
-              shapeType.lessThan(1.5).select(
-                boxPos,
-                // 1: BOX
-                shapeType.lessThan(2.5).select(
-                  spherePos,
-                  // 2: SPHERE
-                  shapeType.lessThan(3.5).select(
-                    conePos,
-                    // 3: CONE
-                    shapeType.lessThan(4.5).select(
-                      diskPos,
-                      // 4: DISK
-                      edgePos
-                      // 5: EDGE
-                    )
-                  )
-                )
-              )
-            );
-            position2.assign(uniforms.spawnPosition.add(shapeOffset));
-            const randomFade = mix(
-              uniforms.lifetimeMin,
-              uniforms.lifetimeMax,
-              randFade
-            );
-            fadeRate.assign(randomFade);
-            const useAttractToCenter = uniforms.attractToCenter.greaterThan(0.5);
-            const attractVelocity = shapeOffset.negate().mul(randomFade);
-            const useStartPosAsDir = uniforms.startPositionAsDirection.greaterThan(0.5);
-            const dirX = mix(uniforms.dirMinX, uniforms.dirMaxX, randDirX);
-            const dirY = mix(uniforms.dirMinY, uniforms.dirMaxY, randDirY);
-            const dirZ = mix(uniforms.dirMinZ, uniforms.dirMaxZ, randDirZ);
-            const randomDirVec = vec3(dirX, dirY, dirZ);
-            const randomDirLength = randomDirVec.length();
-            const randomDir = randomDirLength.greaterThan(1e-3).select(randomDirVec.div(randomDirLength), vec3(0, 0, 0));
-            const startPosLength = shapeOffset.length();
-            const startPosDir = startPosLength.greaterThan(1e-3).select(shapeOffset.div(startPosLength), vec3(0, 0, 0));
-            const dir = useStartPosAsDir.select(startPosDir, randomDir);
-            const randomSpeed = mix(
-              uniforms.speedMin,
-              uniforms.speedMax,
-              randSpeed
-            );
-            const normalVelocity = dir.mul(randomSpeed);
-            velocity.assign(
-              useAttractToCenter.select(attractVelocity, normalVelocity)
-            );
-            const randomSize = mix(uniforms.sizeMin, uniforms.sizeMax, randSize);
-            particleSize.assign(randomSize);
-            const rotX = mix(
-              uniforms.rotationMinX,
-              uniforms.rotationMaxX,
-              randRotationX
-            );
-            const rotY = mix(
-              uniforms.rotationMinY,
-              uniforms.rotationMaxY,
-              randRotationY
-            );
-            const rotZ = mix(
-              uniforms.rotationMinZ,
-              uniforms.rotationMaxZ,
-              randRotationZ
-            );
-            particleRotation.assign(vec3(rotX, rotY, rotZ));
-            const startColorIdx = floor(
-              randColorStart.mul(uniforms.colorStartCount)
-            );
-            const selectedStartColor = selectColor(
-              startColorIdx,
-              uniforms.colorStart0,
-              uniforms.colorStart1,
-              uniforms.colorStart2,
-              uniforms.colorStart3,
-              uniforms.colorStart4,
-              uniforms.colorStart5,
-              uniforms.colorStart6,
-              uniforms.colorStart7
-            );
-            pColorStart.assign(selectedStartColor);
-            const endColorIdx = floor(randColorEnd.mul(uniforms.colorEndCount));
-            const selectedEndColor = selectColor(
-              endColorIdx,
-              uniforms.colorEnd0,
-              uniforms.colorEnd1,
-              uniforms.colorEnd2,
-              uniforms.colorEnd3,
-              uniforms.colorEnd4,
-              uniforms.colorEnd5,
-              uniforms.colorEnd6,
-              uniforms.colorEnd7
-            );
-            pColorEnd.assign(selectedEndColor);
-            lifetime2.assign(float(1));
-          });
-        })().compute(activeMaxParticles);
-      }, [
-        activeMaxParticles,
-        positions,
-        velocities,
-        lifetimes,
-        fadeRates,
-        particleSizes,
-        particleRotations,
-        particleColorStarts,
-        particleColorEnds,
-        uniforms,
-        selectColor
-      ]);
-      const computeUpdate = useMemo(() => {
-        return Fn(() => {
-          const position2 = positions.element(instanceIndex);
-          const velocity = velocities.element(instanceIndex);
-          const lifetime2 = lifetimes.element(instanceIndex);
-          const fadeRate = fadeRates.element(instanceIndex);
-          const particleRotation = particleRotations.element(instanceIndex);
-          const particleSize = particleSizes.element(instanceIndex);
-          const dt = uniforms.deltaTime;
-          If(lifetime2.greaterThan(0), () => {
-            const gravityMultiplier = float(1).add(
-              particleSize.mul(uniforms.sizeBasedGravity)
-            );
-            velocity.addAssign(uniforms.gravity.mul(dt).mul(gravityMultiplier));
-            const progress = float(1).sub(lifetime2);
-            const velocityCurveSample = texture(
-              curveTexture,
-              vec2(progress, float(0.5))
-            ).z;
-            const speedScale = uniforms.velocityCurveEnabled.greaterThan(0.5).select(
-              // Use velocity curve directly as speed multiplier
-              velocityCurveSample,
-              // Legacy friction behavior
-              (() => {
-                const easingType = uniforms.frictionEasingType;
-                const easedProgress = easingType.lessThan(0.5).select(
-                  progress,
-                  easingType.lessThan(1.5).select(
-                    progress.mul(progress),
-                    easingType.lessThan(2.5).select(
-                      float(1).sub(
-                        float(1).sub(progress).mul(float(1).sub(progress))
-                      ),
-                      progress.lessThan(0.5).select(
-                        float(2).mul(progress).mul(progress),
-                        float(1).sub(
-                          float(-2).mul(progress).add(2).pow(2).div(2)
-                        )
-                      )
-                    )
-                  )
-                );
-                const currentIntensity = mix(
-                  uniforms.frictionIntensityStart,
-                  uniforms.frictionIntensityEnd,
-                  easedProgress
-                );
-                return float(1).sub(currentIntensity.mul(0.9));
-              })()
-            );
-            const turbIntensity = uniforms.turbulenceIntensity;
-            const turbFreq = uniforms.turbulenceFrequency;
-            const turbTime = uniforms.turbulenceTime;
-            If(turbIntensity.greaterThan(1e-3), () => {
-              const noisePos = position2.mul(turbFreq).add(vec3(turbTime, turbTime.mul(0.7), turbTime.mul(1.3)));
-              const eps = float(0.01);
-              const nPosX = mx_noise_vec3(noisePos.add(vec3(eps, 0, 0)));
-              const nNegX = mx_noise_vec3(noisePos.sub(vec3(eps, 0, 0)));
-              const nPosY = mx_noise_vec3(noisePos.add(vec3(0, eps, 0)));
-              const nNegY = mx_noise_vec3(noisePos.sub(vec3(0, eps, 0)));
-              const nPosZ = mx_noise_vec3(noisePos.add(vec3(0, 0, eps)));
-              const nNegZ = mx_noise_vec3(noisePos.sub(vec3(0, 0, eps)));
-              const dFx_dy = nPosY.x.sub(nNegY.x).div(eps.mul(2));
-              const dFx_dz = nPosZ.x.sub(nNegZ.x).div(eps.mul(2));
-              const dFy_dx = nPosX.y.sub(nNegX.y).div(eps.mul(2));
-              const dFy_dz = nPosZ.y.sub(nNegZ.y).div(eps.mul(2));
-              const dFz_dx = nPosX.z.sub(nNegX.z).div(eps.mul(2));
-              const dFz_dy = nPosY.z.sub(nNegY.z).div(eps.mul(2));
-              const curlX = dFz_dy.sub(dFy_dz);
-              const curlY = dFx_dz.sub(dFz_dx);
-              const curlZ = dFy_dx.sub(dFx_dy);
-              const curl = vec3(curlX, curlY, curlZ);
-              velocity.addAssign(curl.mul(turbIntensity).mul(uniforms.deltaTime));
-            });
-            const attractorCount = uniforms.attractorCount;
-            const applyAttractor = (aPos, aStrength, aRadius, aType, aAxis) => {
-              If(aStrength.abs().greaterThan(1e-3), () => {
-                const toAttractor = aPos.sub(position2);
-                const dist = toAttractor.length();
-                const safeDist = dist.max(0.01);
-                const direction2 = toAttractor.div(safeDist);
-                const falloff = aRadius.greaterThan(1e-3).select(
-                  float(1).sub(dist.div(aRadius)).max(0),
-                  // Linear falloff within radius
-                  float(1).div(safeDist.mul(safeDist).add(1))
-                  // Inverse square falloff (softened)
-                );
-                const force = aType.lessThan(0.5).select(
-                  // Point attractor: force along direction to attractor
-                  direction2.mul(aStrength).mul(falloff),
-                  // Vortex: force perpendicular to both (toAttractor) and (axis)
-                  // cross(axis, toAttractor) gives tangent direction
-                  (() => {
-                    const tangent = vec3(
-                      aAxis.y.mul(toAttractor.z).sub(aAxis.z.mul(toAttractor.y)),
-                      aAxis.z.mul(toAttractor.x).sub(aAxis.x.mul(toAttractor.z)),
-                      aAxis.x.mul(toAttractor.y).sub(aAxis.y.mul(toAttractor.x))
-                    );
-                    const tangentLen = tangent.length().max(1e-3);
-                    return tangent.div(tangentLen).mul(aStrength).mul(falloff);
-                  })()
-                );
-                velocity.addAssign(force.mul(uniforms.deltaTime));
-              });
-            };
-            If(attractorCount.greaterThan(0), () => {
-              applyAttractor(
-                uniforms.attractor0Pos,
-                uniforms.attractor0Strength,
-                uniforms.attractor0Radius,
-                uniforms.attractor0Type,
-                uniforms.attractor0Axis
-              );
-            });
-            If(attractorCount.greaterThan(1), () => {
-              applyAttractor(
-                uniforms.attractor1Pos,
-                uniforms.attractor1Strength,
-                uniforms.attractor1Radius,
-                uniforms.attractor1Type,
-                uniforms.attractor1Axis
-              );
-            });
-            If(attractorCount.greaterThan(2), () => {
-              applyAttractor(
-                uniforms.attractor2Pos,
-                uniforms.attractor2Strength,
-                uniforms.attractor2Radius,
-                uniforms.attractor2Type,
-                uniforms.attractor2Axis
-              );
-            });
-            If(attractorCount.greaterThan(3), () => {
-              applyAttractor(
-                uniforms.attractor3Pos,
-                uniforms.attractor3Strength,
-                uniforms.attractor3Radius,
-                uniforms.attractor3Type,
-                uniforms.attractor3Axis
-              );
-            });
-            position2.addAssign(velocity.mul(dt).mul(speedScale));
-            If(uniforms.collisionEnabled.greaterThan(0.5), () => {
-              const planeY = uniforms.collisionPlaneY;
-              const bounce = uniforms.collisionBounce;
-              const friction2 = uniforms.collisionFriction;
-              const shouldDie = uniforms.collisionDie;
-              If(position2.y.lessThan(planeY), () => {
-                If(shouldDie.greaterThan(0.5), () => {
-                  lifetime2.assign(float(0));
-                  position2.y.assign(float(-1e3));
-                }).Else(() => {
-                  position2.y.assign(planeY);
-                  velocity.y.assign(velocity.y.abs().mul(bounce));
-                  velocity.x.mulAssign(friction2);
-                  velocity.z.mulAssign(friction2);
-                });
-              });
-            });
-            const idx = float(instanceIndex);
-            const rotSpeedX = mix(
-              uniforms.rotationSpeedMinX,
-              uniforms.rotationSpeedMaxX,
-              hash(idx.add(8888))
-            );
-            const rotSpeedY = mix(
-              uniforms.rotationSpeedMinY,
-              uniforms.rotationSpeedMaxY,
-              hash(idx.add(9999))
-            );
-            const rotSpeedZ = mix(
-              uniforms.rotationSpeedMinZ,
-              uniforms.rotationSpeedMaxZ,
-              hash(idx.add(10101))
-            );
-            const rotSpeedCurveSample = texture(
-              curveTexture,
-              vec2(progress, float(0.5))
-            ).w;
-            const rotSpeedMultiplier = uniforms.rotationSpeedCurveEnabled.greaterThan(0.5).select(rotSpeedCurveSample, float(1));
-            particleRotation.addAssign(
-              vec3(rotSpeedX, rotSpeedY, rotSpeedZ).mul(uniforms.deltaTime).mul(rotSpeedMultiplier)
-            );
-            lifetime2.subAssign(fadeRate.mul(uniforms.deltaTime));
-            If(lifetime2.lessThanEqual(0), () => {
-              lifetime2.assign(float(0));
-              position2.y.assign(float(-1e3));
-            });
-          });
-        })().compute(activeMaxParticles);
-      }, [
-        activeMaxParticles,
-        positions,
-        velocities,
-        lifetimes,
-        fadeRates,
-        particleSizes,
-        particleRotations,
-        uniforms,
-        curveTexture
-      ]);
-      const material = useMemo(() => {
-        const lifetime2 = lifetimes.element(instanceIndex);
-        const particleSize = particleSizes.element(instanceIndex);
-        const particleRotation = particleRotations.element(instanceIndex);
-        const pColorStart = particleColorStarts.element(instanceIndex);
-        const pColorEnd = particleColorEnds.element(instanceIndex);
-        const particlePos = positions.element(instanceIndex);
-        const particleVel = velocities.element(instanceIndex);
-        const progress = float(1).sub(lifetime2);
-        const currentColor = mix(pColorStart, pColorEnd, progress);
-        const intensifiedColor = currentColor.mul(uniforms.intensity);
-        const curveSample = texture(curveTexture, vec2(progress, float(0.5)));
-        const sizeMultiplier = uniforms.fadeSizeCurveEnabled.greaterThan(0.5).select(
-          curveSample.x,
-          // R channel - size curve value
-          mix(uniforms.fadeSizeStart, uniforms.fadeSizeEnd, progress)
-          // Linear interpolation of fadeSize
-        );
-        const opacityMultiplier = uniforms.fadeOpacityCurveEnabled.greaterThan(0.5).select(
-          curveSample.y,
-          // G channel - opacity curve value
-          mix(uniforms.fadeOpacityStart, uniforms.fadeOpacityEnd, progress)
-          // Linear interpolation of fadeOpacity
-        );
-        let sampleUV = uv();
-        if (flipbook && alphaMap) {
-          const rows = float(flipbook.rows || 1);
-          const columns = float(flipbook.columns || 1);
-          const totalFrames = rows.mul(columns);
-          const frameIndex = floor(
-            progress.mul(totalFrames).min(totalFrames.sub(1))
-          );
-          const col = mod(frameIndex, columns);
-          const row = floor(frameIndex.div(columns));
-          const scaledUV = uv().div(vec2(columns, rows));
-          const offsetX = col.div(columns);
-          const offsetY = rows.sub(1).sub(row).div(rows);
-          sampleUV = scaledUV.add(vec2(offsetX, offsetY));
-        }
-        let shapeMask;
-        if (activeGeometry) {
-          shapeMask = float(1);
-        } else if (alphaMap) {
-          const alphaSample = texture(alphaMap, sampleUV);
-          shapeMask = alphaSample.r;
-        } else {
-          const dist = uv().mul(2).sub(1).length();
-          switch (activeAppearance) {
-            case Appearance.DEFAULT:
-              shapeMask = float(1);
-              break;
-            case Appearance.CIRCULAR:
-              shapeMask = step(dist, float(1));
-              break;
-            case Appearance.GRADIENT:
-            default:
-              shapeMask = float(1).sub(dist).max(0);
-              break;
-          }
-        }
-        const baseOpacity = opacityMultiplier.mul(shapeMask).mul(lifetime2.greaterThan(1e-3).select(float(1), float(0)));
-        const particleData = {
-          progress,
-          // 0→1 over lifetime
-          lifetime: lifetime2,
-          // 1→0 over lifetime (inverse of progress)
-          position: particlePos,
-          // vec3 world position
-          velocity: particleVel,
-          // vec3 velocity
-          size: particleSize,
-          // float size
-          rotation: particleRotation,
-          // vec3 rotation (x, y, z)
-          colorStart: pColorStart,
-          // vec3 start color
-          colorEnd: pColorEnd,
-          // vec3 end color
-          color: currentColor,
-          // vec3 interpolated color
-          intensifiedColor,
-          // vec3 color * intensity
-          shapeMask,
-          // float shape/alpha mask
-          index: instanceIndex
-          // particle index (for randomization)
-        };
-        let finalOpacity = opacityNode ? baseOpacity.mul(
-          typeof opacityNode === "function" ? opacityNode(particleData) : opacityNode
-        ) : baseOpacity;
-        if (softParticles) {
-          const sceneDepth = viewportDepthTexture(screenUV).x;
-          const particleViewZ = positionView.z.negate();
-          const near = cameraNear;
-          const far = cameraFar;
-          const sceneViewZ = near.mul(far).mul(2).div(far.add(near).sub(sceneDepth.mul(2).sub(1).mul(far.sub(near))));
-          const depthDiff = sceneViewZ.sub(particleViewZ);
-          const softFade = clamp(depthDiff.div(uniforms.softDistance), 0, 1);
-          finalOpacity = finalOpacity.mul(softFade);
-        }
-        if (activeGeometry) {
-          let mat;
-          switch (activeLighting) {
-            case Lighting.BASIC:
-              mat = new THREE2.MeshBasicNodeMaterial();
-              break;
-            case Lighting.PHYSICAL:
-              mat = new THREE2.MeshPhysicalNodeMaterial();
-              break;
-            case Lighting.STANDARD:
-            default:
-              mat = new THREE2.MeshStandardNodeMaterial();
-              break;
-          }
-          const velocityCurveValue = curveSample.z;
-          const effectiveVelocityMultiplier = uniforms.velocityCurveEnabled.greaterThan(0.5).select(velocityCurveValue, float(1));
-          const effectiveSpeed = particleVel.length().mul(effectiveVelocityMultiplier);
-          const stretchAmount = uniforms.stretchEnabled.greaterThan(0.5).select(
-            float(1).add(effectiveSpeed.mul(uniforms.stretchFactor)).min(uniforms.stretchMax),
-            float(1)
-          );
-          const baseScale = particleSize.mul(sizeMultiplier);
-          const axisType = uniforms.orientAxisType;
-          const axisSign = axisType.lessThan(3).select(float(1), float(-1));
-          const axisIndex = axisType.mod(3);
-          const stretchedLocal = uniforms.stretchEnabled.greaterThan(0.5).select(
-            axisIndex.lessThan(0.5).select(
-              // X axis stretch
-              vec3(
-                positionLocal.x.mul(stretchAmount),
-                positionLocal.y,
-                positionLocal.z
-              ),
-              axisIndex.lessThan(1.5).select(
-                // Y axis stretch
-                vec3(
-                  positionLocal.x,
-                  positionLocal.y.mul(stretchAmount),
-                  positionLocal.z
-                ),
-                // Z axis stretch
-                vec3(
-                  positionLocal.x,
-                  positionLocal.y,
-                  positionLocal.z.mul(stretchAmount)
-                )
-              )
-            ),
-            positionLocal
-          );
-          let rotatedPos;
-          if (activeOrientToDirection) {
-            const velLen = particleVel.length().max(1e-4);
-            const velDir = particleVel.div(velLen).mul(axisSign);
-            const localAxis = axisIndex.lessThan(0.5).select(
-              vec3(1, 0, 0),
-              // X axis
-              axisIndex.lessThan(1.5).select(
-                vec3(0, 1, 0),
-                // Y axis
-                vec3(0, 0, 1)
-                // Z axis
-              )
-            );
-            const dotProduct = localAxis.dot(velDir).clamp(-1, 1);
-            const crossProduct = localAxis.cross(velDir);
-            const crossLen = crossProduct.length();
-            const needsRotation = crossLen.greaterThan(1e-4);
-            const rotAxis = needsRotation.select(
-              crossProduct.div(crossLen),
-              vec3(0, 1, 0)
-              // Fallback axis (won't be used if no rotation needed)
-            );
-            const cosAngle = dotProduct;
-            const sinAngle = crossLen;
-            const oneMinusCos = float(1).sub(cosAngle);
-            const v = stretchedLocal;
-            const kDotV = rotAxis.dot(v);
-            const kCrossV = rotAxis.cross(v);
-            const rotatedByAxis = needsRotation.select(
-              v.mul(cosAngle).add(kCrossV.mul(sinAngle)).add(rotAxis.mul(kDotV.mul(oneMinusCos))),
-              // If vectors are nearly aligned, check if they're opposite (dot ≈ -1)
-              dotProduct.lessThan(-0.99).select(
-                v.negate(),
-                // Flip 180° - just negate
-                v
-                // Already aligned, no rotation
-              )
-            );
-            rotatedPos = rotatedByAxis;
-          } else {
-            const rotX = particleRotation.x;
-            const rotY = particleRotation.y;
-            const rotZ = particleRotation.z;
-            const cX = cos(rotX);
-            const sX = sin(rotX);
-            const afterX = vec3(
-              stretchedLocal.x,
-              stretchedLocal.y.mul(cX).sub(stretchedLocal.z.mul(sX)),
-              stretchedLocal.y.mul(sX).add(stretchedLocal.z.mul(cX))
-            );
-            const cY = cos(rotY);
-            const sY = sin(rotY);
-            const afterY = vec3(
-              afterX.x.mul(cY).add(afterX.z.mul(sY)),
-              afterX.y,
-              afterX.z.mul(cY).sub(afterX.x.mul(sY))
-            );
-            const cZ = cos(rotZ);
-            const sZ = sin(rotZ);
-            rotatedPos = vec3(
-              afterY.x.mul(cZ).sub(afterY.y.mul(sZ)),
-              afterY.x.mul(sZ).add(afterY.y.mul(cZ)),
-              afterY.z
-            );
-          }
-          const scaledPos = rotatedPos.mul(baseScale);
-          mat.positionNode = scaledPos.add(particlePos);
-          const defaultColor = vec4(intensifiedColor, finalOpacity);
-          mat.colorNode = colorNode ? typeof colorNode === "function" ? colorNode(particleData, defaultColor) : colorNode : defaultColor;
-          mat.transparent = true;
-          mat.depthWrite = false;
-          mat.blending = blending;
-          mat.side = THREE2.DoubleSide;
-          if (backdropNode) {
-            mat.backdropNode = typeof backdropNode === "function" ? backdropNode(particleData) : backdropNode;
-          }
-          if (castShadowNode) {
-            mat.castShadowNode = typeof castShadowNode === "function" ? castShadowNode(particleData) : castShadowNode;
-          }
-          if (alphaTestNode) {
-            mat.alphaTestNode = typeof alphaTestNode === "function" ? alphaTestNode(particleData) : alphaTestNode;
-          }
-          return mat;
-        } else {
-          const mat = new THREE2.SpriteNodeMaterial();
-          const defaultColor = vec4(intensifiedColor, finalOpacity);
-          mat.colorNode = colorNode ? typeof colorNode === "function" ? colorNode(particleData, defaultColor) : colorNode : defaultColor;
-          mat.positionNode = positions.toAttribute();
-          mat.scaleNode = particleSize.mul(sizeMultiplier);
-          mat.rotationNode = particleRotation.y;
-          mat.transparent = true;
-          mat.depthWrite = false;
-          mat.blending = blending;
-          if (backdropNode) {
-            mat.backdropNode = typeof backdropNode === "function" ? backdropNode(particleData) : backdropNode;
-          }
-          if (castShadowNode) {
-            mat.castShadowNode = typeof castShadowNode === "function" ? castShadowNode(particleData) : castShadowNode;
-          }
-          if (alphaTestNode) {
-            mat.alphaTestNode = typeof alphaTestNode === "function" ? alphaTestNode(particleData) : alphaTestNode;
-          }
-          return mat;
-        }
-      }, [
-        positions,
-        velocities,
-        lifetimes,
-        particleSizes,
-        particleRotations,
-        particleColorStarts,
-        particleColorEnds,
-        uniforms,
-        activeAppearance,
-        alphaMap,
-        flipbook,
-        blending,
-        activeGeometry,
-        activeOrientToDirection,
-        activeLighting,
-        backdropNode,
-        opacityNode,
-        colorNode,
-        alphaTestNode,
-        castShadowNode,
-        softParticles,
-        curveTexture
-      ]);
+      const computeInit = useMemo(
+        () => createInitCompute(storage, activeMaxParticles),
+        [storage, activeMaxParticles]
+      );
+      const computeSpawn = useMemo(
+        () => createSpawnCompute(storage, uniforms, activeMaxParticles),
+        [storage, uniforms, activeMaxParticles]
+      );
+      const computeUpdate = useMemo(
+        () => createUpdateCompute(storage, uniforms, curveTexture, activeMaxParticles),
+        [storage, uniforms, curveTexture, activeMaxParticles]
+      );
+      const material = useMemo(
+        () => createParticleMaterial(storage, uniforms, curveTexture, {
+          alphaMap,
+          flipbook,
+          appearance: activeAppearance,
+          lighting: activeLighting,
+          softParticles,
+          geometry: activeGeometry,
+          orientToDirection: activeOrientToDirection,
+          shadow: activeShadow,
+          blending,
+          opacityNode,
+          colorNode,
+          backdropNode,
+          alphaTestNode,
+          castShadowNode
+        }),
+        [
+          storage,
+          uniforms,
+          curveTexture,
+          activeAppearance,
+          alphaMap,
+          flipbook,
+          blending,
+          activeGeometry,
+          activeOrientToDirection,
+          activeLighting,
+          backdropNode,
+          opacityNode,
+          colorNode,
+          alphaTestNode,
+          castShadowNode,
+          softParticles,
+          activeShadow
+        ]
+      );
       const renderObject = useMemo(() => {
         if (activeGeometry) {
           const mesh = new THREE2.InstancedMesh(
@@ -6729,6 +5768,7 @@ var init_VFXParticles = __esm({
         });
       }, [renderer, computeInit]);
       const applySpawnOverrides = useCallback2(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (overrides) => {
           if (!overrides) return null;
           const saved = {};
@@ -6775,15 +5815,16 @@ var init_VFXParticles = __esm({
             saved.gravity = uniforms.gravity.value.clone();
             uniforms.gravity.value.set(...overrides.gravity);
           }
+          const u = uniforms;
           if (overrides.colorStart !== void 0) {
             const colors = overrides.colorStart.slice(0, 8).map(hexToRgb);
             while (colors.length < 8)
               colors.push(colors[colors.length - 1] || [1, 1, 1]);
             setUniform("colorStartCount", overrides.colorStart.length);
             colors.forEach((c, i) => {
-              if (uniforms[`colorStart${i}`]) {
-                saved[`colorStart${i}`] = uniforms[`colorStart${i}`].value.clone();
-                uniforms[`colorStart${i}`].value.setRGB(...c);
+              if (u[`colorStart${i}`]) {
+                saved[`colorStart${i}`] = u[`colorStart${i}`].value.clone();
+                u[`colorStart${i}`].value.setRGB(...c);
               }
             });
           }
@@ -6793,9 +5834,9 @@ var init_VFXParticles = __esm({
               colors.push(colors[colors.length - 1] || [1, 1, 1]);
             setUniform("colorEndCount", overrides.colorEnd.length);
             colors.forEach((c, i) => {
-              if (uniforms[`colorEnd${i}`]) {
-                saved[`colorEnd${i}`] = uniforms[`colorEnd${i}`].value.clone();
-                uniforms[`colorEnd${i}`].value.setRGB(...c);
+              if (u[`colorEnd${i}`]) {
+                saved[`colorEnd${i}`] = u[`colorEnd${i}`].value.clone();
+                u[`colorEnd${i}`].value.setRGB(...c);
               }
             });
           }
@@ -6836,7 +5877,8 @@ var init_VFXParticles = __esm({
       );
       const spawn = useCallback2(
         (x = 0, y = 0, z = 0, count = 20, overrides = null) => {
-          const [px, py, pz] = positionRef.current;
+          var _a;
+          const [px, py, pz] = (_a = positionRef.current) != null ? _a : [0, 0, 0];
           spawnInternal(px + x, py + y, pz + z, count, overrides);
         },
         [spawnInternal]
@@ -6935,6 +5977,7 @@ var init_VFXParticles = __esm({
       const prevGeometryTypeRef = useRef2(null);
       const prevGeometryArgsRef = useRef2(null);
       const handleDebugUpdate = useCallback2(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (newValues) => {
           var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C;
           debugValuesRef.current = __spreadValues(__spreadValues({}, debugValuesRef.current), newValues);
@@ -7074,7 +6117,7 @@ var init_VFXParticles = __esm({
             }
           }
           if ("emitterShape" in newValues) {
-            uniforms.emitterShapeType.value = (_g = newValues.emitterShape) != null ? _g : EmitterShape.BOX;
+            uniforms.emitterShapeType.value = (_g = newValues.emitterShape) != null ? _g : EmitterShape2.BOX;
           }
           if ("emitterRadius" in newValues) {
             const emitterRadiusR = toRange(newValues.emitterRadius, [0, 1]);
@@ -7407,7 +6450,7 @@ var init_VFXParticles = __esm({
 // src/index.ts
 init_VFXParticles();
 
-// src/VFXEmitter.jsx
+// src/VFXEmitter.tsx
 init_react_store();
 import {
   useRef as useRef3,
@@ -7436,7 +6479,7 @@ var VFXEmitter = forwardRef2(function VFXEmitter2({
   onEmit,
   children
 }, ref) {
-  const groupRef = useRef3();
+  const groupRef = useRef3(null);
   const emitAccumulator = useRef3(0);
   const emitting = useRef3(autoStart);
   const hasEmittedOnce = useRef3(false);
@@ -7446,18 +6489,28 @@ var VFXEmitter = forwardRef2(function VFXEmitter2({
     }
     return useVFXStore.getState().getParticles(name);
   }, [name, particlesRef]);
-  const transformDirectionByQuat = useCallback3((dirRange, quat) => {
-    if (!dirRange) return null;
-    const minDir = _tempVec.set(dirRange[0][0], dirRange[1][0], dirRange[2][0]);
-    minDir.applyQuaternion(quat);
-    const maxDir = new Vector32(dirRange[0][1], dirRange[1][1], dirRange[2][1]);
-    maxDir.applyQuaternion(quat);
-    return [
-      [Math.min(minDir.x, maxDir.x), Math.max(minDir.x, maxDir.x)],
-      [Math.min(minDir.y, maxDir.y), Math.max(minDir.y, maxDir.y)],
-      [Math.min(minDir.z, maxDir.z), Math.max(minDir.z, maxDir.z)]
-    ];
-  }, []);
+  const transformDirectionByQuat = useCallback3(
+    (dirRange, quat) => {
+      const minDir = _tempVec.set(
+        dirRange[0][0],
+        dirRange[1][0],
+        dirRange[2][0]
+      );
+      minDir.applyQuaternion(quat);
+      const maxDir = new Vector32(
+        dirRange[0][1],
+        dirRange[1][1],
+        dirRange[2][1]
+      );
+      maxDir.applyQuaternion(quat);
+      return [
+        [Math.min(minDir.x, maxDir.x), Math.max(minDir.x, maxDir.x)],
+        [Math.min(minDir.y, maxDir.y), Math.max(minDir.y, maxDir.y)],
+        [Math.min(minDir.z, maxDir.z), Math.max(minDir.z, maxDir.z)]
+      ];
+    },
+    []
+  );
   const getEmitParams = useCallback3(() => {
     if (!groupRef.current) {
       return { position, direction };
@@ -7563,7 +6616,10 @@ var VFXEmitter = forwardRef2(function VFXEmitter2({
     }),
     [emit, burst, start, stop, getParticleSystem]
   );
-  return /* @__PURE__ */ jsx3("group", { ref: groupRef, position, children });
+  return (
+    // @ts-expect-error
+    /* @__PURE__ */ jsx3("group", { ref: groupRef, position, children })
+  );
 });
 function useVFXEmitter(name) {
   const getParticles = useVFXStore((s) => s.getParticles);
@@ -7614,15 +6670,15 @@ function useVFXEmitter(name) {
 init_react_store();
 export {
   Appearance,
-  AttractorType,
+  AttractorType2 as AttractorType,
   Blending,
-  Easing,
+  Easing2 as Easing,
   EmitterShape,
   Lighting,
   VFXEmitter,
   VFXParticles,
   bakeCurveToArray,
-  createCombinedCurveTexture,
+  createCombinedCurveTexture2 as createCombinedCurveTexture,
   useVFXEmitter,
   useVFXStore
 };