@luma.gl/webgl 9.3.0-alpha.2 → 9.3.0-alpha.6

package/src/adapter/webgl-device.ts

@@ -8,6 +8,8 @@ import type {
   DeviceInfo,
   DeviceTextureFormatCapabilities,
   CanvasContextProps,
+  PresentationContextProps,
+  PresentationContext,
   Buffer,
   Texture,
   Framebuffer,
@@ -23,6 +25,7 @@ import type {
   FramebufferProps,
   // RenderPipeline,
   RenderPipelineProps,
+  SharedRenderPipeline,
   ComputePipeline,
   ComputePipelineProps,
   // CommandEncoder,
@@ -36,10 +39,12 @@ import {Device, CanvasContext, log} from '@luma.gl/core';
 import type {GLExtensions} from '@luma.gl/constants';
 import {WebGLStateTracker} from '../context/state-tracker/webgl-state-tracker';
 import {createBrowserContext} from '../context/helpers/create-browser-context';
+import {getWebGLContextData} from '../context/helpers/webgl-context-data';
 import {getDeviceInfo} from './device-helpers/webgl-device-info';
 import {WebGLDeviceFeatures} from './device-helpers/webgl-device-features';
 import {WebGLDeviceLimits} from './device-helpers/webgl-device-limits';
 import {WebGLCanvasContext} from './webgl-canvas-context';
+import {WebGLPresentationContext} from './webgl-presentation-context';
 import type {Spector} from '../context/debug/spector-types';
 import {initializeSpectorJS} from '../context/debug/spector';
 import {makeDebugContext} from '../context/debug/webgl-developer-tools';
@@ -52,6 +57,7 @@ import {WEBGLSampler} from './resources/webgl-sampler';
 import {WEBGLTexture} from './resources/webgl-texture';
 import {WEBGLFramebuffer} from './resources/webgl-framebuffer';
 import {WEBGLRenderPipeline} from './resources/webgl-render-pipeline';
+import {WEBGLSharedRenderPipeline} from './resources/webgl-shared-render-pipeline';
 import {WEBGLCommandEncoder} from './resources/webgl-command-encoder';
 import {WEBGLCommandBuffer} from './resources/webgl-command-buffer';
 import {WEBGLVertexArray} from './resources/webgl-vertex-array';
@@ -70,6 +76,13 @@ import {getWebGLExtension} from '../context/helpers/webgl-extensions';
 
 /** WebGPU style Device API for a WebGL context */
 export class WebGLDevice extends Device {
+  static getDeviceFromContext(gl: WebGL2RenderingContext | null): WebGLDevice | null {
+    if (!gl) {
+      return null;
+    }
+    // @ts-expect-error Ingore WebGL2RenderingContext type
+    return gl.luma?.device ?? null;
+  }
   // Public `Device` API
 
   /** type of this device */
@@ -100,7 +113,7 @@ export class WebGLDevice extends Device {
   _constants: (TypedArray | null)[];
 
   /** State used by luma.gl classes - TODO - not used? */
-  readonly _extensions: GLExtensions = {};
+  readonly extensions!: GLExtensions;
   _polyfilled: boolean = false;
 
   /** Instance of Spector.js (if initialized) */
@@ -141,7 +154,8 @@ export class WebGLDevice extends Device {
     // Note that this can be avoided in webgl2adapter.create() if
     // DeviceProps._reuseDevices is set.
     // @ts-expect-error device is attached to context
-    let device: WebGLDevice | undefined = canvasContextProps.canvas?.gl?.device;
+    const existingContext = canvasContextProps.canvas?.gl ?? null;
+    let device: WebGLDevice | null = WebGLDevice.getDeviceFromContext(existingContext);
     if (device) {
       throw new Error(`WebGL context already attached to device ${device.id}`);
     }
@@ -190,8 +204,7 @@ export class WebGLDevice extends Device {
 
     // Note that the browser will only create one WebGL context per canvas.
     // This means that a newly created gl context may already have a device attached to it.
-    // @ts-expect-error luma.gl stores a device reference on the context.
-    device = gl.device;
+    device = WebGLDevice.getDeviceFromContext(gl);
     if (device) {
       if (props._reuseDevices) {
         log.log(
@@ -199,6 +212,9 @@ export class WebGLDevice extends Device {
           `Not creating a new Device, instead returning a reference to Device ${device.id} already attached to WebGL context`,
           device
         )();
+        // Destroy the orphaned canvas context that was created above (line 149)
+        // to prevent its ResizeObserver from firing callbacks with undefined device
+        this.canvasContext.destroy();
         device._reused = true;
         return device;
       }
@@ -214,16 +230,15 @@ export class WebGLDevice extends Device {
     this.spectorJS = initializeSpectorJS({...this.props, gl: this.handle});
 
     // Instrument context
-    (this.gl as any).device = this; // Update GL context: Link webgl context back to device
+    const contextData = getWebGLContextData(this.handle);
+    contextData.device = this; // Update GL context: Link webgl context back to device
+
+    this.extensions = contextData.extensions || (contextData.extensions = {});
 
     // initialize luma Device fields
-    this.info = getDeviceInfo(this.gl, this._extensions);
+    this.info = getDeviceInfo(this.gl, this.extensions);
     this.limits = new WebGLDeviceLimits(this.gl);
-    this.features = new WebGLDeviceFeatures(
-      this.gl,
-      this._extensions,
-      this.props._disabledFeatures
-    );
+    this.features = new WebGLDeviceFeatures(this.gl, this.extensions, this.props._disabledFeatures);
     if (this.props._initializeFeatures) {
       this.features.initializeFeatures();
     }
@@ -245,6 +260,7 @@ export class WebGLDevice extends Device {
     }
 
     this.commandEncoder = new WEBGLCommandEncoder(this, {id: `${this}-command-encoder`});
+    this.canvasContext._startObservers();
   }
 
   /**
@@ -258,6 +274,7 @@ export class WebGLDevice extends Device {
    * browser API for destroying WebGL contexts.
    */
   destroy(): void {
+    this.commandEncoder?.destroy();
     // Note that deck.gl (especially in React strict mode) depends on being able
     // to asynchronously create a Device against the same canvas (i.e. WebGL context)
     // multiple times and getting the same device back. Since deck.gl is not aware
@@ -265,7 +282,8 @@ export class WebGLDevice extends Device {
     // Therefore we must do nothing in destroy() if props._reuseDevices is true
     if (!this.props._reuseDevices && !this._reused) {
       // Delete the reference to the device that we store on the WebGL context
-      delete (this.gl as any).device;
+      const contextData = getWebGLContextData(this.handle);
+      contextData.device = null;
     }
   }
 
@@ -279,6 +297,10 @@ export class WebGLDevice extends Device {
     throw new Error('WebGL only supports a single canvas');
   }
 
+  createPresentationContext(props?: PresentationContextProps): PresentationContext {
+    return new WebGLPresentationContext(this, props || {});
+  }
+
   createBuffer(props: BufferProps | ArrayBuffer | ArrayBufferView): WEBGLBuffer {
     const newProps = this._normalizeBufferProps(props);
     return new WEBGLBuffer(this, newProps);
@@ -324,6 +346,13 @@ export class WebGLDevice extends Device {
     return new WEBGLRenderPipeline(this, props);
   }
 
+  override _createSharedRenderPipelineWebGL(props: RenderPipelineProps): SharedRenderPipeline {
+    return new WEBGLSharedRenderPipeline(
+      this,
+      props as RenderPipelineProps & {vs: WEBGLShader; fs: WEBGLShader}
+    );
+  }
+
   createComputePipeline(props?: ComputePipelineProps): ComputePipeline {
     throw new Error('ComputePipeline not supported in WebGL');
   }
@@ -337,14 +366,32 @@ export class WebGLDevice extends Device {
    * https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/commit
    * Chrome's offscreen canvas does not require gl.commit
    */
-  submit(commandBuffer: WEBGLCommandBuffer): void {
+  submit(commandBuffer?: WEBGLCommandBuffer): void {
+    let submittedCommandEncoder: WEBGLCommandEncoder | null = null;
     if (!commandBuffer) {
-      commandBuffer = this.commandEncoder.finish();
+      submittedCommandEncoder = this.commandEncoder;
+      commandBuffer = submittedCommandEncoder.finish();
       this.commandEncoder.destroy();
-      this.commandEncoder = this.createCommandEncoder({id: `${this.id}-default-encoder`});
+      this.commandEncoder = this.createCommandEncoder({
+        id: submittedCommandEncoder.props.id,
+        timeProfilingQuerySet: submittedCommandEncoder.getTimeProfilingQuerySet()
+      });
     }
 
-    commandBuffer._executeCommands();
+    try {
+      commandBuffer._executeCommands();
+
+      if (submittedCommandEncoder) {
+        submittedCommandEncoder
+          .resolveTimeProfilingQuerySet()
+          .then(() => {
+            this.commandEncoder._gpuTimeMs = submittedCommandEncoder._gpuTimeMs;
+          })
+          .catch(() => {});
+      }
+    } finally {
+      commandBuffer.destroy();
+    }
   }
 
   //
@@ -407,7 +454,7 @@ export class WebGLDevice extends Device {
   override _getDeviceSpecificTextureFormatCapabilities(
     capabilities: DeviceTextureFormatCapabilities
   ): DeviceTextureFormatCapabilities {
-    return getTextureFormatCapabilitiesWebGL(this.gl, capabilities, this._extensions);
+    return getTextureFormatCapabilitiesWebGL(this.gl, capabilities, this.extensions);
   }
 
   //
@@ -510,8 +557,8 @@ export class WebGLDevice extends Device {
 
   /** Ensure extensions are only requested once */
   getExtension(name: keyof GLExtensions): GLExtensions {
-    getWebGLExtension(this.gl, name, this._extensions);
-    return this._extensions;
+    getWebGLExtension(this.gl, name, this.extensions);
+    return this.extensions;
   }
 
   // INTERNAL SUPPORT METHODS FOR WEBGL RESOURCES

package/src/adapter/webgl-presentation-context.ts

@@ -0,0 +1,93 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {PresentationContextProps, TextureFormatDepthStencil, Framebuffer} from '@luma.gl/core';
+import {PresentationContext} from '@luma.gl/core';
+import type {WebGLDevice} from './webgl-device';
+
+type PresentationCanvasRenderingContext2D =
+  | CanvasRenderingContext2D
+  | OffscreenCanvasRenderingContext2D;
+
+/**
+ * Tracks a non-WebGL destination canvas while rendering into the device's default canvas context.
+ */
+export class WebGLPresentationContext extends PresentationContext {
+  readonly device: WebGLDevice;
+  readonly handle = null;
+  readonly context2d: PresentationCanvasRenderingContext2D;
+
+  get [Symbol.toStringTag](): string {
+    return 'WebGLPresentationContext';
+  }
+
+  constructor(device: WebGLDevice, props: PresentationContextProps = {}) {
+    super(props);
+    this.device = device;
+    const contextLabel = `${this[Symbol.toStringTag]}(${this.id})`;
+
+    const defaultCanvasContext = this.device.getDefaultCanvasContext();
+    if (!defaultCanvasContext.offscreenCanvas) {
+      throw new Error(
+        `${contextLabel}: WebGL PresentationContext requires the default CanvasContext canvas to be an OffscreenCanvas`
+      );
+    }
+
+    const context2d = this.canvas.getContext('2d');
+    if (!context2d) {
+      throw new Error(`${contextLabel}: Failed to create 2d presentation context`);
+    }
+    this.context2d = context2d;
+
+    this._setAutoCreatedCanvasId(`${this.device.id}-presentation-canvas`);
+    this._configureDevice();
+    this._startObservers();
+  }
+
+  present(): void {
+    this._resizeDrawingBufferIfNeeded();
+    this.device.submit();
+
+    const defaultCanvasContext = this.device.getDefaultCanvasContext();
+    const [sourceWidth, sourceHeight] = defaultCanvasContext.getDrawingBufferSize();
+
+    // Responsive layouts can transiently collapse presentation canvases to 0x0 during reflow.
+    // In that case WebGL has nothing meaningful to present, and drawImage() would throw when the
+    // offscreen source canvas has zero width or height.
+    if (
+      this.drawingBufferWidth === 0 ||
+      this.drawingBufferHeight === 0 ||
+      sourceWidth === 0 ||
+      sourceHeight === 0 ||
+      defaultCanvasContext.canvas.width === 0 ||
+      defaultCanvasContext.canvas.height === 0
+    ) {
+      return;
+    }
+
+    if (
+      sourceWidth !== this.drawingBufferWidth ||
+      sourceHeight !== this.drawingBufferHeight ||
+      defaultCanvasContext.canvas.width !== this.drawingBufferWidth ||
+      defaultCanvasContext.canvas.height !== this.drawingBufferHeight
+    ) {
+      throw new Error(
+        `${this[Symbol.toStringTag]}(${this.id}): Default canvas context size ${sourceWidth}x${sourceHeight} does not match presentation size ${this.drawingBufferWidth}x${this.drawingBufferHeight}`
+      );
+    }
+
+    this.context2d.clearRect(0, 0, this.drawingBufferWidth, this.drawingBufferHeight);
+    this.context2d.drawImage(defaultCanvasContext.canvas, 0, 0);
+  }
+
+  protected override _configureDevice(): void {}
+
+  protected override _getCurrentFramebuffer(options?: {
+    depthStencilFormat?: TextureFormatDepthStencil | false;
+  }): Framebuffer {
+    const defaultCanvasContext = this.device.getDefaultCanvasContext();
+    defaultCanvasContext.setDrawingBufferSize(this.drawingBufferWidth, this.drawingBufferHeight);
+    return defaultCanvasContext.getCurrentFramebuffer(options);
+  }
+}

package/src/context/debug/spector.ts

@@ -4,6 +4,7 @@
 
 import {log} from '@luma.gl/core';
 import {loadScript} from '../../utils/load-script';
+import {getWebGLContextData} from '../helpers/webgl-context-data';
 
 import type {Spector} from './spector-types';
 
@@ -91,11 +92,10 @@ export function initializeSpectorJS(props: SpectorProps): Spector | null {
   if (props.gl) {
     // capture startup
     const gl = props.gl;
-    // @ts-expect-error
-    const device = gl.device;
+    const contextData = getWebGLContextData(gl);
+    const device = contextData.device;
     spector?.startCapture(props.gl, 500); // 500 commands
-    // @ts-expect-error
-    gl.device = device;
+    contextData.device = device;
 
     new Promise(resolve => setTimeout(resolve, 2000)).then(_ => {
       log.info('Spector capture stopped after 2 seconds')();

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

@@ -104,6 +104,8 @@ function getDebugContext(
   // Store the debug context
   data.realContext = gl;
   data.debugContext = debugContext;
+  // Share the context metadata object with the debug context so lookups stay consistent.
+  (debugContext as {luma?: unknown}).luma = data;
   debugContext.debug = true;
 
   // Return it

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

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import {getWebGLContextData} from './webgl-context-data';
+
 /**
  * ContextProps
  * @param onContextLost
@@ -55,15 +57,11 @@ export function createBrowserContext(
     }
 
     // Creation failed with failIfMajorPerformanceCaveat - Try a Software GPU
+    let softwareRenderer = false;
     if (!gl && allowSoftwareRenderer) {
       webglProps.failIfMajorPerformanceCaveat = false;
       gl = canvas.getContext('webgl2', webglProps);
-      if (gl) {
-        // @ts-expect-error
-        gl.luma ||= {};
-        // @ts-expect-error
-        gl.luma.softwareRenderer = true;
-      }
+      softwareRenderer = true;
     }
 
     if (!gl) {
@@ -79,6 +77,10 @@ export function createBrowserContext(
       throw new Error(`Failed to create WebGL context: ${errorMessage}`);
     }
 
+    // Initialize luma.gl specific context data
+    const luma = getWebGLContextData(gl);
+    luma.softwareRenderer = softwareRenderer;
+
     // Carefully extract and wrap callbacks to prevent addEventListener from rebinding them.
     const {onContextLost, onContextRestored} = props;
     canvas.addEventListener('webglcontextlost', (event: Event) => onContextLost(event), false);
@@ -88,8 +90,6 @@ export function createBrowserContext(
       false
     );
 
-    // @ts-expect-error
-    gl.luma ||= {};
     return gl;
   } finally {
     canvas.removeEventListener('webglcontextcreationerror', onCreateError, false);

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

@@ -2,12 +2,17 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
+import type {GLExtensions} from '@luma.gl/constants';
+
 /**
  * Stores luma.gl specific state associated with a context
  */
 export interface WebGLContextData {
+  /** This type is used by lower level code that is not aware of the Device type */
+  device?: unknown;
   _polyfilled: boolean;
-  _extensions: Record<string, any>;
+  extensions: GLExtensions;
+  softwareRenderer?: boolean;
 }
 
 /**
@@ -16,16 +21,17 @@ export interface WebGLContextData {
  */
 export function getWebGLContextData(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;
-  }
+  const contextData = (gl.luma as WebGLContextData | null) || {
+    _polyfilled: false,
+    extensions: {},
+    softwareRenderer: false
+  };
+
+  contextData._polyfilled ??= false;
+  contextData.extensions ||= {};
 
   // @ts-expect-error
-  return gl.luma;
+  gl.luma = contextData;
+
+  return contextData;
 }

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

@@ -18,7 +18,7 @@ export type {GLParameters};
 /**
  * Sets any GL parameter regardless of function (gl.blendMode, ...)
  *
- * @note requires a `cache` object to be set on the context (gl.state.cache)
+ * @note requires a `cache` object to be set on the context (lumaState.cache)
  * This object is used to fill in any missing values for composite setter functions
  */
 export function setGLParameters(gl: WebGL2RenderingContext, parameters: GLParameters): void {
@@ -58,7 +58,7 @@ export function setGLParameters(gl: WebGL2RenderingContext, parameters: GLParame
   // But it is too inconvenient to always require a cache parameter here.
   // This is the ONLY external dependency in this module/
   // @ts-expect-error
-  const cache = gl.state && gl.state.cache;
+  const cache = gl.lumaState?.cache;
   if (cache) {
     for (const key in compositeSetters) {
       // TODO - avoid calling composite setters if values have not changed.

package/src/context/state-tracker/webgl-state-tracker.ts

@@ -21,7 +21,7 @@ import {
 export class WebGLStateTracker {
   static get(gl: WebGL2RenderingContext): WebGLStateTracker {
     // @ts-expect-error
-    return gl.state as WebGLStateTracker;
+    return gl.lumaState as WebGLStateTracker;
   }
 
   gl: WebGL2RenderingContext;
@@ -78,7 +78,7 @@ export class WebGLStateTracker {
     this.initialized = true;
 
     // @ts-expect-error
-    this.gl.state = this;
+    this.gl.lumaState = this;
 
     installProgramSpy(gl);
 

package/src/utils/fill-array.ts

@@ -16,7 +16,7 @@ export function fillArray(options: {
   const total = count * length;
   let copied = 0;
   for (let i = start; copied < length; copied++) {
-    target[i++] = source[copied];
+    target[i++] = source[copied] ?? 0;
   }
 
   while (copied < total) {