tres-vfx 0.0.10 → 0.2.0

package/dist/index.js

@@ -1,2 +1,1046 @@
+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 prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/VFXParticles.ts
+import {
+  defineComponent,
+  ref,
+  watch,
+  onMounted,
+  onUnmounted,
+  h,
+  shallowRef
+} from "vue";
+import { useLoop, useTresContext } from "@tresjs/core";
+import { coreStore } from "core-vfx";
+import {
+  Appearance,
+  Blending,
+  EmitterShape,
+  Lighting,
+  VFXParticleSystem,
+  isWebGPUBackend,
+  isNonDefaultRotation,
+  normalizeProps,
+  updateUniforms,
+  updateUniformsPartial,
+  resolveFeatures
+} from "core-vfx";
+var warnedWebGL = false;
+var VFXParticles = defineComponent({
+  name: "VFXParticles",
+  props: {
+    name: { type: String, default: void 0 },
+    debug: { type: Boolean, default: false },
+    maxParticles: { type: Number, default: 1e4 },
+    size: {
+      type: null,
+      default: () => [0.1, 0.3]
+    },
+    colorStart: {
+      type: Array,
+      default: () => ["#ffffff"]
+    },
+    colorEnd: {
+      type: null,
+      default: null
+    },
+    fadeSize: {
+      type: null,
+      default: () => [1, 0]
+    },
+    fadeSizeCurve: { type: null, default: null },
+    fadeOpacity: {
+      type: null,
+      default: () => [1, 0]
+    },
+    fadeOpacityCurve: { type: null, default: null },
+    velocityCurve: { type: null, default: null },
+    gravity: {
+      type: null,
+      default: () => [0, 0, 0]
+    },
+    lifetime: {
+      type: null,
+      default: () => [1, 2]
+    },
+    direction: {
+      type: null,
+      default: () => [
+        [-1, 1],
+        [0, 1],
+        [-1, 1]
+      ]
+    },
+    startPosition: {
+      type: null,
+      default: () => [
+        [0, 0],
+        [0, 0],
+        [0, 0]
+      ]
+    },
+    speed: {
+      type: null,
+      default: () => [0.1, 0.1]
+    },
+    friction: {
+      type: Object,
+      default: () => ({ intensity: 0, easing: "linear" })
+    },
+    appearance: {
+      type: null,
+      default: Appearance.GRADIENT
+    },
+    alphaMap: { type: Object, default: null },
+    flipbook: { type: Object, default: null },
+    rotation: {
+      type: null,
+      default: () => [0, 0]
+    },
+    rotationSpeed: {
+      type: null,
+      default: () => [0, 0]
+    },
+    rotationSpeedCurve: { type: null, default: null },
+    geometry: {
+      type: Object,
+      default: null
+    },
+    orientToDirection: { type: Boolean, default: false },
+    orientAxis: { type: String, default: "z" },
+    stretchBySpeed: {
+      type: Object,
+      default: null
+    },
+    lighting: {
+      type: null,
+      default: Lighting.STANDARD
+    },
+    shadow: { type: Boolean, default: false },
+    blending: {
+      type: null,
+      default: Blending.NORMAL
+    },
+    intensity: { type: Number, default: 1 },
+    position: {
+      type: null,
+      default: () => [0, 0, 0]
+    },
+    autoStart: { type: Boolean, default: true },
+    delay: { type: Number, default: 0 },
+    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 },
+    emitCount: { type: Number, default: 1 },
+    emitterShape: {
+      type: null,
+      default: EmitterShape.BOX
+    },
+    emitterRadius: {
+      type: null,
+      default: () => [0, 1]
+    },
+    emitterAngle: { type: Number, default: Math.PI / 4 },
+    emitterHeight: {
+      type: null,
+      default: () => [0, 1]
+    },
+    emitterSurfaceOnly: { type: Boolean, default: false },
+    emitterDirection: {
+      type: null,
+      default: () => [0, 1, 0]
+    },
+    turbulence: {
+      type: Object,
+      default: null
+    },
+    attractors: {
+      type: null,
+      default: null
+    },
+    attractToCenter: { type: Boolean, default: false },
+    startPositionAsDirection: { type: Boolean, default: false },
+    softParticles: { type: Boolean, default: false },
+    softDistance: { type: Number, default: 0.5 },
+    collision: {
+      type: Object,
+      default: null
+    },
+    curveTexturePath: { type: null, default: null },
+    depthTest: { type: Boolean, default: true },
+    renderOrder: { type: Number, default: 0 }
+  },
+  setup(props, { expose, slots }) {
+    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);
+    const activeAppearance = ref(props.appearance);
+    const activeOrientToDirection = ref(props.orientToDirection);
+    const activeGeometry = shallowRef(props.geometry);
+    const activeShadow = ref(props.shadow);
+    const activeFadeSizeCurve = shallowRef(props.fadeSizeCurve);
+    const activeFadeOpacityCurve = shallowRef(props.fadeOpacityCurve);
+    const activeVelocityCurve = shallowRef(props.velocityCurve);
+    const activeRotationSpeedCurve = shallowRef(props.rotationSpeedCurve);
+    const activeTurbulence = ref(
+      props.turbulence !== null && ((_b = (_a = props.turbulence) == null ? void 0 : _a.intensity) != null ? _b : 0) > 0
+    );
+    const activeAttractors = ref(
+      props.attractors !== null && ((_d = (_c = props.attractors) == null ? void 0 : _c.length) != null ? _d : 0) > 0
+    );
+    const activeCollision = ref(props.collision !== null);
+    const activeNeedsPerParticleColor = ref(
+      props.colorStart.length > 1 || props.colorEnd !== null
+    );
+    const activeNeedsRotation = ref(
+      isNonDefaultRotation(props.rotation) || isNonDefaultRotation(props.rotationSpeed)
+    );
+    const prevGeometryTypeRef = ref(null);
+    const prevGeometryArgsRef = ref(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 = props.debug ? debugValuesRef.value : null;
+      return {
+        maxParticles: activeMaxParticles.value,
+        size: (_a2 = dbg == null ? void 0 : dbg.size) != null ? _a2 : props.size,
+        colorStart: (_b2 = dbg == null ? void 0 : dbg.colorStart) != null ? _b2 : props.colorStart,
+        colorEnd: (dbg == null ? void 0 : dbg.colorEnd) !== void 0 ? dbg.colorEnd : props.colorEnd,
+        fadeSize: (_c2 = dbg == null ? void 0 : dbg.fadeSize) != null ? _c2 : props.fadeSize,
+        fadeSizeCurve: activeFadeSizeCurve.value,
+        fadeOpacity: (_d2 = dbg == null ? void 0 : dbg.fadeOpacity) != null ? _d2 : props.fadeOpacity,
+        fadeOpacityCurve: activeFadeOpacityCurve.value,
+        velocityCurve: activeVelocityCurve.value,
+        gravity: (_e = dbg == null ? void 0 : dbg.gravity) != null ? _e : props.gravity,
+        lifetime: (_f = dbg == null ? void 0 : dbg.lifetime) != null ? _f : props.lifetime,
+        direction: (_g = dbg == null ? void 0 : dbg.direction) != null ? _g : props.direction,
+        startPosition: (_h = dbg == null ? void 0 : dbg.startPosition) != null ? _h : props.startPosition,
+        speed: (_i = dbg == null ? void 0 : dbg.speed) != null ? _i : props.speed,
+        friction: (_j = dbg == null ? void 0 : dbg.friction) != null ? _j : props.friction,
+        appearance: activeAppearance.value,
+        alphaMap: props.alphaMap,
+        flipbook: props.flipbook,
+        rotation: (_k = dbg == null ? void 0 : dbg.rotation) != null ? _k : props.rotation,
+        rotationSpeed: (_l = dbg == null ? void 0 : dbg.rotationSpeed) != null ? _l : props.rotationSpeed,
+        rotationSpeedCurve: activeRotationSpeedCurve.value,
+        geometry: activeGeometry.value,
+        orientToDirection: activeOrientToDirection.value,
+        orientAxis: (_m = dbg == null ? void 0 : dbg.orientAxis) != null ? _m : props.orientAxis,
+        stretchBySpeed: (_n = dbg == null ? void 0 : dbg.stretchBySpeed) != null ? _n : props.stretchBySpeed,
+        lighting: activeLighting.value,
+        shadow: activeShadow.value,
+        blending: (_o = dbg == null ? void 0 : dbg.blending) != null ? _o : props.blending,
+        intensity: (_p = dbg == null ? void 0 : dbg.intensity) != null ? _p : props.intensity,
+        position: (_q = dbg == null ? void 0 : dbg.position) != null ? _q : props.position,
+        autoStart: (_r = dbg == null ? void 0 : dbg.autoStart) != null ? _r : props.autoStart,
+        delay: (_s = dbg == null ? void 0 : dbg.delay) != null ? _s : props.delay,
+        emitCount: (_t = dbg == null ? void 0 : dbg.emitCount) != null ? _t : props.emitCount,
+        emitterShape: (_u = dbg == null ? void 0 : dbg.emitterShape) != null ? _u : props.emitterShape,
+        emitterRadius: (_v = dbg == null ? void 0 : dbg.emitterRadius) != null ? _v : props.emitterRadius,
+        emitterAngle: (_w = dbg == null ? void 0 : dbg.emitterAngle) != null ? _w : props.emitterAngle,
+        emitterHeight: (_x = dbg == null ? void 0 : dbg.emitterHeight) != null ? _x : props.emitterHeight,
+        emitterSurfaceOnly: (_y = dbg == null ? void 0 : dbg.emitterSurfaceOnly) != null ? _y : props.emitterSurfaceOnly,
+        emitterDirection: (_z = dbg == null ? void 0 : dbg.emitterDirection) != null ? _z : props.emitterDirection,
+        turbulence: (_A = dbg == null ? void 0 : dbg.turbulence) != null ? _A : props.turbulence,
+        attractors: (_B = dbg == null ? void 0 : dbg.attractors) != null ? _B : props.attractors,
+        attractToCenter: (_C = dbg == null ? void 0 : dbg.attractToCenter) != null ? _C : props.attractToCenter,
+        startPositionAsDirection: (_D = dbg == null ? void 0 : dbg.startPositionAsDirection) != null ? _D : props.startPositionAsDirection,
+        softParticles: (_E = dbg == null ? void 0 : dbg.softParticles) != null ? _E : props.softParticles,
+        softDistance: (_F = dbg == null ? void 0 : dbg.softDistance) != null ? _F : props.softDistance,
+        collision: (_G = dbg == null ? void 0 : dbg.collision) != null ? _G : props.collision,
+        backdropNode: props.backdropNode,
+        opacityNode: props.opacityNode,
+        colorNode: props.colorNode,
+        alphaTestNode: props.alphaTestNode,
+        castShadowNode: props.castShadowNode,
+        depthTest: (_H = dbg == null ? void 0 : dbg.depthTest) != null ? _H : props.depthTest,
+        renderOrder: (_I = dbg == null ? void 0 : dbg.renderOrder) != null ? _I : props.renderOrder,
+        curveTexturePath: props.curveTexturePath
+      };
+    }
+    function createSystem() {
+      const renderer = rendererCtx.instance;
+      if (!renderer) return null;
+      const system = new VFXParticleSystem(renderer, buildOptions());
+      return system;
+    }
+    function destroySystem() {
+      const system = systemRef.value;
+      if (!system) return;
+      if (props.name) {
+        coreStore.getState().unregisterParticles(props.name);
+      }
+      system.dispose();
+      systemRef.value = null;
+      renderObjectRef.value = null;
+    }
+    function initSystem() {
+      const oldSystem = systemRef.value;
+      if (oldSystem) {
+        oldSystem.initialized = false;
+        if (props.name) {
+          coreStore.getState().unregisterParticles(props.name);
+        }
+      }
+      systemRef.value = null;
+      renderObjectRef.value = null;
+      const renderer = rendererCtx.instance;
+      if (!renderer) {
+        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;
+      renderObjectRef.value = system.renderObject;
+      system.init();
+      if (props.name) {
+        coreStore.getState().registerParticles(props.name, {
+          spawn: (x = 0, y = 0, z = 0, count = 20, overrides = null) => {
+            const [px, py, pz] = system.position;
+            system.spawn(px + x, py + y, pz + z, count, overrides);
+          },
+          start: () => {
+            system.start();
+            emitting.value = true;
+          },
+          stop: () => {
+            system.stop();
+            emitting.value = false;
+          },
+          get isEmitting() {
+            return emitting.value;
+          },
+          clear: () => system.clear(),
+          uniforms: system.uniforms
+        });
+      }
+      if (props.debug) {
+        initDebugPanel();
+      }
+    }
+    function handleDebugUpdate(newValues) {
+      var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j;
+      debugValuesRef.value = __spreadValues(__spreadValues({}, debugValuesRef.value), newValues);
+      const system = systemRef.value;
+      if (!system) return;
+      if ("colorStart" in newValues && newValues.colorStart) {
+        const currentColorEnd = (_a2 = debugValuesRef.value) == null ? void 0 : _a2.colorEnd;
+        if (!currentColorEnd) {
+          newValues = __spreadProps(__spreadValues({}, newValues), { colorEnd: null });
+        }
+      }
+      if ("colorEnd" in newValues && !newValues.colorEnd) {
+        newValues = __spreadProps(__spreadValues({}, newValues), {
+          colorEnd: null,
+          colorStart: (_d2 = (_c2 = newValues.colorStart) != null ? _c2 : (_b2 = debugValuesRef.value) == null ? void 0 : _b2.colorStart) != null ? _d2 : ["#ffffff"]
+        });
+      }
+      updateUniformsPartial(system.uniforms, newValues);
+      if ("fadeSizeCurve" in newValues) {
+        activeFadeSizeCurve.value = newValues.fadeSizeCurve;
+      }
+      if ("fadeOpacityCurve" in newValues) {
+        activeFadeOpacityCurve.value = newValues.fadeOpacityCurve;
+      }
+      if ("velocityCurve" in newValues) {
+        activeVelocityCurve.value = newValues.velocityCurve;
+      }
+      if ("rotationSpeedCurve" in newValues) {
+        activeRotationSpeedCurve.value = newValues.rotationSpeedCurve;
+      }
+      if ("turbulence" in newValues) {
+        system.setTurbulenceSpeed(
+          (_f = (_e = newValues.turbulence) == null ? void 0 : _e.speed) != null ? _f : 1
+        );
+      }
+      const newFeatures = resolveFeatures(
+        debugValuesRef.value
+      );
+      if (newFeatures.needsRotation !== activeNeedsRotation.value) {
+        activeNeedsRotation.value = newFeatures.needsRotation;
+      }
+      if (newFeatures.needsPerParticleColor !== activeNeedsPerParticleColor.value) {
+        activeNeedsPerParticleColor.value = newFeatures.needsPerParticleColor;
+      }
+      if (newFeatures.turbulence !== activeTurbulence.value) {
+        activeTurbulence.value = newFeatures.turbulence;
+      }
+      if (newFeatures.attractors !== activeAttractors.value) {
+        activeAttractors.value = newFeatures.attractors;
+      }
+      if (newFeatures.collision !== activeCollision.value) {
+        activeCollision.value = newFeatures.collision;
+      }
+      if (newValues.position) {
+        system.setPosition(newValues.position);
+      }
+      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) {
+        emitting.value = 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 !== activeMaxParticles.value) {
+        activeMaxParticles.value = newValues.maxParticles;
+        system.initialized = false;
+        system.nextIndex = 0;
+      }
+      if (newValues.lighting !== void 0 && newValues.lighting !== activeLighting.value) {
+        activeLighting.value = newValues.lighting;
+      }
+      if (newValues.appearance !== void 0 && newValues.appearance !== activeAppearance.value) {
+        activeAppearance.value = newValues.appearance;
+      }
+      if (newValues.orientToDirection !== void 0 && newValues.orientToDirection !== activeOrientToDirection.value) {
+        activeOrientToDirection.value = newValues.orientToDirection;
+      }
+      if (newValues.shadow !== void 0 && newValues.shadow !== activeShadow.value) {
+        activeShadow.value = newValues.shadow;
+      }
+      if ("geometryType" in newValues || "geometryArgs" in newValues) {
+        const geoType = (_i = newValues.geometryType) != null ? _i : prevGeometryTypeRef.value;
+        const geoArgs = (_j = newValues.geometryArgs) != null ? _j : prevGeometryArgsRef.value;
+        const geoTypeChanged = "geometryType" in newValues && geoType !== prevGeometryTypeRef.value;
+        const geoArgsChanged = "geometryArgs" in newValues && JSON.stringify(geoArgs) !== JSON.stringify(prevGeometryArgsRef.value);
+        if (geoTypeChanged || geoArgsChanged) {
+          prevGeometryTypeRef.value = geoType;
+          prevGeometryArgsRef.value = geoArgs;
+          import("debug-vfx").then((mod) => {
+            const { createGeometry, GeometryType } = mod;
+            if (geoType === GeometryType.NONE || !geoType) {
+              if (activeGeometry.value !== null && !props.geometry) {
+                activeGeometry.value.dispose();
+              }
+              activeGeometry.value = null;
+            } else {
+              const newGeometry = createGeometry(geoType, geoArgs);
+              if (newGeometry) {
+                if (activeGeometry.value !== null && activeGeometry.value !== props.geometry) {
+                  activeGeometry.value.dispose();
+                }
+                activeGeometry.value = newGeometry;
+              }
+            }
+          });
+        }
+      }
+    }
+    function initDebugPanel() {
+      import("debug-vfx").then((mod) => {
+        const { renderDebugPanel, detectGeometryTypeAndArgs } = mod;
+        if (!debugValuesRef.value) {
+          const initialValues = __spreadValues({
+            name: props.name,
+            maxParticles: props.maxParticles,
+            size: props.size,
+            colorStart: props.colorStart,
+            colorEnd: props.colorEnd,
+            fadeSize: props.fadeSize,
+            fadeSizeCurve: props.fadeSizeCurve || null,
+            fadeOpacity: props.fadeOpacity,
+            fadeOpacityCurve: props.fadeOpacityCurve || null,
+            velocityCurve: props.velocityCurve || null,
+            gravity: props.gravity,
+            lifetime: props.lifetime,
+            direction: props.direction,
+            startPosition: props.startPosition,
+            startPositionAsDirection: props.startPositionAsDirection,
+            speed: props.speed,
+            friction: props.friction,
+            appearance: props.appearance,
+            rotation: props.rotation,
+            rotationSpeed: props.rotationSpeed,
+            rotationSpeedCurve: props.rotationSpeedCurve || null,
+            orientToDirection: props.orientToDirection,
+            orientAxis: props.orientAxis,
+            stretchBySpeed: props.stretchBySpeed || null,
+            lighting: props.lighting,
+            shadow: props.shadow,
+            blending: props.blending,
+            intensity: props.intensity,
+            position: props.position,
+            autoStart: props.autoStart,
+            delay: props.delay,
+            emitCount: props.emitCount,
+            emitterShape: props.emitterShape,
+            emitterRadius: props.emitterRadius,
+            emitterAngle: props.emitterAngle,
+            emitterHeight: props.emitterHeight,
+            emitterSurfaceOnly: props.emitterSurfaceOnly,
+            emitterDirection: props.emitterDirection,
+            turbulence: props.turbulence,
+            attractToCenter: props.attractToCenter,
+            softParticles: props.softParticles,
+            softDistance: props.softDistance,
+            collision: props.collision
+          }, detectGeometryTypeAndArgs(props.geometry));
+          debugValuesRef.value = initialValues;
+          prevGeometryTypeRef.value = initialValues.geometryType;
+          prevGeometryArgsRef.value = initialValues.geometryArgs;
+        }
+        renderDebugPanel(debugValuesRef.value, handleDebugUpdate, "tres");
+      });
+    }
+    watch(
+      () => [
+        props.maxParticles,
+        props.lighting,
+        props.appearance,
+        props.orientToDirection,
+        props.geometry,
+        props.shadow,
+        props.fadeSizeCurve,
+        props.fadeOpacityCurve,
+        props.velocityCurve,
+        props.rotationSpeedCurve,
+        props.colorStart.length,
+        props.colorEnd,
+        props.rotation,
+        props.rotationSpeed,
+        props.turbulence,
+        props.attractors,
+        props.collision
+      ],
+      () => {
+        var _a2, _b2, _c2, _d2;
+        if (props.debug) return;
+        activeMaxParticles.value = props.maxParticles;
+        activeLighting.value = props.lighting;
+        activeAppearance.value = props.appearance;
+        activeOrientToDirection.value = props.orientToDirection;
+        activeGeometry.value = props.geometry;
+        activeShadow.value = props.shadow;
+        activeFadeSizeCurve.value = props.fadeSizeCurve;
+        activeFadeOpacityCurve.value = props.fadeOpacityCurve;
+        activeVelocityCurve.value = props.velocityCurve;
+        activeRotationSpeedCurve.value = props.rotationSpeedCurve;
+        activeNeedsPerParticleColor.value = props.colorStart.length > 1 || props.colorEnd !== null;
+        activeNeedsRotation.value = isNonDefaultRotation(props.rotation) || isNonDefaultRotation(props.rotationSpeed);
+        activeTurbulence.value = props.turbulence !== null && ((_b2 = (_a2 = props.turbulence) == null ? void 0 : _a2.intensity) != null ? _b2 : 0) > 0;
+        activeAttractors.value = props.attractors !== null && ((_d2 = (_c2 = props.attractors) == null ? void 0 : _c2.length) != null ? _d2 : 0) > 0;
+        activeCollision.value = props.collision !== null;
+      }
+    );
+    watch(
+      [
+        activeMaxParticles,
+        activeLighting,
+        activeAppearance,
+        activeOrientToDirection,
+        activeGeometry,
+        activeShadow,
+        activeNeedsPerParticleColor,
+        activeNeedsRotation,
+        activeTurbulence,
+        activeAttractors,
+        activeCollision,
+        activeFadeSizeCurve,
+        activeFadeOpacityCurve,
+        activeVelocityCurve,
+        activeRotationSpeedCurve
+      ],
+      () => {
+        if (!isWebGPU.value) return;
+        initSystem();
+      }
+    );
+    watch(
+      () => [
+        props.position,
+        props.size,
+        props.fadeSize,
+        props.fadeOpacity,
+        props.gravity,
+        props.friction,
+        props.speed,
+        props.lifetime,
+        props.direction,
+        props.rotation,
+        props.rotationSpeed,
+        props.intensity,
+        props.colorStart,
+        props.colorEnd,
+        props.collision,
+        props.emitterShape,
+        props.emitterRadius,
+        props.emitterAngle,
+        props.emitterHeight,
+        props.emitterSurfaceOnly,
+        props.emitterDirection,
+        props.turbulence,
+        props.startPosition,
+        props.attractors,
+        props.attractToCenter,
+        props.startPositionAsDirection,
+        props.softParticles,
+        props.softDistance,
+        props.orientAxis,
+        props.stretchBySpeed,
+        props.delay,
+        props.emitCount
+      ],
+      () => {
+        var _a2, _b2;
+        if (props.debug) return;
+        const system = systemRef.value;
+        if (!system) return;
+        system.setPosition(props.position);
+        system.setDelay(props.delay);
+        system.setEmitCount(props.emitCount);
+        system.setTurbulenceSpeed((_b2 = (_a2 = props.turbulence) == null ? void 0 : _a2.speed) != null ? _b2 : 1);
+        const normalized = normalizeProps({
+          size: props.size,
+          speed: props.speed,
+          fadeSize: props.fadeSize,
+          fadeOpacity: props.fadeOpacity,
+          lifetime: props.lifetime,
+          gravity: props.gravity,
+          direction: props.direction,
+          startPosition: props.startPosition,
+          rotation: props.rotation,
+          rotationSpeed: props.rotationSpeed,
+          friction: props.friction,
+          intensity: props.intensity,
+          colorStart: props.colorStart,
+          colorEnd: props.colorEnd,
+          emitterShape: props.emitterShape,
+          emitterRadius: props.emitterRadius,
+          emitterAngle: props.emitterAngle,
+          emitterHeight: props.emitterHeight,
+          emitterSurfaceOnly: props.emitterSurfaceOnly,
+          emitterDirection: props.emitterDirection,
+          turbulence: props.turbulence,
+          attractors: props.attractors,
+          attractToCenter: props.attractToCenter,
+          startPositionAsDirection: props.startPositionAsDirection,
+          softParticles: props.softParticles,
+          softDistance: props.softDistance,
+          collision: props.collision,
+          orientAxis: props.orientAxis,
+          stretchBySpeed: props.stretchBySpeed
+        });
+        updateUniforms(system.uniforms, normalized);
+      },
+      { deep: true }
+    );
+    onBeforeRender(({ delta }) => {
+      const system = systemRef.value;
+      if (!system || !system.initialized) return;
+      system.update(delta);
+      if (emitting.value) {
+        system.autoEmit(delta);
+      }
+    });
+    onMounted(() => {
+      var _a2;
+      const mgr = rendererCtx;
+      if ((_a2 = mgr.isInitialized) == null ? void 0 : _a2.value) {
+        initSystem();
+      } else if (mgr.onReady) {
+        mgr.onReady(() => {
+          initSystem();
+        });
+      } else {
+        initSystem();
+      }
+    });
+    onUnmounted(() => {
+      if (props.debug) {
+        import("debug-vfx").then((mod) => {
+          mod.destroyDebugPanel();
+        });
+      }
+      destroySystem();
+    });
+    const api = {
+      spawn: (x = 0, y = 0, z = 0, count = 20, overrides = null) => {
+        const system = systemRef.value;
+        if (!system) return;
+        const [px, py, pz] = system.position;
+        system.spawn(px + x, py + y, pz + z, count, overrides);
+      },
+      start: () => {
+        const system = systemRef.value;
+        if (!system) return;
+        system.start();
+        emitting.value = true;
+      },
+      stop: () => {
+        const system = systemRef.value;
+        if (!system) return;
+        system.stop();
+        emitting.value = false;
+      },
+      clear: () => {
+        var _a2;
+        (_a2 = systemRef.value) == null ? void 0 : _a2.clear();
+      },
+      get isEmitting() {
+        return emitting.value;
+      },
+      get uniforms() {
+        var _a2, _b2;
+        return (_b2 = (_a2 = systemRef.value) == null ? void 0 : _a2.uniforms) != null ? _b2 : null;
+      }
+    };
+    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 });
+    };
+  }
+});
+
+// src/VFXEmitter.ts
+import { defineComponent as defineComponent2, ref as ref2, watch as watch2, onMounted as onMounted2, h as h2 } from "vue";
+import { useLoop as useLoop2, useTresContext as useTresContext2 } from "@tresjs/core";
+import { Vector3, Quaternion } from "three/webgpu";
+import {
+  EmitterController,
+  isWebGPUBackend as isWebGPUBackend2,
+  coreStore as coreStore2
+} from "core-vfx";
+var worldPos = new Vector3();
+var worldQuat = new Quaternion();
+var VFXEmitter = defineComponent2({
+  name: "VFXEmitter",
+  props: {
+    name: { type: String, default: void 0 },
+    particlesRef: { type: Object, default: void 0 },
+    position: {
+      type: null,
+      default: () => [0, 0, 0]
+    },
+    emitCount: { type: Number, default: 10 },
+    delay: { type: Number, default: 0 },
+    autoStart: { type: Boolean, default: true },
+    loop: { type: Boolean, default: true },
+    localDirection: { type: Boolean, default: false },
+    direction: {
+      type: null,
+      default: void 0
+    },
+    overrides: {
+      type: Object,
+      default: null
+    },
+    onEmit: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props, { expose, slots }) {
+    const { renderer } = useTresContext2();
+    const { onBeforeRender } = useLoop2();
+    const groupRef = ref2(null);
+    const isWebGPU = ref2(false);
+    const controller = new EmitterController({
+      emitCount: props.emitCount,
+      delay: props.delay,
+      autoStart: props.autoStart,
+      loop: props.loop,
+      localDirection: props.localDirection,
+      direction: props.direction,
+      overrides: props.overrides,
+      onEmit: props.onEmit
+    });
+    function getParticleSystem() {
+      if (props.particlesRef) {
+        return props.particlesRef.value || props.particlesRef;
+      }
+      return props.name ? coreStore2.getState().getParticles(props.name) : void 0;
+    }
+    watch2(
+      () => [
+        props.emitCount,
+        props.delay,
+        props.autoStart,
+        props.loop,
+        props.localDirection,
+        props.direction,
+        props.overrides,
+        props.onEmit
+      ],
+      () => {
+        controller.updateOptions({
+          emitCount: props.emitCount,
+          delay: props.delay,
+          autoStart: props.autoStart,
+          loop: props.loop,
+          localDirection: props.localDirection,
+          direction: props.direction,
+          overrides: props.overrides,
+          onEmit: props.onEmit
+        });
+      }
+    );
+    function checkWebGPU() {
+      const r = renderer.instance;
+      if (r && isWebGPUBackend2(r)) {
+        isWebGPU.value = true;
+        const system = getParticleSystem();
+        if (system) controller.setSystem(system);
+      }
+    }
+    onMounted2(() => {
+      var _a;
+      const mgr = renderer;
+      if ((_a = mgr.isInitialized) == null ? void 0 : _a.value) {
+        checkWebGPU();
+      } else if (mgr.onReady) {
+        mgr.onReady(() => {
+          checkWebGPU();
+        });
+      } else {
+        checkWebGPU();
+      }
+    });
+    onBeforeRender(({ delta }) => {
+      if (!isWebGPU.value) return;
+      if (!controller.getSystem()) {
+        const system = getParticleSystem();
+        if (system) controller.setSystem(system);
+      }
+      const group = groupRef.value;
+      if (!group) return;
+      group.getWorldPosition(worldPos);
+      group.getWorldQuaternion(worldQuat);
+      controller.update(delta, worldPos, worldQuat);
+    });
+    const emit = (emitOverrides = null) => {
+      const group = groupRef.value;
+      if (!group) return false;
+      if (!controller.getSystem()) {
+        const system = getParticleSystem();
+        if (system) controller.setSystem(system);
+      }
+      if (!controller.getSystem()) {
+        if (props.name) {
+          console.warn(
+            `VFXEmitter: No particle system found for name "${props.name}"`
+          );
+        }
+        return false;
+      }
+      group.getWorldPosition(worldPos);
+      group.getWorldQuaternion(worldQuat);
+      return controller.emitAtPosition(worldPos, worldQuat, emitOverrides);
+    };
+    const burst = (count) => {
+      const group = groupRef.value;
+      if (!group) return false;
+      if (!controller.getSystem()) {
+        const system = getParticleSystem();
+        if (system) controller.setSystem(system);
+      }
+      if (!controller.getSystem()) return false;
+      group.getWorldPosition(worldPos);
+      group.getWorldQuaternion(worldQuat);
+      return controller.burst(count, worldPos, worldQuat);
+    };
+    const start = () => controller.start();
+    const stop = () => controller.stop();
+    expose({
+      emit,
+      burst,
+      start,
+      stop,
+      get isEmitting() {
+        return controller.isEmitting;
+      },
+      getParticleSystem,
+      get group() {
+        return groupRef.value;
+      }
+    });
+    return () => {
+      return h2(
+        "TresGroup",
+        {
+          ref: (el) => {
+            groupRef.value = el;
+          },
+          position: props.position
+        },
+        slots.default ? slots.default() : void 0
+      );
+    };
+  }
+});
+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;
+  };
+  return {
+    emit,
+    burst,
+    start,
+    stop,
+    clear,
+    isEmitting,
+    getUniforms,
+    getParticles: () => isWebGPU.value ? getParticles() : null
+  };
+}
+
+// src/vue-store.ts
+import { ref as ref3, onUnmounted as onUnmounted3 } from "vue";
+import { coreStore as coreStore3 } from "core-vfx";
+function useVFXStore(selector) {
+  const pick = selector != null ? selector : ((s) => s);
+  const state = ref3(pick(coreStore3.getState()));
+  const unsubscribe = coreStore3.subscribe((s) => {
+    state.value = pick(s);
+  });
+  onUnmounted3(unsubscribe);
+  return state;
+}
+useVFXStore.getState = coreStore3.getState;
+useVFXStore.setState = coreStore3.setState;
+useVFXStore.subscribe = coreStore3.subscribe;
+
 // src/index.ts
-console.log("tres-vfx");
+import {
+  Appearance as Appearance2,
+  Blending as Blending2,
+  EmitterShape as EmitterShape2,
+  AttractorType,
+  Easing,
+  Lighting as Lighting2,
+  bakeCurveToArray,
+  createCombinedCurveTexture,
+  buildCurveTextureBin,
+  CurveChannel
+} from "core-vfx";
+import {
+  VFXParticleSystem as VFXParticleSystem2,
+  EmitterController as EmitterController2,
+  isWebGPUBackend as isWebGPUBackend3,
+  isNonDefaultRotation as isNonDefaultRotation2,
+  normalizeProps as normalizeProps2,
+  resolveCurveTexture
+} from "core-vfx";
+export {
+  Appearance2 as Appearance,
+  AttractorType,
+  Blending2 as Blending,
+  CurveChannel,
+  Easing,
+  EmitterController2 as EmitterController,
+  EmitterShape2 as EmitterShape,
+  Lighting2 as Lighting,
+  VFXEmitter,
+  VFXParticleSystem2 as VFXParticleSystem,
+  VFXParticles,
+  bakeCurveToArray,
+  buildCurveTextureBin,
+  createCombinedCurveTexture,
+  isNonDefaultRotation2 as isNonDefaultRotation,
+  isWebGPUBackend3 as isWebGPUBackend,
+  normalizeProps2 as normalizeProps,
+  resolveCurveTexture,
+  useVFXEmitter,
+  useVFXStore
+};