@luma.gl/webgl 9.1.0-beta.1 → 9.1.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.1.0-beta.1",
+  "version": "9.1.0-beta.11",
   "description": "WebGL2 adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
@@ -40,12 +40,12 @@
     "prepublishOnly": "npm run build-minified-bundle && npm run build-dev-bundle"
   },
   "peerDependencies": {
-    "@luma.gl/core": "9.1.0-alpha.19"
+    "@luma.gl/core": "^9.1.0-alpha.1"
   },
   "dependencies": {
-    "@luma.gl/constants": "9.1.0-beta.1",
+    "@luma.gl/constants": "9.1.0-beta.11",
     "@math.gl/types": "^4.1.0",
     "@probe.gl/env": "^4.0.8"
   },
-  "gitHead": "e04bfb138f96d690992f0e0a67b358cbe23bd59f"
+  "gitHead": "aab3748ab83360e6ee611f9b4a2d805e5f17fb01"
 }

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-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,14 +64,10 @@ export class WebGLCanvasContext extends CanvasContext {
   resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
     if (!this.device.gl) return;
 
-    if (this.props.autoResize) {
-      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;
@@ -189,6 +188,8 @@ export class WebGLDevice extends Device {
       this.features.initializeFeatures();
     }
 
+    this.canvasContext.resize();
+
     // Install context state tracking
     const glState = new WebGLStateTracker(this.gl, {
       log: (...args: any[]) => log.log(1, ...args)()
@@ -392,6 +393,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 +473,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 */