@luma.gl/webgl 9.1.0-alpha.9 → 9.1.0-beta.3

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

@@ -2,20 +2,15 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {NumericArray} from '@math.gl/types';
+import {NumericArray, NumberArray4} from '@math.gl/types';
 import {RenderPass, RenderPassProps, RenderPassParameters} from '@luma.gl/core';
 import {WebGLDevice} from '../webgl-device';
 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';
 
-// Should collapse during minification
-const GL_DEPTH_BUFFER_BIT = 0x00000100;
-const GL_STENCIL_BUFFER_BIT = 0x00000400;
-const GL_COLOR_BUFFER_BIT = 0x00004000;
-
-const GL_COLOR = 0x1800;
 const COLOR_CHANNELS = [0x1, 0x2, 0x4, 0x8]; // GPUColorWrite RED, GREEN, BLUE, ALPHA
 
 export class WEBGLRenderPass extends RenderPass {
@@ -37,7 +32,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];
       }
     }
@@ -46,6 +41,18 @@ export class WEBGLRenderPass extends RenderPass {
     this.device.pushState();
     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) {
+      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)...
     this.clear();
   }
@@ -85,11 +92,11 @@ export class WEBGLRenderPass extends RenderPass {
     if (parameters.viewport) {
       // WebGPU viewports are 6 coordinates (X, Y, Z)
       if (parameters.viewport.length >= 6) {
-        glParameters.viewport = parameters.viewport.slice(0, 4);
+        glParameters.viewport = parameters.viewport.slice(0, 4) as NumberArray4;
         glParameters.depthRange = [parameters.viewport[4], parameters.viewport[5]];
       } else {
         // WebGL viewports are 4 coordinates (X, Y)
-        glParameters.viewport = parameters.viewport;
+        glParameters.viewport = parameters.viewport as NumberArray4;
       }
     }
     if (parameters.scissorRect) {
@@ -138,16 +145,24 @@ export class WEBGLRenderPass extends RenderPass {
 
     let clearMask = 0;
 
-    if (this.props.clearColor !== false) {
-      clearMask |= GL_COLOR_BUFFER_BIT;
+    if (this.props.clearColors) {
+      this.props.clearColors.forEach((color, drawBufferIndex) => {
+        if (color) {
+          this.clearColorBuffer(drawBufferIndex, color);
+        }
+      });
+    }
+
+    if (this.props.clearColor !== false && this.props.clearColors === undefined) {
+      clearMask |= GL.COLOR_BUFFER_BIT;
       glParameters.clearColor = this.props.clearColor;
     }
     if (this.props.clearDepth !== false) {
-      clearMask |= GL_DEPTH_BUFFER_BIT;
+      clearMask |= GL.DEPTH_BUFFER_BIT;
       glParameters.clearDepth = this.props.clearDepth;
     }
     if (this.props.clearStencil !== false) {
-      clearMask |= GL_STENCIL_BUFFER_BIT;
+      clearMask |= GL.STENCIL_BUFFER_BIT;
       glParameters.clearStencil = this.props.clearStencil;
     }
 
@@ -156,11 +171,6 @@ export class WEBGLRenderPass extends RenderPass {
       withGLParameters(this.device.gl, glParameters, () => {
         this.device.gl.clear(clearMask);
       });
-
-      // TODO - clear multiple color attachments
-      // for (attachment of this.framebuffer.colorAttachments) {
-      //   this.clearColorBuffer
-      // }
     }
   }
 
@@ -171,40 +181,44 @@ export class WEBGLRenderPass extends RenderPass {
     withGLParameters(this.device.gl, {framebuffer: this.props.framebuffer}, () => {
       // Method selection per OpenGL ES 3 docs
       switch (value.constructor) {
+        case Int8Array:
+        case Int16Array:
         case Int32Array:
-          this.device.gl.clearBufferiv(GL_COLOR, drawBuffer, value);
+          this.device.gl.clearBufferiv(GL.COLOR, drawBuffer, value);
           break;
+        case Uint8Array:
+        case Uint8ClampedArray:
+        case Uint16Array:
         case Uint32Array:
-          this.device.gl.clearBufferuiv(GL_COLOR, drawBuffer, value);
+          this.device.gl.clearBufferuiv(GL.COLOR, drawBuffer, value);
           break;
         case Float32Array:
-        default:
-          this.device.gl.clearBufferfv(GL_COLOR, drawBuffer, value);
+          this.device.gl.clearBufferfv(GL.COLOR, drawBuffer, value);
           break;
+        default:
+          throw new Error('clearColorBuffer: color must be typed array');
       }
     });
   }
 
-  // clearDepthStencil() {
-  // const GL_DEPTH = 0x1801;
-  // const GL_STENCIL = 0x1802;
-  // const GL_DEPTH_STENCIL = 0x84f9;
-
-  //     case GL_DEPTH:
-  //       this.device.gl.clearBufferfv(GL_DEPTH, 0, [value]);
-  //       break;
+  /*
+  clearDepthStencil() {
+      case GL.DEPTH:
+        this.device.gl.clearBufferfv(GL.DEPTH, 0, [value]);
+        break;
 
-  //     case GL_STENCIL:
-  //       this.device.gl.clearBufferiv(GL_STENCIL, 0, [value]);
-  //       break;
+      case GL_STENCIL:
+        this.device.gl.clearBufferiv(GL.STENCIL, 0, [value]);
+        break;
 
-  //     case GL_DEPTH_STENCIL:
-  //       const [depth, stencil] = value;
-  //       this.device.gl.clearBufferfi(GL_DEPTH_STENCIL, 0, depth, stencil);
-  //       break;
+      case GL.DEPTH_STENCIL:
+        const [depth, stencil] = value;
+        this.device.gl.clearBufferfi(GL.DEPTH_STENCIL, 0, depth, stencil);
+        break;
 
-  //     default:
-  //       assert(false, ERR_ARGUMENTS);
-  //   }
-  // });
+      default:
+        assert(false, ERR_ARGUMENTS);
+    }
+  });
+  */
 }

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

@@ -2,14 +2,21 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {RenderPipelineProps, RenderPipelineParameters, PrimitiveTopology} from '@luma.gl/core';
-import type {ShaderLayout, UniformValue, Binding} from '@luma.gl/core';
-import type {RenderPass, VertexArray} from '@luma.gl/core';
+import type {
+  RenderPipelineProps,
+  RenderPipelineParameters,
+  PrimitiveTopology,
+  ShaderLayout,
+  UniformValue,
+  Binding,
+  RenderPass,
+  VertexArray
+} from '@luma.gl/core';
 import {RenderPipeline, log} from '@luma.gl/core';
 // import {getAttributeInfosFromLayouts} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 
-import {getShaderLayout} from '../helpers/get-shader-layout';
+import {getShaderLayoutFromGLSL} from '../helpers/get-shader-layout';
 import {withDeviceAndGLParameters} from '../converters/device-parameters';
 import {setUniform} from '../helpers/set-uniform';
 import {splitUniformsAndBindings} from '../../utils/split-uniforms-and-bindings';
@@ -50,11 +57,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;
@@ -71,10 +82,9 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     }
 
     this._linkShaders();
-
-    log.time(1, `RenderPipeline ${this.id} - shaderLayout introspection`)();
-    this.introspectedLayout = getShaderLayout(this.device.gl, this.handle);
-    log.timeEnd(1, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+    log.time(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+    this.introspectedLayout = getShaderLayoutFromGLSL(this.device.gl, this.handle);
+    log.timeEnd(3, `RenderPipeline ${this.id} - shaderLayout introspection`)();
 
     // Merge provided layout with introspected layout
     this.shaderLayout = mergeShaderLayout(this.introspectedLayout, props.shaderLayout);
@@ -82,9 +92,13 @@ 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;
     }
   }
 
@@ -103,12 +117,12 @@ export class WEBGLRenderPipeline extends RenderPipeline {
       // and reference them as `app` from both GLSL and JS.
       // TODO - this is rather hacky - we could also remap the name directly in the shader layout.
       const binding =
-        this.shaderLayout.bindings.find(binding => binding.name === name) ||
-        this.shaderLayout.bindings.find(binding => binding.name === `${name}Uniforms`);
+        this.shaderLayout.bindings.find(binding_ => binding_.name === name) ||
+        this.shaderLayout.bindings.find(binding_ => binding_.name === `${name}Uniforms`);
 
       if (!binding) {
         const validBindings = this.shaderLayout.bindings
-          .map(binding => `"${binding.name}"`)
+          .map(binding_ => `"${binding_.name}"`)
           .join(', ');
         if (!options?.disableWarnings) {
           log.warn(
@@ -310,22 +324,37 @@ export class WEBGLRenderPipeline extends RenderPipeline {
   }
 
   /** Report link status. First, check for shader compilation failures if linking fails */
-  _reportLinkStatus(status: 'success' | 'linking' | 'validation') {
+  async _reportLinkStatus(status: 'success' | 'linking' | 'validation'): Promise<void> {
     switch (status) {
       case 'success':
         return;
 
       default:
         // First check for shader compilation failures if linking fails
-        if (this.vs.compilationStatus === 'error') {
-          this.vs.debugShader();
-          throw new Error(`Error during compilation of shader ${this.vs.id}`);
+        switch (this.vs.compilationStatus) {
+          case 'error':
+            this.vs.debugShader();
+            throw new Error(`Error during compilation of shader ${this.vs.id}`);
+          case 'pending':
+            this.vs.asyncCompilationStatus.then(() => this.vs.debugShader());
+            break;
+          case 'success':
+            break;
         }
-        if (this.fs?.compilationStatus === 'error') {
-          this.fs.debugShader();
-          throw new Error(`Error during compilation of shader ${this.fs.id}`);
+
+        switch (this.fs?.compilationStatus) {
+          case 'error':
+            this.fs.debugShader();
+            throw new Error(`Error during compilation of shader ${this.fs.id}`);
+          case 'pending':
+            this.fs.asyncCompilationStatus.then(() => this.fs.debugShader());
+            break;
+          case 'success':
+            break;
         }
-        throw new Error(`Error during ${status}: ${this.device.gl.getProgramInfoLog(this.handle)}`);
+
+        const linkErrorLog = this.device.gl.getProgramInfoLog(this.handle);
+        throw new Error(`Error during ${status}: ${linkErrorLog}`);
     }
   }
 
@@ -392,11 +421,12 @@ export class WEBGLRenderPipeline extends RenderPipeline {
       }
     }
 
-    for (const [, texture] of Object.entries(this.bindings)) {
-      if (texture instanceof WEBGLTexture) {
-        texture.update();
-      }
-    }
+    // TODO - remove this should be handled by ExternalTexture
+    // for (const [, texture] of Object.entries(this.bindings)) {
+    //   if (texture instanceof WEBGLTexture) {
+    //     texture.update();
+    //   }
+    // }
 
     return texturesRenderable;
   }

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,19 +38,25 @@ 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);
+  }
+
   override async getCompilationInfo(): Promise<readonly CompilerMessage[]> {
     await this._waitForCompilationComplete();
     return this.getCompilationInfoSync();
   }
 
   override getCompilationInfoSync(): readonly CompilerMessage[] {
-    const log = this.device.gl.getShaderInfoLog(this.handle);
-    return log ? parseShaderCompilerLog(log) : [];
+    const shaderLog = this.device.gl.getShaderInfoLog(this.handle);
+    return shaderLog ? parseShaderCompilerLog(shaderLog) : [];
   }
 
   override getTranslatedSource(): string | null {
@@ -59,16 +69,14 @@ export class WEBGLShader extends Shader {
 
   /** Compile a shader and get compilation status */
   protected async _compile(source: string): Promise<void> {
-    const addGLSLVersion = (source: string) =>
-      source.startsWith('#version ') ? source : `#version 300 es\n${source}`;
-    source = addGLSLVersion(source);
+    source = source.startsWith('#version ') ? source : `#version 300 es\n${source}`;
 
     const {gl} = this.device;
     gl.shaderSource(this.handle, source);
     gl.compileShader(this.handle);
 
     // For performance reasons, avoid checking shader compilation errors on production
-    if (log.level === 0) {
+    if (!this.device.props.debug) {
       this.compilationStatus = 'pending';
       return;
     }