@newkrok/three-particles 0.6.2 → 0.8.0

package/README.md

@@ -7,6 +7,7 @@ Particle system for ThreeJS
 You can create your own particle effects with it's editor https://github.com/NewKrok/three-particles-editor
 
 # Video
+
 - Projectiles: https://youtu.be/Q352JuxON04
 - First preview: https://youtu.be/dtN_bndvoGU
 
@@ -22,4 +23,4 @@ Install with npm
 `npm i @newkrok/three-particles`
 
 Add as a package.json dependency
-`"dependencies": { ... "@newkrok/three-particles": "0.6.2" ... }, `
+`"dependencies": { ... "@newkrok/three-particles": "0.7.0" ... }, `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newkrok/three-particles",
-  "version": "0.6.2",
+  "version": "0.8.0",
   "description": "Particle system for ThreeJS",
   "main": "src/js/three-particles.js",
   "bin": {
@@ -27,8 +27,9 @@
   "homepage": "https://github.com/NewKrok/three-particles#readme",
   "dependencies": {
     "easing-functions": "1.0.1",
-    "three": "0.137.0",
-    "three-noise": "^1.1.1"
+    "three": "0.140.0",
+    "three-noise": "1.1.2",
+    "@newkrok/three-utils": "0.1.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

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

@@ -4,6 +4,9 @@ const ParticleSystemFragmentShader = `
   uniform float fps;
   uniform bool useFPSForFrameIndex;
   uniform vec2 tiles;
+  uniform bool discardBackgroundColor;
+  uniform vec3 backgroundColor;
+  uniform float backgroundColorTolerance;
 
   varying vec4 vColor;
   varying float vLifetime;
@@ -56,6 +59,8 @@ const ParticleSystemFragmentShader = `
     vec4 rotatedTexture = texture2D(map, uvPoint);
 
     gl_FragColor = gl_FragColor * rotatedTexture;
+
+    if (discardBackgroundColor && abs(length(rotatedTexture.rgb - backgroundColor.rgb)) < backgroundColorTolerance ) discard;
   }
 `;
 

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

@@ -2,7 +2,9 @@ import * as THREE from "three";
 
 import { getCurveFunction } from "./three-particles-curves.js";
 
+const ROTATION_CONVERTER = THREE.MathUtils.radToDeg(1);
 const noiseInput = new THREE.Vector3(0, 0, 0);
+const orbitalEuler = new THREE.Euler();
 
 const curveModifiers = [
   // {key:"colorOverLifetime", attributeKeys:["colorR", "colorG", "colorB"]},
@@ -23,12 +25,38 @@ export const applyModifiers = ({
   noise,
   startValues,
   lifetimeValues,
+  hasOrbitalVelocity,
+  orbitalVelocityData,
   normalizedConfig,
   attributes,
+  particleLifetime,
   particleLifetimePercentage,
   particleIndex,
   forceUpdate = false,
 }) => {
+  if (hasOrbitalVelocity) {
+    const positionIndex = particleIndex * 3;
+    const positionArr = attributes.position.array;
+    const { speed, positionOffset } = orbitalVelocityData[particleIndex];
+
+    positionArr[positionIndex] -= positionOffset.x;
+    positionArr[positionIndex + 1] -= positionOffset.y;
+    positionArr[positionIndex + 2] -= positionOffset.z;
+
+    orbitalEuler.set(
+      speed.x * ROTATION_CONVERTER * delta,
+      speed.z * ROTATION_CONVERTER * delta,
+      speed.y * ROTATION_CONVERTER * delta
+    );
+    positionOffset.applyEuler(orbitalEuler);
+
+    positionArr[positionIndex] += positionOffset.x;
+    positionArr[positionIndex + 1] += positionOffset.y;
+    positionArr[positionIndex + 2] += positionOffset.z;
+
+    attributes.position.needsUpdate = true;
+  }
+
   curveModifiers.forEach(({ key, attributeKeys, startValueKeys }) => {
     const curveModifier = normalizedConfig[key];
     if (curveModifier.isActive) {

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

@@ -2,37 +2,9 @@ import * as THREE from "three";
 
 import { EmitFrom } from "../three-particles.js";
 
-export const patchObject = (
-  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] &&
-        !Array.isArray(objectA[key])
-      ) {
-        result[key] = patchObject(objectA[key], objectB[key], config);
-      } else {
-        result[key] =
-          objectB[key] === 0
-            ? 0
-            : objectB[key] === false
-            ? false
-            : objectB[key] || objectA[key];
-        if (config.applyToFirstObject) objectA[key] = result[key];
-      }
-    }
-  });
-  return result;
-};
-
 export const calculateRandomPositionAndVelocityOnSphere = (
   position,
+  quaternion,
   velocity,
   startSpeed,
   { radius, radiusThickness, arc }
@@ -59,6 +31,8 @@ export const calculateRandomPositionAndVelocityOnSphere = (
     radius * normalizedThickness * zDirection +
     radius * radiusThickness * randomizedDistanceRatio * zDirection;
 
+  position.applyQuaternion(quaternion);
+
   const randomizedSpeed = THREE.MathUtils.randFloat(
     startSpeed.min,
     startSpeed.max
@@ -69,10 +43,12 @@ export const calculateRandomPositionAndVelocityOnSphere = (
     position.y * speedMultiplierByPosition * randomizedSpeed,
     position.z * speedMultiplierByPosition * randomizedSpeed
   );
+  velocity.applyQuaternion(quaternion);
 };
 
 export const calculateRandomPositionAndVelocityOnCone = (
   position,
+  quaternion,
   velocity,
   startSpeed,
   { radius, radiusThickness, arc, angle = 90 }
@@ -92,6 +68,8 @@ export const calculateRandomPositionAndVelocityOnCone = (
     radius * radiusThickness * randomizedDistanceRatio * yDirection;
   position.z = 0;
 
+  position.applyQuaternion(quaternion);
+
   const positionLength = position.length();
   const normalizedAngle = Math.abs(
     (positionLength / radius) * THREE.Math.degToRad(angle)
@@ -114,10 +92,12 @@ export const calculateRandomPositionAndVelocityOnCone = (
       randomizedSpeed,
     Math.cos(normalizedAngle) * randomizedSpeed
   );
+  velocity.applyQuaternion(quaternion);
 };
 
 export const calculateRandomPositionAndVelocityOnBox = (
   position,
+  quaternion,
   velocity,
   startSpeed,
   { scale, emitFrom }
@@ -157,15 +137,19 @@ export const calculateRandomPositionAndVelocityOnBox = (
       break;
   }
 
+  position.applyQuaternion(quaternion);
+
   const randomizedSpeed = THREE.MathUtils.randFloat(
     startSpeed.min,
     startSpeed.max
   );
   velocity.set(0, 0, randomizedSpeed);
+  velocity.applyQuaternion(quaternion);
 };
 
 export const calculateRandomPositionAndVelocityOnCircle = (
   position,
+  quaternion,
   velocity,
   startSpeed,
   { radius, radiusThickness, arc }
@@ -185,6 +169,8 @@ export const calculateRandomPositionAndVelocityOnCircle = (
     radius * radiusThickness * randomizedDistanceRatio * yDirection;
   position.z = 0;
 
+  position.applyQuaternion(quaternion);
+
   const randomizedSpeed = THREE.MathUtils.randFloat(
     startSpeed.min,
     startSpeed.max
@@ -197,10 +183,12 @@ export const calculateRandomPositionAndVelocityOnCircle = (
     position.y * speedMultiplierByPosition * randomizedSpeed,
     0
   );
+  velocity.applyQuaternion(quaternion);
 };
 
 export const calculateRandomPositionAndVelocityOnRectangle = (
   position,
+  quaternion,
   velocity,
   startSpeed,
   { rotation, scale }
@@ -213,9 +201,12 @@ export const calculateRandomPositionAndVelocityOnRectangle = (
   position.y = yOffset * Math.cos(rotationX);
   position.z = xOffset * Math.sin(rotationY) - yOffset * Math.sin(rotationX);
 
+  position.applyQuaternion(quaternion);
+
   const randomizedSpeed = THREE.MathUtils.randFloat(
     startSpeed.min,
     startSpeed.max
   );
   velocity.set(0, 0, randomizedSpeed);
+  velocity.applyQuaternion(quaternion);
 };

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

@@ -6,15 +6,16 @@ import {
   calculateRandomPositionAndVelocityOnCone,
   calculateRandomPositionAndVelocityOnRectangle,
   calculateRandomPositionAndVelocityOnSphere,
-  patchObject,
 } 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 { Gyroscope } from "three/examples/jsm/misc/Gyroscope";
 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";
 import { createBezierCurveFunction } from "./three-particles/three-particles-bezier";
+import { patchObject } from "@newkrok/three-utils/src/js/newkrok/three-utils/object-utils.js";
 
 let createdParticleSystems = [];
 
@@ -108,6 +109,9 @@ const DEFAULT_PARTICLE_SYSTEM_CONFIG = {
   map: null,
   renderer: {
     blending: THREE.NormalBlending,
+    discardBackgroundColor: false,
+    backgroundColorTolerance: 1.0,
+    backgroundColor: { r: 1.0, g: 1.0, b: 1.0 },
     transparent: true,
     depthTest: true,
     depthWrite: false,
@@ -192,6 +196,7 @@ const calculatePositionAndVelocity = (
   { shape, sphere, cone, circle, rectangle, box },
   startSpeed,
   position,
+  quaternion,
   velocity,
   velocityOverLifetime
 ) => {
@@ -199,6 +204,7 @@ const calculatePositionAndVelocity = (
     case Shape.SPHERE:
       calculateRandomPositionAndVelocityOnSphere(
         position,
+        quaternion,
         velocity,
         startSpeed,
         sphere
@@ -208,6 +214,7 @@ const calculatePositionAndVelocity = (
     case Shape.CONE:
       calculateRandomPositionAndVelocityOnCone(
         position,
+        quaternion,
         velocity,
         startSpeed,
         cone
@@ -217,6 +224,7 @@ const calculatePositionAndVelocity = (
     case Shape.CIRCLE:
       calculateRandomPositionAndVelocityOnCircle(
         position,
+        quaternion,
         velocity,
         startSpeed,
         circle
@@ -226,6 +234,7 @@ const calculatePositionAndVelocity = (
     case Shape.RECTANGLE:
       calculateRandomPositionAndVelocityOnRectangle(
         position,
+        quaternion,
         velocity,
         startSpeed,
         rectangle
@@ -235,6 +244,7 @@ const calculatePositionAndVelocity = (
     case Shape.BOX:
       calculateRandomPositionAndVelocityOnBox(
         position,
+        quaternion,
         velocity,
         startSpeed,
         box
@@ -243,18 +253,33 @@ const calculatePositionAndVelocity = (
   }
 
   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
-    );
+    if (
+      velocityOverLifetime.linear.x.min !== 0 ||
+      velocityOverLifetime.linear.x.max !== 0
+    ) {
+      velocity.x += THREE.MathUtils.randFloat(
+        velocityOverLifetime.linear.x.min,
+        velocityOverLifetime.linear.x.max
+      );
+    }
+    if (
+      velocityOverLifetime.linear.y.min !== 0 ||
+      velocityOverLifetime.linear.y.max !== 0
+    ) {
+      velocity.y += THREE.MathUtils.randFloat(
+        velocityOverLifetime.linear.y.min,
+        velocityOverLifetime.linear.y.max
+      );
+    }
+    if (
+      velocityOverLifetime.linear.z.min !== 0 ||
+      velocityOverLifetime.linear.z.max !== 0
+    ) {
+      velocity.z += THREE.MathUtils.randFloat(
+        velocityOverLifetime.linear.z.min,
+        velocityOverLifetime.linear.z.max
+      );
+    }
   }
 };
 
@@ -268,10 +293,13 @@ export const createParticleSystem = (
     currentWorldPosition: new THREE.Vector3(-99999),
     worldPositionChange: new THREE.Vector3(),
     worldQuaternion: new THREE.Quaternion(),
+    wrapperQuaternion: new THREE.Quaternion(),
     lastWorldQuaternion: new THREE.Quaternion(-99999),
     worldEuler: new THREE.Euler(),
     gravityVelocity: new THREE.Vector3(0, 0, 0),
     startValues: {},
+    hasOrbitalVelocity: false,
+    orbitalVelocityData: [],
     lifetimeValues: {},
     creationTimes: [],
     noise: null,
@@ -332,6 +360,24 @@ export const createParticleSystem = (
   );
 
   generalData.creationTimes = Array.from({ length: maxParticles }, () => 0);
+  generalData.hasOrbitalVelocity =
+    normalizedConfig.velocityOverLifetime.isActive &&
+    (normalizedConfig.velocityOverLifetime.orbital.x.min !== 0 ||
+      normalizedConfig.velocityOverLifetime.orbital.x.max !== 0 ||
+      normalizedConfig.velocityOverLifetime.orbital.y.min !== 0 ||
+      normalizedConfig.velocityOverLifetime.orbital.y.max !== 0 ||
+      normalizedConfig.velocityOverLifetime.orbital.z.min !== 0 ||
+      normalizedConfig.velocityOverLifetime.orbital.z.max !== 0);
+
+  if (generalData.hasOrbitalVelocity) {
+    generalData.orbitalVelocityData = Array.from(
+      { length: maxParticles },
+      () => ({
+        speed: new THREE.Vector3(),
+        positionOffset: new THREE.Vector3(),
+      })
+    );
+  }
 
   const startValueKeys = ["startSize", "startOpacity"];
   startValueKeys.forEach((key) => {
@@ -391,6 +437,15 @@ export const createParticleSystem = (
       useFPSForFrameIndex: {
         value: textureSheetAnimation.timeMode === TimeMode.FPS,
       },
+      backgroundColor: {
+        value: renderer.backgroundColor,
+      },
+      discardBackgroundColor: {
+        value: renderer.discardBackgroundColor,
+      },
+      backgroundColorTolerance: {
+        value: renderer.backgroundColorTolerance,
+      },
     },
     vertexShader: ParticleSystemVertexShader,
     fragmentShader: ParticleSystemFragmentShader,
@@ -407,6 +462,7 @@ export const createParticleSystem = (
       shape,
       startSpeed,
       startPositions[i],
+      generalData.wrapperQuaternion,
       velocities[i],
       velocityOverLifetime
     );
@@ -538,6 +594,7 @@ export const createParticleSystem = (
       shape,
       startSpeed,
       startPositions[particleIndex],
+      generalData.wrapperQuaternion,
       velocities[particleIndex],
       velocityOverLifetime
     );
@@ -550,6 +607,31 @@ export const createParticleSystem = (
       (position ? position.z : 0) + startPositions[particleIndex].z;
     geometry.attributes.position.needsUpdate = true;
 
+    if (generalData.hasOrbitalVelocity) {
+      generalData.orbitalVelocityData[particleIndex].speed.set(
+        THREE.MathUtils.randFloat(
+          normalizedConfig.velocityOverLifetime.orbital.x.min,
+          normalizedConfig.velocityOverLifetime.orbital.x.max
+        ) *
+          (Math.PI / 180),
+        THREE.MathUtils.randFloat(
+          normalizedConfig.velocityOverLifetime.orbital.y.min,
+          normalizedConfig.velocityOverLifetime.orbital.y.max
+        ) *
+          (Math.PI / 180),
+        THREE.MathUtils.randFloat(
+          normalizedConfig.velocityOverLifetime.orbital.z.min,
+          normalizedConfig.velocityOverLifetime.orbital.z.max
+        ) *
+          (Math.PI / 180)
+      );
+      generalData.orbitalVelocityData[particleIndex].positionOffset.set(
+        startPositions[particleIndex].x,
+        startPositions[particleIndex].y,
+        startPositions[particleIndex].z
+      );
+    }
+
     geometry.attributes.lifetime.array[particleIndex] = 0;
     geometry.attributes.lifetime.needsUpdate = true;
 
@@ -559,15 +641,18 @@ export const createParticleSystem = (
       noise: generalData.noise,
       startValues: generalData.startValues,
       lifetimeValues: generalData.lifetimeValues,
+      hasOrbitalVelocity: generalData.hasOrbitalVelocity,
+      orbitalVelocityData: generalData.orbitalVelocityData,
       normalizedConfig,
       attributes: particleSystem.geometry.attributes,
+      particleLifetime: 0,
       particleLifetimePercentage: 0,
       particleIndex,
       forceUpdate: true,
     });
   };
 
-  const particleSystem = new THREE.Points(geometry, material);
+  let particleSystem = new THREE.Points(geometry, material);
   particleSystem.sortParticles = true;
 
   particleSystem.position.copy(transform.position);
@@ -579,8 +664,15 @@ export const createParticleSystem = (
   const calculatedCreationTime =
     now + THREE.MathUtils.randFloat(startDelay.min, startDelay.max) * 1000;
 
+  let wrapper;
+  if (normalizedConfig.simulationSpace === SimulationSpace.WORLD) {
+    wrapper = new Gyroscope();
+    wrapper.add(particleSystem);
+  }
+
   createdParticleSystems.push({
     particleSystem,
+    wrapper,
     generalData,
     onUpdate,
     onComplete,
@@ -597,18 +689,26 @@ export const createParticleSystem = (
     deactivateParticle,
     activateParticle,
   });
-  return particleSystem;
+
+  return wrapper || particleSystem;
 };
 
 export const destroyParticleSystem = (particleSystem) => {
   createdParticleSystems = createdParticleSystems.filter(
-    ({ particleSystem: savedParticleSystem }) =>
-      savedParticleSystem !== particleSystem
-  );
+    ({ particleSystem: savedParticleSystem, wrapper }) => {
+      if (
+        savedParticleSystem !== particleSystem &&
+        wrapper !== particleSystem
+      ) {
+        return true;
+      }
 
-  particleSystem.geometry.dispose();
-  particleSystem.material.dispose();
-  particleSystem.parent.remove(particleSystem);
+      savedParticleSystem.geometry.dispose();
+      savedParticleSystem.material.dispose();
+      savedParticleSystem.parent.remove(savedParticleSystem);
+      return false;
+    }
+  );
 };
 
 export const updateParticleSystems = ({ now, delta, elapsed }) => {
@@ -618,6 +718,7 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
       generalData,
       onComplete,
       particleSystem,
+      wrapper,
       creationTime,
       lastEmissionTime,
       duration,
@@ -640,8 +741,11 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
       worldQuaternion,
       worldEuler,
       gravityVelocity,
+      hasOrbitalVelocity,
     } = generalData;
 
+    if (wrapper) generalData.wrapperQuaternion.copy(wrapper.parent.quaternion);
+
     const lastWorldPositionSnapshot = { ...lastWorldPosition };
 
     const lifetime = now - creationTime;
@@ -654,7 +758,6 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
         currentWorldPosition.y - lastWorldPosition.y,
         currentWorldPosition.z - lastWorldPosition.z
       );
-      worldPositionChange.applyQuaternion(worldQuaternion.invert());
     }
     generalData.distanceFromLastEmitByDistance += worldPositionChange.length();
     particleSystem.getWorldPosition(lastWorldPosition);
@@ -685,9 +788,9 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
           deactivateParticle(index);
         else {
           const velocity = velocities[index];
-          velocity.x -= gravityVelocity.x;
-          velocity.y -= gravityVelocity.y;
-          velocity.z -= gravityVelocity.z;
+          velocity.x -= gravityVelocity.x * delta;
+          velocity.y -= gravityVelocity.y * delta;
+          velocity.z -= gravityVelocity.z * delta;
 
           if (
             gravity !== 0 ||
@@ -707,6 +810,7 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
               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;
@@ -726,8 +830,11 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
             noise: generalData.noise,
             startValues: generalData.startValues,
             lifetimeValues: generalData.lifetimeValues,
+            hasOrbitalVelocity: generalData.hasOrbitalVelocity,
+            orbitalVelocityData: generalData.orbitalVelocityData,
             normalizedConfig,
             attributes: particleSystem.geometry.attributes,
+            particleLifetime,
             particleLifetimePercentage,
             particleIndex: index,
           });