@lightningjs/renderer 0.6.1 → 0.7.0

package/src/core/renderers/webgl/WebGlCoreCtxSubTexture.ts

@@ -18,12 +18,13 @@
  */
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
+import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { SubTexture } from '../../textures/SubTexture.js';
 import { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
 
 export class WebGlCoreCtxSubTexture extends WebGlCoreCtxTexture {
-  constructor(gl: WebGLRenderingContext, textureSource: SubTexture) {
-    super(gl, textureSource);
+  constructor(glw: WebGlContextWrapper, textureSource: SubTexture) {
+    super(glw, textureSource);
   }
 
   override async onLoadRequest(): Promise<Dimensions> {

package/src/core/renderers/webgl/WebGlCoreCtxTexture.ts

@@ -19,10 +19,10 @@
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import { assertTruthy } from '../../../utils.js';
+import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import type { Texture } from '../../textures/Texture.js';
 import { isPowerOfTwo } from '../../utils.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
-import { isWebGl2 } from './internal/WebGlUtils.js';
 
 const TRANSPARENT_TEXTURE_DATA = new Uint8Array([0, 0, 0, 0]);
 
@@ -43,7 +43,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
   private _w = 0;
   private _h = 0;
 
-  constructor(protected gl: WebGLRenderingContext, textureSource: Texture) {
+  constructor(protected glw: WebGlContextWrapper, textureSource: Texture) {
     super(textureSource);
   }
 
@@ -100,30 +100,29 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
    */
   async onLoadRequest(): Promise<Dimensions> {
     this._nativeCtxTexture = this.createNativeCtxTexture();
-    const { gl } = this;
+    const { glw } = this;
 
     // On initial load request, create a 1x1 transparent texture to use until
     // the texture data is finally loaded.
-    gl.bindTexture(gl.TEXTURE_2D, this._nativeCtxTexture);
+    glw.activeTexture(0);
+    glw.bindTexture(this._nativeCtxTexture);
 
     // linear texture filtering
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
+    glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
 
     // texture wrapping method
-    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);
+    glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
+    glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
 
-    gl.bindTexture(gl.TEXTURE_2D, this._nativeCtxTexture);
-    gl.texImage2D(
-      gl.TEXTURE_2D,
+    glw.texImage2D(
       0,
-      gl.RGBA,
+      glw.RGBA,
       1,
       1,
       0,
-      gl.RGBA,
-      gl.UNSIGNED_BYTE,
+      glw.RGBA,
+      glw.UNSIGNED_BYTE,
       TRANSPARENT_TEXTURE_DATA,
     );
 
@@ -131,6 +130,7 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     let width = 0;
     let height = 0;
     assertTruthy(this._nativeCtxTexture);
+    glw.activeTexture(0);
     // If textureData is null, the texture is empty (0, 0) and we don't need to
     // upload any data to the GPU.
     if (
@@ -140,33 +140,32 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
       const data = textureData.data;
       width = data.width;
       height = data.height;
-      gl.bindTexture(gl.TEXTURE_2D, this._nativeCtxTexture);
+      glw.bindTexture(this._nativeCtxTexture);
 
-      gl.pixelStorei(
-        gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL,
+      glw.pixelStorei(
+        glw.UNPACK_PREMULTIPLY_ALPHA_WEBGL,
         !!textureData.premultiplyAlpha,
       );
 
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, data);
+      glw.texImage2D(0, glw.RGBA, glw.RGBA, glw.UNSIGNED_BYTE, data);
 
       // generate mipmaps for power-of-2 textures or in WebGL2RenderingContext
-      if (isWebGl2(gl) || (isPowerOfTwo(width) && isPowerOfTwo(height))) {
-        gl.generateMipmap(gl.TEXTURE_2D);
+      if (glw.isWebGl2() || (isPowerOfTwo(width) && isPowerOfTwo(height))) {
+        glw.generateMipmap();
       }
     } else if (textureData.data === null) {
       width = 0;
       height = 0;
       // Reset to a 1x1 transparent texture
-      gl.bindTexture(gl.TEXTURE_2D, this._nativeCtxTexture);
-      gl.texImage2D(
-        gl.TEXTURE_2D,
+      glw.bindTexture(this._nativeCtxTexture);
+      glw.texImage2D(
         0,
-        gl.RGBA,
+        glw.RGBA,
         1,
         1,
         0,
-        gl.RGBA,
-        gl.UNSIGNED_BYTE,
+        glw.RGBA,
+        glw.UNSIGNED_BYTE,
         TRANSPARENT_TEXTURE_DATA,
       );
     } else {
@@ -196,12 +195,14 @@ export class WebGlCoreCtxTexture extends CoreContextTexture {
     if (!this._nativeCtxTexture) {
       return;
     }
-    this.gl.deleteTexture(this._nativeCtxTexture);
+    const { glw } = this;
+    glw.deleteTexture(this._nativeCtxTexture);
     this._nativeCtxTexture = null;
   }
 
   private createNativeCtxTexture() {
-    const nativeTexture = this.gl.createTexture();
+    const { glw } = this;
+    const nativeTexture = glw.createTexture();
     if (!nativeTexture) {
       throw new Error('Could not create WebGL Texture');
     }

package/src/core/renderers/webgl/WebGlCoreRenderOp.ts

@@ -24,6 +24,7 @@ import type { WebGlCoreRendererOptions } from './WebGlCoreRenderer.js';
 import type { BufferCollection } from './internal/BufferCollection.js';
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import type { Rect } from '../../lib/utils.js';
+import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 
 const MAX_TEXTURES = 8; // TODO: get from gl
 
@@ -38,7 +39,7 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
   readonly maxTextures: number;
 
   constructor(
-    readonly gl: WebGLRenderingContext | WebGL2RenderingContext,
+    readonly glw: WebGlContextWrapper,
     readonly options: WebGlCoreRendererOptions,
     readonly buffers: BufferCollection,
     readonly shader: WebGlCoreShader,
@@ -50,9 +51,8 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
     readonly zIndex: number,
   ) {
     super();
-    this.gl = gl;
     this.maxTextures = shader.supportsIndexedTextures
-      ? (gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS) as number)
+      ? (glw.getParameter(glw.MAX_VERTEX_TEXTURE_IMAGE_UNITS) as number)
       : 1;
   }
 
@@ -71,7 +71,7 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
   }
 
   draw() {
-    const { gl, shader, shaderProps, options } = this;
+    const { glw, shader, shaderProps, options } = this;
     // shaderOp.draw(this);
 
     const { shManager } = options;
@@ -81,10 +81,6 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
     // TODO: Reduce calculations required
     const quadIdx = (this.bufferIdx / 24) * 6 * 2;
 
-    // TODO: Move these somewhere else?
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-
     // Clipping
     if (this.clippingRect) {
       const { x, y, width, height } = this.clippingRect;
@@ -95,16 +91,16 @@ export class WebGlCoreRenderOp extends CoreRenderOp {
       const clipWidth = Math.round(width * pixelRatio);
       const clipHeight = Math.round(height * pixelRatio);
       const clipY = Math.round(canvasHeight - clipHeight - y * pixelRatio);
-      gl.enable(gl.SCISSOR_TEST);
-      gl.scissor(clipX, clipY, clipWidth, clipHeight);
+      glw.setScissorTest(true);
+      glw.scissor(clipX, clipY, clipWidth, clipHeight);
     } else {
-      gl.disable(gl.SCISSOR_TEST);
+      glw.setScissorTest(false);
     }
 
-    gl.drawElements(
-      gl.TRIANGLES,
+    glw.drawElements(
+      glw.TRIANGLES,
       6 * this.numQuads,
-      gl.UNSIGNED_SHORT,
+      glw.UNSIGNED_SHORT,
       quadIdx,
     );
   }

package/src/core/renderers/webgl/WebGlCoreRenderer.ts

@@ -54,6 +54,8 @@ import {
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import { WebGlCoreShader } from './WebGlCoreShader.js';
 import { RoundedRectangle } from './shaders/RoundedRectangle.js';
+import { ContextSpy } from '../../lib/ContextSpy.js';
+import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 
 const WORDS_PER_QUAD = 24;
 const BYTES_PER_QUAD = WORDS_PER_QUAD * 4;
@@ -66,6 +68,7 @@ export interface WebGlCoreRendererOptions {
   shManager: CoreShaderManager;
   clearColor: number;
   bufferMemory: number;
+  contextSpy: ContextSpy | null;
 }
 
 interface CoreWebGlSystem {
@@ -75,7 +78,7 @@ interface CoreWebGlSystem {
 
 export class WebGlCoreRenderer extends CoreRenderer {
   //// WebGL Native Context and Data
-  gl: WebGLRenderingContext;
+  glw: WebGlContextWrapper;
   system: CoreWebGlSystem;
 
   //// Core Managers
@@ -113,25 +116,24 @@ export class WebGlCoreRenderer extends CoreRenderer {
     this.shManager = options.shManager;
     this.defaultTexture = new ColorTexture(this.txManager);
 
-    const gl = createWebGLContext(canvas);
-    if (!gl) {
-      throw new Error('Unable to create WebGL context');
-    }
-    this.gl = gl;
+    const gl = createWebGLContext(canvas, options.contextSpy);
+    const glw = (this.glw = new WebGlContextWrapper(gl));
 
     const color = getNormalizedRgbaComponents(clearColor);
-    gl.viewport(0, 0, canvas.width, canvas.height);
-    gl.clearColor(color[0]!, color[1]!, color[2]!, color[3]!);
+    glw.viewport(0, 0, canvas.width, canvas.height);
+    glw.clearColor(color[0]!, color[1]!, color[2]!, color[3]!);
+    glw.setBlend(true);
+    glw.blendFunc(glw.ONE, glw.ONE_MINUS_SRC_ALPHA);
 
-    createIndexBuffer(gl, bufferMemory);
+    createIndexBuffer(glw, bufferMemory);
 
     this.system = {
-      parameters: getWebGlParameters(gl),
-      extensions: getWebGlExtensions(gl),
+      parameters: getWebGlParameters(this.glw),
+      extensions: getWebGlExtensions(this.glw),
     };
     this.shManager.renderer = this;
     this.defaultShader = this.shManager.loadShader('DefaultShader').shader;
-    const quadBuffer = gl.createBuffer();
+    const quadBuffer = glw.createBuffer();
     assertTruthy(quadBuffer);
     const stride = 6 * Float32Array.BYTES_PER_ELEMENT;
     this.quadBufferCollection = new BufferCollection([
@@ -141,7 +143,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
           a_position: {
             name: 'a_position',
             size: 2, // 2 components per iteration
-            type: gl.FLOAT, // the data is 32bit floats
+            type: glw.FLOAT, // the data is 32bit floats
             normalized: false, // don't normalize the data
             stride, // 0 = move forward size * sizeof(type) each iteration to get the next position
             offset: 0, // start at the beginning of the buffer
@@ -149,7 +151,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
           a_textureCoordinate: {
             name: 'a_textureCoordinate',
             size: 2,
-            type: gl.FLOAT,
+            type: glw.FLOAT,
             normalized: false,
             stride,
             offset: 2 * Float32Array.BYTES_PER_ELEMENT,
@@ -157,7 +159,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
           a_color: {
             name: 'a_color',
             size: 4,
-            type: gl.UNSIGNED_BYTE,
+            type: glw.UNSIGNED_BYTE,
             normalized: true,
             stride,
             offset: 4 * Float32Array.BYTES_PER_ELEMENT,
@@ -165,7 +167,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
           a_textureIndex: {
             name: 'a_textureIndex',
             size: 1,
-            type: gl.FLOAT,
+            type: glw.FLOAT,
             normalized: false,
             stride,
             offset: 5 * Float32Array.BYTES_PER_ELEMENT,
@@ -176,11 +178,12 @@ export class WebGlCoreRenderer extends CoreRenderer {
   }
 
   reset() {
+    const { glw } = this;
     this.curBufferIdx = 0;
     this.curRenderOp = null;
     this.renderOps.length = 0;
-    this.gl.disable(this.gl.SCISSOR_TEST);
-    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+    glw.setScissorTest(false);
+    glw.clear();
   }
 
   override getShaderManager(): CoreShaderManager {
@@ -189,9 +192,9 @@ export class WebGlCoreRenderer extends CoreRenderer {
 
   override createCtxTexture(textureSource: Texture): CoreContextTexture {
     if (textureSource instanceof SubTexture) {
-      return new WebGlCoreCtxSubTexture(this.gl, textureSource);
+      return new WebGlCoreCtxSubTexture(this.glw, textureSource);
     }
-    return new WebGlCoreCtxTexture(this.gl, textureSource);
+    return new WebGlCoreCtxTexture(this.glw, textureSource);
   }
 
   /**
@@ -413,7 +416,7 @@ export class WebGlCoreRenderer extends CoreRenderer {
     bufferIdx: number,
   ) {
     const curRenderOp = new WebGlCoreRenderOp(
-      this.gl,
+      this.glw,
       this.options,
       this.quadBufferCollection,
       shader,
@@ -485,13 +488,12 @@ export class WebGlCoreRenderer extends CoreRenderer {
    * @param surface
    */
   render(surface: 'screen' | CoreContextTexture = 'screen'): void {
-    const { gl, quadBuffer } = this;
+    const { glw, quadBuffer } = this;
 
     const arr = new Float32Array(quadBuffer, 0, this.curBufferIdx);
 
     const buffer = this.quadBufferCollection.getBuffer('a_position') ?? null;
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, arr, gl.DYNAMIC_DRAW);
+    glw.arrayBufferData(buffer, arr, glw.STATIC_DRAW);
 
     const doLog = false; // idx++ % 100 === 0;
     if (doLog) {

package/src/core/renderers/webgl/WebGlCoreShader.ts

@@ -19,6 +19,7 @@
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import { assertTruthy, hasOwn } from '../../../utils.js';
+import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import { CoreShader } from '../CoreShader.js';
 import type { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
 import type { WebGlCoreRenderOp } from './WebGlCoreRenderOp.js';
@@ -76,7 +77,7 @@ export abstract class WebGlCoreShader extends CoreShader {
    */
   protected vao: WebGLVertexArrayObject | undefined;
   protected renderer: WebGlCoreRenderer;
-  protected gl: WebGLRenderingContext;
+  protected glw: WebGlContextWrapper;
   protected attributeBuffers: Record<string, WebGLBuffer>;
   protected attributeLocations: Record<string, number>;
   protected attributeNames: string[];
@@ -87,18 +88,18 @@ export abstract class WebGlCoreShader extends CoreShader {
   constructor(options: ShaderOptions) {
     super();
     const renderer = (this.renderer = options.renderer);
-    const gl = (this.gl = this.renderer.gl);
+    const glw = (this.glw = this.renderer.glw);
     this.supportsIndexedTextures = options.supportsIndexedTextures || false;
 
     // Check that extensions are supported
-    const webGl2 = isWebGl2(gl);
+    const webGl2 = glw.isWebGl2();
     const requiredExtensions =
       (webGl2 && options.webgl2Extensions) ||
       (!webGl2 && options.webgl1Extensions) ||
       [];
     const glVersion = webGl2 ? '2.0' : '1.0';
     requiredExtensions.forEach((extensionName) => {
-      if (!gl.getExtension(extensionName)) {
+      if (!glw.getExtension(extensionName)) {
         throw new Error(
           `Shader "${this.constructor.name}" requires extension "${extensionName}" for WebGL ${glVersion} but wasn't found`,
         );
@@ -136,26 +137,30 @@ export abstract class WebGlCoreShader extends CoreShader {
         ? shaderSources.fragment(textureUnits)
         : shaderSources.fragment;
 
-    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
-    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+    const vertexShader = createShader(glw, glw.VERTEX_SHADER, vertexSource);
+    const fragmentShader = createShader(
+      glw,
+      glw.FRAGMENT_SHADER,
+      fragmentSource,
+    );
     if (!vertexShader || !fragmentShader) {
       throw new Error();
     }
 
-    const program = createProgram(gl, vertexShader, fragmentShader);
+    const program = createProgram(glw, vertexShader, fragmentShader);
     if (!program) {
       throw new Error();
     }
     this.program = program;
 
     if (webGl2) {
-      const vao = gl.createVertexArray();
+      const vao = glw.createVertexArray();
       if (!vao) {
         throw new Error();
       }
       this.vao = vao;
 
-      gl.bindVertexArray(this.vao);
+      glw.bindVertexArray(this.vao);
     }
 
     this.attributeLocations = {} as Record<string, number>;
@@ -163,13 +168,13 @@ export abstract class WebGlCoreShader extends CoreShader {
     this.attributeNames = [];
 
     [...options.attributes].forEach((attributeName) => {
-      const location = gl.getAttribLocation(this.program, attributeName);
+      const location = glw.getAttribLocation(this.program, attributeName);
       if (location < 0) {
         throw new Error(
           `${this.constructor.name}: Vertex shader must have an attribute "${attributeName}"!`,
         );
       }
-      const buffer = gl.createBuffer();
+      const buffer = glw.createBuffer();
       if (!buffer) {
         throw new Error(
           `${this.constructor.name}: Could not create buffer for attribute "${attributeName}"`,
@@ -184,7 +189,7 @@ export abstract class WebGlCoreShader extends CoreShader {
     this.uniformLocations = {} as Record<string, WebGLRenderingContext>;
     this.uniformTypes = {} as Record<string, keyof UniformMethodMap>;
     options.uniforms.forEach((uniform: UniformInfo) => {
-      const location = gl.getUniformLocation(this.program, uniform.name);
+      const location = glw.getUniformLocation(this.program, uniform.name);
       this.uniformTypes[uniform.name] = uniform.uniform;
       if (!location) {
         console.warn(
@@ -201,12 +206,11 @@ export abstract class WebGlCoreShader extends CoreShader {
     buffer: WebGLBuffer,
     attribute: AttributeInfo,
   ) {
-    const gl = this.gl;
-    gl.enableVertexAttribArray(location);
-
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+    const { glw } = this;
+    glw.enableVertexAttribArray(location);
 
-    gl.vertexAttribPointer(
+    glw.vertexAttribPointer(
+      buffer,
       location,
       attribute.size,
       attribute.type,
@@ -217,7 +221,7 @@ export abstract class WebGlCoreShader extends CoreShader {
   }
 
   disableAttribute(location: number) {
-    this.gl.disableVertexAttribArray(location);
+    this.glw.disableVertexAttribArray(location);
   }
 
   disableAttributes() {
@@ -257,9 +261,9 @@ export abstract class WebGlCoreShader extends CoreShader {
     if (renderOp.textures.length > 0) {
       this.bindTextures(renderOp.textures);
     }
-    const { gl } = renderOp;
+    const { glw } = renderOp;
     // Bind standard automatic uniforms
-    this.setUniform('u_resolution', [gl.canvas.width, gl.canvas.height]); // !!!
+    this.setUniform('u_resolution', [glw.canvas.width, glw.canvas.height]);
     this.setUniform('u_pixelRatio', renderOp.options.pixelRatio);
     if (props) {
       // Bind optional automatic uniforms
@@ -283,8 +287,12 @@ export abstract class WebGlCoreShader extends CoreShader {
   }
 
   setUniform(name: string, ...value: any[]): void {
-    // @ts-expect-error Typing of args is too funky apparently for TS
-    this.gl[this.uniformTypes[name]](this.uniformLocations[name], ...value);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-unsafe-argument
+    this.glw.setUniform(
+      this.uniformTypes[name]!,
+      this.uniformLocations[name]!,
+      ...(value as any),
+    );
   }
 
   bindBufferCollection(buffer: BufferCollection) {
@@ -314,9 +322,10 @@ export abstract class WebGlCoreShader extends CoreShader {
   }
 
   override attach(): void {
-    this.gl.useProgram(this.program);
-    if (isWebGl2(this.gl) && this.vao) {
-      this.gl.bindVertexArray(this.vao);
+    this.glw.useProgram(this.program);
+    this.glw.useProgram(this.program);
+    if (this.glw.isWebGl2() && this.vao) {
+      this.glw.bindVertexArray(this.vao);
     }
   }
 

package/src/core/renderers/webgl/internal/RendererUtils.ts

@@ -17,6 +17,8 @@
  * limitations under the License.
  */
 
+import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
+
 export interface CoreWebGlParameters {
   MAX_RENDERBUFFER_SIZE: number;
   MAX_TEXTURE_SIZE: number;
@@ -32,10 +34,10 @@ export interface CoreWebGlParameters {
 
 /**
  * Get device specific webgl parameters
- * @param gl
+ * @param glw
  */
 export function getWebGlParameters(
-  gl: WebGLRenderingContext | WebGL2RenderingContext,
+  glw: WebGlContextWrapper,
 ): CoreWebGlParameters {
   const params: CoreWebGlParameters = {
     MAX_RENDERBUFFER_SIZE: 0,
@@ -55,7 +57,7 @@ export function getWebGlParameters(
   const keys = Object.keys(params) as Array<keyof CoreWebGlParameters>;
   keys.forEach((key) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    params[key] = gl.getParameter(gl[key]);
+    params[key] = glw.getParameter(glw[key]);
   });
 
   return params;
@@ -77,10 +79,10 @@ export interface CoreWebGlExtensions {
 
 /**
  * Get device webgl extensions
- * @param gl
+ * @param glw
  */
 export function getWebGlExtensions(
-  gl: WebGLRenderingContext,
+  glw: WebGlContextWrapper,
 ): CoreWebGlExtensions {
   const extensions: CoreWebGlExtensions = {
     ANGLE_instanced_arrays: null,
@@ -98,7 +100,7 @@ export function getWebGlExtensions(
   const keys = Object.keys(extensions) as Array<keyof CoreWebGlExtensions>;
   keys.forEach((key) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    extensions[key] = gl.getExtension(key);
+    extensions[key] = glw.getExtension(key);
   });
 
   return extensions;
@@ -107,15 +109,11 @@ export function getWebGlExtensions(
 /**
  * Allocate big memory chunk that we
  * can re-use to draw quads
+ *
+ * @param glw
  * @param size
  */
-export function createIndexBuffer(
-  gl: WebGLRenderingContext | WebGL2RenderingContext,
-  size: number,
-) {
-  if (!gl) {
-    throw new Error('No WebGL context');
-  }
+export function createIndexBuffer(glw: WebGlContextWrapper, size: number) {
   const maxQuads = ~~(size / 80);
   const indices = new Uint16Array(maxQuads * 6);
 
@@ -128,7 +126,6 @@ export function createIndexBuffer(
     indices[i + 5] = j + 3;
   }
 
-  const buffer = gl.createBuffer();
-  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
-  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+  const buffer = glw.createBuffer();
+  glw.elementArrayBufferData(buffer, indices, glw.STATIC_DRAW);
 }

package/src/core/renderers/webgl/internal/ShaderUtils.ts

@@ -17,6 +17,7 @@
  * limitations under the License.
  */
 
+import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
 import type { WebGlCoreRenderer } from '../WebGlCoreRenderer.js';
 
 //#region Types
@@ -93,43 +94,43 @@ export interface ShaderProgramSources {
 //#endregion Types
 
 export function createShader(
-  gl: WebGLRenderingContext,
+  glw: WebGlContextWrapper,
   type: number,
   source: string,
 ) {
-  const shader = gl.createShader(type);
+  const shader = glw.createShader(type);
   if (!shader) {
     throw new Error();
   }
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-  const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+  glw.shaderSource(shader, source);
+  glw.compileShader(shader);
+  const success = glw.getShaderParameter(shader, glw.COMPILE_STATUS);
   if (success) {
     return shader;
   }
 
-  console.log(gl.getShaderInfoLog(shader));
-  gl.deleteShader(shader);
+  console.log(glw.getShaderInfoLog(shader));
+  glw.deleteShader(shader);
 }
 
 export function createProgram(
-  gl: WebGLRenderingContext,
+  glw: WebGlContextWrapper,
   vertexShader: WebGLShader,
   fragmentShader: WebGLShader,
 ) {
-  const program = gl.createProgram();
+  const program = glw.createProgram();
   if (!program) {
     throw new Error();
   }
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-  const success = gl.getProgramParameter(program, gl.LINK_STATUS);
+  glw.attachShader(program, vertexShader);
+  glw.attachShader(program, fragmentShader);
+  glw.linkProgram(program);
+  const success = glw.getProgramParameter(program, glw.LINK_STATUS);
   if (success) {
     return program;
   }
 
-  console.log(gl.getProgramInfoLog(program));
-  gl.deleteProgram(program);
+  console.log(glw.getProgramInfoLog(program));
+  glw.deleteProgram(program);
   return undefined;
 }