r3f-vfx 0.0.9 → 0.1.1

package/README.md

@@ -27,16 +27,16 @@ npm install three @react-three/fiber react
 ## Quick Start
 
 ```tsx
-import { Canvas } from '@react-three/fiber';
-import { VFXParticles, Appearance, EmitterShape } from 'r3f-vfx';
-import * as THREE from 'three/webgpu';
+import { Canvas } from '@react-three/fiber'
+import { VFXParticles, Appearance, EmitterShape } from 'r3f-vfx'
+import * as THREE from 'three/webgpu'
 
 function App() {
   return (
     <Canvas>
       <VFXParticles debug />
     </Canvas>
-  );
+  )
 }
 ```
 
@@ -114,8 +114,8 @@ The main particle system component.
 
 ```ts
 interface StretchConfig {
-  factor: number; // Stretch multiplier
-  maxStretch: number; // Maximum stretch amount
+  factor: number // Stretch multiplier
+  maxStretch: number // Maximum stretch amount
 }
 ```
 
@@ -127,9 +127,9 @@ interface StretchConfig {
 
 ```ts
 interface TurbulenceConfig {
-  intensity: number; // Turbulence strength
-  frequency: number; // Noise scale
-  speed: number; // Animation speed
+  intensity: number // Turbulence strength
+  frequency: number // Noise scale
+  speed: number // Animation speed
 }
 ```
 
@@ -142,11 +142,11 @@ interface TurbulenceConfig {
 
 ```ts
 interface AttractorConfig {
-  position: [x, y, z];
-  strength: number; // Positive = attract, negative = repel
-  radius?: number; // 0 = infinite range
-  type?: 'point' | 'vortex';
-  axis?: [x, y, z]; // Vortex rotation axis
+  position: [x, y, z]
+  strength: number // Positive = attract, negative = repel
+  radius?: number // 0 = infinite range
+  type?: 'point' | 'vortex'
+  axis?: [x, y, z] // Vortex rotation axis
 }
 ```
 
@@ -158,11 +158,11 @@ interface AttractorConfig {
 
 ```ts
 interface CollisionConfig {
-  plane: { y: number }; // Plane Y position
-  bounce?: number; // Bounce factor (0-1)
-  friction?: number; // Horizontal friction
-  die?: boolean; // Kill on collision
-  sizeBasedGravity?: number; // Gravity multiplier by size
+  plane: { y: number } // Plane Y position
+  bounce?: number // Bounce factor (0-1)
+  friction?: number // Horizontal friction
+  die?: boolean // Kill on collision
+  sizeBasedGravity?: number // Gravity multiplier by size
 }
 ```
 
@@ -180,10 +180,10 @@ All curves use Bezier spline format:
 ```ts
 interface CurveData {
   points: Array<{
-    pos: [x, y]; // Position (x: 0-1 progress, y: value)
-    handleIn?: [x, y]; // Bezier handle in (offset)
-    handleOut?: [x, y]; // Bezier handle out (offset)
-  }>;
+    pos: [x, y] // Position (x: 0-1 progress, y: value)
+    handleIn?: [x, y] // Bezier handle in (offset)
+    handleOut?: [x, y] // Bezier handle out (offset)
+  }>
 }
 ```
 
@@ -205,21 +205,21 @@ interface CurveData {
 | `alphaTestNode`  | `NodeFunction` | Alpha test/discard             |
 
 ```ts
-type NodeFunction = (data: ParticleData, defaultColor?: Node) => Node;
+type NodeFunction = (data: ParticleData, defaultColor?: Node) => Node
 
 interface ParticleData {
-  progress: Node; // 0 → 1 over lifetime
-  lifetime: Node; // 1 → 0 over lifetime
-  position: Node; // vec3 world position
-  velocity: Node; // vec3 velocity
-  size: Node; // float size
-  rotation: Node; // vec3 rotation
-  colorStart: Node; // vec3 start color
-  colorEnd: Node; // vec3 end color
-  color: Node; // vec3 interpolated color
-  intensifiedColor: Node; // color × intensity
-  shapeMask: Node; // float alpha mask
-  index: Node; // particle index
+  progress: Node // 0 → 1 over lifetime
+  lifetime: Node // 1 → 0 over lifetime
+  position: Node // vec3 world position
+  velocity: Node // vec3 velocity
+  size: Node // float size
+  rotation: Node // vec3 rotation
+  colorStart: Node // vec3 start color
+  colorEnd: Node // vec3 end color
+  color: Node // vec3 interpolated color
+  intensifiedColor: Node // color × intensity
+  shapeMask: Node // float alpha mask
+  index: Node // particle index
 }
 ```
 
@@ -232,8 +232,8 @@ interface ParticleData {
 
 ```ts
 interface FlipbookConfig {
-  rows: number;
-  columns: number;
+  rows: number
+  columns: number
 }
 ```
 
@@ -276,13 +276,13 @@ Decoupled emitter component that links to a VFXParticles system.
 
 ```ts
 interface VFXEmitterAPI {
-  emit(): boolean; // Emit at current position
-  burst(count?: number): boolean; // Burst emit
-  start(): void; // Start auto-emission
-  stop(): void; // Stop auto-emission
-  isEmitting: boolean; // Current state
-  getParticleSystem(): ParticleAPI;
-  group: THREE.Group; // The group element
+  emit(): boolean // Emit at current position
+  burst(count?: number): boolean // Burst emit
+  start(): void // Start auto-emission
+  stop(): void // Stop auto-emission
+  isEmitting: boolean // Current state
+  getParticleSystem(): ParticleAPI
+  group: THREE.Group // The group element
 }
 ```
 
@@ -292,13 +292,13 @@ Programmatic emitter control.
 
 ```tsx
 function MyComponent() {
-  const { emit, burst, start, stop } = useVFXEmitter('sparks');
+  const { emit, burst, start, stop } = useVFXEmitter('sparks')
 
   const handleClick = () => {
-    burst([0, 1, 0], 100, { colorStart: ['#ff0000'] });
-  };
+    burst([0, 1, 0], 100, { colorStart: ['#ff0000'] })
+  }
 
-  return <mesh onClick={handleClick}>...</mesh>;
+  return <mesh onClick={handleClick}>...</mesh>
 }
 ```
 
@@ -310,18 +310,18 @@ interface UseVFXEmitterResult {
     position?: [x, y, z],
     count?: number,
     overrides?: SpawnOverrides
-  ): boolean;
+  ): boolean
   burst(
     position?: [x, y, z],
     count?: number,
     overrides?: SpawnOverrides
-  ): boolean;
-  start(): boolean;
-  stop(): boolean;
-  clear(): boolean;
-  isEmitting(): boolean;
-  getUniforms(): Record<string, { value: unknown }>;
-  getParticles(): ParticleAPI;
+  ): boolean
+  start(): boolean
+  stop(): boolean
+  clear(): boolean
+  isEmitting(): boolean
+  getUniforms(): Record<string, { value: unknown }>
+  getParticles(): ParticleAPI
 }
 ```
 
@@ -330,17 +330,17 @@ interface UseVFXEmitterResult {
 Zustand store for managing particle systems.
 
 ```ts
-const store = useVFXStore();
+const store = useVFXStore()
 
 // Access registered particle systems
-const sparks = store.getParticles('sparks');
-sparks?.spawn(0, 0, 0, 50);
+const sparks = store.getParticles('sparks')
+sparks?.spawn(0, 0, 0, 50)
 
 // Store methods
-store.emit('sparks', { x: 0, y: 0, z: 0, count: 20 });
-store.start('sparks');
-store.stop('sparks');
-store.clear('sparks');
+store.emit('sparks', { x: 0, y: 0, z: 0, count: 20 })
+store.start('sparks')
+store.stop('sparks')
+store.clear('sparks')
 ```
 
 ## Examples
@@ -388,9 +388,9 @@ store.clear('sparks');
 ### 3D Geometry Particles
 
 ```tsx
-import { BoxGeometry } from 'three/webgpu';
+import { BoxGeometry } from 'three/webgpu'
 
-<VFXParticles
+;<VFXParticles
   geometry={new BoxGeometry(1, 1, 1)}
   maxParticles={500}
   size={[0.1, 0.2]}
@@ -404,7 +404,7 @@ import { BoxGeometry } from 'three/webgpu';
   ]}
   shadow={true}
   lighting={Lighting.STANDARD}
-/>;
+/>
 ```
 
 ### Turbulent Smoke
@@ -464,7 +464,7 @@ import type {
   TurbulenceConfig,
   CollisionConfig,
   AttractorConfig,
-} from 'r3f-vfx';
+} from 'r3f-vfx'
 ```
 
 ## License

package/dist/curveWorker.d.ts

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

package/dist/curveWorker.js

@@ -0,0 +1,105 @@
+// 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]);
+};

package/dist/index.d.ts

@@ -138,6 +138,12 @@ type VFXParticlesProps = {
     } | null;
     /** Show debug control panel */
     debug?: boolean;
+    /** Path to pre-baked curve texture (skips runtime baking for faster load) */
+    curveTexturePath?: string | null;
+    /** Depth test */
+    depthTest?: boolean;
+    /** Render order (higher values render on top) */
+    renderOrder?: number;
 };
 declare const VFXParticles: react.ForwardRefExoticComponent<VFXParticlesProps & react.RefAttributes<unknown>>;
 
@@ -258,4 +264,17 @@ declare const useVFXStore: typeof useVFXStoreImpl & {
     getInitialState: () => CoreState;
 };
 
-export { VFXEmitter, VFXParticles, useVFXEmitter, useVFXStore };
+/**
+ * Hook for async curve texture loading
+ * 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).
+ */
+declare const useCurveTextureAsync: (sizeCurve: CurveData | null, opacityCurve: CurveData | null, velocityCurve: CurveData | null, rotationSpeedCurve: CurveData | null, curveTexturePath?: string | null) => THREE.DataTexture;
+
+export { VFXEmitter, VFXParticles, useCurveTextureAsync, useVFXEmitter, useVFXStore };