r3f-vfx 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -265,15 +265,12 @@ declare const useVFXStore: typeof useVFXStoreImpl & {
 };
 
 /**
- * Hook for async curve texture loading
+ * Hook for curve texture loading/baking
  * Returns a STABLE texture reference that updates in place
  *
- * If curveTexturePath is provided, loads pre-baked texture (fast)
- * If curves are defined, bakes them in web worker
- * If no curves AND no path, returns default texture (no baking, instant)
- *
- * The 4KB default texture is always created for shader compatibility,
- * but baking is skipped when not needed (main performance win).
+ * 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)
  */
 declare const useCurveTextureAsync: (sizeCurve: CurveData | null, opacityCurve: CurveData | null, velocityCurve: CurveData | null, rotationSpeedCurve: CurveData | null, curveTexturePath?: string | null) => THREE.DataTexture;
 

package/dist/index.js

@@ -58,103 +58,79 @@ var init_react_store = __esm({
 });
 
 // src/useCurveTextureAsync.ts
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useMemo } from "react";
 import {
   createDefaultCurveTexture,
+  createCombinedCurveTexture,
   loadCurveTextureFromPath
 } from "core-vfx";
-var import_meta, curveWorker, curveWorkerCallbacks, curveWorkerIdCounter, getCurveWorker, bakeCurvesAsync, useCurveTextureAsync;
+var useCurveTextureAsync;
 var init_useCurveTextureAsync = __esm({
   "src/useCurveTextureAsync.ts"() {
     "use strict";
-    import_meta = {};
-    curveWorker = null;
-    curveWorkerCallbacks = /* @__PURE__ */ new Map();
-    curveWorkerIdCounter = 0;
-    getCurveWorker = () => {
-      if (!curveWorker) {
-        curveWorker = new Worker(new URL("./curveWorker.js", import_meta.url), {
-          type: "module"
-        });
-        curveWorker.onmessage = (e) => {
-          const { id, rgba } = e.data;
-          const callback = curveWorkerCallbacks.get(id);
-          if (callback) {
-            callback(rgba);
-            curveWorkerCallbacks.delete(id);
-          }
-        };
-      }
-      return curveWorker;
-    };
-    bakeCurvesAsync = (sizeCurve, opacityCurve, velocityCurve, rotationSpeedCurve) => {
-      return new Promise((resolve) => {
-        const worker = getCurveWorker();
-        const id = curveWorkerIdCounter++;
-        curveWorkerCallbacks.set(id, resolve);
-        worker.postMessage({
-          id,
-          sizeCurve,
-          opacityCurve,
-          velocityCurve,
-          rotationSpeedCurve
-        });
-      });
-    };
     useCurveTextureAsync = (sizeCurve, opacityCurve, velocityCurve, rotationSpeedCurve, curveTexturePath = null) => {
       const textureRef = useRef(null);
-      const pendingRef = useRef(null);
       if (!textureRef.current) {
         textureRef.current = createDefaultCurveTexture();
       }
+      const hasAnyCurve = sizeCurve || opacityCurve || velocityCurve || rotationSpeedCurve;
+      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,
+        curveTexturePath,
+        hasAnyCurve
+      ]);
       useEffect(() => {
-        const requestId = {};
-        pendingRef.current = requestId;
-        const hasAnyCurve = sizeCurve || opacityCurve || velocityCurve || rotationSpeedCurve;
-        if (curveTexturePath) {
+        if (curveTexturePath && textureRef.current) {
           loadCurveTextureFromPath(curveTexturePath, textureRef.current).catch(
             (err) => {
               console.warn(
                 `Failed to load curve texture: ${curveTexturePath}, falling back to baking`,
                 err
               );
-              return bakeCurvesAsync(
-                sizeCurve,
-                opacityCurve,
-                velocityCurve,
-                rotationSpeedCurve
-              ).then((rgba) => {
-                var _a;
-                if (pendingRef.current === requestId && ((_a = textureRef.current) == null ? void 0 : _a.image.data)) {
-                  textureRef.current.image.data.set(rgba);
+              if (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();
+              }
             }
           );
-        } else if (hasAnyCurve) {
-          bakeCurvesAsync(
-            sizeCurve,
-            opacityCurve,
-            velocityCurve,
-            rotationSpeedCurve
-          ).then((rgba) => {
-            var _a;
-            if (pendingRef.current === requestId && ((_a = textureRef.current) == null ? void 0 : _a.image.data)) {
-              textureRef.current.image.data.set(rgba);
-              textureRef.current.needsUpdate = true;
-            }
-          });
         }
-        return () => {
-          pendingRef.current = null;
-        };
       }, [
+        curveTexturePath,
         sizeCurve,
         opacityCurve,
         velocityCurve,
         rotationSpeedCurve,
-        curveTexturePath
+        hasAnyCurve
       ]);
       useEffect(() => {
         return () => {
@@ -3630,7 +3606,7 @@ ${" ".repeat(indent - 2)}}`;
           flushChanges();
         }
         const values2 = valuesRef.current;
-        const CURVE_RESOLUTION2 = 256;
+        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)];
@@ -3687,23 +3663,23 @@ ${" ".repeat(indent - 2)}}`;
           return Math.max(-0.5, Math.min(1.5, py));
         };
         const bakeCurveToArray2 = (curveData) => {
-          const data = new Float32Array(CURVE_RESOLUTION2);
+          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_RESOLUTION2; i++) {
-              data[i] = 1 - i / (CURVE_RESOLUTION2 - 1);
+            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_RESOLUTION2; i++) {
-              data[i] = 1 - i / (CURVE_RESOLUTION2 - 1);
+            for (let i = 0; i < CURVE_RESOLUTION; i++) {
+              data[i] = 1 - i / (CURVE_RESOLUTION - 1);
             }
             return data;
           }
-          for (let i = 0; i < CURVE_RESOLUTION2; i++) {
-            const x = i / (CURVE_RESOLUTION2 - 1);
+          for (let i = 0; i < CURVE_RESOLUTION; i++) {
+            const x = i / (CURVE_RESOLUTION - 1);
             data[i] = sampleCurveAtX(x, curveData.points);
           }
           return data;
@@ -3712,8 +3688,8 @@ ${" ".repeat(indent - 2)}}`;
         const opacityData = bakeCurveToArray2(values2.fadeOpacityCurve);
         const velocityData = bakeCurveToArray2(values2.velocityCurve);
         const rotationSpeedData = bakeCurveToArray2(values2.rotationSpeedCurve);
-        const rgba = new Float32Array(CURVE_RESOLUTION2 * 4);
-        for (let i = 0; i < CURVE_RESOLUTION2; i++) {
+        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];
@@ -5426,7 +5402,7 @@ import {
   useImperativeHandle,
   useEffect as useEffect3,
   useRef as useRef3,
-  useMemo,
+  useMemo as useMemo2,
   useCallback as useCallback2,
   useState as useState2
 } from "react";
@@ -5458,7 +5434,7 @@ import {
   Easing as Easing2,
   Lighting,
   bakeCurveToArray,
-  createCombinedCurveTexture as createCombinedCurveTexture2
+  createCombinedCurveTexture as createCombinedCurveTexture3
 } from "core-vfx";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var VFXParticles;
@@ -5673,10 +5649,10 @@ var init_VFXParticles = __esm({
           attractors,
           collision
         ]);
-        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]);
-        const fadeOpacityRange = useMemo(
+        const sizeRange = useMemo2(() => toRange(size, [0.1, 0.3]), [size]);
+        const speedRange = useMemo2(() => toRange(speed, [0.1, 0.1]), [speed]);
+        const fadeSizeRange = useMemo2(() => toRange(fadeSize, [1, 0]), [fadeSize]);
+        const fadeOpacityRange = useMemo2(
           () => toRange(fadeOpacity, [1, 0]),
           [fadeOpacity]
         );
@@ -5696,26 +5672,26 @@ var init_VFXParticles = __esm({
             }
           };
         }, [curveTexture]);
-        const lifetimeRange = useMemo(() => toRange(lifetime, [1, 2]), [lifetime]);
-        const rotation3D = useMemo(() => toRotation3D(rotation), [rotation]);
-        const rotationSpeed3D = useMemo(
+        const lifetimeRange = useMemo2(() => toRange(lifetime, [1, 2]), [lifetime]);
+        const rotation3D = useMemo2(() => toRotation3D(rotation), [rotation]);
+        const rotationSpeed3D = useMemo2(
           () => toRotation3D(rotationSpeed),
           [rotationSpeed]
         );
-        const direction3D = useMemo(() => toRotation3D(direction), [direction]);
-        const startPosition3D = useMemo(
+        const direction3D = useMemo2(() => toRotation3D(direction), [direction]);
+        const startPosition3D = useMemo2(
           () => toRotation3D(startPosition),
           [startPosition]
         );
-        const emitterRadiusRange = useMemo(
+        const emitterRadiusRange = useMemo2(
           () => toRange(emitterRadius, [0, 1]),
           [emitterRadius]
         );
-        const emitterHeightRange = useMemo(
+        const emitterHeightRange = useMemo2(
           () => toRange(emitterHeight, [0, 1]),
           [emitterHeight]
         );
-        const activeFeatures = useMemo(
+        const activeFeatures = useMemo2(
           () => ({
             // Storage array features
             needsPerParticleColor: activeNeedsPerParticleColor,
@@ -5735,33 +5711,33 @@ var init_VFXParticles = __esm({
             activeCollision
           ]
         );
-        const frictionIntensityRange = useMemo(() => {
+        const frictionIntensityRange = useMemo2(() => {
           if (typeof friction === "object" && friction !== null && "intensity" in friction) {
             return toRange(friction.intensity, [0, 0]);
           }
           return [0, 0];
         }, [friction]);
-        const frictionEasingType = useMemo(() => {
+        const frictionEasingType = useMemo2(() => {
           var _a2;
           if (typeof friction === "object" && friction !== null && "easing" in friction) {
             return easingToType((_a2 = friction.easing) != null ? _a2 : "linear");
           }
           return 0;
         }, [friction]);
-        const startColors = useMemo(() => {
+        const startColors = useMemo2(() => {
           const colors = colorStart.slice(0, 8).map(hexToRgb);
           while (colors.length < 8)
             colors.push(colors[colors.length - 1] || [1, 1, 1]);
           return colors;
         }, [colorStart]);
         const effectiveColorEnd = colorEnd != null ? colorEnd : colorStart;
-        const endColors = useMemo(() => {
+        const endColors = useMemo2(() => {
           const colors = effectiveColorEnd.slice(0, 8).map(hexToRgb);
           while (colors.length < 8)
             colors.push(colors[colors.length - 1] || [1, 1, 1]);
           return colors;
         }, [effectiveColorEnd]);
-        const uniforms = useMemo(
+        const uniforms = useMemo2(
           () => {
             var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
             return {
@@ -6060,7 +6036,7 @@ var init_VFXParticles = __esm({
           orientAxis,
           stretchBySpeed
         ]);
-        const storage = useMemo(() => {
+        const storage = useMemo2(() => {
           const arrays = {
             positions: instancedArray(activeMaxParticles, "vec3"),
             velocities: instancedArray(activeMaxParticles, "vec3"),
@@ -6085,15 +6061,15 @@ var init_VFXParticles = __esm({
           activeFeatures.needsRotation,
           activeFeatures.needsPerParticleColor
         ]);
-        const computeInit = useMemo(
+        const computeInit = useMemo2(
           () => createInitCompute(storage, activeMaxParticles),
           [storage, activeMaxParticles]
         );
-        const computeSpawn = useMemo(
+        const computeSpawn = useMemo2(
           () => createSpawnCompute(storage, uniforms, activeMaxParticles),
           [storage, uniforms, activeMaxParticles]
         );
-        const computeUpdate = useMemo(
+        const computeUpdate = useMemo2(
           () => createUpdateCompute(
             storage,
             uniforms,
@@ -6109,7 +6085,7 @@ var init_VFXParticles = __esm({
           ),
           [storage, uniforms, curveTexture, activeMaxParticles, activeFeatures]
         );
-        const material = useMemo(
+        const material = useMemo2(
           () => createParticleMaterial(storage, uniforms, curveTexture, {
             alphaMap,
             flipbook,
@@ -6146,7 +6122,7 @@ var init_VFXParticles = __esm({
             activeShadow
           ]
         );
-        const renderObject = useMemo(() => {
+        const renderObject = useMemo2(() => {
           if (activeGeometry) {
             const mesh = new THREE2.InstancedMesh(
               activeGeometry,
@@ -6358,7 +6334,7 @@ var init_VFXParticles = __esm({
             nextIndex.current = 0;
           };
         }, []);
-        const particleAPI = useMemo(
+        const particleAPI = useMemo2(
           () => ({
             spawn,
             start,
@@ -7148,7 +7124,7 @@ export {
   VFXEmitter,
   VFXParticles,
   bakeCurveToArray,
-  createCombinedCurveTexture2 as createCombinedCurveTexture,
+  createCombinedCurveTexture3 as createCombinedCurveTexture,
   useCurveTextureAsync,
   useVFXEmitter,
   useVFXStore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "r3f-vfx",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -24,7 +24,7 @@
     "prepublishOnly": "bun run copy-readme"
   },
   "dependencies": {
-    "core-vfx": "0.0.3",
+    "core-vfx": "0.0.5",
     "zustand": "5.0.10"
   },
   "devDependencies": {

package/dist/curveWorker.d.ts

@@ -1,2 +0,0 @@
-
-export {  }

package/dist/curveWorker.js

@@ -1,105 +0,0 @@
-// src/curveWorker.js
-var CURVE_RESOLUTION = 256;
-var 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]
-  ];
-};
-var 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;
-  let tHigh = 1;
-  let 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));
-};
-var bakeCurveToArray = (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;
-};
-var bakeCombinedCurves = (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];
-  }
-  return rgba;
-};
-self.onmessage = (e) => {
-  const { id, sizeCurve, opacityCurve, velocityCurve, rotationSpeedCurve } = e.data;
-  const rgba = bakeCombinedCurves(
-    sizeCurve,
-    opacityCurve,
-    velocityCurve,
-    rotationSpeedCurve
-  );
-  self.postMessage({ id, rgba }, [rgba.buffer]);
-};