threlte-vfx 0.2.0 → 0.2.1

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
 
@@ -12,24 +14,22 @@ High-performance GPU-accelerated particle system for Three.js WebGPU with React
 - 🔗 **Emitter System** - Decoupled emitters that can share particle systems
 - ⚡ **WebGPU Native** - Built specifically for Three.js WebGPU renderer
 
-## Installation
+⚠️ 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.
 
-```bash
-npm install r3f-vfx
-```
 
-### Peer Dependencies
+## Quick Start
+
+### React Three Fiber
+
+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 +40,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

@@ -1,8 +1,98 @@
+import { SvelteComponent, Snippet } from 'svelte';
 import * as core_vfx from 'core-vfx';
-import { CoreState } from 'core-vfx';
+import { VFXParticleSystemOptions, FrictionConfig, FlipbookConfig, Rotation3DInput, StretchConfig, TurbulenceConfig, AttractorConfig, CollisionConfig, EmitterControllerOptions, CoreState } from 'core-vfx';
 export { Appearance, AttractorConfig, AttractorType, BaseParticleProps, Blending, CollisionConfig, CurveChannel, CurveData, CurvePoint, CurveTextureResolved, CurveTextureResult, Easing, EmitterController, EmitterControllerOptions, EmitterShape, FlipbookConfig, FrictionConfig, Lighting, NormalizedParticleProps, ParticleData, Rotation3DInput, StretchConfig, TurbulenceConfig, VFXParticleSystem, VFXParticleSystemOptions, bakeCurveToArray, buildCurveTextureBin, createCombinedCurveTexture, isNonDefaultRotation, isWebGPUBackend, normalizeProps, resolveCurveTexture } from 'core-vfx';
+import { Texture, BufferGeometry } from 'three';
 import { Readable } from 'svelte/store';
 
+interface VFXParticlesProps {
+  name?: string
+  debug?: boolean
+  maxParticles?: number
+  size?: [number, number] | number
+  colorStart?: string[]
+  colorEnd?: string[] | null
+  fadeSize?: [number, number]
+  fadeSizeCurve?: unknown[] | null
+  fadeOpacity?: [number, number]
+  fadeOpacityCurve?: unknown[] | null
+  velocityCurve?: unknown[] | null
+  gravity?: [number, number, number]
+  lifetime?: [number, number]
+  direction?: VFXParticleSystemOptions['direction']
+  startPosition?: VFXParticleSystemOptions['startPosition']
+  speed?: [number, number] | number
+  friction?: FrictionConfig
+  appearance?: string | number
+  alphaMap?: Texture | null
+  flipbook?: FlipbookConfig | null
+  rotation?: Rotation3DInput
+  rotationSpeed?: Rotation3DInput
+  rotationSpeedCurve?: unknown[] | null
+  geometry?: BufferGeometry | null
+  orientToDirection?: boolean
+  orientAxis?: string
+  stretchBySpeed?: StretchConfig | null
+  lighting?: string | number
+  shadow?: boolean
+  blending?: string | number
+  intensity?: number
+  position?: [number, number, number]
+  autoStart?: boolean
+  delay?: number
+  backdropNode?: unknown
+  opacityNode?: unknown
+  colorNode?: unknown
+  alphaTestNode?: unknown
+  castShadowNode?: unknown
+  emitCount?: number
+  emitterShape?: string | number
+  emitterRadius?: [number, number]
+  emitterAngle?: number
+  emitterHeight?: [number, number]
+  emitterSurfaceOnly?: boolean
+  emitterDirection?: [number, number, number]
+  turbulence?: TurbulenceConfig | null
+  attractors?: AttractorConfig[] | null
+  attractToCenter?: boolean
+  startPositionAsDirection?: boolean
+  softParticles?: boolean
+  softDistance?: number
+  collision?: CollisionConfig | null
+  curveTexturePath?: string | null
+  depthTest?: boolean
+  renderOrder?: number
+}
+
+declare class VFXParticles extends SvelteComponent<VFXParticlesProps> {
+  spawn(x?: number, y?: number, z?: number, count?: number, overrides?: Record<string, unknown> | null): void
+  start(): void
+  stop(): void
+  clear(): void
+}
+
+interface VFXEmitterProps {
+  name?: string
+  particlesRef?: any
+  position?: [number, number, number]
+  emitCount?: number
+  delay?: number
+  autoStart?: boolean
+  loop?: boolean
+  localDirection?: boolean
+  direction?: EmitterControllerOptions['direction']
+  overrides?: Record<string, unknown> | null
+  onEmit?: EmitterControllerOptions['onEmit']
+  children?: Snippet
+}
+
+declare class VFXEmitter extends SvelteComponent<VFXEmitterProps> {
+  emit(emitOverrides?: Record<string, unknown> | null): boolean
+  burst(count: number): boolean
+  start(): void
+  stop(): void
+}
+
 declare function useVFXEmitter(name: string): {
     emit: (position?: [number, number, number], count?: number, overrides?: Record<string, unknown> | null) => boolean;
     burst: (position?: [number, number, number], count?: number, overrides?: Record<string, unknown> | null) => boolean;
@@ -25,4 +115,4 @@ declare namespace useVFXStore {
     var subscribe: (listener: (state: CoreState, prevState: CoreState) => void) => () => void;
 }
 
-export { useVFXEmitter, useVFXStore };
+export { VFXEmitter, VFXParticles, useVFXEmitter, useVFXStore };

package/dist/index.js

@@ -1,33 +1,742 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop3 in b || (b = {}))
+    if (__hasOwnProp.call(b, prop3))
+      __defNormalProp(a, prop3, b[prop3]);
+  if (__getOwnPropSymbols)
+    for (var prop3 of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop3))
+        __defNormalProp(a, prop3, b[prop3]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/VFXParticles.svelte
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { T, useThrelte, useTask } from "@threlte/core";
+import { onMount, onDestroy, untrack } from "svelte";
+import * as THREE from "three/webgpu";
+import { coreStore } from "core-vfx";
+import {
+  Appearance,
+  Blending,
+  EmitterShape,
+  Lighting,
+  VFXParticleSystem,
+  isWebGPUBackend,
+  isNonDefaultRotation,
+  normalizeProps,
+  updateUniforms,
+  updateUniformsPartial,
+  resolveFeatures
+} from "core-vfx";
+function VFXParticles($$anchor, $$props) {
+  var _a, _b, _c, _d;
+  $.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()));
+  let activeAppearance = $.state($.proxy(appearance()));
+  let activeOrientToDirection = $.state($.proxy(orientToDirection()));
+  let activeGeometry = $.state($.proxy(geometry()));
+  let activeShadow = $.state($.proxy(shadow()));
+  let activeFadeSizeCurve = $.state($.proxy(fadeSizeCurve()));
+  let activeFadeOpacityCurve = $.state($.proxy(fadeOpacityCurve()));
+  let activeVelocityCurve = $.state($.proxy(velocityCurve()));
+  let activeRotationSpeedCurve = $.state($.proxy(rotationSpeedCurve()));
+  let activeTurbulence = $.state($.proxy(turbulence() !== null && ((_b = (_a = turbulence()) == null ? void 0 : _a.intensity) != null ? _b : 0) > 0));
+  let activeAttractors = $.state($.proxy(attractors() !== null && ((_d = (_c = attractors()) == null ? void 0 : _c.length) != null ? _d : 0) > 0));
+  let activeCollision = $.state(collision() !== null);
+  let activeNeedsPerParticleColor = $.state($.proxy(colorStart().length > 1 || colorEnd() !== null));
+  let activeNeedsRotation = $.state($.proxy(isNonDefaultRotation(rotation()) || isNonDefaultRotation(rotationSpeed())));
+  let prevGeometryType = null;
+  let prevGeometryArgs = null;
+  function buildOptions() {
+    var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I;
+    const dbg = debug() ? debugValues : null;
+    return {
+      maxParticles: untrack(() => $.get(activeMaxParticles)),
+      size: (_a2 = dbg == null ? void 0 : dbg.size) != null ? _a2 : size(),
+      colorStart: (_b2 = dbg == null ? void 0 : dbg.colorStart) != null ? _b2 : colorStart(),
+      colorEnd: (dbg == null ? void 0 : dbg.colorEnd) !== void 0 ? dbg.colorEnd : colorEnd(),
+      fadeSize: (_c2 = dbg == null ? void 0 : dbg.fadeSize) != null ? _c2 : fadeSize(),
+      fadeSizeCurve: untrack(() => $.get(activeFadeSizeCurve)),
+      fadeOpacity: (_d2 = dbg == null ? void 0 : dbg.fadeOpacity) != null ? _d2 : fadeOpacity(),
+      fadeOpacityCurve: untrack(() => $.get(activeFadeOpacityCurve)),
+      velocityCurve: untrack(() => $.get(activeVelocityCurve)),
+      gravity: (_e = dbg == null ? void 0 : dbg.gravity) != null ? _e : gravity(),
+      lifetime: (_f = dbg == null ? void 0 : dbg.lifetime) != null ? _f : lifetime(),
+      direction: (_g = dbg == null ? void 0 : dbg.direction) != null ? _g : direction(),
+      startPosition: (_h = dbg == null ? void 0 : dbg.startPosition) != null ? _h : startPosition(),
+      speed: (_i = dbg == null ? void 0 : dbg.speed) != null ? _i : speed(),
+      friction: (_j = dbg == null ? void 0 : dbg.friction) != null ? _j : friction(),
+      appearance: untrack(() => $.get(activeAppearance)),
+      alphaMap: alphaMap(),
+      flipbook: flipbook(),
+      rotation: (_k = dbg == null ? void 0 : dbg.rotation) != null ? _k : rotation(),
+      rotationSpeed: (_l = dbg == null ? void 0 : dbg.rotationSpeed) != null ? _l : rotationSpeed(),
+      rotationSpeedCurve: untrack(() => $.get(activeRotationSpeedCurve)),
+      geometry: untrack(() => $.get(activeGeometry)),
+      orientToDirection: untrack(() => $.get(activeOrientToDirection)),
+      orientAxis: (_m = dbg == null ? void 0 : dbg.orientAxis) != null ? _m : orientAxis(),
+      stretchBySpeed: (_n = dbg == null ? void 0 : dbg.stretchBySpeed) != null ? _n : stretchBySpeed(),
+      lighting: untrack(() => $.get(activeLighting)),
+      shadow: untrack(() => $.get(activeShadow)),
+      blending: (_o = dbg == null ? void 0 : dbg.blending) != null ? _o : blending(),
+      intensity: (_p = dbg == null ? void 0 : dbg.intensity) != null ? _p : intensity(),
+      position: (_q = dbg == null ? void 0 : dbg.position) != null ? _q : position(),
+      autoStart: (_r = dbg == null ? void 0 : dbg.autoStart) != null ? _r : autoStart(),
+      delay: (_s = dbg == null ? void 0 : dbg.delay) != null ? _s : delay(),
+      emitCount: (_t = dbg == null ? void 0 : dbg.emitCount) != null ? _t : emitCount(),
+      emitterShape: (_u = dbg == null ? void 0 : dbg.emitterShape) != null ? _u : emitterShape(),
+      emitterRadius: (_v = dbg == null ? void 0 : dbg.emitterRadius) != null ? _v : emitterRadius(),
+      emitterAngle: (_w = dbg == null ? void 0 : dbg.emitterAngle) != null ? _w : emitterAngle(),
+      emitterHeight: (_x = dbg == null ? void 0 : dbg.emitterHeight) != null ? _x : emitterHeight(),
+      emitterSurfaceOnly: (_y = dbg == null ? void 0 : dbg.emitterSurfaceOnly) != null ? _y : emitterSurfaceOnly(),
+      emitterDirection: (_z = dbg == null ? void 0 : dbg.emitterDirection) != null ? _z : emitterDirection(),
+      turbulence: (_A = dbg == null ? void 0 : dbg.turbulence) != null ? _A : turbulence(),
+      attractors: (_B = dbg == null ? void 0 : dbg.attractors) != null ? _B : attractors(),
+      attractToCenter: (_C = dbg == null ? void 0 : dbg.attractToCenter) != null ? _C : attractToCenter(),
+      startPositionAsDirection: (_D = dbg == null ? void 0 : dbg.startPositionAsDirection) != null ? _D : startPositionAsDirection(),
+      softParticles: (_E = dbg == null ? void 0 : dbg.softParticles) != null ? _E : softParticles(),
+      softDistance: (_F = dbg == null ? void 0 : dbg.softDistance) != null ? _F : softDistance(),
+      collision: (_G = dbg == null ? void 0 : dbg.collision) != null ? _G : collision(),
+      backdropNode: backdropNode(),
+      opacityNode: opacityNode(),
+      colorNode: colorNode(),
+      alphaTestNode: alphaTestNode(),
+      castShadowNode: castShadowNode(),
+      depthTest: (_H = dbg == null ? void 0 : dbg.depthTest) != null ? _H : depthTest(),
+      renderOrder: (_I = dbg == null ? void 0 : dbg.renderOrder) != null ? _I : renderOrder(),
+      curveTexturePath: curveTexturePath()
+    };
+  }
+  function createSystem() {
+    const r = renderer;
+    if (!r) return null;
+    return new VFXParticleSystem(r, buildOptions());
+  }
+  function destroySystem() {
+    if (!_system) return;
+    if (name()) {
+      coreStore.getState().unregisterParticles(name());
+    }
+    _system.dispose();
+    _system = null;
+    _renderObject = null;
+    $.set(renderObjectForTemplate, null);
+    $.set(isWebGPUForTemplate, false);
+  }
+  function initSystem() {
+    const oldSystem = _system;
+    if (oldSystem) {
+      oldSystem.initialized = false;
+      if (name()) {
+        coreStore.getState().unregisterParticles(name());
+      }
+    }
+    _system = null;
+    _renderObject = null;
+    if (!renderer) {
+      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;
+    _renderObject = newSystem.renderObject;
+    newSystem.init();
+    if (name()) {
+      coreStore.getState().registerParticles(name(), {
+        spawn: (x = 0, y = 0, z = 0, count = 20, overrides = null) => {
+          const [px, py, pz] = newSystem.position;
+          newSystem.spawn(px + x, py + y, pz + z, count, overrides);
+        },
+        start: () => {
+          newSystem.start();
+          _emitting = true;
+        },
+        stop: () => {
+          newSystem.stop();
+          _emitting = false;
+        },
+        get isEmitting() {
+          return _emitting;
+        },
+        clear: () => newSystem.clear(),
+        uniforms: newSystem.uniforms
+      });
+    }
+    if (debug()) {
+      initDebugPanel();
+    }
+    $.set(isWebGPUForTemplate, true);
+    $.set(renderObjectForTemplate, newSystem.renderObject, true);
+  }
+  function handleDebugUpdate(newValues) {
+    var _a2, _b2, _c2, _d2, _e, _f, _g, _h;
+    debugValues = __spreadValues(__spreadValues({}, debugValues), newValues);
+    if (!_system) return;
+    if ("colorStart" in newValues && newValues.colorStart) {
+      const currentColorEnd = debugValues == null ? void 0 : debugValues.colorEnd;
+      if (!currentColorEnd) {
+        newValues = __spreadProps(__spreadValues({}, newValues), { colorEnd: null });
+      }
+    }
+    if ("colorEnd" in newValues && !newValues.colorEnd) {
+      newValues = __spreadProps(__spreadValues({}, newValues), {
+        colorEnd: null,
+        colorStart: (_b2 = (_a2 = newValues.colorStart) != null ? _a2 : debugValues == null ? void 0 : debugValues.colorStart) != null ? _b2 : ["#ffffff"]
+      });
+    }
+    updateUniformsPartial(_system.uniforms, newValues);
+    if ("fadeSizeCurve" in newValues) {
+      $.set(activeFadeSizeCurve, newValues.fadeSizeCurve, true);
+    }
+    if ("fadeOpacityCurve" in newValues) {
+      $.set(activeFadeOpacityCurve, newValues.fadeOpacityCurve, true);
+    }
+    if ("velocityCurve" in newValues) {
+      $.set(activeVelocityCurve, newValues.velocityCurve, true);
+    }
+    if ("rotationSpeedCurve" in newValues) {
+      $.set(activeRotationSpeedCurve, newValues.rotationSpeedCurve, true);
+    }
+    if ("turbulence" in newValues) {
+      _system.setTurbulenceSpeed((_d2 = (_c2 = newValues.turbulence) == null ? void 0 : _c2.speed) != null ? _d2 : 1);
+    }
+    const newFeatures = resolveFeatures(debugValues);
+    if (newFeatures.needsRotation !== $.get(activeNeedsRotation)) {
+      $.set(activeNeedsRotation, newFeatures.needsRotation, true);
+    }
+    if (newFeatures.needsPerParticleColor !== $.get(activeNeedsPerParticleColor)) {
+      $.set(activeNeedsPerParticleColor, newFeatures.needsPerParticleColor, true);
+    }
+    if (newFeatures.turbulence !== $.get(activeTurbulence)) {
+      $.set(activeTurbulence, newFeatures.turbulence, true);
+    }
+    if (newFeatures.attractors !== $.get(activeAttractors)) {
+      $.set(activeAttractors, newFeatures.attractors, true);
+    }
+    if (newFeatures.collision !== $.get(activeCollision)) {
+      $.set(activeCollision, newFeatures.collision, true);
+    }
+    if (newValues.position) {
+      _system.setPosition(newValues.position);
+    }
+    if ("delay" in newValues) _system.setDelay((_e = newValues.delay) != null ? _e : 0);
+    if ("emitCount" in newValues) _system.setEmitCount((_f = newValues.emitCount) != null ? _f : 1);
+    if (newValues.autoStart !== void 0) {
+      _emitting = newValues.autoStart;
+    }
+    if (_system.material && newValues.blending !== void 0) {
+      _system.material.blending = newValues.blending;
+      _system.material.needsUpdate = true;
+    }
+    if (newValues.maxParticles !== void 0 && newValues.maxParticles !== $.get(activeMaxParticles)) {
+      $.set(activeMaxParticles, newValues.maxParticles, true);
+      _system.initialized = false;
+      _system.nextIndex = 0;
+    }
+    if (newValues.lighting !== void 0 && newValues.lighting !== $.get(activeLighting)) {
+      $.set(activeLighting, newValues.lighting, true);
+    }
+    if (newValues.appearance !== void 0 && newValues.appearance !== $.get(activeAppearance)) {
+      $.set(activeAppearance, newValues.appearance, true);
+    }
+    if (newValues.orientToDirection !== void 0 && newValues.orientToDirection !== $.get(activeOrientToDirection)) {
+      $.set(activeOrientToDirection, newValues.orientToDirection, true);
+    }
+    if (newValues.shadow !== void 0 && newValues.shadow !== $.get(activeShadow)) {
+      $.set(activeShadow, newValues.shadow, true);
+    }
+    if ("geometryType" in newValues || "geometryArgs" in newValues) {
+      const geoType = (_g = newValues.geometryType) != null ? _g : prevGeometryType;
+      const geoArgs = (_h = newValues.geometryArgs) != null ? _h : prevGeometryArgs;
+      const geoTypeChanged = "geometryType" in newValues && geoType !== prevGeometryType;
+      const geoArgsChanged = "geometryArgs" in newValues && JSON.stringify(geoArgs) !== JSON.stringify(prevGeometryArgs);
+      if (geoTypeChanged || geoArgsChanged) {
+        prevGeometryType = geoType;
+        prevGeometryArgs = geoArgs;
+        import("debug-vfx").then((mod) => {
+          const { createGeometry, GeometryType } = mod;
+          if (geoType === GeometryType.NONE || !geoType) {
+            if ($.get(activeGeometry) !== null && !geometry()) {
+              $.get(activeGeometry).dispose();
+            }
+            $.set(activeGeometry, null);
+          } else {
+            const newGeometry = createGeometry(geoType, geoArgs);
+            if (newGeometry) {
+              if ($.get(activeGeometry) !== null && $.get(activeGeometry) !== geometry()) {
+                $.get(activeGeometry).dispose();
+              }
+              $.set(activeGeometry, newGeometry, true);
+            }
+          }
+        });
+      }
+    }
+  }
+  function initDebugPanel() {
+    import("debug-vfx").then((mod) => {
+      const { renderDebugPanel, detectGeometryTypeAndArgs } = mod;
+      if (!debugValues) {
+        const initialValues = __spreadValues({
+          name: name(),
+          maxParticles: maxParticles(),
+          size: size(),
+          colorStart: colorStart(),
+          colorEnd: colorEnd(),
+          fadeSize: fadeSize(),
+          fadeSizeCurve: fadeSizeCurve() || null,
+          fadeOpacity: fadeOpacity(),
+          fadeOpacityCurve: fadeOpacityCurve() || null,
+          velocityCurve: velocityCurve() || null,
+          gravity: gravity(),
+          lifetime: lifetime(),
+          direction: direction(),
+          startPosition: startPosition(),
+          startPositionAsDirection: startPositionAsDirection(),
+          speed: speed(),
+          friction: friction(),
+          appearance: appearance(),
+          rotation: rotation(),
+          rotationSpeed: rotationSpeed(),
+          rotationSpeedCurve: rotationSpeedCurve() || null,
+          orientToDirection: orientToDirection(),
+          orientAxis: orientAxis(),
+          stretchBySpeed: stretchBySpeed() || null,
+          lighting: lighting(),
+          shadow: shadow(),
+          blending: blending(),
+          intensity: intensity(),
+          position: position(),
+          autoStart: autoStart(),
+          delay: delay(),
+          emitCount: emitCount(),
+          emitterShape: emitterShape(),
+          emitterRadius: emitterRadius(),
+          emitterAngle: emitterAngle(),
+          emitterHeight: emitterHeight(),
+          emitterSurfaceOnly: emitterSurfaceOnly(),
+          emitterDirection: emitterDirection(),
+          turbulence: turbulence(),
+          attractToCenter: attractToCenter(),
+          softParticles: softParticles(),
+          softDistance: softDistance(),
+          collision: collision()
+        }, detectGeometryTypeAndArgs(geometry()));
+        debugValues = initialValues;
+        prevGeometryType = initialValues.geometryType;
+        prevGeometryArgs = initialValues.geometryArgs;
+      }
+      renderDebugPanel(debugValues, handleDebugUpdate, "threlte");
+    });
+  }
+  $.user_effect(() => {
+    const _deps = [
+      maxParticles(),
+      lighting(),
+      appearance(),
+      orientToDirection(),
+      geometry(),
+      shadow(),
+      fadeSizeCurve(),
+      fadeOpacityCurve(),
+      velocityCurve(),
+      rotationSpeedCurve(),
+      colorStart().length,
+      colorEnd(),
+      rotation(),
+      rotationSpeed(),
+      turbulence(),
+      attractors(),
+      collision()
+    ];
+    if (debug()) return;
+    untrack(() => {
+      var _a2, _b2, _c2, _d2;
+      $.set(activeMaxParticles, maxParticles());
+      $.set(activeLighting, lighting(), true);
+      $.set(activeAppearance, appearance(), true);
+      $.set(activeOrientToDirection, orientToDirection());
+      $.set(activeGeometry, geometry());
+      $.set(activeShadow, shadow());
+      $.set(activeFadeSizeCurve, fadeSizeCurve());
+      $.set(activeFadeOpacityCurve, fadeOpacityCurve());
+      $.set(activeVelocityCurve, velocityCurve());
+      $.set(activeRotationSpeedCurve, rotationSpeedCurve());
+      $.set(activeNeedsPerParticleColor, colorStart().length > 1 || colorEnd() !== null, true);
+      $.set(activeNeedsRotation, isNonDefaultRotation(rotation()) || isNonDefaultRotation(rotationSpeed()), true);
+      $.set(activeTurbulence, turbulence() !== null && ((_b2 = (_a2 = turbulence()) == null ? void 0 : _a2.intensity) != null ? _b2 : 0) > 0, true);
+      $.set(activeAttractors, attractors() !== null && ((_d2 = (_c2 = attractors()) == null ? void 0 : _c2.length) != null ? _d2 : 0) > 0, true);
+      $.set(activeCollision, collision() !== null);
+    });
+  });
+  $.user_effect(() => {
+    const _deps = [
+      $.get(activeMaxParticles),
+      $.get(activeLighting),
+      $.get(activeAppearance),
+      $.get(activeOrientToDirection),
+      $.get(activeGeometry),
+      $.get(activeShadow),
+      $.get(activeNeedsPerParticleColor),
+      $.get(activeNeedsRotation),
+      $.get(activeTurbulence),
+      $.get(activeAttractors),
+      $.get(activeCollision),
+      $.get(activeFadeSizeCurve),
+      $.get(activeFadeOpacityCurve),
+      $.get(activeVelocityCurve),
+      $.get(activeRotationSpeedCurve)
+    ];
+    if (!mounted) return;
+    untrack(() => {
+      if (!_isWebGPU) return;
+      initSystem();
+    });
+  });
+  $.user_effect(() => {
+    const _deps = [
+      position(),
+      size(),
+      fadeSize(),
+      fadeOpacity(),
+      gravity(),
+      friction(),
+      speed(),
+      lifetime(),
+      direction(),
+      rotation(),
+      rotationSpeed(),
+      intensity(),
+      colorStart(),
+      colorEnd(),
+      collision(),
+      emitterShape(),
+      emitterRadius(),
+      emitterAngle(),
+      emitterHeight(),
+      emitterSurfaceOnly(),
+      emitterDirection(),
+      turbulence(),
+      startPosition(),
+      attractors(),
+      attractToCenter(),
+      startPositionAsDirection(),
+      softParticles(),
+      softDistance(),
+      orientAxis(),
+      stretchBySpeed(),
+      delay(),
+      emitCount()
+    ];
+    if (debug()) return;
+    untrack(() => {
+      var _a2, _b2;
+      if (!_system) return;
+      _system.setPosition(position());
+      _system.setDelay(delay());
+      _system.setEmitCount(emitCount());
+      _system.setTurbulenceSpeed((_b2 = (_a2 = turbulence()) == null ? void 0 : _a2.speed) != null ? _b2 : 1);
+      const normalized = normalizeProps({
+        size: size(),
+        speed: speed(),
+        fadeSize: fadeSize(),
+        fadeOpacity: fadeOpacity(),
+        lifetime: lifetime(),
+        gravity: gravity(),
+        direction: direction(),
+        startPosition: startPosition(),
+        rotation: rotation(),
+        rotationSpeed: rotationSpeed(),
+        friction: friction(),
+        intensity: intensity(),
+        colorStart: colorStart(),
+        colorEnd: colorEnd(),
+        emitterShape: emitterShape(),
+        emitterRadius: emitterRadius(),
+        emitterAngle: emitterAngle(),
+        emitterHeight: emitterHeight(),
+        emitterSurfaceOnly: emitterSurfaceOnly(),
+        emitterDirection: emitterDirection(),
+        turbulence: turbulence(),
+        attractors: attractors(),
+        attractToCenter: attractToCenter(),
+        startPositionAsDirection: startPositionAsDirection(),
+        softParticles: softParticles(),
+        softDistance: softDistance(),
+        collision: collision(),
+        orientAxis: orientAxis(),
+        stretchBySpeed: stretchBySpeed()
+      });
+      updateUniforms(_system.uniforms, normalized);
+    });
+  });
+  useTask((delta) => {
+    if (!_system || !_system.initialized) return;
+    _system.update(delta);
+    if (_emitting) {
+      _system.autoEmit(delta);
+    }
+  });
+  onMount(() => {
+    mounted = true;
+    initSystem();
+  });
+  onDestroy(() => {
+    mounted = false;
+    if (debug()) {
+      import("debug-vfx").then((mod) => {
+        mod.destroyDebugPanel();
+      });
+    }
+    destroySystem();
+  });
+  function spawn(x = 0, y = 0, z = 0, count = 20, overrides = null) {
+    if (!_system) return;
+    const [px, py, pz] = _system.position;
+    _system.spawn(px + x, py + y, pz + z, count, overrides);
+  }
+  function start() {
+    if (!_system) return;
+    _system.start();
+    _emitting = true;
+  }
+  function stop() {
+    if (!_system) return;
+    _system.stop();
+    _emitting = false;
+  }
+  function clear() {
+    _system == null ? void 0 : _system.clear();
+  }
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      T($$anchor2, {
+        get is() {
+          return $.get(renderObjectForTemplate);
+        }
+      });
+    };
+    $.if(node, ($$render) => {
+      if ($.get(isWebGPUForTemplate) && $.get(renderObjectForTemplate)) $$render(consequent);
+    });
+  }
+  $.append($$anchor, fragment);
+  return $.pop({ spawn, start, stop, clear });
+}
+
+// src/VFXEmitter.svelte
+import "svelte/internal/disclose-version";
+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";
+function VFXEmitter($$anchor, $$props) {
+  $2.push($$props, true);
+  const worldPos = new Vector3();
+  const worldQuat = new Quaternion();
+  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(),
+    autoStart: autoStart(),
+    loop: loop(),
+    localDirection: localDirection(),
+    direction: direction(),
+    overrides: overrides(),
+    onEmit: onEmit()
+  });
+  function getParticleSystem() {
+    if (particlesRef()) {
+      return particlesRef().value || particlesRef();
+    }
+    return name() ? coreStore2.getState().getParticles(name()) : void 0;
+  }
+  $2.user_effect(() => {
+    const _deps = [
+      emitCount(),
+      delay(),
+      autoStart(),
+      loop(),
+      localDirection(),
+      direction(),
+      overrides(),
+      onEmit()
+    ];
+    controller.updateOptions({
+      emitCount: emitCount(),
+      delay: delay(),
+      autoStart: autoStart(),
+      loop: loop(),
+      localDirection: localDirection(),
+      direction: direction(),
+      overrides: overrides(),
+      onEmit: onEmit()
+    });
+  });
+  function checkWebGPU() {
+    if (renderer && isWebGPUBackend2(renderer)) {
+      $2.set(isWebGPU, true);
+      const system = getParticleSystem();
+      if (system) controller.setSystem(system);
+    }
+  }
+  onMount2(() => {
+    checkWebGPU();
+  });
+  useTask2((delta) => {
+    if (!$2.get(isWebGPU)) return;
+    if (!controller.getSystem()) {
+      const system = getParticleSystem();
+      if (system) controller.setSystem(system);
+    }
+    if (!$2.get(groupRef)) return;
+    $2.get(groupRef).getWorldPosition(worldPos);
+    $2.get(groupRef).getWorldQuaternion(worldQuat);
+    controller.update(delta, worldPos, worldQuat);
+  });
+  function emit(emitOverrides = null) {
+    if (!$2.get(groupRef)) return false;
+    if (!controller.getSystem()) {
+      const system = getParticleSystem();
+      if (system) controller.setSystem(system);
+    }
+    if (!controller.getSystem()) {
+      if (name()) {
+        console.warn(`VFXEmitter: No particle system found for name "${name()}"`);
+      }
+      return false;
+    }
+    $2.get(groupRef).getWorldPosition(worldPos);
+    $2.get(groupRef).getWorldQuaternion(worldQuat);
+    return controller.emitAtPosition(worldPos, worldQuat, emitOverrides);
+  }
+  function burst(count) {
+    if (!$2.get(groupRef)) return false;
+    if (!controller.getSystem()) {
+      const system = getParticleSystem();
+      if (system) controller.setSystem(system);
+    }
+    if (!controller.getSystem()) return false;
+    $2.get(groupRef).getWorldPosition(worldPos);
+    $2.get(groupRef).getWorldQuaternion(worldQuat);
+    return controller.burst(count, worldPos, worldQuat);
+  }
+  function start() {
+    controller.start();
+  }
+  function stop() {
+    controller.stop();
+  }
+  var fragment = $2.comment();
+  var node = $2.first_child(fragment);
+  $2.component(node, () => T2.Group, ($$anchor2, $$component) => {
+    $$component($$anchor2, {
+      get position() {
+        return position();
+      },
+      get ref() {
+        return $2.get(groupRef);
+      },
+      set ref($$value) {
+        $2.set(groupRef, $$value, true);
+      },
+      children: ($$anchor3, $$slotProps) => {
+        var fragment_1 = $2.comment();
+        var node_1 = $2.first_child(fragment_1);
+        {
+          var consequent = ($$anchor4) => {
+            var fragment_2 = $2.comment();
+            var node_2 = $2.first_child(fragment_2);
+            $2.snippet(node_2, () => $$props.children);
+            $2.append($$anchor4, fragment_2);
+          };
+          $2.if(node_1, ($$render) => {
+            if ($$props.children) $$render(consequent);
+          });
+        }
+        $2.append($$anchor3, fragment_1);
+      },
+      $$slots: { default: true }
+    });
+  });
+  $2.append($$anchor, fragment);
+  return $2.pop({ emit, burst, start, stop });
+}
+
 // src/useVFXEmitter.ts
-import { useThrelte } from "@threlte/core";
-import { coreStore, isWebGPUBackend } from "core-vfx";
+import { useThrelte as useThrelte3 } from "@threlte/core";
+import { coreStore as coreStore3, isWebGPUBackend as isWebGPUBackend3 } from "core-vfx";
 function useVFXEmitter(name) {
-  const { renderer } = useThrelte();
+  const { renderer } = useThrelte3();
   const checkWebGPU = () => {
-    return renderer && isWebGPUBackend(renderer);
+    return renderer && isWebGPUBackend3(renderer);
   };
-  const getParticles = () => coreStore.getState().getParticles(name);
+  const getParticles = () => coreStore3.getState().getParticles(name);
   const emit = (position = [0, 0, 0], count = 20, overrides = null) => {
     if (!checkWebGPU()) return false;
     const [x, y, z] = position;
-    return coreStore.getState().emit(name, { x, y, z, count, overrides });
+    return coreStore3.getState().emit(name, { x, y, z, count, overrides });
   };
   const burst = (position = [0, 0, 0], count = 50, overrides = null) => {
     if (!checkWebGPU()) return false;
     const [x, y, z] = position;
-    return coreStore.getState().emit(name, { x, y, z, count, overrides });
+    return coreStore3.getState().emit(name, { x, y, z, count, overrides });
   };
   const start = () => {
     if (!checkWebGPU()) return false;
-    return coreStore.getState().start(name);
+    return coreStore3.getState().start(name);
   };
   const stop = () => {
     if (!checkWebGPU()) return false;
-    return coreStore.getState().stop(name);
+    return coreStore3.getState().stop(name);
   };
   const clear = () => {
     if (!checkWebGPU()) return false;
-    return coreStore.getState().clear(name);
+    return coreStore3.getState().clear(name);
   };
   const isEmitting = () => {
     var _a;
@@ -54,60 +763,62 @@ function useVFXEmitter(name) {
 }
 
 // src/svelte-store.ts
-import { coreStore as coreStore2 } from "core-vfx";
+import { coreStore as coreStore4 } from "core-vfx";
 function useVFXStore(selector) {
   const pick = selector != null ? selector : ((s) => s);
   return {
     subscribe(run) {
-      run(pick(coreStore2.getState()));
-      const unsubscribe = coreStore2.subscribe((state) => {
-        run(pick(state));
+      run(pick(coreStore4.getState()));
+      const unsubscribe = coreStore4.subscribe((state3) => {
+        run(pick(state3));
       });
       return unsubscribe;
     }
   };
 }
-useVFXStore.getState = coreStore2.getState;
-useVFXStore.setState = coreStore2.setState;
-useVFXStore.subscribe = coreStore2.subscribe;
+useVFXStore.getState = coreStore4.getState;
+useVFXStore.setState = coreStore4.setState;
+useVFXStore.subscribe = coreStore4.subscribe;
 
 // src/index.ts
 import {
-  Appearance,
-  Blending,
-  EmitterShape,
+  Appearance as Appearance2,
+  Blending as Blending2,
+  EmitterShape as EmitterShape2,
   AttractorType,
   Easing,
-  Lighting,
+  Lighting as Lighting2,
   bakeCurveToArray,
   createCombinedCurveTexture,
   buildCurveTextureBin,
   CurveChannel
 } from "core-vfx";
 import {
-  VFXParticleSystem,
-  EmitterController,
-  isWebGPUBackend as isWebGPUBackend2,
-  isNonDefaultRotation,
-  normalizeProps,
+  VFXParticleSystem as VFXParticleSystem2,
+  EmitterController as EmitterController2,
+  isWebGPUBackend as isWebGPUBackend4,
+  isNonDefaultRotation as isNonDefaultRotation2,
+  normalizeProps as normalizeProps2,
   resolveCurveTexture
 } from "core-vfx";
 export {
-  Appearance,
+  Appearance2 as Appearance,
   AttractorType,
-  Blending,
+  Blending2 as Blending,
   CurveChannel,
   Easing,
-  EmitterController,
-  EmitterShape,
-  Lighting,
-  VFXParticleSystem,
+  EmitterController2 as EmitterController,
+  EmitterShape2 as EmitterShape,
+  Lighting2 as Lighting,
+  VFXEmitter,
+  VFXParticleSystem2 as VFXParticleSystem,
+  VFXParticles,
   bakeCurveToArray,
   buildCurveTextureBin,
   createCombinedCurveTexture,
-  isNonDefaultRotation,
-  isWebGPUBackend2 as isWebGPUBackend,
-  normalizeProps,
+  isNonDefaultRotation2 as isNonDefaultRotation,
+  isWebGPUBackend4 as isWebGPUBackend,
+  normalizeProps2 as normalizeProps,
   resolveCurveTexture,
   useVFXEmitter,
   useVFXStore

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "threlte-vfx",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
   "type": "module",
   "svelte": "./dist/index.js",