@newkrok/three-particles 0.0.1 → 0.2.2

package/README.md

@@ -1,8 +1,21 @@
 # THREE Particles
-Particle sytem for ThreeJS
+
+Particle system for ThreeJS
 
 # THREE Particles Editor
+
 You can create your own particle effects with it's editor https://github.com/NewKrok/three-particles-editor
 
 # Live demo
+
 https://newkrok.com/three-particles-editor/index.html
+
+# Install
+
+npm package https://www.npmjs.com/package/@newkrok/three-particles
+
+Install with npm
+`npm i @newkrok/three-particles`
+
+Add as a package.json dependency
+`"dependencies": { ... "@newkrok/three-particles": "0.2.1" ... }, `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newkrok/three-particles",
-  "version": "0.0.1",
+  "version": "0.2.2",
   "description": "Particle system for ThreeJS",
   "main": "src/js/three-particles.js",
   "bin": {
@@ -22,6 +22,9 @@
     "url": "https://github.com/NewKrok/three-particles/issues"
   },
   "homepage": "https://github.com/NewKrok/three-particles#readme",
+  "dependencies": {
+    "three": "^0.135.0"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   }

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;
+    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

@@ -0,0 +1,161 @@
+import * as THREE from "three/build/three.module.js";
+
+export const deepMerge = (
+  objectA,
+  objectB,
+  config = { skippedProperties: [], applyToFirstObject: false }
+) => {
+  const result = {};
+  Object.keys(objectA).forEach((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;
+};
+
+export const calculateRandomPositionAndVelocityOnSphere = (
+  position,
+  velocity,
+  startSpeed,
+  { radius, radiusThickness, arc }
+) => {
+  const u = Math.random() * (arc / 360);
+  const v = Math.random();
+  const randomizedDistanceRatio = Math.random();
+  const theta = 2 * Math.PI * u;
+  const phi = Math.acos(2 * v - 1);
+  const sinPhi = Math.sin(phi);
+
+  const xDirection = sinPhi * Math.cos(theta);
+  const yDirection = sinPhi * Math.sin(theta);
+  const zDirection = Math.cos(phi);
+  const normalizedThickness = 1 - radiusThickness;
+
+  position.x =
+    radius * normalizedThickness * xDirection +
+    radius * radiusThickness * randomizedDistanceRatio * xDirection;
+  position.y =
+    radius * normalizedThickness * yDirection +
+    radius * radiusThickness * randomizedDistanceRatio * yDirection;
+  position.z =
+    radius * normalizedThickness * zDirection +
+    radius * radiusThickness * randomizedDistanceRatio * zDirection;
+
+  const randomizedSpeed = THREE.MathUtils.randFloat(
+    startSpeed.min,
+    startSpeed.max
+  );
+  const speedMultiplierByPosition = 1 / position.length();
+  velocity.set(
+    position.x * speedMultiplierByPosition * randomizedSpeed,
+    position.y * speedMultiplierByPosition * randomizedSpeed,
+    position.z * speedMultiplierByPosition * randomizedSpeed
+  );
+};
+
+export const calculateRandomPositionAndVelocityOnCone = (
+  position,
+  velocity,
+  startSpeed,
+  { radius, radiusThickness, arc, angle = 90 }
+) => {
+  const theta = 2 * Math.PI * Math.random() * (arc / 360);
+  const randomizedDistanceRatio = Math.random();
+
+  const xDirection = Math.cos(theta);
+  const yDirection = Math.sin(theta);
+  const normalizedThickness = 1 - radiusThickness;
+
+  position.x =
+    radius * normalizedThickness * xDirection +
+    radius * radiusThickness * randomizedDistanceRatio * xDirection;
+  position.y =
+    radius * normalizedThickness * yDirection +
+    radius * radiusThickness * randomizedDistanceRatio * yDirection;
+  position.z = 0;
+
+  const positionLength = position.length();
+  const normalizedAngle = Math.abs(
+    (positionLength / radius) * THREE.Math.degToRad(angle)
+  );
+  const sinNormalizedAngle = Math.sin(normalizedAngle);
+
+  const randomizedSpeed = THREE.MathUtils.randFloat(
+    startSpeed.min,
+    startSpeed.max
+  );
+  const speedMultiplierByPosition = 1 / positionLength;
+  velocity.set(
+    position.x *
+      sinNormalizedAngle *
+      speedMultiplierByPosition *
+      randomizedSpeed,
+    position.y *
+      sinNormalizedAngle *
+      speedMultiplierByPosition *
+      randomizedSpeed,
+    -Math.cos(normalizedAngle) * randomizedSpeed
+  );
+};
+
+export const calculateRandomPositionAndVelocityOnCircle = (
+  position,
+  velocity,
+  startSpeed,
+  { radius, radiusThickness, arc }
+) => {
+  const theta = 2 * Math.PI * Math.random() * (arc / 360);
+  const randomizedDistanceRatio = Math.random();
+
+  const xDirection = Math.cos(theta);
+  const yDirection = Math.sin(theta);
+  const normalizedThickness = 1 - radiusThickness;
+
+  position.x =
+    radius * normalizedThickness * xDirection +
+    radius * radiusThickness * randomizedDistanceRatio * xDirection;
+  position.y =
+    radius * normalizedThickness * yDirection +
+    radius * radiusThickness * randomizedDistanceRatio * yDirection;
+  position.z = 0;
+
+  const randomizedSpeed = THREE.MathUtils.randFloat(
+    startSpeed.min,
+    startSpeed.max
+  );
+
+  const positionLength = position.length();
+  const speedMultiplierByPosition = 1 / positionLength;
+  velocity.set(
+    position.x * speedMultiplierByPosition * randomizedSpeed,
+    position.y * speedMultiplierByPosition * randomizedSpeed,
+    0
+  );
+};
+
+export const calculateRandomPositionAndVelocityOnRectangle = (
+  position,
+  velocity,
+  startSpeed,
+  { rotation, scale }
+) => {
+  const xOffset = Math.random() * scale.x - scale.x / 2;
+  const yOffset = Math.random() * scale.y - scale.y / 2;
+  const rotationX = THREE.Math.degToRad(rotation.x);
+  const rotationY = THREE.Math.degToRad(rotation.y);
+  position.x = xOffset * Math.cos(rotationY);
+  position.y = yOffset * Math.cos(rotationX);
+  position.z = xOffset * Math.sin(rotationY) - yOffset * Math.sin(rotationX);
+
+  const randomizedSpeed = THREE.MathUtils.randFloat(
+    startSpeed.min,
+    startSpeed.max
+  );
+  velocity.set(0, 0, -randomizedSpeed);
+};

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

@@ -1,5 +1,13 @@
 import * as THREE from "three/build/three.module.js";
 
+import {
+  calculateRandomPositionAndVelocityOnCircle,
+  calculateRandomPositionAndVelocityOnCone,
+  calculateRandomPositionAndVelocityOnRectangle,
+  calculateRandomPositionAndVelocityOnSphere,
+  deepMerge,
+} from "./three-particles-utils.js";
+
 import ParticleSystemFragmentShader from "./shaders/particle-system-fragment-shader.glsl.js";
 import ParticleSystemVertexShader from "./shaders/particle-system-vertex-shader.glsl.js";
 
@@ -21,9 +29,64 @@ export const Shape = {
   RECTANGLE: "RECTANGLE",
 };
 
-const defaultTextureSheetAnimation = {
-  tiles: new THREE.Vector2(1.0, 1.0),
-  fps: 30.0,
+export const TimeMode = {
+  LIFETIME: "LIFETIME",
+  FPS: "FPS",
+};
+
+export const getDefaultParticleSystemConfig = () =>
+  JSON.parse(JSON.stringify(DEFAULT_PARTICLE_SYSTEM_CONFIG));
+
+const DEFAULT_PARTICLE_SYSTEM_CONFIG = {
+  duration: 5.0,
+  looping: true,
+  startDelay: { min: 0.0, max: 0.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 },
+  startColor: {
+    min: { r: 1.0, g: 1.0, b: 1.0 },
+    max: { r: 1.0, g: 1.0, b: 1.0 },
+  },
+  startOpacity: { min: 1.0, max: 1.0 },
+  gravity: 0.0,
+  simulationSpace: SimulationSpace.LOCAL,
+  maxParticles: 100.0,
+  emission: {
+    rateOverTime: 10.0,
+    rateOverDistance: 0.0,
+  },
+  shape: {
+    shape: Shape.SPHERE,
+    sphere: {
+      radius: 1.0,
+      radiusThickness: 1.0,
+      arc: 360.0,
+    },
+    cone: {
+      angle: 25.0,
+      radius: 1.0,
+      radiusThickness: 1.0,
+      arc: 360.0,
+    },
+    circle: {
+      radius: 1.0,
+      radiusThickness: 1.0,
+      arc: 360.0,
+    },
+    rectangle: {
+      rotation: { x: 0.0, y: 0.0 }, // TODO: add z rotation
+      scale: { x: 1.0, y: 1.0 },
+    },
+  },
+  map: null,
+  textureSheetAnimation: {
+    tiles: new THREE.Vector2(1.0, 1.0),
+    timeMode: TimeMode.LIFETIME,
+    fps: 10.0,
+    startFrame: { min: 0.0, max: 0.0 },
+  },
 };
 
 const createFloat32Attributes = ({
@@ -46,109 +109,87 @@ const createFloat32Attributes = ({
   );
 };
 
-const getRandomStartPositionByShape = ({ shape, radius, radiusThickness }) => {
-  const position = new THREE.Vector3();
+const calculatePositionAndVelocity = (
+  { shape, sphere, cone, circle, rectangle },
+  startSpeed,
+  position,
+  velocity
+) => {
   switch (shape) {
-    case Shape.SPHERE: {
-      const u = Math.random();
-      const v = Math.random();
-      const randomizedDistanceRatio = Math.random();
-      const theta = 2 * Math.PI * u;
-      const phi = Math.acos(2 * v - 1);
-      const xDirection = Math.sin(phi) * Math.cos(theta);
-      const yDirection = Math.sin(phi) * Math.sin(theta);
-      const zDirection = Math.cos(phi);
-      const normalizedThickness = 1 - radiusThickness;
-
-      position.x =
-        radius * normalizedThickness * xDirection +
-        radius * radiusThickness * randomizedDistanceRatio * xDirection;
-      position.y =
-        radius * normalizedThickness * yDirection +
-        radius * radiusThickness * randomizedDistanceRatio * yDirection;
-      position.z =
-        radius * normalizedThickness * zDirection +
-        radius * radiusThickness * randomizedDistanceRatio * zDirection;
+    case Shape.SPHERE:
+      calculateRandomPositionAndVelocityOnSphere(
+        position,
+        velocity,
+        startSpeed,
+        sphere
+      );
+      break;
+
+    case Shape.CONE:
+      calculateRandomPositionAndVelocityOnCone(
+        position,
+        velocity,
+        startSpeed,
+        cone
+      );
+      break;
+
+    case Shape.CIRCLE:
+      calculateRandomPositionAndVelocityOnCircle(
+        position,
+        velocity,
+        startSpeed,
+        circle
+      );
       break;
-    }
-  }
 
-  return position;
+    case Shape.RECTANGLE:
+      calculateRandomPositionAndVelocityOnRectangle(
+        position,
+        velocity,
+        startSpeed,
+        rectangle
+      );
+      break;
+  }
 };
 
-export const createParticleSystem = ({
-  duration = 5.0,
-  looping = true,
-  startDelay = { min: 0.0, max: 0.0 },
-  startLifeTime = { min: 5.0, max: 5.0 },
-  startSpeed = { min: 5.0, max: 5.0 },
-  startSize = { min: 1.0, max: 1.0 },
-  startRotation = { min: 0.0, max: 0.0 },
-  startColor = {
-    min: { r: 1.0, g: 1.0, b: 1.0 },
-    max: { r: 1.0, g: 1.0, b: 1.0 },
-  },
-  startOpacity = { min: 1.0, max: 1.0 },
-  gravity = 0.0,
-  simulationSpace = SimulationSpace.LOCAL,
-  maxParticles = 100,
-  emission = {
-    rateOverTime: 10.0,
-    rateOverDistance: 0.0,
-  },
-  shape = {
-    shape: Shape.SPHERE,
-    radius: 1.0,
-    radiusThickness: 1.0,
-    arc: 360.0,
-  },
-  map,
-  onUpdate = null,
-  onComplete = null,
-  textureSheetAnimation = defaultTextureSheetAnimation,
-}) => {
+export const createParticleSystem = (
+  config = DEFAULT_PARTICLE_SYSTEM_CONFIG
+) => {
   const now = Date.now();
   const lastWorldPosition = new THREE.Vector3(-99999, -99999, -99999);
   const worldPositionChange = new THREE.Vector3();
   const generalData = { distanceFromLastEmitByDistance: 0 };
 
-  const normalizedStartDelay = { min: 0.0, max: 0.0, ...startDelay };
-  const normalizedStartLifeTime = { min: 5.0, max: 5.0, ...startLifeTime };
-  const normalizedStartSpeed = { min: 5.0, max: 5.0, ...startSpeed };
-  const normalizedStartSize = { min: 1.0, max: 1.0, ...startSize };
-  const normalizedStartRotation = { min: 0.0, max: 0.0, ...startRotation };
-  const normalizedStartColor = {
-    min: { r: 1.0, g: 1.0, b: 1.0, ...startColor.min },
-    max: { r: 1.0, g: 1.0, b: 1.0, ...startColor.max },
-  };
-  const normalizedStartOpacity = { min: 0.0, max: 0.0, ...startOpacity };
-  const normalizedEmission = {
-    rateOverTime: 10.0,
-    rateOverDistance: 0.0,
-    ...emission,
-  };
-  const normalizedShape = {
-    shape: Shape.SPHERE,
-    radius: 1.0,
-    radiusThickness: 1.0,
-    arc: 360.0,
-    ...shape,
-  };
+  const {
+    duration,
+    looping,
+    startDelay,
+    startLifetime,
+    startSpeed,
+    startSize,
+    startRotation,
+    startColor,
+    startOpacity,
+    gravity,
+    simulationSpace,
+    maxParticles,
+    emission,
+    shape,
+    map,
+    onUpdate,
+    onComplete,
+    textureSheetAnimation,
+  } = deepMerge(DEFAULT_PARTICLE_SYSTEM_CONFIG, config);
 
-  const rawUniforms = {
-    ...defaultTextureSheetAnimation,
-    ...textureSheetAnimation,
-  };
-  rawUniforms.tiles = rawUniforms.tiles
-    ? rawUniforms.tiles
-    : defaultTextureSheetAnimation.tiles;
-
-  const uniforms = Object.keys(rawUniforms).reduce(
-    (prev, key) => ({
-      ...prev,
-      [key]: { value: rawUniforms[key] },
-    }),
-    {}
+  const startPositions = Array.from(
+    { length: maxParticles },
+    () => new THREE.Vector3()
+  );
+  const velocities = Array.from(
+    { length: maxParticles },
+    () => new THREE.Vector3()
   );
 
   const material = new THREE.ShaderMaterial({
@@ -159,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,
@@ -171,9 +220,18 @@ export const createParticleSystem = ({
 
   const geometry = new THREE.BufferGeometry();
 
-  const startPosition = getRandomStartPositionByShape(normalizedShape);
+  for (let i = 0; i < maxParticles; i++)
+    calculatePositionAndVelocity(
+      shape,
+      startSpeed,
+      startPositions[i],
+      velocities[i]
+    );
+
   geometry.setFromPoints(
-    Array.from({ length: maxParticles }, () => ({ ...startPosition }))
+    Array.from({ length: maxParticles }, (_, index) => ({
+      ...startPositions[index],
+    }))
   );
 
   const createFloat32AttributesRequest = (propertyName, factory) => {
@@ -187,29 +245,15 @@ export const createParticleSystem = ({
 
   createFloat32AttributesRequest("isActive", false);
   createFloat32AttributesRequest("creationTime", 0);
-  createFloat32AttributesRequest("lifeTime", 0);
-  createFloat32AttributesRequest("startLifeTime", () =>
-    THREE.MathUtils.randFloat(
-      normalizedStartLifeTime.min,
-      normalizedStartLifeTime.max
-    )
+  createFloat32AttributesRequest("lifetime", 0);
+  createFloat32AttributesRequest("startLifetime", () =>
+    THREE.MathUtils.randFloat(startLifetime.min, startLifetime.max)
   );
-  const randomizedSpeed = THREE.MathUtils.randFloat(
-    normalizedStartSpeed.min,
-    normalizedStartSpeed.max
-  );
-  const speedMultiplierByPosition = startPosition.length() / 1;
-  createFloat32AttributesRequest(
-    "velocityX",
-    () => startPosition.x * speedMultiplierByPosition * randomizedSpeed
-  );
-  createFloat32AttributesRequest(
-    "velocityY",
-    () => startPosition.y * speedMultiplierByPosition * randomizedSpeed
-  );
-  createFloat32AttributesRequest(
-    "velocityZ",
-    () => startPosition.z * speedMultiplierByPosition * randomizedSpeed
+  createFloat32AttributesRequest("startFrame", () =>
+    THREE.MathUtils.randInt(
+      textureSheetAnimation.startFrame.min,
+      textureSheetAnimation.startFrame.max
+    )
   );
 
   createFloat32AttributesRequest("opacity", 0);
@@ -220,10 +264,7 @@ export const createParticleSystem = ({
     maxParticles,
     factory: () =>
       THREE.Math.degToRad(
-        THREE.MathUtils.randFloat(
-          normalizedStartRotation.min,
-          normalizedStartRotation.max
-        )
+        THREE.MathUtils.randFloat(startRotation.min, startRotation.max)
       ),
   });
 
@@ -231,11 +272,7 @@ export const createParticleSystem = ({
     geometry,
     propertyName: "startSize",
     maxParticles,
-    factory: () =>
-      THREE.MathUtils.randFloat(
-        normalizedStartSize.min,
-        normalizedStartSize.max
-      ),
+    factory: () => THREE.MathUtils.randFloat(startSize.min, startSize.max),
   });
 
   createFloat32AttributesRequest("rotation", 0);
@@ -244,30 +281,27 @@ export const createParticleSystem = ({
   createFloat32AttributesRequest(
     "colorR",
     () =>
-      normalizedStartColor.min.r +
-      colorRandomRatio *
-        (normalizedStartColor.max.r - normalizedStartColor.min.r)
+      startColor.min.r +
+      colorRandomRatio * (startColor.max.r - startColor.min.r)
   );
   createFloat32AttributesRequest(
     "colorG",
     () =>
-      normalizedStartColor.min.g +
-      colorRandomRatio *
-        (normalizedStartColor.max.g - normalizedStartColor.min.g)
+      startColor.min.g +
+      colorRandomRatio * (startColor.max.g - startColor.min.g)
   );
   createFloat32AttributesRequest(
     "colorB",
     () =>
-      normalizedStartColor.min.b +
-      colorRandomRatio *
-        (normalizedStartColor.max.b - normalizedStartColor.min.b)
+      startColor.min.b +
+      colorRandomRatio * (startColor.max.b - startColor.min.b)
   );
   createFloat32AttributesRequest("colorA", 0);
 
   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;
   };
@@ -280,86 +314,70 @@ export const createParticleSystem = ({
     const colorRandomRatio = Math.random();
 
     geometry.attributes.colorR.array[particleIndex] =
-      normalizedStartColor.min.r +
-      colorRandomRatio *
-        (normalizedStartColor.max.r - normalizedStartColor.min.r);
+      startColor.min.r +
+      colorRandomRatio * (startColor.max.r - startColor.min.r);
     geometry.attributes.colorR.needsUpdate = true;
 
     geometry.attributes.colorG.array[particleIndex] =
-      normalizedStartColor.min.g +
-      colorRandomRatio *
-        (normalizedStartColor.max.g - normalizedStartColor.min.g);
+      startColor.min.g +
+      colorRandomRatio * (startColor.max.g - startColor.min.g);
     geometry.attributes.colorG.needsUpdate = true;
 
     geometry.attributes.colorB.array[particleIndex] =
-      normalizedStartColor.min.b +
-      colorRandomRatio *
-        (normalizedStartColor.max.b - normalizedStartColor.min.b);
+      startColor.min.b +
+      colorRandomRatio * (startColor.max.b - startColor.min.b);
     geometry.attributes.colorB.needsUpdate = true;
 
     geometry.attributes.colorA.array[particleIndex] = THREE.MathUtils.randFloat(
-      normalizedStartOpacity.min,
-      normalizedStartOpacity.max
+      startOpacity.min,
+      startOpacity.max
     );
     geometry.attributes.colorA.needsUpdate = true;
 
-    geometry.attributes.startLifeTime.array[particleIndex] =
-      THREE.MathUtils.randFloat(
-        normalizedStartLifeTime.min,
-        normalizedStartLifeTime.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(
-        normalizedStartSize.min,
-        normalizedStartSize.max
-      );
+      THREE.MathUtils.randFloat(startSize.min, startSize.max);
     geometry.attributes.startSize.needsUpdate = true;
 
     geometry.attributes.rotation.array[particleIndex] = THREE.Math.degToRad(
-      THREE.MathUtils.randFloat(
-        normalizedStartRotation.min,
-        normalizedStartRotation.max
-      )
+      THREE.MathUtils.randFloat(startRotation.min, startRotation.max)
     );
     geometry.attributes.rotation.needsUpdate = true;
 
-    const startPosition = getRandomStartPositionByShape(normalizedShape);
-    geometry.attributes.position.array[Math.floor(particleIndex * 3)] =
-      startPosition.x;
-    geometry.attributes.position.array[Math.floor(particleIndex * 3) + 1] =
-      startPosition.y;
-    geometry.attributes.position.array[Math.floor(particleIndex * 3) + 2] =
-      startPosition.z;
+    calculatePositionAndVelocity(
+      shape,
+      startSpeed,
+      startPositions[particleIndex],
+      velocities[particleIndex]
+    );
+    const positionIndex = Math.floor(particleIndex * 3);
+    geometry.attributes.position.array[positionIndex] =
+      startPositions[particleIndex].x;
+    geometry.attributes.position.array[positionIndex + 1] =
+      startPositions[particleIndex].y;
+    geometry.attributes.position.array[positionIndex + 2] =
+      startPositions[particleIndex].z;
     particleSystem.geometry.attributes.position.needsUpdate = true;
 
-    const randomizedSpeed = THREE.MathUtils.randFloat(
-      normalizedStartSpeed.min,
-      normalizedStartSpeed.max
-    );
-    const speedMultiplierByPosition = 1 / startPosition.length();
-    geometry.attributes.velocityX.array[particleIndex] =
-      startPosition.x * speedMultiplierByPosition * randomizedSpeed;
-    geometry.attributes.velocityY.array[particleIndex] =
-      startPosition.y * speedMultiplierByPosition * randomizedSpeed;
-    geometry.attributes.velocityZ.array[particleIndex] =
-      startPosition.z * speedMultiplierByPosition * randomizedSpeed;
-
-    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);
   particleSystem.sortParticles = true;
 
   const calculatedCreationTime =
-    now +
-    THREE.MathUtils.randFloat(
-      normalizedStartDelay.min,
-      normalizedStartDelay.max
-    ) *
-      1000;
+    now + THREE.MathUtils.randFloat(startDelay.min, startDelay.max) * 1000;
 
   createdParticleSystems.push({
     particleSystem,
@@ -374,8 +392,9 @@ export const createParticleSystem = ({
     looping,
     simulationSpace,
     gravity,
-    emission: normalizedEmission,
+    emission,
     iterationCount: 0,
+    velocities,
     deactivateParticle,
     activateParticle,
   });
@@ -393,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,
@@ -409,12 +427,13 @@ export const updateParticleSystems = ({ delta, elapsed }) => {
       looping,
       emission,
       iterationCount,
+      velocities,
       deactivateParticle,
       activateParticle,
       simulationSpace,
       gravity,
     } = props;
-    const lifeTime = now - creationTime;
+    const lifetime = now - creationTime;
     particleSystem.material.uniforms.elapsed.value = elapsed;
 
     if (
@@ -433,55 +452,52 @@ 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 {
-            const accelerationX =
-              particleSystem.geometry.attributes.velocityX.array[index];
-
-            const accelerationY =
-              particleSystem.geometry.attributes.velocityY.array[index] -
-              gravity;
-            particleSystem.geometry.attributes.velocityY.array[index] =
-              accelerationY;
-
-            const accelerationZ =
-              particleSystem.geometry.attributes.velocityZ.array[index];
-
-            if (gravity !== 0 || accelerationX !== 0 || accelerationY !== 0) {
+            const velocity = velocities[index];
+            velocity.y -= gravity;
+
+            if (
+              gravity !== 0 ||
+              velocity.x !== 0 ||
+              velocity.y !== 0 ||
+              velocity.z !== 0
+            ) {
+              const positionIndex = index * 3;
               const positionArr =
                 particleSystem.geometry.attributes.position.array;
               if (simulationSpace === SimulationSpace.WORLD) {
-                positionArr[index * 3] -= worldPositionChange.x;
-                positionArr[index * 3 + 1] -= worldPositionChange.y;
-                positionArr[index * 3 + 2] -= worldPositionChange.z;
+                positionArr[positionIndex] -= worldPositionChange.x;
+                positionArr[positionIndex + 1] -= worldPositionChange.y;
+                positionArr[positionIndex + 2] -= worldPositionChange.z;
               }
-              positionArr[index * 3] += accelerationX * delta;
-              positionArr[index * 3 + 1] += accelerationY * delta;
-              positionArr[index * 3 + 2] += accelerationZ * delta;
+              positionArr[positionIndex] += velocity.x * delta;
+              positionArr[positionIndex + 1] += velocity.y * delta;
+              positionArr[positionIndex + 2] += velocity.z * delta;
               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)
@@ -529,7 +545,7 @@ export const updateParticleSystems = ({ delta, elapsed }) => {
           particleSystem,
           delta,
           elapsed,
-          lifeTime,
+          lifetime,
           iterationCount: iterationCount + 1,
         });
     } else if (onComplete)