vanilla-vfx 0.1.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

@@ -4,8 +4,6 @@ export { Appearance, AttractorConfig, AttractorType, BaseParticleProps, Blending
 
 type VFXParticlesOptions = VFXParticleSystemOptions & {
     debug?: boolean;
-    /** Optional fallback Object3D to display when WebGPU is not available */
-    fallback?: THREE.Object3D;
 };
 declare class VFXParticles {
     readonly group: THREE.Group;
@@ -16,7 +14,6 @@ declare class VFXParticles {
     private emitAccumulator;
     private debug;
     private initialized;
-    private disabled;
     constructor(renderer: THREE.WebGPURenderer, options?: VFXParticlesOptions);
     get object3D(): THREE.Group;
     get uniforms(): Record<string, {

package/dist/index.js

@@ -14618,12 +14618,12 @@ var VarNode = class extends Node {
   generate(builder) {
     const { node, name, readOnly } = this;
     const { renderer } = builder;
-    const isWebGPUBackend3 = renderer.backend.isWebGPUBackend === true;
+    const isWebGPUBackend2 = renderer.backend.isWebGPUBackend === true;
     let isDeterministic = false;
     let shouldTreatAsReadOnly = false;
     if (readOnly) {
       isDeterministic = builder.isDeterministic(node);
-      shouldTreatAsReadOnly = isWebGPUBackend3 ? readOnly : isDeterministic;
+      shouldTreatAsReadOnly = isWebGPUBackend2 ? readOnly : isDeterministic;
     }
     const nodeType = this.getNodeType(builder);
     if (nodeType == "void") {
@@ -14639,7 +14639,7 @@ var VarNode = class extends Node {
     const propertyName = builder.getPropertyName(nodeVar);
     let declarationPrefix = propertyName;
     if (shouldTreatAsReadOnly) {
-      if (isWebGPUBackend3) {
+      if (isWebGPUBackend2) {
         declarationPrefix = isDeterministic ? `const ${propertyName}` : `let ${propertyName}`;
       } else {
         const count = node.getArrayCount(builder);
@@ -20247,37 +20247,21 @@ if (typeof Float16Array !== "undefined") {
 // src/VFXParticles.ts
 import {
   VFXParticleSystem,
-  isWebGPUBackend,
   needsRecreation,
   updateUniformsPartial
 } from "core-vfx";
-var warnedWebGL = false;
 var VFXParticles = class {
   constructor(renderer, options) {
     this.system = null;
     this.isEmitting = true;
     this.emitAccumulator = 0;
     this.initialized = false;
-    this.disabled = false;
     var _a;
     this.renderer = renderer;
     this.debug = (_a = options == null ? void 0 : options.debug) != null ? _a : false;
     this.config = __spreadValues({}, options);
     delete this.config.debug;
-    delete this.config.fallback;
     this.group = new Group();
-    if (!isWebGPUBackend(renderer)) {
-      this.disabled = true;
-      if (!warnedWebGL) {
-        warnedWebGL = true;
-        console.warn(
-          "r3f-vfx: WebGPU backend not detected. Particle system disabled."
-        );
-      }
-      if (options == null ? void 0 : options.fallback) {
-        this.group.add(options.fallback);
-      }
-    }
   }
   get object3D() {
     return this.group;
@@ -20287,7 +20271,6 @@ var VFXParticles = class {
     return this.system ? this.system.uniforms : null;
   }
   async init() {
-    if (this.disabled) return;
     if (this.initialized) return;
     if (this.debug) {
       const { DEFAULT_VALUES } = await import("debug-vfx");
@@ -20305,7 +20288,6 @@ var VFXParticles = class {
     }
   }
   update(delta) {
-    if (this.disabled) return;
     if (!this.system || !this.system.initialized) return;
     if (this.isEmitting) {
       const delay = this.system.normalizedProps.delay;
@@ -20337,7 +20319,6 @@ var VFXParticles = class {
     this.initialized = false;
   }
   spawn(x = 0, y = 0, z = 0, count, overrides) {
-    if (this.disabled) return;
     if (!this.system) return;
     this.system.spawn(
       x,
@@ -20348,23 +20329,19 @@ var VFXParticles = class {
     );
   }
   start() {
-    if (this.disabled) return;
     this.isEmitting = true;
     this.emitAccumulator = 0;
     if (this.system) this.system.start();
   }
   stop() {
-    if (this.disabled) return;
     this.isEmitting = false;
     if (this.system) this.system.stop();
   }
   clear() {
-    if (this.disabled) return;
     if (this.system) this.system.clear();
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   setProps(newValues) {
-    if (this.disabled) return;
     this.config = __spreadValues(__spreadValues({}, this.config), newValues);
     if (this.system && needsRecreation(this.system.features, newValues, this.config)) {
       this.recreateSystem();
@@ -20449,7 +20426,12 @@ import {
   Easing,
   Lighting
 } from "core-vfx";
-import { VFXParticleSystem as VFXParticleSystem2, EmitterController, isWebGPUBackend as isWebGPUBackend2, resolveCurveTexture } from "core-vfx";
+import {
+  VFXParticleSystem as VFXParticleSystem2,
+  EmitterController,
+  isWebGPUBackend,
+  resolveCurveTexture
+} from "core-vfx";
 export {
   Appearance,
   AttractorType,
@@ -20460,7 +20442,7 @@ export {
   Lighting,
   VFXParticleSystem2 as VFXParticleSystem,
   VFXParticles,
-  isWebGPUBackend2 as isWebGPUBackend,
+  isWebGPUBackend,
   resolveCurveTexture
 };
 /*! Bundled license information:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-vfx",
-  "version": "0.1.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.0"
+    "core-vfx": "0.2.0",
+    "debug-vfx": "0.1.2"
   },
   "devDependencies": {
     "tsup": "8.5.1",