@newkrok/three-particles 0.5.0 → 0.7.0

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.5.0" ... }, `
+`"dependencies": { ... "@newkrok/three-particles": "0.7.0" ... }, `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newkrok/three-particles",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Particle system for ThreeJS",
   "main": "src/js/three-particles.js",
   "bin": {
@@ -12,7 +12,10 @@
   },
   "keywords": [
     "threejs",
+    "particle",
     "particles",
+    "particle engine",
+    "effects",
     "3d",
     "lib"
   ],
@@ -24,7 +27,7 @@
   "homepage": "https://github.com/NewKrok/three-particles#readme",
   "dependencies": {
     "easing-functions": "1.0.1",
-    "three": "0.136.0",
+    "three": "0.137.0",
     "three-noise": "^1.1.1"
   },
   "scripts": {

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

@@ -1,4 +1,4 @@
-import * as THREE from "three/build/three.module.js";
+import * as THREE from "three";
 
 import { getCurveFunction } from "./three-particles-curves.js";
 

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

@@ -1,4 +1,6 @@
-import * as THREE from "three/build/three.module.js";
+import * as THREE from "three";
+
+import { EmitFrom } from "../three-particles.js";
 
 export const patchObject = (
   objectA,
@@ -114,6 +116,54 @@ export const calculateRandomPositionAndVelocityOnCone = (
   );
 };
 
+export const calculateRandomPositionAndVelocityOnBox = (
+  position,
+  velocity,
+  startSpeed,
+  { scale, emitFrom }
+) => {
+  switch (emitFrom) {
+    case EmitFrom.VOLUME:
+      position.x = Math.random() * scale.x - scale.x / 2;
+      position.y = Math.random() * scale.y - scale.y / 2;
+      position.z = Math.random() * scale.z - scale.z / 2;
+      break;
+
+    case EmitFrom.SHELL:
+      const side = Math.floor(Math.random() * 6);
+      const perpendicularAxis = side % 3;
+      const shellResult = [];
+      shellResult[perpendicularAxis] = side > 2 ? 1 : 0;
+      shellResult[(perpendicularAxis + 1) % 3] = Math.random();
+      shellResult[(perpendicularAxis + 2) % 3] = Math.random();
+      position.x = shellResult[0] * scale.x - scale.x / 2;
+      position.y = shellResult[1] * scale.y - scale.y / 2;
+      position.z = shellResult[2] * scale.z - scale.z / 2;
+      break;
+
+    case EmitFrom.EDGE:
+      const side2 = Math.floor(Math.random() * 6);
+      const perpendicularAxis2 = side2 % 3;
+      const edge = Math.floor(Math.random() * 4);
+      const edgeResult = [];
+      edgeResult[perpendicularAxis2] = side2 > 2 ? 1 : 0;
+      edgeResult[(perpendicularAxis2 + 1) % 3] =
+        edge < 2 ? Math.random() : edge - 2;
+      edgeResult[(perpendicularAxis2 + 2) % 3] =
+        edge < 2 ? edge : Math.random();
+      position.x = edgeResult[0] * scale.x - scale.x / 2;
+      position.y = edgeResult[1] * scale.y - scale.y / 2;
+      position.z = edgeResult[2] * scale.z - scale.z / 2;
+      break;
+  }
+
+  const randomizedSpeed = THREE.MathUtils.randFloat(
+    startSpeed.min,
+    startSpeed.max
+  );
+  velocity.set(0, 0, randomizedSpeed);
+};
+
 export const calculateRandomPositionAndVelocityOnCircle = (
   position,
   velocity,

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

@@ -1,6 +1,7 @@
-import * as THREE from "three/build/three.module.js";
+import * as THREE from "three";
 
 import {
+  calculateRandomPositionAndVelocityOnBox,
   calculateRandomPositionAndVelocityOnCircle,
   calculateRandomPositionAndVelocityOnCone,
   calculateRandomPositionAndVelocityOnRectangle,
@@ -13,7 +14,7 @@ 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";
-import { createBezierCurveFunction } from "@newkrok/three-particles/src/js/effects/three-particles/three-particles-bezier";
+import { createBezierCurveFunction } from "./three-particles/three-particles-bezier";
 
 let createdParticleSystems = [];
 
@@ -30,6 +31,12 @@ export const Shape = {
   RECTANGLE: "RECTANGLE",
 };
 
+export const EmitFrom = {
+  VOLUME: "VOLUME",
+  SHELL: "SHELL",
+  EDGE: "EDGE",
+};
+
 export const TimeMode = {
   LIFETIME: "LIFETIME",
   FPS: "FPS",
@@ -93,10 +100,17 @@ const DEFAULT_PARTICLE_SYSTEM_CONFIG = {
       rotation: { x: 0.0, y: 0.0 }, // TODO: add z rotation
       scale: { x: 1.0, y: 1.0 },
     },
+    box: {
+      scale: { x: 1.0, y: 1.0, z: 1.0 },
+      emitFrom: EmitFrom.VOLUME,
+    },
   },
   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,
@@ -178,7 +192,7 @@ const createFloat32Attributes = ({
 };
 
 const calculatePositionAndVelocity = (
-  { shape, sphere, cone, circle, rectangle },
+  { shape, sphere, cone, circle, rectangle, box },
   startSpeed,
   position,
   velocity,
@@ -220,6 +234,15 @@ const calculatePositionAndVelocity = (
         rectangle
       );
       break;
+
+    case Shape.BOX:
+      calculateRandomPositionAndVelocityOnBox(
+        position,
+        velocity,
+        startSpeed,
+        box
+      );
+      break;
   }
 
   if (velocityOverLifetime.isActive) {
@@ -371,6 +394,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,
@@ -460,7 +492,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;
 
@@ -523,11 +555,12 @@ export const createParticleSystem = (
     );
     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;
     geometry.attributes.lifetime.needsUpdate = true;
@@ -621,6 +654,8 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
       gravityVelocity,
     } = generalData;
 
+    const lastWorldPositionSnapshot = { ...lastWorldPosition };
+
     const lifetime = now - creationTime;
     particleSystem.material.uniforms.elapsed.value = elapsed;
 
@@ -631,10 +666,10 @@ 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);
-
     particleSystem.getWorldQuaternion(worldQuaternion);
     if (
       lastWorldQuaternion.x === -99999 ||
@@ -644,16 +679,12 @@ export const updateParticleSystems = ({ now, delta, elapsed }) => {
     ) {
       worldEuler.setFromQuaternion(worldQuaternion);
       lastWorldQuaternion.copy(worldQuaternion);
-
-      const tempPosX = particleSystem.position.x;
-      const tempPosY = particleSystem.position.y;
-      const tempPosZ = particleSystem.position.z;
-      gravityVelocity.set(0, gravity, 0);
-      particleSystem.position.set(0, 0, 0);
-      particleSystem.updateMatrixWorld();
+      gravityVelocity.set(
+        lastWorldPosition.x,
+        lastWorldPosition.y + gravity,
+        lastWorldPosition.z
+      );
       particleSystem.worldToLocal(gravityVelocity);
-      particleSystem.position.set(tempPosX, tempPosY, tempPosZ);
-      particleSystem.updateMatrixWorld();
     }
 
     generalData.creationTimes.forEach((entry, index) => {
@@ -729,12 +760,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(
@@ -753,7 +800,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;
           }
         }