webgl-framework - npm Package Compare versions

Comparing version 2.0.7-beta to 2.0.8

dist/lib/BaseShader.js

@@ -6,2 +6,4 @@ "use strict";
      * Constructor. Compiles shader.
+     *
+     * @param gl WebGL context.
      */
@@ -55,6 +57,6 @@ constructor(gl) {
     /**
-     * Get shader attribute location
+     * Get shader attribute location.
      *
-     * @param attrib Attribute name
-     * @return Attribute location
+     * @param attrib Attribute name.
+     * @return Attribute location.
      */
@@ -67,5 +69,3 @@ getAttrib(attrib) {
     }
-    /**
-     * Initializes shader.
-     */
+    /** Initializes shader. */
     initShader() {
@@ -91,5 +91,3 @@ const fragmentShader = this.getShader(this.gl.FRAGMENT_SHADER, this.fragmentShaderCode);
     }
-    /**
-     * Activates shader.
-     */
+    /** Activates shader. */
     use() {
@@ -100,5 +98,3 @@ if (this.program) {
     }
-    /**
-     * Deletes shader.
-     */
+    /** Deletes shader. */
     deleteProgram() {
@@ -105,0 +101,0 @@ if (this.program) {

dist/lib/CompressedTextureLoader.js

@@ -9,2 +9,8 @@ "use strict";
 class CompressedTextureLoader {
+    /**
+     * Loads ETC1 texture in PKM container.
+     *
+     * @param url URL to texture PKM file.
+     * @param gl WebGL context.
+     */
     static async loadETC1(url, gl) {
@@ -11,0 +17,0 @@ const texture = gl.createTexture();

dist/lib/webgl-framework.js

@@ -17,4 +17,8 @@ "use strict";
 exports.BaseRenderer = BaseRenderer_1.BaseRenderer;
+var FrameBuffer_1 = require("./FrameBuffer");
+exports.FrameBuffer = FrameBuffer_1.FrameBuffer;
+var TextureUtils_1 = require("./TextureUtils");
+exports.TextureUtils = TextureUtils_1.TextureUtils;
 var DiffuseShader_1 = require("./shaders/DiffuseShader");
 exports.DiffuseShader = DiffuseShader_1.DiffuseShader;
 //# sourceMappingURL=webgl-framework.js.map

dist/types/BaseShader.d.ts

 export declare abstract class BaseShader {
-    protected gl: WebGLRenderingContext;
+    protected gl: WebGLRenderingContext | WebGL2RenderingContext;
     protected vertexShaderCode: string;
@@ -8,4 +8,6 @@ protected fragmentShaderCode: string;
      * Constructor. Compiles shader.
+     *
+     * @param gl WebGL context.
      */
-    constructor(gl: WebGLRenderingContext);
+    constructor(gl: WebGLRenderingContext | WebGL2RenderingContext);
     /**
@@ -23,5 +25,3 @@ * Used to fill shader code. Put actual shader code to this.vertexShaderCode and this.fragmentShaderCode
     private getShader;
-    /**
-     * Retrieve and save uniforms and attributes for actual shader here
-     */
+    /** Retrieve and save uniforms and attributes for actual shader here */
     abstract fillUniformsAttributes(): void;
@@ -36,20 +36,14 @@ /**
     /**
-     * Get shader attribute location
+     * Get shader attribute location.
      *
-     * @param attrib Attribute name
-     * @return Attribute location
+     * @param attrib Attribute name.
+     * @return Attribute location.
      */
     getAttrib(attrib: string): number;
-    /**
-     * Initializes shader.
-     */
+    /** Initializes shader. */
     private initShader;
-    /**
-     * Activates shader.
-     */
+    /** Activates shader. */
     use(): void;
-    /**
-     * Deletes shader.
-     */
+    /** Deletes shader. */
     deleteProgram(): void;
 }

dist/types/CompressedTextureLoader.d.ts

 export declare class CompressedTextureLoader {
-    static loadETC1(url: string, gl: WebGLRenderingContext): Promise<WebGLTexture | null>;
+    /**
+     * Loads ETC1 texture in PKM container.
+     *
+     * @param url URL to texture PKM file.
+     * @param gl WebGL context.
+     */
+    static loadETC1(url: string, gl: WebGLRenderingContext | WebGL2RenderingContext): Promise<WebGLTexture | null>;
 }

dist/types/webgl-framework.d.ts

@@ -8,2 +8,4 @@ export { FullScreenUtils } from "./utils/FullScreenUtils";
 export { BaseRenderer } from "./BaseRenderer";
+export { FrameBuffer } from "./FrameBuffer";
+export { TextureUtils } from "./TextureUtils";
 export { DiffuseShader } from "./shaders/DiffuseShader";

dist/webgl-framework.es6.js

@@ -44,2 +44,8 @@ class FullScreenUtils {
 class CompressedTextureLoader {
+    /**
+     * Loads ETC1 texture in PKM container.
+     *
+     * @param url URL to texture PKM file.
+     * @param gl WebGL context.
+     */
     static async loadETC1(url, gl) {
@@ -155,2 +161,4 @@ const texture = gl.createTexture();
      * Constructor. Compiles shader.
+     *
+     * @param gl WebGL context.
      */
@@ -204,6 +212,6 @@ constructor(gl) {
     /**
-     * Get shader attribute location
+     * Get shader attribute location.
      *
-     * @param attrib Attribute name
-     * @return Attribute location
+     * @param attrib Attribute name.
+     * @return Attribute location.
      */
@@ -216,5 +224,3 @@ getAttrib(attrib) {
     }
-    /**
-     * Initializes shader.
-     */
+    /** Initializes shader. */
     initShader() {
@@ -240,5 +246,3 @@ const fragmentShader = this.getShader(this.gl.FRAGMENT_SHADER, this.fragmentShaderCode);
     }
-    /**
-     * Activates shader.
-     */
+    /** Activates shader. */
     use() {
@@ -249,5 +253,3 @@ if (this.program) {
     }
-    /**
-     * Deletes shader.
-     */
+    /** Deletes shader. */
     deleteProgram() {
@@ -1007,2 +1009,146 @@ if (this.program) {
 
+class FrameBuffer {
+    /** Constructor. */
+    constructor(gl) {
+        this.gl = gl;
+        this.m_textureHandle = null;
+        this.m_depthTextureHandle = null;
+        this.m_framebufferHandle = null;
+        this.m_depthbufferHandle = null;
+    }
+    /** Creates OpenGL objects */
+    createGLData(width, height) {
+        this.m_width = width;
+        this.m_height = height;
+        if (this.m_textureHandle !== null && this.m_width > 0 && this.m_height > 0) {
+            this.m_framebufferHandle = this.gl.createFramebuffer(); // alternative to GLES20.glGenFramebuffers()
+            if (this.m_textureHandle !== null) {
+                this.gl.bindTexture(this.gl.TEXTURE_2D, this.m_textureHandle);
+                this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.m_framebufferHandle);
+                this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, this.m_textureHandle, 0);
+                this.checkGlError("FB");
+            }
+            if (this.m_depthTextureHandle === null) {
+                this.m_depthbufferHandle = this.gl.createRenderbuffer();
+                this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, this.m_depthbufferHandle);
+                this.checkGlError("FB - glBindRenderbuffer");
+                this.gl.renderbufferStorage(this.gl.RENDERBUFFER, this.gl.DEPTH_COMPONENT16, this.m_width, this.m_height);
+                this.checkGlError("FB - glRenderbufferStorage");
+                this.gl.framebufferRenderbuffer(this.gl.FRAMEBUFFER, this.gl.DEPTH_ATTACHMENT, this.gl.RENDERBUFFER, this.m_depthbufferHandle);
+                this.checkGlError("FB - glFramebufferRenderbuffer");
+            }
+            else {
+                this.gl.bindTexture(this.gl.TEXTURE_2D, this.m_depthTextureHandle);
+                this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.m_framebufferHandle);
+                this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.DEPTH_ATTACHMENT, this.gl.TEXTURE_2D, this.m_depthTextureHandle, 0);
+                this.checkGlError("FB depth");
+            }
+            const result = this.gl.checkFramebufferStatus(this.gl.FRAMEBUFFER);
+            if (result != this.gl.FRAMEBUFFER_COMPLETE) {
+                console.error(`Error creating framebufer: ${result}`);
+            }
+            this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);
+            // this.gl.bindTexture(this.gl.TEXTURE_2D, 0);
+            this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+        }
+    }
+    checkGlError(op) {
+        let error;
+        while ((error = this.gl.getError()) !== this.gl.NO_ERROR) {
+            console.error(`${op}: glError ${error}`);
+        }
+    }
+    get width() {
+        return this.m_width;
+    }
+    set width(value) {
+        this.m_width = value;
+    }
+    get height() {
+        return this.m_height;
+    }
+    set height(value) {
+        this.m_height = value;
+    }
+    get textureHandle() {
+        return this.m_textureHandle;
+    }
+    set textureHandle(value) {
+        this.m_textureHandle = value;
+    }
+    get depthbufferHandle() {
+        return this.m_depthbufferHandle;
+    }
+    set depthbufferHandle(value) {
+        this.m_depthbufferHandle = value;
+    }
+    get framebufferHandle() {
+        return this.m_framebufferHandle;
+    }
+    set framebufferHandle(value) {
+        this.m_framebufferHandle = value;
+    }
+    get depthTextureHandle() {
+        return this.m_depthTextureHandle;
+    }
+    set depthTextureHandle(value) {
+        this.m_depthTextureHandle = value;
+    }
+}
+
+/** Utilities to create various textures. */
+class TextureUtils {
+    /**
+     * Creates non-power-of-two (NPOT) texture.
+     *
+     * @param gl WebGL context.
+     * @param texWidth Texture width.
+     * @param texHeight Texture height.
+     * @param hasAlpha Set to `true` to create texture with alpha channel.
+     */
+    static createNpotTexture(gl, texWidth, texHeight, hasAlpha = false) {
+        const textureID = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, textureID);
+        gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameterf(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);
+        let glFormat = null, glInternalFormat = null;
+        if (hasAlpha) {
+            glFormat = gl.RGBA;
+            glInternalFormat = gl.RGBA;
+        }
+        else {
+            glFormat = gl.RGB;
+            glInternalFormat = gl.RGB;
+        }
+        gl.texImage2D(gl.TEXTURE_2D, 0, glInternalFormat, texWidth, texHeight, 0, glFormat, gl.UNSIGNED_BYTE, null);
+        return textureID;
+    }
+    /**
+     * Creates depth texture.
+     *
+     * @param gl WebGL context.
+     * @param texWidth Texture width.
+     * @param texHeight Texture height.
+     */
+    static createDepthTexture(gl, texWidth, texHeight) {
+        const textureID = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, textureID);
+        gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+        gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        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);
+        const version = gl.getParameter(gl.VERSION) || "";
+        const glFormat = gl.DEPTH_COMPONENT;
+        const glInternalFormat = version.includes("WebGL 2")
+            ? gl.DEPTH_COMPONENT16
+            : gl.DEPTH_COMPONENT;
+        const type = gl.UNSIGNED_SHORT;
+        // In WebGL, we cannot pass array to depth texture.
+        gl.texImage2D(gl.TEXTURE_2D, 0, glInternalFormat, texWidth, texHeight, 0, glFormat, type, null);
+        return textureID;
+    }
+}
+
 class DiffuseShader extends BaseShader {
@@ -1053,3 +1199,3 @@ /** @inheritdoc */
 
-export { FullScreenUtils, BinaryDataLoader, CompressedTextureLoader, UncompressedTextureLoader, FullModel, BaseShader, BaseRenderer, DiffuseShader };
+export { FullScreenUtils, BinaryDataLoader, CompressedTextureLoader, UncompressedTextureLoader, FullModel, BaseShader, BaseRenderer, FrameBuffer, TextureUtils, DiffuseShader };
 //# sourceMappingURL=webgl-framework.es6.js.map

dist/webgl-framework.umd.js

@@ -50,2 +50,8 @@ (function (global, factory) {
     class CompressedTextureLoader {
+        /**
+         * Loads ETC1 texture in PKM container.
+         *
+         * @param url URL to texture PKM file.
+         * @param gl WebGL context.
+         */
         static async loadETC1(url, gl) {
@@ -161,2 +167,4 @@ const texture = gl.createTexture();
          * Constructor. Compiles shader.
+         *
+         * @param gl WebGL context.
          */
@@ -210,6 +218,6 @@ constructor(gl) {
         /**
-         * Get shader attribute location
+         * Get shader attribute location.
          *
-         * @param attrib Attribute name
-         * @return Attribute location
+         * @param attrib Attribute name.
+         * @return Attribute location.
          */
@@ -222,5 +230,3 @@ getAttrib(attrib) {
         }
-        /**
-         * Initializes shader.
-         */
+        /** Initializes shader. */
         initShader() {
@@ -246,5 +252,3 @@ const fragmentShader = this.getShader(this.gl.FRAGMENT_SHADER, this.fragmentShaderCode);
         }
-        /**
-         * Activates shader.
-         */
+        /** Activates shader. */
         use() {
@@ -255,5 +259,3 @@ if (this.program) {
         }
-        /**
-         * Deletes shader.
-         */
+        /** Deletes shader. */
         deleteProgram() {
@@ -1013,2 +1015,146 @@ if (this.program) {
 
+    class FrameBuffer {
+        /** Constructor. */
+        constructor(gl) {
+            this.gl = gl;
+            this.m_textureHandle = null;
+            this.m_depthTextureHandle = null;
+            this.m_framebufferHandle = null;
+            this.m_depthbufferHandle = null;
+        }
+        /** Creates OpenGL objects */
+        createGLData(width, height) {
+            this.m_width = width;
+            this.m_height = height;
+            if (this.m_textureHandle !== null && this.m_width > 0 && this.m_height > 0) {
+                this.m_framebufferHandle = this.gl.createFramebuffer(); // alternative to GLES20.glGenFramebuffers()
+                if (this.m_textureHandle !== null) {
+                    this.gl.bindTexture(this.gl.TEXTURE_2D, this.m_textureHandle);
+                    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.m_framebufferHandle);
+                    this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, this.m_textureHandle, 0);
+                    this.checkGlError("FB");
+                }
+                if (this.m_depthTextureHandle === null) {
+                    this.m_depthbufferHandle = this.gl.createRenderbuffer();
+                    this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, this.m_depthbufferHandle);
+                    this.checkGlError("FB - glBindRenderbuffer");
+                    this.gl.renderbufferStorage(this.gl.RENDERBUFFER, this.gl.DEPTH_COMPONENT16, this.m_width, this.m_height);
+                    this.checkGlError("FB - glRenderbufferStorage");
+                    this.gl.framebufferRenderbuffer(this.gl.FRAMEBUFFER, this.gl.DEPTH_ATTACHMENT, this.gl.RENDERBUFFER, this.m_depthbufferHandle);
+                    this.checkGlError("FB - glFramebufferRenderbuffer");
+                }
+                else {
+                    this.gl.bindTexture(this.gl.TEXTURE_2D, this.m_depthTextureHandle);
+                    this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.m_framebufferHandle);
+                    this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.DEPTH_ATTACHMENT, this.gl.TEXTURE_2D, this.m_depthTextureHandle, 0);
+                    this.checkGlError("FB depth");
+                }
+                const result = this.gl.checkFramebufferStatus(this.gl.FRAMEBUFFER);
+                if (result != this.gl.FRAMEBUFFER_COMPLETE) {
+                    console.error(`Error creating framebufer: ${result}`);
+                }
+                this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);
+                // this.gl.bindTexture(this.gl.TEXTURE_2D, 0);
+                this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
+            }
+        }
+        checkGlError(op) {
+            let error;
+            while ((error = this.gl.getError()) !== this.gl.NO_ERROR) {
+                console.error(`${op}: glError ${error}`);
+            }
+        }
+        get width() {
+            return this.m_width;
+        }
+        set width(value) {
+            this.m_width = value;
+        }
+        get height() {
+            return this.m_height;
+        }
+        set height(value) {
+            this.m_height = value;
+        }
+        get textureHandle() {
+            return this.m_textureHandle;
+        }
+        set textureHandle(value) {
+            this.m_textureHandle = value;
+        }
+        get depthbufferHandle() {
+            return this.m_depthbufferHandle;
+        }
+        set depthbufferHandle(value) {
+            this.m_depthbufferHandle = value;
+        }
+        get framebufferHandle() {
+            return this.m_framebufferHandle;
+        }
+        set framebufferHandle(value) {
+            this.m_framebufferHandle = value;
+        }
+        get depthTextureHandle() {
+            return this.m_depthTextureHandle;
+        }
+        set depthTextureHandle(value) {
+            this.m_depthTextureHandle = value;
+        }
+    }
+
+    /** Utilities to create various textures. */
+    class TextureUtils {
+        /**
+         * Creates non-power-of-two (NPOT) texture.
+         *
+         * @param gl WebGL context.
+         * @param texWidth Texture width.
+         * @param texHeight Texture height.
+         * @param hasAlpha Set to `true` to create texture with alpha channel.
+         */
+        static createNpotTexture(gl, texWidth, texHeight, hasAlpha = false) {
+            const textureID = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, textureID);
+            gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+            gl.texParameterf(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);
+            let glFormat = null, glInternalFormat = null;
+            if (hasAlpha) {
+                glFormat = gl.RGBA;
+                glInternalFormat = gl.RGBA;
+            }
+            else {
+                glFormat = gl.RGB;
+                glInternalFormat = gl.RGB;
+            }
+            gl.texImage2D(gl.TEXTURE_2D, 0, glInternalFormat, texWidth, texHeight, 0, glFormat, gl.UNSIGNED_BYTE, null);
+            return textureID;
+        }
+        /**
+         * Creates depth texture.
+         *
+         * @param gl WebGL context.
+         * @param texWidth Texture width.
+         * @param texHeight Texture height.
+         */
+        static createDepthTexture(gl, texWidth, texHeight) {
+            const textureID = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, textureID);
+            gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+            gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+            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);
+            const version = gl.getParameter(gl.VERSION) || "";
+            const glFormat = gl.DEPTH_COMPONENT;
+            const glInternalFormat = version.includes("WebGL 2")
+                ? gl.DEPTH_COMPONENT16
+                : gl.DEPTH_COMPONENT;
+            const type = gl.UNSIGNED_SHORT;
+            // In WebGL, we cannot pass array to depth texture.
+            gl.texImage2D(gl.TEXTURE_2D, 0, glInternalFormat, texWidth, texHeight, 0, glFormat, type, null);
+            return textureID;
+        }
+    }
+
     class DiffuseShader extends BaseShader {
@@ -1066,2 +1212,4 @@ /** @inheritdoc */
     exports.BaseRenderer = BaseRenderer;
+    exports.FrameBuffer = FrameBuffer;
+    exports.TextureUtils = TextureUtils;
     exports.DiffuseShader = DiffuseShader;
@@ -1068,0 +1216,0 @@

package.json

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

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

290110

increased by22.58%

Number of package files

46

increased by15%

Lines of code

3394

increased by16.95%

Number of low quality alerts

0

decreased by-100%

No dependency changes