@newkrok/three-particles 2.10.4 → 2.11.0

package/dist/index.js

@@ -170,6 +170,11 @@ var ForceFieldType = /* @__PURE__ */ ((ForceFieldType2) => {
   ForceFieldType2["DIRECTIONAL"] = "DIRECTIONAL";
   return ForceFieldType2;
 })(ForceFieldType || {});
+var RendererType = /* @__PURE__ */ ((RendererType2) => {
+  RendererType2["POINTS"] = "POINTS";
+  RendererType2["INSTANCED"] = "INSTANCED";
+  return RendererType2;
+})(RendererType || {});
 var ForceFieldFalloff = /* @__PURE__ */ ((ForceFieldFalloff2) => {
   ForceFieldFalloff2["NONE"] = "NONE";
   ForceFieldFalloff2["LINEAR"] = "LINEAR";
@@ -490,6 +495,140 @@ var applyModifiers = ({
   }
 };
 
+// src/js/effects/three-particles/shaders/instanced-particle-fragment-shader.glsl.ts
+var InstancedParticleFragmentShader = `
+  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 vec2 vUv;
+  varying vec4 vColor;
+  varying float vLifetime;
+  varying float vStartLifetime;
+  varying float vStartFrame;
+  varying float vRotation;
+
+  #include <common>
+  #include <logdepthbuf_pars_fragment>
+
+  void main()
+  {
+    gl_FragColor = vColor;
+
+    // Rotate UV around centre (matches Points renderer behaviour)
+    vec2 center = vec2(0.5);
+    vec2 centeredPoint = vUv - center;
+
+    mat2 rotation = mat2(
+      cos(vRotation), sin(vRotation),
+      -sin(vRotation), cos(vRotation)
+    );
+
+    centeredPoint = rotation * centeredPoint;
+    vec2 centeredMiddlePoint = centeredPoint + center;
+
+    // Discard pixels outside the inscribed circle
+    float dist = distance(centeredMiddlePoint, center);
+    if (dist > 0.5) discard;
+
+    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));
+
+    vec2 uvPoint = vec2(
+      centeredMiddlePoint.x / tiles.x + spriteXIndex / tiles.x,
+      centeredMiddlePoint.y / tiles.y + spriteYIndex / tiles.y
+    );
+
+    vec4 rotatedTexture = texture2D(map, uvPoint);
+
+    gl_FragColor = gl_FragColor * rotatedTexture;
+
+    if (discardBackgroundColor && abs(length(rotatedTexture.rgb - backgroundColor.rgb)) < backgroundColorTolerance) discard;
+
+    #include <logdepthbuf_fragment>
+  }
+`;
+var instanced_particle_fragment_shader_glsl_default = InstancedParticleFragmentShader;
+
+// 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 float instanceLifetime;
+  attribute float instanceStartLifetime;
+  attribute float instanceRotation;
+  attribute float instanceStartFrame;
+  attribute vec3 instanceOffset;
+
+  uniform float viewportHeight;
+
+  varying vec2 vUv;
+  varying vec4 vColor;
+  varying float vLifetime;
+  varying float vStartLifetime;
+  varying float vStartFrame;
+  varying float vRotation;
+
+  #include <common>
+  #include <logdepthbuf_pars_vertex>
+
+  void main()
+  {
+    vColor = vec4(instanceColorR, instanceColorG, instanceColorB, instanceColorA);
+    vLifetime = instanceLifetime;
+    vStartLifetime = instanceStartLifetime;
+    vStartFrame = instanceStartFrame;
+    vRotation = instanceRotation;
+
+    vec4 mvPosition = modelViewMatrix * vec4(instanceOffset, 1.0);
+
+    // Match the Points renderer pixel size: gl_PointSize = size * 100.0 / distance.
+    // A view-space offset of d produces d * projectionMatrix[1][1] / w * (viewportHeight/2) pixels,
+    // where w = -mvPosition.z for perspective.  Solving for d so the result equals
+    // the gl_PointSize pixel count:
+    //   d = size * 100.0 / distance
+    //       * (-mvPosition.z)
+    //       / (projectionMatrix[1][1] * viewportHeight * 0.5)
+    // Since distance \u2248 -mvPosition.z for view-aligned particles the two cancel out,
+    // leaving a distance-independent expression.  We keep them explicit so particles
+    // off the viewing axis still scale correctly.
+    float dist = length(mvPosition.xyz);
+    float pointSizePx = instanceSize * 100.0 / dist;
+    float perspectiveSize = pointSizePx * (-mvPosition.z)
+                          / (projectionMatrix[1][1] * viewportHeight * 0.5);
+
+    // Billboard: offset quad vertices in view space (no rotation here;
+    // rotation is applied to UVs in the fragment shader to keep behaviour
+    // identical to the Points renderer).
+    mvPosition.xy += position.xy * perspectiveSize;
+
+    gl_Position = projectionMatrix * mvPosition;
+
+    // Pass UV for texture sampling (quad ranges from -0.5..0.5, map to 0..1).
+    // Flip Y to match gl_PointCoord convention (Y runs top-to-bottom).
+    vUv = vec2(position.x + 0.5, 0.5 - position.y);
+
+    #include <logdepthbuf_vertex>
+  }
+`;
+var instanced_particle_vertex_shader_glsl_default = InstancedParticleVertexShader;
+
 // src/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.ts
 var ParticleSystemFragmentShader = `
   uniform sampler2D map;
@@ -847,7 +986,8 @@ var createFloat32Attributes = ({
   geometry,
   propertyName,
   maxParticles,
-  factory
+  factory,
+  instanced
 }) => {
   const array = new Float32Array(maxParticles);
   if (typeof factory === "function") {
@@ -857,7 +997,8 @@ var createFloat32Attributes = ({
   } else {
     array.fill(factory);
   }
-  geometry.setAttribute(propertyName, new THREE4.BufferAttribute(array, 1));
+  const attr = instanced ? new THREE4.InstancedBufferAttribute(array, 1) : new THREE4.BufferAttribute(array, 1);
+  geometry.setAttribute(propertyName, attr);
 };
 var calculatePositionAndVelocity = (generalData, { shape, sphere, cone, circle, rectangle, box }, startSpeed, position, velocity) => {
   const calculatedStartSpeed = calculateValue(
@@ -1153,41 +1294,59 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       probabilityPassed: false
     }));
   }
-  const material = new THREE4.ShaderMaterial({
-    uniforms: {
-      elapsed: {
-        value: 0
-      },
-      map: {
-        value: particleMap
-      },
-      tiles: {
-        value: textureSheetAnimation.tiles
-      },
-      fps: {
-        value: textureSheetAnimation.fps
-      },
-      useFPSForFrameIndex: {
-        value: textureSheetAnimation.timeMode === "FPS" /* FPS */
-      },
-      backgroundColor: {
-        value: renderer.backgroundColor
-      },
-      discardBackgroundColor: {
-        value: renderer.discardBackgroundColor
-      },
-      backgroundColorTolerance: {
-        value: renderer.backgroundColorTolerance
-      }
+  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 sharedUniforms = {
+    elapsed: { value: 0 },
+    map: { value: particleMap },
+    tiles: { value: textureSheetAnimation.tiles },
+    fps: { value: textureSheetAnimation.fps },
+    useFPSForFrameIndex: {
+      value: textureSheetAnimation.timeMode === "FPS" /* FPS */
     },
-    vertexShader: particle_system_vertex_shader_glsl_default,
-    fragmentShader: particle_system_fragment_shader_glsl_default,
+    backgroundColor: { value: renderer.backgroundColor },
+    discardBackgroundColor: { value: renderer.discardBackgroundColor },
+    backgroundColorTolerance: { value: renderer.backgroundColorTolerance },
+    ...useInstancing ? { viewportHeight: { value: 1 } } : {}
+  };
+  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,
     transparent: renderer.transparent,
     blending: renderer.blending,
     depthTest: renderer.depthTest,
     depthWrite: renderer.depthWrite
   });
-  const geometry = new THREE4.BufferGeometry();
+  let geometry;
+  if (useInstancing) {
+    const instancedGeometry = new THREE4.InstancedBufferGeometry();
+    const quadPositions = new Float32Array([
+      -0.5,
+      -0.5,
+      0,
+      0.5,
+      -0.5,
+      0,
+      0.5,
+      0.5,
+      0,
+      -0.5,
+      0.5,
+      0
+    ]);
+    const quadIndices = new Uint16Array([0, 1, 2, 0, 2, 3]);
+    instancedGeometry.setAttribute(
+      "position",
+      new THREE4.BufferAttribute(quadPositions, 3)
+    );
+    instancedGeometry.setIndex(new THREE4.BufferAttribute(quadIndices, 1));
+    instancedGeometry.instanceCount = maxParticles;
+    geometry = instancedGeometry;
+  } else {
+    geometry = new THREE4.BufferGeometry();
+  }
   for (let i = 0; i < maxParticles; i++)
     calculatePositionAndVelocity(
       generalData,
@@ -1202,91 +1361,99 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     positionArray[i * 3 + 1] = startPositions[i].y;
     positionArray[i * 3 + 2] = startPositions[i].z;
   }
-  geometry.setAttribute(
-    "position",
-    new THREE4.BufferAttribute(positionArray, 3)
-  );
+  const positionAttribute = useInstancing ? new THREE4.InstancedBufferAttribute(positionArray, 3) : new THREE4.BufferAttribute(positionArray, 3);
+  geometry.setAttribute(posAttr, positionAttribute);
   createFloat32Attributes({
     geometry,
-    propertyName: "isActive",
+    propertyName: attr("isActive"),
     maxParticles,
-    factory: 0
+    factory: 0,
+    instanced: useInstancing
   });
   createFloat32Attributes({
     geometry,
-    propertyName: "lifetime",
+    propertyName: attr("lifetime"),
     maxParticles,
-    factory: 0
+    factory: 0,
+    instanced: useInstancing
   });
   createFloat32Attributes({
     geometry,
-    propertyName: "startLifetime",
+    propertyName: attr("startLifetime"),
     maxParticles,
-    factory: () => calculateValue(generalData.particleSystemId, startLifetime, 0) * 1e3
+    factory: () => calculateValue(generalData.particleSystemId, startLifetime, 0) * 1e3,
+    instanced: useInstancing
   });
   createFloat32Attributes({
     geometry,
-    propertyName: "startFrame",
+    propertyName: attr("startFrame"),
     maxParticles,
     factory: () => textureSheetAnimation.startFrame ? calculateValue(
       generalData.particleSystemId,
       textureSheetAnimation.startFrame,
       0
-    ) : 0
+    ) : 0,
+    instanced: useInstancing
   });
   createFloat32Attributes({
     geometry,
-    propertyName: "opacity",
+    propertyName: attr("size"),
     maxParticles,
-    factory: () => calculateValue(generalData.particleSystemId, startOpacity, 0)
+    factory: (_, index) => generalData.startValues.startSize[index],
+    instanced: useInstancing
   });
   createFloat32Attributes({
     geometry,
-    propertyName: "rotation",
+    propertyName: attr("rotation"),
     maxParticles,
-    factory: () => calculateValue(generalData.particleSystemId, startRotation, 0)
-  });
-  createFloat32Attributes({
-    geometry,
-    propertyName: "size",
-    maxParticles,
-    factory: (_, index) => generalData.startValues.startSize[index]
-  });
-  createFloat32Attributes({
-    geometry,
-    propertyName: "rotation",
-    maxParticles,
-    factory: 0
+    factory: 0,
+    instanced: useInstancing
   });
   const colorRandomRatio = Math.random();
   createFloat32Attributes({
     geometry,
-    propertyName: "colorR",
+    propertyName: attr("colorR"),
     maxParticles,
-    factory: () => startColor.min.r + colorRandomRatio * (startColor.max.r - startColor.min.r)
+    factory: () => startColor.min.r + colorRandomRatio * (startColor.max.r - startColor.min.r),
+    instanced: useInstancing
   });
   createFloat32Attributes({
     geometry,
-    propertyName: "colorG",
+    propertyName: attr("colorG"),
     maxParticles,
-    factory: () => startColor.min.g + colorRandomRatio * (startColor.max.g - startColor.min.g)
+    factory: () => startColor.min.g + colorRandomRatio * (startColor.max.g - startColor.min.g),
+    instanced: useInstancing
   });
   createFloat32Attributes({
     geometry,
-    propertyName: "colorB",
+    propertyName: attr("colorB"),
     maxParticles,
-    factory: () => startColor.min.b + colorRandomRatio * (startColor.max.b - startColor.min.b)
+    factory: () => startColor.min.b + colorRandomRatio * (startColor.max.b - startColor.min.b),
+    instanced: useInstancing
   });
   createFloat32Attributes({
     geometry,
-    propertyName: "colorA",
+    propertyName: attr("colorA"),
     maxParticles,
-    factory: 0
+    factory: 0,
+    instanced: useInstancing
   });
+  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 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 deactivateParticle = (particleIndex) => {
-    geometry.attributes.isActive.array[particleIndex] = 0;
-    geometry.attributes.colorA.array[particleIndex] = 0;
-    geometry.attributes.colorA.needsUpdate = true;
+    aIsActive.array[particleIndex] = 0;
+    aColorA.array[particleIndex] = 0;
+    aColorA.needsUpdate = true;
     freeList.push(particleIndex);
   };
   const activateParticle = ({
@@ -1294,52 +1461,52 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
     activationTime,
     position
   }) => {
-    geometry.attributes.isActive.array[particleIndex] = 1;
+    aIsActive.array[particleIndex] = 1;
     generalData.creationTimes[particleIndex] = activationTime;
     if (generalData.noise.offsets)
       generalData.noise.offsets[particleIndex] = Math.random() * 100;
     const colorRandomRatio2 = Math.random();
-    geometry.attributes.colorR.array[particleIndex] = startColor.min.r + colorRandomRatio2 * (startColor.max.r - startColor.min.r);
-    geometry.attributes.colorR.needsUpdate = true;
-    geometry.attributes.colorG.array[particleIndex] = startColor.min.g + colorRandomRatio2 * (startColor.max.g - startColor.min.g);
-    geometry.attributes.colorG.needsUpdate = true;
-    geometry.attributes.colorB.array[particleIndex] = startColor.min.b + colorRandomRatio2 * (startColor.max.b - startColor.min.b);
-    geometry.attributes.colorB.needsUpdate = true;
-    generalData.startValues.startColorR[particleIndex] = geometry.attributes.colorR.array[particleIndex];
-    generalData.startValues.startColorG[particleIndex] = geometry.attributes.colorG.array[particleIndex];
-    generalData.startValues.startColorB[particleIndex] = geometry.attributes.colorB.array[particleIndex];
-    geometry.attributes.startFrame.array[particleIndex] = textureSheetAnimation.startFrame ? calculateValue(
+    aColorR.array[particleIndex] = startColor.min.r + colorRandomRatio2 * (startColor.max.r - startColor.min.r);
+    aColorR.needsUpdate = true;
+    aColorG.array[particleIndex] = startColor.min.g + colorRandomRatio2 * (startColor.max.g - startColor.min.g);
+    aColorG.needsUpdate = true;
+    aColorB.array[particleIndex] = startColor.min.b + colorRandomRatio2 * (startColor.max.b - startColor.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] = textureSheetAnimation.startFrame ? calculateValue(
       generalData.particleSystemId,
       textureSheetAnimation.startFrame,
       0
     ) : 0;
-    geometry.attributes.startFrame.needsUpdate = true;
-    geometry.attributes.startLifetime.array[particleIndex] = calculateValue(
+    aStartFrame.needsUpdate = true;
+    aStartLifetime.array[particleIndex] = calculateValue(
       generalData.particleSystemId,
       startLifetime,
       generalData.normalizedLifetimePercentage
     ) * 1e3;
-    geometry.attributes.startLifetime.needsUpdate = true;
+    aStartLifetime.needsUpdate = true;
     generalData.startValues.startSize[particleIndex] = calculateValue(
       generalData.particleSystemId,
       startSize,
       generalData.normalizedLifetimePercentage
     );
-    geometry.attributes.size.array[particleIndex] = generalData.startValues.startSize[particleIndex];
-    geometry.attributes.size.needsUpdate = true;
+    aSize.array[particleIndex] = generalData.startValues.startSize[particleIndex];
+    aSize.needsUpdate = true;
     generalData.startValues.startOpacity[particleIndex] = calculateValue(
       generalData.particleSystemId,
       startOpacity,
       generalData.normalizedLifetimePercentage
     );
-    geometry.attributes.colorA.array[particleIndex] = generalData.startValues.startOpacity[particleIndex];
-    geometry.attributes.colorA.needsUpdate = true;
-    geometry.attributes.rotation.array[particleIndex] = calculateValue(
+    aColorA.array[particleIndex] = generalData.startValues.startOpacity[particleIndex];
+    aColorA.needsUpdate = true;
+    aRotation.array[particleIndex] = calculateValue(
       generalData.particleSystemId,
       startRotation,
       generalData.normalizedLifetimePercentage
     );
-    geometry.attributes.rotation.needsUpdate = true;
+    aRotation.needsUpdate = true;
     if (normalizedConfig.rotationOverLifetime.isActive)
       generalData.lifetimeValues.rotationOverLifetime[particleIndex] = THREE4.MathUtils.randFloat(
         normalizedConfig.rotationOverLifetime.min,
@@ -1353,10 +1520,10 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       velocities[particleIndex]
     );
     const positionIndex = Math.floor(particleIndex * 3);
-    geometry.attributes.position.array[positionIndex] = position.x + startPositions[particleIndex].x;
-    geometry.attributes.position.array[positionIndex + 1] = position.y + startPositions[particleIndex].y;
-    geometry.attributes.position.array[positionIndex + 2] = position.z + startPositions[particleIndex].z;
-    geometry.attributes.position.needsUpdate = true;
+    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;
     if (generalData.linearVelocityData) {
       generalData.linearVelocityData[particleIndex].speed.set(
         normalizedConfig.velocityOverLifetime.linear.x ? calculateValue(
@@ -1400,13 +1567,13 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
         startPositions[particleIndex].z
       );
     }
-    geometry.attributes.lifetime.array[particleIndex] = 0;
-    geometry.attributes.lifetime.needsUpdate = true;
+    aLifetime.array[particleIndex] = 0;
+    aLifetime.needsUpdate = true;
     applyModifiers({
       delta: 0,
       generalData,
       normalizedConfig,
-      attributes: particleSystem.geometry.attributes,
+      attributes: mappedAttributes,
       particleLifetimePercentage: 0,
       particleIndex
     });
@@ -1425,8 +1592,9 @@ 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 points = sub.instance instanceof THREE4.Points ? sub.instance : sub.instance.children[0];
-      const isActiveArr = points?.geometry?.attributes?.isActive?.array;
+      const obj3d = sub.instance instanceof THREE4.Points || sub.instance instanceof THREE4.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) {
         sub.dispose();
         instances.splice(i, 1);
@@ -1462,6 +1630,10 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
             ...subConfig.config.transform,
             position: new THREE4.Vector3(position.x, position.y, position.z)
           },
+          renderer: {
+            ...subConfig.config.renderer ?? {},
+            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
           } : {}
@@ -1473,12 +1645,31 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
       instances.push(subSystem);
     }
   };
-  let particleSystem = new THREE4.Points(geometry, material);
+  let particleSystem = useInstancing ? 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();
+    };
+  }
   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.scale.copy(transform.scale);
+  const mappedAttributes = {
+    position: aPosition,
+    isActive: aIsActive,
+    lifetime: aLifetime,
+    startLifetime: aStartLifetime,
+    startFrame: aStartFrame,
+    size: aSize,
+    rotation: aRotation,
+    colorR: aColorR,
+    colorG: aColorG,
+    colorB: aColorB,
+    colorA: aColorA
+  };
   const calculatedCreationTime = now + calculateValue(generalData.particleSystemId, startDelay) * 1e3;
   let wrapper;
   if (normalizedConfig.simulationSpace === "WORLD" /* WORLD */) {
@@ -1518,6 +1709,7 @@ var createParticleSystem = (config = DEFAULT_PARTICLE_SYSTEM_CONFIG, externalNow
   const instanceData = {
     particleSystem,
     wrapper,
+    mappedAttributes,
     elapsedUniform: material.uniforms.elapsed,
     generalData,
     onUpdate,
@@ -1586,7 +1778,8 @@ var updateParticleSystemInstance = (props, { now, delta, elapsed }) => {
     gravity,
     normalizedForceFields,
     onParticleDeath,
-    onParticleBirth
+    onParticleBirth,
+    mappedAttributes: ma
   } = props;
   const hasForceFields = normalizedForceFields.length > 0;
   const lifetime = now - creationTime;
@@ -1633,18 +1826,17 @@ var updateParticleSystemInstance = (props, { now, delta, elapsed }) => {
     particleSystem.worldToLocal(gravityVelocity);
   }
   const creationTimes = generalData.creationTimes;
-  const attributes = particleSystem.geometry.attributes;
-  const isActiveArr = attributes.isActive.array;
-  const startLifetimeArr = attributes.startLifetime.array;
-  const positionArr = attributes.position.array;
-  const lifetimeArr = attributes.lifetime.array;
+  const isActiveArr = ma.isActive.array;
+  const startLifetimeArr = ma.startLifetime.array;
+  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 = attributes;
+  _modifierParams.attributes = ma;
   for (let index = 0; index < creationTimesLength; index++) {
     if (isActiveArr[index]) {
       const particleLifetime = now - creationTimes[index];
@@ -1688,8 +1880,8 @@ var updateParticleSystemInstance = (props, { now, delta, elapsed }) => {
       }
     }
   }
-  if (positionNeedsUpdate) attributes.position.needsUpdate = true;
-  if (lifetimeNeedsUpdate) attributes.lifetime.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(
@@ -1776,7 +1968,7 @@ var updateParticleSystemInstance = (props, { now, delta, elapsed }) => {
         if (onParticleBirth)
           onParticleBirth(
             particleIndex,
-            attributes.position.array,
+            ma.position.array,
             velocities[particleIndex],
             now
           );
@@ -1803,6 +1995,6 @@ var updateParticleSystems = (cycleData) => {
   );
 };
 
-export { CurveFunctionId, EmitFrom, ForceFieldFalloff, ForceFieldType, LifeTimeCurve, 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, createDefaultParticleTexture, createParticleSystem, curveFunctionIdMap, getBezierCacheSize, getCurveFunction, getCurveFunctionFromConfig, getDefaultParticleSystemConfig, isLifeTimeCurve, removeBezierCurveFunction, updateParticleSystems };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map