@newkrok/three-particles 0.6.2 → 0.7.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.7.0",
   "description": "Particle system for ThreeJS",
   "main": "src/js/three-particles.js",
   "bin": {

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.js

@@ -108,6 +108,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,
@@ -391,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,