@newkrok/three-particles 0.3.0 → 0.5.0

package/README.md

@@ -18,4 +18,4 @@ Install with npm
 `npm i @newkrok/three-particles`
 
 Add as a package.json dependency
-`"dependencies": { ... "@newkrok/three-particles": "0.2.2" ... }, `
+`"dependencies": { ... "@newkrok/three-particles": "0.5.0" ... }, `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newkrok/three-particles",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Particle system for ThreeJS",
   "main": "src/js/three-particles.js",
   "bin": {
@@ -23,8 +23,9 @@
   },
   "homepage": "https://github.com/NewKrok/three-particles#readme",
   "dependencies": {
-    "three": "0.135.0",
-    "easing-functions": "1.0.1"
+    "easing-functions": "1.0.1",
+    "three": "0.136.0",
+    "three-noise": "^1.1.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

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

@@ -0,0 +1,36 @@
+const nCr = (n, k) => {
+  let z = 1;
+  for (let i = 1; i <= k; i++) z *= (n + 1 - i) / i;
+  return z;
+};
+
+export const createBezierCurveFunction = (bezierPoints) => (percentage) => {
+  if (percentage < 0) return bezierPoints[0];
+  if (percentage > 1) return bezierPoints[bezierPoints.length - 1];
+
+  let start = 0;
+  let stop = bezierPoints.length - 1;
+
+  bezierPoints.find((point, index) => {
+    const result = percentage < point.percentage;
+    if (result) stop = index;
+    else if (point.percentage !== undefined) start = index;
+    return result;
+  });
+
+  const n = stop - start;
+  const calculatedPercentage =
+    (percentage - bezierPoints[start].percentage) /
+    (bezierPoints[stop].percentage - bezierPoints[start].percentage);
+
+  let value = 0;
+  for (let i = 0; i <= n; i++) {
+    const p = bezierPoints[start + i];
+    const c =
+      nCr(n, i) *
+      Math.pow(1 - calculatedPercentage, n - i) *
+      Math.pow(calculatedPercentage, i);
+    value += c * p.y;
+  }
+  return value;
+};

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

@@ -1,6 +1,7 @@
 import Easing from "easing-functions";
 
 export const CurveFunction = {
+  BEZIER: "BEZIER",
   LINEAR: "LINEAR",
   QUADRATIC_IN: "QUADRATIC_IN",
   QUADRATIC_OUT: "QUADRATIC_OUT",

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

@@ -1,6 +1,10 @@
+import * as THREE from "three/build/three.module.js";
+
 import { getCurveFunction } from "./three-particles-curves.js";
 
-const modifiers = [
+const noiseInput = new THREE.Vector3(0, 0, 0);
+
+const curveModifiers = [
   // {key:"colorOverLifetime", attributeKeys:["colorR", "colorG", "colorB"]},
   {
     key: "opacityOverLifetime",
@@ -15,17 +19,20 @@ const modifiers = [
 ];
 
 export const applyModifiers = ({
+  delta,
+  noise,
   startValues,
+  lifetimeValues,
   normalizedConfig,
   attributes,
   particleLifetimePercentage,
   particleIndex,
   forceUpdate = false,
 }) => {
-  modifiers.forEach(({ key, attributeKeys, startValueKeys }) => {
-    const modifier = normalizedConfig[key];
-    if (modifier.isActive) {
-      const multiplier = getCurveFunction(modifier.curveFunction)(
+  curveModifiers.forEach(({ key, attributeKeys, startValueKeys }) => {
+    const curveModifier = normalizedConfig[key];
+    if (curveModifier.isActive) {
+      const multiplier = getCurveFunction(curveModifier.curveFunction)(
         particleLifetimePercentage
       );
       attributeKeys.forEach((attributeKey, index) => {
@@ -41,4 +48,58 @@ export const applyModifiers = ({
       });
     }
   });
+
+  if (lifetimeValues.rotationOverLifetime) {
+    attributes.rotation.array[particleIndex] +=
+      lifetimeValues.rotationOverLifetime[particleIndex] * delta * 0.02;
+    attributes.rotation.needsUpdate = true;
+  }
+
+  if (noise.isActive) {
+    const {
+      sampler,
+      strength,
+      offsets,
+      positionAmount,
+      rotationAmount,
+      sizeAmount,
+    } = noise;
+    const positionIndex = particleIndex * 3;
+    const positionArr = attributes.position.array;
+    let noiseOnPosition;
+
+    const noisePosition =
+      (particleLifetimePercentage + (offsets ? offsets[particleIndex] : 0)) *
+      10 *
+      strength;
+    const noisePower = 0.15 * strength;
+
+    noiseInput.set(noisePosition, 0, 0);
+    noiseOnPosition = sampler.get3(noiseInput);
+    positionArr[positionIndex] += noiseOnPosition * noisePower * positionAmount;
+
+    if (rotationAmount !== 0) {
+      attributes.rotation.array[particleIndex] +=
+        noiseOnPosition * noisePower * rotationAmount;
+      attributes.rotation.needsUpdate = true;
+    }
+
+    if (sizeAmount !== 0) {
+      attributes.size.array[particleIndex] +=
+        noiseOnPosition * noisePower * sizeAmount;
+      attributes.size.needsUpdate = true;
+    }
+
+    noiseInput.set(noisePosition, noisePosition, 0);
+    noiseOnPosition = sampler.get3(noiseInput);
+    positionArr[positionIndex + 1] +=
+      noiseOnPosition * noisePower * positionAmount;
+
+    noiseInput.set(noisePosition, noisePosition, noisePosition);
+    noiseOnPosition = sampler.get3(noiseInput);
+    positionArr[positionIndex + 2] +=
+      noiseOnPosition * noisePower * positionAmount;
+
+    attributes.position.needsUpdate = true;
+  }
 };

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

@@ -8,10 +8,20 @@ export const patchObject = (
   const result = {};
   Object.keys(objectA).forEach((key) => {
     if (!config.skippedProperties || !config.skippedProperties.includes(key)) {
-      if (typeof objectA[key] === "object" && objectA[key] && objectB[key]) {
+      if (
+        typeof objectA[key] === "object" &&
+        objectA[key] &&
+        objectB[key] &&
+        !Array.isArray(objectA[key])
+      ) {
         result[key] = patchObject(objectA[key], objectB[key], config);
       } else {
-        result[key] = objectB[key] === 0 ? 0 : objectB[key] || objectA[key];
+        result[key] =
+          objectB[key] === 0
+            ? 0
+            : objectB[key] === false
+            ? false
+            : objectB[key] || objectA[key];
         if (config.applyToFirstObject) objectA[key] = result[key];
       }
     }

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

@@ -9,12 +9,11 @@ import {
 } from "./three-particles/three-particles-utils.js";
 
 import { CurveFunction } from "./three-particles/three-particles-curves.js";
+import { FBM } from "three-noise/build/three-noise.module.js";
 import ParticleSystemFragmentShader from "./three-particles/shaders/particle-system-fragment-shader.glsl.js";
 import ParticleSystemVertexShader from "./three-particles/shaders/particle-system-vertex-shader.glsl.js";
 import { applyModifiers } from "./three-particles/three-particles-modifiers.js";
-
-// Float32Array is not enough accurate when we are storing timestamp in it so we just remove unnecessary time
-const float32Helper = 1638200000000;
+import { createBezierCurveFunction } from "@newkrok/three-particles/src/js/effects/three-particles/three-particles-bezier";
 
 let createdParticleSystems = [];
 
@@ -36,6 +35,14 @@ export const TimeMode = {
   FPS: "FPS",
 };
 
+export const blendingMap = {
+  "THREE.NoBlending": THREE.NoBlending,
+  "THREE.NormalBlending": THREE.NormalBlending,
+  "THREE.AdditiveBlending": THREE.AdditiveBlending,
+  "THREE.SubtractiveBlending": THREE.SubtractiveBlending,
+  "THREE.MultiplyBlending": THREE.MultiplyBlending,
+};
+
 export const getDefaultParticleSystemConfig = () =>
   JSON.parse(JSON.stringify(DEFAULT_PARTICLE_SYSTEM_CONFIG));
 
@@ -88,9 +95,32 @@ const DEFAULT_PARTICLE_SYSTEM_CONFIG = {
     },
   },
   map: null,
+  renderer: {
+    blending: THREE.NormalBlending,
+    transparent: true,
+    depthTest: true,
+    depthWrite: false,
+  },
+  velocityOverLifetime: {
+    isActive: false,
+    linear: {
+      x: { min: 0, max: 0 },
+      y: { min: 0, max: 0 },
+      z: { min: 0, max: 0 },
+    },
+    orbital: {
+      x: { min: 0, max: 0 },
+      y: { min: 0, max: 0 },
+      z: { min: 0, max: 0 },
+    },
+  },
   sizeOverLifetime: {
     isActive: false,
-    curveFunction: CurveFunction.LINEAR,
+    curveFunction: CurveFunction.BEZIER,
+    bezierPoints: [
+      { x: 0, y: 0, percentage: 0 },
+      { x: 1, y: 1, percentage: 1 },
+    ],
   },
   /* colorOverLifetime: {
     isActive: false,
@@ -98,7 +128,26 @@ const DEFAULT_PARTICLE_SYSTEM_CONFIG = {
   }, */
   opacityOverLifetime: {
     isActive: false,
-    curveFunction: CurveFunction.LINEAR,
+    curveFunction: CurveFunction.BEZIER,
+    bezierPoints: [
+      { x: 0, y: 0, percentage: 0 },
+      { x: 1, y: 1, percentage: 1 },
+    ],
+  },
+  rotationOverLifetime: {
+    isActive: false,
+    min: 0.0,
+    max: 0.0,
+  },
+  noise: {
+    isActive: false,
+    useRandomOffset: false,
+    strength: 1.0,
+    frequency: 0.5,
+    octaves: 1,
+    positionAmount: 1.0,
+    rotationAmount: 0.0,
+    sizeAmount: 0.0,
   },
   textureSheetAnimation: {
     tiles: new THREE.Vector2(1.0, 1.0),
@@ -132,7 +181,8 @@ const calculatePositionAndVelocity = (
   { shape, sphere, cone, circle, rectangle },
   startSpeed,
   position,
-  velocity
+  velocity,
+  velocityOverLifetime
 ) => {
   switch (shape) {
     case Shape.SPHERE:
@@ -171,6 +221,21 @@ const calculatePositionAndVelocity = (
       );
       break;
   }
+
+  if (velocityOverLifetime.isActive) {
+    velocity.x += THREE.MathUtils.randFloat(
+      velocityOverLifetime.linear.x.min,
+      velocityOverLifetime.linear.x.max
+    );
+    velocity.y += THREE.MathUtils.randFloat(
+      velocityOverLifetime.linear.y.min,
+      velocityOverLifetime.linear.y.max
+    );
+    velocity.z += THREE.MathUtils.randFloat(
+      velocityOverLifetime.linear.z.min,
+      velocityOverLifetime.linear.z.max
+    );
+  }
 };
 
 export const createParticleSystem = (
@@ -187,9 +252,28 @@ export const createParticleSystem = (
     worldEuler: new THREE.Euler(),
     gravityVelocity: new THREE.Vector3(0, 0, 0),
     startValues: {},
+    lifetimeValues: {},
+    creationTimes: [],
+    noise: null,
   };
 
   const normalizedConfig = patchObject(DEFAULT_PARTICLE_SYSTEM_CONFIG, config);
+
+  const bezierCompatibleProperties = [
+    "sizeOverLifetime",
+    "opacityOverLifetime",
+  ];
+  bezierCompatibleProperties.forEach((key) => {
+    if (
+      normalizedConfig[key].isActive &&
+      normalizedConfig[key].curveFunction === CurveFunction.BEZIER &&
+      normalizedConfig[key].bezierPoints
+    )
+      normalizedConfig[key].curveFunction = createBezierCurveFunction(
+        normalizedConfig[key].bezierPoints
+      );
+  });
+
   const {
     transform,
     duration,
@@ -207,11 +291,17 @@ export const createParticleSystem = (
     emission,
     shape,
     map,
+    renderer,
+    noise,
+    velocityOverLifetime,
     onUpdate,
     onComplete,
     textureSheetAnimation,
   } = normalizedConfig;
 
+  if (typeof renderer.blending === "string")
+    renderer.blending = blendingMap[renderer.blending];
+
   const startPositions = Array.from(
     { length: maxParticles },
     () => new THREE.Vector3()
@@ -221,6 +311,8 @@ export const createParticleSystem = (
     () => new THREE.Vector3()
   );
 
+  generalData.creationTimes = Array.from({ length: maxParticles }, () => 0);
+
   const startValueKeys = ["startSize", "startOpacity"];
   startValueKeys.forEach((key) => {
     generalData.startValues[key] = Array.from({ length: maxParticles }, () =>
@@ -231,6 +323,37 @@ export const createParticleSystem = (
     );
   });
 
+  const lifetimeValueKeys = ["rotationOverLifetime"];
+  lifetimeValueKeys.forEach((key) => {
+    if (normalizedConfig[key].isActive)
+      generalData.lifetimeValues[key] = Array.from(
+        { length: maxParticles },
+        () =>
+          THREE.MathUtils.randFloat(
+            normalizedConfig[key].min,
+            normalizedConfig[key].max
+          )
+      );
+  });
+
+  generalData.noise = {
+    isActive: noise.isActive,
+    strength: noise.strength,
+    positionAmount: noise.positionAmount,
+    rotationAmount: noise.rotationAmount,
+    sizeAmount: noise.sizeAmount,
+    sampler: noise.isActive
+      ? new FBM({
+          seed: Math.random(),
+          scale: noise.frequency,
+          octaves: noise.octaves,
+        })
+      : null,
+    offsets: noise.useRandomOffset
+      ? Array.from({ length: maxParticles }, () => Math.random() * 100)
+      : null,
+  };
+
   const material = new THREE.ShaderMaterial({
     uniforms: {
       elapsed: {
@@ -251,10 +374,10 @@ export const createParticleSystem = (
     },
     vertexShader: ParticleSystemVertexShader,
     fragmentShader: ParticleSystemFragmentShader,
-    transparent: true,
-    blending: THREE.AdditiveBlending,
-    depthTest: true,
-    depthWrite: false,
+    transparent: renderer.transparent,
+    blending: renderer.blending,
+    depthTest: renderer.depthTest,
+    depthWrite: renderer.depthWrite,
   });
 
   const geometry = new THREE.BufferGeometry();
@@ -264,7 +387,8 @@ export const createParticleSystem = (
       shape,
       startSpeed,
       startPositions[i],
-      velocities[i]
+      velocities[i],
+      velocityOverLifetime
     );
 
   geometry.setFromPoints(
@@ -283,7 +407,6 @@ export const createParticleSystem = (
   };
 
   createFloat32AttributesRequest("isActive", false);
-  createFloat32AttributesRequest("creationTime", 0);
   createFloat32AttributesRequest("lifetime", 0);
   createFloat32AttributesRequest("startLifetime", () =>
     THREE.MathUtils.randFloat(startLifetime.min, startLifetime.max)
@@ -339,8 +462,10 @@ export const createParticleSystem = (
 
   const activateParticle = ({ particleIndex, activationTime }) => {
     geometry.attributes.isActive.array[particleIndex] = true;
-    geometry.attributes.creationTime.array[particleIndex] =
-      activationTime - float32Helper;
+    generalData.creationTimes[particleIndex] = activationTime;
+
+    if (generalData.noise.offsets)
+      generalData.noise.offsets[particleIndex] = Math.random() * 100;
 
     const colorRandomRatio = Math.random();
 
@@ -379,6 +504,13 @@ export const createParticleSystem = (
       THREE.MathUtils.randFloat(startRotation.min, startRotation.max)
     );
 
+    if (normalizedConfig.rotationOverLifetime.isActive)
+      generalData.lifetimeValues.rotationOverLifetime[particleIndex] =
+        THREE.MathUtils.randFloat(
+          normalizedConfig.rotationOverLifetime.min,
+          normalizedConfig.rotationOverLifetime.max
+        );
+
     geometry.attributes.rotation.needsUpdate = true;
     geometry.attributes.colorB.needsUpdate = true;
 
@@ -386,7 +518,8 @@ export const createParticleSystem = (
       shape,
       startSpeed,
       startPositions[particleIndex],
-      velocities[particleIndex]
+      velocities[particleIndex],
+      velocityOverLifetime
     );
     const positionIndex = Math.floor(particleIndex * 3);
     geometry.attributes.position.array[positionIndex] =
@@ -395,13 +528,16 @@ export const createParticleSystem = (
       startPositions[particleIndex].y;
     geometry.attributes.position.array[positionIndex + 2] =
       startPositions[particleIndex].z;
-    particleSystem.geometry.attributes.position.needsUpdate = true;
 
     geometry.attributes.lifetime.array[particleIndex] = 0;
     geometry.attributes.lifetime.needsUpdate = true;
 
     applyModifiers({
+      delta: 0,
+      elapsed: 0,
+      noise: generalData.noise,
       startValues: generalData.startValues,
+      lifetimeValues: generalData.lifetimeValues,
       normalizedConfig,
       attributes: particleSystem.geometry.attributes,
       particleLifetimePercentage: 0,
@@ -489,12 +625,13 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
     particleSystem.material.uniforms.elapsed.value = elapsed;
 
     particleSystem.getWorldPosition(currentWorldPosition);
-    if (lastWorldPosition.x !== -99999)
+    if (lastWorldPosition.x !== -99999) {
       worldPositionChange.set(
         currentWorldPosition.x - lastWorldPosition.x,
         currentWorldPosition.y - lastWorldPosition.y,
         currentWorldPosition.z - lastWorldPosition.z
       );
+    }
     generalData.distanceFromLastEmitByDistance += worldPositionChange.length();
     particleSystem.getWorldPosition(lastWorldPosition);
 
@@ -519,59 +656,65 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
       particleSystem.updateMatrixWorld();
     }
 
-    particleSystem.geometry.attributes.creationTime.array.forEach(
-      (entry, index) => {
-        if (particleSystem.geometry.attributes.isActive.array[index]) {
-          const particleLifetime = now - float32Helper - entry;
+    generalData.creationTimes.forEach((entry, index) => {
+      if (particleSystem.geometry.attributes.isActive.array[index]) {
+        const particleLifetime = now - entry;
+        if (
+          particleLifetime >
+          particleSystem.geometry.attributes.startLifetime.array[index]
+        )
+          deactivateParticle(index);
+        else {
+          const velocity = velocities[index];
+          velocity.x -= gravityVelocity.x;
+          velocity.y -= gravityVelocity.y;
+          velocity.z -= gravityVelocity.z;
+
           if (
-            particleLifetime >
-            particleSystem.geometry.attributes.startLifetime.array[index]
-          )
-            deactivateParticle(index);
-          else {
-            const velocity = velocities[index];
-            velocity.x -= gravityVelocity.x;
-            velocity.y -= gravityVelocity.y;
-            velocity.z -= gravityVelocity.z;
-
-            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[positionIndex] -= worldPositionChange.x;
-                positionArr[positionIndex + 1] -= worldPositionChange.y;
-                positionArr[positionIndex + 2] -= worldPositionChange.z;
-              }
-              positionArr[positionIndex] += velocity.x * delta;
-              positionArr[positionIndex + 1] += velocity.y * delta;
-              positionArr[positionIndex + 2] += velocity.z * delta;
-              particleSystem.geometry.attributes.position.needsUpdate = true;
+            gravity !== 0 ||
+            velocity.x !== 0 ||
+            velocity.y !== 0 ||
+            velocity.z !== 0 ||
+            worldPositionChange.x !== 0 ||
+            worldPositionChange.y !== 0 ||
+            worldPositionChange.z !== 0
+          ) {
+            const positionIndex = index * 3;
+            const positionArr =
+              particleSystem.geometry.attributes.position.array;
+
+            if (simulationSpace === SimulationSpace.WORLD) {
+              positionArr[positionIndex] -= worldPositionChange.x;
+              positionArr[positionIndex + 1] -= worldPositionChange.y;
+              positionArr[positionIndex + 2] -= worldPositionChange.z;
             }
-
-            particleSystem.geometry.attributes.lifetime.array[index] =
-              particleLifetime;
-            particleSystem.geometry.attributes.lifetime.needsUpdate = true;
-
-            const particleLifetimePercentage =
-              particleLifetime /
-              particleSystem.geometry.attributes.startLifetime.array[index];
-            applyModifiers({
-              startValues: generalData.startValues,
-              normalizedConfig,
-              attributes: particleSystem.geometry.attributes,
-              particleLifetimePercentage,
-              particleIndex: index,
-            });
+            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;
+
+          const particleLifetimePercentage =
+            particleLifetime /
+            particleSystem.geometry.attributes.startLifetime.array[index];
+          applyModifiers({
+            delta,
+            elapsed,
+            noise: generalData.noise,
+            startValues: generalData.startValues,
+            lifetimeValues: generalData.lifetimeValues,
+            normalizedConfig,
+            attributes: particleSystem.geometry.attributes,
+            particleLifetimePercentage,
+            particleIndex: index,
+          });
         }
       }
-    );
+    });
 
     if (looping || lifetime < duration * 1000) {
       const emissionDelta = now - lastEmissionTime;