@luma.gl/webgl 9.1.9 → 9.2.0-alpha.2

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

@@ -8,7 +8,7 @@ import type {
   CopyTextureToBufferOptions,
   CopyTextureToTextureOptions
   // ClearTextureOptions,
-  // ReadTextureOptions
+  // TextureReadOptions
 } from '@luma.gl/core';
 import {CommandBuffer, Texture, Framebuffer} from '@luma.gl/core';
 import {
@@ -53,7 +53,7 @@ type ClearTextureCommand = {
 
 type ReadTextureCommand = {
   name: 'read-texture';
-  options: {}; // ReadTextureOptions;
+  options: {}; // TextureReadOptions;
 };
 
 type Command =
@@ -65,7 +65,8 @@ type Command =
   | ReadTextureCommand;
 
 export class WEBGLCommandBuffer extends CommandBuffer {
-  device: WebGLDevice;
+  readonly device: WebGLDevice;
+  readonly handle = null;
   commands: Command[] = [];
 
   constructor(device: WebGLDevice) {
@@ -73,7 +74,7 @@ export class WEBGLCommandBuffer extends CommandBuffer {
     this.device = device;
   }
 
-  submitCommands(commands: Command[] = this.commands) {
+  _executeCommands(commands: Command[] = this.commands) {
     for (const command of commands) {
       switch (command.name) {
         case 'copy-buffer-to-buffer':
@@ -285,13 +286,13 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
   // TODO - support gl.readBuffer (WebGL2 only)
   // const prevBuffer = gl.readBuffer(attachment);
 
-  let texture: WEBGLTexture = null;
+  let texture: WEBGLTexture;
   let textureTarget: GL;
   if (destinationTexture instanceof WEBGLTexture) {
     texture = destinationTexture;
     width = Number.isFinite(width) ? width : texture.width;
     height = Number.isFinite(height) ? height : texture.height;
-    texture.bind(0);
+    texture._bind(0);
     textureTarget = texture.glTarget;
   } else {
     throw new Error('invalid destination');
@@ -329,7 +330,7 @@ function _copyTextureToTexture(device: WebGLDevice, options: CopyTextureToTextur
   }
 
   if (texture) {
-    texture.unbind();
+    texture._unbind();
   }
   device.gl.bindFramebuffer(GL.FRAMEBUFFER, prevHandle);
   if (destroyFramebuffer) {
@@ -413,7 +414,7 @@ function getFramebuffer(source: Texture | Framebuffer): {
  * Returns number of components in a specific readPixels WebGL format
  * @todo use shadertypes utils instead?
  */
-export function glFormatToComponents(format): 1 | 2 | 3 | 4 {
+export function glFormatToComponents(format: GL): 1 | 2 | 3 | 4 {
   switch (format) {
     case GL.ALPHA:
     case GL.R32F:

package/src/adapter/resources/webgl-command-encoder.ts

@@ -4,21 +4,26 @@
 
 import {CommandEncoder, CommandEncoderProps} from '@luma.gl/core';
 import type {
+  RenderPassProps,
+  ComputePass,
+  ComputePassProps,
+  QuerySet,
+  Buffer,
   CopyBufferToBufferOptions,
   CopyBufferToTextureOptions,
   CopyTextureToBufferOptions,
-  CopyTextureToTextureOptions,
+  CopyTextureToTextureOptions
   // ClearTextureOptions,
-  // ReadTextureOptions,
-  QuerySet,
-  Buffer
+  // TextureReadOptions,
 } from '@luma.gl/core';
 
 import {WEBGLCommandBuffer} from './webgl-command-buffer';
+import {WEBGLRenderPass} from './webgl-render-pass';
 import {WebGLDevice} from '../webgl-device';
 
 export class WEBGLCommandEncoder extends CommandEncoder {
   readonly device: WebGLDevice;
+  readonly handle = null;
 
   readonly commandBuffer: WEBGLCommandBuffer;
 
@@ -30,13 +35,17 @@ export class WEBGLCommandEncoder extends CommandEncoder {
 
   override destroy(): void {}
 
-  override finish(): void {
-    this.commandBuffer.submitCommands();
+  override finish(): WEBGLCommandBuffer {
+    return this.commandBuffer;
   }
 
-  // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
-  // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
-  // finish(options?: {id?: string}): GPUCommandBuffer;
+  beginRenderPass(props: RenderPassProps): WEBGLRenderPass {
+    return new WEBGLRenderPass(this.device, props);
+  }
+
+  beginComputePass(props: ComputePassProps): ComputePass {
+    throw new Error('ComputePass not supported in WebGL');
+  }
 
   copyBufferToBuffer(options: CopyBufferToBufferOptions): void {
     this.commandBuffer.commands.push({name: 'copy-buffer-to-buffer', options});

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

@@ -14,9 +14,9 @@ export type Attachment = WEBGLTextureView | WEBGLTexture; // | WEBGLRenderbuffer
 
 /** luma.gl Framebuffer, WebGL implementation  */
 export class WEBGLFramebuffer extends Framebuffer {
-  device: WebGLDevice;
+  readonly device: WebGLDevice;
   gl: WebGL2RenderingContext;
-  handle: WebGLFramebuffer;
+  readonly handle: WebGLFramebuffer;
 
   colorAttachments: WEBGLTextureView[] = [];
   depthStencilAttachment: WEBGLTextureView | null = null;
@@ -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 spector metadata...
-      device.setSpectorMetadata(this.handle, {id: this.props.id, props: this.props});
+      // default framebuffer handle is null, so we can't set debug metadata...
+      device._setWebGLDebugMetadata(this.handle, this, {spector: this.props});
 
       // Auto create textures for attachments if needed
       this.autoCreateAttachmentTextures();

package/src/adapter/resources/webgl-query-set.ts

@@ -7,8 +7,8 @@ import {WebGLDevice} from '../webgl-device';
  * Asynchronous queries for different kinds of information
  */
 export class WEBGLQuerySet extends QuerySet {
-  device: WebGLDevice;
-  handle: WebGLQuery;
+  readonly device: WebGLDevice;
+  readonly handle: WebGLQuery;
 
   target: number | null = null;
   _queryPending = false;
@@ -27,7 +27,11 @@ export class WEBGLQuerySet extends QuerySet {
       throw new Error('WebGL QuerySet can only have one value');
     }
 
-    this.handle = this.device.gl.createQuery();
+    const handle = this.device.gl.createQuery();
+    if (!handle) {
+      throw new Error('WebGL query not supported');
+    }
+    this.handle = handle;
     Object.seal(this);
   }
 

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

@@ -11,20 +11,21 @@ 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
+const COLOR_CHANNELS: NumberArray4 = [0x1, 0x2, 0x4, 0x8]; // GPUColorWrite RED, GREEN, BLUE, ALPHA
 
 export class WEBGLRenderPass extends RenderPass {
   readonly device: WebGLDevice;
+  readonly handle = null;
 
   /** Parameters that should be applied before each draw call */
-  glParameters: GLParameters;
+  glParameters: GLParameters = {};
 
   constructor(device: WebGLDevice, props: RenderPassProps) {
     super(device, props);
     this.device = device;
 
     // If no viewport is provided, apply reasonably defaults
-    let viewport;
+    let viewport: NumberArray4 | undefined;
     if (!props?.parameters?.viewport) {
       if (props?.framebuffer) {
         // Set the viewport to the size of the framebuffer
@@ -32,7 +33,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.getCanvasContext().getDrawingBufferSize();
+        const [width, height] = device.getDefaultCanvasContext().getDrawingBufferSize();
         viewport = [0, 0, width, height];
       }
     }
@@ -43,15 +44,14 @@ export class WEBGLRenderPass extends RenderPass {
 
     // Specify mapping of draw buffer locations to color attachments
     const webglFramebuffer = this.props.framebuffer as WEBGLFramebuffer;
-    if (webglFramebuffer?.handle) {
-      if (this.props.framebuffer) {
-        const drawBuffers = this.props.framebuffer.colorAttachments.map(
-          (_, i) => GL.COLOR_ATTACHMENT0 + i
-        );
-        this.device.gl.drawBuffers(drawBuffers);
-      } else {
-        this.device.gl.drawBuffers([GL.BACK]);
-      }
+    // Default framebuffers can only be set to GL.BACK or GL.NONE
+    if (this.props.framebuffer && webglFramebuffer?.handle) {
+      const drawBuffers = this.props.framebuffer.colorAttachments.map(
+        (_, i) => GL.COLOR_ATTACHMENT0 + i
+      );
+      this.device.gl.drawBuffers(drawBuffers);
+    } else {
+      this.device.gl.drawBuffers([GL.BACK]);
     }
 
     // Hack - for now WebGL draws in "immediate mode" (instead of queueing the operations)...
@@ -94,7 +94,10 @@ export class WEBGLRenderPass extends RenderPass {
       // WebGPU viewports are 6 coordinates (X, Y, Z)
       if (parameters.viewport.length >= 6) {
         glParameters.viewport = parameters.viewport.slice(0, 4) as NumberArray4;
-        glParameters.depthRange = [parameters.viewport[4], parameters.viewport[5]];
+        glParameters.depthRange = [
+          parameters.viewport[4] as number,
+          parameters.viewport[5] as number
+        ];
       } else {
         // WebGL viewports are 4 coordinates (X, Y)
         glParameters.viewport = parameters.viewport as NumberArray4;
@@ -112,12 +115,12 @@ export class WEBGLRenderPass extends RenderPass {
       console.warn('RenderPassParameters.stencilReference not yet implemented in WebGL');
       // parameters.stencilFunc = [func, ref, mask];
       // Does this work?
-      parameters[GL.STENCIL_REF] = parameters.stencilReference;
+      glParameters[GL.STENCIL_REF] = parameters.stencilReference;
     }
 
-    if (parameters.colorMask) {
+    if ('colorMask' in parameters) {
       glParameters.colorMask = COLOR_CHANNELS.map(channel =>
-        Boolean(channel & parameters.colorMask)
+        Boolean(channel & (parameters.colorMask as number))
       );
     }
 

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

@@ -16,10 +16,9 @@ import {RenderPipeline, log} from '@luma.gl/core';
 // import {getAttributeInfosFromLayouts} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 
-import {getShaderLayoutFromGLSL} from '../helpers/get-shader-layout';
+import {getShaderLayoutFromGLSL} from '../helpers/get-shader-layout-from-glsl';
 import {withDeviceAndGLParameters} from '../converters/device-parameters';
 import {setUniform} from '../helpers/set-uniform';
-import {splitUniformsAndBindings} from '../../utils/split-uniforms-and-bindings';
 // import {copyUniform, checkUniformValues} from '../../classes/uniforms';
 
 import {WebGLDevice} from '../webgl-device';
@@ -37,9 +36,9 @@ const LOG_PROGRAM_PERF_PRIORITY = 4;
 /** Creates a new render pipeline */
 export class WEBGLRenderPipeline extends RenderPipeline {
   /** The WebGL device that created this render pipeline */
-  device: WebGLDevice;
+  readonly device: WebGLDevice;
   /** Handle to underlying WebGL program */
-  handle: WebGLProgram;
+  readonly handle: WebGLProgram;
   /** vertex shader */
   vs: WEBGLShader;
   /** fragment shader */
@@ -57,11 +56,15 @@ 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.setSpectorMetadata(this.handle, {id: this.props.id});
+    this.device._setWebGLDebugMetadata(this.handle, this, {spector: {id: this.props.id}});
 
     // Create shaders if needed
     this.vs = props.vs as WEBGLShader;
@@ -78,20 +81,26 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     }
 
     this._linkShaders();
-
-    log.time(1, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+    log.time(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
     this.introspectedLayout = getShaderLayoutFromGLSL(this.device.gl, this.handle);
-    log.timeEnd(1, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+    log.timeEnd(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
 
     // Merge provided layout with introspected layout
-    this.shaderLayout = mergeShaderLayout(this.introspectedLayout, props.shaderLayout);
+    this.shaderLayout = props.shaderLayout
+      ? mergeShaderLayout(this.introspectedLayout, props.shaderLayout)
+      : this.introspectedLayout;
   }
 
   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;
+      // @ts-ignore
+      this.handle = null;
     }
   }
 
@@ -143,7 +152,7 @@ export class WEBGLRenderPipeline extends RenderPipeline {
               value instanceof WEBGLFramebuffer
             )
           ) {
-            throw new Error('texture value');
+            throw new Error(`${this} Bad texture binding for ${name}`);
           }
           break;
         case 'sampler':
@@ -269,21 +278,6 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     return true;
   }
 
-  // DEPRECATED METHODS
-
-  override setUniformsWebGL(uniforms: Record<string, UniformValue>) {
-    const {bindings} = splitUniformsAndBindings(uniforms);
-    Object.keys(bindings).forEach(name => {
-      log.warn(
-        `Unsupported value "${JSON.stringify(
-          bindings[name]
-        )}" used in setUniforms() for key ${name}. Use setBindings() instead?`
-      )();
-    });
-    // TODO - check against layout
-    Object.assign(this.uniforms, uniforms);
-  }
-
   // PRIVATE METHODS
 
   // setAttributes(attributes: Record<string, Buffer>): void {}
@@ -317,19 +311,21 @@ export class WEBGLRenderPipeline extends RenderPipeline {
   }
 
   /** Report link status. First, check for shader compilation failures if linking fails */
-  async _reportLinkStatus(status: 'success' | 'linking' | 'validation'): Promise<void> {
+  async _reportLinkStatus(status: 'success' | 'link-error' | 'validation-error'): Promise<void> {
     switch (status) {
       case 'success':
         return;
 
       default:
+        const errorType = status === 'link-error' ? 'Link error' : 'Validation error';
         // First check for shader compilation failures if linking fails
         switch (this.vs.compilationStatus) {
           case 'error':
             this.vs.debugShader();
-            throw new Error(`Error during compilation of shader ${this.vs.id}`);
+            throw new Error(`${this} ${errorType} during compilation of ${this.vs}`);
           case 'pending':
-            this.vs.asyncCompilationStatus.then(() => this.vs.debugShader());
+            await this.vs.asyncCompilationStatus;
+            this.vs.debugShader();
             break;
           case 'success':
             break;
@@ -338,16 +334,21 @@ export class WEBGLRenderPipeline extends RenderPipeline {
         switch (this.fs?.compilationStatus) {
           case 'error':
             this.fs.debugShader();
-            throw new Error(`Error during compilation of shader ${this.fs.id}`);
+            throw new Error(`${this} ${errorType} during compilation of ${this.fs}`);
           case 'pending':
-            this.fs.asyncCompilationStatus.then(() => this.fs.debugShader());
+            await this.fs.asyncCompilationStatus;
+            this.fs.debugShader();
             break;
           case 'success':
             break;
         }
 
         const linkErrorLog = this.device.gl.getProgramInfoLog(this.handle);
-        throw new Error(`Error during ${status}: ${linkErrorLog}`);
+        this.device.reportError(
+          new Error(`${errorType} during ${status}: ${linkErrorLog}`),
+          this
+        )();
+        this.device.debug();
     }
   }
 
@@ -356,19 +357,19 @@ export class WEBGLRenderPipeline extends RenderPipeline {
    * TODO - Load log even when no error reported, to catch warnings?
    * https://gamedev.stackexchange.com/questions/30429/how-to-detect-glsl-warnings
    */
-  _getLinkStatus(): 'success' | 'linking' | 'validation' {
+  _getLinkStatus(): 'success' | 'link-error' | 'validation-error' {
     const {gl} = this.device;
-    const linked = gl.getProgramParameter(this.handle, gl.LINK_STATUS);
+    const linked = gl.getProgramParameter(this.handle, GL.LINK_STATUS);
     if (!linked) {
       this.linkStatus = 'error';
-      return 'linking';
+      return 'link-error';
     }
 
     gl.validateProgram(this.handle);
-    const validated = gl.getProgramParameter(this.handle, gl.VALIDATE_STATUS);
+    const validated = gl.getProgramParameter(this.handle, GL.VALIDATE_STATUS);
     if (!validated) {
       this.linkStatus = 'error';
-      return 'validation';
+      return 'validation-error';
     }
 
     this.linkStatus = 'success';

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

@@ -21,7 +21,7 @@ export class WEBGLSampler extends Sampler {
     super(device, props);
     this.device = device;
     this.parameters = convertSamplerParametersToWebGL(props);
-    this.handle = this.handle || this.device.gl.createSampler();
+    this.handle = props.handle || this.device.gl.createSampler();
     this._setSamplerParameters(this.parameters);
   }
 

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

@@ -27,6 +27,10 @@ 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);
   }
 
@@ -34,13 +38,18 @@ export class WEBGLShader extends Shader {
     if (this.handle) {
       this.removeStats();
       this.device.gl.deleteShader(this.handle);
-      // this.handle = null;
       this.destroyed = true;
+      // @ts-expect-error
+      this.handle.destroyed = true;
+      // this.handle = null;
     }
   }
 
   get asyncCompilationStatus(): Promise<'pending' | 'success' | 'error'> {
-    return this._waitForCompilationComplete().then(() => this.compilationStatus);
+    return this._waitForCompilationComplete().then(() => {
+      this._getCompilationStatus();
+      return this.compilationStatus;
+    });
   }
 
   override async getCompilationInfo(): Promise<readonly CompilerMessage[]> {

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

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import type {Device, TextureViewProps} from '@luma.gl/core';
-// import {decodeTextureFormat} from '@luma.gl/core';
+// import {getTextureFormatInfo} from '@luma.gl/core';
 import {TextureView, Texture} from '@luma.gl/core';
 
 import {WebGLDevice} from '../webgl-device';