@lightningjs/renderer 0.6.1 → 0.7.1

package/src/core/lib/utils.ts

@@ -81,6 +81,10 @@ export interface Rect {
   height: number;
 }
 
+export interface RectWithValid extends Rect {
+  valid: boolean;
+}
+
 export interface Bound {
   x1: number;
   y1: number;
@@ -132,12 +136,50 @@ export function intersectBound<T extends Bound = Bound>(
   return createBound(0, 0, 0, 0, intersection);
 }
 
-export function intersectRect(a: Rect, b: Rect): Rect {
+export function boundsOverlap(a: Bound, b: Bound): boolean {
+  return a.x1 < b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1;
+}
+
+export function convertBoundToRect(bound: Bound): Rect;
+export function convertBoundToRect<T extends Rect = Rect>(
+  bound: Bound,
+  out: T,
+): T;
+export function convertBoundToRect(bound: Bound, out?: Rect): Rect {
+  if (out) {
+    out.x = bound.x1;
+    out.y = bound.y1;
+    out.width = bound.x2 - bound.x1;
+    out.height = bound.y2 - bound.y1;
+    return out;
+  }
+  return {
+    x: bound.x1,
+    y: bound.y1,
+    width: bound.x2 - bound.x1,
+    height: bound.y2 - bound.y1,
+  };
+}
+
+export function intersectRect(a: Rect, b: Rect): Rect;
+export function intersectRect<T extends Rect = Rect>(
+  a: Rect,
+  b: Rect,
+  out: T,
+): T;
+export function intersectRect(a: Rect, b: Rect, out?: Rect): Rect {
   const x = Math.max(a.x, b.x);
   const y = Math.max(a.y, b.y);
   const width = Math.min(a.x + a.width, b.x + b.width) - x;
   const height = Math.min(a.y + a.height, b.y + b.height) - y;
   if (width > 0 && height > 0) {
+    if (out) {
+      out.x = x;
+      out.y = y;
+      out.width = width;
+      out.height = height;
+      return out;
+    }
     return {
       x,
       y,
@@ -145,6 +187,13 @@ export function intersectRect(a: Rect, b: Rect): Rect {
       height,
     };
   }
+  if (out) {
+    out.x = 0;
+    out.y = 0;
+    out.width = 0;
+    out.height = 0;
+    return out;
+  }
   return {
     x: 0,
     y: 0,
@@ -153,6 +202,24 @@ export function intersectRect(a: Rect, b: Rect): Rect {
   };
 }
 
+export function copyRect(a: Rect): Rect;
+export function copyRect<T extends Rect = Rect>(a: Rect, out: T): T;
+export function copyRect(a: Rect, out?: Rect): Rect {
+  if (out) {
+    out.x = a.x;
+    out.y = a.y;
+    out.width = a.width;
+    out.height = a.height;
+    return out;
+  }
+  return {
+    x: a.x,
+    y: a.y,
+    width: a.width,
+    height: a.height,
+  };
+}
+
 export function compareRect(a: Rect | null, b: Rect | null): boolean {
   if (a === b) {
     return true;

package/src/core/renderers/CoreRenderer.ts

@@ -20,7 +20,7 @@
 import type { CoreShaderManager } from '../CoreShaderManager.js';
 import type { TextureOptions } from '../CoreTextureManager.js';
 import type { Stage } from '../Stage.js';
-import type { Rect } from '../lib/utils.js';
+import type { Rect, RectWithValid } from '../lib/utils.js';
 import type { Texture } from '../textures/Texture.js';
 import { CoreContextTexture } from './CoreContextTexture.js';
 import type { CoreRenderOp } from './CoreRenderOp.js';
@@ -39,7 +39,7 @@ export interface QuadOptions {
   shader: CoreShader | null;
   shaderProps: Record<string, unknown> | null;
   alpha: number;
-  clippingRect: Rect | null;
+  clippingRect: RectWithValid;
   tx: number;
   ty: number;
   ta: number;

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

@@ -23,7 +23,8 @@ import type { WebGlCoreCtxTexture } from './WebGlCoreCtxTexture.js';
 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 { Rect, RectWithValid } from '../../lib/utils.js';
+import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 
 const MAX_TEXTURES = 8; // TODO: get from gl
 
@@ -38,21 +39,20 @@ 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,
     readonly shaderProps: Record<string, unknown>,
     readonly alpha: number,
-    readonly clippingRect: Rect | null,
+    readonly clippingRect: RectWithValid,
     readonly dimensions: Dimensions,
     readonly bufferIdx: number,
     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,12 +81,8 @@ 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) {
+    if (this.clippingRect.valid) {
       const { x, y, width, height } = this.clippingRect;
       const pixelRatio = options.pixelRatio;
       const canvasHeight = options.canvas.height;
@@ -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

@@ -50,10 +50,13 @@ import {
   compareRect,
   getNormalizedRgbaComponents,
   type Rect,
+  type RectWithValid,
 } from '../../lib/utils.js';
 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 +69,7 @@ export interface WebGlCoreRendererOptions {
   shManager: CoreShaderManager;
   clearColor: number;
   bufferMemory: number;
+  contextSpy: ContextSpy | null;
 }
 
 interface CoreWebGlSystem {
@@ -75,7 +79,7 @@ interface CoreWebGlSystem {
 
 export class WebGlCoreRenderer extends CoreRenderer {
   //// WebGL Native Context and Data
-  gl: WebGLRenderingContext;
+  glw: WebGlContextWrapper;
   system: CoreWebGlSystem;
 
   //// Core Managers
@@ -112,26 +116,30 @@ export class WebGlCoreRenderer extends CoreRenderer {
     this.txManager = options.txManager;
     this.shManager = options.shManager;
     this.defaultTexture = new ColorTexture(this.txManager);
+    // When the default texture is loaded, request a render in case the
+    // RAF is paused. Fixes: https://github.com/lightning-js/renderer/issues/123
+    this.defaultTexture.once('loaded', () => {
+      this.stage.requestRender();
+    });
 
-    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 +149,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 +157,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 +165,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 +173,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 +184,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 +198,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);
   }
 
   /**
@@ -409,11 +418,11 @@ export class WebGlCoreRenderer extends CoreRenderer {
     shaderProps: Record<string, unknown>,
     alpha: number,
     dimensions: Dimensions,
-    clippingRect: Rect | null,
+    clippingRect: RectWithValid,
     bufferIdx: number,
   ) {
     const curRenderOp = new WebGlCoreRenderOp(
-      this.gl,
+      this.glw,
       this.options,
       this.quadBufferCollection,
       shader,
@@ -485,13 +494,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);
     }
   }