@newkrok/three-particles 2.15.1 → 2.16.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import Easing from 'easing-functions';
-import * as THREE4 from 'three';
+import * as THREE5 from 'three';
 import { ObjectUtils } from '@newkrok/three-utils';
 import { Gyroscope } from 'three/examples/jsm/misc/Gyroscope.js';
 import { FBM } from 'three-noise/build/three-noise.module.js';
@@ -60,40 +60,40 @@ var removeBezierCurveFunction = (particleSystemId) => {
   }
 };
 var getBezierCacheSize = () => cache.length;
-var CurveFunctionId = /* @__PURE__ */ ((CurveFunctionId2) => {
-  CurveFunctionId2["BEZIER"] = "BEZIER";
-  CurveFunctionId2["LINEAR"] = "LINEAR";
-  CurveFunctionId2["QUADRATIC_IN"] = "QUADRATIC_IN";
-  CurveFunctionId2["QUADRATIC_OUT"] = "QUADRATIC_OUT";
-  CurveFunctionId2["QUADRATIC_IN_OUT"] = "QUADRATIC_IN_OUT";
-  CurveFunctionId2["CUBIC_IN"] = "CUBIC_IN";
-  CurveFunctionId2["CUBIC_OUT"] = "CUBIC_OUT";
-  CurveFunctionId2["CUBIC_IN_OUT"] = "CUBIC_IN_OUT";
-  CurveFunctionId2["QUARTIC_IN"] = "QUARTIC_IN";
-  CurveFunctionId2["QUARTIC_OUT"] = "QUARTIC_OUT";
-  CurveFunctionId2["QUARTIC_IN_OUT"] = "QUARTIC_IN_OUT";
-  CurveFunctionId2["QUINTIC_IN"] = "QUINTIC_IN";
-  CurveFunctionId2["QUINTIC_OUT"] = "QUINTIC_OUT";
-  CurveFunctionId2["QUINTIC_IN_OUT"] = "QUINTIC_IN_OUT";
-  CurveFunctionId2["SINUSOIDAL_IN"] = "SINUSOIDAL_IN";
-  CurveFunctionId2["SINUSOIDAL_OUT"] = "SINUSOIDAL_OUT";
-  CurveFunctionId2["SINUSOIDAL_IN_OUT"] = "SINUSOIDAL_IN_OUT";
-  CurveFunctionId2["EXPONENTIAL_IN"] = "EXPONENTIAL_IN";
-  CurveFunctionId2["EXPONENTIAL_OUT"] = "EXPONENTIAL_OUT";
-  CurveFunctionId2["EXPONENTIAL_IN_OUT"] = "EXPONENTIAL_IN_OUT";
-  CurveFunctionId2["CIRCULAR_IN"] = "CIRCULAR_IN";
-  CurveFunctionId2["CIRCULAR_OUT"] = "CIRCULAR_OUT";
-  CurveFunctionId2["CIRCULAR_IN_OUT"] = "CIRCULAR_IN_OUT";
-  CurveFunctionId2["ELASTIC_IN"] = "ELASTIC_IN";
-  CurveFunctionId2["ELASTIC_OUT"] = "ELASTIC_OUT";
-  CurveFunctionId2["ELASTIC_IN_OUT"] = "ELASTIC_IN_OUT";
-  CurveFunctionId2["BACK_IN"] = "BACK_IN";
-  CurveFunctionId2["BACK_OUT"] = "BACK_OUT";
-  CurveFunctionId2["BACK_IN_OUT"] = "BACK_IN_OUT";
-  CurveFunctionId2["BOUNCE_IN"] = "BOUNCE_IN";
-  CurveFunctionId2["BOUNCE_OUT"] = "BOUNCE_OUT";
-  CurveFunctionId2["BOUNCE_IN_OUT"] = "BOUNCE_IN_OUT";
-  return CurveFunctionId2;
+var CurveFunctionId = /* @__PURE__ */ ((CurveFunctionId3) => {
+  CurveFunctionId3["BEZIER"] = "BEZIER";
+  CurveFunctionId3["LINEAR"] = "LINEAR";
+  CurveFunctionId3["QUADRATIC_IN"] = "QUADRATIC_IN";
+  CurveFunctionId3["QUADRATIC_OUT"] = "QUADRATIC_OUT";
+  CurveFunctionId3["QUADRATIC_IN_OUT"] = "QUADRATIC_IN_OUT";
+  CurveFunctionId3["CUBIC_IN"] = "CUBIC_IN";
+  CurveFunctionId3["CUBIC_OUT"] = "CUBIC_OUT";
+  CurveFunctionId3["CUBIC_IN_OUT"] = "CUBIC_IN_OUT";
+  CurveFunctionId3["QUARTIC_IN"] = "QUARTIC_IN";
+  CurveFunctionId3["QUARTIC_OUT"] = "QUARTIC_OUT";
+  CurveFunctionId3["QUARTIC_IN_OUT"] = "QUARTIC_IN_OUT";
+  CurveFunctionId3["QUINTIC_IN"] = "QUINTIC_IN";
+  CurveFunctionId3["QUINTIC_OUT"] = "QUINTIC_OUT";
+  CurveFunctionId3["QUINTIC_IN_OUT"] = "QUINTIC_IN_OUT";
+  CurveFunctionId3["SINUSOIDAL_IN"] = "SINUSOIDAL_IN";
+  CurveFunctionId3["SINUSOIDAL_OUT"] = "SINUSOIDAL_OUT";
+  CurveFunctionId3["SINUSOIDAL_IN_OUT"] = "SINUSOIDAL_IN_OUT";
+  CurveFunctionId3["EXPONENTIAL_IN"] = "EXPONENTIAL_IN";
+  CurveFunctionId3["EXPONENTIAL_OUT"] = "EXPONENTIAL_OUT";
+  CurveFunctionId3["EXPONENTIAL_IN_OUT"] = "EXPONENTIAL_IN_OUT";
+  CurveFunctionId3["CIRCULAR_IN"] = "CIRCULAR_IN";
+  CurveFunctionId3["CIRCULAR_OUT"] = "CIRCULAR_OUT";
+  CurveFunctionId3["CIRCULAR_IN_OUT"] = "CIRCULAR_IN_OUT";
+  CurveFunctionId3["ELASTIC_IN"] = "ELASTIC_IN";
+  CurveFunctionId3["ELASTIC_OUT"] = "ELASTIC_OUT";
+  CurveFunctionId3["ELASTIC_IN_OUT"] = "ELASTIC_IN_OUT";
+  CurveFunctionId3["BACK_IN"] = "BACK_IN";
+  CurveFunctionId3["BACK_OUT"] = "BACK_OUT";
+  CurveFunctionId3["BACK_IN_OUT"] = "BACK_IN_OUT";
+  CurveFunctionId3["BOUNCE_IN"] = "BOUNCE_IN";
+  CurveFunctionId3["BOUNCE_OUT"] = "BOUNCE_OUT";
+  CurveFunctionId3["BOUNCE_IN_OUT"] = "BOUNCE_IN_OUT";
+  return CurveFunctionId3;
 })(CurveFunctionId || {});
 var curveFunctionIdMap = {
   ["LINEAR" /* LINEAR */]: Easing.Linear.None,
@@ -165,10 +165,10 @@ var SubEmitterTrigger = /* @__PURE__ */ ((SubEmitterTrigger2) => {
   SubEmitterTrigger2["DEATH"] = "DEATH";
   return SubEmitterTrigger2;
 })(SubEmitterTrigger || {});
-var ForceFieldType = /* @__PURE__ */ ((ForceFieldType2) => {
-  ForceFieldType2["POINT"] = "POINT";
-  ForceFieldType2["DIRECTIONAL"] = "DIRECTIONAL";
-  return ForceFieldType2;
+var ForceFieldType = /* @__PURE__ */ ((ForceFieldType3) => {
+  ForceFieldType3["POINT"] = "POINT";
+  ForceFieldType3["DIRECTIONAL"] = "DIRECTIONAL";
+  return ForceFieldType3;
 })(ForceFieldType || {});
 var RendererType = /* @__PURE__ */ ((RendererType2) => {
   RendererType2["POINTS"] = "POINTS";
@@ -177,12 +177,37 @@ var RendererType = /* @__PURE__ */ ((RendererType2) => {
   RendererType2["MESH"] = "MESH";
   return RendererType2;
 })(RendererType || {});
-var ForceFieldFalloff = /* @__PURE__ */ ((ForceFieldFalloff2) => {
-  ForceFieldFalloff2["NONE"] = "NONE";
-  ForceFieldFalloff2["LINEAR"] = "LINEAR";
-  ForceFieldFalloff2["QUADRATIC"] = "QUADRATIC";
-  return ForceFieldFalloff2;
+var ForceFieldFalloff = /* @__PURE__ */ ((ForceFieldFalloff3) => {
+  ForceFieldFalloff3["NONE"] = "NONE";
+  ForceFieldFalloff3["LINEAR"] = "LINEAR";
+  ForceFieldFalloff3["QUADRATIC"] = "QUADRATIC";
+  return ForceFieldFalloff3;
 })(ForceFieldFalloff || {});
+var CollisionPlaneMode = /* @__PURE__ */ ((CollisionPlaneMode3) => {
+  CollisionPlaneMode3["KILL"] = "KILL";
+  CollisionPlaneMode3["CLAMP"] = "CLAMP";
+  CollisionPlaneMode3["BOUNCE"] = "BOUNCE";
+  return CollisionPlaneMode3;
+})(CollisionPlaneMode || {});
+var SimulationBackend = /* @__PURE__ */ ((SimulationBackend2) => {
+  SimulationBackend2["AUTO"] = "AUTO";
+  SimulationBackend2["CPU"] = "CPU";
+  SimulationBackend2["GPU"] = "GPU";
+  return SimulationBackend2;
+})(SimulationBackend || {});
+
+// src/js/effects/three-particles/three-particles-constants.ts
+var SCALAR_STRIDE = 10;
+var S_IS_ACTIVE = 0;
+var S_LIFETIME = 1;
+var S_START_LIFETIME = 2;
+var S_START_FRAME = 3;
+var S_SIZE = 4;
+var S_ROTATION = 5;
+var S_COLOR_R = 6;
+var S_COLOR_G = 7;
+var S_COLOR_B = 8;
+var S_COLOR_A = 9;
 var calculateRandomPositionAndVelocityOnSphere = (position, quaternion, velocity, speed, {
   radius,
   radiusThickness,
@@ -227,7 +252,7 @@ var calculateRandomPositionAndVelocityOnCone = (position, quaternion, velocity,
   position.applyQuaternion(quaternion);
   const positionLength = position.length();
   const normalizedAngle = Math.abs(
-    positionLength / radius * THREE4.MathUtils.degToRad(angle)
+    positionLength / radius * THREE5.MathUtils.degToRad(angle)
   );
   const sinNormalizedAngle = Math.sin(normalizedAngle);
   const speedMultiplierByPosition = 1 / positionLength;
@@ -302,8 +327,8 @@ var calculateRandomPositionAndVelocityOnRectangle = (position, quaternion, veloc
   const _rotation = rotation;
   const xOffset = Math.random() * _scale.x - _scale.x / 2;
   const yOffset = Math.random() * _scale.y - _scale.y / 2;
-  const rotationX = THREE4.MathUtils.degToRad(_rotation.x);
-  const rotationY = THREE4.MathUtils.degToRad(_rotation.y);
+  const rotationX = THREE5.MathUtils.degToRad(_rotation.x);
+  const rotationY = THREE5.MathUtils.degToRad(_rotation.y);
   position.x = xOffset * Math.cos(rotationY);
   position.y = yOffset * Math.cos(rotationX);
   position.z = xOffset * Math.sin(rotationY) - yOffset * Math.sin(rotationX);
@@ -320,7 +345,7 @@ var createDefaultMeshTexture = () => {
     if (context) {
       context.fillStyle = "white";
       context.fillRect(0, 0, 1, 1);
-      const texture = new THREE4.CanvasTexture(canvas);
+      const texture = new THREE5.CanvasTexture(canvas);
       texture.needsUpdate = true;
       return texture;
     }
@@ -344,7 +369,7 @@ var createDefaultParticleTexture = () => {
       context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
       context.fillStyle = "white";
       context.fill();
-      const texture = new THREE4.CanvasTexture(canvas);
+      const texture = new THREE5.CanvasTexture(canvas);
       texture.needsUpdate = true;
       return texture;
     } else {
@@ -381,20 +406,21 @@ var calculateValue = (particleSystemId, value, time = 0) => {
     if (value.min === value.max) {
       return value.min ?? 0;
     }
-    return THREE4.MathUtils.randFloat(value.min ?? 0, value.max ?? 1);
+    return THREE5.MathUtils.randFloat(value.min ?? 0, value.max ?? 1);
   }
   const lifetimeCurve = value;
   return getCurveFunctionFromConfig(particleSystemId, lifetimeCurve)(time) * (lifetimeCurve.scale ?? 1);
 };
 
 // src/js/effects/three-particles/three-particles-modifiers.ts
-var noiseInput = new THREE4.Vector3(0, 0, 0);
-var orbitalEuler = new THREE4.Euler();
+var noiseInput = new THREE5.Vector3(0, 0, 0);
+var orbitalEuler = new THREE5.Euler();
 var applyModifiers = ({
   delta,
   generalData,
   normalizedConfig,
   attributes,
+  scalarArray,
   particleLifetimePercentage,
   particleIndex
 }) => {
@@ -408,6 +434,7 @@ var applyModifiers = ({
   } = generalData;
   const positionIndex = particleIndex * 3;
   const positionArr = attributes.position.array;
+  const base = particleIndex * SCALAR_STRIDE;
   if (linearVelocityData) {
     const { speed, valueModifiers } = linearVelocityData[particleIndex];
     const normalizedXSpeed = valueModifiers.x ? valueModifiers.x(particleLifetimePercentage) : speed.x;
@@ -443,8 +470,7 @@ var applyModifiers = ({
       normalizedConfig.sizeOverLifetime.lifetimeCurve,
       particleLifetimePercentage
     );
-    attributes.size.array[particleIndex] = startValues.startSize[particleIndex] * multiplier;
-    attributes.size.needsUpdate = true;
+    scalarArray[base + S_SIZE] = startValues.startSize[particleIndex] * multiplier;
   }
   if (normalizedConfig.opacityOverLifetime.isActive) {
     const multiplier = calculateValue(
@@ -452,8 +478,7 @@ var applyModifiers = ({
       normalizedConfig.opacityOverLifetime.lifetimeCurve,
       particleLifetimePercentage
     );
-    attributes.colorA.array[particleIndex] = startValues.startOpacity[particleIndex] * multiplier;
-    attributes.colorA.needsUpdate = true;
+    scalarArray[base + S_COLOR_A] = startValues.startOpacity[particleIndex] * multiplier;
   }
   if (normalizedConfig.colorOverLifetime.isActive) {
     const rMultiplier = calculateValue(
@@ -471,16 +496,12 @@ var applyModifiers = ({
       normalizedConfig.colorOverLifetime.b,
       particleLifetimePercentage
     );
-    attributes.colorR.array[particleIndex] = startValues.startColorR[particleIndex] * rMultiplier;
-    attributes.colorG.array[particleIndex] = startValues.startColorG[particleIndex] * gMultiplier;
-    attributes.colorB.array[particleIndex] = startValues.startColorB[particleIndex] * bMultiplier;
-    attributes.colorR.needsUpdate = true;
-    attributes.colorG.needsUpdate = true;
-    attributes.colorB.needsUpdate = true;
+    scalarArray[base + S_COLOR_R] = startValues.startColorR[particleIndex] * rMultiplier;
+    scalarArray[base + S_COLOR_G] = startValues.startColorG[particleIndex] * gMultiplier;
+    scalarArray[base + S_COLOR_B] = startValues.startColorB[particleIndex] * bMultiplier;
   }
   if (lifetimeValues.rotationOverLifetime) {
-    attributes.rotation.array[particleIndex] += lifetimeValues.rotationOverLifetime[particleIndex] * delta * 0.02;
-    attributes.rotation.needsUpdate = true;
+    scalarArray[base + S_ROTATION] += lifetimeValues.rotationOverLifetime[particleIndex] * delta * 0.02;
   }
   if (noise.isActive) {
     const {
@@ -498,12 +519,10 @@ var applyModifiers = ({
     noiseOnPosition = sampler.get3(noiseInput);
     positionArr[positionIndex] += noiseOnPosition * noisePower * positionAmount;
     if (rotationAmount !== 0) {
-      attributes.rotation.array[particleIndex] += noiseOnPosition * noisePower * rotationAmount;
-      attributes.rotation.needsUpdate = true;
+      scalarArray[base + S_ROTATION] += noiseOnPosition * noisePower * rotationAmount;
     }
     if (sizeAmount !== 0) {
-      attributes.size.array[particleIndex] += noiseOnPosition * noisePower * sizeAmount;
-      attributes.size.needsUpdate = true;
+      scalarArray[base + S_SIZE] += noiseOnPosition * noisePower * sizeAmount;
     }
     noiseInput.set(noisePosition, noisePosition, 0);
     noiseOnPosition = sampler.get3(noiseInput);
@@ -514,7 +533,7 @@ var applyModifiers = ({
     attributes.position.needsUpdate = true;
   }
   if (attributes.quat) {
-    const rotZ = attributes.rotation.array[particleIndex];
+    const rotZ = scalarArray[base + S_ROTATION];
     const halfZ = rotZ * 0.5;
     const qi = particleIndex * 4;
     attributes.quat.array[qi] = 0;
@@ -525,6 +544,21 @@ var applyModifiers = ({
   }
 };
 
+// src/js/effects/three-particles/three-particles-renderer-detect.ts
+function isComputeCapableRenderer(renderer) {
+  return renderer !== null && renderer !== void 0 && typeof renderer === "object" && "compute" in renderer && typeof renderer.compute === "function" && "hasFeature" in renderer && typeof renderer.hasFeature === "function";
+}
+function resolveSimulationBackend(renderer, preference = "AUTO" /* AUTO */) {
+  const gpuCapable = isComputeCapableRenderer(renderer);
+  if (preference === "CPU" /* CPU */) {
+    return "CPU" /* CPU */;
+  }
+  if (preference === "GPU" /* GPU */) {
+    return gpuCapable ? "GPU" /* GPU */ : "CPU" /* CPU */;
+  }
+  return gpuCapable ? "GPU" /* GPU */ : "CPU" /* CPU */;
+}
+
 // src/js/effects/three-particles/shaders/instanced-particle-fragment-shader.glsl.ts
 var InstancedParticleFragmentShader = `
   uniform sampler2D map;
@@ -616,10 +650,7 @@ var instanced_particle_fragment_shader_glsl_default = InstancedParticleFragmentS
 // src/js/effects/three-particles/shaders/instanced-particle-vertex-shader.glsl.ts
 var InstancedParticleVertexShader = `
   attribute float instanceSize;
-  attribute float instanceColorR;
-  attribute float instanceColorG;
-  attribute float instanceColorB;
-  attribute float instanceColorA;
+  attribute vec4 instanceColor;
   attribute float instanceLifetime;
   attribute float instanceStartLifetime;
   attribute float instanceRotation;
@@ -641,7 +672,14 @@ var InstancedParticleVertexShader = `
 
   void main()
   {
-    vColor = vec4(instanceColorR, instanceColorG, instanceColorB, instanceColorA);
+    // Early-out for dead particles: skip all transforms and emit a degenerate
+    // position that produces zero-area triangles.
+    if (instanceColor.a <= 0.0) {
+      gl_Position = vec4(0.0, 0.0, 0.0, 0.0);
+      return;
+    }
+
+    vColor = instanceColor;
     vLifetime = instanceLifetime;
     vStartLifetime = instanceStartLifetime;
     vStartFrame = instanceStartFrame;
@@ -766,10 +804,7 @@ var mesh_particle_fragment_shader_glsl_default = MeshParticleFragmentShader;
 // src/js/effects/three-particles/shaders/mesh-particle-vertex-shader.glsl.ts
 var MeshParticleVertexShader = `
   attribute float instanceSize;
-  attribute float instanceColorR;
-  attribute float instanceColorG;
-  attribute float instanceColorB;
-  attribute float instanceColorA;
+  attribute vec4 instanceColor;
   attribute float instanceLifetime;
   attribute float instanceStartLifetime;
   attribute float instanceRotation;
@@ -796,7 +831,14 @@ var MeshParticleVertexShader = `
 
   void main()
   {
-    vColor = vec4(instanceColorR, instanceColorG, instanceColorB, instanceColorA);
+    // Early-out for dead particles: skip all expensive transforms and emit
+    // a degenerate position that produces zero-area triangles.
+    if (instanceColor.a <= 0.0) {
+      gl_Position = vec4(0.0, 0.0, 0.0, 0.0);
+      return;
+    }
+
+    vColor = instanceColor;
     vLifetime = instanceLifetime;
     vStartLifetime = instanceStartLifetime;
     vStartFrame = instanceStartFrame;
@@ -922,10 +964,7 @@ var particle_system_fragment_shader_glsl_default = ParticleSystemFragmentShader;
 // src/js/effects/three-particles/shaders/particle-system-vertex-shader.glsl.ts
 var ParticleSystemVertexShader = `
   attribute float size;
-  attribute float colorR;
-  attribute float colorG;
-  attribute float colorB;
-  attribute float colorA;
+  attribute vec4 color;
   attribute float lifetime;
   attribute float startLifetime;
   attribute float rotation;
@@ -944,7 +983,7 @@ var ParticleSystemVertexShader = `
 
   void main()
   {
-    vColor = vec4(colorR, colorG, colorB, colorA);
+    vColor = color;
     vLifetime = lifetime;
     vStartLifetime = startLifetime;
     vRotation = rotation;
@@ -1088,7 +1127,69 @@ var TrailVertexShader = `
   }
 `;
 var trail_vertex_shader_glsl_default = TrailVertexShader;
-var _forceDirection = new THREE4.Vector3();
+var _planeToParticle = new THREE5.Vector3();
+var _normalComponent = new THREE5.Vector3();
+var applyCollisionPlanes = ({
+  collisionPlanes,
+  velocity,
+  positionArr,
+  positionIndex,
+  scalarArr,
+  scalarBase,
+  deactivateParticle,
+  particleIndex
+}) => {
+  for (let i = 0; i < collisionPlanes.length; i++) {
+    const plane = collisionPlanes[i];
+    if (!plane.isActive) continue;
+    const normal = plane.normal;
+    const planePos = plane.position;
+    _planeToParticle.set(
+      positionArr[positionIndex] - planePos.x,
+      positionArr[positionIndex + 1] - planePos.y,
+      positionArr[positionIndex + 2] - planePos.z
+    );
+    const signedDistance = _planeToParticle.dot(normal);
+    if (signedDistance >= 0) continue;
+    switch (plane.mode) {
+      case "KILL" /* KILL */:
+        deactivateParticle(particleIndex);
+        return true;
+      case "CLAMP" /* CLAMP */:
+        positionArr[positionIndex] = positionArr[positionIndex] - signedDistance * normal.x;
+        positionArr[positionIndex + 1] = positionArr[positionIndex + 1] - signedDistance * normal.y;
+        positionArr[positionIndex + 2] = positionArr[positionIndex + 2] - signedDistance * normal.z;
+        const velDotNormal = velocity.x * normal.x + velocity.y * normal.y + velocity.z * normal.z;
+        if (velDotNormal < 0) {
+          velocity.x -= velDotNormal * normal.x;
+          velocity.y -= velDotNormal * normal.y;
+          velocity.z -= velDotNormal * normal.z;
+        }
+        break;
+      case "BOUNCE" /* BOUNCE */: {
+        positionArr[positionIndex] = positionArr[positionIndex] - signedDistance * normal.x;
+        positionArr[positionIndex + 1] = positionArr[positionIndex + 1] - signedDistance * normal.y;
+        positionArr[positionIndex + 2] = positionArr[positionIndex + 2] - signedDistance * normal.z;
+        const vDotN = velocity.x * normal.x + velocity.y * normal.y + velocity.z * normal.z;
+        _normalComponent.set(
+          2 * vDotN * normal.x,
+          2 * vDotN * normal.y,
+          2 * vDotN * normal.z
+        );
+        velocity.x = (velocity.x - _normalComponent.x) * plane.dampen;
+        velocity.y = (velocity.y - _normalComponent.y) * plane.dampen;
+        velocity.z = (velocity.z - _normalComponent.z) * plane.dampen;
+        if (plane.lifetimeLoss > 0) {
+          const startLifetime = scalarArr[scalarBase + S_START_LIFETIME];
+          scalarArr[scalarBase + S_LIFETIME] += plane.lifetimeLoss * startLifetime;
+        }
+        break;
+      }
+    }
+  }
+  return false;
+};
+var _forceDirection = new THREE5.Vector3();
 var applyPointForce = (field, strength, velocity, positionArr, positionIndex, delta) => {
   _forceDirection.set(
     field.position.x - positionArr[positionIndex],
@@ -1169,15 +1270,29 @@ var normalizeTrailCurve = (curve, defaultCurve) => {
 };
 var _particleSystemId = 0;
 var createdParticleSystems = [];
-var _subEmitterPosition = new THREE4.Vector3();
-var _lastWorldPositionSnapshot = new THREE4.Vector3();
-var _localForceFieldPos = new THREE4.Vector3();
-var _localForceFieldDir = new THREE4.Vector3();
-var _inverseQuat = new THREE4.Quaternion();
+var setUniformFloat = (u, v) => {
+  u.value = v;
+};
+var setUniformVec3 = (u, x, y, z) => {
+  u.value.set(x, y, z);
+};
+var _tslMaterialFactory = null;
+var registerTSLMaterialFactory = (factory) => {
+  _tslMaterialFactory = factory;
+};
+var _subEmitterPosition = new THREE5.Vector3();
+var _shadowOrbitalEuler = new THREE5.Euler(0, 0, 0, "XYZ");
+var _lastWorldPositionSnapshot = new THREE5.Vector3();
+var _localForceFieldPos = new THREE5.Vector3();
+var _localForceFieldDir = new THREE5.Vector3();
+var _inverseQuat = new THREE5.Quaternion();
 var _localForceFields = [];
-new THREE4.Vector3();
-new THREE4.Vector3();
-new THREE4.Vector3();
+var _localCollisionPlanePos = new THREE5.Vector3();
+var _localCollisionPlaneNormal = new THREE5.Vector3();
+var _localCollisionPlanes = [];
+new THREE5.Vector3();
+new THREE5.Vector3();
+new THREE5.Vector3();
 var _distanceStep = { x: 0, y: 0, z: 0 };
 var _tempPosition = { x: 0, y: 0, z: 0 };
 var _modifierParams = {
@@ -1185,32 +1300,41 @@ var _modifierParams = {
   generalData: null,
   normalizedConfig: null,
   attributes: null,
+  scalarArray: null,
   particleLifetimePercentage: 0,
   particleIndex: 0
 };
-var toVector3 = (v, fallback) => v ? new THREE4.Vector3(v.x ?? 0, v.y ?? 0, v.z ?? 0) : fallback.clone();
+var toVector3 = (v, fallback) => v ? new THREE5.Vector3(v.x ?? 0, v.y ?? 0, v.z ?? 0) : fallback.clone();
 var normalizeForceFields = (rawForceFields) => (rawForceFields ?? []).map((ff) => ({
   isActive: ff.isActive ?? true,
   type: ff.type ?? "POINT" /* POINT */,
-  position: toVector3(ff.position, new THREE4.Vector3(0, 0, 0)),
-  direction: toVector3(ff.direction, new THREE4.Vector3(0, 1, 0)).normalize(),
+  position: toVector3(ff.position, new THREE5.Vector3(0, 0, 0)),
+  direction: toVector3(ff.direction, new THREE5.Vector3(0, 1, 0)).normalize(),
   strength: ff.strength ?? 1,
   range: Math.max(0, ff.range ?? Infinity),
   falloff: ff.falloff ?? "LINEAR" /* LINEAR */
 }));
+var normalizeCollisionPlanes = (rawPlanes) => (rawPlanes ?? []).map((cp) => ({
+  isActive: cp.isActive ?? true,
+  position: toVector3(cp.position, new THREE5.Vector3(0, 0, 0)),
+  normal: toVector3(cp.normal, new THREE5.Vector3(0, 1, 0)).normalize(),
+  mode: cp.mode ?? "KILL" /* KILL */,
+  dampen: Math.max(0, Math.min(1, cp.dampen ?? 0.5)),
+  lifetimeLoss: Math.max(0, Math.min(1, cp.lifetimeLoss ?? 0))
+}));
 var blendingMap = {
-  "THREE.NoBlending": THREE4.NoBlending,
-  "THREE.NormalBlending": THREE4.NormalBlending,
-  "THREE.AdditiveBlending": THREE4.AdditiveBlending,
-  "THREE.SubtractiveBlending": THREE4.SubtractiveBlending,
-  "THREE.MultiplyBlending": THREE4.MultiplyBlending
+  "THREE.NoBlending": THREE5.NoBlending,
+  "THREE.NormalBlending": THREE5.NormalBlending,
+  "THREE.AdditiveBlending": THREE5.AdditiveBlending,
+  "THREE.SubtractiveBlending": THREE5.SubtractiveBlending,
+  "THREE.MultiplyBlending": THREE5.MultiplyBlending
 };
 var getDefaultParticleSystemConfig = () => JSON.parse(JSON.stringify(DEFAULT_PARTICLE_SYSTEM_CONFIG));
 var DEFAULT_PARTICLE_SYSTEM_CONFIG = {
   transform: {
-    position: new THREE4.Vector3(),
-    rotation: new THREE4.Vector3(),
-    scale: new THREE4.Vector3(1, 1, 1)
+    position: new THREE5.Vector3(),
+    rotation: new THREE5.Vector3(),
+    scale: new THREE5.Vector3(1, 1, 1)
   },
   duration: 5,
   looping: true,
@@ -1226,6 +1350,7 @@ var DEFAULT_PARTICLE_SYSTEM_CONFIG = {
   },
   gravity: 0,
   simulationSpace: "LOCAL" /* LOCAL */,
+  simulationBackend: "AUTO" /* AUTO */,
   maxParticles: 100,
   emission: {
     rateOverTime: 10,
@@ -1262,7 +1387,7 @@ var DEFAULT_PARTICLE_SYSTEM_CONFIG = {
   },
   map: void 0,
   renderer: {
-    blending: THREE4.NormalBlending,
+    blending: THREE5.NormalBlending,
     discardBackgroundColor: false,
     backgroundColorTolerance: 1,
     backgroundColor: { r: 1, g: 1, b: 1 },
@@ -1352,30 +1477,13 @@ var DEFAULT_PARTICLE_SYSTEM_CONFIG = {
     sizeAmount: 0
   },
   textureSheetAnimation: {
-    tiles: new THREE4.Vector2(1, 1),
+    tiles: new THREE5.Vector2(1, 1),
     timeMode: "LIFETIME" /* LIFETIME */,
     fps: 30,
     startFrame: 0
   },
-  forceFields: []
-};
-var createFloat32Attributes = ({
-  geometry,
-  propertyName,
-  maxParticles,
-  factory,
-  instanced
-}) => {
-  const array = new Float32Array(maxParticles);
-  if (typeof factory === "function") {
-    for (let i = 0; i < maxParticles; i++) {
-      array[i] = factory(void 0, i);
-    }
-  } else {
-    array.fill(factory);
-  }
-  const attr = instanced ? new THREE4.InstancedBufferAttribute(array, 1) : new THREE4.BufferAttribute(array, 1);
-  geometry.setAttribute(propertyName, attr);
+  forceFields: [],
+  collisionPlanes: []
 };
 var calculatePositionAndVelocity = (generalData, { shape, sphere, cone, circle, rectangle, box }, startSpeed, position, velocity) => {
   const calculatedStartSpeed = calculateValue(
@@ -1467,14 +1575,14 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     particleSystemId: _particleSystemId++,
     normalizedLifetimePercentage: 0,
     distanceFromLastEmitByDistance: 0,
-    lastWorldPosition: new THREE4.Vector3(-99999),
-    currentWorldPosition: new THREE4.Vector3(-99999),
-    worldPositionChange: new THREE4.Vector3(),
-    worldQuaternion: new THREE4.Quaternion(),
-    wrapperQuaternion: new THREE4.Quaternion(),
-    lastWorldQuaternion: new THREE4.Quaternion(-99999),
-    worldEuler: new THREE4.Euler(),
-    gravityVelocity: new THREE4.Vector3(0, 0, 0),
+    lastWorldPosition: new THREE5.Vector3(-99999),
+    currentWorldPosition: new THREE5.Vector3(-99999),
+    worldPositionChange: new THREE5.Vector3(),
+    worldQuaternion: new THREE5.Quaternion(),
+    wrapperQuaternion: new THREE5.Quaternion(),
+    lastWorldQuaternion: new THREE5.Quaternion(-99999),
+    worldEuler: new THREE5.Euler(),
+    gravityVelocity: new THREE5.Vector3(0, 0, 0),
     startValues: {},
     linearVelocityData: void 0,
     orbitalVelocityData: void 0,
@@ -1484,9 +1592,11 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       isActive: false,
       strength: 0,
       noisePower: 0,
+      frequency: 0.5,
       positionAmount: 0,
       rotationAmount: 0,
-      sizeAmount: 0
+      sizeAmount: 0,
+      fbmMax: 1
     },
     isEnabled: true
   };
@@ -1496,6 +1606,10 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     { applyToFirstObject: false, skippedProperties: [] }
   );
   let particleMap = normalizedConfig.map || (normalizedConfig.renderer.rendererType === "MESH" /* MESH */ ? createDefaultMeshTexture() : createDefaultParticleTexture());
+  if (particleMap) {
+    particleMap.wrapS = THREE5.ClampToEdgeWrapping;
+    particleMap.wrapT = THREE5.ClampToEdgeWrapping;
+  }
   const {
     transform,
     duration,
@@ -1522,15 +1636,16 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     forceFields: rawForceFields
   } = normalizedConfig;
   const normalizedForceFields = normalizeForceFields(rawForceFields);
+  const normalizedCollisionPlanes = normalizeCollisionPlanes(normalizedConfig.collisionPlanes);
   if (typeof renderer?.blending === "string")
     renderer.blending = blendingMap[renderer.blending];
   const startPositions = Array.from(
     { length: maxParticles },
-    () => new THREE4.Vector3()
+    () => new THREE5.Vector3()
   );
   const velocities = Array.from(
     { length: maxParticles },
-    () => new THREE4.Vector3()
+    () => new THREE5.Vector3()
   );
   generalData.creationTimes = Array.from({ length: maxParticles }, () => 0);
   const freeList = Array.from(
@@ -1541,7 +1656,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     generalData.linearVelocityData = Array.from(
       { length: maxParticles },
       () => ({
-        speed: new THREE4.Vector3(
+        speed: new THREE5.Vector3(
           velocityOverLifetime.linear.x ? calculateValue(
             generalData.particleSystemId,
             velocityOverLifetime.linear.x,
@@ -1577,7 +1692,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     generalData.orbitalVelocityData = Array.from(
       { length: maxParticles },
       () => ({
-        speed: new THREE4.Vector3(
+        speed: new THREE5.Vector3(
           velocityOverLifetime.orbital.x ? calculateValue(
             generalData.particleSystemId,
             velocityOverLifetime.orbital.x,
@@ -1608,7 +1723,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
             velocityOverLifetime.orbital.z
           ) : void 0
         },
-        positionOffset: new THREE4.Vector3()
+        positionOffset: new THREE5.Vector3()
       })
     );
   }
@@ -1646,16 +1761,19 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     if (value.isActive)
       generalData.lifetimeValues[key] = Array.from(
         { length: maxParticles },
-        () => THREE4.MathUtils.randFloat(value.min, value.max)
+        () => THREE5.MathUtils.randFloat(value.min, value.max)
       );
   });
+  const fbmMax = 2 - Math.pow(2, -noise.octaves);
   generalData.noise = {
     isActive: noise.isActive,
     strength: noise.strength,
     noisePower: 0.15 * noise.strength,
+    frequency: noise.frequency,
     positionAmount: noise.positionAmount,
     rotationAmount: noise.rotationAmount,
     sizeAmount: noise.sizeAmount,
+    fbmMax,
     sampler: noise.isActive ? new FBM({
       seed: Math.random(),
       scale: noise.frequency,
@@ -1727,7 +1845,12 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
   const sharedUniforms = {
     elapsed: { value: 0 },
     map: { value: particleMap },
-    tiles: { value: textureSheetAnimation.tiles },
+    tiles: {
+      value: new THREE5.Vector2(
+        textureSheetAnimation.tiles?.x ?? 1,
+        textureSheetAnimation.tiles?.y ?? 1
+      )
+    },
     fps: { value: textureSheetAnimation.fps },
     useFPSForFrameIndex: {
       value: textureSheetAnimation.timeMode === "FPS" /* FPS */
@@ -1743,7 +1866,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     sceneDepthTexture: {
       value: renderer.softParticles?.depthTexture ?? null
     },
-    cameraNearFar: { value: new THREE4.Vector2(0.1, 1e3) }
+    cameraNearFar: { value: new THREE5.Vector2(0.1, 1e3) }
   };
   const getVertexShader = () => {
     if (useMesh) return mesh_particle_vertex_shader_glsl_default;
@@ -1755,14 +1878,41 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     if (useInstancing) return instanced_particle_fragment_shader_glsl_default;
     return particle_system_fragment_shader_glsl_default;
   };
-  const material = new THREE4.ShaderMaterial({
-    uniforms: sharedUniforms,
-    vertexShader: getVertexShader(),
-    fragmentShader: getFragmentShader(),
+  const useTSL = _tslMaterialFactory !== null;
+  const useGPUCompute = useTSL && !useTrail && normalizedConfig.simulationBackend !== "CPU" /* CPU */ && !!_tslMaterialFactory?.createComputePipeline && !!_tslMaterialFactory.writeParticleToModifierBuffers && !!_tslMaterialFactory.deactivateParticleInModifierBuffers && !!_tslMaterialFactory.flushEmitQueue;
+  let gpuPipeline = null;
+  if (useGPUCompute) {
+    gpuPipeline = _tslMaterialFactory.createComputePipeline(
+      maxParticles,
+      useInstancedAttributes,
+      normalizedConfig,
+      generalData.particleSystemId,
+      normalizedForceFields.length,
+      normalizedCollisionPlanes.length
+    );
+    if (gpuPipeline && _tslMaterialFactory.registerCurveDataLength) {
+      _tslMaterialFactory.registerCurveDataLength(
+        gpuPipeline.buffers,
+        gpuPipeline.curveDataLength
+      );
+    }
+  }
+  const rendererConfig = {
     transparent: renderer.transparent,
     blending: renderer.blending,
     depthTest: renderer.depthTest,
     depthWrite: renderer.depthWrite
+  };
+  const material = useTSL ? _tslMaterialFactory.createTSLParticleMaterial(
+    renderer.rendererType ?? "POINTS" /* POINTS */,
+    sharedUniforms,
+    rendererConfig,
+    useGPUCompute
+  ) : new THREE5.ShaderMaterial({
+    uniforms: sharedUniforms,
+    vertexShader: getVertexShader(),
+    fragmentShader: getFragmentShader(),
+    ...rendererConfig
   });
   let geometry;
   if (useMesh) {
@@ -1772,7 +1922,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
         "RendererType.MESH requires a mesh configuration with a geometry. Set renderer.mesh.geometry to a THREE.BufferGeometry instance."
       );
     }
-    const instancedGeometry = new THREE4.InstancedBufferGeometry();
+    const instancedGeometry = new THREE5.InstancedBufferGeometry();
     const sourceGeom = meshConfig.geometry;
     const srcPos = sourceGeom.getAttribute("position");
     if (srcPos) instancedGeometry.setAttribute("position", srcPos);
@@ -1785,7 +1935,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     instancedGeometry.instanceCount = maxParticles;
     geometry = instancedGeometry;
   } else if (useInstancing) {
-    const instancedGeometry = new THREE4.InstancedBufferGeometry();
+    const instancedGeometry = new THREE5.InstancedBufferGeometry();
     const quadPositions = new Float32Array([
       -0.5,
       -0.5,
@@ -1803,13 +1953,13 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     const quadIndices = new Uint16Array([0, 1, 2, 0, 2, 3]);
     instancedGeometry.setAttribute(
       "position",
-      new THREE4.BufferAttribute(quadPositions, 3)
+      new THREE5.BufferAttribute(quadPositions, 3)
     );
-    instancedGeometry.setIndex(new THREE4.BufferAttribute(quadIndices, 1));
+    instancedGeometry.setIndex(new THREE5.BufferAttribute(quadIndices, 1));
     instancedGeometry.instanceCount = maxParticles;
     geometry = instancedGeometry;
   } else {
-    geometry = new THREE4.BufferGeometry();
+    geometry = new THREE5.BufferGeometry();
   }
   for (let i = 0; i < maxParticles; i++)
     calculatePositionAndVelocity(
@@ -1819,116 +1969,126 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       startPositions[i],
       velocities[i]
     );
-  const positionArray = new Float32Array(maxParticles * 3);
+  const scalarArray = new Float32Array(maxParticles * SCALAR_STRIDE);
   for (let i = 0; i < maxParticles; i++) {
-    positionArray[i * 3] = startPositions[i].x;
-    positionArray[i * 3 + 1] = startPositions[i].y;
-    positionArray[i * 3 + 2] = startPositions[i].z;
-  }
-  const positionAttribute = useInstancedAttributes ? new THREE4.InstancedBufferAttribute(positionArray, 3) : new THREE4.BufferAttribute(positionArray, 3);
-  geometry.setAttribute(posAttr, positionAttribute);
-  createFloat32Attributes({
-    geometry,
-    propertyName: attr("isActive"),
-    maxParticles,
-    factory: 0,
-    instanced: useInstancedAttributes
-  });
-  createFloat32Attributes({
-    geometry,
-    propertyName: attr("lifetime"),
-    maxParticles,
-    factory: 0,
-    instanced: useInstancedAttributes
-  });
-  createFloat32Attributes({
-    geometry,
-    propertyName: attr("startLifetime"),
-    maxParticles,
-    factory: () => calculateValue(generalData.particleSystemId, startLifetime, 0) * 1e3,
-    instanced: useInstancedAttributes
-  });
-  createFloat32Attributes({
-    geometry,
-    propertyName: attr("startFrame"),
-    maxParticles,
-    factory: () => textureSheetAnimation.startFrame ? calculateValue(
+    const base = i * SCALAR_STRIDE;
+    scalarArray[base + S_IS_ACTIVE] = 0;
+    scalarArray[base + S_LIFETIME] = 0;
+    scalarArray[base + S_START_LIFETIME] = calculateValue(generalData.particleSystemId, startLifetime, 0) * 1e3;
+    scalarArray[base + S_START_FRAME] = textureSheetAnimation.startFrame ? calculateValue(
       generalData.particleSystemId,
       textureSheetAnimation.startFrame,
       0
-    ) : 0,
-    instanced: useInstancedAttributes
-  });
-  createFloat32Attributes({
-    geometry,
-    propertyName: attr("size"),
-    maxParticles,
-    factory: (_, index) => generalData.startValues.startSize[index],
-    instanced: useInstancedAttributes
-  });
-  createFloat32Attributes({
-    geometry,
-    propertyName: attr("rotation"),
-    maxParticles,
-    factory: 0,
-    instanced: useInstancedAttributes
-  });
-  const colorRandomRatio = Math.random();
-  createFloat32Attributes({
-    geometry,
-    propertyName: attr("colorR"),
-    maxParticles,
-    factory: () => startColor.min.r + colorRandomRatio * (startColor.max.r - startColor.min.r),
-    instanced: useInstancedAttributes
-  });
-  createFloat32Attributes({
-    geometry,
-    propertyName: attr("colorG"),
-    maxParticles,
-    factory: () => startColor.min.g + colorRandomRatio * (startColor.max.g - startColor.min.g),
-    instanced: useInstancedAttributes
-  });
-  createFloat32Attributes({
-    geometry,
-    propertyName: attr("colorB"),
-    maxParticles,
-    factory: () => startColor.min.b + colorRandomRatio * (startColor.max.b - startColor.min.b),
-    instanced: useInstancedAttributes
-  });
-  createFloat32Attributes({
-    geometry,
-    propertyName: attr("colorA"),
-    maxParticles,
-    factory: 0,
-    instanced: useInstancedAttributes
-  });
-  if (useMesh) {
+    ) : 0;
+    scalarArray[base + S_SIZE] = generalData.startValues.startSize[i];
+    scalarArray[base + S_ROTATION] = 0;
+    const colorRandomRatio = Math.random();
+    scalarArray[base + S_COLOR_R] = startColor.min.r + colorRandomRatio * (startColor.max.r - startColor.min.r);
+    scalarArray[base + S_COLOR_G] = startColor.min.g + colorRandomRatio * (startColor.max.g - startColor.min.g);
+    scalarArray[base + S_COLOR_B] = startColor.min.b + colorRandomRatio * (startColor.max.b - startColor.min.b);
+    scalarArray[base + S_COLOR_A] = 0;
+  }
+  const scalarInterleavedBuffer = useInstancedAttributes ? new THREE5.InstancedInterleavedBuffer(scalarArray, SCALAR_STRIDE) : new THREE5.InterleavedBuffer(scalarArray, SCALAR_STRIDE);
+  if (useGPUCompute && gpuPipeline) {
+    const gpuBuf = gpuPipeline.buffers;
+    geometry.setAttribute(posAttr, gpuBuf.position);
+    geometry.setAttribute(attr("color"), gpuBuf.color);
+    geometry.setAttribute(attr("particleState"), gpuBuf.particleState);
+    geometry.setAttribute(attr("startValues"), gpuBuf.startValues);
+  } else {
+    const positionArray = new Float32Array(maxParticles * 3);
+    for (let i = 0; i < maxParticles; i++) {
+      positionArray[i * 3] = startPositions[i].x;
+      positionArray[i * 3 + 1] = startPositions[i].y;
+      positionArray[i * 3 + 2] = startPositions[i].z;
+    }
+    const positionAttribute = useInstancedAttributes ? new THREE5.InstancedBufferAttribute(positionArray, 3) : new THREE5.BufferAttribute(positionArray, 3);
+    geometry.setAttribute(posAttr, positionAttribute);
+    geometry.setAttribute(
+      attr("isActive"),
+      new THREE5.InterleavedBufferAttribute(
+        scalarInterleavedBuffer,
+        1,
+        S_IS_ACTIVE
+      )
+    );
+    geometry.setAttribute(
+      attr("lifetime"),
+      new THREE5.InterleavedBufferAttribute(
+        scalarInterleavedBuffer,
+        1,
+        S_LIFETIME
+      )
+    );
+    geometry.setAttribute(
+      attr("startLifetime"),
+      new THREE5.InterleavedBufferAttribute(
+        scalarInterleavedBuffer,
+        1,
+        S_START_LIFETIME
+      )
+    );
+    geometry.setAttribute(
+      attr("startFrame"),
+      new THREE5.InterleavedBufferAttribute(
+        scalarInterleavedBuffer,
+        1,
+        S_START_FRAME
+      )
+    );
+    geometry.setAttribute(
+      attr("size"),
+      new THREE5.InterleavedBufferAttribute(scalarInterleavedBuffer, 1, S_SIZE)
+    );
+    geometry.setAttribute(
+      attr("rotation"),
+      new THREE5.InterleavedBufferAttribute(
+        scalarInterleavedBuffer,
+        1,
+        S_ROTATION
+      )
+    );
+    geometry.setAttribute(
+      attr("color"),
+      new THREE5.InterleavedBufferAttribute(
+        scalarInterleavedBuffer,
+        4,
+        S_COLOR_R
+      )
+    );
+  }
+  if (useMesh && !useGPUCompute) {
     const quatArray = new Float32Array(maxParticles * 4);
     for (let i = 0; i < maxParticles; i++) {
       quatArray[i * 4 + 3] = 1;
     }
     geometry.setAttribute(
       attr("quat"),
-      new THREE4.InstancedBufferAttribute(quatArray, 4)
+      new THREE5.InstancedBufferAttribute(quatArray, 4)
     );
   }
   const a = geometry.attributes;
   const aIsActive = a[attr("isActive")];
-  const aColorR = a[attr("colorR")];
-  const aColorG = a[attr("colorG")];
-  const aColorB = a[attr("colorB")];
-  const aColorA = a[attr("colorA")];
+  const aColor = a[attr("color")];
   const aStartFrame = a[attr("startFrame")];
   const aStartLifetime = a[attr("startLifetime")];
   const aSize = a[attr("size")];
   const aRotation = a[attr("rotation")];
   const aLifetime = a[attr("lifetime")];
   const aPosition = a[posAttr];
-  const aQuat = useMesh ? a[attr("quat")] : void 0;
+  const aQuat = useMesh && !useGPUCompute ? a[attr("quat")] : void 0;
   const deactivateParticle = (particleIndex) => {
-    aIsActive.array[particleIndex] = 0;
-    aColorA.array[particleIndex] = 0;
-    aColorA.needsUpdate = true;
+    const base = particleIndex * SCALAR_STRIDE;
+    scalarArray[base + S_IS_ACTIVE] = 0;
+    scalarArray[base + S_COLOR_A] = 0;
+    if (useGPUCompute && gpuPipeline) {
+      _tslMaterialFactory.deactivateParticleInModifierBuffers(
+        gpuPipeline.buffers,
+        particleIndex
+      );
+    } else {
+      scalarInterleavedBuffer.needsUpdate = true;
+    }
     freeList.push(particleIndex);
   };
   const activateParticle = ({
@@ -1936,7 +2096,8 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     activationTime,
     position
   }) => {
-    aIsActive.array[particleIndex] = 1;
+    const base = particleIndex * SCALAR_STRIDE;
+    scalarArray[base + S_IS_ACTIVE] = 1;
     generalData.creationTimes[particleIndex] = activationTime;
     if (generalData.positionHistoryCount) {
       generalData.positionHistoryCount[particleIndex] = 0;
@@ -1956,51 +2117,43 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     }
     if (generalData.noise.offsets)
       generalData.noise.offsets[particleIndex] = Math.random() * 100;
-    const colorRandomRatio2 = Math.random();
+    const colorRandomRatio = Math.random();
     const cfgStartColor = normalizedConfig.startColor;
-    aColorR.array[particleIndex] = cfgStartColor.min.r + colorRandomRatio2 * (cfgStartColor.max.r - cfgStartColor.min.r);
-    aColorR.needsUpdate = true;
-    aColorG.array[particleIndex] = cfgStartColor.min.g + colorRandomRatio2 * (cfgStartColor.max.g - cfgStartColor.min.g);
-    aColorG.needsUpdate = true;
-    aColorB.array[particleIndex] = cfgStartColor.min.b + colorRandomRatio2 * (cfgStartColor.max.b - cfgStartColor.min.b);
-    aColorB.needsUpdate = true;
-    generalData.startValues.startColorR[particleIndex] = aColorR.array[particleIndex];
-    generalData.startValues.startColorG[particleIndex] = aColorG.array[particleIndex];
-    generalData.startValues.startColorB[particleIndex] = aColorB.array[particleIndex];
-    aStartFrame.array[particleIndex] = normalizedConfig.textureSheetAnimation.startFrame ? calculateValue(
+    scalarArray[base + S_COLOR_R] = cfgStartColor.min.r + colorRandomRatio * (cfgStartColor.max.r - cfgStartColor.min.r);
+    scalarArray[base + S_COLOR_G] = cfgStartColor.min.g + colorRandomRatio * (cfgStartColor.max.g - cfgStartColor.min.g);
+    scalarArray[base + S_COLOR_B] = cfgStartColor.min.b + colorRandomRatio * (cfgStartColor.max.b - cfgStartColor.min.b);
+    generalData.startValues.startColorR[particleIndex] = scalarArray[base + S_COLOR_R];
+    generalData.startValues.startColorG[particleIndex] = scalarArray[base + S_COLOR_G];
+    generalData.startValues.startColorB[particleIndex] = scalarArray[base + S_COLOR_B];
+    scalarArray[base + S_START_FRAME] = normalizedConfig.textureSheetAnimation.startFrame ? calculateValue(
       generalData.particleSystemId,
       normalizedConfig.textureSheetAnimation.startFrame,
       0
     ) : 0;
-    aStartFrame.needsUpdate = true;
-    aStartLifetime.array[particleIndex] = calculateValue(
+    scalarArray[base + S_START_LIFETIME] = calculateValue(
       generalData.particleSystemId,
       normalizedConfig.startLifetime,
       generalData.normalizedLifetimePercentage
     ) * 1e3;
-    aStartLifetime.needsUpdate = true;
     generalData.startValues.startSize[particleIndex] = calculateValue(
       generalData.particleSystemId,
       normalizedConfig.startSize,
       generalData.normalizedLifetimePercentage
     );
-    aSize.array[particleIndex] = generalData.startValues.startSize[particleIndex];
-    aSize.needsUpdate = true;
+    scalarArray[base + S_SIZE] = generalData.startValues.startSize[particleIndex];
     generalData.startValues.startOpacity[particleIndex] = calculateValue(
       generalData.particleSystemId,
       normalizedConfig.startOpacity,
       generalData.normalizedLifetimePercentage
     );
-    aColorA.array[particleIndex] = generalData.startValues.startOpacity[particleIndex];
-    aColorA.needsUpdate = true;
-    aRotation.array[particleIndex] = calculateValue(
+    scalarArray[base + S_COLOR_A] = generalData.startValues.startOpacity[particleIndex];
+    scalarArray[base + S_ROTATION] = calculateValue(
       generalData.particleSystemId,
       normalizedConfig.startRotation,
       generalData.normalizedLifetimePercentage
     );
-    aRotation.needsUpdate = true;
     if (aQuat) {
-      const rotZ = aRotation.array[particleIndex];
+      const rotZ = scalarArray[base + S_ROTATION];
       const halfZ = rotZ * 0.5;
       const qi = particleIndex * 4;
       aQuat.array[qi] = 0;
@@ -2010,7 +2163,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       aQuat.needsUpdate = true;
     }
     if (normalizedConfig.rotationOverLifetime.isActive)
-      generalData.lifetimeValues.rotationOverLifetime[particleIndex] = THREE4.MathUtils.randFloat(
+      generalData.lifetimeValues.rotationOverLifetime[particleIndex] = THREE5.MathUtils.randFloat(
         normalizedConfig.rotationOverLifetime.min,
         normalizedConfig.rotationOverLifetime.max
       );
@@ -2021,11 +2174,15 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       startPositions[particleIndex],
       velocities[particleIndex]
     );
-    const positionIndex = Math.floor(particleIndex * 3);
-    aPosition.array[positionIndex] = position.x + startPositions[particleIndex].x;
-    aPosition.array[positionIndex + 1] = position.y + startPositions[particleIndex].y;
-    aPosition.array[positionIndex + 2] = position.z + startPositions[particleIndex].z;
-    aPosition.needsUpdate = true;
+    {
+      const positionIndex = particleIndex * 3;
+      aPosition.array[positionIndex] = position.x + startPositions[particleIndex].x;
+      aPosition.array[positionIndex + 1] = position.y + startPositions[particleIndex].y;
+      aPosition.array[positionIndex + 2] = position.z + startPositions[particleIndex].z;
+      if (!useGPUCompute) {
+        aPosition.needsUpdate = true;
+      }
+    }
     if (generalData.linearVelocityData) {
       generalData.linearVelocityData[particleIndex].speed.set(
         normalizedConfig.velocityOverLifetime.linear.x ? calculateValue(
@@ -2069,16 +2226,56 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
         startPositions[particleIndex].z
       );
     }
-    aLifetime.array[particleIndex] = 0;
-    aLifetime.needsUpdate = true;
-    applyModifiers({
-      delta: 0,
-      generalData,
-      normalizedConfig,
-      attributes: mappedAttributes,
-      particleLifetimePercentage: 0,
-      particleIndex
-    });
+    scalarArray[base + S_LIFETIME] = 0;
+    if (useGPUCompute && gpuPipeline) {
+      _tslMaterialFactory.writeParticleToModifierBuffers(
+        gpuPipeline.buffers,
+        particleIndex,
+        {
+          position: {
+            x: position.x + startPositions[particleIndex].x,
+            y: position.y + startPositions[particleIndex].y,
+            z: position.z + startPositions[particleIndex].z
+          },
+          velocity: {
+            x: velocities[particleIndex].x,
+            y: velocities[particleIndex].y,
+            z: velocities[particleIndex].z
+          },
+          startLifetime: scalarArray[base + S_START_LIFETIME],
+          colorA: scalarArray[base + S_COLOR_A],
+          size: scalarArray[base + S_SIZE],
+          rotation: scalarArray[base + S_ROTATION],
+          colorR: scalarArray[base + S_COLOR_R],
+          colorG: scalarArray[base + S_COLOR_G],
+          colorB: scalarArray[base + S_COLOR_B],
+          startSize: generalData.startValues.startSize[particleIndex],
+          startOpacity: generalData.startValues.startOpacity[particleIndex],
+          startColorR: generalData.startValues.startColorR[particleIndex],
+          startColorG: generalData.startValues.startColorG[particleIndex],
+          startColorB: generalData.startValues.startColorB[particleIndex],
+          rotationSpeed: generalData.lifetimeValues.rotationOverLifetime ? generalData.lifetimeValues.rotationOverLifetime[particleIndex] : 0,
+          noiseOffset: generalData.noise.offsets ? generalData.noise.offsets[particleIndex] : 0,
+          startFrame: scalarArray[base + S_START_FRAME],
+          orbitalOffset: {
+            x: startPositions[particleIndex].x,
+            y: startPositions[particleIndex].y,
+            z: startPositions[particleIndex].z
+          }
+        }
+      );
+    } else {
+      scalarInterleavedBuffer.needsUpdate = true;
+      applyModifiers({
+        delta: 0,
+        generalData,
+        normalizedConfig,
+        attributes: mappedAttributes,
+        scalarArray,
+        particleLifetimePercentage: 0,
+        particleIndex
+      });
+    }
   };
   const subEmitterArr = subEmitters ?? [];
   const deathSubEmitters = subEmitterArr.filter(
@@ -2094,17 +2291,17 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
   const cleanupCompletedInstances = (instances) => {
     for (let i = instances.length - 1; i >= 0; i--) {
       const sub = instances[i];
-      const obj3d = sub.instance instanceof THREE4.Points || sub.instance instanceof THREE4.Mesh ? sub.instance : sub.instance.children[0];
+      const obj3d = sub.instance instanceof THREE5.Points || sub.instance instanceof THREE5.Mesh ? sub.instance : sub.instance.children[0];
       const geomAttrs = obj3d?.geometry?.attributes;
-      const isActiveArr = geomAttrs ? geomAttrs.isActive?.array ?? geomAttrs.instanceIsActive?.array : void 0;
-      if (!isActiveArr) {
+      const isActiveAttr = geomAttrs ? geomAttrs.isActive ?? geomAttrs.instanceIsActive : void 0;
+      if (!isActiveAttr) {
         sub.dispose();
         instances.splice(i, 1);
         continue;
       }
       let hasActive = false;
-      for (let j = 0; j < isActiveArr.length; j++) {
-        if (isActiveArr[j]) {
+      for (let j = 0; j < isActiveAttr.count; j++) {
+        if (isActiveAttr.getX(j)) {
           hasActive = true;
           break;
         }
@@ -2128,9 +2325,12 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
         {
           ...subConfig.config,
           looping: false,
+          // Sub-emitters must always use CPU simulation because their compute
+          // nodes cannot be dispatched independently by the parent system.
+          simulationBackend: "CPU" /* CPU */,
           transform: {
             ...subConfig.config.transform,
-            position: new THREE4.Vector3(position.x, position.y, position.z)
+            position: new THREE5.Vector3(position.x, position.y, position.z)
           },
           renderer: {
             ...subConfig.config.renderer ?? {},
@@ -2152,6 +2352,9 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
   let trailPositionAttr;
   let trailAlphaAttr;
   let trailColorAttr;
+  let trailNextAttr;
+  let trailHalfWidthAttr;
+  let trailUVAttr;
   let trailIndexAttr;
   let trailWidthCurveFn;
   let trailOpacityCurveFn;
@@ -2162,7 +2365,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     const totalVertices = maxParticles * verticesPerParticle;
     const indicesPerParticle = (trailLength - 1) * 6;
     const totalIndices = maxParticles * indicesPerParticle;
-    trailGeometry = new THREE4.BufferGeometry();
+    trailGeometry = new THREE5.BufferGeometry();
     const trailPositions = new Float32Array(totalVertices * 3);
     const trailNextPositions = new Float32Array(totalVertices * 3);
     const trailAlphas = new Float32Array(totalVertices);
@@ -2189,63 +2392,63 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
         trailIndices[i + 5] = v + 2;
       }
     }
-    trailPositionAttr = new THREE4.BufferAttribute(trailPositions, 3);
-    trailPositionAttr.setUsage(THREE4.DynamicDrawUsage);
-    const trailNextAttr = new THREE4.BufferAttribute(trailNextPositions, 3);
-    trailNextAttr.setUsage(THREE4.DynamicDrawUsage);
-    trailAlphaAttr = new THREE4.BufferAttribute(trailAlphas, 1);
-    trailAlphaAttr.setUsage(THREE4.DynamicDrawUsage);
-    trailColorAttr = new THREE4.BufferAttribute(trailColors, 4);
-    trailColorAttr.setUsage(THREE4.DynamicDrawUsage);
-    const trailHalfWidthAttr = new THREE4.BufferAttribute(trailHalfWidths, 1);
-    trailHalfWidthAttr.setUsage(THREE4.DynamicDrawUsage);
-    const trailUVAttr = new THREE4.BufferAttribute(trailUVs, 2);
-    trailUVAttr.setUsage(THREE4.DynamicDrawUsage);
-    trailIndexAttr = new THREE4.BufferAttribute(trailIndices, 1);
+    trailPositionAttr = new THREE5.BufferAttribute(trailPositions, 3);
+    trailPositionAttr.setUsage(THREE5.DynamicDrawUsage);
+    trailNextAttr = new THREE5.BufferAttribute(trailNextPositions, 3);
+    trailNextAttr.setUsage(THREE5.DynamicDrawUsage);
+    trailAlphaAttr = new THREE5.BufferAttribute(trailAlphas, 1);
+    trailAlphaAttr.setUsage(THREE5.DynamicDrawUsage);
+    trailColorAttr = new THREE5.BufferAttribute(trailColors, 4);
+    trailColorAttr.setUsage(THREE5.DynamicDrawUsage);
+    trailHalfWidthAttr = new THREE5.BufferAttribute(trailHalfWidths, 1);
+    trailHalfWidthAttr.setUsage(THREE5.DynamicDrawUsage);
+    trailUVAttr = new THREE5.BufferAttribute(trailUVs, 2);
+    trailUVAttr.setUsage(THREE5.DynamicDrawUsage);
+    trailIndexAttr = new THREE5.BufferAttribute(trailIndices, 1);
     trailGeometry.setAttribute("position", trailPositionAttr);
     trailGeometry.setAttribute("trailNext", trailNextAttr);
     trailGeometry.setAttribute("trailAlpha", trailAlphaAttr);
     trailGeometry.setAttribute("trailColor", trailColorAttr);
     trailGeometry.setAttribute(
       "trailOffset",
-      new THREE4.BufferAttribute(trailOffsets, 1)
+      new THREE5.BufferAttribute(trailOffsets, 1)
     );
     trailGeometry.setAttribute("trailHalfWidth", trailHalfWidthAttr);
     trailGeometry.setAttribute("trailUV", trailUVAttr);
     trailGeometry.setIndex(trailIndexAttr);
-    const trailMaterial = new THREE4.ShaderMaterial({
-      uniforms: {
-        map: { value: particleMap },
-        useMap: { value: !!particleMap },
-        discardBackgroundColor: { value: renderer.discardBackgroundColor },
-        backgroundColor: { value: renderer.backgroundColor },
-        backgroundColorTolerance: { value: renderer.backgroundColorTolerance },
-        softParticlesEnabled: { value: softParticlesEnabled },
-        softParticlesIntensity: {
-          value: Math.max(renderer.softParticles?.intensity ?? 1, 1e-3)
-        },
-        sceneDepthTexture: {
-          value: renderer.softParticles?.depthTexture ?? null
-        },
-        cameraNearFar: { value: new THREE4.Vector2(0.1, 1e3) }
+    const trailUniformValues = {
+      map: { value: particleMap },
+      useMap: { value: !!particleMap },
+      discardBackgroundColor: { value: renderer.discardBackgroundColor },
+      backgroundColor: { value: renderer.backgroundColor },
+      backgroundColorTolerance: { value: renderer.backgroundColorTolerance },
+      softParticlesEnabled: { value: softParticlesEnabled },
+      softParticlesIntensity: {
+        value: Math.max(renderer.softParticles?.intensity ?? 1, 1e-3)
+      },
+      sceneDepthTexture: {
+        value: renderer.softParticles?.depthTexture ?? null
       },
+      cameraNearFar: { value: new THREE5.Vector2(0.1, 1e3) }
+    };
+    const trailMaterial = useTSL ? _tslMaterialFactory.createTSLTrailMaterial(
+      trailUniformValues,
+      rendererConfig
+    ) : new THREE5.ShaderMaterial({
+      uniforms: trailUniformValues,
       vertexShader: trail_vertex_shader_glsl_default,
       fragmentShader: trail_fragment_shader_glsl_default,
-      transparent: renderer.transparent,
-      blending: renderer.blending,
-      depthTest: renderer.depthTest,
-      depthWrite: renderer.depthWrite,
-      side: THREE4.DoubleSide
+      ...rendererConfig,
+      side: THREE5.DoubleSide
     });
-    trailMesh = new THREE4.Mesh(trailGeometry, trailMaterial);
+    trailMesh = new THREE5.Mesh(trailGeometry, trailMaterial);
     trailMesh.frustumCulled = false;
-    const trailCameraPos = new THREE4.Vector3();
+    const trailCameraPos = new THREE5.Vector3();
     trailMesh.onBeforeRender = (_renderer, _scene, camera) => {
       camera.getWorldPosition(trailCameraPos);
       if (softParticlesEnabled && camera.isPerspectiveCamera) {
         const perspCam = camera;
-        const trailUniforms = trailMaterial.uniforms;
-        trailUniforms.cameraNearFar.value.set(
+        trailUniformValues.cameraNearFar.value.set(
           perspCam.near,
           perspCam.far
         );
@@ -2277,11 +2480,11 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       };
     }
   }
-  let particleSystem = useInstancing || useMesh ? new THREE4.Mesh(geometry, material) : new THREE4.Points(geometry, material);
-  if (useInstancing || softParticlesEnabled) {
+  let particleSystem = useInstancing || useMesh ? new THREE5.Mesh(geometry, material) : new THREE5.Points(geometry, material);
+  if (useInstancing || softParticlesEnabled || useGPUCompute) {
     particleSystem.onBeforeRender = (glRenderer, _scene, camera) => {
       if (useInstancing) {
-        const size = glRenderer.getSize(new THREE4.Vector2());
+        const size = glRenderer.getSize(new THREE5.Vector2());
         sharedUniforms.viewportHeight.value = size.y * glRenderer.getPixelRatio();
       }
       if (softParticlesEnabled && camera.isPerspectiveCamera) {
@@ -2298,9 +2501,9 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     particleSystem.add(trailMesh);
   }
   particleSystem.position.copy(transform.position);
-  particleSystem.rotation.x = THREE4.MathUtils.degToRad(transform.rotation.x);
-  particleSystem.rotation.y = THREE4.MathUtils.degToRad(transform.rotation.y);
-  particleSystem.rotation.z = THREE4.MathUtils.degToRad(transform.rotation.z);
+  particleSystem.rotation.x = THREE5.MathUtils.degToRad(transform.rotation.x);
+  particleSystem.rotation.y = THREE5.MathUtils.degToRad(transform.rotation.y);
+  particleSystem.rotation.z = THREE5.MathUtils.degToRad(transform.rotation.z);
   particleSystem.scale.copy(transform.scale);
   const mappedAttributes = {
     position: aPosition,
@@ -2310,10 +2513,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     startFrame: aStartFrame,
     size: aSize,
     rotation: aRotation,
-    colorR: aColorR,
-    colorG: aColorG,
-    colorB: aColorB,
-    colorA: aColorA,
+    color: aColor,
     ...useMesh ? { quat: aQuat } : {}
   };
   const calculatedCreationTime = now + calculateValue(generalData.particleSystemId, startDelay) * 1e3;
@@ -2331,6 +2531,9 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       positionArr[posIdx + 1],
       positionArr[posIdx + 2]
     );
+    if (simulationSpace === "LOCAL" /* LOCAL */) {
+      particleSystem.localToWorld(_subEmitterPosition);
+    }
     spawnSubEmitters(
       deathSubEmitters,
       _subEmitterPosition,
@@ -2345,6 +2548,9 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       positionArr[posIdx + 1],
       positionArr[posIdx + 2]
     );
+    if (simulationSpace === "LOCAL" /* LOCAL */) {
+      particleSystem.localToWorld(_subEmitterPosition);
+    }
     spawnSubEmitters(
       birthSubEmitters,
       _subEmitterPosition,
@@ -2356,7 +2562,9 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     particleSystem,
     wrapper,
     mappedAttributes,
-    elapsedUniform: material.uniforms.elapsed,
+    scalarArray,
+    scalarInterleavedBuffer,
+    elapsedUniform: sharedUniforms.elapsed,
     generalData,
     onUpdate,
     onComplete,
@@ -2367,6 +2575,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     simulationSpace,
     gravity,
     normalizedForceFields,
+    normalizedCollisionPlanes,
     emission,
     normalizedConfig,
     iterationCount: 0,
@@ -2376,11 +2585,17 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     activateParticle,
     onParticleDeath,
     onParticleBirth,
+    useGPUCompute: useGPUCompute && gpuPipeline !== null,
+    computePipeline: gpuPipeline ?? void 0,
+    computeDispatchReady: false,
     ...useTrail ? {
       trailMesh,
       trailPositionAttr,
       trailAlphaAttr,
       trailColorAttr,
+      trailNextAttr,
+      trailHalfWidthAttr,
+      trailUVAttr,
       trailWidthCurveFn,
       trailOpacityCurveFn,
       trailColorOverTrailFns,
@@ -2434,15 +2649,22 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
         cfg.forceFields
       );
     }
+    if (partialConfig.collisionPlanes !== void 0) {
+      instanceData.normalizedCollisionPlanes = normalizeCollisionPlanes(
+        cfg.collisionPlanes
+      );
+    }
     if (partialConfig.noise !== void 0) {
       const n = cfg.noise;
       generalData.noise = {
         isActive: n.isActive,
         strength: n.strength,
         noisePower: 0.15 * n.strength,
+        frequency: n.frequency,
         positionAmount: n.positionAmount,
         rotationAmount: n.rotationAmount,
         sizeAmount: n.sizeAmount,
+        fbmMax: 2 - Math.pow(2, -n.octaves),
         sampler: n.isActive ? new FBM({
           seed: Math.random(),
           scale: n.frequency,
@@ -2458,7 +2680,8 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     pauseEmitter,
     dispose,
     update,
-    updateConfig
+    updateConfig,
+    computeNode: gpuPipeline?.computeNode ?? null
   };
 };
 var updateParticleSystemInstance = (props, { now, delta, elapsed }) => {
@@ -2483,11 +2706,15 @@ var updateParticleSystemInstance = (props, { now, delta, elapsed }) => {
     simulationSpace,
     gravity,
     normalizedForceFields,
+    normalizedCollisionPlanes,
     onParticleDeath,
     onParticleBirth,
-    mappedAttributes: ma
+    mappedAttributes: ma,
+    useGPUCompute,
+    computePipeline
   } = props;
   const hasForceFields = normalizedForceFields.length > 0;
+  const hasCollisionPlanes = normalizedCollisionPlanes.length > 0;
   const lifetime = now - creationTime;
   const normalizedLifetime = lifetime % (duration * 1e3);
   generalData.normalizedLifetimePercentage = Math.max(
@@ -2541,8 +2768,8 @@ var updateParticleSystemInstance = (props, { now, delta, elapsed }) => {
         dst = {
           isActive: true,
           type: "POINT" /* POINT */,
-          position: new THREE4.Vector3(),
-          direction: new THREE4.Vector3(),
+          position: new THREE5.Vector3(),
+          direction: new THREE5.Vector3(),
           strength: 0,
           range: 0,
           falloff: "LINEAR" /* LINEAR */
@@ -2562,42 +2789,123 @@ var updateParticleSystemInstance = (props, { now, delta, elapsed }) => {
       dst.direction.copy(_localForceFieldDir);
     }
   }
+  if (hasCollisionPlanes) {
+    if (!hasForceFields) _inverseQuat.copy(worldQuaternion).invert();
+    _localCollisionPlanes.length = normalizedCollisionPlanes.length;
+    for (let i = 0; i < normalizedCollisionPlanes.length; i++) {
+      const src = normalizedCollisionPlanes[i];
+      let dst = _localCollisionPlanes[i];
+      if (!dst) {
+        dst = {
+          isActive: true,
+          position: new THREE5.Vector3(),
+          normal: new THREE5.Vector3(),
+          mode: "KILL" /* KILL */,
+          dampen: 0.5,
+          lifetimeLoss: 0
+        };
+        _localCollisionPlanes[i] = dst;
+      }
+      dst.isActive = src.isActive;
+      dst.mode = src.mode;
+      dst.dampen = src.dampen;
+      dst.lifetimeLoss = src.lifetimeLoss;
+      _localCollisionPlanePos.copy(src.position);
+      particleSystem.worldToLocal(_localCollisionPlanePos);
+      dst.position.copy(_localCollisionPlanePos);
+      _localCollisionPlaneNormal.copy(src.normal);
+      _localCollisionPlaneNormal.applyQuaternion(_inverseQuat);
+      dst.normal.copy(_localCollisionPlaneNormal);
+    }
+  }
   const creationTimes = generalData.creationTimes;
-  const isActiveArr = ma.isActive.array;
-  const startLifetimeArr = ma.startLifetime.array;
+  const scalarArr = props.scalarArray;
   const positionArr = ma.position.array;
-  const lifetimeArr = ma.lifetime.array;
   const creationTimesLength = creationTimes.length;
-  let positionNeedsUpdate = false;
-  let lifetimeNeedsUpdate = false;
-  _modifierParams.delta = delta;
-  _modifierParams.generalData = generalData;
-  _modifierParams.normalizedConfig = normalizedConfig;
-  _modifierParams.attributes = ma;
-  for (let index = 0; index < creationTimesLength; index++) {
-    if (isActiveArr[index]) {
-      const particleLifetime = now - creationTimes[index];
-      if (particleLifetime > startLifetimeArr[index]) {
-        if (onParticleDeath)
-          onParticleDeath(index, positionArr, velocities[index], now);
-        deactivateParticle(index);
-      } else {
-        const velocity = velocities[index];
-        velocity.x -= gravityVelocity.x * delta;
-        velocity.y -= gravityVelocity.y * delta;
-        velocity.z -= gravityVelocity.z * delta;
-        if (hasForceFields) {
-          applyForceFields({
-            particleSystemId: generalData.particleSystemId,
-            forceFields: _localForceFields,
-            velocity,
-            positionArr,
-            positionIndex: index * 3,
-            delta,
-            systemLifetimePercentage: generalData.normalizedLifetimePercentage
-          });
-        }
-        if (gravity !== 0 || velocity.x !== 0 || velocity.y !== 0 || velocity.z !== 0 || worldPositionChange.x !== 0 || worldPositionChange.y !== 0 || worldPositionChange.z !== 0) {
+  if (useGPUCompute && computePipeline) {
+    const cp = computePipeline;
+    setUniformFloat(cp.uniforms.delta, delta);
+    setUniformFloat(cp.uniforms.deltaMs, delta * 1e3);
+    setUniformVec3(
+      cp.uniforms.gravityVelocity,
+      gravityVelocity.x,
+      gravityVelocity.y,
+      gravityVelocity.z
+    );
+    setUniformVec3(
+      cp.uniforms.worldPositionChange,
+      generalData.worldPositionChange.x,
+      generalData.worldPositionChange.y,
+      generalData.worldPositionChange.z
+    );
+    setUniformFloat(
+      cp.uniforms.simulationSpaceWorld,
+      simulationSpace === "WORLD" /* WORLD */ ? 1 : 0
+    );
+    const noiseData = generalData.noise;
+    setUniformFloat(cp.uniforms.noiseStrength, noiseData.strength);
+    setUniformFloat(
+      cp.uniforms.noisePower,
+      noiseData.noisePower / noiseData.fbmMax
+    );
+    setUniformFloat(cp.uniforms.noiseFrequency, noiseData.frequency);
+    setUniformFloat(cp.uniforms.noisePositionAmount, noiseData.positionAmount);
+    setUniformFloat(cp.uniforms.noiseRotationAmount, noiseData.rotationAmount);
+    setUniformFloat(cp.uniforms.noiseSizeAmount, noiseData.sizeAmount);
+    if (cp.forceFieldInfo && hasForceFields && _tslMaterialFactory?.encodeForceFieldsForGPU) {
+      const encodedFF = _tslMaterialFactory.encodeForceFieldsForGPU(
+        _localForceFields,
+        generalData.particleSystemId,
+        generalData.normalizedLifetimePercentage
+      );
+      const curveArr = cp.buffers.curveData.array;
+      curveArr.set(encodedFF, cp.forceFieldInfo.offset);
+      cp.buffers.curveData.needsUpdate = true;
+      setUniformFloat(
+        cp.forceFieldInfo.countUniform,
+        normalizedForceFields.length
+      );
+    }
+    if (cp.collisionPlaneInfo && hasCollisionPlanes && _tslMaterialFactory?.encodeCollisionPlanesForGPU) {
+      const encodedCP = _tslMaterialFactory.encodeCollisionPlanesForGPU(
+        _localCollisionPlanes
+      );
+      const curveArr = cp.buffers.curveData.array;
+      curveArr.set(encodedCP, cp.collisionPlaneInfo.offset);
+      cp.buffers.curveData.needsUpdate = true;
+      setUniformFloat(
+        cp.collisionPlaneInfo.countUniform,
+        normalizedCollisionPlanes.length
+      );
+    }
+    if (_tslMaterialFactory?.flushEmitQueue) {
+      _tslMaterialFactory.flushEmitQueue(cp.buffers);
+    }
+    props.computeDispatchReady = true;
+    for (let index = 0; index < creationTimesLength; index++) {
+      const base = index * SCALAR_STRIDE;
+      if (scalarArr[base + S_IS_ACTIVE]) {
+        const particleLifetime = now - creationTimes[index];
+        if (particleLifetime > scalarArr[base + S_START_LIFETIME]) {
+          if (onParticleDeath)
+            onParticleDeath(index, positionArr, velocities[index], now);
+          deactivateParticle(index);
+        } else if (onParticleDeath) {
+          const velocity = velocities[index];
+          velocity.x -= gravityVelocity.x * delta;
+          velocity.y -= gravityVelocity.y * delta;
+          velocity.z -= gravityVelocity.z * delta;
+          if (hasForceFields) {
+            applyForceFields({
+              particleSystemId: generalData.particleSystemId,
+              forceFields: _localForceFields,
+              velocity,
+              positionArr,
+              positionIndex: index * 3,
+              delta,
+              systemLifetimePercentage: generalData.normalizedLifetimePercentage
+            });
+          }
           const positionIndex = index * 3;
           if (simulationSpace === "WORLD" /* WORLD */) {
             positionArr[positionIndex] -= worldPositionChange.x;
@@ -2607,18 +2915,116 @@ var updateParticleSystemInstance = (props, { now, delta, elapsed }) => {
           positionArr[positionIndex] += velocity.x * delta;
           positionArr[positionIndex + 1] += velocity.y * delta;
           positionArr[positionIndex + 2] += velocity.z * delta;
-          positionNeedsUpdate = true;
+          if (generalData.orbitalVelocityData) {
+            const orbData = generalData.orbitalVelocityData[index];
+            const { speed, positionOffset, valueModifiers } = orbData;
+            const pctLife = particleLifetime / scalarArr[base + S_START_LIFETIME];
+            positionArr[positionIndex] -= positionOffset.x;
+            positionArr[positionIndex + 1] -= positionOffset.y;
+            positionArr[positionIndex + 2] -= positionOffset.z;
+            const sx = valueModifiers.x ? valueModifiers.x(pctLife) : speed.x;
+            const sy = valueModifiers.y ? valueModifiers.y(pctLife) : speed.y;
+            const sz = valueModifiers.z ? valueModifiers.z(pctLife) : speed.z;
+            _shadowOrbitalEuler.set(sx * delta, sz * delta, sy * delta);
+            positionOffset.applyEuler(_shadowOrbitalEuler);
+            positionArr[positionIndex] += positionOffset.x;
+            positionArr[positionIndex + 1] += positionOffset.y;
+            positionArr[positionIndex + 2] += positionOffset.z;
+          }
+          if (hasCollisionPlanes) {
+            applyCollisionPlanes({
+              collisionPlanes: _localCollisionPlanes,
+              velocity,
+              positionArr,
+              positionIndex,
+              scalarArr,
+              scalarBase: base,
+              deactivateParticle: (pi) => {
+                if (onParticleDeath)
+                  onParticleDeath(pi, positionArr, velocities[pi], now);
+                deactivateParticle(pi);
+              },
+              particleIndex: index
+            });
+          }
+        }
+      }
+    }
+  } else {
+    let positionNeedsUpdate = false;
+    let scalarNeedsUpdate = false;
+    _modifierParams.delta = delta;
+    _modifierParams.generalData = generalData;
+    _modifierParams.normalizedConfig = normalizedConfig;
+    _modifierParams.attributes = ma;
+    _modifierParams.scalarArray = scalarArr;
+    for (let index = 0; index < creationTimesLength; index++) {
+      const base = index * SCALAR_STRIDE;
+      if (scalarArr[base + S_IS_ACTIVE]) {
+        const particleLifetime = now - creationTimes[index];
+        if (particleLifetime > scalarArr[base + S_START_LIFETIME]) {
+          if (onParticleDeath)
+            onParticleDeath(index, positionArr, velocities[index], now);
+          deactivateParticle(index);
+        } else {
+          const velocity = velocities[index];
+          velocity.x -= gravityVelocity.x * delta;
+          velocity.y -= gravityVelocity.y * delta;
+          velocity.z -= gravityVelocity.z * delta;
+          if (hasForceFields) {
+            applyForceFields({
+              particleSystemId: generalData.particleSystemId,
+              forceFields: _localForceFields,
+              velocity,
+              positionArr,
+              positionIndex: index * 3,
+              delta,
+              systemLifetimePercentage: generalData.normalizedLifetimePercentage
+            });
+          }
+          if (gravity !== 0 || velocity.x !== 0 || velocity.y !== 0 || velocity.z !== 0 || worldPositionChange.x !== 0 || worldPositionChange.y !== 0 || worldPositionChange.z !== 0) {
+            const positionIndex = index * 3;
+            if (simulationSpace === "WORLD" /* WORLD */) {
+              positionArr[positionIndex] -= worldPositionChange.x;
+              positionArr[positionIndex + 1] -= worldPositionChange.y;
+              positionArr[positionIndex + 2] -= worldPositionChange.z;
+            }
+            positionArr[positionIndex] += velocity.x * delta;
+            positionArr[positionIndex + 1] += velocity.y * delta;
+            positionArr[positionIndex + 2] += velocity.z * delta;
+            positionNeedsUpdate = true;
+          }
+          if (hasCollisionPlanes) {
+            const killed = applyCollisionPlanes({
+              collisionPlanes: _localCollisionPlanes,
+              velocity,
+              positionArr,
+              positionIndex: index * 3,
+              scalarArr,
+              scalarBase: base,
+              deactivateParticle: (pi) => {
+                if (onParticleDeath)
+                  onParticleDeath(pi, positionArr, velocities[pi], now);
+                deactivateParticle(pi);
+              },
+              particleIndex: index
+            });
+            if (killed) {
+              positionNeedsUpdate = true;
+              continue;
+            }
+          }
+          scalarArr[base + S_LIFETIME] = particleLifetime;
+          scalarNeedsUpdate = true;
+          _modifierParams.particleLifetimePercentage = particleLifetime / scalarArr[base + S_START_LIFETIME];
+          _modifierParams.particleIndex = index;
+          applyModifiers(_modifierParams);
         }
-        lifetimeArr[index] = particleLifetime;
-        lifetimeNeedsUpdate = true;
-        _modifierParams.particleLifetimePercentage = particleLifetime / startLifetimeArr[index];
-        _modifierParams.particleIndex = index;
-        applyModifiers(_modifierParams);
       }
     }
+    if (positionNeedsUpdate) ma.position.needsUpdate = true;
+    if (scalarNeedsUpdate) props.scalarInterleavedBuffer.needsUpdate = true;
   }
-  if (positionNeedsUpdate) ma.position.needsUpdate = true;
-  if (lifetimeNeedsUpdate) ma.lifetime.needsUpdate = true;
   if (isEnabled && (looping || lifetime < duration * 1e3)) {
     const emissionDelta = now - lastEmissionTime;
     const neededParticlesByTime = emission.rateOverTime ? Math.floor(
@@ -2809,13 +3215,16 @@ var updateTrailGeometry = (props, now) => {
     trailPositionAttr,
     trailAlphaAttr,
     trailColorAttr,
+    trailNextAttr: trailNextAttrCached,
+    trailHalfWidthAttr: trailHalfWidthAttrCached,
+    trailUVAttr: trailUVAttrCached,
     trailWidthCurveFn,
     trailOpacityCurveFn,
     trailColorOverTrailFns,
     trailConfig,
     mappedAttributes: ma
   } = props;
-  if (!trailPositionAttr || !trailAlphaAttr || !trailColorAttr || !trailWidthCurveFn || !trailOpacityCurveFn || !trailConfig || !generalData.positionHistory || !generalData.positionHistoryIndex || !generalData.positionHistoryCount)
+  if (!trailPositionAttr || !trailAlphaAttr || !trailColorAttr || !trailNextAttrCached || !trailHalfWidthAttrCached || !trailUVAttrCached || !trailWidthCurveFn || !trailOpacityCurveFn || !trailConfig || !generalData.positionHistory || !generalData.positionHistoryIndex || !generalData.positionHistoryCount)
     return;
   const trailLength = trailConfig.length;
   const positionHistory = generalData.positionHistory;
@@ -2832,19 +3241,14 @@ var updateTrailGeometry = (props, now) => {
   const subdivisions = trailConfig.smoothingSubdivisions;
   const useTwistPrevention = trailConfig.twistPrevention;
   const ribbonId = trailConfig.ribbonId;
-  const isActiveArr = ma.isActive.array;
+  const trailScalarArr = props.scalarArray;
   const positionArr = ma.position.array;
-  const colorRArr = ma.colorR.array;
-  const colorGArr = ma.colorG.array;
-  const colorBArr = ma.colorB.array;
-  const colorAArr = ma.colorA.array;
   const trailPosArr = trailPositionAttr.array;
   const trailAlphaArr = trailAlphaAttr.array;
   const trailColorArr = trailColorAttr.array;
-  const trailMesh = props.trailMesh;
-  const trailNextArr = trailMesh.geometry.getAttribute("trailNext").array;
-  const trailUVArr = trailMesh.geometry.getAttribute("trailUV").array;
-  const trailHalfWidthArr = trailMesh.geometry.getAttribute("trailHalfWidth").array;
+  const trailNextArr = trailNextAttrCached.array;
+  const trailUVArr = trailUVAttrCached.array;
+  const trailHalfWidthArr = trailHalfWidthAttrCached.array;
   const verticesPerParticle = trailLength * 2;
   const creationTimesLength = generalData.creationTimes.length;
   let hasUpdates = false;
@@ -2857,7 +3261,8 @@ var updateTrailGeometry = (props, now) => {
     }
     _ribbonCount = 0;
     for (let i = 0; i < creationTimesLength; i++) {
-      if (isActiveArr[i]) _ribbonIndices[_ribbonCount++] = i;
+      if (trailScalarArr[i * SCALAR_STRIDE + S_IS_ACTIVE])
+        _ribbonIndices[_ribbonCount++] = i;
     }
     for (let i = 1; i < _ribbonCount; i++) {
       const key = _ribbonIndices[i];
@@ -2873,7 +3278,7 @@ var updateTrailGeometry = (props, now) => {
   }
   for (let index = 0; index < creationTimesLength; index++) {
     const vertBase = index * verticesPerParticle;
-    if (isActiveArr[index]) {
+    if (trailScalarArr[index * SCALAR_STRIDE + S_IS_ACTIVE]) {
       if (useRibbon && _ribbonCount >= 2 && index !== ribbonLeader) {
         const posIdx2 = index * 3;
         const px2 = positionArr[posIdx2];
@@ -2939,10 +3344,11 @@ var updateTrailGeometry = (props, now) => {
       }
       const count = effectiveCount;
       const ribbonWidth = trailConfig.width;
-      const cr = colorRArr[index];
-      const cg = colorGArr[index];
-      const cb = colorBArr[index];
-      const ca = colorAArr[index];
+      const trailBase = index * SCALAR_STRIDE;
+      const cr = trailScalarArr[trailBase + S_COLOR_R];
+      const cg = trailScalarArr[trailBase + S_COLOR_G];
+      const cb = trailScalarArr[trailBase + S_COLOR_B];
+      const ca = trailScalarArr[trailBase + S_COLOR_A];
       const ringOff = index * trailLength * 3;
       const rawPtsSize = count * 3;
       if (!_rawPoints || _rawPointsSize < rawPtsSize) {
@@ -3073,6 +3479,13 @@ var updateTrailGeometry = (props, now) => {
           nx = finalPts[(s + 1) * 3];
           ny = finalPts[(s + 1) * 3 + 1];
           nz = finalPts[(s + 1) * 3 + 2];
+        } else if (finalCount >= 2) {
+          const prevX = finalPts[(s - 1) * 3];
+          const prevY = finalPts[(s - 1) * 3 + 1];
+          const prevZ = finalPts[(s - 1) * 3 + 2];
+          nx = hx + (hx - prevX);
+          ny = hy + (hy - prevY);
+          nz = hz + (hz - prevZ);
         } else {
           nx = hx;
           ny = hy + 1e-3;
@@ -3081,14 +3494,24 @@ var updateTrailGeometry = (props, now) => {
         const t = finalCount > 1 ? s / (finalCount - 1) : 0;
         let timeFade = 1;
         if (maxTime > 0 && sampleTimes && effectiveCount > 0) {
-          const rawS = useSmoothing ? Math.min(
-            Math.floor(s / Math.max(finalCount - 1, 1) * (rawCount - 1)),
-            rawCount - 1
-          ) : Math.min(s, rawCount - 1);
-          const sampleSlot = (historyIndex[index] - 1 - rawS + trailLength * 2) % trailLength;
           const sampleBase = index * trailLength;
-          const age = now - sampleTimes[sampleBase + sampleSlot];
-          timeFade = 1 - Math.min(age / maxTimeMs, 1);
+          if (useSmoothing && rawCount >= 2) {
+            const rawF = s / Math.max(finalCount - 1, 1) * (rawCount - 1);
+            const rawLo = Math.min(Math.floor(rawF), rawCount - 1);
+            const rawHi = Math.min(rawLo + 1, rawCount - 1);
+            const frac = rawF - rawLo;
+            const slotLo = (historyIndex[index] - 1 - rawLo + trailLength * 2) % trailLength;
+            const slotHi = (historyIndex[index] - 1 - rawHi + trailLength * 2) % trailLength;
+            const ageLo = now - sampleTimes[sampleBase + slotLo];
+            const ageHi = now - sampleTimes[sampleBase + slotHi];
+            const age = ageLo + (ageHi - ageLo) * frac;
+            timeFade = 1 - Math.min(age / maxTimeMs, 1);
+          } else {
+            const rawS = Math.min(s, rawCount - 1);
+            const sampleSlot = (historyIndex[index] - 1 - rawS + trailLength * 2) % trailLength;
+            const age = now - sampleTimes[sampleBase + sampleSlot];
+            timeFade = 1 - Math.min(age / maxTimeMs, 1);
+          }
         }
         const widthScale = trailWidthCurveFn(t);
         const opacityScale = trailOpacityCurveFn(t);
@@ -3265,10 +3688,11 @@ var updateTrailGeometry = (props, now) => {
         _rawPoints[(wi - 1) * 3 + 2] = positionArr[lastPIdx + 2];
       }
     }
-    const leaderCr = colorRArr[leader];
-    const leaderCg = colorGArr[leader];
-    const leaderCb = colorBArr[leader];
-    const leaderCa = colorAArr[leader];
+    const leaderBase = leader * SCALAR_STRIDE;
+    const leaderCr = trailScalarArr[leaderBase + S_COLOR_R];
+    const leaderCg = trailScalarArr[leaderBase + S_COLOR_G];
+    const leaderCb = trailScalarArr[leaderBase + S_COLOR_B];
+    const leaderCa = trailScalarArr[leaderBase + S_COLOR_A];
     for (let s = 0; s < trailLength; s++) {
       const vIdx = (leaderVertBase + s * 2) * 3;
       const cIdx = (leaderVertBase + s * 2) * 4;
@@ -3321,16 +3745,34 @@ var updateTrailGeometry = (props, now) => {
         nx = _rawPoints[(s + 1) * 3];
         ny = _rawPoints[(s + 1) * 3 + 1];
         nz = _rawPoints[(s + 1) * 3 + 2];
+      } else if (filledCount >= 2) {
+        const prevX = _rawPoints[(s - 1) * 3];
+        const prevY = _rawPoints[(s - 1) * 3 + 1];
+        const prevZ = _rawPoints[(s - 1) * 3 + 2];
+        nx = ptx + (ptx - prevX);
+        ny = pty + (pty - prevY);
+        nz = ptz + (ptz - prevZ);
       } else {
         nx = ptx;
         ny = pty + 1e-3;
         nz = ptz;
       }
       const t = filledCount > 1 ? s / (filledCount - 1) : 0;
+      let ribbonTimeFade = 1;
+      if (maxTime > 0 && controlCount >= 2) {
+        const ctrlF = t * (controlCount - 1);
+        const ctrlLo = Math.min(Math.floor(ctrlF), controlCount - 1);
+        const ctrlHi = Math.min(ctrlLo + 1, controlCount - 1);
+        const frac = ctrlF - ctrlLo;
+        const ageLo = now - generalData.creationTimes[_ribbonIndices[ctrlLo]];
+        const ageHi = now - generalData.creationTimes[_ribbonIndices[ctrlHi]];
+        const age = ageLo + (ageHi - ageLo) * frac;
+        ribbonTimeFade = 1 - Math.min(age / maxTimeMs, 1);
+      }
       const widthScale = trailWidthCurveFn(t);
       const opacityScale = trailOpacityCurveFn(t);
       const halfWidth = trailConfig.width * widthScale * 0.5;
-      const alpha = leaderCa * opacityScale;
+      const alpha = leaderCa * opacityScale * ribbonTimeFade;
       const fr = trailColorOverTrailFns ? leaderCr * trailColorOverTrailFns.r(t) : leaderCr;
       const fg = trailColorOverTrailFns ? leaderCg * trailColorOverTrailFns.g(t) : leaderCg;
       const fb = trailColorOverTrailFns ? leaderCb * trailColorOverTrailFns.b(t) : leaderCb;
@@ -3360,6 +3802,55 @@ var updateTrailGeometry = (props, now) => {
         trailColorArr
       );
     }
+    if (useTwistPrevention && prevNormal && filledCount >= 2) {
+      const nIdx = leader * 3;
+      const tx = _rawPoints[3] - _rawPoints[0];
+      const ty = _rawPoints[4] - _rawPoints[1];
+      const tz = _rawPoints[5] - _rawPoints[2];
+      const tLen = Math.sqrt(tx * tx + ty * ty + tz * tz);
+      if (tLen > 1e-4) {
+        const ntx = tx / tLen;
+        const nty = ty / tLen;
+        const ntz = tz / tLen;
+        let upx = 0, upy = 1, upz = 0;
+        const dot = ntx * upx + nty * upy + ntz * upz;
+        if (Math.abs(dot) > 0.999) {
+          upx = 1;
+          upy = 0;
+          upz = 0;
+        }
+        let cnx = nty * upz - ntz * upy;
+        let cny = ntz * upx - ntx * upz;
+        let cnz = ntx * upy - nty * upx;
+        const cnLen = Math.sqrt(cnx * cnx + cny * cny + cnz * cnz);
+        if (cnLen > 1e-4) {
+          cnx /= cnLen;
+          cny /= cnLen;
+          cnz /= cnLen;
+        }
+        const prevNx = prevNormal[nIdx];
+        const prevNy = prevNormal[nIdx + 1];
+        const prevNz = prevNormal[nIdx + 2];
+        const hasPrev = prevNx !== 0 || prevNy !== 0 || prevNz !== 0;
+        if (hasPrev) {
+          const normalDot = cnx * prevNx + cny * prevNy + cnz * prevNz;
+          if (normalDot < 0) {
+            for (let s = 0; s < Math.min(filledCount, trailLength); s++) {
+              const aIdx = leaderVertBase + s * 2;
+              const hw = trailHalfWidthArr[aIdx];
+              trailHalfWidthArr[aIdx] = -hw;
+              trailHalfWidthArr[aIdx + 1] = -hw;
+            }
+            cnx = -cnx;
+            cny = -cny;
+            cnz = -cnz;
+          }
+        }
+        prevNormal[nIdx] = cnx;
+        prevNormal[nIdx + 1] = cny;
+        prevNormal[nIdx + 2] = cnz;
+      }
+    }
     for (let ri = 1; ri < _ribbonCount; ri++) {
       const pIdx = _ribbonIndices[ri];
       const pVertBase = pIdx * verticesPerParticle;
@@ -3390,18 +3881,9 @@ var updateTrailGeometry = (props, now) => {
     trailPositionAttr.needsUpdate = true;
     trailAlphaAttr.needsUpdate = true;
     trailColorAttr.needsUpdate = true;
-    const nextAttr = trailMesh.geometry.getAttribute(
-      "trailNext"
-    );
-    const hwAttr = trailMesh.geometry.getAttribute(
-      "trailHalfWidth"
-    );
-    nextAttr.needsUpdate = true;
-    hwAttr.needsUpdate = true;
-    const uvAttr = trailMesh.geometry.getAttribute(
-      "trailUV"
-    );
-    uvAttr.needsUpdate = true;
+    trailNextAttrCached.needsUpdate = true;
+    trailHalfWidthAttrCached.needsUpdate = true;
+    trailUVAttrCached.needsUpdate = true;
   }
 };
 var updateParticleSystems = (cycleData) => {
@@ -3410,6 +3892,253 @@ var updateParticleSystems = (cycleData) => {
   );
 };
 
-export { CurveFunctionId, EmitFrom, ForceFieldFalloff, ForceFieldType, LifeTimeCurve, RendererType, Shape, SimulationSpace, SubEmitterTrigger, TimeMode, applyModifiers, blendingMap, calculateRandomPositionAndVelocityOnBox, calculateRandomPositionAndVelocityOnCircle, calculateRandomPositionAndVelocityOnCone, calculateRandomPositionAndVelocityOnRectangle, calculateRandomPositionAndVelocityOnSphere, calculateValue, createBezierCurveFunction, createDefaultMeshTexture, createDefaultParticleTexture, createParticleSystem, curveFunctionIdMap, getBezierCacheSize, getCurveFunction, getCurveFunctionFromConfig, getDefaultParticleSystemConfig, isLifeTimeCurve, removeBezierCurveFunction, updateParticleSystems };
+// src/js/effects/three-particles/three-particles-serialization.ts
+var SERIALIZATION_VERSION = 1;
+var reverseBlendingMap = new Map(
+  Object.entries(blendingMap).map(([k, v]) => [
+    v,
+    k
+  ])
+);
+var reverseCurveFunctionMap = /* @__PURE__ */ new Map();
+for (const [id, fn] of Object.entries(curveFunctionIdMap)) {
+  if (fn) reverseCurveFunctionMap.set(fn, id);
+}
+function serializeAny(value, key) {
+  if (value === null || value === void 0) return value;
+  if (value instanceof THREE5.Vector3)
+    return { x: value.x, y: value.y, z: value.z };
+  if (value instanceof THREE5.Vector2) return { x: value.x, y: value.y };
+  if (value instanceof THREE5.Texture) return void 0;
+  if (typeof value === "function") return void 0;
+  if (Array.isArray(value)) return value.map((item) => serializeAny(item));
+  if (typeof value === "object") {
+    const obj = value;
+    if (obj["type"] === "EASING" /* EASING */ && typeof obj["curveFunction"] === "function") {
+      const id = reverseCurveFunctionMap.get(
+        obj["curveFunction"]
+      );
+      if (!id) {
+        throw new Error(
+          "Cannot serialize a custom curveFunction. Use a predefined CurveFunctionId instead."
+        );
+      }
+      return {
+        type: "EASING" /* EASING */,
+        curveFunctionId: id,
+        ...obj["scale"] !== void 0 ? { scale: obj["scale"] } : {}
+      };
+    }
+    const result = {};
+    for (const [k, v] of Object.entries(obj)) {
+      if (k === "onUpdate" || k === "onComplete") continue;
+      if (k === "blending" && typeof v === "number") {
+        result[k] = reverseBlendingMap.get(v) ?? v;
+        continue;
+      }
+      const serialized = serializeAny(v);
+      if (serialized !== void 0) result[k] = serialized;
+    }
+    return result;
+  }
+  return value;
+}
+function serializeParticleSystem(config) {
+  const serialized = serializeAny(config);
+  return JSON.stringify({ _version: SERIALIZATION_VERSION, ...serialized });
+}
+function deserializeCurve(raw) {
+  const obj = raw;
+  if (Array.isArray(obj["bezierPoints"]) && !obj["type"]) {
+    return { type: "BEZIER" /* BEZIER */, ...obj };
+  }
+  if (obj["type"] === "EASING" /* EASING */) {
+    const id = obj["curveFunctionId"];
+    const fn = getCurveFunction(id);
+    if (!fn) {
+      throw new Error(
+        `Unknown curveFunctionId: "${id}". Use a value from CurveFunctionId.`
+      );
+    }
+    const curve = {
+      type: "EASING" /* EASING */,
+      curveFunction: fn
+    };
+    if (obj["scale"] !== void 0) curve.scale = obj["scale"];
+    return curve;
+  }
+  return obj;
+}
+function deserializeCurveOrValue(value) {
+  if (typeof value === "number") return value;
+  if (!value || typeof value !== "object") return value;
+  const obj = value;
+  const looksLikeCurve = Array.isArray(obj["bezierPoints"]) || obj["type"] === "BEZIER" /* BEZIER */ || obj["type"] === "EASING" /* EASING */ || typeof obj["curveFunctionId"] === "string";
+  if (looksLikeCurve) return deserializeCurve(obj);
+  return obj;
+}
+function deserializeVector3(raw) {
+  if (!raw || typeof raw !== "object") return void 0;
+  const { x = 0, y = 0, z = 0 } = raw;
+  return new THREE5.Vector3(x, y, z);
+}
+function deserializeVector2(raw) {
+  if (!raw || typeof raw !== "object") return void 0;
+  const { x = 1, y = 1 } = raw;
+  return new THREE5.Vector2(x, y);
+}
+function deserializeConfig(raw) {
+  const config = {};
+  if (raw["transform"] && typeof raw["transform"] === "object") {
+    const t = raw["transform"];
+    config.transform = {
+      position: deserializeVector3(t["position"]),
+      rotation: deserializeVector3(t["rotation"]),
+      scale: deserializeVector3(t["scale"])
+    };
+  }
+  for (const field of [
+    "duration",
+    "looping",
+    "gravity",
+    "simulationSpace",
+    "simulationBackend",
+    "maxParticles"
+  ]) {
+    if (field in raw) config[field] = raw[field];
+  }
+  for (const field of [
+    "startDelay",
+    "startLifetime",
+    "startSpeed",
+    "startSize",
+    "startOpacity",
+    "startRotation"
+  ]) {
+    if (field in raw)
+      config[field] = deserializeCurveOrValue(raw[field]);
+  }
+  if ("startColor" in raw)
+    config.startColor = raw["startColor"];
+  if (raw["emission"] && typeof raw["emission"] === "object") {
+    const e = raw["emission"];
+    config.emission = {
+      rateOverTime: deserializeCurveOrValue(e["rateOverTime"]),
+      rateOverDistance: deserializeCurveOrValue(
+        e["rateOverDistance"]
+      ),
+      bursts: Array.isArray(e["bursts"]) ? e["bursts"] : []
+    };
+  }
+  if ("shape" in raw)
+    config.shape = raw["shape"];
+  if (raw["renderer"] && typeof raw["renderer"] === "object") {
+    const r = raw["renderer"];
+    const blending = typeof r["blending"] === "string" ? blendingMap[r["blending"]] ?? THREE5.NormalBlending : r["blending"] ?? THREE5.NormalBlending;
+    config.renderer = { ...r, blending };
+  }
+  if (raw["velocityOverLifetime"] && typeof raw["velocityOverLifetime"] === "object") {
+    const vol = raw["velocityOverLifetime"];
+    const deserializeAxis = (axis) => {
+      if (!axis || typeof axis !== "object") return {};
+      const a = axis;
+      return {
+        ...a["x"] !== void 0 ? { x: deserializeCurveOrValue(a["x"]) } : {},
+        ...a["y"] !== void 0 ? { y: deserializeCurveOrValue(a["y"]) } : {},
+        ...a["z"] !== void 0 ? { z: deserializeCurveOrValue(a["z"]) } : {}
+      };
+    };
+    config.velocityOverLifetime = {
+      isActive: vol["isActive"] ?? false,
+      linear: deserializeAxis(vol["linear"]),
+      orbital: deserializeAxis(vol["orbital"])
+    };
+  }
+  for (const field of ["sizeOverLifetime", "opacityOverLifetime"]) {
+    if (raw[field] && typeof raw[field] === "object") {
+      const m = raw[field];
+      config[field] = {
+        isActive: m["isActive"] ?? false,
+        lifetimeCurve: deserializeCurve(m["lifetimeCurve"])
+      };
+    }
+  }
+  if (raw["colorOverLifetime"] && typeof raw["colorOverLifetime"] === "object") {
+    const col = raw["colorOverLifetime"];
+    config.colorOverLifetime = {
+      isActive: col["isActive"] ?? true,
+      r: deserializeCurve(col["r"]),
+      g: deserializeCurve(col["g"]),
+      b: deserializeCurve(col["b"])
+    };
+  }
+  if (raw["rotationOverLifetime"] && typeof raw["rotationOverLifetime"] === "object") {
+    config.rotationOverLifetime = raw["rotationOverLifetime"];
+  }
+  if (raw["noise"] && typeof raw["noise"] === "object") {
+    config.noise = raw["noise"];
+  }
+  if (raw["textureSheetAnimation"] && typeof raw["textureSheetAnimation"] === "object") {
+    const tsa = raw["textureSheetAnimation"];
+    config.textureSheetAnimation = {
+      ...tsa,
+      tiles: deserializeVector2(tsa["tiles"]),
+      startFrame: deserializeCurveOrValue(tsa["startFrame"])
+    };
+  }
+  if (Array.isArray(raw["subEmitters"])) {
+    config.subEmitters = raw["subEmitters"].map((se) => ({
+      ...se,
+      config: deserializeConfig(se["config"])
+    }));
+  }
+  if (Array.isArray(raw["forceFields"])) {
+    config.forceFields = raw["forceFields"].map((ff) => {
+      const result = {};
+      if ("isActive" in ff) result.isActive = ff["isActive"];
+      if ("type" in ff) result.type = ff["type"];
+      if (ff["position"]) result.position = deserializeVector3(ff["position"]);
+      if (ff["direction"])
+        result.direction = deserializeVector3(ff["direction"]);
+      if ("strength" in ff)
+        result.strength = deserializeCurveOrValue(
+          ff["strength"]
+        );
+      if ("range" in ff)
+        result.range = ff["range"] === null ? Infinity : ff["range"];
+      if ("falloff" in ff) result.falloff = ff["falloff"];
+      return result;
+    });
+  }
+  if (Array.isArray(raw["collisionPlanes"])) {
+    config.collisionPlanes = raw["collisionPlanes"].map(
+      (cp) => {
+        const result = {};
+        if ("isActive" in cp) result.isActive = cp["isActive"];
+        if ("mode" in cp) result.mode = cp["mode"];
+        if (cp["position"])
+          result.position = deserializeVector3(cp["position"]);
+        if (cp["normal"]) result.normal = deserializeVector3(cp["normal"]);
+        if ("dampen" in cp) result.dampen = cp["dampen"];
+        if ("lifetimeLoss" in cp)
+          result.lifetimeLoss = cp["lifetimeLoss"];
+        return result;
+      }
+    );
+  }
+  for (const key of Object.keys(raw)) {
+    if (!(key in config) && key !== "_version" && raw[key] !== null) {
+      config[key] = raw[key];
+    }
+  }
+  return config;
+}
+function deserializeParticleSystem(json) {
+  const parsed = JSON.parse(json);
+  const { _version: _, ...raw } = parsed;
+  return deserializeConfig(raw);
+}
+
+export { CollisionPlaneMode, CurveFunctionId, EmitFrom, ForceFieldFalloff, ForceFieldType, LifeTimeCurve, RendererType, SCALAR_STRIDE, S_COLOR_A, S_COLOR_B, S_COLOR_G, S_COLOR_R, S_IS_ACTIVE, S_LIFETIME, S_ROTATION, S_SIZE, S_START_FRAME, S_START_LIFETIME, Shape, SimulationBackend, SimulationSpace, SubEmitterTrigger, TimeMode, applyModifiers, blendingMap, calculateRandomPositionAndVelocityOnBox, calculateRandomPositionAndVelocityOnCircle, calculateRandomPositionAndVelocityOnCone, calculateRandomPositionAndVelocityOnRectangle, calculateRandomPositionAndVelocityOnSphere, calculateValue, createBezierCurveFunction, createDefaultMeshTexture, createDefaultParticleTexture, createParticleSystem, curveFunctionIdMap, deserializeParticleSystem, getBezierCacheSize, getCurveFunction, getCurveFunctionFromConfig, getDefaultParticleSystemConfig, isComputeCapableRenderer, isLifeTimeCurve, registerTSLMaterialFactory, removeBezierCurveFunction, resolveSimulationBackend, serializeParticleSystem, updateParticleSystems };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map