@newkrok/three-particles 2.11.2 → 2.13.0

package/dist/index.js

@@ -173,6 +173,8 @@ var ForceFieldType = /* @__PURE__ */ ((ForceFieldType2) => {
 var RendererType = /* @__PURE__ */ ((RendererType2) => {
   RendererType2["POINTS"] = "POINTS";
   RendererType2["INSTANCED"] = "INSTANCED";
+  RendererType2["TRAIL"] = "TRAIL";
+  RendererType2["MESH"] = "MESH";
   return RendererType2;
 })(RendererType || {});
 var ForceFieldFalloff = /* @__PURE__ */ ((ForceFieldFalloff2) => {
@@ -309,6 +311,24 @@ var calculateRandomPositionAndVelocityOnRectangle = (position, quaternion, veloc
   velocity.set(0, 0, speed);
   velocity.applyQuaternion(quaternion);
 };
+var createDefaultMeshTexture = () => {
+  try {
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    const context = canvas.getContext("2d");
+    if (context) {
+      context.fillStyle = "white";
+      context.fillRect(0, 0, 1, 1);
+      const texture = new THREE4.CanvasTexture(canvas);
+      texture.needsUpdate = true;
+      return texture;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+};
 var createDefaultParticleTexture = () => {
   try {
     const canvas = document.createElement("canvas");
@@ -493,6 +513,16 @@ var applyModifiers = ({
     positionArr[positionIndex + 2] += noiseOnPosition * noisePower * positionAmount;
     attributes.position.needsUpdate = true;
   }
+  if (attributes.quat) {
+    const rotZ = attributes.rotation.array[particleIndex];
+    const halfZ = rotZ * 0.5;
+    const qi = particleIndex * 4;
+    attributes.quat.array[qi] = 0;
+    attributes.quat.array[qi + 1] = 0;
+    attributes.quat.array[qi + 2] = Math.sin(halfZ);
+    attributes.quat.array[qi + 3] = Math.cos(halfZ);
+    attributes.quat.needsUpdate = true;
+  }
 };
 
 // src/js/effects/three-particles/shaders/instanced-particle-fragment-shader.glsl.ts
@@ -629,6 +659,129 @@ var InstancedParticleVertexShader = `
 `;
 var instanced_particle_vertex_shader_glsl_default = InstancedParticleVertexShader;
 
+// src/js/effects/three-particles/shaders/mesh-particle-fragment-shader.glsl.ts
+var MeshParticleFragmentShader = `
+  uniform sampler2D map;
+  uniform float elapsed;
+  uniform float fps;
+  uniform bool useFPSForFrameIndex;
+  uniform vec2 tiles;
+  uniform bool discardBackgroundColor;
+  uniform vec3 backgroundColor;
+  uniform float backgroundColorTolerance;
+
+  varying vec4 vColor;
+  varying float vLifetime;
+  varying float vStartLifetime;
+  varying float vStartFrame;
+  varying float vRotation;
+  varying vec3 vNormal;
+  varying vec2 vUv;
+
+  #include <common>
+  #include <logdepthbuf_pars_fragment>
+
+  void main()
+  {
+    gl_FragColor = vColor;
+
+    // Use mesh UVs directly for texture sampling
+    vec2 uvPoint = vUv;
+
+    // Apply texture sheet animation if tiles > 1x1
+    if (tiles.x > 1.0 || tiles.y > 1.0) {
+      float frameIndex = round(vStartFrame) + (
+        useFPSForFrameIndex == true
+          ? fps == 0.0
+              ? 0.0
+              : max((vLifetime / 1000.0) * fps, 0.0)
+          : max(min(floor(min(vLifetime / vStartLifetime, 1.0) * (tiles.x * tiles.y)), tiles.x * tiles.y - 1.0), 0.0)
+      );
+
+      float spriteXIndex = floor(mod(frameIndex, tiles.x));
+      float spriteYIndex = floor(mod(frameIndex / tiles.x, tiles.y));
+
+      uvPoint = vec2(
+        vUv.x / tiles.x + spriteXIndex / tiles.x,
+        vUv.y / tiles.y + spriteYIndex / tiles.y
+      );
+    }
+
+    vec4 texColor = texture2D(map, uvPoint);
+    gl_FragColor = gl_FragColor * texColor;
+
+    if (discardBackgroundColor && abs(length(texColor.rgb - backgroundColor.rgb)) < backgroundColorTolerance) discard;
+
+    // Simple directional lighting from camera direction
+    float lightIntensity = 0.5 + 0.5 * max(dot(vNormal, vec3(0.0, 0.0, 1.0)), 0.0);
+    gl_FragColor.rgb *= lightIntensity;
+
+    #include <logdepthbuf_fragment>
+  }
+`;
+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 float instanceLifetime;
+  attribute float instanceStartLifetime;
+  attribute float instanceRotation;
+  attribute float instanceStartFrame;
+  attribute vec3 instanceOffset;
+  attribute vec4 instanceQuat;
+
+  varying vec4 vColor;
+  varying float vLifetime;
+  varying float vStartLifetime;
+  varying float vStartFrame;
+  varying float vRotation;
+  varying vec3 vNormal;
+  varying vec2 vUv;
+
+  #include <common>
+  #include <logdepthbuf_pars_vertex>
+
+  vec3 applyQuaternion(vec3 v, vec4 q) {
+    vec3 t = 2.0 * cross(q.xyz, v);
+    return v + q.w * t + cross(q.xyz, t);
+  }
+
+  void main()
+  {
+    vColor = vec4(instanceColorR, instanceColorG, instanceColorB, instanceColorA);
+    vLifetime = instanceLifetime;
+    vStartLifetime = instanceStartLifetime;
+    vStartFrame = instanceStartFrame;
+    vRotation = instanceRotation;
+
+    // Apply quaternion rotation to the mesh vertex position
+    vec3 rotatedPosition = applyQuaternion(position, instanceQuat);
+
+    // Scale mesh by particle size
+    vec3 scaledPosition = rotatedPosition * instanceSize;
+
+    // Apply instance offset (particle world position)
+    vec3 worldPos = scaledPosition + instanceOffset;
+
+    vec4 mvPosition = modelViewMatrix * vec4(worldPos, 1.0);
+    gl_Position = projectionMatrix * mvPosition;
+
+    // Transform normal by quaternion for lighting
+    vNormal = normalize((modelViewMatrix * vec4(applyQuaternion(normal, instanceQuat), 0.0)).xyz);
+
+    // Pass through UVs from the mesh geometry
+    vUv = uv;
+
+    #include <logdepthbuf_vertex>
+  }
+`;
+var mesh_particle_vertex_shader_glsl_default = MeshParticleVertexShader;
+
 // src/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.ts
 var ParticleSystemFragmentShader = `
   uniform sampler2D map;
@@ -740,6 +893,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 +1073,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 +1332,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());
@@ -1110,7 +1391,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     config,
     { applyToFirstObject: false, skippedProperties: [] }
   );
-  let particleMap = normalizedConfig.map || createDefaultParticleTexture();
+  let particleMap = normalizedConfig.map || (normalizedConfig.renderer.rendererType === "MESH" /* MESH */ ? createDefaultMeshTexture() : createDefaultParticleTexture());
   const {
     transform,
     duration,
@@ -1294,9 +1575,42 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       probabilityPassed: false
     }));
   }
-  const useInstancing = renderer.rendererType === "INSTANCED" /* INSTANCED */;
-  const attr = (name) => useInstancing ? `instance${name.charAt(0).toUpperCase()}${name.slice(1)}` : name;
-  const posAttr = useInstancing ? "instanceOffset" : "position";
+  const useTrail = renderer.rendererType === "TRAIL" /* TRAIL */;
+  const useMesh = renderer.rendererType === "MESH" /* MESH */;
+  const useInstancing = !useTrail && !useMesh && renderer.rendererType === "INSTANCED" /* INSTANCED */;
+  const useInstancedAttributes = useInstancing || useMesh;
+  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) => useInstancedAttributes ? `instance${name.charAt(0).toUpperCase()}${name.slice(1)}` : name;
+  const posAttr = useInstancedAttributes ? "instanceOffset" : "position";
   const sharedUniforms = {
     elapsed: { value: 0 },
     map: { value: particleMap },
@@ -1310,17 +1624,46 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     backgroundColorTolerance: { value: renderer.backgroundColorTolerance },
     ...useInstancing ? { viewportHeight: { value: 1 } } : {}
   };
+  const getVertexShader = () => {
+    if (useMesh) return mesh_particle_vertex_shader_glsl_default;
+    if (useInstancing) return instanced_particle_vertex_shader_glsl_default;
+    return particle_system_vertex_shader_glsl_default;
+  };
+  const getFragmentShader = () => {
+    if (useMesh) return mesh_particle_fragment_shader_glsl_default;
+    if (useInstancing) return instanced_particle_fragment_shader_glsl_default;
+    return particle_system_fragment_shader_glsl_default;
+  };
   const material = new THREE4.ShaderMaterial({
     uniforms: sharedUniforms,
-    vertexShader: useInstancing ? instanced_particle_vertex_shader_glsl_default : particle_system_vertex_shader_glsl_default,
-    fragmentShader: useInstancing ? instanced_particle_fragment_shader_glsl_default : particle_system_fragment_shader_glsl_default,
+    vertexShader: getVertexShader(),
+    fragmentShader: getFragmentShader(),
     transparent: renderer.transparent,
     blending: renderer.blending,
     depthTest: renderer.depthTest,
     depthWrite: renderer.depthWrite
   });
   let geometry;
-  if (useInstancing) {
+  if (useMesh) {
+    const meshConfig = renderer.mesh;
+    if (!meshConfig?.geometry) {
+      throw new Error(
+        "RendererType.MESH requires a mesh configuration with a geometry. Set renderer.mesh.geometry to a THREE.BufferGeometry instance."
+      );
+    }
+    const instancedGeometry = new THREE4.InstancedBufferGeometry();
+    const sourceGeom = meshConfig.geometry;
+    const srcPos = sourceGeom.getAttribute("position");
+    if (srcPos) instancedGeometry.setAttribute("position", srcPos);
+    const srcNormal = sourceGeom.getAttribute("normal");
+    if (srcNormal) instancedGeometry.setAttribute("normal", srcNormal);
+    const srcUv = sourceGeom.getAttribute("uv");
+    if (srcUv) instancedGeometry.setAttribute("uv", srcUv);
+    const srcIndex = sourceGeom.getIndex();
+    if (srcIndex) instancedGeometry.setIndex(srcIndex);
+    instancedGeometry.instanceCount = maxParticles;
+    geometry = instancedGeometry;
+  } else if (useInstancing) {
     const instancedGeometry = new THREE4.InstancedBufferGeometry();
     const quadPositions = new Float32Array([
       -0.5,
@@ -1361,28 +1704,28 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     positionArray[i * 3 + 1] = startPositions[i].y;
     positionArray[i * 3 + 2] = startPositions[i].z;
   }
-  const positionAttribute = useInstancing ? new THREE4.InstancedBufferAttribute(positionArray, 3) : new THREE4.BufferAttribute(positionArray, 3);
+  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: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("lifetime"),
     maxParticles,
     factory: 0,
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("startLifetime"),
     maxParticles,
     factory: () => calculateValue(generalData.particleSystemId, startLifetime, 0) * 1e3,
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
@@ -1393,21 +1736,21 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       textureSheetAnimation.startFrame,
       0
     ) : 0,
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("size"),
     maxParticles,
     factory: (_, index) => generalData.startValues.startSize[index],
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("rotation"),
     maxParticles,
     factory: 0,
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   const colorRandomRatio = Math.random();
   createFloat32Attributes({
@@ -1415,29 +1758,39 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     propertyName: attr("colorR"),
     maxParticles,
     factory: () => startColor.min.r + colorRandomRatio * (startColor.max.r - startColor.min.r),
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("colorG"),
     maxParticles,
     factory: () => startColor.min.g + colorRandomRatio * (startColor.max.g - startColor.min.g),
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("colorB"),
     maxParticles,
     factory: () => startColor.min.b + colorRandomRatio * (startColor.max.b - startColor.min.b),
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
   createFloat32Attributes({
     geometry,
     propertyName: attr("colorA"),
     maxParticles,
     factory: 0,
-    instanced: useInstancing
+    instanced: useInstancedAttributes
   });
+  if (useMesh) {
+    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)
+    );
+  }
   const a = geometry.attributes;
   const aIsActive = a[attr("isActive")];
   const aColorR = a[attr("colorR")];
@@ -1450,6 +1803,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
   const aRotation = a[attr("rotation")];
   const aLifetime = a[attr("lifetime")];
   const aPosition = a[posAttr];
+  const aQuat = useMesh ? a[attr("quat")] : void 0;
   const deactivateParticle = (particleIndex) => {
     aIsActive.array[particleIndex] = 0;
     aColorA.array[particleIndex] = 0;
@@ -1463,6 +1817,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();
@@ -1507,6 +1865,16 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       generalData.normalizedLifetimePercentage
     );
     aRotation.needsUpdate = true;
+    if (aQuat) {
+      const rotZ = aRotation.array[particleIndex];
+      const halfZ = rotZ * 0.5;
+      const qi = particleIndex * 4;
+      aQuat.array[qi] = 0;
+      aQuat.array[qi + 1] = 0;
+      aQuat.array[qi + 2] = Math.sin(halfZ);
+      aQuat.array[qi + 3] = Math.cos(halfZ);
+      aQuat.needsUpdate = true;
+    }
     if (normalizedConfig.rotationOverLifetime.isActive)
       generalData.lifetimeValues.rotationOverLifetime[particleIndex] = THREE4.MathUtils.randFloat(
         normalizedConfig.rotationOverLifetime.min,
@@ -1632,7 +2000,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
           },
           renderer: {
             ...subConfig.config.renderer ?? {},
-            rendererType: renderer.rendererType
+            ...subConfig.config.renderer?.rendererType ? {} : renderer.rendererType === "MESH" /* MESH */ || renderer.rendererType === "TRAIL" /* TRAIL */ ? {} : { rendererType: renderer.rendererType }
           },
           ...inheritVelocity > 0 ? {
             startSpeed: (typeof subConfig.config.startSpeed === "number" ? subConfig.config.startSpeed : typeof subConfig.config.startSpeed === "object" && subConfig.config.startSpeed !== null && "min" in subConfig.config.startSpeed ? subConfig.config.startSpeed.min ?? 0 : 0) + velocity.length() * inheritVelocity
@@ -1645,13 +2013,131 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       instances.push(subSystem);
     }
   };
-  let particleSystem = useInstancing ? new THREE4.Mesh(geometry, material) : new THREE4.Points(geometry, material);
+  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 || useMesh ? new THREE4.Mesh(geometry, material) : new THREE4.Points(geometry, material);
   if (useInstancing) {
     particleSystem.onBeforeRender = (glRenderer) => {
       const size = glRenderer.getSize(new THREE4.Vector2());
       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);
@@ -1668,7 +2154,8 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     colorR: aColorR,
     colorG: aColorG,
     colorB: aColorB,
-    colorA: aColorA
+    colorA: aColorA,
+    ...useMesh ? { quat: aQuat } : {}
   };
   const calculatedCreationTime = now + calculateValue(generalData.particleSystemId, startDelay) * 1e3;
   let wrapper;
@@ -1729,7 +2216,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 +2488,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(
@@ -1995,6 +2696,6 @@ var updateParticleSystems = (cycleData) => {
   );
 };
 
-export { CurveFunctionId, EmitFrom, ForceFieldFalloff, ForceFieldType, LifeTimeCurve, RendererType, Shape, SimulationSpace, SubEmitterTrigger, TimeMode, applyModifiers, blendingMap, calculateRandomPositionAndVelocityOnBox, calculateRandomPositionAndVelocityOnCircle, calculateRandomPositionAndVelocityOnCone, calculateRandomPositionAndVelocityOnRectangle, calculateRandomPositionAndVelocityOnSphere, calculateValue, createBezierCurveFunction, createDefaultParticleTexture, createParticleSystem, curveFunctionIdMap, getBezierCacheSize, getCurveFunction, getCurveFunctionFromConfig, getDefaultParticleSystemConfig, isLifeTimeCurve, removeBezierCurveFunction, updateParticleSystems };
+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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map