@lightningjs/renderer 3.0.0-beta22 → 3.0.0-beta23

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,8 +101,8 @@ 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.fQuadBuffer = new Float32Array(this.quadBuffer);
@@ -115,13 +110,11 @@ export class WebGlRenderer extends CoreRenderer {
 
     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 = this.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);
 

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

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

@@ -16,7 +16,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { WebGlContextWrapper } from '../../lib/WebGlContextWrapper.js';
+import type { GlContextWrapper } from '../../platforms/GlContextWrapper.js';
 import { Default } from '../../shaders/webgl/Default.js';
 import type { CoreShaderProgram } from '../CoreShaderProgram.js';
 import type { WebGlCtxTexture } from './WebGlCtxTexture.js';
@@ -44,7 +44,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
    */
   protected vao: WebGLVertexArrayObject | undefined;
   protected renderer: WebGlRenderer;
-  protected glw: WebGlContextWrapper;
+  protected glw: GlContextWrapper;
   protected attributeLocations: string[];
   protected uniformLocations: Record<string, WebGLUniformLocation> | null;
   protected lifecycle: Pick<WebGlShaderType, 'update' | 'canBatch'>;

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

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 
-import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
+import type { GlContextWrapper } from '../../../platforms/GlContextWrapper.js';
 
 export interface CoreWebGlParameters {
   MAX_RENDERBUFFER_SIZE: number;
@@ -36,9 +36,7 @@ export interface CoreWebGlParameters {
  * Get device specific webgl parameters
  * @param glw
  */
-export function getWebGlParameters(
-  glw: WebGlContextWrapper,
-): CoreWebGlParameters {
+export function getWebGlParameters(glw: GlContextWrapper): CoreWebGlParameters {
   const params: CoreWebGlParameters = {
     MAX_RENDERBUFFER_SIZE: 0,
     MAX_TEXTURE_SIZE: 0,
@@ -81,9 +79,7 @@ export interface CoreWebGlExtensions {
  * Get device webgl extensions
  * @param glw
  */
-export function getWebGlExtensions(
-  glw: WebGlContextWrapper,
-): CoreWebGlExtensions {
+export function getWebGlExtensions(glw: GlContextWrapper): CoreWebGlExtensions {
   const extensions: CoreWebGlExtensions = {
     ANGLE_instanced_arrays: null,
     WEBGL_compressed_texture_s3tc: null,
@@ -113,7 +109,7 @@ export function getWebGlExtensions(
  * @param glw
  * @param size
  */
-export function createIndexBuffer(glw: WebGlContextWrapper, size: number) {
+export function createIndexBuffer(glw: GlContextWrapper, size: number) {
   const maxQuads = ~~(size / 80);
   const indices = new Uint16Array(maxQuads * 6);
 

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

@@ -17,7 +17,7 @@
  * limitations under the License.
  */
 
-import type { WebGlContextWrapper } from '../../../lib/WebGlContextWrapper.js';
+import type { GlContextWrapper } from '../../../platforms/GlContextWrapper.js';
 
 //#region Types
 export interface AttributeInfo {
@@ -178,7 +178,7 @@ export interface ShaderProgramSources {
 //#endregion Types
 
 export function createShader(
-  glw: WebGlContextWrapper,
+  glw: GlContextWrapper,
   type: number,
   source: string,
 ) {
@@ -204,7 +204,7 @@ export function createShader(
 }
 
 export function createProgram(
-  glw: WebGlContextWrapper,
+  glw: GlContextWrapper,
   vertexShader: WebGLShader,
   fragmentShader: WebGLShader,
 ) {

package/src/core/shaders/webgl/Border.ts

@@ -66,10 +66,12 @@ export const Border: WebGlShaderType<BorderProps> = {
       vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
       v_edgeWidth = 1.0 / u_pixelRatio;
 
-      float borderTop = u_borderWidth.x;
-      float borderRight = u_borderWidth.y;
-      float borderBottom = u_borderWidth.z;
-      float borderLeft = u_borderWidth.w;
+      vec4 adjustedBorderWidth = u_borderWidth - 1.0 + clamp(u_borderWidth, -1.0, 1.0);
+
+      float borderTop = adjustedBorderWidth.x;
+      float borderRight = adjustedBorderWidth.y;
+      float borderBottom = adjustedBorderWidth.z;
+      float borderLeft = adjustedBorderWidth.w;
 
       v_outerBorderUv = vec2(0.0);
       v_innerBorderUv = vec2(0.0);

package/src/core/shaders/webgl/RoundedWithBorder.ts

@@ -83,10 +83,12 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       v_outerSize = vec2(0.0);
 
       if(v_borderZero == 0.0) {
-        float borderTop = u_borderWidth.x;
-        float borderRight = u_borderWidth.y;
-        float borderBottom = u_borderWidth.z;
-        float borderLeft = u_borderWidth.w;
+        vec4 adjustedBorderWidth = u_borderWidth - 1.0 + clamp(u_borderWidth, -1.0, 1.0);
+
+        float borderTop = adjustedBorderWidth.x;
+        float borderRight = adjustedBorderWidth.y;
+        float borderBottom = adjustedBorderWidth.z;
+        float borderLeft = adjustedBorderWidth.w;
 
         v_outerBorderUv = vec2(0.0);
         v_innerBorderUv = vec2(0.0);

package/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts

@@ -92,10 +92,12 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       v_outerSize = vec2(0.0);
 
       if(v_borderZero == 0.0) {
-        float borderTop = u_borderWidth.x;
-        float borderRight = u_borderWidth.y;
-        float borderBottom = u_borderWidth.z;
-        float borderLeft = u_borderWidth.w;
+        vec4 adjustedBorderWidth = u_borderWidth - 1.0 + clamp(u_borderWidth, -1.0, 1.0);
+
+        float borderTop = adjustedBorderWidth.x;
+        float borderRight = adjustedBorderWidth.y;
+        float borderBottom = adjustedBorderWidth.z;
+        float borderLeft = adjustedBorderWidth.w;
 
         v_outerBorderUv = vec2(0.0);
         v_innerBorderUv = vec2(0.0);

package/src/core/textures/ImageTexture.ts

@@ -19,19 +19,8 @@
 
 import type { CoreTextureManager } from '../CoreTextureManager.js';
 import { Texture, TextureType, type TextureData } from './Texture.js';
-import {
-  isCompressedTextureContainer,
-  loadCompressedTexture,
-} from '../lib/textureCompression.js';
-import {
-  convertUrlToAbsolute,
-  dataURIToBlob,
-  isBase64Image,
-} from '../lib/utils.js';
-import { isSvgImage, loadSvg } from '../lib/textureSvg.js';
-import { fetchJson } from '../lib/utils.js';
 import type { Platform } from '../platforms/Platform.js';
-import { isProductionEnvironment } from '../../utils.js';
+import type { CompressedImageData } from '../platforms/web/lib/textureCompression.js';
 
 /**
  * Properties of the {@link ImageTexture}
@@ -117,6 +106,11 @@ export interface ImageTextureProps {
   maxRetryCount?: number;
 }
 
+export interface ImageResponse {
+  data: ImageBitmap | ImageData | CompressedImageData | HTMLImageElement | null;
+  premultiplyAlpha: boolean | null;
+}
+
 /**
  * Texture consisting of an image loaded from a URL
  *
@@ -148,125 +142,6 @@ export class ImageTexture extends Texture {
     this.maxRetryCount = props.maxRetryCount as number;
   }
 
-  hasAlphaChannel(mimeType: string) {
-    return mimeType.indexOf('image/png') !== -1;
-  }
-
-  async loadImageFallback(src: string | Blob, hasAlpha: boolean) {
-    const img = new Image();
-
-    if (typeof src === 'string' && isBase64Image(src) === false) {
-      img.crossOrigin = 'anonymous';
-    }
-
-    return new Promise<{
-      data: HTMLImageElement | null;
-      premultiplyAlpha: boolean;
-    }>((resolve, reject) => {
-      img.onload = () => {
-        resolve({ data: img, premultiplyAlpha: hasAlpha });
-      };
-
-      img.onerror = (err) => {
-        const errorMessage =
-          err instanceof Error
-            ? err.message
-            : err instanceof Event
-            ? `Image loading failed for ${img.src}`
-            : 'Unknown image loading error';
-        reject(new Error(`Image loading failed: ${errorMessage}`));
-      };
-
-      if (src instanceof Blob) {
-        img.src = URL.createObjectURL(src);
-      } else {
-        img.src = src;
-      }
-    });
-  }
-
-  async createImageBitmap(
-    blob: Blob,
-    premultiplyAlpha: boolean | null,
-    sx: number | null,
-    sy: number | null,
-    sw: number | null,
-    sh: number | null,
-  ): Promise<{
-    data: ImageBitmap | HTMLImageElement;
-    premultiplyAlpha: boolean;
-  }> {
-    const hasAlphaChannel = premultiplyAlpha ?? blob.type.includes('image/png');
-    const imageBitmapSupported = this.txManager.imageBitmapSupported;
-
-    if (imageBitmapSupported.full === true && sw !== null && sh !== null) {
-      // createImageBitmap with crop
-      const bitmap = await this.platform.createImageBitmap(
-        blob,
-        sx || 0,
-        sy || 0,
-        sw,
-        sh,
-        {
-          premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
-          colorSpaceConversion: 'none',
-          imageOrientation: 'none',
-        },
-      );
-      return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
-    } else if (imageBitmapSupported.basic === true) {
-      // basic createImageBitmap without options or crop
-      // this is supported for Chrome v50 to v52/54 that doesn't support options
-      return {
-        data: await this.platform.createImageBitmap(blob),
-        premultiplyAlpha: hasAlphaChannel,
-      };
-    }
-
-    // default createImageBitmap without crop but with options
-    const bitmap = await this.platform.createImageBitmap(blob, {
-      premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
-      colorSpaceConversion: 'none',
-      imageOrientation: 'none',
-    });
-    return { data: bitmap, premultiplyAlpha: hasAlphaChannel };
-  }
-
-  async loadImage(src: string) {
-    const { premultiplyAlpha, sx, sy, sw, sh } = this.props;
-
-    if (this.txManager.hasCreateImageBitmap === true) {
-      if (
-        isBase64Image(src) === false &&
-        this.txManager.hasWorker === true &&
-        this.txManager.imageWorkerManager !== null
-      ) {
-        return this.txManager.imageWorkerManager.getImage(
-          src,
-          premultiplyAlpha,
-          sx,
-          sy,
-          sw,
-          sh,
-        );
-      }
-
-      let blob;
-
-      if (isBase64Image(src) === true) {
-        blob = dataURIToBlob(src);
-      } else {
-        blob = await fetchJson(src, 'blob').then(
-          (response) => response as Blob,
-        );
-      }
-
-      return this.createImageBitmap(blob, premultiplyAlpha, sx, sy, sw, sh);
-    }
-
-    return this.loadImageFallback(src, premultiplyAlpha ?? true);
-  }
-
   override async getTextureSource(): Promise<TextureData> {
     let resp: TextureData;
     try {
@@ -293,7 +168,10 @@ export class ImageTexture extends Texture {
   }
 
   determineImageTypeAndLoadImage() {
-    const { src, premultiplyAlpha, type } = this.props;
+    const { src, premultiplyAlpha, type, w, h, sx, sy, sw, sh } = this.props;
+    const platform = this.platform;
+    const premultiply = premultiplyAlpha ?? true;
+
     if (src === null) {
       return {
         data: null,
@@ -302,13 +180,9 @@ export class ImageTexture extends Texture {
 
     if (typeof src !== 'string') {
       if (src instanceof Blob) {
-        if (this.txManager.hasCreateImageBitmap === true) {
-          const { sx, sy, sw, sh } = this.props;
-          return this.createImageBitmap(src, premultiplyAlpha, sx, sy, sw, sh);
-        } else {
-          return this.loadImageFallback(src, premultiplyAlpha ?? true);
-        }
+        return platform.createImage(src, premultiply, sx, sy, sw, sh);
       }
+
       if (src instanceof ImageData) {
         return {
           data: src,
@@ -321,45 +195,28 @@ export class ImageTexture extends Texture {
       };
     }
 
-    const absoluteSrc = convertUrlToAbsolute(src);
     if (type === 'regular') {
-      return this.loadImage(absoluteSrc);
+      return platform.loadImage(src, premultiply, sx, sy, sw, sh);
     }
 
     if (type === 'svg') {
-      return loadSvg(
-        absoluteSrc,
-        this.props.w,
-        this.props.h,
-        this.props.sx,
-        this.props.sy,
-        this.props.sw,
-        this.props.sh,
-      );
+      return platform.loadSvg(src, w, h, sx, sy, sw, sh);
     }
 
     if (isSvgImage(src) === true) {
-      return loadSvg(
-        absoluteSrc,
-        this.props.w,
-        this.props.h,
-        this.props.sx,
-        this.props.sy,
-        this.props.sw,
-        this.props.sh,
-      );
+      return platform.loadSvg(src, w, h, sx, sy, sw, sh);
     }
 
     if (type === 'compressed') {
-      return loadCompressedTexture(absoluteSrc);
+      return platform.loadCompressedTexture(src);
     }
 
     if (isCompressedTextureContainer(src) === true) {
-      return loadCompressedTexture(absoluteSrc);
+      return platform.loadCompressedTexture(src);
     }
 
     // default
-    return this.loadImage(absoluteSrc);
+    return platform.loadImage(src, premultiply, sx, sy, sw, sh);
   }
 
   /**
@@ -409,3 +266,27 @@ export class ImageTexture extends Texture {
 
   static z$__type__Props: ImageTextureProps;
 }
+
+/**
+ * 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);
+}
+
+/**
+ * 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);
+}

package/src/core/textures/Texture.ts

@@ -60,7 +60,7 @@ export interface CompressedData {
   /**
    * Supported container types ('pvr' or 'ktx').
    */
-  type: 'pvr' | 'ktx' | 'astc';
+  type: 'PVR' | 'KTX' | 'ASTC';
 
   /**
    * The width of the compressed texture in pixels. Defaults to 0.

package/src/main-api/Renderer.ts

@@ -19,7 +19,7 @@
 
 import type { ExtractProps, TextureMap } from '../core/CoreTextureManager.js';
 import { EventEmitter } from '../common/EventEmitter.js';
-import { isProductionEnvironment } from '../utils.js';
+import { assertTruthy, isProductionEnvironment } from '../utils.js';
 import { Stage, type StageOptions } from '../core/Stage.js';
 import { CoreNode, type CoreNodeProps } from '../core/CoreNode.js';
 import { type CoreTextNodeProps } from '../core/CoreTextNode.js';
@@ -550,7 +550,7 @@ export class RendererMain extends EventEmitter {
       textureProcessingTimeLimit: settings.textureProcessingTimeLimit || 42,
       canvas: settings.canvas,
       createImageBitmapSupport: settings.createImageBitmapSupport || 'full',
-      platform: settings.platform || null,
+      platform: settings.platform || WebPlatform,
       maxRetryCount: settings.maxRetryCount ?? 5,
     };
 
@@ -562,29 +562,28 @@ export class RendererMain extends EventEmitter {
       inspector,
     } = settings as RendererMainSettings;
 
-    let platform;
-    if (
-      settings.platform !== undefined &&
-      settings.platform !== null &&
-      settings.platform.prototype instanceof Platform === true
-    ) {
-      // @ts-ignore - if Platform is a valid class, it will be used
-      platform = new settings.platform();
-    } else {
-      platform = new WebPlatform();
-    }
+    assertTruthy(
+      settings.platform,
+      'A platform implementation must be provided in settings.platform',
+    );
 
-    const canvas = settings.canvas || platform.createCanvas();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+    const platform = new (settings.platform as any)({
+      numImageWorkers: settings.numImageWorkers,
+      forceWebGL2: settings.forceWebGL2,
+      canvas: settings.canvas,
+    });
 
     const deviceLogicalWidth = appWidth * deviceLogicalPixelRatio;
     const deviceLogicalHeight = appHeight * deviceLogicalPixelRatio;
 
-    this.canvas = canvas;
-    canvas.width = deviceLogicalWidth * devicePhysicalPixelRatio;
-    canvas.height = deviceLogicalHeight * devicePhysicalPixelRatio;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-unsafe-member-access
+    this.canvas = platform.canvas! as HTMLCanvasElement;
+    this.canvas.width = deviceLogicalWidth * devicePhysicalPixelRatio;
+    this.canvas.height = deviceLogicalHeight * devicePhysicalPixelRatio;
 
-    canvas.style.width = `${deviceLogicalWidth}px`;
-    canvas.style.height = `${deviceLogicalHeight}px`;
+    this.canvas.style.width = `${deviceLogicalWidth}px`;
+    this.canvas.style.height = `${deviceLogicalHeight}px`;
 
     // Initialize the stage
     this.stage = new Stage({
@@ -629,8 +628,8 @@ export class RendererMain extends EventEmitter {
         throw new Error('Could not find target element');
       }
 
-      targetEl.appendChild(canvas);
-    } else if (settings.canvas !== canvas) {
+      targetEl.appendChild(this.canvas);
+    } else if (settings.canvas !== this.canvas) {
       throw new Error(
         'New canvas element could not be appended to undefined target',
       );
@@ -638,7 +637,10 @@ export class RendererMain extends EventEmitter {
 
     // Initialize inspector (if enabled)
     if (inspector && isProductionEnvironment === false) {
-      this.inspector = new inspector(canvas, settings as RendererMainSettings);
+      this.inspector = new inspector(
+        this.canvas,
+        settings as RendererMainSettings,
+      );
     }
   }
 

package/src/utils.ts

@@ -17,53 +17,6 @@
  * limitations under the License.
  */
 
-import type { ContextSpy } from './core/lib/ContextSpy.js';
-
-export function createWebGLContext(
-  canvas: HTMLCanvasElement | OffscreenCanvas,
-  forceWebGL2 = false,
-  contextSpy: ContextSpy | null,
-): 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');
-  }
-  if (contextSpy) {
-    // Proxy the GL context to log all GL calls
-    return new Proxy(gl, {
-      get(target, prop) {
-        const value = target[prop as never] as unknown;
-        if (typeof value === 'function') {
-          contextSpy.increment(String(prop));
-          return value.bind(target);
-        }
-        return value;
-      },
-    });
-  }
-
-  return gl;
-}
-
 /**
  * Checks if we're in a development environment or not.
  *