threlte-vfx 0.2.1 → 0.3.0

package/README.md

@@ -13,9 +13,7 @@ Available for React Three Fiber (R3F), and experimentally for vanilla Three.js,
 - 📊 **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
-
-⚠️ Three VFX only supports WebGPU at the moment ([79% global support](https://caniuse.com/webgpu)). A `fallback` option is available to replace the particle systems by your own fallback objects.
-
+- 🐢 **WebGL fallback** – Three VFX targets WebGPU ([79% global support](https://caniuse.com/webgpu)) but provides a CPU fallback
 
 ## Quick Start
 
@@ -65,8 +63,8 @@ npm install tres-vfx
 
 ```vue
 <script setup>
-  import { TresCanvas } from '@tresjs/core'
-  import { VFXParticles } from 'tres-vfx'
+import { TresCanvas } from '@tresjs/core'
+import { VFXParticles } from 'tres-vfx'
 </script>
 
 <template>

package/dist/VFXEmitter.svelte

@@ -4,7 +4,6 @@ import { onMount } from 'svelte'
 import { Vector3, Quaternion, Group } from 'three/webgpu'
 import {
   EmitterController,
-  isWebGPUBackend,
   coreStore,
   type EmitterControllerOptions,
 } from 'core-vfx'
@@ -44,7 +43,6 @@ let {
 const { renderer } = useThrelte()
 
 let groupRef: Group | null = $state(null)
-let isWebGPU = $state(false)
 
 const controller = new EmitterController({
   emitCount,
@@ -89,22 +87,13 @@ $effect(() => {
   })
 })
 
-function checkWebGPU() {
-  if (renderer && isWebGPUBackend(renderer)) {
-    isWebGPU = true
-    const system = getParticleSystem()
-    if (system) controller.setSystem(system)
-  }
-}
-
 onMount(() => {
-  checkWebGPU()
+  const system = getParticleSystem()
+  if (system) controller.setSystem(system)
 })
 
 // Frame loop
 useTask((delta) => {
-  if (!isWebGPU) return
-
   if (!controller.getSystem()) {
     const system = getParticleSystem()
     if (system) controller.setSystem(system)

package/dist/VFXParticles.svelte

@@ -9,7 +9,6 @@ import {
   EmitterShape,
   Lighting,
   VFXParticleSystem,
-  isWebGPUBackend,
   isNonDefaultRotation,
   normalizeProps,
   updateUniforms,
@@ -144,18 +143,15 @@ let {
 
 const { renderer } = useThrelte()
 
-let warnedWebGL = false
 let mounted = false
 
 // Internal state — NOT tracked by effects (plain variables)
 let _system: VFXParticleSystem | null = null
 let _renderObject: THREE.Object3D | null = null
-let _isWebGPU = false
 let _emitting = autoStart
 
 // Reactive state for the template only
 let renderObjectForTemplate: THREE.Object3D | null = $state(null)
-let isWebGPUForTemplate = $state(false)
 
 let debugValues: Record<string, unknown> | null = null
 
@@ -266,7 +262,6 @@ function destroySystem() {
   _system = null
   _renderObject = null
   renderObjectForTemplate = null
-  isWebGPUForTemplate = false
 }
 
 function initSystem() {
@@ -285,20 +280,6 @@ function initSystem() {
     return
   }
 
-  if (!isWebGPUBackend(renderer)) {
-    if (!warnedWebGL) {
-      warnedWebGL = true
-      console.warn(
-        'threlte-vfx: WebGPU backend not detected. Particle system disabled.'
-      )
-    }
-    _isWebGPU = false
-    isWebGPUForTemplate = false
-    renderObjectForTemplate = null
-    return
-  }
-
-  _isWebGPU = true
   const newSystem = createSystem()
   if (!newSystem) return
 
@@ -334,7 +315,6 @@ function initSystem() {
   }
 
   // Update template-facing reactive state last
-  isWebGPUForTemplate = true
   renderObjectForTemplate = newSystem.renderObject
 }
 
@@ -627,7 +607,6 @@ $effect(() => {
   // Use untrack for the actual init to avoid reading/writing
   // reactive state that would re-trigger this effect
   untrack(() => {
-    if (!_isWebGPU) return
     initSystem()
   })
 })
@@ -768,6 +747,6 @@ export function clear() {
 }
 </script>
 
-{#if isWebGPUForTemplate && renderObjectForTemplate}
+{#if renderObjectForTemplate}
   <T is={renderObjectForTemplate} />
 {/if}

package/dist/index.d.ts

@@ -65,7 +65,13 @@ interface VFXParticlesProps {
 }
 
 declare class VFXParticles extends SvelteComponent<VFXParticlesProps> {
-  spawn(x?: number, y?: number, z?: number, count?: number, overrides?: Record<string, unknown> | null): void
+  spawn(
+    x?: number,
+    y?: number,
+    z?: number,
+    count?: number,
+    overrides?: Record<string, unknown> | null
+  ): void
   start(): void
   stop(): void
   clear(): void

package/dist/index.js

@@ -31,7 +31,6 @@ import {
   EmitterShape,
   Lighting,
   VFXParticleSystem,
-  isWebGPUBackend,
   isNonDefaultRotation,
   normalizeProps,
   updateUniforms,
@@ -43,14 +42,11 @@ function VFXParticles($$anchor, $$props) {
   $.push($$props, true);
   let name = $.prop($$props, "name", 19, () => void 0), debug = $.prop($$props, "debug", 3, false), maxParticles = $.prop($$props, "maxParticles", 3, 1e4), size = $.prop($$props, "size", 19, () => [0.1, 0.3]), colorStart = $.prop($$props, "colorStart", 19, () => ["#ffffff"]), colorEnd = $.prop($$props, "colorEnd", 3, null), fadeSize = $.prop($$props, "fadeSize", 19, () => [1, 0]), fadeSizeCurve = $.prop($$props, "fadeSizeCurve", 3, null), fadeOpacity = $.prop($$props, "fadeOpacity", 19, () => [1, 0]), fadeOpacityCurve = $.prop($$props, "fadeOpacityCurve", 3, null), velocityCurve = $.prop($$props, "velocityCurve", 3, null), gravity = $.prop($$props, "gravity", 19, () => [0, 0, 0]), lifetime = $.prop($$props, "lifetime", 19, () => [1, 2]), direction = $.prop($$props, "direction", 19, () => [[-1, 1], [0, 1], [-1, 1]]), startPosition = $.prop($$props, "startPosition", 19, () => [[0, 0], [0, 0], [0, 0]]), speed = $.prop($$props, "speed", 19, () => [0.1, 0.1]), friction = $.prop($$props, "friction", 19, () => ({ intensity: 0, easing: "linear" })), appearance = $.prop($$props, "appearance", 19, () => Appearance.GRADIENT), alphaMap = $.prop($$props, "alphaMap", 3, null), flipbook = $.prop($$props, "flipbook", 3, null), rotation = $.prop($$props, "rotation", 19, () => [0, 0]), rotationSpeed = $.prop($$props, "rotationSpeed", 19, () => [0, 0]), rotationSpeedCurve = $.prop($$props, "rotationSpeedCurve", 3, null), geometry = $.prop($$props, "geometry", 3, null), orientToDirection = $.prop($$props, "orientToDirection", 3, false), orientAxis = $.prop($$props, "orientAxis", 3, "z"), stretchBySpeed = $.prop($$props, "stretchBySpeed", 3, null), lighting = $.prop($$props, "lighting", 19, () => Lighting.STANDARD), shadow = $.prop($$props, "shadow", 3, false), blending = $.prop($$props, "blending", 19, () => Blending.NORMAL), intensity = $.prop($$props, "intensity", 3, 1), position = $.prop($$props, "position", 19, () => [0, 0, 0]), autoStart = $.prop($$props, "autoStart", 3, true), delay = $.prop($$props, "delay", 3, 0), backdropNode = $.prop($$props, "backdropNode", 3, null), opacityNode = $.prop($$props, "opacityNode", 3, null), colorNode = $.prop($$props, "colorNode", 3, null), alphaTestNode = $.prop($$props, "alphaTestNode", 3, null), castShadowNode = $.prop($$props, "castShadowNode", 3, null), emitCount = $.prop($$props, "emitCount", 3, 1), emitterShape = $.prop($$props, "emitterShape", 19, () => EmitterShape.BOX), emitterRadius = $.prop($$props, "emitterRadius", 19, () => [0, 1]), emitterAngle = $.prop($$props, "emitterAngle", 19, () => Math.PI / 4), emitterHeight = $.prop($$props, "emitterHeight", 19, () => [0, 1]), emitterSurfaceOnly = $.prop($$props, "emitterSurfaceOnly", 3, false), emitterDirection = $.prop($$props, "emitterDirection", 19, () => [0, 1, 0]), turbulence = $.prop($$props, "turbulence", 3, null), attractors = $.prop($$props, "attractors", 3, null), attractToCenter = $.prop($$props, "attractToCenter", 3, false), startPositionAsDirection = $.prop($$props, "startPositionAsDirection", 3, false), softParticles = $.prop($$props, "softParticles", 3, false), softDistance = $.prop($$props, "softDistance", 3, 0.5), collision = $.prop($$props, "collision", 3, null), curveTexturePath = $.prop($$props, "curveTexturePath", 3, null), depthTest = $.prop($$props, "depthTest", 3, true), renderOrder = $.prop($$props, "renderOrder", 3, 0);
   const { renderer } = useThrelte();
-  let warnedWebGL = false;
   let mounted = false;
   let _system = null;
   let _renderObject = null;
-  let _isWebGPU = false;
   let _emitting = autoStart();
   let renderObjectForTemplate = $.state(null);
-  let isWebGPUForTemplate = $.state(false);
   let debugValues = null;
   let activeMaxParticles = $.state($.proxy(maxParticles()));
   let activeLighting = $.state($.proxy(lighting()));
@@ -143,7 +139,6 @@ function VFXParticles($$anchor, $$props) {
     _system = null;
     _renderObject = null;
     $.set(renderObjectForTemplate, null);
-    $.set(isWebGPUForTemplate, false);
   }
   function initSystem() {
     const oldSystem = _system;
@@ -159,17 +154,6 @@ function VFXParticles($$anchor, $$props) {
       console.warn("threlte-vfx: No renderer instance available");
       return;
     }
-    if (!isWebGPUBackend(renderer)) {
-      if (!warnedWebGL) {
-        warnedWebGL = true;
-        console.warn("threlte-vfx: WebGPU backend not detected. Particle system disabled.");
-      }
-      _isWebGPU = false;
-      $.set(isWebGPUForTemplate, false);
-      $.set(renderObjectForTemplate, null);
-      return;
-    }
-    _isWebGPU = true;
     const newSystem = createSystem();
     if (!newSystem) return;
     _system = newSystem;
@@ -199,7 +183,6 @@ function VFXParticles($$anchor, $$props) {
     if (debug()) {
       initDebugPanel();
     }
-    $.set(isWebGPUForTemplate, true);
     $.set(renderObjectForTemplate, newSystem.renderObject, true);
   }
   function handleDebugUpdate(newValues) {
@@ -423,7 +406,6 @@ function VFXParticles($$anchor, $$props) {
     ];
     if (!mounted) return;
     untrack(() => {
-      if (!_isWebGPU) return;
       initSystem();
     });
   });
@@ -553,7 +535,7 @@ function VFXParticles($$anchor, $$props) {
       });
     };
     $.if(node, ($$render) => {
-      if ($.get(isWebGPUForTemplate) && $.get(renderObjectForTemplate)) $$render(consequent);
+      if ($.get(renderObjectForTemplate)) $$render(consequent);
     });
   }
   $.append($$anchor, fragment);
@@ -566,11 +548,7 @@ import * as $2 from "svelte/internal/client";
 import { T as T2, useThrelte as useThrelte2, useTask as useTask2 } from "@threlte/core";
 import { onMount as onMount2 } from "svelte";
 import { Vector3, Quaternion, Group } from "three/webgpu";
-import {
-  EmitterController,
-  isWebGPUBackend as isWebGPUBackend2,
-  coreStore as coreStore2
-} from "core-vfx";
+import { EmitterController, coreStore as coreStore2 } from "core-vfx";
 function VFXEmitter($$anchor, $$props) {
   $2.push($$props, true);
   const worldPos = new Vector3();
@@ -578,7 +556,6 @@ function VFXEmitter($$anchor, $$props) {
   let name = $2.prop($$props, "name", 19, () => void 0), particlesRef = $2.prop($$props, "particlesRef", 19, () => void 0), position = $2.prop($$props, "position", 19, () => [0, 0, 0]), emitCount = $2.prop($$props, "emitCount", 3, 10), delay = $2.prop($$props, "delay", 3, 0), autoStart = $2.prop($$props, "autoStart", 3, true), loop = $2.prop($$props, "loop", 3, true), localDirection = $2.prop($$props, "localDirection", 3, false), direction = $2.prop($$props, "direction", 19, () => void 0), overrides = $2.prop($$props, "overrides", 3, null), onEmit = $2.prop($$props, "onEmit", 19, () => void 0);
   const { renderer } = useThrelte2();
   let groupRef = $2.state(null);
-  let isWebGPU = $2.state(false);
   const controller = new EmitterController({
     emitCount: emitCount(),
     delay: delay(),
@@ -617,18 +594,11 @@ function VFXEmitter($$anchor, $$props) {
       onEmit: onEmit()
     });
   });
-  function checkWebGPU() {
-    if (renderer && isWebGPUBackend2(renderer)) {
-      $2.set(isWebGPU, true);
-      const system = getParticleSystem();
-      if (system) controller.setSystem(system);
-    }
-  }
   onMount2(() => {
-    checkWebGPU();
+    const system = getParticleSystem();
+    if (system) controller.setSystem(system);
   });
   useTask2((delta) => {
-    if (!$2.get(isWebGPU)) return;
     if (!controller.getSystem()) {
       const system = getParticleSystem();
       if (system) controller.setSystem(system);
@@ -709,11 +679,11 @@ function VFXEmitter($$anchor, $$props) {
 
 // src/useVFXEmitter.ts
 import { useThrelte as useThrelte3 } from "@threlte/core";
-import { coreStore as coreStore3, isWebGPUBackend as isWebGPUBackend3 } from "core-vfx";
+import { coreStore as coreStore3, isWebGPUBackend } from "core-vfx";
 function useVFXEmitter(name) {
   const { renderer } = useThrelte3();
   const checkWebGPU = () => {
-    return renderer && isWebGPUBackend3(renderer);
+    return renderer && isWebGPUBackend(renderer);
   };
   const getParticles = () => coreStore3.getState().getParticles(name);
   const emit = (position = [0, 0, 0], count = 20, overrides = null) => {
@@ -796,7 +766,7 @@ import {
 import {
   VFXParticleSystem as VFXParticleSystem2,
   EmitterController as EmitterController2,
-  isWebGPUBackend as isWebGPUBackend4,
+  isWebGPUBackend as isWebGPUBackend2,
   isNonDefaultRotation as isNonDefaultRotation2,
   normalizeProps as normalizeProps2,
   resolveCurveTexture
@@ -817,7 +787,7 @@ export {
   buildCurveTextureBin,
   createCombinedCurveTexture,
   isNonDefaultRotation2 as isNonDefaultRotation,
-  isWebGPUBackend4 as isWebGPUBackend,
+  isWebGPUBackend2 as isWebGPUBackend,
   normalizeProps2 as normalizeProps,
   resolveCurveTexture,
   useVFXEmitter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "threlte-vfx",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "license": "MIT",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -34,8 +34,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": {
     "@threlte/core": ">=8.0.0",