@luma.gl/webgl 9.0.0-beta.4 → 9.0.0-beta.5

package/src/adapter/webgl-device.ts

@@ -17,21 +17,15 @@ import type {
 } from '@luma.gl/core';
 import {Device, CanvasContext, log, uid, assert} from '@luma.gl/core';
 import {isBrowser} from '@probe.gl/env';
-import {polyfillContext} from '../context/polyfill/polyfill-context';
 import {
   popContextState,
   pushContextState,
   trackContextState
 } from '../context/state-tracker/track-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} from './device-helpers/device-features';
-import {getDeviceLimits, getWebGLLimits, WebGLLimits} from './device-helpers/device-limits';
+import {getDeviceInfo} from './device-helpers/webgl-device-info';
+import {getDeviceFeatures} from './device-helpers/webgl-device-features';
+import {getDeviceLimits, getWebGLLimits, WebGLLimits} from './device-helpers/webgl-device-limits';
 import {WebGLCanvasContext} from './webgl-canvas-context';
 import {loadSpectorJS, initializeSpectorJS} from '../context/debug/spector';
 import {loadWebGLDeveloperTools, makeDebugContext} from '../context/debug/webgl-developer-tools';
@@ -91,13 +85,13 @@ export class WebGLDevice extends Device {
   static type: string = 'webgl';
 
   static isSupported(): boolean {
-    return typeof WebGLRenderingContext !== 'undefined' || isHeadlessGLRegistered();
+    return typeof WebGL2RenderingContext !== 'undefined';
   }
 
   readonly info: DeviceInfo;
   readonly canvasContext: WebGLCanvasContext;
 
-  readonly handle: WebGLRenderingContext;
+  readonly handle: WebGL2RenderingContext;
 
   get features(): Set<DeviceFeature> {
     this._features = this._features || getDeviceFeatures(this.gl);
@@ -125,7 +119,7 @@ export class WebGLDevice extends Device {
    * @param gl
    * @returns
    */
-  static attach(gl: Device | WebGLRenderingContext | WebGL2RenderingContext): WebGLDevice {
+  static attach(gl: Device | WebGL2RenderingContext): WebGLDevice {
     if (gl instanceof WebGLDevice) {
       return gl;
     }
@@ -135,9 +129,9 @@ export class WebGLDevice extends Device {
       return gl.device as WebGLDevice;
     }
     if (!isWebGL(gl)) {
-      throw new Error('Invalid WebGLRenderingContext');
+      throw new Error('Invalid WebGL2RenderingContext');
     }
-    return new WebGLDevice({gl: gl as WebGLRenderingContext});
+    return new WebGLDevice({gl: gl as WebGL2RenderingContext});
   }
 
   static async create(props: DeviceProps = {}): Promise<WebGLDevice> {
@@ -209,23 +203,19 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
         message: 'Computer entered sleep mode, or too many apps or browser tabs are using the GPU.'
       });
 
-    let gl: WebGLRenderingContext | WebGL2RenderingContext | null = props.gl || null;
+    let gl: WebGL2RenderingContext | null = props.gl || null;
     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.isWebGL1 = !this.isWebGL2;
     this.canvasContext.resize();
 
     // luma Device fields
@@ -236,9 +226,6 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
     // @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);
-
     // Install context state tracking
     // @ts-expect-error - hidden parameters
     const {enable = true, copyState = false} = props;
@@ -250,8 +237,7 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
 
     // 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.gl = makeDebugContext(this.gl, {...props, throwOnError: true});
       this.debug = true;
       log.level = Math.max(log.level, 1);
       log.warn('WebGL debug mode activated. Performance reduced.')();
@@ -269,10 +255,6 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
    * @note Has no effect for browser contexts, there is no browser API for destroying contexts
    */
   destroy(): void {
-    const ext = this.gl.getExtension('STACKGL_destroy_context');
-    if (ext) {
-      ext.destroy();
-    }
   }
 
   get isLost(): boolean {
@@ -295,16 +277,6 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
     return isTextureFormatRenderable(this.gl, format);
   }
 
-  // WEBGL SPECIFIC METHODS
-
-  /** Returns a WebGL2RenderingContext or throws an error */
-  assertWebGL2(): WebGL2RenderingContext {
-    if (!this.gl2) {
-      throw new Error('Requires WebGL2');
-    }
-    return this.gl2;
-  }
-
   // IMPLEMENTATION OF ABSTRACT DEVICE
 
   createCanvasContext(props?: CanvasContextProps): CanvasContext {
@@ -377,7 +349,7 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
 
   /**
    * Offscreen Canvas Support: Commit the frame
-   * https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/commit
+   * https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/commit
    * Chrome's offscreen canvas does not require gl.commit
    */
   submit(): void {
@@ -446,17 +418,10 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
   // WebGL-only API (not part of `Device` API)
   //
 
-  /** WebGL1 typed context. Can always be used. */
-  readonly gl: WebGLRenderingContext;
-  /** WebGL2 typed context. Need to check isWebGL2 or isWebGL1 before using. */
-  readonly gl2: WebGL2RenderingContext | null = null;
+  /** WebGL2 context. */
+  readonly gl: WebGL2RenderingContext;
   readonly debug: boolean = false;
 
-  /** `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;
-
   /** State used by luma.gl classes: TODO - move to canvasContext*/
   readonly _canvasSizeInfo = {clientWidth: 0, clientHeight: 0, devicePixelRatio: 1};
 
@@ -519,7 +484,7 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
    * Be aware that there are some duplicates especially for constants that are 0,
    * so this isn't guaranteed to return the right key in all cases.
    */
-  getGLKey(value: unknown, gl?: WebGLRenderingContext): string {
+  getGLKey(value: unknown, gl?: WebGL2RenderingContext): string {
     // @ts-ignore expect-error depends on settings
     gl = gl || this.gl2 || this.gl;
     const number = Number(value);
@@ -566,11 +531,8 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
   }
 }
 
-/** Check if supplied parameter is a WebGLRenderingContext */
+/** Check if supplied parameter is a WebGL2RenderingContext */
 function isWebGL(gl: any): boolean {
-  if (typeof WebGLRenderingContext !== 'undefined' && gl instanceof WebGLRenderingContext) {
-    return true;
-  }
   if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
     return true;
   }
@@ -578,15 +540,6 @@ function isWebGL(gl: any): boolean {
   return Boolean(gl && Number.isFinite(gl._version));
 }
 
-/** 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);
-}
-
 /** Set constant float array attribute */
 function setConstantFloatArray(device: WebGLDevice, location: number, array: Float32Array): void {
   switch (array.length) {
@@ -609,8 +562,7 @@ function setConstantFloatArray(device: WebGLDevice, location: number, array: Flo
 
 /** Set constant signed int array attribute */
 function setConstantIntArray(device: WebGLDevice, location: number, array: Int32Array): void {
-  device.assertWebGL2();
-  device.gl2?.vertexAttribI4iv(location, array);
+  device.gl.vertexAttribI4iv(location, array);
   // TODO - not clear if we need to use the special forms, more testing needed
   // switch (array.length) {
   //   case 1:
@@ -631,8 +583,7 @@ function setConstantIntArray(device: WebGLDevice, location: number, array: Int32
 
 /** Set constant unsigned int array attribute */
 function setConstantUintArray(device: WebGLDevice, location: number, array: Uint32Array) {
-  device.assertWebGL2();
-  device.gl2?.vertexAttribI4uiv(location, array);
+  device.gl.vertexAttribI4uiv(location, array);
   // TODO - not clear if we need to use the special forms, more testing needed
   // switch (array.length) {
   //   case 1:

package/src/classic/clear.ts

@@ -23,10 +23,9 @@ const ERR_ARGUMENTS = 'clear: bad arguments';
  * @deprecated Set clear color when creating a RenderPass.
  */
 export function clear(
-  gl: Device | WebGLRenderingContext,
+  device: Device,
   options?: {framebuffer?: Framebuffer; color?: any; depth?: any; stencil?: any}
 ): void {
-  const device = WebGLDevice.attach(gl);
   const {framebuffer = null, color = null, depth = null, stencil = null} = options || {};
   const parameters: any = {};
 
@@ -60,8 +59,9 @@ export function clear(
   assert(clearFlags !== 0, ERR_ARGUMENTS);
 
   // Temporarily set any clear "colors" and call clear
-  withGLParameters(device.gl, parameters, () => {
-    device.gl.clear(clearFlags);
+  withGLParameters(device, parameters, () => {
+    const gl = (device as WebGLDevice).gl;
+    gl.clear(clearFlags);
   });
 }
 
@@ -70,40 +70,39 @@ export function clear(
  * @deprecated Set clear color when creating a RenderPass
  */
 export function clearBuffer(
-  gl: Device | WebGLRenderingContext,
+  device: Device,
   options?: {framebuffer?: Framebuffer; buffer?: any; drawBuffer?: any; value?: any}
 ) {
-  const device = WebGLDevice.attach(gl);
-
   const {framebuffer = null, buffer = GL_COLOR, drawBuffer = 0, value = [0, 0, 0, 0]} = options || {};
-  withGLParameters(device.gl2, {framebuffer}, () => {
+  const gl = (device as WebGLDevice).gl;
+  withGLParameters(gl, {framebuffer}, () => {
     // Method selection per OpenGL ES 3 docs
     switch (buffer) {
       case GL_COLOR:
         switch (value.constructor) {
           case Int32Array:
-            device.gl2.clearBufferiv(buffer, drawBuffer, value);
+            gl.clearBufferiv(buffer, drawBuffer, value);
             break;
           case Uint32Array:
-            device.gl2.clearBufferuiv(buffer, drawBuffer, value);
+            gl.clearBufferuiv(buffer, drawBuffer, value);
             break;
           case Float32Array:
           default:
-            device.gl2.clearBufferfv(buffer, drawBuffer, value);
+            gl.clearBufferfv(buffer, drawBuffer, value);
         }
         break;
 
       case GL_DEPTH:
-        device.gl2.clearBufferfv(GL_DEPTH, 0, [value]);
+        gl.clearBufferfv(GL_DEPTH, 0, [value]);
         break;
 
       case GL_STENCIL:
-        device.gl2.clearBufferiv(GL_STENCIL, 0, [value]);
+        gl.clearBufferiv(GL_STENCIL, 0, [value]);
         break;
 
       case GL_DEPTH_STENCIL:
         const [depth, stencil] = value;
-        device.gl2.clearBufferfi(GL_DEPTH_STENCIL, 0, depth, stencil);
+        gl.clearBufferfi(GL_DEPTH_STENCIL, 0, depth, stencil);
         break;
 
       default:

package/src/classic/copy-and-blit.ts

@@ -240,8 +240,7 @@ export function copyToTexture(
         break;
       case GL.TEXTURE_2D_ARRAY:
       case GL.TEXTURE_3D:
-        device.assertWebGL2();
-        device.gl2.copyTexSubImage3D(
+        device.gl.copyTexSubImage3D(
           textureTarget,
           targetMipmaplevel,
           targetX,

package/src/context/context/context-data.ts

@@ -0,0 +1,44 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
+/**
+ * Stores luma.gl specific state associated with a context
+ */
+export interface WebGLContextData {
+  _polyfilled: boolean;
+  _extensions: Record<string, any>;
+}
+
+/**
+ * Gets luma.gl specific state from a context
+ * @returns context state
+ */
+export function getContextData(gl: WebGL2RenderingContext): WebGLContextData {
+  // @ts-expect-error
+  const luma = gl.luma as WebGLContextData | null;
+  if (!luma) {
+    const contextState: WebGLContextData = {
+      _polyfilled: false,
+      _extensions: {}
+    };
+    // @ts-expect-error
+    gl.luma = contextState;
+  }
+
+  // @ts-expect-error
+  return gl.luma;
+}
+
+export function initializeExtensions(gl: WebGL2RenderingContext): void {
+  const contextState = getContextData(gl);
+  // `getSupportedExtensions` can return null when context is lost.
+  const EXTENSIONS = gl.getSupportedExtensions() || [];
+  // Generates warnings in Chrome
+  const IGNORE_EXTENSIONS = ['WEBGL_polygon_mode'];
+  for (const extensionName of EXTENSIONS) {
+    if (!IGNORE_EXTENSIONS.includes(extensionName)) {
+      const extension = gl.getExtension(extensionName);
+      contextState._extensions[extensionName] = extension;
+    }
+  }
+}

package/src/context/context/create-browser-context.ts

@@ -3,8 +3,6 @@
 
 /**
  * ContextProps
- * @param webgl2 Set to false to not create a WebGL2 context (force webgl1)
- * @param webgl1 set to false to not create a WebGL1 context (fail if webgl2 not available)
  * @param onContextLost
  * @param onContextRestored
  *
@@ -19,9 +17,6 @@
  * @param failIfMajorPerformanceCaveat Do not create if the system performance is low.
  */
 type ContextProps = {
-  type?: 'webgl' | 'webgl1' | 'webgl2' | string;
-  webgl1?: boolean;
-  webgl2?: boolean;
   onContextLost?: (event: Event) => void;
   onContextRestored?: (event: Event) => void;
   alpha?: boolean; // indicates if the canvas contains an alpha buffer.
@@ -35,8 +30,6 @@ type ContextProps = {
 };
 
 const DEFAULT_CONTEXT_PROPS: ContextProps = {
-  webgl2: true, // Attempt to create a WebGL2 context
-  webgl1: true, // Attempt to create a WebGL1 context (false to fail if webgl2 not available)
   powerPreference: 'high-performance', // After all, most apps are using WebGL for performance reasons
   // eslint-disable-next-line no-console
   onContextLost: () => console.error('WebGL context lost'),
@@ -52,7 +45,7 @@ const DEFAULT_CONTEXT_PROPS: ContextProps = {
 export function createBrowserContext(
   canvas: HTMLCanvasElement | OffscreenCanvas,
   props: ContextProps
-): WebGLRenderingContext {
+): WebGL2RenderingContext {
   props = {...DEFAULT_CONTEXT_PROPS, ...props};
 
   // Try to extract any extra information about why context creation failed
@@ -61,31 +54,17 @@ export function createBrowserContext(
   canvas.addEventListener('webglcontextcreationerror', onCreateError, false);
 
   // Create the desired context
-  let gl: WebGLRenderingContext | WebGL2RenderingContext | null = null;
-
-  if (props.type === 'webgl2') {
-    props = {...props, webgl1: false};
-  }
-  if (props.type === 'webgl1') {
-    props = {...props, webgl2: false};
-  }
+  let gl: WebGL2RenderingContext | null = null;
 
   // props.failIfMajorPerformanceCaveat = true;
 
-  // Prefer webgl2 over webgl1 if both are acceptable
-  if (!gl && props.webgl2) {
-    gl = canvas.getContext('webgl2', props) as WebGL2RenderingContext;
-  }
-  if (!gl && props.webgl1) {
-    gl = canvas.getContext('webgl', props) as WebGLRenderingContext;
-  }
+  // We require webgl2 context
+  gl ||= canvas.getContext('webgl2', props) as WebGL2RenderingContext;
 
   // Software GPU
 
   // props.failIfMajorPerformanceCaveat = false;
-  // if (!gl && props.webgl2) {
-  //   gl = canvas.getContext('webgl2', props);
-  // }
+  
   // if (!gl && props.webgl1) {
   //   gl = canvas.getContext('webgl', props);
   // }
@@ -94,11 +73,7 @@ export function createBrowserContext(
   canvas.removeEventListener('webglcontextcreationerror', onCreateError, false);
 
   if (!gl) {
-    throw new Error(
-      `Failed to create ${props.webgl2 && !props.webgl1 ? 'WebGL2' : 'WebGL'} context: ${
-        errorMessage || 'Unknown error'
-      }`
-    );
+    throw new Error(`Failed to create WebGL context: ${errorMessage || 'Unknown error'}`);
   }
 
   if (props.onContextLost) {
@@ -120,7 +95,7 @@ export function createBrowserContext(
 }
 
 /* TODO - can we call this asynchronously to catch the error events?
-export async function createBrowserContextAsync(canvas: HTMLCanvasElement | OffscreenCanvas, props: ContextProps): Promise<WebGLRenderingContext> {
+export async function createBrowserContextAsync(canvas: HTMLCanvasElement | OffscreenCanvas, props: ContextProps): Promise<WebGL2RenderingContext> {
   props = {...DEFAULT_CONTEXT_PROPS, ...props};
 
  // Try to extract any extra information about why context creation failed

package/src/context/debug/webgl-developer-tools.ts

@@ -12,7 +12,6 @@ type DebugContextProps = {
   debug?: boolean;
   throwOnError?: boolean;
   break?: string[];
-  webgl2?: boolean;
 };
 
 // const DEFAULT_DEBUG_CONTEXT_PROPS: Required<DebugContextProps> = {
@@ -23,8 +22,8 @@ type DebugContextProps = {
 // }
 
 type ContextData = {
-  realContext?: WebGLRenderingContext;
-  debugContext?: WebGLRenderingContext;
+  realContext?: WebGL2RenderingContext;
+  debugContext?: WebGL2RenderingContext;
 }
 
 // Helper to get shared context data
@@ -55,7 +54,7 @@ export async function loadWebGLDeveloperTools(): Promise<void> {
 
 // Returns (a potentially new) context with debug instrumentation turned off or on.
 // Note that this actually returns a new context
-export function makeDebugContext(gl: WebGLRenderingContext, props: DebugContextProps = {}): WebGLRenderingContext | null {
+export function makeDebugContext(gl: WebGL2RenderingContext, props: DebugContextProps = {}): WebGL2RenderingContext | null {
   // Return null to ensure we don't try to create a context in this case (TODO what case is that?)
   if (!gl) {
     return null;
@@ -65,14 +64,14 @@ export function makeDebugContext(gl: WebGLRenderingContext, props: DebugContextP
 }
 
 // Returns the real context from either of the real/debug contexts
-function getRealContext(gl: WebGLRenderingContext): WebGLRenderingContext {
+function getRealContext(gl: WebGL2RenderingContext): WebGL2RenderingContext {
   const data = getContextData(gl);
   // If the context has a realContext member, it is a debug context so return the realContext
   return data.realContext ? data.realContext : gl;
 }
 
 // Returns the debug context from either of the real/debug contexts
-function getDebugContext(gl: WebGLRenderingContext, props: DebugContextProps): WebGLRenderingContext {
+function getDebugContext(gl: WebGL2RenderingContext, props: DebugContextProps): WebGL2RenderingContext {
   if (!globalThis.WebGLDebugUtils) {
     log.warn('webgl-debug not loaded')();
     return gl;
@@ -131,8 +130,7 @@ function onGLError(props: DebugContextProps, err, functionName: string, args: an
   args = Array.from(args).map(arg => arg === undefined ? 'undefined' : arg);
   const errorMessage = globalThis.WebGLDebugUtils.glEnumToString(err);
   const functionArgs = globalThis.WebGLDebugUtils.glFunctionArgsToString(functionName, args);
-  const glName = props.webgl2 ? 'gl2' : 'gl1';
-  const message = `${errorMessage} in ${glName}.${functionName}(${functionArgs})`;
+  const message = `${errorMessage} in gl.${functionName}(${functionArgs})`;
   log.error(message)();
   debugger; // eslint-disable-line
   if (props.throwOnError) {

package/src/context/parameters/unified-parameter-api.ts

@@ -24,7 +24,7 @@ export type {GLParameters};
  * This object is used to fill in any missing values for composite setter functions
  */
 export function setGLParameters(
-  device: Device | WebGLRenderingContext,
+  device: Device | WebGL2RenderingContext,
   parameters: GLParameters
 ): void {
   const webglDevice = WebGLDevice.attach(device);
@@ -92,7 +92,7 @@ export function setGLParameters(
  * by external code needs to be synchronized for the first time
  */
 export function getGLParameters(
-  device: Device | WebGLRenderingContext,
+  device: Device | WebGL2RenderingContext,
   parameters: keyof GLParameters | (keyof GLParameters)[] | GLParameters = GL_PARAMETER_DEFAULTS
 ): GLParameters {
   const webglDevice = WebGLDevice.attach(device);
@@ -123,7 +123,7 @@ export function getGLParameters(
  * NOT the canvas size dimensions, so they will have to be properly set after
  * calling this function.
  */
-export function resetGLParameters(device: Device | WebGLRenderingContext): void {
+export function resetGLParameters(device: Device | WebGL2RenderingContext): void {
   setGLParameters(device, GL_PARAMETER_DEFAULTS);
 }