@newkrok/three-particles 2.11.1 → 2.12.0

package/dist/index.js

@@ -173,6 +173,7 @@ var ForceFieldType = /* @__PURE__ */ ((ForceFieldType2) => {
 var RendererType = /* @__PURE__ */ ((RendererType2) => {
   RendererType2["POINTS"] = "POINTS";
   RendererType2["INSTANCED"] = "INSTANCED";
+  RendererType2["TRAIL"] = "TRAIL";
   return RendererType2;
 })(RendererType || {});
 var ForceFieldFalloff = /* @__PURE__ */ ((ForceFieldFalloff2) => {
@@ -740,6 +741,115 @@ var ParticleSystemVertexShader = `
   }
 `;
 var particle_system_vertex_shader_glsl_default = ParticleSystemVertexShader;
+
+// src/js/effects/three-particles/shaders/trail-fragment-shader.glsl.ts
+var TrailFragmentShader = `
+  uniform sampler2D map;
+  uniform bool useMap;
+  uniform bool discardBackgroundColor;
+  uniform vec3 backgroundColor;
+  uniform float backgroundColorTolerance;
+
+  varying float vAlpha;
+  varying vec4 vColor;
+  varying vec2 vUv;
+
+  #include <common>
+  #include <logdepthbuf_pars_fragment>
+
+  void main()
+  {
+    // Soft edge: always fade near ribbon edges
+    float edgeDist = 1.0 - abs(vUv.x * 2.0 - 1.0);
+    float softEdge = smoothstep(0.0, 0.4, edgeDist);
+
+    gl_FragColor = vColor;
+
+    if (useMap) {
+      // Use texture luminance as brightness modulation on top of soft edge
+      vec4 texColor = texture2D(map, vUv);
+      float texBrightness = dot(texColor.rgb, vec3(0.299, 0.587, 0.114));
+      gl_FragColor.rgb *= (0.5 + texBrightness * 0.5);
+      gl_FragColor.a *= texColor.a;
+    }
+
+    gl_FragColor.a *= vAlpha * softEdge;
+
+    if (gl_FragColor.a < 0.001) discard;
+
+    if (discardBackgroundColor && abs(length(gl_FragColor.rgb - backgroundColor.rgb)) < backgroundColorTolerance) discard;
+
+    #include <logdepthbuf_fragment>
+  }
+`;
+var trail_fragment_shader_glsl_default = TrailFragmentShader;
+
+// src/js/effects/three-particles/shaders/trail-vertex-shader.glsl.ts
+var TrailVertexShader = `
+  attribute float trailAlpha;
+  attribute vec4 trailColor;
+  attribute float trailOffset;
+  attribute float trailHalfWidth;
+  attribute vec3 trailNext;
+  attribute vec2 trailUV;
+
+  varying float vAlpha;
+  varying vec4 vColor;
+  varying vec2 vUv;
+
+  #include <common>
+  #include <logdepthbuf_pars_vertex>
+
+  void main()
+  {
+    vAlpha = trailAlpha;
+    vColor = trailColor;
+    vUv = trailUV;
+
+    // Compute tangent from current position to next sample
+    vec3 tangent = trailNext - position;
+    float tangentLen = length(tangent);
+    if (tangentLen < 0.0001) {
+      tangent = vec3(0.0, 1.0, 0.0);
+    } else {
+      tangent = tangent / tangentLen;
+    }
+
+    // Billboard: perpendicular = cross(tangent, viewDirection)
+    vec3 worldPos = (modelMatrix * vec4(position, 1.0)).xyz;
+    vec3 viewDir = normalize(cameraPosition - worldPos);
+    vec3 perp = cross(tangent, viewDir);
+    float perpLen = length(perp);
+
+    // When tangent is nearly parallel to view direction, the cross product
+    // collapses and the ribbon becomes edge-on (invisible). Use a secondary
+    // perpendicular from cross(tangent, up) and blend it in to guarantee
+    // a minimum visible width.
+    vec3 upPerp = cross(tangent, vec3(0.0, 1.0, 0.0));
+    float upPerpLen = length(upPerp);
+    if (upPerpLen < 0.0001) {
+      upPerp = cross(tangent, vec3(1.0, 0.0, 0.0));
+      upPerpLen = length(upPerp);
+    }
+    upPerp = upPerp / max(upPerpLen, 0.0001);
+
+    if (perpLen < 0.0001) {
+      perp = upPerp;
+    } else {
+      perp = perp / perpLen;
+      // Blend in the secondary perp when billboard perp gets weak
+      float blendFactor = smoothstep(0.0, 0.5, perpLen);
+      perp = normalize(mix(upPerp, perp, blendFactor));
+    }
+
+    vec3 offsetPos = position + perp * trailOffset * trailHalfWidth;
+    vec4 mvPosition = modelViewMatrix * vec4(offsetPos, 1.0);
+    gl_Position = projectionMatrix * mvPosition;
+
+    #include <logdepthbuf_vertex>
+  }
+`;
+var trail_vertex_shader_glsl_default = TrailVertexShader;
 var _forceDirection = new THREE4.Vector3();
 var applyPointForce = (field, strength, velocity, positionArr, positionIndex, delta) => {
   _forceDirection.set(
@@ -811,10 +921,21 @@ var applyForceFields = ({
 };
 
 // src/js/effects/three-particles/three-particles.ts
+var normalizeTrailCurve = (curve, defaultCurve) => {
+  if (!curve) return defaultCurve;
+  const raw = curve;
+  if (!raw.type && Array.isArray(raw.bezierPoints)) {
+    return { type: "BEZIER" /* BEZIER */, ...raw };
+  }
+  return curve;
+};
 var _particleSystemId = 0;
 var createdParticleSystems = [];
 var _subEmitterPosition = new THREE4.Vector3();
 var _lastWorldPositionSnapshot = new THREE4.Vector3();
+new THREE4.Vector3();
+new THREE4.Vector3();
+new THREE4.Vector3();
 var _distanceStep = { x: 0, y: 0, z: 0 };
 var _tempPosition = { x: 0, y: 0, z: 0 };
 var _modifierParams = {
@@ -1059,12 +1180,20 @@ var destroyParticleSystem = (particleSystem) => {
     ({
       particleSystem: savedParticleSystem,
       wrapper,
+      trailMesh,
       generalData: { particleSystemId }
     }) => {
       if (savedParticleSystem !== particleSystem && wrapper !== particleSystem) {
         return true;
       }
       removeBezierCurveFunction(particleSystemId);
+      if (trailMesh) {
+        trailMesh.geometry.dispose();
+        if (Array.isArray(trailMesh.material))
+          trailMesh.material.forEach((m) => m.dispose());
+        else trailMesh.material.dispose();
+        if (trailMesh.parent) trailMesh.parent.remove(trailMesh);
+      }
       savedParticleSystem.geometry.dispose();
       if (Array.isArray(savedParticleSystem.material))
         savedParticleSystem.material.forEach((material) => material.dispose());
@@ -1294,7 +1423,38 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       probabilityPassed: false
     }));
   }
-  const useInstancing = renderer.rendererType === "INSTANCED" /* INSTANCED */;
+  const useTrail = renderer.rendererType === "TRAIL" /* TRAIL */;
+  const useInstancing = !useTrail && renderer.rendererType === "INSTANCED" /* INSTANCED */;
+  const defaultTrailCurve = {
+    type: "BEZIER" /* BEZIER */,
+    scale: 1,
+    bezierPoints: [
+      { x: 0, y: 1, percentage: 0 },
+      { x: 1, y: 0, percentage: 1 }
+    ]
+  };
+  const trailConfig = useTrail ? {
+    length: renderer.trail?.length ?? 20,
+    width: renderer.trail?.width ?? 1,
+    widthOverTrail: normalizeTrailCurve(
+      renderer.trail?.widthOverTrail,
+      defaultTrailCurve
+    ),
+    opacityOverTrail: normalizeTrailCurve(
+      renderer.trail?.opacityOverTrail,
+      defaultTrailCurve
+    ),
+    colorOverTrail: renderer.trail?.colorOverTrail
+  } : void 0;
+  if (useTrail && trailConfig) {
+    const trailLength = trailConfig.length;
+    generalData.trailLength = trailLength;
+    generalData.positionHistory = new Float32Array(
+      maxParticles * trailLength * 3
+    );
+    generalData.positionHistoryIndex = new Uint16Array(maxParticles);
+    generalData.positionHistoryCount = new Uint16Array(maxParticles);
+  }
   const attr = (name) => useInstancing ? `instance${name.charAt(0).toUpperCase()}${name.slice(1)}` : name;
   const posAttr = useInstancing ? "instanceOffset" : "position";
   const sharedUniforms = {
@@ -1463,6 +1623,10 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
   }) => {
     aIsActive.array[particleIndex] = 1;
     generalData.creationTimes[particleIndex] = activationTime;
+    if (generalData.positionHistoryCount) {
+      generalData.positionHistoryCount[particleIndex] = 0;
+      generalData.positionHistoryIndex[particleIndex] = 0;
+    }
     if (generalData.noise.offsets)
       generalData.noise.offsets[particleIndex] = Math.random() * 100;
     const colorRandomRatio2 = Math.random();
@@ -1645,6 +1809,120 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       instances.push(subSystem);
     }
   };
+  let trailMesh;
+  let trailGeometry;
+  let trailPositionAttr;
+  let trailAlphaAttr;
+  let trailColorAttr;
+  let trailIndexAttr;
+  let trailWidthCurveFn;
+  let trailOpacityCurveFn;
+  let trailColorOverTrailFns;
+  if (useTrail && trailConfig) {
+    const trailLength = trailConfig.length;
+    const verticesPerParticle = trailLength * 2;
+    const totalVertices = maxParticles * verticesPerParticle;
+    const indicesPerParticle = (trailLength - 1) * 6;
+    const totalIndices = maxParticles * indicesPerParticle;
+    trailGeometry = new THREE4.BufferGeometry();
+    const trailPositions = new Float32Array(totalVertices * 3);
+    const trailNextPositions = new Float32Array(totalVertices * 3);
+    const trailAlphas = new Float32Array(totalVertices);
+    const trailColors = new Float32Array(totalVertices * 4);
+    const trailOffsets = new Float32Array(totalVertices);
+    const trailHalfWidths = new Float32Array(totalVertices);
+    const trailUVs = new Float32Array(totalVertices * 2);
+    const trailIndices = new Uint32Array(totalIndices);
+    for (let p = 0; p < maxParticles; p++) {
+      const vertBase = p * verticesPerParticle;
+      const idxBase = p * indicesPerParticle;
+      for (let s = 0; s < trailLength; s++) {
+        trailOffsets[vertBase + s * 2] = -1;
+        trailOffsets[vertBase + s * 2 + 1] = 1;
+      }
+      for (let s = 0; s < trailLength - 1; s++) {
+        const i = idxBase + s * 6;
+        const v = vertBase + s * 2;
+        trailIndices[i] = v;
+        trailIndices[i + 1] = v + 1;
+        trailIndices[i + 2] = v + 2;
+        trailIndices[i + 3] = v + 1;
+        trailIndices[i + 4] = v + 3;
+        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);
+    trailGeometry.setAttribute("position", trailPositionAttr);
+    trailGeometry.setAttribute("trailNext", trailNextAttr);
+    trailGeometry.setAttribute("trailAlpha", trailAlphaAttr);
+    trailGeometry.setAttribute("trailColor", trailColorAttr);
+    trailGeometry.setAttribute(
+      "trailOffset",
+      new THREE4.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 }
+      },
+      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
+    });
+    trailMesh = new THREE4.Mesh(trailGeometry, trailMaterial);
+    trailMesh.frustumCulled = false;
+    const trailCameraPos = new THREE4.Vector3();
+    trailMesh.onBeforeRender = (_renderer, _scene, camera) => {
+      camera.getWorldPosition(trailCameraPos);
+    };
+    generalData.trailCameraPosition = trailCameraPos;
+    trailWidthCurveFn = getCurveFunctionFromConfig(
+      generalData.particleSystemId,
+      trailConfig.widthOverTrail
+    );
+    trailOpacityCurveFn = getCurveFunctionFromConfig(
+      generalData.particleSystemId,
+      trailConfig.opacityOverTrail
+    );
+    if (trailConfig.colorOverTrail?.isActive) {
+      trailColorOverTrailFns = {
+        r: getCurveFunctionFromConfig(
+          generalData.particleSystemId,
+          normalizeTrailCurve(trailConfig.colorOverTrail.r, defaultTrailCurve)
+        ),
+        g: getCurveFunctionFromConfig(
+          generalData.particleSystemId,
+          normalizeTrailCurve(trailConfig.colorOverTrail.g, defaultTrailCurve)
+        ),
+        b: getCurveFunctionFromConfig(
+          generalData.particleSystemId,
+          normalizeTrailCurve(trailConfig.colorOverTrail.b, defaultTrailCurve)
+        )
+      };
+    }
+  }
   let particleSystem = useInstancing ? new THREE4.Mesh(geometry, material) : new THREE4.Points(geometry, material);
   if (useInstancing) {
     particleSystem.onBeforeRender = (glRenderer) => {
@@ -1652,6 +1930,10 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       sharedUniforms.viewportHeight.value = size.y * glRenderer.getPixelRatio();
     };
   }
+  if (useTrail && trailMesh) {
+    material.visible = false;
+    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);
@@ -1729,7 +2011,20 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     deactivateParticle,
     activateParticle,
     onParticleDeath,
-    onParticleBirth
+    onParticleBirth,
+    ...useTrail ? {
+      trailMesh,
+      trailPositionAttr,
+      trailAlphaAttr,
+      trailColorAttr,
+      trailWidthCurveFn,
+      trailOpacityCurveFn,
+      trailColorOverTrailFns,
+      trailConfig: {
+        length: trailConfig.length,
+        width: trailConfig.width
+      }
+    } : {}
   };
   createdParticleSystems.push(instanceData);
   const resumeEmitter = () => generalData.isEnabled = true;
@@ -1988,6 +2283,207 @@ var updateParticleSystemInstance = (props, { now, delta, elapsed }) => {
     onComplete({
       particleSystem
     });
+  if (props.trailMesh) {
+    updateTrailGeometry(props);
+  }
+};
+var updateTrailGeometry = (props) => {
+  const {
+    generalData,
+    trailPositionAttr,
+    trailAlphaAttr,
+    trailColorAttr,
+    trailWidthCurveFn,
+    trailOpacityCurveFn,
+    trailColorOverTrailFns,
+    trailConfig,
+    mappedAttributes: ma
+  } = props;
+  if (!trailPositionAttr || !trailAlphaAttr || !trailColorAttr || !trailWidthCurveFn || !trailOpacityCurveFn || !trailConfig || !generalData.positionHistory || !generalData.positionHistoryIndex || !generalData.positionHistoryCount)
+    return;
+  const trailLength = trailConfig.length;
+  const positionHistory = generalData.positionHistory;
+  const historyIndex = generalData.positionHistoryIndex;
+  const historyCount = generalData.positionHistoryCount;
+  const isActiveArr = ma.isActive.array;
+  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;
+  ma.size.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 verticesPerParticle = trailLength * 2;
+  const creationTimesLength = generalData.creationTimes.length;
+  let hasUpdates = false;
+  for (let index = 0; index < creationTimesLength; index++) {
+    const vertBase = index * verticesPerParticle;
+    if (isActiveArr[index]) {
+      hasUpdates = true;
+      const posIdx = index * 3;
+      const px = positionArr[posIdx];
+      const py = positionArr[posIdx + 1];
+      const pz = positionArr[posIdx + 2];
+      const histBase = (index * trailLength + historyIndex[index]) * 3;
+      positionHistory[histBase] = px;
+      positionHistory[histBase + 1] = py;
+      positionHistory[histBase + 2] = pz;
+      historyIndex[index] = (historyIndex[index] + 1) % trailLength;
+      if (historyCount[index] < trailLength) historyCount[index]++;
+      const count = historyCount[index];
+      const ribbonWidth = trailConfig.width;
+      const cr = colorRArr[index];
+      const cg = colorGArr[index];
+      const cb = colorBArr[index];
+      const ca = colorAArr[index];
+      const ringOff = index * trailLength * 3;
+      for (let s = 0; s < trailLength; s++) {
+        const vIdx = (vertBase + s * 2) * 3;
+        const cIdx = (vertBase + s * 2) * 4;
+        const aIdx = vertBase + s * 2;
+        if (s >= count) {
+          trailPosArr[vIdx] = px;
+          trailPosArr[vIdx + 1] = py;
+          trailPosArr[vIdx + 2] = pz;
+          trailPosArr[vIdx + 3] = px;
+          trailPosArr[vIdx + 4] = py;
+          trailPosArr[vIdx + 5] = pz;
+          trailNextArr[vIdx] = px;
+          trailNextArr[vIdx + 1] = py;
+          trailNextArr[vIdx + 2] = pz;
+          trailNextArr[vIdx + 3] = px;
+          trailNextArr[vIdx + 4] = py;
+          trailNextArr[vIdx + 5] = pz;
+          trailHalfWidthArr[aIdx] = 0;
+          trailHalfWidthArr[aIdx + 1] = 0;
+          const uvIdx2 = (vertBase + s * 2) * 2;
+          trailUVArr[uvIdx2] = 0;
+          trailUVArr[uvIdx2 + 1] = 0;
+          trailUVArr[uvIdx2 + 2] = 0;
+          trailUVArr[uvIdx2 + 3] = 0;
+          trailAlphaArr[aIdx] = 0;
+          trailAlphaArr[aIdx + 1] = 0;
+          trailColorArr[cIdx] = 0;
+          trailColorArr[cIdx + 1] = 0;
+          trailColorArr[cIdx + 2] = 0;
+          trailColorArr[cIdx + 3] = 0;
+          trailColorArr[cIdx + 4] = 0;
+          trailColorArr[cIdx + 5] = 0;
+          trailColorArr[cIdx + 6] = 0;
+          trailColorArr[cIdx + 7] = 0;
+          continue;
+        }
+        const histIdx = (historyIndex[index] - 1 - s + trailLength * 2) % trailLength * 3 + ringOff;
+        const hx = positionHistory[histIdx];
+        const hy = positionHistory[histIdx + 1];
+        const hz = positionHistory[histIdx + 2];
+        let nx, ny, nz;
+        if (s < count - 1) {
+          const ni = (historyIndex[index] - 2 - s + trailLength * 2) % trailLength * 3 + ringOff;
+          nx = positionHistory[ni];
+          ny = positionHistory[ni + 1];
+          nz = positionHistory[ni + 2];
+        } else {
+          nx = hx;
+          ny = hy + 1e-3;
+          nz = hz;
+        }
+        const t = count > 1 ? s / (count - 1) : 0;
+        const widthScale = trailWidthCurveFn(t);
+        const opacityScale = trailOpacityCurveFn(t);
+        const halfWidth = ribbonWidth * widthScale * 0.5;
+        trailPosArr[vIdx] = hx;
+        trailPosArr[vIdx + 1] = hy;
+        trailPosArr[vIdx + 2] = hz;
+        trailPosArr[vIdx + 3] = hx;
+        trailPosArr[vIdx + 4] = hy;
+        trailPosArr[vIdx + 5] = hz;
+        trailNextArr[vIdx] = nx;
+        trailNextArr[vIdx + 1] = ny;
+        trailNextArr[vIdx + 2] = nz;
+        trailNextArr[vIdx + 3] = nx;
+        trailNextArr[vIdx + 4] = ny;
+        trailNextArr[vIdx + 5] = nz;
+        trailHalfWidthArr[aIdx] = halfWidth;
+        trailHalfWidthArr[aIdx + 1] = halfWidth;
+        const uvIdx = (vertBase + s * 2) * 2;
+        trailUVArr[uvIdx] = 0;
+        trailUVArr[uvIdx + 1] = t;
+        trailUVArr[uvIdx + 2] = 1;
+        trailUVArr[uvIdx + 3] = t;
+        const alpha = ca * opacityScale;
+        trailAlphaArr[aIdx] = alpha;
+        trailAlphaArr[aIdx + 1] = alpha;
+        const fr = trailColorOverTrailFns ? cr * trailColorOverTrailFns.r(t) : cr;
+        const fg = trailColorOverTrailFns ? cg * trailColorOverTrailFns.g(t) : cg;
+        const fb = trailColorOverTrailFns ? cb * trailColorOverTrailFns.b(t) : cb;
+        trailColorArr[cIdx] = fr;
+        trailColorArr[cIdx + 1] = fg;
+        trailColorArr[cIdx + 2] = fb;
+        trailColorArr[cIdx + 3] = ca;
+        trailColorArr[cIdx + 4] = fr;
+        trailColorArr[cIdx + 5] = fg;
+        trailColorArr[cIdx + 6] = fb;
+        trailColorArr[cIdx + 7] = ca;
+      }
+    } else if (historyCount[index] > 0) {
+      hasUpdates = true;
+      historyCount[index] = 0;
+      historyIndex[index] = 0;
+      for (let s = 0; s < trailLength; s++) {
+        const vIdx = (vertBase + s * 2) * 3;
+        const cIdx = (vertBase + s * 2) * 4;
+        const aIdx = vertBase + s * 2;
+        trailPosArr[vIdx] = 0;
+        trailPosArr[vIdx + 1] = 0;
+        trailPosArr[vIdx + 2] = 0;
+        trailPosArr[vIdx + 3] = 0;
+        trailPosArr[vIdx + 4] = 0;
+        trailPosArr[vIdx + 5] = 0;
+        trailNextArr[vIdx] = 0;
+        trailNextArr[vIdx + 1] = 0;
+        trailNextArr[vIdx + 2] = 0;
+        trailNextArr[vIdx + 3] = 0;
+        trailNextArr[vIdx + 4] = 0;
+        trailNextArr[vIdx + 5] = 0;
+        trailHalfWidthArr[aIdx] = 0;
+        trailHalfWidthArr[aIdx + 1] = 0;
+        trailAlphaArr[aIdx] = 0;
+        trailAlphaArr[aIdx + 1] = 0;
+        trailColorArr[cIdx] = 0;
+        trailColorArr[cIdx + 1] = 0;
+        trailColorArr[cIdx + 2] = 0;
+        trailColorArr[cIdx + 3] = 0;
+        trailColorArr[cIdx + 4] = 0;
+        trailColorArr[cIdx + 5] = 0;
+        trailColorArr[cIdx + 6] = 0;
+        trailColorArr[cIdx + 7] = 0;
+      }
+    }
+  }
+  if (hasUpdates) {
+    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;
+  }
 };
 var updateParticleSystems = (cycleData) => {
   createdParticleSystems.forEach(