@newkrok/three-particles 0.6.1 → 0.7.1

package/README.md

@@ -6,6 +6,11 @@ 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
+
 # Live demo
 
 https://newkrok.com/three-particles-editor/index.html
@@ -18,4 +23,4 @@ Install with npm
 `npm i @newkrok/three-particles`
 
 Add as a package.json dependency
-`"dependencies": { ... "@newkrok/three-particles": "0.6.1" ... }, `
+`"dependencies": { ... "@newkrok/three-particles": "0.7.0" ... }, `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newkrok/three-particles",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "Particle system for ThreeJS",
   "main": "src/js/three-particles.js",
   "bin": {
@@ -28,7 +28,8 @@
   "dependencies": {
     "easing-functions": "1.0.1",
     "three": "0.137.0",
-    "three-noise": "^1.1.1"
+    "three-noise": "^1.1.1",
+    "@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-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
@@ -73,6 +47,7 @@ export const calculateRandomPositionAndVelocityOnSphere = (
 
 export const calculateRandomPositionAndVelocityOnCone = (
   position,
+  quaternion,
   velocity,
   startSpeed,
   { radius, radiusThickness, arc, angle = 90 }
@@ -92,6 +67,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)
@@ -118,6 +95,7 @@ export const calculateRandomPositionAndVelocityOnCone = (
 
 export const calculateRandomPositionAndVelocityOnBox = (
   position,
+  quaternion,
   velocity,
   startSpeed,
   { scale, emitFrom }
@@ -157,6 +135,8 @@ export const calculateRandomPositionAndVelocityOnBox = (
       break;
   }
 
+  position.applyQuaternion(quaternion);
+
   const randomizedSpeed = THREE.MathUtils.randFloat(
     startSpeed.min,
     startSpeed.max
@@ -166,6 +146,7 @@ export const calculateRandomPositionAndVelocityOnBox = (
 
 export const calculateRandomPositionAndVelocityOnCircle = (
   position,
+  quaternion,
   velocity,
   startSpeed,
   { radius, radiusThickness, arc }
@@ -185,6 +166,8 @@ export const calculateRandomPositionAndVelocityOnCircle = (
     radius * radiusThickness * randomizedDistanceRatio * yDirection;
   position.z = 0;
 
+  position.applyQuaternion(quaternion);
+
   const randomizedSpeed = THREE.MathUtils.randFloat(
     startSpeed.min,
     startSpeed.max
@@ -201,6 +184,7 @@ export const calculateRandomPositionAndVelocityOnCircle = (
 
 export const calculateRandomPositionAndVelocityOnRectangle = (
   position,
+  quaternion,
   velocity,
   startSpeed,
   { rotation, scale }
@@ -213,6 +197,8 @@ 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

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
@@ -268,6 +278,7 @@ 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),
@@ -391,6 +402,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 +427,7 @@ export const createParticleSystem = (
       shape,
       startSpeed,
       startPositions[i],
+      generalData.wrapperQuaternion,
       velocities[i],
       velocityOverLifetime
     );
@@ -480,7 +501,7 @@ export const createParticleSystem = (
     geometry.attributes.colorA.needsUpdate = true;
   };
 
-  const activateParticle = ({ particleIndex, activationTime }) => {
+  const activateParticle = ({ particleIndex, activationTime, position }) => {
     geometry.attributes.isActive.array[particleIndex] = true;
     generalData.creationTimes[particleIndex] = activationTime;
 
@@ -538,16 +559,17 @@ export const createParticleSystem = (
       shape,
       startSpeed,
       startPositions[particleIndex],
+      generalData.wrapperQuaternion,
       velocities[particleIndex],
       velocityOverLifetime
     );
     const positionIndex = Math.floor(particleIndex * 3);
     geometry.attributes.position.array[positionIndex] =
-      startPositions[particleIndex].x;
+      (position ? position.x : 0) + startPositions[particleIndex].x;
     geometry.attributes.position.array[positionIndex + 1] =
-      startPositions[particleIndex].y;
+      (position ? position.y : 0) + startPositions[particleIndex].y;
     geometry.attributes.position.array[positionIndex + 2] =
-      startPositions[particleIndex].z;
+      (position ? position.z : 0) + startPositions[particleIndex].z;
     geometry.attributes.position.needsUpdate = true;
 
     geometry.attributes.lifetime.array[particleIndex] = 0;
@@ -567,7 +589,7 @@ export const createParticleSystem = (
     });
   };
 
-  const particleSystem = new THREE.Points(geometry, material);
+  let particleSystem = new THREE.Points(geometry, material);
   particleSystem.sortParticles = true;
 
   particleSystem.position.copy(transform.position);
@@ -579,8 +601,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 +626,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 +655,7 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
       generalData,
       onComplete,
       particleSystem,
+      wrapper,
       creationTime,
       lastEmissionTime,
       duration,
@@ -642,6 +680,10 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
       gravityVelocity,
     } = generalData;
 
+    if (wrapper) generalData.wrapperQuaternion.copy(wrapper.parent.quaternion);
+
+    const lastWorldPositionSnapshot = { ...lastWorldPosition };
+
     const lifetime = now - creationTime;
     particleSystem.material.uniforms.elapsed.value = elapsed;
 
@@ -652,7 +694,7 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
         currentWorldPosition.y - lastWorldPosition.y,
         currentWorldPosition.z - lastWorldPosition.z
       );
-      worldPositionChange.applyQuaternion(worldQuaternion.invert())
+      worldPositionChange.applyQuaternion(worldQuaternion.invert());
     }
     generalData.distanceFromLastEmitByDistance += worldPositionChange.length();
     particleSystem.getWorldPosition(lastWorldPosition);
@@ -669,7 +711,7 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
         lastWorldPosition.x,
         lastWorldPosition.y + gravity,
         lastWorldPosition.z
-        );
+      );
       particleSystem.worldToLocal(gravityVelocity);
     }
 
@@ -746,12 +788,28 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
                 (1 / emission.rateOverDistance)
             )
           : 0;
+      const distanceStep =
+        neededParticlesByDistance > 0
+          ? {
+              x:
+                (currentWorldPosition.x - lastWorldPositionSnapshot.x) /
+                neededParticlesByDistance,
+              y:
+                (currentWorldPosition.y - lastWorldPositionSnapshot.y) /
+                neededParticlesByDistance,
+              z:
+                (currentWorldPosition.z - lastWorldPositionSnapshot.z) /
+                neededParticlesByDistance,
+            }
+          : null;
       const neededParticles = neededParticlesByTime + neededParticlesByDistance;
 
-      if (emission.rateOverDistance > 0 && neededParticlesByDistance >= 1)
+      if (emission.rateOverDistance > 0 && neededParticlesByDistance >= 1) {
         generalData.distanceFromLastEmitByDistance = 0;
+      }
 
       if (neededParticles > 0) {
+        let generatedParticlesByDistanceNeeds = 0;
         for (let i = 0; i < neededParticles; i++) {
           let particleIndex = -1;
           particleSystem.geometry.attributes.isActive.array.find(
@@ -770,7 +828,19 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
             particleIndex <
               particleSystem.geometry.attributes.isActive.array.length
           ) {
-            activateParticle({ particleIndex, activationTime: now });
+            let position;
+            if (generatedParticlesByDistanceNeeds < neededParticlesByDistance) {
+              position =
+                generatedParticlesByDistanceNeeds < neededParticlesByDistance
+                  ? {
+                      x: distanceStep.x * generatedParticlesByDistanceNeeds,
+                      y: distanceStep.y * generatedParticlesByDistanceNeeds,
+                      z: distanceStep.z * generatedParticlesByDistanceNeeds,
+                    }
+                  : null;
+              generatedParticlesByDistanceNeeds++;
+            }
+            activateParticle({ particleIndex, activationTime: now, position });
             props.lastEmissionTime = now;
           }
         }