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

Comparing version 1.0.0 to 1.0.1

index.iife.js

@@ -131,60 +131,58 @@ var modularParticleSystemWebglRenderer = (function (exports) {
         try {
-          if (value instanceof HTMLImageElement) {
-            const loadImage = () => {
-              const index = loadedTextures.length;
-              value.removeEventListener("load", loadImage);
-              const texture = gl.createTexture();
-              gl.activeTexture(gl.TEXTURE0 + index);
-              gl.bindTexture(gl.TEXTURE_2D, texture);
-              gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+          const loadTextureData = (textureData) => {
+            const index = loadedTextures.length;
+            const texture = gl.createTexture();
+            gl.activeTexture(gl.TEXTURE0 + index);
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
 
-              const level = 0;
-              const internalFormat = gl.RGBA;
-              const srcFormat = gl.RGBA;
-              const srcType = gl.UNSIGNED_BYTE;
-              const pxData = value;
-              gl.texImage2D(
-                gl.TEXTURE_2D,
-                level,
-                internalFormat,
-                srcFormat,
-                srcType,
-                pxData
-              );
-              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-              gl.texParameteri(
-                gl.TEXTURE_2D,
-                gl.TEXTURE_WRAP_S,
-                gl.CLAMP_TO_EDGE
-              );
-              gl.texParameteri(
-                gl.TEXTURE_2D,
-                gl.TEXTURE_WRAP_T,
-                gl.CLAMP_TO_EDGE
-              );
-              loadedTextures.push({ texture, index, name: key });
-              console.timeEnd(`load texture ${key}`);
+            const level = 0;
+            const internalFormat = gl.RGBA;
+            const srcFormat = gl.RGBA;
+            const srcType = gl.UNSIGNED_BYTE;
+            gl.texImage2D(
+              gl.TEXTURE_2D,
+              level,
+              internalFormat,
+              srcFormat,
+              srcType,
+              textureData
+            );
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+            loadedTextures.push({ texture, index, name: key });
+            console.timeEnd(`load texture ${key}`);
 
-              // Select active texture for rendering.
-              let desiredTextureIndex = undefined;
-              particleSystem.effects.forEach((effect) => {
-                effect.textures.forEach((texture) => {
-                  const i = loadedTextures.findIndex(
-                    (item) => item.name === texture
-                  );
-                  if (i >= 0) {
-                    desiredTextureIndex = i;
-                  }
-                });
+            // Select active texture for rendering.
+            let desiredTextureIndex = undefined;
+            particleSystem.effects.forEach((effect) => {
+              effect.textures.forEach((texture) => {
+                const i = loadedTextures.findIndex(
+                  (item) => item.name === texture
+                );
+                if (i >= 0) {
+                  desiredTextureIndex = i;
+                }
               });
-              if (desiredTextureIndex >= 0) {
-                gl.uniform1i(locTexture, desiredTextureIndex);
-              }
-            };
+            });
+            if (desiredTextureIndex >= 0) {
+              gl.uniform1i(locTexture, desiredTextureIndex);
+            }
+          };
+
+          if (value instanceof HTMLImageElement) {
             if (value.complete) {
-              loadImage();
+              loadTextureData(value);
             } else {
+              const loadImage = () => {
+                loadTextureData(value);
+                value.removeEventListener("load", loadImage);
+              };
               value.addEventListener("load", loadImage);
             }
+          } else {
+            // Unidentified texture data. Just attempt to load it and hope it works :)
+            loadTextureData(value);
           }
@@ -191,0 +189,0 @@ } catch (e) {

index.js

@@ -128,60 +128,58 @@ // WebGL 2 renderer for "modular-particle-system" developed by Niilo Keinänen 2022
       try {
-        if (value instanceof HTMLImageElement) {
-          const loadImage = () => {
-            const index = loadedTextures.length;
-            value.removeEventListener("load", loadImage);
-            const texture = gl.createTexture();
-            gl.activeTexture(gl.TEXTURE0 + index);
-            gl.bindTexture(gl.TEXTURE_2D, texture);
-            gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+        const loadTextureData = (textureData) => {
+          const index = loadedTextures.length;
+          const texture = gl.createTexture();
+          gl.activeTexture(gl.TEXTURE0 + index);
+          gl.bindTexture(gl.TEXTURE_2D, texture);
+          gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
 
-            const level = 0;
-            const internalFormat = gl.RGBA;
-            const srcFormat = gl.RGBA;
-            const srcType = gl.UNSIGNED_BYTE;
-            const pxData = value;
-            gl.texImage2D(
-              gl.TEXTURE_2D,
-              level,
-              internalFormat,
-              srcFormat,
-              srcType,
-              pxData
-            );
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-            gl.texParameteri(
-              gl.TEXTURE_2D,
-              gl.TEXTURE_WRAP_S,
-              gl.CLAMP_TO_EDGE
-            );
-            gl.texParameteri(
-              gl.TEXTURE_2D,
-              gl.TEXTURE_WRAP_T,
-              gl.CLAMP_TO_EDGE
-            );
-            loadedTextures.push({ texture, index, name: key });
-            console.timeEnd(`load texture ${key}`);
+          const level = 0;
+          const internalFormat = gl.RGBA;
+          const srcFormat = gl.RGBA;
+          const srcType = gl.UNSIGNED_BYTE;
+          gl.texImage2D(
+            gl.TEXTURE_2D,
+            level,
+            internalFormat,
+            srcFormat,
+            srcType,
+            textureData
+          );
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+          loadedTextures.push({ texture, index, name: key });
+          console.timeEnd(`load texture ${key}`);
 
-            // Select active texture for rendering.
-            let desiredTextureIndex = undefined;
-            particleSystem.effects.forEach((effect) => {
-              effect.textures.forEach((texture) => {
-                const i = loadedTextures.findIndex(
-                  (item) => item.name === texture
-                );
-                if (i >= 0) {
-                  desiredTextureIndex = i;
-                }
-              });
+          // Select active texture for rendering.
+          let desiredTextureIndex = undefined;
+          particleSystem.effects.forEach((effect) => {
+            effect.textures.forEach((texture) => {
+              const i = loadedTextures.findIndex(
+                (item) => item.name === texture
+              );
+              if (i >= 0) {
+                desiredTextureIndex = i;
+              }
             });
-            if (desiredTextureIndex >= 0) {
-              gl.uniform1i(locTexture, desiredTextureIndex);
-            }
-          };
+          });
+          if (desiredTextureIndex >= 0) {
+            gl.uniform1i(locTexture, desiredTextureIndex);
+          }
+        };
+
+        if (value instanceof HTMLImageElement) {
           if (value.complete) {
-            loadImage();
+            loadTextureData(value);
           } else {
+            const loadImage = () => {
+              loadTextureData(value);
+              value.removeEventListener("load", loadImage);
+            };
             value.addEventListener("load", loadImage);
           }
+        } else {
+          // Unidentified texture data. Just attempt to load it and hope it works :)
+          loadTextureData(value);
         }
@@ -188,0 +186,0 @@ } catch (e) {

package.json

 {
   "name": "modular-particle-system-webgl-renderer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "WebGL 2 renderer for modular-particle-system package",
@@ -17,4 +17,3 @@ "type": "module",
   "license": "MIT",
-  "main": "index.js",
-  "browser": "index.iife.js",
+  "main": "./index.js",
   "devDependencies": {
@@ -21,0 +20,0 @@ "@babel/core": "^7.17.9",

README.md

@@ -21,3 +21,3 @@ Simple WebGL 2 renderer package for [`modular-particle-system`](https://www.npmjs.com/package/modular-particle-system).
 
-NOTE: Usage from NPM package is untested.
+NOTE: Usage from NPM package is currently untested.
 
@@ -31,6 +31,6 @@ ```js
 
-// NOTE: Currently renderer supports only 1 texture at a time. Several can be loaded, but only 1 can be rendered with.
+const imgCloudTexture = new Image();
+imgCloudTexture.src = `my-assets/generic/cloud.png`
 const textures = {
-  "generic/ball.png": loadTextureImage("generic/ball.png"),
-  "generic/cloud.png": loadTextureImage("generic/cloud.png"),
+  "generic/cloud.png": imgCloudTexture,
 };
@@ -45,2 +45,47 @@
 
+## Extended usage
+
+### Renderer Options
+
+- **Required** `particleSystem`
+
+Reference to a modular `ParticleSystem` object.
+
+- **Required** `container`
+
+Reference to a `HTML` element that will contain the renderer.
+
+- **Required** `textures`
+
+Texture sources for rendering particles.
+
+This is a object where each property key describes the name of a texture and the value is a texture source. Several types of values are supported:
+- `ArrayBufferView`
+- `ImageData`
+- `HTMLImageElement`
+- `ImageBitmap`
+- Or any other type supported by [WebGL texImage2D `pixels` parameter](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D).
+
+- Optional `autoUpdate`
+
+If `omitted or `true, the renderer will automatically update the `ParticleSystem` between each frame. 
+
+- Optional `maxParticlesCount`
+
+Defaults to `50000`, can be used to set a limit for particle rendering.
+When number of particles exceeds this, the renderer will render some subset of the particles but not all.
+
+### Destroy Renderer
+
+```js
+const renderer = Renderer({ ... });
+renderer.destroy()
+```
+
+## Known limitations
+
+The renderer currently only supports rendering with 1 texture source.
+
+The vision is to allow rendering with a relatively small number of relatively small textures, let's say 10 textures each smaller than 200x200px, since this is within the limits of keeping things simple and performant.
+
 ## Development
@@ -47,0 +92,0 @@

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

Improved metrics

Total package byte prevSize

28942

increased by4.84%

Number of lines in readme file

95

increased by90%

Worsened metrics

Lines of code

686

decreased by-0.87%

No dependency changes