@luma.gl/webgl 8.6.0-alpha.5 → 9.0.0-alpha.10

package/src/adapter/webgl-device.ts

@@ -1,123 +1,134 @@
 // luma.gl, MIT license
-import {Device, DeviceInfo, DeviceLimits, log} from '@luma.gl/api';
+import type {
+  DeviceProps,
+  DeviceInfo,
+  DeviceLimits,
+  DeviceFeature,
+  CanvasContextProps,
+  TextureFormat
+} from '@luma.gl/api';
+import {Device, CanvasContext, log, assert} from '@luma.gl/api';
+import {isBrowser} from '@probe.gl/env';
 import {polyfillContext} from '../context/polyfill/polyfill-context';
 import {trackContextState} from '../context/state-tracker/track-context-state';
-import { ContextState } from '../context/context/context-state';
-import {getDevicePixelRatio, setDevicePixelRatio} from '../context/context/device-pixels';
-import {createBrowserContext} from '../context/context/create-context';
-import {getCanvas} from '../context/context/get-canvas';
-import {isWebGL, isWebGL2} from '../context/context/webgl-checks';
+import {ContextState} from '../context/context/context-state';
+import {createBrowserContext} from '../context/context/create-browser-context';
+import {
+  createHeadlessContext,
+  isHeadlessGLRegistered
+} from '../context/context/create-headless-context';
 import {getDeviceInfo} from './device-helpers/get-device-info';
-import {getDeviceFeatures, Feature} from './device-helpers/device-features';
+import {getDeviceFeatures} from './device-helpers/device-features';
 import {getDeviceLimits, getWebGLLimits, WebGLLimits} from './device-helpers/device-limits';
+import WebGLCanvasContext from './webgl-canvas-context';
+import {loadSpectorJS, initializeSpectorJS} from '../context/debug/spector';
+import {loadWebGLDeveloperTools, makeDebugContext} from '../context/debug/webgl-developer-tools';
+import {
+  isTextureFormatSupported,
+  isTextureFormatRenderable,
+  isTextureFormatFilterable
+} from './converters/texture-formats';
 
 // WebGL classes
-import type {BufferProps, ShaderProps} from '@luma.gl/api';
-import WEBGLBuffer from '../classes/webgl-buffer';
-import {WEBGLShader} from '../adapter/webgl-shader';
-import Texture2D, {Texture2DProps} from '../classes/texture-2d';
-import type {default as Framebuffer} from '../classes/framebuffer';
-import type {default as VertexArrayObject} from '../classes/vertex-array-object';
-
-/** WebGLDevice options */
-export type WebGLDeviceProps = {
-  canvas?: HTMLCanvasElement | OffscreenCanvas | string; // A canvas element or a canvas string id
-  width?: number /** width is only used when creating a new canvas */;
-  height?: number /** height is only used when creating a new canvas */;
-  // Attach to existing context
-  gl?: WebGLRenderingContext | WebGL2RenderingContext;
-  // COMMON CONTEXT PARAMETERS
-  webgl2?: boolean; // Set to false to not create a WebGL2 context (force webgl1)
-  webgl1?: boolean; // set to false to not create a WebGL1 context (fails if webgl2 not available)
-  manageState?: boolean; // Set to false to disable WebGL state management instrumentation
-  debug?: boolean; // Instrument context (at the expense of performance)
-  break?: Array<any>; // TODO: types
-  onContextLost?: (event: Event) => void;
-  onContextRestored?: (event: Event) => void;
-  // BROWSER CONTEXT PARAMETERS
-  alpha?: boolean; // Default render target has an alpha buffer.
-  depth?: boolean; // Default render target has a depth buffer of at least 16 bits.
-  stencil?: boolean; // Default render target has a stencil buffer of at least 8 bits.
-  antialias?: boolean; // Boolean that indicates whether or not to perform anti-aliasing.
-  premultipliedAlpha?: boolean; // Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.
-  preserveDrawingBuffer?: boolean; // Default render target buffers will not be automatically cleared and will preserve their values until cleared or overwritten
-  failIfMajorPerformanceCaveat?: boolean; // Do not create if the system performance is low.
-};
-
-const DEFAULT_DEVICE_PROPS: Required<WebGLDeviceProps> = {
-  canvas: undefined, // A canvas element or a canvas string id
-  gl: undefined,
-  webgl2: true, // Attempt to create a WebGL2 context
-  webgl1: true, // Attempt to create a WebGL1 context (false to fail if webgl2 not available)
-  manageState: true,
-  width: 800, // width are height are only used by headless gl
-  height: 600,
-  debug: false, // Instrument context (at the expense of performance)
-  break: undefined,
-  onContextLost: () => console.error('WebGL context lost'),
-  onContextRestored: () => console.info('WebGL context restored'),
-
-  alpha: undefined,
-  depth: undefined,
-  stencil: undefined,
-  antialias: undefined,
-  premultipliedAlpha: undefined,
-  preserveDrawingBuffer: undefined,
-  failIfMajorPerformanceCaveat: undefined
-};
-
-const LOG_LEVEL = 1;
+import type {
+  BufferProps,
+  ShaderProps,
+  Sampler,
+  SamplerProps,
+  TextureProps,
+  ExternalTexture,
+  ExternalTextureProps,
+  FramebufferProps,
+  RenderPipeline,
+  RenderPipelineProps,
+  ComputePipeline,
+  ComputePipelineProps,
+  RenderPass,
+  RenderPassProps,
+  ComputePass,
+  ComputePassProps
+} from '@luma.gl/api';
 
-// TODO use weakmap instead of modifying context
-const glToContextMap = new WeakMap<WebGLRenderingContext | WebGL2RenderingContext, WebGLDevice>();
+import ClassicBuffer from '../classic/buffer';
+import WEBGLBuffer from './resources/webgl-buffer';
+import WEBGLShader from './resources/webgl-shader';
+import WEBGLSampler from './resources/webgl-sampler';
+import WEBGLTexture from './resources/webgl-texture';
+import WEBGLFramebuffer from './resources/webgl-framebuffer';
+import WEBGLRenderPass from './resources/webgl-render-pass';
+import WEBGLRenderPipeline from './resources/webgl-render-pipeline';
 
-export function getWebGLDevice(gl: WebGLRenderingContext | WebGL2RenderingContext): WebGLDevice | undefined {
-  return glToContextMap.get(gl);
-}
+const LOG_LEVEL = 1;
 
 let counter = 0;
 
 /** WebGPU style Device API for a WebGL context */
 export default class WebGLDevice extends Device implements ContextState {
-  // WebGPU style API
+  //
+  // Public `Device` API
+  //
+
+  static type: string = 'webgl';
+
+  static isSupported(): boolean {
+    return typeof WebGLRenderingContext !== 'undefined' || isHeadlessGLRegistered();
+  }
 
-  /** A set like interface to test features */
-  readonly features: Set<Feature>;
-  readonly limits: DeviceLimits;
   readonly info: DeviceInfo;
+  readonly canvasContext: WebGLCanvasContext;
 
-  /** Promise that rejects when context is lost */
-  readonly lost: Promise<string>;
+  readonly handle: WebGLRenderingContext;
 
-  // Common API
-  props: Required<WebGLDeviceProps>;
-  userData: {[key: string]: any};
+  get features(): Set<DeviceFeature> {
+    this._features = this._features || getDeviceFeatures(this.gl);
+    return this._features;
+  }
 
-  // WebGL specific API
-  readonly isWebGL2: boolean;
+  get limits(): DeviceLimits {
+    this._limits = this._limits || getDeviceLimits(this.gl);
+    return this._limits;
+  }
+
+  readonly lost: Promise<{reason: 'destroyed'; message: string}>;
+
+  private _resolveContextLost?: (value: {reason: 'destroyed'; message: string}) => void;
+  private _features?: Set<DeviceFeature>;
+  private _limits?: DeviceLimits;
+
+  //
+  // WebGL-only API (not part of `Device` API)
+  //
+
+  /** WebGL1 typed context. Can always be used. */
   readonly gl: WebGLRenderingContext;
-  readonly gl2: WebGL2RenderingContext;
-  /** Is this device attached to an offscreen context */
-  readonly offScreen: boolean = false;
+  /** WebGL2 typed context. Need to check isWebGL2 or isWebGL1 before using. */
+  readonly gl2: WebGL2RenderingContext | null = null;
+  readonly debug: boolean = false;
 
-  readonly webglLimits: WebGLLimits;
+  /** `true` if this is a WebGL1 context. @note `false` if WebGL2 */
+  readonly isWebGL1: boolean;
+  /** `true` if this is a WebGL2 context. @note `false` if WebGL1 */
+  readonly isWebGL2: boolean;
 
-  defaultFramebuffer?: Framebuffer;
-  defaultVertexArray?: VertexArrayObject;
+  get webglLimits(): WebGLLimits {
+    this._webglLimits = this._webglLimits || getWebGLLimits(this.gl);
+    return this._webglLimits;
+  }
 
-  // State used by luma.gl classes
-  _state: 'uninitialized' | 'initializing' | 'initialized' = 'uninitialized';
+  private _webglLimits?: WebGLLimits;
+
+  /** State used by luma.gl classes: TODO - move to canvasContext*/
   readonly _canvasSizeInfo = {clientWidth: 0, clientHeight: 0, devicePixelRatio: 1};
+  /** State used by luma.gl classes */
   readonly _extensions: Record<string, any> = {};
   _polyfilled: boolean = false;
 
-  /**
-   *
-   */
-  static fromContext(gl: WebGLRenderingContext): WebGLDevice {
-    // @ts-expect-error
-    return gl.device as WebGLDevice;
-  }
+  /** Instance of Spector.js (if initialized) */
+  spector;
+
+  //
+  // Static methods, expected to be present by `luma.createDevice()`
+  //
 
   /**
    * Get a device instance from a GL context
@@ -125,105 +136,134 @@ export default class WebGLDevice extends Device implements ContextState {
    * @param gl
    * @returns
    */
-  static attach(
-    gl: Device | WebGLRenderingContext | WebGL2RenderingContext,
-    props?: WebGLDeviceProps
-  ): WebGLDevice {
+  static attach(gl: Device | WebGLRenderingContext | WebGL2RenderingContext): WebGLDevice {
     if (gl instanceof WebGLDevice) {
       return gl;
     }
+    // @ts-expect-error
+    if (gl?.device instanceof Device) {
+      // @ts-expect-error
+      return gl.device as WebGLDevice;
+    }
     if (!isWebGL(gl)) {
       throw new Error('Invalid WebGLRenderingContext');
     }
-    return new WebGLDevice({...props, gl: gl as WebGLRenderingContext});
+    return new WebGLDevice({gl: gl as WebGLRenderingContext});
   }
 
+  static async create(props: DeviceProps = {}): Promise<WebGLDevice> {
+    log.groupCollapsed(LOG_LEVEL, 'WebGLDevice created');
+
+    // Wait for page to load. Only wait when props. canvas is string
+    // to avoid setting page onload callback unless necessary
+    if (typeof props.canvas === 'string') {
+      await CanvasContext.pageLoaded;
+    }
+
+    // Load webgl and spector debug scripts from CDN if requested
+    if (props.debug) {
+      await loadWebGLDeveloperTools();
+    }
+    // @ts-expect-error spector not on props
+    if (props.spector) {
+      await loadSpectorJS();
+    }
+
+    log.probe(LOG_LEVEL + 1, 'DOM is loaded')();
 
-  constructor(props: WebGLDeviceProps) {
-    super();
+    // @ts-expect-error
+    if (props.gl && props.gl.device) {
+      return WebGLDevice.attach(props.gl);
+    }
 
-    this.props = {...DEFAULT_DEVICE_PROPS, ...props};
+    return new WebGLDevice(props);
+  }
+
+  //
+  // Public API
+  //
+
+  constructor(props: DeviceProps) {
+    super(props);
 
     // If attaching to an already attached context, return the attached device
     // @ts-expect-error device is attached to context
-    const device: WebGLDevice | undefined = this.props.gl?.device;
+    const device: WebGLDevice | undefined = props.gl?.device;
     if (device) {
-      if (device._state !== 'initialized') {
-        log.error('recursive context');
-        throw new Error('recursive context');
-      }
-      return device;
+      throw new Error(`WebGL context already attached to device ${device.id}`);
     }
 
-    this.offScreen =
-      typeof OffscreenCanvas !== 'undefined' &&
-      props.canvas instanceof OffscreenCanvas;
+    // Create and instrument context
+    this.canvasContext = new WebGLCanvasContext(this, props);
 
-    // Create an instrument context
-    this.gl = (this.props.gl || this._createContext(props)) as WebGLRenderingContext;
+    this.lost = new Promise<{reason: 'destroyed'; message: string}>((resolve) => {
+      this._resolveContextLost = resolve;
+    });
+
+    const onContextLost = (event: Event) =>
+      this._resolveContextLost?.({
+        reason: 'destroyed',
+        message: 'Computer entered sleep mode, or too many apps or browser tabs are using the GPU.'
+      });
+
+    let gl: WebGLRenderingContext | WebGL2RenderingContext | null = props.gl;
+    gl =
+      gl ||
+      (isBrowser() ? createBrowserContext(this.canvasContext.canvas, {...props, onContextLost}) : null);
+    gl = gl || (!isBrowser() ? createHeadlessContext({...props, onContextLost}) : null);
+
+    if (!gl) {
+      throw new Error('WebGL context creation failed');
+    }
+
+    this.handle = gl;
+    this.gl = this.handle;
     this.gl2 = this.gl as WebGL2RenderingContext;
     this.isWebGL2 = isWebGL2(this.gl);
-    this._state = 'initializing';
-    // Avoid multiple instrumentations
-    // @ts-expect-error
-    if (this.gl.device) {
-      log.error('device already created');
-      throw new Error('device already created'); // ASSERT this device;
-    }
-    // @ts-expect-error
-    this.gl.device = this;
-    // @ts-ignore
-    this.gl._version = typeof WebGL2RenderingContext !== 'undefined' && this.gl instanceof WebGL2RenderingContext ? 2 : 1;
-    // TODO - move to weak map indexing
-    glToContextMap.set(this.gl, this);
+    this.isWebGL1 = !this.isWebGL2;
 
-    // Luma Device fields
+    // luma Device fields
     this.info = getDeviceInfo(this.gl);
-    // Log some debug info about the newly created context
-    // @ts-expect-error device is attached to context
-    const debug = this.gl.debug ? ' debug' : '';
-    const webGL = isWebGL2(this.gl) ? 'WebGL2' : 'WebGL1';
-    log.groupCollapsed(LOG_LEVEL, `${webGL}${debug} context: ${this.info.vendor}, ${this.info.renderer}`)();
 
+    // @ts-expect-error Link webgl context back to device
+    this.gl.device = this;
+    // @ts-expect-error Annotate webgl context to handle
+    this.gl._version = this.isWebGL2 ? 2 : 1;
+
+    // Add subset of WebGL2 methods to WebGL1 context
     polyfillContext(this.gl);
-    log.probe(LOG_LEVEL, 'polyfilled context')();
 
     // Install context state tracking
+    // @ts-expect-error - hidden parameters
+    const {enable = true, copyState = false} = props;
     trackContextState(this.gl, {
-      copyState: false,
-      log: (...args) => log.log(1, ...args)()
+      enable,
+      copyState,
+      log: (...args: any[]) => log.log(1, ...args)()
     });
-    log.probe(LOG_LEVEL, 'instrumented context')();
-
-    // WebGPU Device fields
-    this.features = getDeviceFeatures(this.gl);
-    log.probe(LOG_LEVEL, `queried device features ${counter}`)();
-    this.limits = getDeviceLimits(this.gl);
-    log.probe(LOG_LEVEL, 'queried device limits')();
-
-    // Add seer integration - TODO - currently removed
-
-    // WEBGL specific fields
-    this.webglLimits = getWebGLLimits(this.gl);
-    log.probe(LOG_LEVEL, 'queried webgl limits')();
-
-    // Add debug instrumentation to the context
-    // if (isBrowser() && props.debug) {
-    //   // @ts-ignore
-    //   const {makeDebugContext} = global;
-    //   if (!makeDebugContext) {
-    //     log.warn('WebGL debug mode not activated. import "@luma.gl/debug" to enable.')();
-    //   } else {
-    //     // @ts-ignore
-    //     this.gl = global.makeDebugContext(this.gl, props);
-    //     this.gl2 = this.gl as WebGL2RenderingContext;
-    //     // Debug forces log level to at least 1
-    //     log.level = Math.max(log.level, 1);
-    //   }
-    // }
+
+    // DEBUG contexts: Add debug instrumentation to the context, force log level to at least 1
+    if (isBrowser() && props.debug) {
+      this.gl = makeDebugContext(this.gl, {...props, webgl2: this.isWebGL2, throwOnError: true});
+      this.gl2 = this.gl as WebGL2RenderingContext;
+      this.debug = true;
+      log.level = Math.max(log.level, 1);
+      log.warn('WebGL debug mode activated. Performance reduced.')();
+    }
+
+    // @ts-expect-error spector not on props
+    if (isBrowser() && props.spector) {
+      const canvas = this.handle.canvas || (props.canvas as HTMLCanvasElement);
+      this.spector = initializeSpectorJS({...this.props, canvas});
+    }
+
+    // Log some debug info about the newly created context
+    const message = `\
+Created ${this.info.type}${this.debug ? ' debug' : ''} context: \
+${this.info.vendor}, ${this.info.renderer} for canvas: ${this.canvasContext.id}`;
+    log.probe(LOG_LEVEL, message)();
 
     log.groupEnd(LOG_LEVEL)();
-    this._state = 'initialized';
   }
 
   /**
@@ -231,169 +271,144 @@ export default class WebGLDevice extends Device implements ContextState {
    * @note Has no effect for browser contexts, there is no browser API for destroying contexts
    */
   destroy() {
-    let ext = this.gl.getExtension('STACKGL_destroy_context');
+    const ext = this.gl.getExtension('STACKGL_destroy_context');
     if (ext) {
       ext.destroy();
     }
-    // ext = this.gl.getExtension('WEBGL_lose_context');
-    // if (ext) {
-    //   // TODO - disconnect context lost callbacks?
-    //   ext.loseContext();
-    // }
   }
 
-  // WEBGL SPECIFIC METHODS
-
   /**
-   * Resize the canvas' drawing buffer.
-   *
-   * Can match the canvas CSS size, and optionally also consider devicePixelRatio
-   * Can be called every frame
-   *
-   * Regardless of size, the drawing buffer will always be scaled to the viewport, but
-   * for best visual results, usually set to either:
-   *  canvas CSS width x canvas CSS height
-   *  canvas CSS width * devicePixelRatio x canvas CSS height * devicePixelRatio
-   * See http://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
+   * Loses the context
+   * @note Triggers context loss, mainly for testing
    */
-  resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
-    // Resize browser context .
-    if (this.gl.canvas) {
-      const devicePixelRatio = getDevicePixelRatio(options?.useDevicePixels);
-      setDevicePixelRatio(this.gl, devicePixelRatio, options);
-      return;
-    }
-
-    // Resize headless gl context
-    const ext = this.gl.getExtension('STACKGL_resize_drawingbuffer');
-    if (ext && options && `width` in options && `height` in options) {
-      ext.resize(options.width, options.height);
+  loseDevice() {
+    const ext = this.gl.getExtension('WEBGL_lose_context');
+    if (ext) {
+      ext.loseContext();
     }
+    // loseContext should trigger context loss callback but 
+    this._resolveContextLost?.({
+      reason: 'destroyed',
+      message: 'Application triggered context loss'
+    });
   }
 
-  _createBuffer(props: BufferProps): WEBGLBuffer {
-    return new WEBGLBuffer(this.gl, props);
+  get isLost(): boolean {
+    return this.gl.isContextLost();
   }
 
-  createTexture(props: Texture2DProps): Texture2D {
-    return new Texture2D(this, props);
+  getSize(): [number, number] {
+    return [this.gl.drawingBufferWidth, this.gl.drawingBufferHeight];
   }
 
-  createShader(props: ShaderProps): WEBGLShader {
-    return new WEBGLShader(this, props);
+  isTextureFormatSupported(format: TextureFormat): boolean {
+    return isTextureFormatSupported(this.gl, format);
   }
 
-  /**
-   * Offscreen Canvas Support: Commit the frame
-   * https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/commit
-   * Chrome's offscreen canvas does not require gl.commit
-   */
-  commit(): void {
-    // @ts-expect-error gl.commit is not officially part of WebGLRenderingContext
-    if (this.offScreen && this.gl.commit) {
-      // @ts-expect-error gl.commit is not officially part of WebGLRenderingContext
-      this.gl.commit();
-    }
+  isTextureFormatFilterable(format: TextureFormat): boolean {
+    return isTextureFormatFilterable(this.gl, format);
   }
 
-  // PRIVATE METHODS
-
-  /**
-   * Creates a context giving access to the WebGL API
-   */
-  _createContext(options?: WebGLDeviceProps): WebGLRenderingContext {
-    const {width, height, canvas} = this.props;
-    // Get or create a canvas
-    const targetCanvas = getCanvas({canvas, width, height});
-    // Create a WebGL context in the canvas
-    return createBrowserContext(targetCanvas, options);
+  isTextureFormatRenderable(format: TextureFormat): boolean {
+    return isTextureFormatRenderable(this.gl, format);
   }
-}
-
-/*
-// prettier-ignore
-import {
-  Device, DeviceInfo, DeviceLimits,
-  Buffer, BufferProps
-} from '@luma.gl/api';
 
-import {getWebGLDeviceInfo} from '../converters/webgl-device-info';
-import {getWebGLLimits} from '../converters/webgl-limits';
-import {getWebGLFeatures} from '../converters/webgl-features';
+  // WEBGL SPECIFIC METHODS
 
-export default class WEBGLDevice implements Device {
-  readonly handle: WebGLRenderingContext;
-  readonly gl: WebGLRenderingContext;
-  readonly gl2: WebGL2RenderingContext | null;
-  readonly canvas: HTMLCanvasElement;
-
-  static isSupported(options: {canvas?: HTMLCanvasElement}): boolean {
-    const {canvas} = options;
-    let gl;
-    try {
-      gl = canvas && canvas.getContext("webgl");
-      gl = gl && canvas && canvas.getContext("experimental-webgl");
-    } catch (x) {
-      gl = null;
+  /** Returns a WebGL2RenderingContext or throws an error */
+  assertWebGL2(): WebGL2RenderingContext {
+    if (!this.gl2) {
+      throw new Error('Requires WebGL2');
     }
-    return Boolean(gl);
+    return this.gl2;
   }
 
-  constructor(props = {}) {
-    const {canvas, swapChainFormat = "bgra8unorm"} = props;
+  // IMPLEMENTATION OF ABSTRACT DEVICE
 
-    const gl = createGLContext(props);
-    this.handle =
-    this.gl = gl;
-    this.gl2 = gl instanceof WebGL2RenderingContext ? gl : null;
-    this.canvas = canvas;
+  createCanvasContext(props?: CanvasContextProps): CanvasContext {
+    throw new Error('WebGL only supports a single canvas');
   }
 
-  resize(width, height) {
-    resizeGLContext(this.gl);
+  _createBuffer(props: BufferProps): WEBGLBuffer {
+    return new ClassicBuffer(this, props);
   }
 
-  getInfo(): DeviceInfo {
-    return getWebGLDeviceInfo(this.gl);
+  _createTexture(props: TextureProps): WEBGLTexture {
+    return new WEBGLTexture(this, props);
   }
 
-  getLimits(): DeviceLimits {
-    return getWebGLLimits(this.gl, this.gl2);
+  createExternalTexture(props: ExternalTextureProps): ExternalTexture {
+    throw new Error('createExternalTexture() not implemented'); // return new Program(props);
   }
 
-  getFeatures(): string[] {
-    return getWebGLFeatures(this.gl);
+  createSampler(props: SamplerProps): WEBGLSampler {
+    return new WEBGLSampler(this, props);
   }
 
-  createBuffer(props: WebGPUBufferProps): WEBGLBuffer {
-    return new WEBGLBuffer(this.gl2 || this.gl, props);
+  createShader(props: ShaderProps): WEBGLShader {
+    return new WEBGLShader(this, props);
   }
 
-  createTexture(props: WebGPUTextureProps): WEBGLTexture {
-    return new WEBGLTexture(this, props);
+  createFramebuffer(props: FramebufferProps): WEBGLFramebuffer {
+    return new WEBGLFramebuffer(this, props);
   }
 
-  createSampler(props: WebGPUSamplerProps): WEBGLSampler {
-    return new WEBGLSampler(this, props);
+  createRenderPipeline(props: RenderPipelineProps): WEBGLRenderPipeline {
+    return new WEBGLRenderPipeline(this, props);
   }
 
-  createShader(props: WebGPUShaderProps): WEBGLShader {
-    return new WEBGLShader(this, props);
+  beginRenderPass(props: RenderPassProps): WEBGLRenderPass {
+    return new WEBGLRenderPass(this, props);
   }
 
-  createRenderPipeline(props: WebGPURenderPipelineProps): WEBGLPipeline {
-    return new WEBGLRenderPipeline(this, props);
+  createComputePipeline(props?: ComputePipelineProps): ComputePipeline {
+    throw new Error('ComputePipeline not supported in WebGL');
   }
 
-  createComputePipeline(props: WebGPUComputePipelineProps): WebGPUPipeline {
-    return new WebGPUComputePipeline(this, props);
+  beginComputePass(props: ComputePassProps): ComputePass {
+    throw new Error('compute shaders not supported in WebGL');
   }
 
+  private renderPass: WEBGLRenderPass | null = null;
 
-  // PRIVATE
+  getDefaultRenderPass(): WEBGLRenderPass {
+    this.renderPass =
+      this.renderPass ||
+      this.beginRenderPass({
+        framebuffer: this.canvasContext.getCurrentFramebuffer()
+      });
+    return this.renderPass;
+  }
 
-  _startFrame() {}
+  /**
+   * Offscreen Canvas Support: Commit the frame
+   * https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/commit
+   * Chrome's offscreen canvas does not require gl.commit
+   */
+  submit(): void {
+    this.renderPass?.endPass();
+    this.renderPass = null;
+    // this.canvasContext.commit();
+  }
+}
+
+/** Check if supplied parameter is a WebGLRenderingContext */
+function isWebGL(gl: any): boolean {
+  if (typeof WebGLRenderingContext !== 'undefined' && gl instanceof WebGLRenderingContext) {
+    return true;
+  }
+  if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
+    return true;
+  }
+  // Look for debug contexts, headless gl etc
+  return Boolean(gl && Number.isFinite(gl._version));
+}
 
-  _endFrame() {}
+/** Check if supplied parameter is a WebGL2RenderingContext */
+function isWebGL2(gl: any): boolean {
+  if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
+    return true;
+  }
+  // Look for debug contexts, headless gl etc
+  return Boolean(gl && gl._version === 2);
 }
-*/