@zylem/behaviors 0.5.2 → 0.5.5

package/dist/{chunk-7JJEIADR.js → chunk-USFIJUDN.js}

@@ -6,7 +6,7 @@ import {
 
 // src/lib/behaviors/particle-emitter/gpu/particles.ts
 import * as THREE3 from "three/webgpu";
-import { texture as texture2, uniform, instancedArray } from "three/tsl";
+import { instancedArray, texture as texture2, uniform } from "three/tsl";
 
 // src/lib/behaviors/particle-emitter/gpu/types.ts
 var EASE_FUNCTIONS = [
@@ -128,7 +128,8 @@ import * as THREE2 from "three/webgpu";
 import {
   normalize,
   max,
-  varying,
+  min,
+  varyingProperty,
   If as If2,
   distance,
   Discard,
@@ -138,6 +139,7 @@ import {
   instanceIndex,
   vec3,
   float as float2,
+  int,
   mix,
   vec4,
   Fn as Fn2,
@@ -383,8 +385,89 @@ var easeInOutBack = /* @__PURE__ */ Fn(
 );
 var applyEasing = /* @__PURE__ */ Fn(
   ([t, easingId]) => {
-    Switch(easingId).Case(0, () => easeLinear(t)).Case(1, () => easeInPower1(t)).Case(2, () => easeOutPower1(t)).Case(3, () => easeInOutPower1(t)).Case(4, () => easeInPower2(t)).Case(5, () => easeOutPower2(t)).Case(6, () => easeInOutPower2(t)).Case(7, () => easeInPower3(t)).Case(8, () => easeOutPower3(t)).Case(9, () => easeInOutPower3(t)).Case(10, () => easeInPower4(t)).Case(11, () => easeOutPower4(t)).Case(12, () => easeInOutPower4(t)).Case(13, () => easeInQuad(t)).Case(14, () => easeOutQuad(t)).Case(15, () => easeInOutQuad(t)).Case(16, () => easeInCubic(t)).Case(17, () => easeOutCubic(t)).Case(18, () => easeInOutCubic(t)).Case(19, () => easeInQuart(t)).Case(20, () => easeOutQuart(t)).Case(21, () => easeInOutQuart(t)).Case(22, () => easeInQuint(t)).Case(23, () => easeOutQuint(t)).Case(24, () => easeInOutQuint(t)).Case(25, () => easeInSine(t)).Case(26, () => easeOutSine(t)).Case(27, () => easeInOutSine(t)).Case(28, () => easeInExpo(t)).Case(29, () => easeOutExpo(t)).Case(30, () => easeInOutExpo(t)).Case(31, () => easeInCirc(t)).Case(32, () => easeOutCirc(t)).Case(33, () => easeInOutCirc(t)).Case(34, () => easeInElastic(t)).Case(35, () => easeOutElastic(t)).Case(36, () => easeInOutElastic(t)).Case(37, () => easeInBack(t)).Case(38, () => easeOutBack(t)).Case(39, () => easeInOutBack(t));
-    return t;
+    const result = t.toVar();
+    Switch(easingId).Case(0, () => {
+      result.assign(easeLinear(t));
+    }).Case(1, () => {
+      result.assign(easeInPower1(t));
+    }).Case(2, () => {
+      result.assign(easeOutPower1(t));
+    }).Case(3, () => {
+      result.assign(easeInOutPower1(t));
+    }).Case(4, () => {
+      result.assign(easeInPower2(t));
+    }).Case(5, () => {
+      result.assign(easeOutPower2(t));
+    }).Case(6, () => {
+      result.assign(easeInOutPower2(t));
+    }).Case(7, () => {
+      result.assign(easeInPower3(t));
+    }).Case(8, () => {
+      result.assign(easeOutPower3(t));
+    }).Case(9, () => {
+      result.assign(easeInOutPower3(t));
+    }).Case(10, () => {
+      result.assign(easeInPower4(t));
+    }).Case(11, () => {
+      result.assign(easeOutPower4(t));
+    }).Case(12, () => {
+      result.assign(easeInOutPower4(t));
+    }).Case(13, () => {
+      result.assign(easeInQuad(t));
+    }).Case(14, () => {
+      result.assign(easeOutQuad(t));
+    }).Case(15, () => {
+      result.assign(easeInOutQuad(t));
+    }).Case(16, () => {
+      result.assign(easeInCubic(t));
+    }).Case(17, () => {
+      result.assign(easeOutCubic(t));
+    }).Case(18, () => {
+      result.assign(easeInOutCubic(t));
+    }).Case(19, () => {
+      result.assign(easeInQuart(t));
+    }).Case(20, () => {
+      result.assign(easeOutQuart(t));
+    }).Case(21, () => {
+      result.assign(easeInOutQuart(t));
+    }).Case(22, () => {
+      result.assign(easeInQuint(t));
+    }).Case(23, () => {
+      result.assign(easeOutQuint(t));
+    }).Case(24, () => {
+      result.assign(easeInOutQuint(t));
+    }).Case(25, () => {
+      result.assign(easeInSine(t));
+    }).Case(26, () => {
+      result.assign(easeOutSine(t));
+    }).Case(27, () => {
+      result.assign(easeInOutSine(t));
+    }).Case(28, () => {
+      result.assign(easeInExpo(t));
+    }).Case(29, () => {
+      result.assign(easeOutExpo(t));
+    }).Case(30, () => {
+      result.assign(easeInOutExpo(t));
+    }).Case(31, () => {
+      result.assign(easeInCirc(t));
+    }).Case(32, () => {
+      result.assign(easeOutCirc(t));
+    }).Case(33, () => {
+      result.assign(easeInOutCirc(t));
+    }).Case(34, () => {
+      result.assign(easeInElastic(t));
+    }).Case(35, () => {
+      result.assign(easeOutElastic(t));
+    }).Case(36, () => {
+      result.assign(easeInOutElastic(t));
+    }).Case(37, () => {
+      result.assign(easeInBack(t));
+    }).Case(38, () => {
+      result.assign(easeOutBack(t));
+    }).Case(39, () => {
+      result.assign(easeInOutBack(t));
+    });
+    return result;
   },
   { t: "float", easingId: "int", return: "float" }
 );
@@ -393,26 +476,25 @@ var applyEasing = /* @__PURE__ */ Fn(
 var idx7 = instanceIndex.mul(7);
 var idx3 = instanceIndex.mul(3);
 var idx2 = instanceIndex.mul(2);
-var vProgress = varying(float2(0), "vProgress");
 var positionNode = /* @__PURE__ */ Fn2(
-  ([pos, age, duration, vProgress2, uGravity, dir, speed, worldUpRight, easingIndex]) => {
+  ([pos, age, duration, vProgress, uGravity, dir, speed, worldUpRight, easingIndex]) => {
     const progress = age.div(duration);
     const _pos = vec3(pos);
     If2(progress.lessThan(0).or(progress.greaterThan(1)), () => {
-      vProgress2.assign(1);
+      vProgress.assign(1);
       _pos.assign(vec3(0, 9999, 0));
     }).Else(() => {
-      vProgress2.assign(applyEasing(progress, easingIndex));
+      vProgress.assign(applyEasing(progress, easingIndex));
       const normalizedDirection = select2(length(dir).greaterThan(0), normalize(dir), vec3(0));
       const gravityForce = uGravity.mul(0.5).mul(age.mul(age));
-      const easedAge = vProgress2.mul(duration);
+      const easedAge = vProgress.mul(duration);
       const offset = normalizedDirection.mul(easedAge).mul(speed).add(gravityForce);
       If2(worldUpRight, () => {
         const m = mat3(modelWorldMatrix);
         const rot = mat3(normalize(m[0]), normalize(m[1]), normalize(m[2]));
         const inverseRotation = transpose(rot);
         const worldOffset = inverseRotation.mul(offset);
-        const blendedOffset = mix(offset, worldOffset, vProgress2);
+        const blendedOffset = mix(offset, worldOffset, vProgress);
         _pos.addAssign(blendedOffset);
       }).Else(() => {
         _pos.addAssign(offset);
@@ -428,9 +510,13 @@ var rotationNode = /* @__PURE__ */ Fn2(([rot, rotSpeed, age]) => {
   const wrapped = angle.mod(tau);
   return wrapped.add(tau).mod(tau);
 });
-var scaleNode = /* @__PURE__ */ Fn2(([fadeSize, scale, vProgress2]) => {
+var scaleNode = /* @__PURE__ */ Fn2(([fadeSize, scale, vProgress]) => {
   const uFadeSize = vec2(fadeSize[0], fadeSize[1]).toVar();
-  return smoothstep(0, uFadeSize.x, vProgress2).mul(smoothstep(1.01, uFadeSize.y, vProgress2)).mul(scale);
+  const fadeInEnd = min(max(uFadeSize.x, 1e-4), 0.9999);
+  const fadeOutStart = min(max(uFadeSize.y, 1e-4), 0.9999);
+  const fadeIn = smoothstep(0, fadeInEnd, vProgress);
+  const fadeOut = float2(1).sub(smoothstep(fadeOutStart, 1, vProgress));
+  return fadeIn.mul(fadeOut).mul(scale);
 });
 var colorNode = /* @__PURE__ */ Fn2(
   ([
@@ -438,7 +524,7 @@ var colorNode = /* @__PURE__ */ Fn2(
     intensity,
     fadeAlpha,
     fadeAlphaMap,
-    vProgress2,
+    vProgress,
     uColorGradient,
     uAlphaMapCount,
     vAlphaMapUVOffsetX,
@@ -450,13 +536,15 @@ var colorNode = /* @__PURE__ */ Fn2(
     const uIntensity = float2(intensity).toVar();
     const uFadeAlpha = vec2(fadeAlpha[0], fadeAlpha[1]).toVar();
     const uFadeAlphaMap = vec2(fadeAlphaMap[0], fadeAlphaMap[1]).toVar();
-    const u = vProgress2;
+    const u = vProgress;
     const v = vColorGradientRow.add(0.5).div(max(uColorGradientRows, 1));
     const finalColor = uColorGradient.sample(vec2(u, v)).rgb;
     finalColor.mulAssign(uIntensity);
-    const alpha = smoothstep(0, uFadeAlpha.x, vProgress2).mul(
-      smoothstep(1.01, uFadeAlpha.y, vProgress2)
-    );
+    const fadeInEnd = min(max(uFadeAlpha.x, 1e-4), 0.9999);
+    const fadeOutStart = min(max(uFadeAlpha.y, 1e-4), 0.9999);
+    const fadeIn = smoothstep(0, fadeInEnd, vProgress);
+    const fadeOut = float2(1).sub(smoothstep(fadeOutStart, 1, vProgress));
+    const alpha = fadeIn.mul(fadeOut);
     const vUv = uv();
     If2(uAlphaMapCount.equal(0), () => {
       const center = vec2(0.5).toVar();
@@ -474,7 +562,7 @@ var colorNode = /* @__PURE__ */ Fn2(
         const endU = vAlphaMapUVOffsetY.add(vUv.x).div(uAlphaMapCount);
         const endUV = vec2(endU, vUv.y);
         const endAlpha = alphaMap.sample(endUV).a;
-        const morphProgress = smoothstep(uFadeAlphaMap.x, uFadeAlphaMap.y, vProgress2);
+        const morphProgress = smoothstep(uFadeAlphaMap.x, uFadeAlphaMap.y, vProgress);
         const morphedAlpha = mix(startAlpha, endAlpha, morphProgress);
         alpha.assign(morphedAlpha.mul(alpha));
       }).Else(() => {
@@ -484,115 +572,158 @@ var colorNode = /* @__PURE__ */ Fn2(
     return vec4(finalColor, alpha);
   }
 );
-var InstancePositionNode = class extends THREE2.Node {
-  constructor() {
-    super("vec3");
-    this.updateType = THREE2.NodeUpdateType.OBJECT;
-  }
-  setup(frame) {
-    const mesh = frame.object;
-    const { attributes, uniforms, config, easingIndex } = mesh.userData;
-    const uPosition = uniforms.uPosition;
-    const _static = float2(config.emitter.static).toVar();
-    const posX = attributes.instance.element(idx7.add(0));
-    const posY = attributes.instance.element(idx7.add(1));
-    const posZ = attributes.instance.element(idx7.add(2));
-    const pos = vec3(posX, posY, posZ).add(uPosition.mul(_static));
-    const dirX = attributes.instanceDirection.element(idx3.add(0));
-    const dirY = attributes.instanceDirection.element(idx3.add(1));
-    const dirZ = attributes.instanceDirection.element(idx3.add(2));
-    const dir = vec3(dirX, dirY, dirZ);
-    const time = uniforms.uTime;
-    const uGravity = vec3(...config.particles.gravity);
-    const worldUpRight = bool(config.emitter.worldUpRight);
-    const startTime = attributes.instanceLifetime.element(idx2.add(0));
-    const duration = attributes.instanceLifetime.element(idx2.add(1));
-    const speed = attributes.instanceSpeed.element(instanceIndex).toVar();
-    const age = select2(speed.lessThan(0), duration.sub(time.sub(startTime)), time.sub(startTime));
-    return positionNode(pos, age, duration, vProgress, uGravity, dir, speed, worldUpRight, easingIndex);
-  }
-};
-var InstanceRotationNode = class extends THREE2.Node {
-  constructor() {
-    super("vec3");
-    this.updateType = THREE2.NodeUpdateType.OBJECT;
-  }
-  setup(frame) {
-    const mesh = frame.object;
-    const { attributes, uniforms } = mesh.userData;
-    const rotX = attributes.instance.element(idx7.add(3));
-    const rotY = attributes.instance.element(idx7.add(4));
-    const rotZ = attributes.instance.element(idx7.add(5));
-    const rot = vec3(rotX, rotY, rotZ);
-    const rotSpeedX = attributes.instanceRotationSpeed.element(idx3.add(0));
-    const rotSpeedY = attributes.instanceRotationSpeed.element(idx3.add(1));
-    const rotSpeedZ = attributes.instanceRotationSpeed.element(idx3.add(2));
-    const rotSpeed = vec3(rotSpeedX, rotSpeedY, rotSpeedZ);
-    const time = uniforms.uTime;
-    const startTime = attributes.instanceLifetime.element(idx2.add(0));
-    const duration = attributes.instanceLifetime.element(idx2.add(1));
-    const speed = attributes.instanceSpeed.element(instanceIndex).toVar();
-    const age = select2(speed.lessThan(0), duration.sub(time.sub(startTime)), time.sub(startTime));
-    return rotationNode(rot, rotSpeed, age);
-  }
-};
-var InstanceScaleNode = class extends THREE2.Node {
-  constructor() {
-    super("vec3");
-    this.updateType = THREE2.NodeUpdateType.OBJECT;
-  }
-  setup(frame) {
-    const mesh = frame.object;
-    const { attributes, config } = mesh.userData;
-    const scale = attributes.instance.element(idx7.add(6));
-    return scaleNode(config.particles.fadeSize, scale, vProgress);
-  }
-};
-var InstanceColorNode = class extends THREE2.Node {
-  constructor() {
-    super("vec3");
-    this.updateType = THREE2.NodeUpdateType.OBJECT;
-  }
-  setup(frame) {
-    const mesh = frame.object;
-    const { attributes, uniforms, config, alphaMapCount } = mesh.userData;
-    const uAlphaMapCount = uint(alphaMapCount).toVar();
-    const vAlphaMapUVOffsetX = attributes.instanceAlphaMapUVOffset.element(idx2.add(0));
-    const vAlphaMapUVOffsetY = attributes.instanceAlphaMapUVOffset.element(idx2.add(1));
-    return colorNode(
-      config.particles.colors,
-      config.particles.intensity,
-      config.particles.fadeAlpha,
-      config.particles.fadeAlphaMap,
-      vProgress,
-      uniforms.uColorGradient,
-      uAlphaMapCount,
-      vAlphaMapUVOffsetX,
-      vAlphaMapUVOffsetY,
-      uniforms.alphaMap
-    );
-  }
-};
-function createParticleMaterialTemplate() {
+function createInstancePositionNode(ctx, vProgress) {
+  return new class extends THREE2.Node {
+    constructor() {
+      super("vec3");
+      this.updateType = THREE2.NodeUpdateType.NONE;
+    }
+    setup() {
+      const { attributes, uniforms, config, easingIndex } = ctx;
+      const uPosition = uniforms.uPosition;
+      const _static = float2(config.emitter.static).toVar();
+      const pos = vec3(
+        attributes.instance.element(idx7.add(0)),
+        attributes.instance.element(idx7.add(1)),
+        attributes.instance.element(idx7.add(2))
+      ).add(uPosition.mul(_static));
+      const dir = vec3(
+        attributes.instanceDirection.element(idx3.add(0)),
+        attributes.instanceDirection.element(idx3.add(1)),
+        attributes.instanceDirection.element(idx3.add(2))
+      );
+      const time = uniforms.uTime;
+      const uGravity = vec3(...config.particles.gravity);
+      const worldUpRight = bool(config.emitter.worldUpRight);
+      const startTime = attributes.instanceLifetime.element(idx2.add(0));
+      const duration = attributes.instanceLifetime.element(idx2.add(1));
+      const speed = attributes.instanceSpeed.element(instanceIndex).toVar();
+      const age = select2(
+        speed.lessThan(0),
+        duration.sub(time.sub(startTime)),
+        time.sub(startTime)
+      );
+      return positionNode(
+        pos,
+        age,
+        duration,
+        vProgress,
+        uGravity,
+        dir,
+        speed,
+        worldUpRight,
+        int(easingIndex)
+      );
+    }
+  }();
+}
+function createInstanceRotationNode(ctx) {
+  return new class extends THREE2.Node {
+    constructor() {
+      super("float");
+      this.updateType = THREE2.NodeUpdateType.NONE;
+    }
+    setup() {
+      const { attributes, uniforms } = ctx;
+      const rot = vec3(
+        attributes.instance.element(idx7.add(3)),
+        attributes.instance.element(idx7.add(4)),
+        attributes.instance.element(idx7.add(5))
+      );
+      const rotSpeed = vec3(
+        attributes.instanceRotationSpeed.element(idx3.add(0)),
+        attributes.instanceRotationSpeed.element(idx3.add(1)),
+        attributes.instanceRotationSpeed.element(idx3.add(2))
+      );
+      const time = uniforms.uTime;
+      const startTime = attributes.instanceLifetime.element(idx2.add(0));
+      const duration = attributes.instanceLifetime.element(idx2.add(1));
+      const speed = attributes.instanceSpeed.element(instanceIndex).toVar();
+      const age = select2(
+        speed.lessThan(0),
+        duration.sub(time.sub(startTime)),
+        time.sub(startTime)
+      );
+      return rotationNode(rot, rotSpeed, age);
+    }
+  }();
+}
+function createInstanceScaleNode(ctx, vProgress) {
+  return new class extends THREE2.Node {
+    constructor() {
+      super("float");
+      this.updateType = THREE2.NodeUpdateType.NONE;
+    }
+    setup() {
+      const { attributes, config } = ctx;
+      const scale = attributes.instance.element(idx7.add(6));
+      return scaleNode(config.particles.fadeSize, scale, vProgress);
+    }
+  }();
+}
+function createInstanceColorNode(ctx, vProgress) {
+  return new class extends THREE2.Node {
+    constructor() {
+      super("vec4");
+      this.updateType = THREE2.NodeUpdateType.NONE;
+    }
+    setup() {
+      const { attributes, uniforms, config, alphaMapCount } = ctx;
+      const uAlphaMapCount = uint(alphaMapCount).toVar();
+      return colorNode(
+        config.particles.colors,
+        config.particles.intensity,
+        config.particles.fadeAlpha,
+        config.particles.fadeAlphaMap,
+        vProgress,
+        uniforms.uColorGradient,
+        uAlphaMapCount,
+        attributes.instanceAlphaMapUVOffset.element(idx2.add(0)),
+        attributes.instanceAlphaMapUVOffset.element(idx2.add(1)),
+        uniforms.alphaMap
+      );
+    }
+  }();
+}
+var particleMaterialCounter = 0;
+function createParticleMaterialTemplate(ctx) {
+  const materialId = particleMaterialCounter++;
+  const vProgress = varyingProperty("float", `vProgress_${materialId}`);
   const mat = new THREE2.SpriteNodeMaterial();
-  mat.positionNode = new InstancePositionNode();
-  mat.rotationNode = new InstanceRotationNode();
-  mat.scaleNode = new InstanceScaleNode();
-  mat.colorNode = new InstanceColorNode();
+  mat.positionNode = createInstancePositionNode(ctx, vProgress);
+  mat.rotationNode = createInstanceRotationNode(ctx);
+  mat.scaleNode = createInstanceScaleNode(ctx, vProgress);
+  mat.colorNode = createInstanceColorNode(ctx, vProgress);
   return mat;
 }
 
 // src/lib/behaviors/particle-emitter/gpu/utils.ts
-function randFloat(min, max2) {
-  return Math.random() * (max2 - min) + min;
+function randFloat(min2, max2) {
+  return Math.random() * (max2 - min2) + min2;
 }
-function randInt(min, max2) {
-  return Math.floor(Math.random() * (max2 - min + 1)) + min;
+function randInt(min2, max2) {
+  return Math.floor(Math.random() * (max2 - min2 + 1)) + min2;
 }
 
 // src/lib/behaviors/particle-emitter/gpu/particles.ts
+function markStorageDirty(node) {
+  if (node.value) {
+    node.value.needsUpdate = true;
+  }
+}
+function createWhiteCanvasTexture() {
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext("2d");
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, 1, 1);
+  const tex = new THREE3.CanvasTexture(canvas);
+  tex.needsUpdate = true;
+  return tex;
+}
 var Particles = class extends THREE3.Object3D {
-  mesh;
+  sprite;
   /** Base object for positioning the emitter. */
   base;
   debugMesh;
@@ -607,10 +738,11 @@ var Particles = class extends THREE3.Object3D {
   cursor = 0;
   /** Whether the particle system is currently running. */
   running = false;
-  constructor(config, geometry) {
+  constructor(config, _geometry) {
     super();
     this.name = "Particles";
     this.type = "Particles";
+    this.frustumCulled = false;
     this.base = new THREE3.Object3D();
     this.base.name = "Base";
     this.add(this.base);
@@ -640,7 +772,7 @@ var Particles = class extends THREE3.Object3D {
       render: {
         alphaMapSize: r.alphaMapSize ?? 256,
         alphaMapFilter: r.alphaMapFilter ?? THREE3.LinearFilter,
-        frustumCulled: r.frustumCulled ?? true,
+        frustumCulled: r.frustumCulled ?? false,
         blendingMode: r.blendingMode ?? THREE3.AdditiveBlending,
         side: r.side ?? THREE3.FrontSide,
         depthTest: r.depthTest ?? true
@@ -684,8 +816,7 @@ var Particles = class extends THREE3.Object3D {
         this.config.render.alphaMapFilter
       );
     } else {
-      const canvas = document.createElement("canvas");
-      atlas = new THREE3.CanvasTexture(canvas);
+      atlas = createWhiteCanvasTexture();
     }
     const colorGradientTexture = createColorGradientTexture(this.config.particles.colors, 128);
     this.uniforms = {
@@ -696,7 +827,6 @@ var Particles = class extends THREE3.Object3D {
       alphaMap: texture2(atlas),
       uColorGradient: texture2(colorGradientTexture)
     };
-    const defaultGeometry = geometry ?? new THREE3.PlaneGeometry(0.5, 0.5);
     const count = this.config.particles.count;
     this.buffers = {
       instanceLifetime: new Float32Array(count * 2),
@@ -715,19 +845,20 @@ var Particles = class extends THREE3.Object3D {
       instanceSpeed: instancedArray(this.buffers.instanceSpeed, "float")
     };
     this.material = this.createMaterial();
-    this.mesh = new THREE3.InstancedMesh(defaultGeometry, this.material, count);
-    this.mesh.userData = {
+    this.sprite = new THREE3.Sprite(this.material);
+    this.sprite.count = count;
+    this.sprite.renderOrder = 10;
+    this.add(this.sprite);
+    this.sprite.frustumCulled = this.config.render.frustumCulled ?? false;
+  }
+  createMaterial() {
+    const _mat = createParticleMaterialTemplate({
       attributes: this.attributes,
       uniforms: this.uniforms,
       config: this.config,
       alphaMapCount: this.alphaMapCount,
       easingIndex: this.easingIndex
-    };
-    this.add(this.mesh);
-    this.mesh.frustumCulled = this.config.render.frustumCulled ?? false;
-  }
-  createMaterial() {
-    const _mat = createParticleMaterialTemplate();
+    });
     _mat.blending = this.config.render.blendingMode;
     _mat.premultipliedAlpha = this.config.render.blendingMode === THREE3.SubtractiveBlending || this.config.render.blendingMode === THREE3.MultiplyBlending;
     _mat.depthWrite = false;
@@ -743,8 +874,21 @@ var Particles = class extends THREE3.Object3D {
     this.cursor = 0;
     this.emitted = 0;
     this.visible = true;
-    this.mesh.visible = true;
-    this.attributes.instanceLifetime.value.array.fill(0);
+    this.sprite.visible = true;
+    this.resetDeadSlots();
+    this.markAllStorageDirty();
+    this._update();
+  }
+  resetDeadSlots() {
+    const count = this.config.particles.count;
+    const lifetime = this.buffers.instanceLifetime;
+    const speed = this.buffers.instanceSpeed;
+    for (let i = 0; i < count; i++) {
+      const i2 = i * 2;
+      lifetime[i2] = 0;
+      lifetime[i2 + 1] = 1e-4;
+      speed[i] = -1;
+    }
   }
   /** Restarts (alias for start). */
   restart() {
@@ -758,13 +902,13 @@ var Particles = class extends THREE3.Object3D {
   resume() {
     this.running = true;
     this.visible = true;
-    this.mesh.visible = true;
+    this.sprite.visible = true;
   }
   /** Stops the particle system and hides it. */
   stop() {
     this.running = false;
     this.visible = false;
-    this.mesh.visible = false;
+    this.sprite.visible = false;
   }
   /** Whether emission loops continuously. */
   get looping() {
@@ -783,16 +927,21 @@ var Particles = class extends THREE3.Object3D {
   }
   /** Updates the particle system. Call each frame. */
   update(delta) {
-    this.mesh.visible = this.visible;
+    this.sprite.visible = this.visible;
     if (!this.running) return;
     this._update();
     this.uniforms.uTime.value += delta;
   }
+  markAllStorageDirty() {
+    for (const attr of Object.values(this.attributes)) {
+      markStorageDirty(attr);
+    }
+  }
   _compute(i) {
     const { emitter } = this.config;
     const pos = this.uniforms.uPosition.value;
     const dynamicFactor = 1 - emitter.static;
-    const inst = this.attributes.instance.value.array;
+    const inst = this.buffers.instance;
     const i7 = i * 7;
     inst[i7 + 0] = randFloat(emitter.startPositionMin[0], emitter.startPositionMax[0]) + pos.x * dynamicFactor;
     inst[i7 + 1] = randFloat(emitter.startPositionMin[1], emitter.startPositionMax[1]) + pos.y * dynamicFactor;
@@ -802,16 +951,16 @@ var Particles = class extends THREE3.Object3D {
     inst[i7 + 5] = randFloat(emitter.startRotationMin[2], emitter.startRotationMax[2]);
     inst[i7 + 6] = randFloat(emitter.size[0], emitter.size[1]);
     const i3 = i * 3;
-    const dir = this.attributes.instanceDirection.value.array;
+    const dir = this.buffers.instanceDirection;
     dir[i3 + 0] = randFloat(emitter.directionMin[0], emitter.directionMax[0]);
     dir[i3 + 1] = randFloat(emitter.directionMin[1], emitter.directionMax[1]);
     dir[i3 + 2] = randFloat(emitter.directionMin[2], emitter.directionMax[2]);
-    const rotSpeed = this.attributes.instanceRotationSpeed.value.array;
+    const rotSpeed = this.buffers.instanceRotationSpeed;
     rotSpeed[i3 + 0] = randFloat(emitter.rotationSpeedMin[0], emitter.rotationSpeedMax[0]);
     rotSpeed[i3 + 1] = randFloat(emitter.rotationSpeedMin[1], emitter.rotationSpeedMax[1]);
     rotSpeed[i3 + 2] = randFloat(emitter.rotationSpeedMin[2], emitter.rotationSpeedMax[2]);
     const i2 = i * 2;
-    const lifetime = this.attributes.instanceLifetime.value.array;
+    const lifetime = this.buffers.instanceLifetime;
     lifetime[i2 + 0] = this.uniforms.uTime.value;
     lifetime[i2 + 1] = randFloat(emitter.lifetime[0], emitter.lifetime[1]);
     const startCount = this.config.particles.alphaMapsStart?.length ?? 0;
@@ -823,10 +972,10 @@ var Particles = class extends THREE3.Object3D {
     } else if (startCount > 0) {
       endIdx = randInt(0, startCount - 1);
     }
-    const alphaOffset = this.attributes.instanceAlphaMapUVOffset.value.array;
+    const alphaOffset = this.buffers.instanceAlphaMapUVOffset;
     alphaOffset[i2 + 0] = startIdx;
     alphaOffset[i2 + 1] = endIdx;
-    this.attributes.instanceSpeed.value.array[i] = randFloat(emitter.speed[0], emitter.speed[1]);
+    this.buffers.instanceSpeed[i] = randFloat(emitter.speed[0], emitter.speed[1]);
   }
   _update() {
     const loop = this.config.emitter.loop;
@@ -849,12 +998,7 @@ var Particles = class extends THREE3.Object3D {
     for (let _i = this.cursor; _i < this.cursor + rate; _i++) {
       this._compute(_i % maxParticlesTotal);
     }
-    this.attributes.instance.value.needsUpdate = true;
-    this.attributes.instanceDirection.value.needsUpdate = true;
-    this.attributes.instanceRotationSpeed.value.needsUpdate = true;
-    this.attributes.instanceLifetime.value.needsUpdate = true;
-    this.attributes.instanceAlphaMapUVOffset.value.needsUpdate = true;
-    this.attributes.instanceSpeed.value.needsUpdate = true;
+    this.markAllStorageDirty();
     if (spawnMode === "time") {
       this.cursor += rate;
       this.cursor = this.cursor % maxParticlesTotal;
@@ -870,7 +1014,6 @@ var Particles = class extends THREE3.Object3D {
   /** Disposes of all resources used by the particle system. */
   dispose() {
     this.stop();
-    this.mesh.geometry.dispose();
     this.material.dispose();
   }
 };
@@ -1055,8 +1198,8 @@ function deriveFadeFromSizeCurve(points) {
 function forceToGravity(force) {
   const mid = (range2) => {
     if (range2 === void 0) return 0;
-    const [min, max2] = toRange(range2);
-    return (min + max2) * 0.5;
+    const [min2, max2] = toRange(range2);
+    return (min2 + max2) * 0.5;
   };
   return [mid(force.x), mid(force.y), mid(force.z)];
 }
@@ -1089,13 +1232,13 @@ function rotationToStart(rotation) {
   if (rotation === void 0) {
     return { min: [0, 0, 0], max: [0, 0, 0] };
   }
-  const [min, max2] = toRange(rotation);
+  const [min2, max2] = toRange(rotation);
   const norm = (theta) => theta / Math.PI - 1;
-  return { min: [0, 0, norm(min)], max: [0, 0, norm(max2)] };
+  return { min: [0, 0, norm(min2)], max: [0, 0, norm(max2)] };
 }
 function rangeToRotationSpeedZ(rotation) {
-  const [min, max2] = toRange(rotation);
-  return { min: [0, 0, min], max: [0, 0, max2] };
+  const [min2, max2] = toRange(rotation);
+  return { min: [0, 0, min2], max: [0, 0, max2] };
 }
 function toGpuColorStop(color, stop) {
   return { color: toHexColor(color), stop };
@@ -1297,8 +1440,8 @@ function mixColors(base, overlay, amount) {
   color.lerp(new Color(overlay), clamp(amount, 0, 1));
   return `#${color.getHexString()}`;
 }
-function clamp(value, min, max2) {
-  return Math.min(Math.max(value, min), max2);
+function clamp(value, min2, max2) {
+  return Math.min(Math.max(value, min2), max2);
 }
 
 // src/lib/behaviors/particle-emitter/presets/electricity/arc.ts
@@ -2628,4 +2771,4 @@ export {
   magicPresets,
   waterPresets
 };
-//# sourceMappingURL=chunk-7JJEIADR.js.map
+//# sourceMappingURL=chunk-USFIJUDN.js.map