@lightningjs/renderer 3.0.0-beta22 → 3.0.0-beta24

package/src/core/{lib → platforms/web/lib}/textureCompression.ts

@@ -16,8 +16,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { type CompressedData, type TextureData } from '../textures/Texture.js';
-import type { WebGlContextWrapper } from './WebGlContextWrapper.js';
+import { type CompressedData } from '../../../textures/Texture.js';
+import type { ImageResponse } from '../../../textures/ImageTexture.js';
+import type { WebGlContextWrapper } from '../WebGlContextWrapper.js';
 
 export type UploadCompressedTextureFunction = (
   glw: WebGlContextWrapper,
@@ -25,18 +26,6 @@ export type UploadCompressedTextureFunction = (
   data: CompressedData,
 ) => void;
 
-/**
- * Tests if the given location is a compressed texture container
- * @param url
- * @remarks
- * This function is used to determine if the given image url is a compressed
- * and only supports the following extensions: .ktx and .pvr
- * @returns
- */
-export function isCompressedTextureContainer(src: string): boolean {
-  return /\.(ktx|pvr)$/.test(src);
-}
-
 const PVR_MAGIC = 0x03525650; // 'PVR3' in little-endian
 const PVR_TO_GL_INTERNAL_FORMAT: Record<string, number> = {
   0: 0x8c01,
@@ -72,7 +61,7 @@ const KTX_IDENTIFIER = [
  */
 export const loadCompressedTexture = async (
   url: string,
-): Promise<TextureData> => {
+): Promise<ImageResponse> => {
   try {
     const response = await fetch(url);
     if (!response.ok) {
@@ -133,7 +122,7 @@ function readUint24(view: DataView, offset: number) {
  * @param view
  * @returns
  */
-const loadASTC = async function (view: DataView): Promise<TextureData> {
+const loadASTC = async function (view: DataView): Promise<ImageResponse> {
   const blockX = view.getUint8(4);
   const blockY = view.getUint8(5);
   const sizeX = readUint24(view, 7);
@@ -167,43 +156,18 @@ const loadASTC = async function (view: DataView): Promise<TextureData> {
       mipmaps,
       w: sizeX,
       h: sizeY,
-      type: 'astc',
+      type: 'ASTC',
     },
     premultiplyAlpha: false,
   };
 };
 
-const uploadASTC = function (
-  glw: WebGlContextWrapper,
-  texture: WebGLTexture,
-  data: CompressedData,
-) {
-  if (glw.getExtension('WEBGL_compressed_texture_astc') === null) {
-    throw new Error('ASTC compressed textures not supported by this device');
-  }
-
-  glw.bindTexture(texture);
-
-  const { glInternalFormat, mipmaps, w, h } = data;
-  if (mipmaps === undefined) {
-    return;
-  }
-
-  const view = new Uint8Array(mipmaps[0]!);
-
-  glw.compressedTexImage2D(0, glInternalFormat, w, h, 0, view);
-  // ASTC textures MUST use no mipmaps unless stored
-  glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
-  glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
-  glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
-  glw.texParameteri(glw.TEXTURE_MIN_FILTER, glw.LINEAR);
-};
 /**
  * Loads a KTX texture container and returns the texture data
  * @param view
  * @returns
  */
-const loadKTX = async function (view: DataView): Promise<TextureData> {
+const loadKTX = async function (view: DataView): Promise<ImageResponse> {
   const endianness = view.getUint32(12, true);
   const littleEndian = endianness === 0x04030201;
   if (littleEndian === false && endianness !== 0x01020304) {
@@ -267,58 +231,12 @@ const loadKTX = async function (view: DataView): Promise<TextureData> {
       mipmaps,
       w: width,
       h: height,
-      type: 'ktx',
+      type: 'KTX',
     },
     premultiplyAlpha: false,
   };
 };
 
-const uploadKTX = function (
-  glw: WebGlContextWrapper,
-  texture: WebGLTexture,
-  data: CompressedData,
-) {
-  const { glInternalFormat, mipmaps, w: width, h: height, blockInfo } = data;
-  if (mipmaps === undefined) {
-    return;
-  }
-  glw.bindTexture(texture);
-
-  const blockWidth = blockInfo.width;
-  const blockHeight = blockInfo.height;
-  let w = width;
-  let h = height;
-
-  for (let i = 0; i < mipmaps!.length; i++) {
-    let view = new Uint8Array(mipmaps![i]!);
-
-    const uploadW = Math.ceil(w / blockWidth) * blockWidth;
-    const uploadH = Math.ceil(h / blockHeight) * blockHeight;
-
-    const expectedBytes =
-      Math.ceil(w / blockWidth) * Math.ceil(h / blockHeight) * blockInfo.bytes;
-
-    if (view.byteLength < expectedBytes) {
-      const padded = new Uint8Array(expectedBytes);
-      padded.set(view);
-      view = padded;
-    }
-
-    glw.compressedTexImage2D(i, glInternalFormat, uploadW, uploadH, 0, view);
-
-    w = Math.max(1, w >> 1);
-    h = Math.max(1, h >> 1);
-  }
-
-  glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
-  glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
-  glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
-  glw.texParameteri(
-    glw.TEXTURE_MIN_FILTER,
-    mipmaps!.length > 1 ? glw.LINEAR_MIPMAP_LINEAR : glw.LINEAR,
-  );
-};
-
 function pvrtcMipSize(width: number, height: number, bpp: 2 | 4) {
   const minW = bpp === 2 ? 16 : 8;
   const minH = 8;
@@ -327,7 +245,7 @@ function pvrtcMipSize(width: number, height: number, bpp: 2 | 4) {
   return (w * h * bpp) / 8;
 }
 
-const loadPVR = async function (view: DataView): Promise<TextureData> {
+const loadPVR = async function (view: DataView): Promise<ImageResponse> {
   const pixelFormatLow = view.getUint32(8, true);
   const internalFormat = PVR_TO_GL_INTERNAL_FORMAT[pixelFormatLow];
 
@@ -405,50 +323,22 @@ const loadPVR = async function (view: DataView): Promise<TextureData> {
       mipmaps,
       w: width,
       h: height,
-      type: 'pvr',
+      type: 'PVR',
     },
     premultiplyAlpha: false,
   };
 };
 
-const uploadPVR = function (
-  glw: WebGlContextWrapper,
-  texture: WebGLTexture,
-  data: CompressedData,
-) {
-  const { glInternalFormat, mipmaps, w: width, h: height } = data;
-  if (mipmaps === undefined) {
-    return;
-  }
-  glw.bindTexture(texture);
-
-  let w = width;
-  let h = height;
-
-  for (let i = 0; i < mipmaps!.length; i++) {
-    glw.compressedTexImage2D(
-      i,
-      glInternalFormat,
-      w,
-      h,
-      0,
-      new Uint8Array(mipmaps[i]!),
-    );
-
-    w = Math.max(1, w >> 1);
-    h = Math.max(1, h >> 1);
-  }
-
-  glw.texParameteri(glw.TEXTURE_WRAP_S, glw.CLAMP_TO_EDGE);
-  glw.texParameteri(glw.TEXTURE_WRAP_T, glw.CLAMP_TO_EDGE);
-  glw.texParameteri(glw.TEXTURE_MAG_FILTER, glw.LINEAR);
-  glw.texParameteri(
-    glw.TEXTURE_MIN_FILTER,
-    mipmaps.length > 1 ? glw.LINEAR_MIPMAP_LINEAR : glw.LINEAR,
-  );
-};
+export interface CompressedImageData {
+  blockInfo: BlockInfo;
+  glInternalFormat: number;
+  mipmaps: ArrayBuffer[];
+  w: number;
+  h: number;
+  type: 'PVR' | 'KTX' | 'ASTC';
+}
 
-type BlockInfo = {
+export type BlockInfo = {
   width: number;
   height: number;
   bytes: number;
@@ -499,12 +389,3 @@ export const blockInfoMap: { [key: number]: BlockInfo } = {
   0x93b5: BLOCK_12x12x16, // 12x12
   0x93d5: BLOCK_12x12x16,
 };
-
-export const uploadCompressedTexture: Record<
-  string,
-  UploadCompressedTextureFunction
-> = {
-  ktx: uploadKTX,
-  pvr: uploadPVR,
-  astc: uploadASTC,
-};

package/src/core/{lib → platforms/web/lib}/textureSvg.ts

@@ -17,20 +17,8 @@
  * limitations under the License.
  */
 
-import { assertTruthy } from '../../utils.js';
-import { type TextureData } from '../textures/Texture.js';
-
-/**
- * Tests if the given location is a SVG
- * @param url
- * @remarks
- * This function is used to determine if the given image url is a SVG
- * image
- * @returns
- */
-export function isSvgImage(url: string): boolean {
-  return /\.(svg)(\?.*)?$/.test(url);
-}
+import { assertTruthy } from '../../../../utils.js';
+import type { ImageResponse } from '../../../textures/ImageTexture.js';
 
 /**
  * Loads a SVG image
@@ -45,7 +33,7 @@ export const loadSvg = (
   sy: number | null,
   sw: number | null,
   sh: number | null,
-): Promise<TextureData> => {
+): Promise<ImageResponse> => {
   return new Promise((resolve, reject) => {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');

package/src/core/platforms/web/lib/utils.ts

@@ -0,0 +1,105 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2026 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const PROTOCOL_REGEX = /^(data|ftps?|https?):/;
+
+export function isBase64Image(src: string) {
+  return src.startsWith('data:') === true;
+}
+
+export function dataURIToBlob(dataURI: string): Blob {
+  dataURI = dataURI.replace(/^data:/, '');
+
+  const type = dataURI.match(/image\/[^;]+/)?.[0] || '';
+  const base64 = dataURI.replace(/^[^,]+,/, '');
+
+  const sliceSize = 1024;
+  const byteCharacters = atob(base64);
+  const bytesLength = byteCharacters.length;
+  const slicesCount = Math.ceil(bytesLength / sliceSize);
+  const byteArrays = new Array(slicesCount);
+
+  for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+    const begin = sliceIndex * sliceSize;
+    const end = Math.min(begin + sliceSize, bytesLength);
+
+    const bytes = new Array(end - begin);
+    for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
+      bytes[i] = byteCharacters[offset]?.charCodeAt(0);
+    }
+    byteArrays[sliceIndex] = new Uint8Array(bytes);
+  }
+  return new Blob(byteArrays, { type });
+}
+
+export function convertUrlToAbsolute(url: string): string {
+  // handle local file imports if the url isn't remote resource or data blob
+  if (self.location.protocol === 'file:' && !PROTOCOL_REGEX.test(url)) {
+    const path = self.location.pathname.split('/');
+    path.pop();
+    const basePath = path.join('/');
+    const baseUrl = self.location.protocol + '//' + basePath;
+
+    // check if url has a leading dot
+    if (url.charAt(0) === '.') {
+      url = url.slice(1);
+    }
+
+    // check if url has a leading slash
+    if (url.charAt(0) === '/') {
+      url = url.slice(1);
+    }
+
+    return baseUrl + '/' + url;
+  }
+
+  const absoluteUrl = new URL(url, self.location.href);
+  return absoluteUrl.href;
+}
+
+export function createWebGLContext(
+  canvas: HTMLCanvasElement | OffscreenCanvas,
+  forceWebGL2 = false,
+): WebGLRenderingContext {
+  const config: WebGLContextAttributes = {
+    alpha: true,
+    antialias: false,
+    depth: false,
+    stencil: true,
+    desynchronized: false,
+    // Disabled because it prevents Visual Regression Tests from working
+    // failIfMajorPerformanceCaveat: true,
+    powerPreference: 'high-performance',
+    premultipliedAlpha: true,
+    preserveDrawingBuffer: false,
+  };
+  const gl =
+    // TODO: Remove this assertion once this issue is fixed in TypeScript
+    // https://github.com/microsoft/TypeScript/issues/53614
+    (canvas.getContext(forceWebGL2 ? 'webgl2' : 'webgl', config) ||
+      canvas.getContext(
+        'experimental-webgl' as 'webgl',
+        config,
+      )) as unknown as WebGLRenderingContext | null;
+  if (!gl) {
+    throw new Error('Unable to create WebGL context');
+  }
+
+  return gl;
+}

package/src/core/renderers/CoreRenderer.ts

@@ -25,20 +25,12 @@ import type { Texture, TextureCoords } from '../textures/Texture.js';
 import { CoreContextTexture } from './CoreContextTexture.js';
 import type { CoreShaderType, CoreShaderNode } from './CoreShaderNode.js';
 
-export interface CoreRendererOptions {
-  stage: Stage;
-  canvas: HTMLCanvasElement | OffscreenCanvas;
-  contextSpy: ContextSpy | null;
-  forceWebGL2: boolean;
-}
-
 export interface BufferInfo {
   totalUsed: number;
   totalAvailable: number;
 }
 
 export abstract class CoreRenderer {
-  public options: CoreRendererOptions;
   public mode: 'webgl' | 'canvas' | undefined;
   defaultTextureCoords: TextureCoords | undefined = undefined;
   readonly stage: Stage;
@@ -46,9 +38,8 @@ export abstract class CoreRenderer {
   //// Core Managers
   rttNodes: CoreNode[] = [];
 
-  constructor(options: CoreRendererOptions) {
-    this.options = options;
-    this.stage = options.stage;
+  constructor(stage: Stage) {
+    this.stage = stage;
   }
 
   abstract reset(): void;

package/src/core/renderers/canvas/CanvasRenderer.ts

@@ -20,11 +20,12 @@ import type { CoreNode } from '../../CoreNode.js';
 import { SubTexture } from '../../textures/SubTexture.js';
 import { TextureType, type Texture } from '../../textures/Texture.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
-import { CoreRenderer, type CoreRendererOptions } from '../CoreRenderer.js';
+import { CoreRenderer } from '../CoreRenderer.js';
 import { CanvasTexture } from './CanvasTexture.js';
 import { parseColor } from '../../lib/colorParser.js';
 import { CanvasShaderNode, type CanvasShaderType } from './CanvasShaderNode.js';
 import { normalizeCanvasColor } from '../../lib/colorCache.js';
+import type { Stage } from '../../Stage.js';
 
 export class CanvasRenderer extends CoreRenderer {
   private context: CanvasRenderingContext2D;
@@ -34,15 +35,16 @@ export class CanvasRenderer extends CoreRenderer {
   public renderToTextureActive = false;
   activeRttNode: CoreNode | null = null;
 
-  constructor(options: CoreRendererOptions) {
-    super(options);
+  constructor(stage: Stage) {
+    super(stage);
 
     this.mode = 'canvas';
-    const { canvas } = options;
+    const platform = stage.platform!;
+    const canvas = platform.canvas!;
     this.canvas = canvas as HTMLCanvasElement;
     this.context = canvas.getContext('2d') as CanvasRenderingContext2D;
-    this.pixelRatio = this.stage.pixelRatio;
-    this.clearColor = normalizeCanvasColor(this.stage.clearColor);
+    this.pixelRatio = stage.pixelRatio;
+    this.clearColor = normalizeCanvasColor(stage.clearColor);
   }
 
   reset(): void {

package/src/core/renderers/canvas/CanvasShaderNode.ts

@@ -73,10 +73,10 @@ export class CanvasShaderNode<
         }
 
         if (prevKey.length > 0) {
-          this.stage.shManager.mutateShaderValueUsage(prevKey, -1);
+          stage.shManager.mutateShaderValueUsage(prevKey, -1);
         }
 
-        const computed = this.stage.shManager.getShaderValues(
+        const computed = stage.shManager.getShaderValues(
           this.valueKey,
         ) as Record<string, unknown>;
         if (computed !== undefined) {
@@ -84,7 +84,7 @@ export class CanvasShaderNode<
         }
         this.computed = {};
         this.updater!(this.node as CoreNode);
-        this.stage.shManager.setShaderValues(this.valueKey, this.computed);
+        stage.shManager.setShaderValues(this.valueKey, this.computed);
       };
     }
   }

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

@@ -70,7 +70,8 @@ export class SdfRenderOp extends CoreRenderOp {
   }
 
   draw() {
-    const { glw, options, stage } = this.renderer;
+    const { glw, stage } = this.renderer;
+    const canvas = stage.platform!.canvas!;
 
     stage.shManager.useShader(this.shader.program);
     this.shader.program.bindRenderOp(this);
@@ -82,7 +83,7 @@ export class SdfRenderOp extends CoreRenderOp {
       const clipWidth = Math.round(this.clippingRect.w * pixelRatio);
       const clipHeight = Math.round(this.clippingRect.h * pixelRatio);
       let clipY = Math.round(
-        options.canvas.height - clipHeight - this.clippingRect.y * pixelRatio,
+        canvas.height - clipHeight - this.clippingRect.y * pixelRatio,
       );
       // if parent has render texture, we need to adjust the scissor rect
       // to be relative to the parent's framebuffer

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

@@ -19,7 +19,7 @@
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
-import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { GlContextWrapper } from '../../platforms/GlContextWrapper.js';
 import type { Bound } from '../../lib/utils.js';
 import type { RenderTexture } from '../../textures/RenderTexture.js';
 import { WebGlCtxTexture } from './WebGlCtxTexture.js';
@@ -37,7 +37,7 @@ export class WebGlCtxRenderTexture extends WebGlCtxTexture {
   };
 
   constructor(
-    glw: WebGlContextWrapper,
+    glw: GlContextWrapper,
     memManager: TextureMemoryManager,
     textureSource: RenderTexture,
   ) {

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

@@ -20,7 +20,7 @@
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import { assertTruthy } from '../../../utils.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
-import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { GlContextWrapper } from '../../platforms/GlContextWrapper.js';
 import type { SubTexture } from '../../textures/SubTexture.js';
 import type { SubTextureProps } from '../../textures/SubTexture.js';
 import type { CompressedData } from '../../textures/Texture.js';
@@ -28,7 +28,7 @@ import { WebGlCtxTexture } from './WebGlCtxTexture.js';
 
 export class WebGlCtxSubTexture extends WebGlCtxTexture {
   constructor(
-    glw: WebGlContextWrapper,
+    glw: GlContextWrapper,
     memManager: TextureMemoryManager,
     textureSource: SubTexture,
   ) {

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

@@ -19,9 +19,8 @@
 
 import type { Dimensions } from '../../../common/CommonTypes.js';
 import type { TextureMemoryManager } from '../../TextureMemoryManager.js';
-import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { GlContextWrapper } from '../../platforms/GlContextWrapper.js';
 import type { Texture } from '../../textures/Texture.js';
-import { uploadCompressedTexture } from '../../lib/textureCompression.js';
 import { CoreContextTexture } from '../CoreContextTexture.js';
 import { isHTMLImageElement } from './internal/RendererUtils.js';
 import type { Bound } from '../../lib/utils.js';
@@ -53,7 +52,7 @@ export class WebGlCtxTexture extends CoreContextTexture {
   };
 
   constructor(
-    protected glw: WebGlContextWrapper,
+    protected glw: GlContextWrapper,
     memManager: TextureMemoryManager,
     textureSource: Texture,
   ) {
@@ -239,7 +238,7 @@ export class WebGlCtxTexture extends CoreContextTexture {
       this.setTextureMemUse(TRANSPARENT_TEXTURE_DATA.byteLength);
     } else if ('mipmaps' in tdata && tdata.mipmaps) {
       const { mipmaps, type, blockInfo } = tdata;
-      uploadCompressedTexture[type]!(glw, this._nativeCtxTexture, tdata);
+      glw['upload' + type]!(this._nativeCtxTexture, tdata);
 
       // Check for errors after compressed texture operations
       if (this.checkGLError() === true) {

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

@@ -17,12 +17,7 @@
  * limitations under the License.
  */
 
-import { createWebGLContext } from '../../../utils.js';
-import {
-  CoreRenderer,
-  type BufferInfo,
-  type CoreRendererOptions,
-} from '../CoreRenderer.js';
+import { CoreRenderer, type BufferInfo } from '../CoreRenderer.js';
 import type { SdfRenderOp } from './SdfRenderOp.js';
 import type { CoreContextTexture } from '../CoreContextTexture.js';
 import {
@@ -44,7 +39,6 @@ import { WebGlCtxSubTexture } from './WebGlCtxSubTexture.js';
 import { BufferCollection } from './internal/BufferCollection.js';
 import { compareRect, getNormalizedRgbaComponents } from '../../lib/utils.js';
 import { WebGlShaderProgram } from './WebGlShaderProgram.js';
-import { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
 import { RenderTexture } from '../../textures/RenderTexture.js';
 import { CoreNodeRenderState, CoreNode } from '../../CoreNode.js';
 import { WebGlCtxRenderTexture } from './WebGlCtxRenderTexture.js';
@@ -52,8 +46,9 @@ import { Default } from '../../shaders/webgl/Default.js';
 import type { WebGlShaderType } from './WebGlShaderNode.js';
 import { WebGlShaderNode } from './WebGlShaderNode.js';
 import type { Dimensions } from '../../../common/CommonTypes.js';
-
-export type WebGlRendererOptions = CoreRendererOptions;
+import type { GlContextWrapper } from '../../platforms/GlContextWrapper.js';
+import type { Platform } from '../../platforms/Platform.js';
+import type { Stage } from '../../Stage.js';
 
 interface CoreWebGlSystem {
   parameters: CoreWebGlParameters;
@@ -64,7 +59,7 @@ export type WebGlRenderOp = CoreNode | SdfRenderOp;
 
 export class WebGlRenderer extends CoreRenderer {
   //// WebGL Native Context and Data
-  glw: WebGlContextWrapper;
+  glw: GlContextWrapper;
   system: CoreWebGlSystem;
 
   //// Persistent data
@@ -106,29 +101,27 @@ export class WebGlRenderer extends CoreRenderer {
    */
   public renderToTextureActive = false;
 
-  constructor(options: WebGlRendererOptions) {
-    super(options);
+  constructor(stage: Stage) {
+    super(stage);
 
-    this.quadBuffer = new ArrayBuffer(this.stage.options.quadBufferSize);
+    this.quadBuffer = new ArrayBuffer(stage.options.quadBufferSize);
     this.fQuadBuffer = new Float32Array(this.quadBuffer);
     this.uiQuadBuffer = new Uint32Array(this.quadBuffer);
 
     this.mode = 'webgl';
 
-    const gl = createWebGLContext(
-      options.canvas,
-      options.forceWebGL2,
-      options.contextSpy,
-    );
-    const glw = (this.glw = new WebGlContextWrapper(gl));
-    glw.viewport(0, 0, options.canvas.width, options.canvas.height);
+    const platform = stage.platform;
+    const canvas = platform.canvas!;
+
+    const glw = (this.glw = platform.createContext() as GlContextWrapper);
+    glw.viewport(0, 0, canvas.width, canvas.height);
 
-    this.updateClearColor(this.stage.clearColor);
+    this.updateClearColor(stage.clearColor);
 
     glw.setBlend(true);
     glw.blendFunc(glw.ONE, glw.ONE_MINUS_SRC_ALPHA);
 
-    createIndexBuffer(glw, this.stage.bufferMemory);
+    createIndexBuffer(glw, stage.bufferMemory);
 
     this.system = {
       parameters: getWebGlParameters(this.glw),

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

@@ -1,6 +1,6 @@
 import type { CoreNode } from '../../CoreNode.js';
 import { getNormalizedRgbaComponents } from '../../lib/utils.js';
-import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { GlContextWrapper } from '../../platforms/GlContextWrapper.js';
 import type { Stage } from '../../Stage.js';
 import { CoreShaderNode, type CoreShaderType } from '../CoreShaderNode.js';
 import type {
@@ -40,7 +40,7 @@ export type WebGlShaderType<T extends object = Record<string, unknown>> =
      *
      * @warning don't use this in your shader type
      */
-    onSdfBind?: (this: WebGlContextWrapper, props: T) => void;
+    onSdfBind?: (this: GlContextWrapper, props: T) => void;
     /**
      * This function is used to check if the shader can be reused based on quad info
      * @param props
@@ -94,10 +94,10 @@ export class WebGlShaderNode<
         }
 
         if (prevKey.length > 0) {
-          this.stage.shManager.mutateShaderValueUsage(prevKey, -1);
+          stage.shManager.mutateShaderValueUsage(prevKey, -1);
         }
 
-        const values = this.stage.shManager.getShaderValues(
+        const values = stage.shManager.getShaderValues(
           this.valueKey,
         ) as unknown as UniformCollection;
         if (values !== undefined) {
@@ -112,7 +112,7 @@ export class WebGlShaderNode<
           vec4: {},
         };
         this.updater!(this.node as CoreNode);
-        this.stage.shManager.setShaderValues(
+        stage.shManager.setShaderValues(
           this.valueKey,
           this.uniforms as unknown as Record<string, unknown>,
         );