@luma.gl/webgl 9.1.0-beta.8 → 9.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.1.0-beta.8",
+  "version": "9.1.0",
   "description": "WebGL2 adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
@@ -43,9 +43,9 @@
     "@luma.gl/core": "^9.1.0-alpha.1"
   },
   "dependencies": {
-    "@luma.gl/constants": "9.1.0-beta.8",
+    "@luma.gl/constants": "9.1.0",
     "@math.gl/types": "^4.1.0",
     "@probe.gl/env": "^4.0.8"
   },
-  "gitHead": "10846580c7a10c4cc48de01a4e5259cc0a00c249"
+  "gitHead": "e5cb5a93674bc7cc571c26dee4d2aef841fdff7f"
 }

package/src/adapter/converters/webgl-texture-table.ts

@@ -148,8 +148,8 @@ export const WEBGL_TEXTURE_FORMATS: Record<TextureFormat, WebGLFormatInfo> = {
   'rgb9e5ufloat': {gl: GL.RGB9_E5}, // , filter: true},
   'rg11b10ufloat': {gl: GL.R11F_G11F_B10F, rb: true},
   'rgb10a2unorm': {gl: GL.RGB10_A2, rb: true},
-  'rgb10a2uint': {gl: GL.RGB10_A2UI, rb: true},
-  
+  'rgb10a2uint-webgl': {gl: GL.RGB10_A2UI, rb: true},
+
   // 48-bit formats
   'rgb16unorm-webgl': {gl: GL.RGB16_EXT}, // rgb not renderable
   'rgb16snorm-webgl': {gl: GL.RGB16_SNORM_EXT}, // rgb not renderable

package/src/adapter/resources/webgl-buffer.ts

@@ -33,9 +33,7 @@ export class WEBGLBuffer extends Buffer {
 
     const handle = typeof props === 'object' ? props.handle : undefined;
     this.handle = handle || this.gl.createBuffer();
-    device._setWebGLDebugMetadata(this.handle, this, {
-      spector: {...this.props, data: typeof this.props.data}
-    });
+    device.setSpectorMetadata(this.handle, {...this.props, data: typeof this.props.data});
 
     // - In WebGL1, need to make sure we use GL.ELEMENT_ARRAY_BUFFER when initializing element buffers
     //   otherwise buffer type will lock to generic (non-element) buffer

package/src/adapter/resources/webgl-framebuffer.ts

@@ -33,8 +33,8 @@ export class WEBGLFramebuffer extends Framebuffer {
       this.props.handle || isDefaultFramebuffer ? this.props.handle : this.gl.createFramebuffer();
 
     if (!isDefaultFramebuffer) {
-      // default framebuffer handle is null, so we can't set debug metadata...
-      device._setWebGLDebugMetadata(this.handle, this, {spector: this.props});
+      // default framebuffer handle is null, so we can't set spector metadata...
+      device.setSpectorMetadata(this.handle, {id: this.props.id, props: this.props});
 
       // Auto create textures for attachments if needed
       this.autoCreateAttachmentTextures();

package/src/adapter/resources/webgl-render-pass.ts

@@ -9,7 +9,6 @@ import {GL, GLParameters} from '@luma.gl/constants';
 import {withGLParameters} from '../../context/state-tracker/with-parameters';
 import {setGLParameters} from '../../context/parameters/unified-parameter-api';
 import {WEBGLQuerySet} from './webgl-query-set';
-import {WEBGLFramebuffer} from './webgl-framebuffer';
 
 const COLOR_CHANNELS = [0x1, 0x2, 0x4, 0x8]; // GPUColorWrite RED, GREEN, BLUE, ALPHA
 
@@ -32,7 +31,7 @@ export class WEBGLRenderPass extends RenderPass {
         viewport = [0, 0, width, height];
       } else {
         // Instead of using our own book-keeping, we can just read the values from the WebGL context
-        const [width, height] = device.getDefaultCanvasContext().getDrawingBufferSize();
+        const [width, height] = device.getCanvasContext().getDrawingBufferSize();
         viewport = [0, 0, width, height];
       }
     }
@@ -42,9 +41,7 @@ export class WEBGLRenderPass extends RenderPass {
     this.setParameters({viewport, ...this.props.parameters});
 
     // Specify mapping of draw buffer locations to color attachments
-    const webglFramebuffer = this.props.framebuffer as WEBGLFramebuffer;
-    // Default framebuffers can only be set to GL.BACK or GL.NONE
-    if (webglFramebuffer?.handle) {
+    if (this.props.framebuffer) {
       const drawBuffers = this.props.framebuffer.colorAttachments.map(
         (_, i) => GL.COLOR_ATTACHMENT0 + i
       );

package/src/adapter/resources/webgl-render-pipeline.ts

@@ -57,15 +57,11 @@ export class WEBGLRenderPipeline extends RenderPipeline {
   _uniformCount: number = 0;
   _uniformSetters: Record<string, Function> = {}; // TODO are these used?
 
-  override get [Symbol.toStringTag]() {
-    return 'WEBGLRenderPipeline';
-  }
-
   constructor(device: WebGLDevice, props: RenderPipelineProps) {
     super(device, props);
     this.device = device;
     this.handle = this.props.handle || this.device.gl.createProgram();
-    this.device._setWebGLDebugMetadata(this.handle, this, {spector: {id: this.props.id}});
+    this.device.setSpectorMetadata(this.handle, {id: this.props.id});
 
     // Create shaders if needed
     this.vs = props.vs as WEBGLShader;
@@ -82,9 +78,10 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     }
 
     this._linkShaders();
-    log.time(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+
+    log.time(1, `RenderPipeline ${this.id} - shaderLayout introspection`)();
     this.introspectedLayout = getShaderLayoutFromGLSL(this.device.gl, this.handle);
-    log.timeEnd(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+    log.timeEnd(1, `RenderPipeline ${this.id} - shaderLayout introspection`)();
 
     // Merge provided layout with introspected layout
     this.shaderLayout = mergeShaderLayout(this.introspectedLayout, props.shaderLayout);
@@ -92,13 +89,9 @@ export class WEBGLRenderPipeline extends RenderPipeline {
 
   override destroy(): void {
     if (this.handle) {
-      // log.error(`Deleting program ${this.id}`)();
-      this.device.gl.useProgram(null);
       this.device.gl.deleteProgram(this.handle);
+      // this.handle = null;
       this.destroyed = true;
-      // @ts-expect-error
-      this.handle.destroyed = true;
-      this.handle = null;
     }
   }
 

package/src/adapter/resources/webgl-shader.ts

@@ -27,10 +27,6 @@ export class WEBGLShader extends Shader {
       default:
         throw new Error(this.props.stage);
     }
-
-    // default framebuffer handle is null, so we can't set spector metadata...
-    device._setWebGLDebugMetadata(this.handle, this, {spector: this.props});
-
     this._compile(this.source);
   }
 
@@ -38,10 +34,8 @@ export class WEBGLShader extends Shader {
     if (this.handle) {
       this.removeStats();
       this.device.gl.deleteShader(this.handle);
-      this.destroyed = true;
-      // @ts-expect-error
-      this.handle.destroyed = true;
       // this.handle = null;
+      this.destroyed = true;
     }
   }
 

package/src/adapter/resources/webgl-texture.ts

@@ -110,12 +110,7 @@ export class WEBGLTexture extends Texture {
   // eslint-disable-next-line max-statements
   _initialize(propsWithData: TextureProps): void {
     this.handle = this.props.handle || this.gl.createTexture();
-    this.device._setWebGLDebugMetadata(this.handle, this, {
-      spector: {
-        ...this.props,
-        data: propsWithData.data
-      }
-    });
+    this.device.setSpectorMetadata(this.handle, {...this.props, data: propsWithData.data});
 
     let {width, height} = propsWithData;
 

package/src/adapter/webgl-adapter.ts

@@ -36,7 +36,8 @@ export class WebGLAdapter extends Adapter {
 
   /**
    * Get a device instance from a GL context
-   * Creates and instruments the device if not already created
+   * Creates a WebGLCanvasContext against the contexts canvas
+   * @note autoResize will be disabled, assuming that whoever created the external context will be handling resizes.
    * @param gl
    * @returns
    */
@@ -52,7 +53,13 @@ export class WebGLAdapter extends Adapter {
     if (!isWebGL(gl)) {
       throw new Error('Invalid WebGL2RenderingContext');
     }
-    return new WebGLDevice({_handle: gl as WebGL2RenderingContext});
+
+    // We create a new device using the provided WebGL context and its canvas
+    // Assume that whoever created the external context will be handling resizes.
+    return new WebGLDevice({
+      _handle: gl,
+      createCanvasContext: {canvas: gl.canvas, autoResize: false}
+    });
   }
 
   async create(props: DeviceProps = {}): Promise<WebGLDevice> {
@@ -94,7 +101,7 @@ ${device.info.vendor}, ${device.info.renderer} for canvas: ${device.canvasContex
 }
 
 /** Check if supplied parameter is a WebGL2RenderingContext */
-function isWebGL(gl: any): boolean {
+function isWebGL(gl: any): gl is WebGL2RenderingContext {
   if (typeof WebGL2RenderingContext !== 'undefined' && gl instanceof WebGL2RenderingContext) {
     return true;
   }

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {CanvasContextProps} from '@luma.gl/core';
+import type {CanvasContextProps, TextureFormat} from '@luma.gl/core';
 import {CanvasContext} from '@luma.gl/core';
 import {WebGLDevice} from './webgl-device';
 import {WEBGLFramebuffer} from './resources/webgl-framebuffer';
@@ -12,8 +12,10 @@ import {WEBGLFramebuffer} from './resources/webgl-framebuffer';
  */
 export class WebGLCanvasContext extends CanvasContext {
   readonly device: WebGLDevice;
-  readonly handle: unknown = null;
+  readonly format: TextureFormat = 'rgba8unorm';
+  readonly depthStencilFormat: TextureFormat = 'depth24plus';
 
+  presentationSize: [number, number];
   private _framebuffer: WEBGLFramebuffer | null = null;
 
   get [Symbol.toStringTag](): string {
@@ -24,19 +26,28 @@ export class WebGLCanvasContext extends CanvasContext {
     // Note: Base class creates / looks up the canvas (unless under Node.js)
     super(props);
     this.device = device;
-
-    // Base class constructor cannot access derived methods/fields, so we need to call these functions in the subclass constructor
+    this.presentationSize = [-1, -1];
     this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
-    this.updateSize([this.drawingBufferWidth, this.drawingBufferHeight]);
+    this.update();
   }
 
   getCurrentFramebuffer(): WEBGLFramebuffer {
+    this.update();
     // Setting handle to null returns a reference to the default framebuffer
     this._framebuffer = this._framebuffer || new WEBGLFramebuffer(this.device, {handle: null});
     return this._framebuffer;
   }
 
-  updateSize(size: [number, number]): void {}
+  /** Resizes and updates render targets if necessary */
+  update() {
+    const size = this.getPixelSize();
+    const sizeChanged =
+      size[0] !== this.presentationSize[0] || size[1] !== this.presentationSize[1];
+    if (sizeChanged) {
+      this.presentationSize = size;
+      this.resize();
+    }
+  }
 
   /**
    * Resize the canvas' drawing buffer.
@@ -53,10 +64,10 @@ export class WebGLCanvasContext extends CanvasContext {
   resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
     if (!this.device.gl) return;
 
-    // Resize browser context. TODO - this likely needs to be rewritten
+    // Resize browser context .
     if (this.canvas) {
       const devicePixelRatio = this.getDevicePixelRatio(options?.useDevicePixels);
-      this._setDevicePixelRatio(devicePixelRatio, options);
+      this.setDevicePixelRatio(devicePixelRatio, options);
       return;
     }
   }

package/src/adapter/webgl-device.ts

@@ -32,8 +32,7 @@ import type {
   // CommandEncoder,
   CommandEncoderProps,
   TransformFeedbackProps,
-  QuerySetProps,
-  Resource
+  QuerySetProps
 } from '@luma.gl/core';
 import {Device, CanvasContext, log} from '@luma.gl/core';
 import type {GLExtensions} from '@luma.gl/constants';
@@ -72,7 +71,9 @@ import {getWebGLExtension} from '../context/helpers/webgl-extensions';
 
 /** WebGPU style Device API for a WebGL context */
 export class WebGLDevice extends Device {
+  //
   // Public `Device` API
+  //
 
   /** type of this device */
   readonly type = 'webgl';
@@ -81,12 +82,10 @@ export class WebGLDevice extends Device {
   readonly handle: WebGL2RenderingContext;
   features: WebGLDeviceFeatures;
   limits: WebGLDeviceLimits;
+
   readonly info: DeviceInfo;
   readonly canvasContext: WebGLCanvasContext;
 
-  readonly preferredColorFormat = 'rgba8unorm';
-  readonly preferredDepthFormat = 'depth24plus';
-
   readonly lost: Promise<{reason: 'destroyed'; message: string}>;
 
   private _resolveContextLost?: (value: {reason: 'destroyed'; message: string}) => void;
@@ -141,19 +140,24 @@ export class WebGLDevice extends Device {
       webglContextAttributes.powerPreference = props.powerPreference;
     }
 
-    const gl = createBrowserContext(
-      this.canvasContext.canvas,
-      {
-        onContextLost: (event: Event) =>
-          this._resolveContextLost?.({
-            reason: 'destroyed',
-            message: 'Entered sleep mode, or too many apps or browser tabs are using the GPU.'
-          }),
-        // eslint-disable-next-line no-console
-        onContextRestored: (event: Event) => console.log('WebGL context restored')
-      },
-      webglContextAttributes
-    );
+    // Check if we should attach to an externally created context or create a new context
+    const externalGLContext = this.props._handle as WebGL2RenderingContext | null;
+
+    const gl =
+      externalGLContext ||
+      createBrowserContext(
+        this.canvasContext.canvas,
+        {
+          onContextLost: (event: Event) =>
+            this._resolveContextLost?.({
+              reason: 'destroyed',
+              message: 'Entered sleep mode, or too many apps or browser tabs are using the GPU.'
+            }),
+          // eslint-disable-next-line no-console
+          onContextRestored: (event: Event) => console.log('WebGL context restored')
+        },
+        webglContextAttributes
+      );
 
     if (!gl) {
       throw new Error('WebGL context creation failed');
@@ -189,6 +193,10 @@ export class WebGLDevice extends Device {
       this.features.initializeFeatures();
     }
 
+    if (canvasContextProps.autoResize !== false) {
+      this.canvasContext.resize();
+    }
+
     // Install context state tracking
     const glState = new WebGLStateTracker(this.gl, {
       log: (...args: any[]) => log.log(1, ...args)()
@@ -392,6 +400,16 @@ export class WebGLDevice extends Device {
     webglState.pop();
   }
 
+  /**
+   * Storing data on a special field on WebGLObjects makes that data visible in SPECTOR chrome debug extension
+   * luma.gl ids and props can be inspected
+   */
+  setSpectorMetadata(handle: unknown, props: Record<string, unknown>) {
+    // @ts-expect-error
+    // eslint-disable-next-line camelcase
+    handle.__SPECTOR_Metadata = props;
+  }
+
   /**
    * Returns the GL.<KEY> constant that corresponds to a numeric value of a GL constant
    * Be aware that there are some duplicates especially for constants that are 0,
@@ -462,26 +480,6 @@ export class WebGLDevice extends Device {
     getWebGLExtension(this.gl, name, this._extensions);
     return this._extensions;
   }
-
-  // INTERNAL SUPPORT METHODS FOR WEBGL RESOURCES
-
-  /**
-   * Storing data on a special field on WebGLObjects makes that data visible in SPECTOR chrome debug extension
-   * luma.gl ids and props can be inspected
-   */
-  _setWebGLDebugMetadata(
-    handle: unknown,
-    resource: Resource<any>,
-    options: {spector: Record<string, unknown>}
-  ): void {
-    // @ts-expect-error
-    handle.luma = resource;
-
-    const spectorMetadata = {props: options.spector, id: options.spector.id};
-    // @ts-expect-error
-    // eslint-disable-next-line camelcase
-    handle.__SPECTOR_Metadata = spectorMetadata;
-  }
 }
 
 /** Set constant float array attribute */