tres-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

@@ -235,9 +235,7 @@ declare const VFXParticles: vue.DefineComponent<vue.ExtractPropTypes<{
     };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}> | vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>[] | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     name: {
         type: StringConstructor;
         default: undefined;

package/dist/index.js

@@ -36,14 +36,12 @@ import {
   EmitterShape,
   Lighting,
   VFXParticleSystem,
-  isWebGPUBackend,
   isNonDefaultRotation,
   normalizeProps,
   updateUniforms,
   updateUniformsPartial,
   resolveFeatures
 } from "core-vfx";
-var warnedWebGL = false;
 var VFXParticles = defineComponent({
   name: "VFXParticles",
   props: {
@@ -66,13 +64,22 @@ var VFXParticles = defineComponent({
       type: null,
       default: () => [1, 0]
     },
-    fadeSizeCurve: { type: null, default: null },
+    fadeSizeCurve: {
+      type: null,
+      default: null
+    },
     fadeOpacity: {
       type: null,
       default: () => [1, 0]
     },
-    fadeOpacityCurve: { type: null, default: null },
-    velocityCurve: { type: null, default: null },
+    fadeOpacityCurve: {
+      type: null,
+      default: null
+    },
+    velocityCurve: {
+      type: null,
+      default: null
+    },
     gravity: {
       type: null,
       default: () => [0, 0, 0]
@@ -110,7 +117,10 @@ var VFXParticles = defineComponent({
       default: Appearance.GRADIENT
     },
     alphaMap: { type: Object, default: null },
-    flipbook: { type: Object, default: null },
+    flipbook: {
+      type: Object,
+      default: null
+    },
     rotation: {
       type: null,
       default: () => [0, 0]
@@ -119,7 +129,10 @@ var VFXParticles = defineComponent({
       type: null,
       default: () => [0, 0]
     },
-    rotationSpeedCurve: { type: null, default: null },
+    rotationSpeedCurve: {
+      type: null,
+      default: null
+    },
     geometry: {
       type: Object,
       default: null
@@ -149,8 +162,14 @@ var VFXParticles = defineComponent({
     backdropNode: { type: null, default: null },
     opacityNode: { type: null, default: null },
     colorNode: { type: null, default: null },
-    alphaTestNode: { type: null, default: null },
-    castShadowNode: { type: null, default: null },
+    alphaTestNode: {
+      type: null,
+      default: null
+    },
+    castShadowNode: {
+      type: null,
+      default: null
+    },
     emitCount: { type: Number, default: 1 },
     emitterShape: {
       type: null,
@@ -186,18 +205,20 @@ var VFXParticles = defineComponent({
       type: Object,
       default: null
     },
-    curveTexturePath: { type: null, default: null },
+    curveTexturePath: {
+      type: null,
+      default: null
+    },
     depthTest: { type: Boolean, default: true },
     renderOrder: { type: Number, default: 0 }
   },
-  setup(props, { expose, slots }) {
+  setup(props, { expose }) {
     var _a, _b, _c, _d;
     const { renderer: rendererCtx } = useTresContext();
     const { onBeforeRender } = useLoop();
     const systemRef = shallowRef(null);
     const renderObjectRef = shallowRef(null);
     const emitting = ref(props.autoStart);
-    const isWebGPU = ref(false);
     const debugValuesRef = ref(null);
     const activeMaxParticles = ref(props.maxParticles);
     const activeLighting = ref(props.lighting);
@@ -315,17 +336,6 @@ var VFXParticles = defineComponent({
         console.warn("tres-vfx: No renderer instance available");
         return;
       }
-      if (!isWebGPUBackend(renderer)) {
-        if (!warnedWebGL) {
-          warnedWebGL = true;
-          console.warn(
-            "tres-vfx: WebGPU backend not detected. Particle system disabled."
-          );
-        }
-        isWebGPU.value = false;
-        return;
-      }
-      isWebGPU.value = true;
       const system = createSystem();
       if (!system) return;
       systemRef.value = system;
@@ -412,7 +422,8 @@ var VFXParticles = defineComponent({
       if (newValues.position) {
         system.setPosition(newValues.position);
       }
-      if ("delay" in newValues) system.setDelay((_g = newValues.delay) != null ? _g : 0);
+      if ("delay" in newValues)
+        system.setDelay((_g = newValues.delay) != null ? _g : 0);
       if ("emitCount" in newValues)
         system.setEmitCount((_h = newValues.emitCount) != null ? _h : 1);
       if (newValues.autoStart !== void 0) {
@@ -456,7 +467,10 @@ var VFXParticles = defineComponent({
               }
               activeGeometry.value = null;
             } else {
-              const newGeometry = createGeometry(geoType, geoArgs);
+              const newGeometry = createGeometry(
+                geoType,
+                geoArgs
+              );
               if (newGeometry) {
                 if (activeGeometry.value !== null && activeGeometry.value !== props.geometry) {
                   activeGeometry.value.dispose();
@@ -583,7 +597,6 @@ var VFXParticles = defineComponent({
         activeRotationSpeedCurve
       ],
       () => {
-        if (!isWebGPU.value) return;
         initSystem();
       }
     );
@@ -728,9 +741,6 @@ var VFXParticles = defineComponent({
     };
     expose(api);
     return () => {
-      if (!isWebGPU.value) {
-        return slots.fallback ? slots.fallback() : null;
-      }
       const obj = renderObjectRef.value;
       if (!obj) return null;
       return h("primitive", { object: obj });
@@ -744,7 +754,6 @@ import { useLoop as useLoop2, useTresContext as useTresContext2 } from "@tresjs/
 import { Vector3, Quaternion } from "three/webgpu";
 import {
   EmitterController,
-  isWebGPUBackend as isWebGPUBackend2,
   coreStore as coreStore2
 } from "core-vfx";
 var worldPos = new Vector3();
@@ -780,7 +789,6 @@ var VFXEmitter = defineComponent2({
     const { renderer } = useTresContext2();
     const { onBeforeRender } = useLoop2();
     const groupRef = ref2(null);
-    const isWebGPU = ref2(false);
     const controller = new EmitterController({
       emitCount: props.emitCount,
       delay: props.delay,
@@ -821,29 +829,24 @@ var VFXEmitter = defineComponent2({
         });
       }
     );
-    function checkWebGPU() {
-      const r = renderer.instance;
-      if (r && isWebGPUBackend2(r)) {
-        isWebGPU.value = true;
-        const system = getParticleSystem();
-        if (system) controller.setSystem(system);
-      }
+    function linkSystem() {
+      const system = getParticleSystem();
+      if (system) controller.setSystem(system);
     }
     onMounted2(() => {
       var _a;
       const mgr = renderer;
       if ((_a = mgr.isInitialized) == null ? void 0 : _a.value) {
-        checkWebGPU();
+        linkSystem();
       } else if (mgr.onReady) {
         mgr.onReady(() => {
-          checkWebGPU();
+          linkSystem();
         });
       } else {
-        checkWebGPU();
+        linkSystem();
       }
     });
     onBeforeRender(({ delta }) => {
-      if (!isWebGPU.value) return;
       if (!controller.getSystem()) {
         const system = getParticleSystem();
         if (system) controller.setSystem(system);
@@ -915,61 +918,31 @@ var VFXEmitter = defineComponent2({
   }
 });
 function useVFXEmitter(name) {
-  const { renderer } = useTresContext2();
-  const isWebGPU = ref2(false);
-  onMounted2(() => {
-    var _a;
-    const mgr = renderer;
-    if ((_a = mgr.isInitialized) == null ? void 0 : _a.value) {
-      const r = renderer.instance;
-      if (r && isWebGPUBackend2(r)) {
-        isWebGPU.value = true;
-      }
-    } else if (mgr.onReady) {
-      mgr.onReady((r) => {
-        if (isWebGPUBackend2(r)) {
-          isWebGPU.value = true;
-        }
-      });
-    } else {
-      const r = renderer.instance;
-      if (r && isWebGPUBackend2(r)) {
-        isWebGPU.value = true;
-      }
-    }
-  });
   const getParticles = () => coreStore2.getState().getParticles(name);
   const emit = (position = [0, 0, 0], count = 20, overrides = null) => {
-    if (!isWebGPU.value) return false;
     const [x, y, z] = position;
     return coreStore2.getState().emit(name, { x, y, z, count, overrides });
   };
   const burst = (position = [0, 0, 0], count = 50, overrides = null) => {
-    if (!isWebGPU.value) return false;
     const [x, y, z] = position;
     return coreStore2.getState().emit(name, { x, y, z, count, overrides });
   };
   const start = () => {
-    if (!isWebGPU.value) return false;
     return coreStore2.getState().start(name);
   };
   const stop = () => {
-    if (!isWebGPU.value) return false;
     return coreStore2.getState().stop(name);
   };
   const clear = () => {
-    if (!isWebGPU.value) return false;
     return coreStore2.getState().clear(name);
   };
   const isEmitting = () => {
     var _a;
-    if (!isWebGPU.value) return false;
     const particles = getParticles();
     return (_a = particles == null ? void 0 : particles.isEmitting) != null ? _a : false;
   };
   const getUniforms = () => {
     var _a;
-    if (!isWebGPU.value) return null;
     const particles = getParticles();
     return (_a = particles == null ? void 0 : particles.uniforms) != null ? _a : null;
   };
@@ -981,12 +954,12 @@ function useVFXEmitter(name) {
     clear,
     isEmitting,
     getUniforms,
-    getParticles: () => isWebGPU.value ? getParticles() : null
+    getParticles
   };
 }
 
 // src/vue-store.ts
-import { ref as ref3, onUnmounted as onUnmounted3 } from "vue";
+import { ref as ref3, onUnmounted as onUnmounted2 } from "vue";
 import { coreStore as coreStore3 } from "core-vfx";
 function useVFXStore(selector) {
   const pick = selector != null ? selector : ((s) => s);
@@ -994,7 +967,7 @@ function useVFXStore(selector) {
   const unsubscribe = coreStore3.subscribe((s) => {
     state.value = pick(s);
   });
-  onUnmounted3(unsubscribe);
+  onUnmounted2(unsubscribe);
   return state;
 }
 useVFXStore.getState = coreStore3.getState;
@@ -1017,7 +990,7 @@ import {
 import {
   VFXParticleSystem as VFXParticleSystem2,
   EmitterController as EmitterController2,
-  isWebGPUBackend as isWebGPUBackend3,
+  isWebGPUBackend,
   isNonDefaultRotation as isNonDefaultRotation2,
   normalizeProps as normalizeProps2,
   resolveCurveTexture
@@ -1038,7 +1011,7 @@ export {
   buildCurveTextureBin,
   createCombinedCurveTexture,
   isNonDefaultRotation2 as isNonDefaultRotation,
-  isWebGPUBackend3 as isWebGPUBackend,
+  isWebGPUBackend,
   normalizeProps2 as normalizeProps,
   resolveCurveTexture,
   useVFXEmitter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tres-vfx",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -24,8 +24,8 @@
     "prepublishOnly": "bun run typecheck && bun run build && bun run copy-readme"
   },
   "dependencies": {
-    "core-vfx": "0.1.0",
-    "debug-vfx": "0.1.1"
+    "core-vfx": "0.2.0",
+    "debug-vfx": "0.1.2"
   },
   "peerDependencies": {
     "@tresjs/core": ">=5.0.0",