r3f-vfx 0.2.0 → 0.3.0

package/README.md

@@ -1,6 +1,8 @@
-# r3f-vfx
+# ✨ Three VFX ✨
 
-High-performance GPU-accelerated particle system for Three.js WebGPU with React Three Fiber.
+High-performance GPU-accelerated particle system for Three.js WebGPU.
+
+Available for React Three Fiber (R3F), and experimentally for vanilla Three.js, TresJS (Vue), and Threlte (Svelte).
 
 ## Features
 
@@ -11,25 +13,21 @@ High-performance GPU-accelerated particle system for Three.js WebGPU with React
 - 📊 **Curve-based Control** - Bezier curves for size, opacity, velocity, and rotation over lifetime
 - 🔗 **Emitter System** - Decoupled emitters that can share particle systems
 - ⚡ **WebGPU Native** - Built specifically for Three.js WebGPU renderer
+- 🐢 **WebGL fallback** – Three VFX targets WebGPU ([79% global support](https://caniuse.com/webgpu)) but provides a CPU fallback
 
-## Installation
+## Quick Start
 
-```bash
-npm install r3f-vfx
-```
+### React Three Fiber
 
-### Peer Dependencies
+Add it to your React Three Fiber project with:
 
 ```bash
-npm install three @react-three/fiber react
+npm install r3f-vfx
 ```
 
-## Quick Start
-
 ```tsx
 import { Canvas } from '@react-three/fiber'
-import { VFXParticles, Appearance, EmitterShape } from 'r3f-vfx'
-import * as THREE from 'three/webgpu'
+import { VFXParticles } from 'r3f-vfx'
 
 function App() {
   return (
@@ -40,7 +38,64 @@ function App() {
 }
 ```
 
-That's it, start designing in the debug panel, then copy JSX
+### Vanilla Three.js (Experimental)
+
+Add it to your vanilla Three.js project with:
+
+```bash
+npm install vanilla-vfx
+```
+
+```ts
+import { VFXParticles } from 'vanilla-vfx'
+
+const particles = new VFXParticles(renderer, { debug: true })
+scene.add(particles.renderObject)
+```
+
+### TresJS / Vue (Experimental)
+
+Add it to your TresJS project with:
+
+```bash
+npm install tres-vfx
+```
+
+```vue
+<script setup>
+import { TresCanvas } from '@tresjs/core'
+import { VFXParticles } from 'tres-vfx'
+</script>
+
+<template>
+  <TresCanvas>
+    <VFXParticles debug />
+  </TresCanvas>
+</template>
+```
+
+### Threlte / Svelte (Experimental)
+
+Add it to your Threlte project with:
+
+```bash
+npm install threlte-vfx
+```
+
+```svelte
+<script>
+  import { Canvas } from '@threlte/core'
+  import VFXParticles from 'threlte-vfx/VFXParticles.svelte'
+</script>
+
+<Canvas>
+  <VFXParticles debug />
+</Canvas>
+```
+
+## How to use
+
+Use the debug panel to design your effect, then copy the generated code and replace it in your code.
 
 ## API Reference
 

package/dist/index.d.ts

@@ -9,8 +9,6 @@ type VFXParticlesProps = VFXParticleSystemOptions & {
     name?: string;
     /** Show debug control panel */
     debug?: boolean;
-    /** Optional fallback content to render when WebGPU is not available */
-    fallback?: React.ReactNode;
 };
 declare const VFXParticles: react.ForwardRefExoticComponent<core_vfx.BaseParticleProps & {
     backdropNode?: any | ((data: core_vfx.ParticleData) => any) | null;
@@ -26,8 +24,6 @@ declare const VFXParticles: react.ForwardRefExoticComponent<core_vfx.BaseParticl
     name?: string;
     /** Show debug control panel */
     debug?: boolean;
-    /** Optional fallback content to render when WebGPU is not available */
-    fallback?: React.ReactNode;
 } & react.RefAttributes<unknown>>;
 
 interface VFXEmitterProps extends EmitterControllerOptions {

package/dist/index.js

@@ -17,18 +17,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 
 // src/VFXParticles.tsx
 import {
@@ -62,7 +50,6 @@ import {
   EmitterShape,
   Lighting,
   VFXParticleSystem,
-  isWebGPUBackend,
   isNonDefaultRotation,
   normalizeProps,
   updateUniforms,
@@ -81,9 +68,9 @@ import {
   buildCurveTextureBin,
   CurveChannel
 } from "core-vfx";
-import { Fragment, jsx } from "react/jsx-runtime";
-var VFXParticlesImpl = forwardRef(
-  function VFXParticlesImpl2({
+import { jsx } from "react/jsx-runtime";
+var VFXParticles = forwardRef(
+  function VFXParticles2({
     name,
     maxParticles = 1e4,
     size = [0.1, 0.3],
@@ -658,40 +645,18 @@ var VFXParticlesImpl = forwardRef(
     return /* @__PURE__ */ jsx("primitive", { ref: spriteRef, object: system.renderObject });
   }
 );
-var warnedWebGL = false;
-var VFXParticles = forwardRef(
-  function VFXParticles2(_a, ref) {
-    var _b = _a, { fallback } = _b, props = __objRest(_b, ["fallback"]);
-    const { gl } = useThree();
-    const isWebGPU = useMemo(() => isWebGPUBackend(gl), [gl]);
-    if (!isWebGPU) {
-      if (!warnedWebGL) {
-        warnedWebGL = true;
-        console.warn(
-          "r3f-vfx: WebGPU backend not detected. Particle system disabled."
-        );
-      }
-      return /* @__PURE__ */ jsx(Fragment, { children: fallback != null ? fallback : null });
-    }
-    return /* @__PURE__ */ jsx(VFXParticlesImpl, __spreadValues({ ref }, props));
-  }
-);
 
 // src/VFXEmitter.tsx
 import {
   useRef as useRef2,
   useEffect as useEffect2,
   useCallback as useCallback2,
-  useMemo as useMemo2,
   forwardRef as forwardRef2,
   useImperativeHandle as useImperativeHandle2
 } from "react";
-import { useFrame as useFrame2, useThree as useThree2 } from "@react-three/fiber";
+import { useFrame as useFrame2 } from "@react-three/fiber";
 import { Vector3, Quaternion } from "three/webgpu";
-import {
-  EmitterController,
-  isWebGPUBackend as isWebGPUBackend2
-} from "core-vfx";
+import { EmitterController } from "core-vfx";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var worldPos = new Vector3();
 var worldQuat = new Quaternion();
@@ -709,8 +674,6 @@ var VFXEmitter = forwardRef2(function VFXEmitter2({
   onEmit,
   children
 }, ref) {
-  const { gl } = useThree2();
-  const isWebGPU = useMemo2(() => isWebGPUBackend2(gl), [gl]);
   const groupRef = useRef2(null);
   const controllerRef = useRef2(null);
   if (!controllerRef.current) {
@@ -733,10 +696,9 @@ var VFXEmitter = forwardRef2(function VFXEmitter2({
     return useVFXStore.getState().getParticles(name);
   }, [name, particlesRef]);
   useEffect2(() => {
-    if (!isWebGPU) return;
     const system = getParticleSystem();
     controller.setSystem(system);
-  }, [isWebGPU, getParticleSystem, controller]);
+  }, [getParticleSystem, controller]);
   useEffect2(() => {
     controller.updateOptions({
       emitCount,
@@ -760,7 +722,6 @@ var VFXEmitter = forwardRef2(function VFXEmitter2({
     onEmit
   ]);
   useFrame2((_, delta) => {
-    if (!isWebGPU) return;
     if (!controller.getSystem()) {
       const system = getParticleSystem();
       if (system) controller.setSystem(system);
@@ -830,8 +791,6 @@ var VFXEmitter = forwardRef2(function VFXEmitter2({
   );
 });
 function useVFXEmitter(name) {
-  const { gl } = useThree2();
-  const isWebGPU = useMemo2(() => isWebGPUBackend2(gl), [gl]);
   const getParticles = useVFXStore((s) => s.getParticles);
   const storeEmit = useVFXStore((s) => s.emit);
   const storeStart = useVFXStore((s) => s.start);
@@ -839,44 +798,37 @@ function useVFXEmitter(name) {
   const storeClear = useVFXStore((s) => s.clear);
   const emit = useCallback2(
     (position = [0, 0, 0], count = 20, overrides = null) => {
-      if (!isWebGPU) return false;
       const [x, y, z] = position;
       return storeEmit(name, { x, y, z, count, overrides });
     },
-    [isWebGPU, name, storeEmit]
+    [name, storeEmit]
   );
   const burst = useCallback2(
     (position = [0, 0, 0], count = 50, overrides = null) => {
-      if (!isWebGPU) return false;
       const [x, y, z] = position;
       return storeEmit(name, { x, y, z, count, overrides });
     },
-    [isWebGPU, name, storeEmit]
+    [name, storeEmit]
   );
   const start = useCallback2(() => {
-    if (!isWebGPU) return false;
     return storeStart(name);
-  }, [isWebGPU, name, storeStart]);
+  }, [name, storeStart]);
   const stop = useCallback2(() => {
-    if (!isWebGPU) return false;
     return storeStop(name);
-  }, [isWebGPU, name, storeStop]);
+  }, [name, storeStop]);
   const clear = useCallback2(() => {
-    if (!isWebGPU) return false;
     return storeClear(name);
-  }, [isWebGPU, name, storeClear]);
+  }, [name, storeClear]);
   const isEmitting = useCallback2(() => {
     var _a;
-    if (!isWebGPU) return false;
     const particles = getParticles(name);
     return (_a = particles == null ? void 0 : particles.isEmitting) != null ? _a : false;
-  }, [isWebGPU, name, getParticles]);
+  }, [name, getParticles]);
   const getUniforms = useCallback2(() => {
     var _a;
-    if (!isWebGPU) return null;
     const particles = getParticles(name);
     return (_a = particles == null ? void 0 : particles.uniforms) != null ? _a : null;
-  }, [isWebGPU, name, getParticles]);
+  }, [name, getParticles]);
   return {
     emit,
     burst,
@@ -885,7 +837,7 @@ function useVFXEmitter(name) {
     clear,
     isEmitting,
     getUniforms,
-    getParticles: () => isWebGPU ? getParticles(name) : null
+    getParticles: () => getParticles(name)
   };
 }
 
@@ -893,7 +845,7 @@ function useVFXEmitter(name) {
 import {
   VFXParticleSystem as VFXParticleSystem2,
   EmitterController as EmitterController2,
-  isWebGPUBackend as isWebGPUBackend3,
+  isWebGPUBackend,
   isNonDefaultRotation as isNonDefaultRotation2,
   normalizeProps as normalizeProps2,
   resolveCurveTexture
@@ -914,7 +866,7 @@ export {
   buildCurveTextureBin,
   createCombinedCurveTexture,
   isNonDefaultRotation2 as isNonDefaultRotation,
-  isWebGPUBackend3 as isWebGPUBackend,
+  isWebGPUBackend,
   normalizeProps2 as normalizeProps,
   resolveCurveTexture,
   useVFXEmitter,

package/package.json

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