r3f-vfx 0.1.3 → 0.1.4

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { RefObject, ReactNode } from 'react';
 import * as THREE from 'three/webgpu';
 import { CurveData, Rotation3DInput, Appearance, Lighting, ParticleData, EmitterShape, CoreState } from 'core-vfx';
-export { Appearance, AttractorConfig, AttractorType, BaseParticleProps, Blending, CollisionConfig, CurveData, CurvePoint, Easing, EmitterShape, FlipbookConfig, FrictionConfig, Lighting, ParticleData, Rotation3DInput, StretchConfig, TurbulenceConfig, bakeCurveToArray, createCombinedCurveTexture } from 'core-vfx';
+export { Appearance, AttractorConfig, AttractorType, BaseParticleProps, Blending, CollisionConfig, CurveChannel, CurveData, CurvePoint, CurveTextureResult, Easing, EmitterShape, FlipbookConfig, FrictionConfig, Lighting, ParticleData, Rotation3DInput, StretchConfig, TurbulenceConfig, bakeCurveToArray, buildCurveTextureBin, createCombinedCurveTexture } from 'core-vfx';
 
 type VFXParticlesProps = {
     /** Optional name for registering with useVFXStore (enables VFXEmitter linking) */
@@ -264,14 +264,24 @@ declare const useVFXStore: typeof useVFXStoreImpl & {
     getInitialState: () => CoreState;
 };
 
+type CurveTextureHookResult = {
+    texture: THREE.DataTexture;
+    /** Per-channel enabled state, combining curve props and loaded .bin channels */
+    sizeEnabled: boolean;
+    opacityEnabled: boolean;
+    velocityEnabled: boolean;
+    rotationSpeedEnabled: boolean;
+};
 /**
- * Hook for curve texture loading/baking
- * Returns a STABLE texture reference that updates in place
+ * Hook for curve texture loading/baking.
+ *
+ * If curveTexturePath is provided, loads pre-baked texture from file.
+ * The .bin file contains a header with a bitmask of which channels are active.
+ * Only those channels override the curve props; the rest use curve props or defaults.
  *
- * If curveTexturePath is provided, loads pre-baked texture from file
- * If curves are defined, bakes them synchronously on the main thread
- * If no curves AND no path, returns default texture (no baking needed)
+ * If curves are defined (no path), bakes them synchronously on the main thread.
+ * If no curves AND no path, returns default texture (no baking needed).
  */
-declare const useCurveTextureAsync: (sizeCurve: CurveData | null, opacityCurve: CurveData | null, velocityCurve: CurveData | null, rotationSpeedCurve: CurveData | null, curveTexturePath?: string | null) => THREE.DataTexture;
+declare const useCurveTextureAsync: (sizeCurve: CurveData | null, opacityCurve: CurveData | null, velocityCurve: CurveData | null, rotationSpeedCurve: CurveData | null, curveTexturePath?: string | null) => CurveTextureHookResult;
 
-export { VFXEmitter, VFXParticles, useCurveTextureAsync, useVFXEmitter, useVFXStore };
+export { type CurveTextureHookResult, VFXEmitter, VFXParticles, useCurveTextureAsync, useVFXEmitter, useVFXStore };

package/dist/index.js

@@ -58,11 +58,12 @@ var init_react_store = __esm({
 });
 
 // src/useCurveTextureAsync.ts
-import { useRef, useEffect, useMemo } from "react";
+import { useRef, useEffect, useMemo, useState } from "react";
 import {
   createDefaultCurveTexture,
   createCombinedCurveTexture,
-  loadCurveTextureFromPath
+  loadCurveTextureFromPath,
+  CurveChannel
 } from "core-vfx";
 var useCurveTextureAsync;
 var init_useCurveTextureAsync = __esm({
@@ -70,61 +71,67 @@ var init_useCurveTextureAsync = __esm({
     "use strict";
     useCurveTextureAsync = (sizeCurve, opacityCurve, velocityCurve, rotationSpeedCurve, curveTexturePath = null) => {
       const hasAnyCurve = sizeCurve || opacityCurve || velocityCurve || rotationSpeedCurve;
-      const textureRef = useRef(null);
-      if (!textureRef.current) {
+      const texture = useMemo(() => {
         if (!curveTexturePath && hasAnyCurve) {
-          textureRef.current = createCombinedCurveTexture(
+          return createCombinedCurveTexture(
             sizeCurve,
             opacityCurve,
             velocityCurve,
             rotationSpeedCurve
           );
-        } else {
-          textureRef.current = createDefaultCurveTexture();
-        }
-      }
-      useMemo(() => {
-        if (!curveTexturePath && hasAnyCurve && textureRef.current) {
-          const bakedTexture = createCombinedCurveTexture(
-            sizeCurve,
-            opacityCurve,
-            velocityCurve,
-            rotationSpeedCurve
-          );
-          const srcData = bakedTexture.image.data;
-          const dstData = textureRef.current.image.data;
-          if (srcData && dstData) {
-            dstData.set(srcData);
-            textureRef.current.needsUpdate = true;
-          }
-          bakedTexture.dispose();
         }
-      }, [sizeCurve, opacityCurve, velocityCurve, rotationSpeedCurve]);
+        return createDefaultCurveTexture();
+      }, [
+        sizeCurve,
+        opacityCurve,
+        velocityCurve,
+        rotationSpeedCurve,
+        curveTexturePath,
+        hasAnyCurve
+      ]);
+      const [loadedTexture, setLoadedTexture] = useState(
+        null
+      );
+      const [loadedChannels, setLoadedChannels] = useState(0);
       useEffect(() => {
-        if (!curveTexturePath || !textureRef.current) return;
-        loadCurveTextureFromPath(curveTexturePath, textureRef.current).catch(
-          (err) => {
-            console.warn(
-              `Failed to load curve texture: ${curveTexturePath}, falling back to baking`,
-              err
-            );
-            if (hasAnyCurve && textureRef.current) {
-              const bakedTexture = createCombinedCurveTexture(
+        if (!curveTexturePath) {
+          setLoadedTexture(null);
+          setLoadedChannels(0);
+          return;
+        }
+        let cancelled = false;
+        loadCurveTextureFromPath(curveTexturePath).then((result) => {
+          if (!cancelled) {
+            setLoadedTexture(result.texture);
+            setLoadedChannels(result.activeChannels);
+          } else {
+            result.texture.dispose();
+          }
+        }).catch((err) => {
+          console.warn(
+            `Failed to load curve texture: ${curveTexturePath}, falling back to baking`,
+            err
+          );
+          if (!cancelled && hasAnyCurve) {
+            setLoadedTexture(
+              createCombinedCurveTexture(
                 sizeCurve,
                 opacityCurve,
                 velocityCurve,
                 rotationSpeedCurve
-              );
-              const srcData = bakedTexture.image.data;
-              const dstData = textureRef.current.image.data;
-              if (srcData && dstData) {
-                dstData.set(srcData);
-                textureRef.current.needsUpdate = true;
-              }
-              bakedTexture.dispose();
-            }
+              )
+            );
+            let mask = 0;
+            if (sizeCurve) mask |= CurveChannel.SIZE;
+            if (opacityCurve) mask |= CurveChannel.OPACITY;
+            if (velocityCurve) mask |= CurveChannel.VELOCITY;
+            if (rotationSpeedCurve) mask |= CurveChannel.ROTATION_SPEED;
+            setLoadedChannels(mask);
           }
-        );
+        });
+        return () => {
+          cancelled = true;
+        };
       }, [
         curveTexturePath,
         sizeCurve,
@@ -133,14 +140,33 @@ var init_useCurveTextureAsync = __esm({
         rotationSpeedCurve,
         hasAnyCurve
       ]);
+      const activeTexture = loadedTexture != null ? loadedTexture : texture;
+      const sizeEnabled = loadedTexture ? !!(loadedChannels & CurveChannel.SIZE) : !!sizeCurve;
+      const opacityEnabled = loadedTexture ? !!(loadedChannels & CurveChannel.OPACITY) : !!opacityCurve;
+      const velocityEnabled = loadedTexture ? !!(loadedChannels & CurveChannel.VELOCITY) : !!velocityCurve;
+      const rotationSpeedEnabled = loadedTexture ? !!(loadedChannels & CurveChannel.ROTATION_SPEED) : !!rotationSpeedCurve;
+      const prevTextureRef = useRef(null);
+      useEffect(() => {
+        const prev = prevTextureRef.current;
+        if (prev && prev !== activeTexture) {
+          prev.dispose();
+        }
+        prevTextureRef.current = activeTexture;
+      }, [activeTexture]);
       useEffect(() => {
         return () => {
           var _a;
-          (_a = textureRef.current) == null ? void 0 : _a.dispose();
-          textureRef.current = null;
+          (_a = prevTextureRef.current) == null ? void 0 : _a.dispose();
+          prevTextureRef.current = null;
         };
       }, []);
-      return textureRef.current;
+      return {
+        texture: activeTexture,
+        sizeEnabled,
+        opacityEnabled,
+        velocityEnabled,
+        rotationSpeedEnabled
+      };
     };
   }
 });
@@ -157,7 +183,8 @@ __export(VFXParticlesDebugPanel_exports, {
   updateDebugPanel: () => updateDebugPanel
 });
 import { createRoot } from "react-dom/client";
-import { useState, useCallback, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { useState as useState2, useCallback, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { buildCurveTextureBin } from "core-vfx";
 import * as THREE from "three";
 import { create } from "zustand";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -1221,10 +1248,10 @@ ${" ".repeat(indent - 2)}}`;
       onToggleEnabled,
       hidden = false
     }) => {
-      const [isOpen, setIsOpen] = useState(defaultOpen);
-      const [isHovered, setIsHovered] = useState(false);
+      const [isOpen, setIsOpen] = useState2(defaultOpen);
+      const [isHovered, setIsHovered] = useState2(false);
       const contentRef = useRef2(null);
-      const [contentHeight, setContentHeight] = useState(defaultOpen ? "auto" : 0);
+      const [contentHeight, setContentHeight] = useState2(defaultOpen ? "auto" : 0);
       useEffect2(() => {
         if (contentRef.current) {
           if (isOpen) {
@@ -1306,7 +1333,7 @@ ${" ".repeat(indent - 2)}}`;
       const hasMoved = useRef2(false);
       const startX = useRef2(0);
       const startValue = useRef2(0);
-      const [isDragging, setIsDragging] = useState(false);
+      const [isDragging, setIsDragging] = useState2(false);
       const handleMouseDown = useCallback(
         (e) => {
           if (e.button !== 0) return;
@@ -1364,8 +1391,8 @@ ${" ".repeat(indent - 2)}}`;
       placeholder
     }) => {
       const inputRef = useRef2(null);
-      const [localValue, setLocalValue] = useState(String(value));
-      const [isFocused, setIsFocused] = useState(false);
+      const [localValue, setLocalValue] = useState2(String(value));
+      const [isFocused, setIsFocused] = useState2(false);
       const { handleMouseDown, hasMoved, isDragging } = useScrubber(
         value,
         onChange,
@@ -1492,7 +1519,7 @@ ${" ".repeat(indent - 2)}}`;
       step = 0.01
     }) => {
       const [minVal, maxVal] = parseRange(value, [0, 0]);
-      const [linked, setLinked] = useState(false);
+      const [linked, setLinked] = useState2(false);
       const handleMinChange = useCallback(
         (v) => {
           if (linked) {
@@ -1743,8 +1770,8 @@ ${" ".repeat(indent - 2)}}`;
       label
     ] }) });
     CustomColorPicker = ({ color, onChange }) => {
-      const [isOpen, setIsOpen] = useState(false);
-      const [hexInput, setHexInput] = useState(color);
+      const [isOpen, setIsOpen] = useState2(false);
+      const [hexInput, setHexInput] = useState2(color);
       const pickerRef = useRef2(null);
       const gradientRef = useRef2(null);
       const isDraggingGradient = useRef2(false);
@@ -1840,7 +1867,7 @@ ${" ".repeat(indent - 2)}}`;
         const toHex = (x) => Math.round(x * 255).toString(16).padStart(2, "0");
         return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
       };
-      const [hsv, setHsv] = useState(() => hexToHsv(color));
+      const [hsv, setHsv] = useState2(() => hexToHsv(color));
       useEffect2(() => {
         if (!isOpen) {
           setHsv(hexToHsv(color));
@@ -2181,12 +2208,12 @@ ${" ".repeat(indent - 2)}}`;
       const containerRef = useRef2(null);
       const draggingRef = useRef2(null);
       const localDataRef = useRef2((value == null ? void 0 : value.points) || defaultValue.points);
-      const [, forceUpdate] = useState(0);
-      const [hoverItem, setHoverItem] = useState(null);
-      const [selectedPoint, setSelectedPoint] = useState(null);
-      const [isScaling, setIsScaling] = useState(false);
+      const [, forceUpdate] = useState2(0);
+      const [hoverItem, setHoverItem] = useState2(null);
+      const [selectedPoint, setSelectedPoint] = useState2(null);
+      const [isScaling, setIsScaling] = useState2(false);
       const scaleStartRef = useRef2(null);
-      const [isRotating, setIsRotating] = useState(false);
+      const [isRotating, setIsRotating] = useState2(false);
       const rotateStartRef = useRef2(null);
       const SIZE = 260;
       const PADDING = 30;
@@ -2816,8 +2843,8 @@ ${" ".repeat(indent - 2)}}`;
           ]
         }
       ];
-      const [easingIntensity, setEasingIntensity] = useState(1);
-      const [easingFrequency, setEasingFrequency] = useState(3);
+      const [easingIntensity, setEasingIntensity] = useState2(1);
+      const [easingFrequency, setEasingFrequency] = useState2(3);
       const generateBounce = useCallback((intensity, frequency) => {
         const points2 = [{ pos: [0, 0], handleOut: [0.1, 0] }];
         const bounces = Math.max(1, Math.round(frequency));
@@ -3526,22 +3553,22 @@ ${" ".repeat(indent - 2)}}`;
     );
     DebugPanelContent = ({ initialValues, onUpdate }) => {
       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, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X;
-      const [isMinimized, setIsMinimized] = useState(false);
-      const [panelSize, setPanelSize] = useState({ width: 380, height: null });
-      const [copySuccess, setCopySuccess] = useState(false);
-      const [bakeSuccess, setBakeSuccess] = useState(false);
-      const [hasPendingChanges, setHasPendingChanges] = useState(false);
+      const [isMinimized, setIsMinimized] = useState2(false);
+      const [panelSize, setPanelSize] = useState2({ width: 380, height: null });
+      const [copySuccess, setCopySuccess] = useState2(false);
+      const [bakeSuccess, setBakeSuccess] = useState2(false);
+      const [hasPendingChanges, setHasPendingChanges] = useState2(false);
       const valuesRef = useRef2(initialValues);
       const dirtyKeysRef = useRef2(/* @__PURE__ */ new Set());
-      const [, forceUpdate] = useState(0);
+      const [, forceUpdate] = useState2(0);
       const isResizing = useRef2(false);
       const resizeType = useRef2(null);
       const debounceTimerRef = useRef2(null);
       const DEBOUNCE_DELAY = 500;
-      const [searchQuery, setSearchQuery] = useState("");
+      const [searchQuery, setSearchQuery] = useState2("");
       const historyRef = useRef2([JSON.parse(JSON.stringify(initialValues))]);
-      const [historyIndex, setHistoryIndex] = useState(0);
-      const [historyLength, setHistoryLength] = useState(1);
+      const [historyIndex, setHistoryIndex] = useState2(0);
+      const [historyLength, setHistoryLength] = useState2(1);
       const MAX_HISTORY = 50;
       const isUndoingRef = useRef2(false);
       const prevInitialValuesRef = useRef2(initialValues);
@@ -3607,98 +3634,15 @@ ${" ".repeat(indent - 2)}}`;
           flushChanges();
         }
         const values2 = valuesRef.current;
-        const CURVE_RESOLUTION = 256;
-        const 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]
-          ];
-        };
-        const sampleCurveAtX = (x, points) => {
-          var _a2, _b2, _c2, _d2;
-          if (!points || points.length < 2) return x;
-          if (!((_a2 = points[0]) == null ? void 0 : _a2.pos) || !((_b2 = points[points.length - 1]) == null ? void 0 : _b2.pos)) return x;
-          let segmentIdx = 0;
-          for (let i = 0; i < points.length - 1; i++) {
-            if (((_c2 = points[i]) == null ? void 0 : _c2.pos) && ((_d2 = points[i + 1]) == null ? void 0 : _d2.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));
-        };
-        const bakeCurveToArray2 = (curveData) => {
-          const data = new Float32Array(CURVE_RESOLUTION);
-          if (!(curveData == null ? void 0 : curveData.points) || !Array.isArray(curveData.points) || curveData.points.length < 2) {
-            for (let i = 0; i < CURVE_RESOLUTION; i++) {
-              data[i] = 1 - i / (CURVE_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 < CURVE_RESOLUTION; i++) {
-              data[i] = 1 - i / (CURVE_RESOLUTION - 1);
-            }
-            return data;
-          }
-          for (let i = 0; i < CURVE_RESOLUTION; i++) {
-            const x = i / (CURVE_RESOLUTION - 1);
-            data[i] = sampleCurveAtX(x, curveData.points);
-          }
-          return data;
-        };
-        const sizeData = bakeCurveToArray2(values2.fadeSizeCurve);
-        const opacityData = bakeCurveToArray2(values2.fadeOpacityCurve);
-        const velocityData = bakeCurveToArray2(values2.velocityCurve);
-        const rotationSpeedData = bakeCurveToArray2(values2.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 binBuffer = buildCurveTextureBin(
+          values2.fadeSizeCurve || null,
+          values2.fadeOpacityCurve || null,
+          values2.velocityCurve || null,
+          values2.rotationSpeedCurve || null
+        );
         const vfxName = values2.name || `vfx-curves-${Date.now()}`;
         const filename = `${vfxName.replace(/[^a-zA-Z0-9-_]/g, "-")}.bin`;
-        const blob = new Blob([rgba.buffer], { type: "application/octet-stream" });
+        const blob = new Blob([binBuffer], { type: "application/octet-stream" });
         const link = document.createElement("a");
         link.download = filename;
         link.href = URL.createObjectURL(blob);
@@ -5405,7 +5349,7 @@ import {
   useRef as useRef3,
   useMemo as useMemo2,
   useCallback as useCallback2,
-  useState as useState2
+  useState as useState3
 } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import * as THREE2 from "three/webgpu";
@@ -5435,7 +5379,9 @@ import {
   Easing as Easing2,
   Lighting,
   bakeCurveToArray,
-  createCombinedCurveTexture as createCombinedCurveTexture3
+  createCombinedCurveTexture as createCombinedCurveTexture3,
+  buildCurveTextureBin as buildCurveTextureBin2,
+  CurveChannel as CurveChannel2
 } from "core-vfx";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var VFXParticles;
@@ -5562,29 +5508,29 @@ var init_VFXParticles = __esm({
         const spriteRef = useRef3(null);
         const initialized = useRef3(false);
         const nextIndex = useRef3(0);
-        const [emitting, setEmitting] = useState2(autoStart);
+        const [emitting, setEmitting] = useState3(autoStart);
         const emitAccumulator = useRef3(0);
         const delayRef = useRef3(delay);
         const emitCountRef = useRef3(emitCount);
         const turbulenceRef = useRef3(turbulence);
-        const [activeMaxParticles, setActiveMaxParticles] = useState2(maxParticles);
-        const [activeLighting, setActiveLighting] = useState2(lighting);
-        const [activeAppearance, setActiveAppearance] = useState2(appearance);
-        const [activeOrientToDirection, setActiveOrientToDirection] = useState2(orientToDirection);
-        const [activeGeometry, setActiveGeometry] = useState2(geometry);
-        const [activeShadow, setActiveShadow] = useState2(shadow);
-        const [activeFadeSizeCurve, setActiveFadeSizeCurve] = useState2(fadeSizeCurve);
-        const [activeFadeOpacityCurve, setActiveFadeOpacityCurve] = useState2(fadeOpacityCurve);
-        const [activeVelocityCurve, setActiveVelocityCurve] = useState2(velocityCurve);
-        const [activeRotationSpeedCurve, setActiveRotationSpeedCurve] = useState2(rotationSpeedCurve);
-        const [activeTurbulence, setActiveTurbulence] = useState2(
+        const [activeMaxParticles, setActiveMaxParticles] = useState3(maxParticles);
+        const [activeLighting, setActiveLighting] = useState3(lighting);
+        const [activeAppearance, setActiveAppearance] = useState3(appearance);
+        const [activeOrientToDirection, setActiveOrientToDirection] = useState3(orientToDirection);
+        const [activeGeometry, setActiveGeometry] = useState3(geometry);
+        const [activeShadow, setActiveShadow] = useState3(shadow);
+        const [activeFadeSizeCurve, setActiveFadeSizeCurve] = useState3(fadeSizeCurve);
+        const [activeFadeOpacityCurve, setActiveFadeOpacityCurve] = useState3(fadeOpacityCurve);
+        const [activeVelocityCurve, setActiveVelocityCurve] = useState3(velocityCurve);
+        const [activeRotationSpeedCurve, setActiveRotationSpeedCurve] = useState3(rotationSpeedCurve);
+        const [activeTurbulence, setActiveTurbulence] = useState3(
           turbulence !== null && ((_a = turbulence == null ? void 0 : turbulence.intensity) != null ? _a : 0) > 0
         );
-        const [activeAttractors, setActiveAttractors] = useState2(
+        const [activeAttractors, setActiveAttractors] = useState3(
           attractors !== null && attractors.length > 0
         );
-        const [activeCollision, setActiveCollision] = useState2(collision !== null);
-        const [activeNeedsPerParticleColor, setActiveNeedsPerParticleColor] = useState2(colorStart.length > 1 || colorEnd !== null);
+        const [activeCollision, setActiveCollision] = useState3(collision !== null);
+        const [activeNeedsPerParticleColor, setActiveNeedsPerParticleColor] = useState3(colorStart.length > 1 || colorEnd !== null);
         const isNonDefaultRotation = (r) => {
           if (typeof r === "number") return r !== 0;
           if (Array.isArray(r) && r.length === 2 && typeof r[0] === "number") {
@@ -5597,7 +5543,7 @@ var init_VFXParticles = __esm({
           }
           return false;
         };
-        const [activeNeedsRotation, setActiveNeedsRotation] = useState2(
+        const [activeNeedsRotation, setActiveNeedsRotation] = useState3(
           isNonDefaultRotation(rotation) || isNonDefaultRotation(rotationSpeed)
         );
         useEffect3(() => {
@@ -5657,22 +5603,19 @@ var init_VFXParticles = __esm({
           () => toRange(fadeOpacity, [1, 0]),
           [fadeOpacity]
         );
-        const curveTexture = useCurveTextureAsync(
+        const {
+          texture: curveTexture,
+          sizeEnabled: curveTextureSizeEnabled,
+          opacityEnabled: curveTextureOpacityEnabled,
+          velocityEnabled: curveTextureVelocityEnabled,
+          rotationSpeedEnabled: curveTextureRotationSpeedEnabled
+        } = useCurveTextureAsync(
           activeFadeSizeCurve,
           activeFadeOpacityCurve,
           activeVelocityCurve,
           activeRotationSpeedCurve,
           curveTexturePath
         );
-        const prevCurveTextureRef = useRef3(null);
-        useEffect3(() => {
-          prevCurveTextureRef.current = curveTexture;
-          return () => {
-            if (curveTexture) {
-              curveTexture.dispose();
-            }
-          };
-        }, [curveTexture]);
         const lifetimeRange = useMemo2(() => toRange(lifetime, [1, 2]), [lifetime]);
         const rotation3D = useMemo2(() => toRotation3D(rotation), [rotation]);
         const rotationSpeed3D = useMemo2(
@@ -5854,23 +5797,11 @@ var init_VFXParticles = __esm({
               // Soft particles
               softParticlesEnabled: uniform(softParticles ? 1 : 0),
               softDistance: uniform(softDistance),
-              // Velocity curve (replaces friction when enabled)
-              // Enable if velocityCurve prop is set OR curveTexturePath is provided
-              velocityCurveEnabled: uniform(
-                velocityCurve || curveTexturePath ? 1 : 0
-              ),
-              // Rotation speed curve (modulates rotation speed over lifetime)
-              rotationSpeedCurveEnabled: uniform(
-                rotationSpeedCurve || curveTexturePath ? 1 : 0
-              ),
-              // Fade size curve (when disabled, uses fadeSize prop interpolation)
-              fadeSizeCurveEnabled: uniform(
-                fadeSizeCurve || curveTexturePath ? 1 : 0
-              ),
-              // Fade opacity curve (when disabled, uses fadeOpacity prop interpolation)
-              fadeOpacityCurveEnabled: uniform(
-                fadeOpacityCurve || curveTexturePath ? 1 : 0
-              ),
+              // Curve enabled flags (set by useCurveTextureAsync per-channel info)
+              velocityCurveEnabled: uniform(0),
+              rotationSpeedCurveEnabled: uniform(0),
+              fadeSizeCurveEnabled: uniform(0),
+              fadeOpacityCurveEnabled: uniform(0),
               // Orient axis: 0=+X, 1=+Y, 2=+Z, 3=-X, 4=-Y, 5=-Z
               orientAxisType: uniform(axisToNumber(orientAxis)),
               // Stretch by speed (uses effective velocity after curve modifier)
@@ -5981,10 +5912,10 @@ var init_VFXParticles = __esm({
           uniforms.startPositionAsDirection.value = startPositionAsDirection ? 1 : 0;
           uniforms.softParticlesEnabled.value = softParticles ? 1 : 0;
           uniforms.softDistance.value = softDistance;
-          uniforms.velocityCurveEnabled.value = velocityCurve || curveTexturePath ? 1 : 0;
-          uniforms.rotationSpeedCurveEnabled.value = rotationSpeedCurve || curveTexturePath ? 1 : 0;
-          uniforms.fadeSizeCurveEnabled.value = fadeSizeCurve || curveTexturePath ? 1 : 0;
-          uniforms.fadeOpacityCurveEnabled.value = fadeOpacityCurve || curveTexturePath ? 1 : 0;
+          uniforms.velocityCurveEnabled.value = curveTextureVelocityEnabled ? 1 : 0;
+          uniforms.rotationSpeedCurveEnabled.value = curveTextureRotationSpeedEnabled ? 1 : 0;
+          uniforms.fadeSizeCurveEnabled.value = curveTextureSizeEnabled ? 1 : 0;
+          uniforms.fadeOpacityCurveEnabled.value = curveTextureOpacityEnabled ? 1 : 0;
           uniforms.orientAxisType.value = axisToNumber(orientAxis);
           uniforms.stretchEnabled.value = stretchBySpeed ? 1 : 0;
           uniforms.stretchFactor.value = (_h = stretchBySpeed == null ? void 0 : stretchBySpeed.factor) != null ? _h : 1;
@@ -6029,11 +5960,10 @@ var init_VFXParticles = __esm({
           startPositionAsDirection,
           softParticles,
           softDistance,
-          velocityCurve,
-          rotationSpeedCurve,
-          fadeSizeCurve,
-          fadeOpacityCurve,
-          curveTexturePath,
+          curveTextureVelocityEnabled,
+          curveTextureRotationSpeedEnabled,
+          curveTextureSizeEnabled,
+          curveTextureOpacityEnabled,
           orientAxis,
           stretchBySpeed
         ]);
@@ -7119,12 +7049,14 @@ export {
   Appearance,
   AttractorType2 as AttractorType,
   Blending,
+  CurveChannel2 as CurveChannel,
   Easing2 as Easing,
   EmitterShape,
   Lighting,
   VFXEmitter,
   VFXParticles,
   bakeCurveToArray,
+  buildCurveTextureBin2 as buildCurveTextureBin,
   createCombinedCurveTexture3 as createCombinedCurveTexture,
   useCurveTextureAsync,
   useVFXEmitter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "r3f-vfx",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -24,7 +24,7 @@
     "prepublishOnly": "bun run copy-readme"
   },
   "dependencies": {
-    "core-vfx": "0.0.6",
+    "core-vfx": "0.0.7",
     "zustand": "5.0.10"
   },
   "devDependencies": {