@luma.gl/webgl 9.3.0-alpha.4 → 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,
@@ -41,6 +44,7 @@ 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';
@@ -53,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';
@@ -255,6 +260,7 @@ export class WebGLDevice extends Device {
     }
 
     this.commandEncoder = new WEBGLCommandEncoder(this, {id: `${this}-command-encoder`});
+    this.canvasContext._startObservers();
   }
 
   /**
@@ -268,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
@@ -290,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);
@@ -335,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');
   }
@@ -348,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();
+    }
   }
 
   //

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);
+  }
+}