modular-particle-system-webgl-renderer - npm Package Compare versions

Comparing version 0.0.4 to 1.0.0

index.iife.js

@@ -8,15 +8,8 @@ var modularParticleSystemWebglRenderer = (function (exports) {
     autoUpdate: true,
+    maxParticlesCount: 50000,
   };
 
-  /**
-   * NOTE: This is buffer size, not amount of particles! Actual max particles count is considerably less than this
-   */
-  const maxParticlesDataBufferSize = 500000;
-
   const Renderer = (opts) => {
-    const { particleSystem, container, textures, autoUpdate } = Object.assign(
-      {},
-      defaultOpts,
-      opts
-    );
+    const { particleSystem, container, textures, autoUpdate, maxParticlesCount } =
+      Object.assign({}, defaultOpts, opts);
 
@@ -33,2 +26,5 @@ // #region Init
     const canvas = document.createElement("canvas");
+    canvas.style.position = "absolute";
+    canvas.style.left = "0px";
+    canvas.style.top = "0px";
     container.append(canvas);
@@ -38,4 +34,13 @@
 
+    // #endregion
+
     // #region Init shaders and other static render resources
 
+    const attributesPerParticle = 8;
+    const isParticleCountLimited =
+      typeof maxParticlesCount === "number" && maxParticlesCount > 0;
+    const maxParticlesDataBufferSize = isParticleCountLimited
+      ? maxParticlesCount * attributesPerParticle
+      : Number.MAX_SAFE_INTEGER;
+
     gl.enable(gl.BLEND);
@@ -212,3 +217,2 @@ gl.blendFuncSeparate(
       const particleCount = particles.length;
-      const attributesPerParticle = 8;
       const particlesDataSize = attributesPerParticle * particleCount;
@@ -245,3 +249,3 @@
         particlesData[dataPos + 0] = particle.position.x;
-        particlesData[dataPos + 1] = -particle.position.y;
+        particlesData[dataPos + 1] = particle.position.y;
         particlesData[dataPos + 2] = particle.color.r;
@@ -310,2 +314,3 @@ particlesData[dataPos + 3] = particle.color.g;
     let rFrame = undefined;
+    let particlesCountPrev = 0;
     const frame = () => {
@@ -317,4 +322,13 @@ const tNow = window.performance.now();
       }
-      render();
+      const particlesCount = particleSystem.effects.reduce(
+        (prev, cur) => prev + cur.particles.length,
+        0
+      );
+
+      if (particlesCountPrev !== 0 || particlesCount !== 0) {
+        render();
+      }
+
       tPrev = tNow;
+      particlesCountPrev = particlesCount;
       rFrame = requestAnimationFrame(frame);
@@ -364,3 +378,3 @@ };
   );
-  gl_Position = vec4((aPos + rotGeometry * vec2(size) * aScale) * 2.0 / uViewportSizePx, 0.0, 1.0);
+  gl_Position = vec4(vec2(-1.0, 1.0) + (vec2(aPos.x, -aPos.y) + rotGeometry * vec2(size) * aScale) * 2.0 / uViewportSizePx, 0.0, 1.0);
   vColor = aColor;
@@ -367,0 +381,0 @@ vTexCoord = aTexCoord;

index.js

@@ -5,15 +5,8 @@ // WebGL 2 renderer for "modular-particle-system" developed by Niilo Keinänen 2022
   autoUpdate: true,
+  maxParticlesCount: 50000,
 };
 
-/**
- * NOTE: This is buffer size, not amount of particles! Actual max particles count is considerably less than this
- */
-const maxParticlesDataBufferSize = 500000;
-
 export const Renderer = (opts) => {
-  const { particleSystem, container, textures, autoUpdate } = Object.assign(
-    {},
-    defaultOpts,
-    opts
-  );
+  const { particleSystem, container, textures, autoUpdate, maxParticlesCount } =
+    Object.assign({}, defaultOpts, opts);
 
@@ -30,2 +23,5 @@ // #region Init
   const canvas = document.createElement("canvas");
+  canvas.style.position = "absolute";
+  canvas.style.left = "0px";
+  canvas.style.top = "0px";
   container.append(canvas);
@@ -35,4 +31,13 @@
 
+  // #endregion
+
   // #region Init shaders and other static render resources
 
+  const attributesPerParticle = 8;
+  const isParticleCountLimited =
+    typeof maxParticlesCount === "number" && maxParticlesCount > 0;
+  const maxParticlesDataBufferSize = isParticleCountLimited
+    ? maxParticlesCount * attributesPerParticle
+    : Number.MAX_SAFE_INTEGER;
+
   gl.enable(gl.BLEND);
@@ -209,3 +214,2 @@ gl.blendFuncSeparate(
     const particleCount = particles.length;
-    const attributesPerParticle = 8;
     const particlesDataSize = attributesPerParticle * particleCount;
@@ -242,3 +246,3 @@
       particlesData[dataPos + 0] = particle.position.x;
-      particlesData[dataPos + 1] = -particle.position.y;
+      particlesData[dataPos + 1] = particle.position.y;
       particlesData[dataPos + 2] = particle.color.r;
@@ -307,2 +311,3 @@ particlesData[dataPos + 3] = particle.color.g;
   let rFrame = undefined;
+  let particlesCountPrev = 0;
   const frame = () => {
@@ -314,4 +319,13 @@ const tNow = window.performance.now();
     }
-    render();
+    const particlesCount = particleSystem.effects.reduce(
+      (prev, cur) => prev + cur.particles.length,
+      0
+    );
+
+    if (particlesCountPrev !== 0 || particlesCount !== 0) {
+      render();
+    }
+
     tPrev = tNow;
+    particlesCountPrev = particlesCount;
     rFrame = requestAnimationFrame(frame);
@@ -361,3 +375,3 @@ };
   );
-  gl_Position = vec4((aPos + rotGeometry * vec2(size) * aScale) * 2.0 / uViewportSizePx, 0.0, 1.0);
+  gl_Position = vec4(vec2(-1.0, 1.0) + (vec2(aPos.x, -aPos.y) + rotGeometry * vec2(size) * aScale) * 2.0 / uViewportSizePx, 0.0, 1.0);
   vColor = aColor;
@@ -364,0 +378,0 @@ vTexCoord = aTexCoord;

package.json

 {
   "name": "modular-particle-system-webgl-renderer",
-  "version": "0.0.4",
+  "version": "1.0.0",
   "description": "WebGL 2 renderer for modular-particle-system package",
@@ -34,4 +34,4 @@ "type": "module",
   "dependencies": {
-    "modular-particle-system": "^1.1.0"
+    "modular-particle-system": "^1.2.0"
   }
 }

README.md

@@ -1,3 +0,6 @@
-WebGL 2 renderer for [`modular-particle-system`](https://www.npmjs.com/package/modular-particle-system).
+Simple WebGL 2 renderer package for [`modular-particle-system`](https://www.npmjs.com/package/modular-particle-system).
 
+Minified size 9 kB.
+Capable of rendering up to 100 000 particles with smooth FPS (60 times per second).
+
 Available as:
@@ -11,2 +14,5 @@
 
+By using the IIFE build, you can even embed a fully functional particle system + renderer with pure HTML code, for example like [this](../examples/pure-html/README.md).
+
+
 - NPM package
@@ -37,1 +43,9 @@
 ```
+
+## Development
+
+```bash
+cd modular-particle-system-webgl-renderer
+npm i
+npm start
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27607

increased by2.26%

Lines of code

692

increased by3.28%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

50

increased by38.89%

Dependency changes

• Updatedmodular-particle-system@^1.2.0