@lightningjs/renderer 3.0.2 → 3.0.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;
@@ -178,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;
         }
     }
@@ -194,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];
     }
     /**
      * ```
@@ -217,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);
         }
     }
     /**
@@ -251,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);
     }
     /**
      * ```
@@ -263,8 +258,7 @@ export class WebGlContextWrapper {
      * @param param
      */
     pixelStorei(pname, param) {
-        const { gl } = this;
-        gl.pixelStorei(pname, param);
+        this.gl.pixelStorei(pname, param);
     }
     /**
      * ```
@@ -275,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);
     }
     /**
      * ```
@@ -286,8 +279,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     createTexture() {
-        const { gl } = this;
-        return gl.createTexture();
+        return this.gl.createTexture();
     }
     /**
      * ```
@@ -297,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);
     }
     /**
      * ```
@@ -318,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);
     }
     /**
      * ```
@@ -332,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);
     }
     /**
      * ```
@@ -342,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;
     }
@@ -365,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;
@@ -386,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;
     }
@@ -407,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;
@@ -427,8 +412,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     createBuffer() {
-        const { gl } = this;
-        return gl.createBuffer();
+        return this.gl.createBuffer();
     }
     /**
      * ```
@@ -437,8 +421,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     createFramebuffer() {
-        const { gl } = this;
-        return gl.createFramebuffer();
+        return this.gl.createFramebuffer();
     }
     /**
      * ```
@@ -448,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);
     }
     /**
      * ```
@@ -459,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);
     }
     /**
@@ -471,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);
     }
     /**
      * ```
@@ -488,12 +469,11 @@ 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);
     }
     /**
      * ```
@@ -508,12 +488,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);
     }
     /**
      * ```
@@ -533,12 +512,11 @@ 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
@@ -581,13 +559,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.
@@ -596,8 +574,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.
@@ -606,8 +583,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.
@@ -616,8 +592,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.
@@ -626,8 +601,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.
@@ -637,8 +611,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.
@@ -647,8 +629,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.
@@ -658,8 +639,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.
@@ -668,8 +648,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.
@@ -680,8 +659,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.
@@ -690,8 +677,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.
@@ -702,8 +688,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.
@@ -712,8 +697,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.
@@ -725,8 +709,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.
@@ -735,8 +727,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.
@@ -748,8 +739,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.
@@ -758,8 +748,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.
@@ -769,8 +758,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.
@@ -778,8 +766,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.
@@ -787,8 +774,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);
     }
     /**
      * ```
@@ -799,8 +785,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getParameter(pname) {
-        const { gl } = this;
-        return gl.getParameter(pname);
+        return this.gl.getParameter(pname);
     }
     /**
      * ```
@@ -813,8 +798,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);
     }
     /**
      * ```
@@ -825,8 +821,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getExtension(name) {
-        const { gl } = this;
-        return gl.getExtension(name);
+        return this.gl.getExtension(name);
     }
     /**
      * ```
@@ -836,8 +831,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getError() {
-        const { gl } = this;
-        return gl.getError();
+        return this.gl.getError();
     }
     /**
      * ```
@@ -847,9 +841,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;
     }
     /**
      * ```
@@ -859,9 +854,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);
+        }
     }
     /**
      * ```
@@ -873,8 +868,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getAttribLocation(program, name) {
-        const { gl } = this;
-        return gl.getAttribLocation(program, name);
+        return this.gl.getAttribLocation(program, name);
     }
     /**
      * ```
@@ -886,8 +880,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getUniformLocation(program, name) {
-        const { gl } = this;
-        return gl.getUniformLocation(program, name);
+        return this.gl.getUniformLocation(program, name);
     }
     /**
      * ```
@@ -897,8 +890,7 @@ export class WebGlContextWrapper {
      * @param index
      */
     enableVertexAttribArray(index) {
-        const { gl } = this;
-        gl.enableVertexAttribArray(index);
+        this.gl.enableVertexAttribArray(index);
     }
     /**
      * ```
@@ -908,8 +900,7 @@ export class WebGlContextWrapper {
      * @param index
      */
     disableVertexAttribArray(index) {
-        const { gl } = this;
-        gl.disableVertexAttribArray(index);
+        this.gl.disableVertexAttribArray(index);
     }
     /**
      * ```
@@ -920,8 +911,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     createShader(type) {
-        const { gl } = this;
-        return gl.createShader(type);
+        return this.gl.createShader(type);
     }
     /**
      * ```
@@ -932,8 +922,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     compileShader(shader) {
-        const { gl } = this;
-        gl.compileShader(shader);
+        this.gl.compileShader(shader);
     }
     /**
      * ```
@@ -944,8 +933,7 @@ export class WebGlContextWrapper {
      * @param shader
      */
     attachShader(program, shader) {
-        const { gl } = this;
-        gl.attachShader(program, shader);
+        this.gl.attachShader(program, shader);
     }
     /**
      * ```
@@ -955,8 +943,7 @@ export class WebGlContextWrapper {
      * @param program
      */
     linkProgram(program) {
-        const { gl } = this;
-        gl.linkProgram(program);
+        this.gl.linkProgram(program);
     }
     /**
      * ```
@@ -966,8 +953,7 @@ export class WebGlContextWrapper {
      * @param shader
      */
     deleteProgram(shader) {
-        const { gl } = this;
-        gl.deleteProgram(shader);
+        this.gl.deleteProgram(shader);
     }
     /**
      * ```
@@ -978,8 +964,7 @@ export class WebGlContextWrapper {
      * @param pname
      */
     getShaderParameter(shader, pname) {
-        const { gl } = this;
-        return gl.getShaderParameter(shader, pname);
+        return this.gl.getShaderParameter(shader, pname);
     }
     /**
      * ```
@@ -989,8 +974,7 @@ export class WebGlContextWrapper {
      * @param shader
      */
     getShaderInfoLog(shader) {
-        const { gl } = this;
-        return gl.getShaderInfoLog(shader);
+        return this.gl.getShaderInfoLog(shader);
     }
     /**
      * ```
@@ -1000,8 +984,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     createProgram() {
-        const { gl } = this;
-        return gl.createProgram();
+        return this.gl.createProgram();
     }
     /**
      * ```
@@ -1013,8 +996,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getProgramParameter(program, pname) {
-        const { gl } = this;
-        return gl.getProgramParameter(program, pname);
+        return this.gl.getProgramParameter(program, pname);
     }
     /**
      * ```
@@ -1025,8 +1007,7 @@ export class WebGlContextWrapper {
      * @returns
      */
     getProgramInfoLog(program) {
-        const { gl } = this;
-        return gl.getProgramInfoLog(program);
+        return this.gl.getProgramInfoLog(program);
     }
     /**
      * ```
@@ -1037,8 +1018,7 @@ export class WebGlContextWrapper {
      * @param source
      */
     shaderSource(shader, source) {
-        const { gl } = this;
-        gl.shaderSource(shader, source);
+        this.gl.shaderSource(shader, source);
     }
     /**
      * ```
@@ -1048,8 +1028,34 @@ 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