@newkrok/three-particles 0.2.0 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # THREE Particles
 
-Particle sytem for ThreeJS
+Particle system for ThreeJS
 
 # THREE Particles Editor
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newkrok/three-particles",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Particle system for ThreeJS",
   "main": "src/js/three-particles.js",
   "bin": {

package/src/js/effects/shaders/particle-system-fragment-shader.glsl.js

@@ -2,20 +2,30 @@ const ParticleSystemFragmentShader = `
   uniform sampler2D map;
   uniform float elapsed;
   uniform float fps;
+  uniform bool useFPSForFrameIndex;
   uniform vec2 tiles;
 
   varying vec4 vColor;
-  varying float vLifeTime;
+  varying float vLifetime;
+  varying float vStartLifetime;
   varying float vRotation;
+  varying float vStartFrame;
 
   void main()
   {
     gl_FragColor = vColor;
     float mid = 0.5;
 
-    float frameIndex = max(min(vLifeTime / 1000.0 * fps, tiles.x * tiles.y - 1.0), 0.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.y, tiles.y));
+    float spriteYIndex = floor(mod(frameIndex / tiles.x, tiles.y));
 
     vec2 frameUV = vec2(
       gl_PointCoord.x / tiles.x + spriteXIndex / tiles.x,

package/src/js/effects/shaders/particle-system-vertex-shader.glsl.js

@@ -4,24 +4,30 @@ const ParticleSystemVertexShader = `
   attribute float colorG;
   attribute float colorB;
   attribute float colorA;
-  attribute float lifeTime;
+  attribute float lifetime;
+  attribute float startLifetime;
   attribute float rotation;
+  attribute float startFrame;
 
   varying mat4 vPosition;
   varying vec4 vColor;
-  varying float vLifeTime;
+  varying float vLifetime;
+  varying float vStartLifetime;
   varying float vRotation;
+  varying float vStartFrame;
 
   void main()
   {
     vColor = vec4(colorR, colorG, colorB, colorA);
     vLifeTime = lifeTime;
+    vStartLifetime = startLifetime;
     vRotation = rotation;
+    vStartFrame = startFrame;
 
     vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
     gl_PointSize = startSize * (100.0 / length(mvPosition.xyz));
     gl_Position = projectionMatrix * mvPosition;
   }
-`
+`;
 
-export default ParticleSystemVertexShader
+export default ParticleSystemVertexShader;

package/src/js/effects/three-particles-utils.js

@@ -1,14 +1,20 @@
 import * as THREE from "three/build/three.module.js";
 
-export const deepMerge = (objectA, objectB) => {
+export const deepMerge = (
+  objectA,
+  objectB,
+  config = { skippedProperties: [], applyToFirstObject: false }
+) => {
   const result = {};
   Object.keys(objectA).forEach((key) => {
-    result[key] =
-      typeof objectA[key] === "object" && objectA[key] && objectB[key]
-        ? deepMerge(objectA[key], objectB[key])
-        : objectB[key] === 0
-        ? 0
-        : objectB[key] || objectA[key];
+    if (!config.skippedProperties || !config.skippedProperties.includes(key)) {
+      if (typeof objectA[key] === "object" && objectA[key] && objectB[key]) {
+        result[key] = deepMerge(objectA[key], objectB[key], config);
+      } else {
+        result[key] = objectB[key] === 0 ? 0 : objectB[key] || objectA[key];
+        if (config.applyToFirstObject) objectA[key] = result[key];
+      }
+    }
   });
   return result;
 };

package/src/js/effects/three-particles.js

@@ -29,6 +29,11 @@ export const Shape = {
   RECTANGLE: "RECTANGLE",
 };
 
+export const TimeMode = {
+  LIFETIME: "LIFETIME",
+  FPS: "FPS",
+};
+
 export const getDefaultParticleSystemConfig = () =>
   JSON.parse(JSON.stringify(DEFAULT_PARTICLE_SYSTEM_CONFIG));
 
@@ -36,7 +41,7 @@ const DEFAULT_PARTICLE_SYSTEM_CONFIG = {
   duration: 5.0,
   looping: true,
   startDelay: { min: 0.0, max: 0.0 },
-  startLifeTime: { min: 2.0, max: 2.0 },
+  startLifetime: { min: 2.0, max: 2.0 },
   startSpeed: { min: 1.0, max: 1.0 },
   startSize: { min: 1.0, max: 1.0 },
   startRotation: { min: 0.0, max: 0.0 },
@@ -45,7 +50,7 @@ const DEFAULT_PARTICLE_SYSTEM_CONFIG = {
     max: { r: 1.0, g: 1.0, b: 1.0 },
   },
   startOpacity: { min: 1.0, max: 1.0 },
-  gravity: 0,
+  gravity: 0.0,
   simulationSpace: SimulationSpace.LOCAL,
   maxParticles: 100.0,
   emission: {
@@ -76,7 +81,12 @@ const DEFAULT_PARTICLE_SYSTEM_CONFIG = {
     },
   },
   map: null,
-  textureSheetAnimation: { tiles: new THREE.Vector2(1.0, 1.0), fps: 30.0 },
+  textureSheetAnimation: {
+    tiles: new THREE.Vector2(1.0, 1.0),
+    timeMode: TimeMode.LIFETIME,
+    fps: 10.0,
+    startFrame: { min: 0.0, max: 0.0 },
+  },
 };
 
 const createFloat32Attributes = ({
@@ -156,7 +166,7 @@ export const createParticleSystem = (
     duration,
     looping,
     startDelay,
-    startLifeTime,
+    startLifetime,
     startSpeed,
     startSize,
     startRotation,
@@ -182,14 +192,6 @@ export const createParticleSystem = (
     () => new THREE.Vector3()
   );
 
-  const uniforms = Object.keys(textureSheetAnimation).reduce(
-    (prev, key) => ({
-      ...prev,
-      [key]: { value: textureSheetAnimation[key] },
-    }),
-    {}
-  );
-
   const material = new THREE.ShaderMaterial({
     uniforms: {
       elapsed: {
@@ -198,7 +200,15 @@ export const createParticleSystem = (
       map: {
         value: map,
       },
-      ...uniforms,
+      tiles: {
+        value: textureSheetAnimation.tiles,
+      },
+      fps: {
+        value: textureSheetAnimation.fps,
+      },
+      useFPSForFrameIndex: {
+        value: textureSheetAnimation.timeMode === TimeMode.FPS,
+      },
     },
     vertexShader: ParticleSystemVertexShader,
     fragmentShader: ParticleSystemFragmentShader,
@@ -235,9 +245,15 @@ export const createParticleSystem = (
 
   createFloat32AttributesRequest("isActive", false);
   createFloat32AttributesRequest("creationTime", 0);
-  createFloat32AttributesRequest("lifeTime", 0);
-  createFloat32AttributesRequest("startLifeTime", () =>
-    THREE.MathUtils.randFloat(startLifeTime.min, startLifeTime.max)
+  createFloat32AttributesRequest("lifetime", 0);
+  createFloat32AttributesRequest("startLifetime", () =>
+    THREE.MathUtils.randFloat(startLifetime.min, startLifetime.max)
+  );
+  createFloat32AttributesRequest("startFrame", () =>
+    THREE.MathUtils.randInt(
+      textureSheetAnimation.startFrame.min,
+      textureSheetAnimation.startFrame.max
+    )
   );
 
   createFloat32AttributesRequest("opacity", 0);
@@ -284,8 +300,8 @@ export const createParticleSystem = (
 
   const deactivateParticle = (particleIndex) => {
     geometry.attributes.isActive.array[particleIndex] = false;
-    geometry.attributes.lifeTime.array[particleIndex] = 0;
-    geometry.attributes.lifeTime.needsUpdate = true;
+    geometry.attributes.lifetime.array[particleIndex] = 0;
+    geometry.attributes.lifetime.needsUpdate = true;
     geometry.attributes.colorA.array[particleIndex] = 0;
     geometry.attributes.colorA.needsUpdate = true;
   };
@@ -318,9 +334,16 @@ export const createParticleSystem = (
     );
     geometry.attributes.colorA.needsUpdate = true;
 
-    geometry.attributes.startLifeTime.array[particleIndex] =
-      THREE.MathUtils.randFloat(startLifeTime.min, startLifeTime.max) * 1000;
-    geometry.attributes.startLifeTime.needsUpdate = true;
+    geometry.attributes.startFrame.array[particleIndex] =
+      THREE.MathUtils.randInt(
+        textureSheetAnimation.startFrame.min,
+        textureSheetAnimation.startFrame.max
+      );
+    geometry.attributes.startFrame.needsUpdate = true;
+
+    geometry.attributes.startLifetime.array[particleIndex] =
+      THREE.MathUtils.randFloat(startLifetime.min, startLifetime.max) * 1000;
+    geometry.attributes.startLifetime.needsUpdate = true;
 
     geometry.attributes.startSize.array[particleIndex] =
       THREE.MathUtils.randFloat(startSize.min, startSize.max);
@@ -346,8 +369,8 @@ export const createParticleSystem = (
       startPositions[particleIndex].z;
     particleSystem.geometry.attributes.position.needsUpdate = true;
 
-    geometry.attributes.lifeTime.array[particleIndex] = 0;
-    geometry.attributes.lifeTime.needsUpdate = true;
+    geometry.attributes.lifetime.array[particleIndex] = 0;
+    geometry.attributes.lifetime.needsUpdate = true;
   };
 
   const particleSystem = new THREE.Points(geometry, material);
@@ -389,8 +412,7 @@ export const destroyParticleSystem = (particleSystem) => {
   particleSystem.parent.remove(particleSystem);
 };
 
-export const updateParticleSystems = ({ delta, elapsed }) => {
-  const now = Date.now();
+export const updateParticleSystems = ({ now, delta, elapsed }) => {
   createdParticleSystems.forEach((props) => {
     const {
       onUpdate,
@@ -411,7 +433,7 @@ export const updateParticleSystems = ({ delta, elapsed }) => {
       simulationSpace,
       gravity,
     } = props;
-    const lifeTime = now - creationTime;
+    const lifetime = now - creationTime;
     particleSystem.material.uniforms.elapsed.value = elapsed;
 
     if (
@@ -430,10 +452,10 @@ export const updateParticleSystems = ({ delta, elapsed }) => {
     particleSystem.geometry.attributes.creationTime.array.forEach(
       (entry, index) => {
         if (particleSystem.geometry.attributes.isActive.array[index]) {
-          const particleLifeTime = now - float32Helper - entry;
+          const particleLifetime = now - float32Helper - entry;
           if (
-            particleLifeTime >
-            particleSystem.geometry.attributes.startLifeTime.array[index]
+            particleLifetime >
+            particleSystem.geometry.attributes.startLifetime.array[index]
           )
             deactivateParticle(index);
           else {
@@ -460,22 +482,22 @@ export const updateParticleSystems = ({ delta, elapsed }) => {
               particleSystem.geometry.attributes.position.needsUpdate = true;
             }
 
-            particleSystem.geometry.attributes.lifeTime.array[index] =
-              particleLifeTime;
-            particleSystem.geometry.attributes.lifeTime.needsUpdate = true;
+            particleSystem.geometry.attributes.lifetime.array[index] =
+              particleLifetime;
+            particleSystem.geometry.attributes.lifetime.needsUpdate = true;
 
             // TEMP
             particleSystem.geometry.attributes.colorA.array[index] =
               1 -
-              particleLifeTime /
-                particleSystem.geometry.attributes.startLifeTime.array[index];
+              particleLifetime /
+                particleSystem.geometry.attributes.startLifetime.array[index];
             particleSystem.geometry.attributes.colorA.needsUpdate = true;
           }
         }
       }
     );
 
-    if (looping || lifeTime < duration * 1000) {
+    if (looping || lifetime < duration * 1000) {
       const emissionDelta = now - lastEmissionTime;
       const neededParticlesByTime = Math.floor(
         emission.rateOverTime * (emissionDelta / 1000)
@@ -523,7 +545,7 @@ export const updateParticleSystems = ({ delta, elapsed }) => {
           particleSystem,
           delta,
           elapsed,
-          lifeTime,
+          lifetime,
           iterationCount: iterationCount + 1,
         });
     } else if (onComplete)