@luma.gl/webgl 9.1.0-alpha.15 → 9.1.0-alpha.17

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

@@ -10,12 +10,6 @@ import {withGLParameters} from '../../context/state-tracker/with-parameters';
 import {setGLParameters} from '../../context/parameters/unified-parameter-api';
 import {WEBGLQuerySet} from './webgl-query-set';
 
-// 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 {
@@ -46,6 +40,16 @@ export class WEBGLRenderPass extends RenderPass {
     this.device.pushState();
     this.setParameters({viewport, ...this.props.parameters});
 
+    // Specify mapping of draw buffer locations to color attachments
+    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]);
+    }
+
     // Hack - for now WebGL draws in "immediate mode" (instead of queueing the operations)...
     this.clear();
   }
@@ -134,21 +138,37 @@ export class WEBGLRenderPass extends RenderPass {
    * Optionally clears depth, color and stencil buffers based on parameters
    */
   protected clear(): void {
+    const DEFAULT_CLEAR_COLOR: [number, number, number, number] = [0, 0, 0, 1];
+    const DEFAULT_CLEAR_DEPTH = 1;
+    const DEFAULT_CLEAR_STENCIL = 0;
+
     const glParameters: GLParameters = {...this.glParameters};
 
     let clearMask = 0;
 
-    if (this.props.clearColor !== false) {
-      clearMask |= GL_COLOR_BUFFER_BIT;
-      glParameters.clearColor = this.props.clearColor;
+    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;
+      const clearColor =
+        this.props.clearColor === true ? DEFAULT_CLEAR_COLOR : this.props.clearColor;
+      glParameters.clearColor = clearColor;
     }
     if (this.props.clearDepth !== false) {
-      clearMask |= GL_DEPTH_BUFFER_BIT;
-      glParameters.clearDepth = this.props.clearDepth;
+      clearMask |= GL.DEPTH_BUFFER_BIT;
+      glParameters.clearDepth =
+        this.props.clearDepth === true ? DEFAULT_CLEAR_DEPTH : this.props.clearDepth;
     }
     if (this.props.clearStencil !== false) {
-      clearMask |= GL_STENCIL_BUFFER_BIT;
-      glParameters.clearStencil = this.props.clearStencil;
+      clearMask |= GL.STENCIL_BUFFER_BIT;
+      glParameters.clearStencil =
+        this.props.clearStencil === true ? DEFAULT_CLEAR_STENCIL : this.props.clearStencil;
     }
 
     if (clearMask !== 0) {
@@ -156,11 +176,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,22 +186,28 @@ 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.DEPTH = 0x1801;
   // const GL_STENCIL = 0x1802;
   // const GL_DEPTH_STENCIL = 0x84f9;
 

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

@@ -110,12 +110,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(
@@ -317,22 +317,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}`);
     }
   }
 
@@ -399,11 +414,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

@@ -39,14 +39,18 @@ export class WEBGLShader extends Shader {
     }
   }
 
+  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 +63,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;
     }