@lightningtv/renderer 2.16.1 → 3.2.3

package/dist/src/core/lib/WebGlContextWrapper.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
-import { assertTruthy } from '../../utils.js';
+import { assertTruthy, isProductionEnvironment } from '../../utils.js';
 import { isWebGl2 } from '../renderers/webgl/internal/WebGlUtils.js';
 /**
  * Optimized WebGL Context Wrapper
@@ -41,6 +41,7 @@ export class WebGlContextWrapper {
     boundArrayBuffer;
     boundElementArrayBuffer;
     curProgram;
+    curUniformLocations = {};
     //#endregion Cached WebGL State
     //#region Canvas
     canvas;
@@ -61,6 +62,7 @@ export class WebGlContextWrapper {
     TEXTURE_WRAP_S;
     TEXTURE_WRAP_T;
     LINEAR;
+    LINEAR_MIPMAP_LINEAR;
     CLAMP_TO_EDGE;
     RGB;
     RGBA;
@@ -133,6 +135,7 @@ export class WebGlContextWrapper {
         this.TEXTURE_WRAP_S = gl.TEXTURE_WRAP_S;
         this.TEXTURE_WRAP_T = gl.TEXTURE_WRAP_T;
         this.LINEAR = gl.LINEAR;
+        this.LINEAR_MIPMAP_LINEAR = gl.LINEAR_MIPMAP_LINEAR;
         this.CLAMP_TO_EDGE = gl.CLAMP_TO_EDGE;
         this.RGB = gl.RGB;
         this.RGBA = gl.RGBA;
@@ -176,9 +179,8 @@ export class WebGlContextWrapper {
      * @param textureUnit
      */
     activeTexture(textureUnit) {
-        const { gl } = this;
         if (this.activeTextureUnit !== textureUnit) {
-            gl.activeTexture(textureUnit + gl.TEXTURE0);
+            this.gl.activeTexture(textureUnit + this.gl.TEXTURE0);
             this.activeTextureUnit = textureUnit;
         }
     }
@@ -192,16 +194,14 @@ export class WebGlContextWrapper {
      * @param texture
      */
     bindTexture(texture) {
-        const { gl, activeTextureUnit, texture2dUnits } = this;
-        if (texture2dUnits[activeTextureUnit] === texture) {
+        if (this.texture2dUnits[this.activeTextureUnit] === texture) {
             return;
         }
-        texture2dUnits[activeTextureUnit] = texture;
-        gl.bindTexture(this.gl.TEXTURE_2D, texture);
+        this.texture2dUnits[this.activeTextureUnit] = texture;
+        this.gl.bindTexture(this.gl.TEXTURE_2D, texture);
     }
     _getActiveTexture() {
-        const { activeTextureUnit, texture2dUnits } = this;
-        return texture2dUnits[activeTextureUnit];
+        return this.texture2dUnits[this.activeTextureUnit];
     }
     /**
      * ```
@@ -215,29 +215,27 @@ export class WebGlContextWrapper {
      * @returns
      */
     texParameteri(pname, param) {
-        const { gl, texture2dParams } = this;
         const activeTexture = this._getActiveTexture();
         if (!activeTexture) {
             throw new Error('No active texture');
         }
-        let textureParams = texture2dParams.get(activeTexture);
+        let textureParams = this.texture2dParams.get(activeTexture);
         if (!textureParams) {
             textureParams = {};
-            texture2dParams.set(activeTexture, textureParams);
+            this.texture2dParams.set(activeTexture, textureParams);
         }
         if (textureParams[pname] === param) {
             return;
         }
         textureParams[pname] = param;
-        gl.texParameteri(gl.TEXTURE_2D, pname, param);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, pname, param);
     }
     texImage2D(level, internalFormat, widthOrFormat, heightOrType, borderOrSource, format, type, pixels) {
-        const { gl } = this;
         if (format) {
-            gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, widthOrFormat, heightOrType, borderOrSource, format, type, pixels);
+            this.gl.texImage2D(this.gl.TEXTURE_2D, level, internalFormat, widthOrFormat, heightOrType, borderOrSource, format, type, pixels);
         }
         else {
-            gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, widthOrFormat, heightOrType, borderOrSource);
+            this.gl.texImage2D(this.gl.TEXTURE_2D, level, internalFormat, widthOrFormat, heightOrType, borderOrSource);
         }
     }
     /**
@@ -249,8 +247,7 @@ export class WebGlContextWrapper {
      * **WebGL Difference**: Bind target is always `gl.TEXTURE_2D`
      */
     compressedTexImage2D(level, internalformat, width, height, border, data) {
-        const { gl } = this;
-        gl.compressedTexImage2D(gl.TEXTURE_2D, level, internalformat, width, height, border, data);
+        this.gl.compressedTexImage2D(this.gl.TEXTURE_2D, level, internalformat, width, height, border, data);
     }
     /**
      * ```
@@ -261,8 +258,7 @@ export class WebGlContextWrapper {
      * @param param
      */
     pixelStorei(pname, param) {
-        const { gl } = this;
-        gl.pixelStorei(pname, param);
+        this.gl.pixelStorei(pname, param);
     }
     /**
      * ```
@@ -273,8 +269,7 @@ export class WebGlContextWrapper {
      * **WebGL Difference**: Bind target is always `gl.TEXTURE_2D`
      */
     generateMipmap() {
-        const { gl } = this;
-        gl.generateMipmap(gl.TEXTURE_2D);
+        this.gl.generateMipmap(this.gl.TEXTURE_2D);
     }
     /**
      * ```
@@ -284,8 +279,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     createTexture() {
-        const { gl } = this;
-        return gl.createTexture();
+        return this.gl.createTexture();
     }
     /**
      * ```
@@ -295,11 +289,10 @@ export class WebGlContextWrapper {
      * @param texture
      */
     deleteTexture(texture) {
-        const { gl } = this;
         if (texture) {
             this.texture2dParams.delete(texture);
         }
-        gl.deleteTexture(texture);
+        this.gl.deleteTexture(texture);
     }
     /**
      * ```
@@ -316,8 +309,7 @@ export class WebGlContextWrapper {
      * ```
      */
     viewport(x, y, width, height) {
-        const { gl } = this;
-        gl.viewport(x, y, width, height);
+        this.gl.viewport(x, y, width, height);
     }
     /**
      * ```
@@ -330,8 +322,7 @@ export class WebGlContextWrapper {
      * @param alpha
      */
     clearColor(red, green, blue, alpha) {
-        const { gl } = this;
-        gl.clearColor(red, green, blue, alpha);
+        this.gl.clearColor(red, green, blue, alpha);
     }
     /**
      * ```
@@ -340,15 +331,14 @@ export class WebGlContextWrapper {
      * @param enable
      */
     setScissorTest(enable) {
-        const { gl, scissorEnabled } = this;
-        if (enable === scissorEnabled) {
+        if (enable === this.scissorEnabled) {
             return;
         }
         if (enable) {
-            gl.enable(gl.SCISSOR_TEST);
+            this.gl.enable(this.gl.SCISSOR_TEST);
         }
         else {
-            gl.disable(gl.SCISSOR_TEST);
+            this.gl.disable(this.gl.SCISSOR_TEST);
         }
         this.scissorEnabled = enable;
     }
@@ -363,12 +353,11 @@ export class WebGlContextWrapper {
      * @param height
      */
     scissor(x, y, width, height) {
-        const { gl, scissorX, scissorY, scissorWidth, scissorHeight } = this;
-        if (x !== scissorX ||
-            y !== scissorY ||
-            width !== scissorWidth ||
-            height !== scissorHeight) {
-            gl.scissor(x, y, width, height);
+        if (x !== this.scissorX ||
+            y !== this.scissorY ||
+            width !== this.scissorWidth ||
+            height !== this.scissorHeight) {
+            this.gl.scissor(x, y, width, height);
             this.scissorX = x;
             this.scissorY = y;
             this.scissorWidth = width;
@@ -384,15 +373,14 @@ export class WebGlContextWrapper {
      * @returns
      */
     setBlend(blend) {
-        const { gl, blendEnabled } = this;
-        if (blend === blendEnabled) {
+        if (blend === this.blendEnabled) {
             return;
         }
         if (blend) {
-            gl.enable(gl.BLEND);
+            this.gl.enable(this.gl.BLEND);
         }
         else {
-            gl.disable(gl.BLEND);
+            this.gl.disable(this.gl.BLEND);
         }
         this.blendEnabled = blend;
     }
@@ -405,12 +393,11 @@ export class WebGlContextWrapper {
      * @param dst
      */
     blendFunc(src, dst) {
-        const { gl, blendSrcRgb, blendDstRgb, blendSrcAlpha, blendDstAlpha } = this;
-        if (src !== blendSrcRgb ||
-            dst !== blendDstRgb ||
-            src !== blendSrcAlpha ||
-            dst !== blendDstAlpha) {
-            gl.blendFunc(src, dst);
+        if (src !== this.blendSrcRgb ||
+            dst !== this.blendDstRgb ||
+            src !== this.blendSrcAlpha ||
+            dst !== this.blendDstAlpha) {
+            this.gl.blendFunc(src, dst);
             this.blendSrcRgb = src;
             this.blendDstRgb = dst;
             this.blendSrcAlpha = src;
@@ -425,8 +412,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     createBuffer() {
-        const { gl } = this;
-        return gl.createBuffer();
+        return this.gl.createBuffer();
     }
     /**
      * ```
@@ -435,8 +421,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     createFramebuffer() {
-        const { gl } = this;
-        return gl.createFramebuffer();
+        return this.gl.createFramebuffer();
     }
     /**
      * ```
@@ -446,8 +431,7 @@ export class WebGlContextWrapper {
      * @param framebuffer
      */
     bindFramebuffer(framebuffer) {
-        const { gl } = this;
-        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+        this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
     }
     /**
      * ```
@@ -457,7 +441,7 @@ export class WebGlContextWrapper {
      * **WebGL Difference**: Bind target is always `gl.FRAMEBUFFER` and textarget is always `gl.TEXTURE_2D`
      */
     framebufferTexture2D(attachment, texture, level) {
-        const { gl } = this;
+        const gl = this.gl;
         gl.framebufferTexture2D(gl.FRAMEBUFFER, attachment, gl.TEXTURE_2D, texture, level);
     }
     /**
@@ -469,8 +453,7 @@ export class WebGlContextWrapper {
      * **WebGL Difference**: Clear mask is always `gl.COLOR_BUFFER_BIT`
      */
     clear() {
-        const { gl } = this;
-        gl.clear(gl.COLOR_BUFFER_BIT);
+        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
     }
     /**
      * ```
@@ -486,12 +469,32 @@ export class WebGlContextWrapper {
      * @param usage
      */
     arrayBufferData(buffer, data, usage) {
-        const { gl, boundArrayBuffer } = this;
-        if (boundArrayBuffer !== buffer) {
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        if (this.boundArrayBuffer !== buffer) {
+            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
             this.boundArrayBuffer = buffer;
         }
-        gl.bufferData(gl.ARRAY_BUFFER, data, usage);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, data, usage);
+    }
+    /**
+     * ```
+     * gl.bindBuffer(gl.ARRAY_BUFFER, buffer);  // if needed
+     * gl.bufferSubData(gl.ARRAY_BUFFER, dstByteOffset, data);
+     * ```
+     *
+     * @remarks
+     * **WebGL Combo**: `gl.bindBuffer` is only called when the buffer changes.
+     * Used to surgically update a subset of the GPU buffer without reallocating it.
+     *
+     * @param buffer
+     * @param dstByteOffset - Byte offset into the GPU buffer where `data` will be written
+     * @param data
+     */
+    arrayBufferSubData(buffer, dstByteOffset, data) {
+        if (this.boundArrayBuffer !== buffer) {
+            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+            this.boundArrayBuffer = buffer;
+        }
+        this.gl.bufferSubData(this.gl.ARRAY_BUFFER, dstByteOffset, data);
     }
     /**
      * ```
@@ -506,12 +509,11 @@ export class WebGlContextWrapper {
      * @param usage
      */
     elementArrayBufferData(buffer, data, usage) {
-        const { gl, boundElementArrayBuffer } = this;
-        if (boundElementArrayBuffer !== buffer) {
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
+        if (this.boundElementArrayBuffer !== buffer) {
+            this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, buffer);
             this.boundElementArrayBuffer = buffer;
         }
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, usage);
+        this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, data, usage);
     }
     /**
      * ```
@@ -531,12 +533,44 @@ export class WebGlContextWrapper {
      * @param offset
      */
     vertexAttribPointer(buffer, index, size, type, normalized, stride, offset) {
-        const { gl, boundArrayBuffer } = this;
-        if (boundArrayBuffer !== buffer) {
-            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+        if (this.boundArrayBuffer !== buffer) {
+            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
             this.boundArrayBuffer = buffer;
         }
-        gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
+        this.gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
+    }
+    /**
+     * Returns object with Attribute names as key and numbers as location values
+     *
+     * @param program
+     * @returns object with numbers
+     */
+    getUniformLocations(program) {
+        const gl = this.gl;
+        const length = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+        const result = {};
+        for (let i = 0; i < length; i++) {
+            const info = gl.getActiveUniform(program, i);
+            //remove bracket + value from uniform name;
+            let name = info.name.replace(/\[.*?\]/g, '');
+            result[name] = gl.getUniformLocation(program, name);
+        }
+        return result;
+    }
+    /**
+     * Returns object with Attribute names as key and numbers as location values
+     * @param program
+     * @returns object with numbers
+     */
+    getAttributeLocations(program) {
+        const gl = this.gl;
+        const length = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
+        const result = [];
+        for (let i = 0; i < length; i++) {
+            const { name } = gl.getActiveAttrib(program, i);
+            result[gl.getAttribLocation(program, name)] = name;
+        }
+        return result;
     }
     /**
      * ```
@@ -546,13 +580,13 @@ export class WebGlContextWrapper {
      * @param program
      * @returns
      */
-    useProgram(program) {
-        const { gl, curProgram } = this;
-        if (curProgram === program) {
+    useProgram(program, uniformLocations) {
+        if (this.curProgram === program) {
             return;
         }
-        gl.useProgram(program);
+        this.gl.useProgram(program);
         this.curProgram = program;
+        this.curUniformLocations = uniformLocations;
     }
     /**
      * Sets the value of a single float uniform variable.
@@ -561,8 +595,7 @@ export class WebGlContextWrapper {
      * @param v0 - The value to set.
      */
     uniform1f(location, v0) {
-        const { gl } = this;
-        gl.uniform1f(location, v0);
+        this.gl.uniform1f(this.curUniformLocations[location] || null, v0);
     }
     /**
      * Sets the value of a float array uniform variable.
@@ -571,8 +604,7 @@ export class WebGlContextWrapper {
      * @param value - The array of values to set.
      */
     uniform1fv(location, value) {
-        const { gl } = this;
-        gl.uniform1fv(location, value);
+        this.gl.uniform1fv(this.curUniformLocations[location] || null, value);
     }
     /**
      * Sets the value of a single integer uniform variable.
@@ -581,8 +613,7 @@ export class WebGlContextWrapper {
      * @param v0 - The value to set.
      */
     uniform1i(location, v0) {
-        const { gl } = this;
-        gl.uniform1i(location, v0);
+        this.gl.uniform1i(this.curUniformLocations[location] || null, v0);
     }
     /**
      * Sets the value of an integer array uniform variable.
@@ -591,8 +622,7 @@ export class WebGlContextWrapper {
      * @param value - The array of values to set.
      */
     uniform1iv(location, value) {
-        const { gl } = this;
-        gl.uniform1iv(location, value);
+        this.gl.uniform1iv(this.curUniformLocations[location] || null, value);
     }
     /**
      * Sets the value of a vec2 uniform variable.
@@ -602,8 +632,16 @@ export class WebGlContextWrapper {
      * @param v1 - The second component of the vector.
      */
     uniform2f(location, v0, v1) {
-        const { gl } = this;
-        gl.uniform2f(location, v0, v1);
+        this.gl.uniform2f(this.curUniformLocations[location] || null, v0, v1);
+    }
+    /**
+     * Sets the value of a vec3 uniform variable.
+     *
+     * @param location - The location of the uniform variable.
+     * @param v - array of 4 numbers.
+     */
+    uniform2fa(location, value) {
+        this.gl.uniform2f(this.curUniformLocations[location] || null, value[0], value[1]);
     }
     /**
      * Sets the value of a vec2 array uniform variable.
@@ -612,8 +650,7 @@ export class WebGlContextWrapper {
      * @param value - The array of vec2 values to set.
      */
     uniform2fv(location, value) {
-        const { gl } = this;
-        gl.uniform2fv(location, value);
+        this.gl.uniform2fv(this.curUniformLocations[location] || null, value);
     }
     /**
      * Sets the value of a ivec2 uniform variable.
@@ -623,8 +660,7 @@ export class WebGlContextWrapper {
      * @param v1 - The second component of the vector.
      */
     uniform2i(location, v0, v1) {
-        const { gl } = this;
-        gl.uniform2i(location, v0, v1);
+        this.gl.uniform2i(this.curUniformLocations[location] || null, v0, v1);
     }
     /**
      * Sets the value of an ivec2 array uniform variable.
@@ -633,8 +669,7 @@ export class WebGlContextWrapper {
      * @param value - The array of ivec2 values to set.
      */
     uniform2iv(location, value) {
-        const { gl } = this;
-        gl.uniform2iv(location, value);
+        this.gl.uniform2iv(this.curUniformLocations[location] || null, value);
     }
     /**
      * Sets the value of a vec3 uniform variable.
@@ -645,8 +680,16 @@ export class WebGlContextWrapper {
      * @param v2 - The third component of the vector.
      */
     uniform3f(location, v0, v1, v2) {
-        const { gl } = this;
-        gl.uniform3f(location, v0, v1, v2);
+        this.gl.uniform3f(this.curUniformLocations[location] || null, v0, v1, v2);
+    }
+    /**
+     * Sets the value of a vec3 uniform variable.
+     *
+     * @param location - The location of the uniform variable.
+     * @param v - array of 4 numbers.
+     */
+    uniform3fa(location, value) {
+        this.gl.uniform3f(this.curUniformLocations[location] || null, value[0], value[1], value[2]);
     }
     /**
      * Sets the value of a vec3 array uniform variable.
@@ -655,8 +698,7 @@ export class WebGlContextWrapper {
      * @param value - The array of vec3 values to set.
      */
     uniform3fv(location, value) {
-        const { gl } = this;
-        gl.uniform3fv(location, value);
+        this.gl.uniform3fv(this.curUniformLocations[location] || null, value);
     }
     /**
      * Sets the value of a ivec3 uniform variable.
@@ -667,8 +709,7 @@ export class WebGlContextWrapper {
      * @param v2 - The third component of the vector.
      */
     uniform3i(location, v0, v1, v2) {
-        const { gl } = this;
-        gl.uniform3i(location, v0, v1, v2);
+        this.gl.uniform3i(this.curUniformLocations[location] || null, v0, v1, v2);
     }
     /**
      * Sets the value of an ivec3 array uniform variable.
@@ -677,8 +718,7 @@ export class WebGlContextWrapper {
      * @param value - The array of ivec3 values to set.
      */
     uniform3iv(location, value) {
-        const { gl } = this;
-        gl.uniform3iv(location, value);
+        this.gl.uniform3iv(this.curUniformLocations[location] || null, value);
     }
     /**
      * Sets the value of a vec4 uniform variable.
@@ -690,8 +730,16 @@ export class WebGlContextWrapper {
      * @param v3 - The fourth component of the vector.
      */
     uniform4f(location, v0, v1, v2, v3) {
-        const { gl } = this;
-        gl.uniform4f(location, v0, v1, v2, v3);
+        this.gl.uniform4f(this.curUniformLocations[location] || null, v0, v1, v2, v3);
+    }
+    /**
+     * Sets the value of a vec4 uniform variable.
+     *
+     * @param location - The location of the uniform variable.
+     * @param v - array of 4 numbers.
+     */
+    uniform4fa(location, value) {
+        this.gl.uniform4f(this.curUniformLocations[location] || null, value[0], value[1], value[2], value[3]);
     }
     /**
      * Sets the value of a vec4 array uniform variable.
@@ -700,8 +748,7 @@ export class WebGlContextWrapper {
      * @param value - The array of vec4 values to set.
      */
     uniform4fv(location, value) {
-        const { gl } = this;
-        gl.uniform4fv(location, value);
+        this.gl.uniform4fv(this.curUniformLocations[location] || null, value);
     }
     /**
      * Sets the value of a ivec4 uniform variable.
@@ -713,8 +760,7 @@ export class WebGlContextWrapper {
      * @param v3 - The fourth component of the vector.
      */
     uniform4i(location, v0, v1, v2, v3) {
-        const { gl } = this;
-        gl.uniform4i(location, v0, v1, v2, v3);
+        this.gl.uniform4i(this.curUniformLocations[location] || null, v0, v1, v2, v3);
     }
     /**
      * Sets the value of an ivec4 array uniform variable.
@@ -723,8 +769,7 @@ export class WebGlContextWrapper {
      * @param value - The array of ivec4 values to set.
      */
     uniform4iv(location, value) {
-        const { gl } = this;
-        gl.uniform4iv(location, value);
+        this.gl.uniform4iv(this.curUniformLocations[location] || null, value);
     }
     /**
      * Sets the value of a mat2 uniform variable.
@@ -734,8 +779,7 @@ export class WebGlContextWrapper {
      * @param value - The array of mat2 values to set.
      */
     uniformMatrix2fv(location, value) {
-        const { gl } = this;
-        gl.uniformMatrix2fv(location, false, value);
+        this.gl.uniformMatrix2fv(this.curUniformLocations[location] || null, false, value);
     }
     /**
      * Sets the value of a mat2 uniform variable.
@@ -743,8 +787,7 @@ export class WebGlContextWrapper {
      * @param value - The array of mat2 values to set.
      */
     uniformMatrix3fv(location, value) {
-        const { gl } = this;
-        gl.uniformMatrix3fv(location, false, value);
+        this.gl.uniformMatrix3fv(this.curUniformLocations[location] || null, false, value);
     }
     /**
      * Sets the value of a mat4 uniform variable.
@@ -752,8 +795,7 @@ export class WebGlContextWrapper {
      * @param value - The array of mat4 values to set.
      */
     uniformMatrix4fv(location, value) {
-        const { gl } = this;
-        gl.uniformMatrix4fv(location, false, value);
+        this.gl.uniformMatrix4fv(this.curUniformLocations[location] || null, false, value);
     }
     /**
      * ```
@@ -764,8 +806,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getParameter(pname) {
-        const { gl } = this;
-        return gl.getParameter(pname);
+        return this.gl.getParameter(pname);
     }
     /**
      * ```
@@ -778,8 +819,19 @@ export class WebGlContextWrapper {
      * @param offset
      */
     drawElements(mode, count, type, offset) {
-        const { gl } = this;
-        gl.drawElements(mode, count, type, offset);
+        this.gl.drawElements(mode, count, type, offset);
+    }
+    /**
+     * ```
+     * gl.drawArrays(mode, first, count);
+     * ```
+     *
+     * @param mode
+     * @param first
+     * @param count
+     */
+    drawArrays(mode, first, count) {
+        this.gl.drawArrays(mode, first, count);
     }
     /**
      * ```
@@ -790,8 +842,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getExtension(name) {
-        const { gl } = this;
-        return gl.getExtension(name);
+        return this.gl.getExtension(name);
     }
     /**
      * ```
@@ -801,8 +852,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getError() {
-        const { gl } = this;
-        return gl.getError();
+        return this.gl.getError();
     }
     /**
      * ```
@@ -812,9 +862,10 @@ export class WebGlContextWrapper {
      * @returns
      */
     createVertexArray() {
-        const { gl } = this;
-        assertTruthy(gl instanceof WebGL2RenderingContext);
-        return gl.createVertexArray();
+        if (this.gl instanceof WebGL2RenderingContext) {
+            return this.gl.createVertexArray();
+        }
+        return undefined;
     }
     /**
      * ```
@@ -824,9 +875,9 @@ export class WebGlContextWrapper {
      * @param vertexArray
      */
     bindVertexArray(vertexArray) {
-        const { gl } = this;
-        assertTruthy(gl instanceof WebGL2RenderingContext);
-        gl.bindVertexArray(vertexArray);
+        if (this.gl instanceof WebGL2RenderingContext) {
+            this.gl.bindVertexArray(vertexArray);
+        }
     }
     /**
      * ```
@@ -838,8 +889,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getAttribLocation(program, name) {
-        const { gl } = this;
-        return gl.getAttribLocation(program, name);
+        return this.gl.getAttribLocation(program, name);
     }
     /**
      * ```
@@ -851,8 +901,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getUniformLocation(program, name) {
-        const { gl } = this;
-        return gl.getUniformLocation(program, name);
+        return this.gl.getUniformLocation(program, name);
     }
     /**
      * ```
@@ -862,8 +911,7 @@ export class WebGlContextWrapper {
      * @param index
      */
     enableVertexAttribArray(index) {
-        const { gl } = this;
-        gl.enableVertexAttribArray(index);
+        this.gl.enableVertexAttribArray(index);
     }
     /**
      * ```
@@ -873,8 +921,7 @@ export class WebGlContextWrapper {
      * @param index
      */
     disableVertexAttribArray(index) {
-        const { gl } = this;
-        gl.disableVertexAttribArray(index);
+        this.gl.disableVertexAttribArray(index);
     }
     /**
      * ```
@@ -885,8 +932,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     createShader(type) {
-        const { gl } = this;
-        return gl.createShader(type);
+        return this.gl.createShader(type);
     }
     /**
      * ```
@@ -897,8 +943,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     compileShader(shader) {
-        const { gl } = this;
-        gl.compileShader(shader);
+        this.gl.compileShader(shader);
     }
     /**
      * ```
@@ -909,8 +954,7 @@ export class WebGlContextWrapper {
      * @param shader
      */
     attachShader(program, shader) {
-        const { gl } = this;
-        gl.attachShader(program, shader);
+        this.gl.attachShader(program, shader);
     }
     /**
      * ```
@@ -920,8 +964,7 @@ export class WebGlContextWrapper {
      * @param program
      */
     linkProgram(program) {
-        const { gl } = this;
-        gl.linkProgram(program);
+        this.gl.linkProgram(program);
     }
     /**
      * ```
@@ -931,8 +974,7 @@ export class WebGlContextWrapper {
      * @param shader
      */
     deleteProgram(shader) {
-        const { gl } = this;
-        gl.deleteProgram(shader);
+        this.gl.deleteProgram(shader);
     }
     /**
      * ```
@@ -943,8 +985,7 @@ export class WebGlContextWrapper {
      * @param pname
      */
     getShaderParameter(shader, pname) {
-        const { gl } = this;
-        return gl.getShaderParameter(shader, pname);
+        return this.gl.getShaderParameter(shader, pname);
     }
     /**
      * ```
@@ -954,8 +995,7 @@ export class WebGlContextWrapper {
      * @param shader
      */
     getShaderInfoLog(shader) {
-        const { gl } = this;
-        return gl.getShaderInfoLog(shader);
+        return this.gl.getShaderInfoLog(shader);
     }
     /**
      * ```
@@ -965,8 +1005,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     createProgram() {
-        const { gl } = this;
-        return gl.createProgram();
+        return this.gl.createProgram();
     }
     /**
      * ```
@@ -978,8 +1017,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getProgramParameter(program, pname) {
-        const { gl } = this;
-        return gl.getProgramParameter(program, pname);
+        return this.gl.getProgramParameter(program, pname);
     }
     /**
      * ```
@@ -990,8 +1028,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getProgramInfoLog(program) {
-        const { gl } = this;
-        return gl.getProgramInfoLog(program);
+        return this.gl.getProgramInfoLog(program);
     }
     /**
      * ```
@@ -1002,8 +1039,7 @@ export class WebGlContextWrapper {
      * @param source
      */
     shaderSource(shader, source) {
-        const { gl } = this;
-        gl.shaderSource(shader, source);
+        this.gl.shaderSource(shader, source);
     }
     /**
      * ```
@@ -1013,8 +1049,66 @@ export class WebGlContextWrapper {
      * @param shader
      */
     deleteShader(shader) {
+        this.gl.deleteShader(shader);
+    }
+    /**
+     * ```
+     * gl.deleteBuffer(buffer);
+     * ```
+     *
+     * @param buffer - The buffer to delete
+     */
+    deleteBuffer(buffer) {
         const { gl } = this;
-        gl.deleteShader(shader);
+        gl.deleteBuffer(buffer);
+        // Reset bound buffers if they match the deleted buffer
+        if (this.boundArrayBuffer === buffer) {
+            this.boundArrayBuffer = null;
+        }
+    }
+    /**
+     * ```
+     * gl.deleteVertexArray(vertexArray);
+     * ```
+     *
+     * @param vertexArray - The vertex array object to delete
+     */
+    deleteVertexArray(vertexArray) {
+        if (this.isWebGl2()) {
+            this.gl.deleteVertexArray(vertexArray);
+        }
+    }
+    /**
+     * Check for WebGL errors and return error information
+     * @param operation Description of the operation for error reporting
+     * @returns Object with error information or null if no error
+     */
+    checkError(operation) {
+        const error = this.getError();
+        if (error !== 0) {
+            // 0 is GL_NO_ERROR
+            let errorName = 'UNKNOWN_ERROR';
+            switch (error) {
+                case this.INVALID_ENUM:
+                    errorName = 'INVALID_ENUM';
+                    break;
+                case 0x0501: // GL_INVALID_VALUE
+                    errorName = 'INVALID_VALUE';
+                    break;
+                case this.INVALID_OPERATION:
+                    errorName = 'INVALID_OPERATION';
+                    break;
+                case 0x0505: // GL_OUT_OF_MEMORY
+                    errorName = 'OUT_OF_MEMORY';
+                    break;
+                case 0x9242: // GL_CONTEXT_LOST_WEBGL
+                    errorName = 'CONTEXT_LOST_WEBGL';
+                    break;
+            }
+            const message = `WebGL ${errorName} (0x${error.toString(16)}) during ${operation}`;
+            return { error, errorName, message };
+        }
+        return null;
     }
 }
 /**