webgl-framework - npm Package Compare versions

Comparing version 2.1.2 to 2.1.3

dist/lib/UncompressedTextureLoader.js

@@ -8,3 +8,3 @@ "use strict";
             if (texture === null) {
-                reject('Error creating WebGL texture');
+                reject("Error creating WebGL texture");
                 return;
@@ -33,7 +33,41 @@ }
             };
-            image.onerror = () => reject('Cannot load image');
+            image.onerror = () => reject("Cannot load image");
         });
     }
+    static async loadCubemap(url, gl) {
+        const texture = gl.createTexture();
+        if (texture === null) {
+            throw new Error("Error creating WebGL texture");
+        }
+        gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
+        gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        const promises = [
+            { type: gl.TEXTURE_CUBE_MAP_POSITIVE_X, suffix: "-posx.png" },
+            { type: gl.TEXTURE_CUBE_MAP_NEGATIVE_X, suffix: "-negx.png" },
+            { type: gl.TEXTURE_CUBE_MAP_POSITIVE_Y, suffix: "-posy.png" },
+            { type: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, suffix: "-negy.png" },
+            { type: gl.TEXTURE_CUBE_MAP_POSITIVE_Z, suffix: "-posz.png" },
+            { type: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, suffix: "-negz.png" }
+        ].map(face => new Promise((resolve, reject) => {
+            const image = new Image();
+            image.src = url + face.suffix;
+            image.onload = () => {
+                gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
+                gl.texImage2D(face.type, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+                if (image && image.src) {
+                    console.log(`Loaded texture ${url}${face.suffix} [${image.width}x${image.height}]`);
+                }
+                resolve();
+            };
+            image.onerror = () => reject("Cannot load image");
+        }));
+        await Promise.all(promises);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        return texture;
+    }
 }
 exports.UncompressedTextureLoader = UncompressedTextureLoader;
 //# sourceMappingURL=UncompressedTextureLoader.js.map

dist/types/UncompressedTextureLoader.d.ts

 export declare class UncompressedTextureLoader {
     static load(url: string, gl: WebGLRenderingContext, minFilter?: number, magFilter?: number, clamp?: boolean): Promise<WebGLTexture>;
+    static loadCubemap(url: string, gl: WebGLRenderingContext): Promise<WebGLTexture>;
 }

dist/webgl-framework.es6.js

@@ -80,3 +80,3 @@ class FullScreenUtils {
             if (texture === null) {
-                reject('Error creating WebGL texture');
+                reject("Error creating WebGL texture");
                 return;
@@ -105,5 +105,39 @@ }
             };
-            image.onerror = () => reject('Cannot load image');
+            image.onerror = () => reject("Cannot load image");
         });
     }
+    static async loadCubemap(url, gl) {
+        const texture = gl.createTexture();
+        if (texture === null) {
+            throw new Error("Error creating WebGL texture");
+        }
+        gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
+        gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        const promises = [
+            { type: gl.TEXTURE_CUBE_MAP_POSITIVE_X, suffix: "-posx.png" },
+            { type: gl.TEXTURE_CUBE_MAP_NEGATIVE_X, suffix: "-negx.png" },
+            { type: gl.TEXTURE_CUBE_MAP_POSITIVE_Y, suffix: "-posy.png" },
+            { type: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, suffix: "-negy.png" },
+            { type: gl.TEXTURE_CUBE_MAP_POSITIVE_Z, suffix: "-posz.png" },
+            { type: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, suffix: "-negz.png" }
+        ].map(face => new Promise((resolve, reject) => {
+            const image = new Image();
+            image.src = url + face.suffix;
+            image.onload = () => {
+                gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
+                gl.texImage2D(face.type, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+                if (image && image.src) {
+                    console.log(`Loaded texture ${url}${face.suffix} [${image.width}x${image.height}]`);
+                }
+                resolve();
+            };
+            image.onerror = () => reject("Cannot load image");
+        }));
+        await Promise.all(promises);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        return texture;
+    }
 }
@@ -110,0 +144,0 @@

dist/webgl-framework.umd.js

@@ -86,3 +86,3 @@ (function (global, factory) {
                 if (texture === null) {
-                    reject('Error creating WebGL texture');
+                    reject("Error creating WebGL texture");
                     return;
@@ -111,5 +111,39 @@ }
                 };
-                image.onerror = () => reject('Cannot load image');
+                image.onerror = () => reject("Cannot load image");
             });
         }
+        static async loadCubemap(url, gl) {
+            const texture = gl.createTexture();
+            if (texture === null) {
+                throw new Error("Error creating WebGL texture");
+            }
+            gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
+            gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+            gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+            const promises = [
+                { type: gl.TEXTURE_CUBE_MAP_POSITIVE_X, suffix: "-posx.png" },
+                { type: gl.TEXTURE_CUBE_MAP_NEGATIVE_X, suffix: "-negx.png" },
+                { type: gl.TEXTURE_CUBE_MAP_POSITIVE_Y, suffix: "-posy.png" },
+                { type: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, suffix: "-negy.png" },
+                { type: gl.TEXTURE_CUBE_MAP_POSITIVE_Z, suffix: "-posz.png" },
+                { type: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, suffix: "-negz.png" }
+            ].map(face => new Promise((resolve, reject) => {
+                const image = new Image();
+                image.src = url + face.suffix;
+                image.onload = () => {
+                    gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
+                    gl.texImage2D(face.type, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+                    if (image && image.src) {
+                        console.log(`Loaded texture ${url}${face.suffix} [${image.width}x${image.height}]`);
+                    }
+                    resolve();
+                };
+                image.onerror = () => reject("Cannot load image");
+            }));
+            await Promise.all(promises);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+            return texture;
+        }
     }
@@ -116,0 +150,0 @@

package.json

 {
   "name": "webgl-framework",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Basic low-level WebGL framework",
@@ -5,0 +5,0 @@ "author": "Oleksandr Popov (github.com/keaukraine/)",

No alert changes

Improved metrics

Total package byte prevSize

662172

increased by2.4%

Lines of code

4623

increased by2.28%

No dependency changes