@luma.gl/webgl 9.0.17 → 9.1.0-alpha.10

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

@@ -3,16 +3,13 @@
 // Copyright (c) vis.gl contributors
 
 import type {FramebufferProps, TextureFormat} from '@luma.gl/core';
-import {Framebuffer, Texture, assert} from '@luma.gl/core';
+import {Framebuffer, Texture} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLTexture} from './webgl-texture';
 import {WEBGLTextureView} from './webgl-texture-view';
 import {getDepthStencilAttachmentWebGL} from '../converters/texture-formats';
 
-// TODO - for now we don't see a usage for renderbuffers in WebGL 2.
-// import {WEBGLRenderbuffer} from '../objects/webgl-renderbuffer';
-
 export type Attachment = WEBGLTextureView | WEBGLTexture; // | WEBGLRenderbuffer;
 
 /** luma.gl Framebuffer, WebGL implementation  */
@@ -21,9 +18,8 @@ export class WEBGLFramebuffer extends Framebuffer {
   gl: WebGL2RenderingContext;
   handle: WebGLFramebuffer;
 
-  get texture() {
-    return this.colorAttachments[0];
-  }
+  colorAttachments: WEBGLTextureView[] = [];
+  depthStencilAttachment: WEBGLTextureView | null = null;
 
   constructor(device: WebGLDevice, props: FramebufferProps) {
     super(device, props);
@@ -52,17 +48,17 @@ export class WEBGLFramebuffer extends Framebuffer {
 
       // Walk the attachments
       for (let i = 0; i < this.colorAttachments.length; ++i) {
-        const attachment = this.colorAttachments[i] as WEBGLTextureView;
+        const attachment = this.colorAttachments[i];
         const attachmentPoint = GL.COLOR_ATTACHMENT0 + i;
         if (attachment) {
-          this._attachOne(attachmentPoint, attachment);
+          this._attachTexture(attachmentPoint, attachment);
         }
       }
 
       if (this.depthStencilAttachment) {
-        this._attachOne(
+        this._attachTexture(
           getDepthStencilAttachmentWebGL(this.depthStencilAttachment.props.format),
-          this.depthStencilAttachment as WEBGLTextureView
+          this.depthStencilAttachment
         );
       }
 
@@ -104,7 +100,7 @@ export class WEBGLFramebuffer extends Framebuffer {
 
   /**
    * Attachment resize is expected to be a noop if size is same
-   */
+   *
   protected override resizeAttachments(width: number, height: number): this {
     // for default framebuffer, just update the stored size
     if (this.handle === null) {
@@ -124,72 +120,42 @@ export class WEBGLFramebuffer extends Framebuffer {
     // TODO Not clear that this is better than default destroy/create implementation
 
     for (const colorAttachment of this.colorAttachments) {
-      (colorAttachment.texture as WEBGLTexture).resize({width, height});
+      colorAttachment.texture.clone({width, height});
     }
     if (this.depthStencilAttachment) {
-      (this.depthStencilAttachment.texture as WEBGLTexture).resize({width, height});
+      this.depthStencilAttachment.texture.resize({width, height});
     }
     return this;
   }
+  */
 
   /** Attach one attachment */
-  protected _attachOne(attachmentPoint: GL, attachment: Attachment): WEBGLTexture {
+  protected _attachTexture(attachmentPoint: GL, textureView: WEBGLTextureView): void {
     // if (attachment instanceof WEBGLRenderbuffer) {
     //   this._attachWEBGLRenderbuffer(attachmentPoint, attachment);
     //   return attachment;
     // }
-    if (Array.isArray(attachment)) {
-      const [texture, layer = 0, level = 0] = attachment;
-      this._attachTexture(attachmentPoint, texture as unknown as WEBGLTexture, layer, level);
-      return texture as unknown as WEBGLTexture;
-    }
-    if (attachment instanceof WEBGLTexture) {
-      this._attachTexture(attachmentPoint, attachment, 0, 0);
-      return attachment;
-    }
-    if (attachment instanceof WEBGLTextureView) {
-      const textureView = attachment;
-      this._attachTexture(
-        attachmentPoint,
-        textureView.texture,
-        textureView.props.baseMipLevel,
-        textureView.props.baseArrayLayer
-      );
-      return attachment.texture;
-    }
-    throw new Error('attach');
+    this._attachTextureView(attachmentPoint, textureView);
   }
 
-  // TODO - we do not seem to need render buffers in WebGL 2
-  // protected _attachWEBGLRenderbuffer(attachment: GL, renderbuffer: WEBGLRenderbuffer): void {
-  //   this.gl.framebufferRenderbuffer(
-  //     GL.FRAMEBUFFER,
-  //     attachment,
-  //     GL.RENDERBUFFER,
-  //     renderbuffer.handle
-  //   );
-  // }
-
   /**
    * @param attachment
    * @param texture
    * @param layer = 0 - index into WEBGLTextureArray and Texture3D or face for `TextureCubeMap`
    * @param level = 0 - mipmapLevel
    */
-  protected _attachTexture(
-    attachment: GL,
-    texture: WEBGLTexture,
-    layer: number,
-    level: number
-  ): void {
+  protected _attachTextureView(attachment: GL, textureView: WEBGLTextureView): void {
     const {gl} = this.device;
+    const {texture} = textureView;
+    const level = textureView.props.baseMipLevel;
+    const layer = textureView.props.baseArrayLayer;
 
-    gl.bindTexture(texture.target, texture.handle);
+    gl.bindTexture(texture.glTarget, texture.handle);
 
-    switch (texture.target) {
+    switch (texture.glTarget) {
       case GL.TEXTURE_2D_ARRAY:
       case GL.TEXTURE_3D:
-        gl.framebufferTextureLayer(GL.FRAMEBUFFER, attachment, texture.target, level, layer);
+        gl.framebufferTextureLayer(GL.FRAMEBUFFER, attachment, texture.handle, level, layer);
         break;
 
       case GL.TEXTURE_CUBE_MAP:
@@ -203,10 +169,10 @@ export class WEBGLFramebuffer extends Framebuffer {
         break;
 
       default:
-        assert(false, 'Illegal texture type');
+        throw new Error('Illegal texture type');
     }
 
-    gl.bindTexture(texture.target, null);
+    gl.bindTexture(texture.glTarget, null);
   }
 }
 

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

@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {RenderPass, RenderPassProps, NumberArray, RenderPassParameters} from '@luma.gl/core';
+import {NumericArray} 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 {pushContextState, popContextState} from '../../context/state-tracker/track-context-state';
 import {WEBGLQuerySet} from './webgl-query-set';
 
 // Should collapse during minification
@@ -28,16 +28,30 @@ export class WEBGLRenderPass extends RenderPass {
     super(device, props);
     this.device = device;
 
+    // If no viewport is provided, apply reasonably defaults
+    let viewport;
+    if (!props?.parameters?.viewport) {
+      if (props?.framebuffer) {
+        // Set the viewport to the size of the framebuffer
+        const {width, height} = props.framebuffer;
+        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();
+        viewport = [0, 0, width, height];
+      }
+    }
+
     // TODO - do parameters (scissorRect) affect the clear operation?
-    pushContextState(this.device.gl);
-    this.setParameters(this.props.parameters);
+    this.device.pushState();
+    this.setParameters({viewport, ...this.props.parameters});
 
     // Hack - for now WebGL draws in "immediate mode" (instead of queueing the operations)...
     this.clear();
   }
 
   end(): void {
-    popContextState(this.device.gl);
+    this.device.popState();
     // should add commands to CommandEncoder.
   }
 
@@ -57,9 +71,7 @@ export class WEBGLRenderPass extends RenderPass {
     const glParameters: GLParameters = {...this.glParameters};
 
     // Framebuffers are specified using parameters in WebGL
-    if (this.props.framebuffer) {
-      glParameters.framebuffer = this.props.framebuffer;
-    }
+    glParameters.framebuffer = this.props.framebuffer || null;
 
     if (this.props.depthReadOnly) {
       glParameters.depthMask = !this.props.depthReadOnly;
@@ -155,7 +167,7 @@ export class WEBGLRenderPass extends RenderPass {
   /**
    * WebGL2 - clear a specific color buffer
    */
-  protected clearColorBuffer(drawBuffer: number = 0, value: NumberArray = [0, 0, 0, 0]) {
+  protected clearColorBuffer(drawBuffer: number = 0, value: NumericArray = [0, 0, 0, 0]) {
     withGLParameters(this.device.gl, {framebuffer: this.props.framebuffer}, () => {
       // Method selection per OpenGL ES 3 docs
       switch (value.constructor) {

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

@@ -5,14 +5,14 @@
 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 {RenderPipeline, cast, splitUniformsAndBindings, log} from '@luma.gl/core';
-import {mergeShaderLayout} from '@luma.gl/core';
-// import {mergeShaderLayout, getAttributeInfosFromLayouts} 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 {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';
@@ -57,8 +57,8 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     this.device.setSpectorMetadata(this.handle, {id: this.props.id});
 
     // Create shaders if needed
-    this.vs = cast<WEBGLShader>(props.vs);
-    this.fs = cast<WEBGLShader>(props.fs);
+    this.vs = props.vs as WEBGLShader;
+    this.fs = props.fs as WEBGLShader;
     // assert(this.vs.stage === 'vertex');
     // assert(this.fs.stage === 'fragment');
 
@@ -78,17 +78,6 @@ export class WEBGLRenderPipeline extends RenderPipeline {
 
     // Merge provided layout with introspected layout
     this.shaderLayout = mergeShaderLayout(this.introspectedLayout, props.shaderLayout);
-
-    // WebGPU has more restrictive topology support than WebGL
-    switch (this.props.topology) {
-      case 'triangle-fan-webgl':
-      case 'line-loop-webgl':
-        log.warn(
-          `Primitive topology ${this.props.topology} is deprecated and will be removed in v9.1`
-        );
-        break;
-      default:
-    }
   }
 
   override destroy(): void {
@@ -123,7 +112,8 @@ export class WEBGLRenderPipeline extends RenderPipeline {
           .join(', ');
         if (!options?.disableWarnings) {
           log.warn(
-            `Unknown binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`
+            `No binding "${name}" in render pipeline "${this.id}", expected one of ${validBindings}`,
+            value
           )();
         }
         continue; // eslint-disable-line no-continue
@@ -210,16 +200,18 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     // Note: async textures set as uniforms might still be loading.
     // Now that all uniforms have been updated, check if any texture
     // in the uniforms is not yet initialized, then we don't draw
-    if (!this._areTexturesRenderable() || vertexCount === 0) {
+    if (!this._areTexturesRenderable()) {
       log.info(2, `RenderPipeline:${this.id}.draw() aborted - textures not yet loaded`)();
+      //  Note: false means that the app needs to redraw the pipeline again.
       return false;
     }
 
     // (isInstanced && instanceCount === 0)
-    if (vertexCount === 0) {
-      log.info(2, `RenderPipeline:${this.id}.draw() aborted - no vertices to draw`)();
-      return true;
-    }
+    // if (vertexCount === 0) {
+    //   log.info(2, `RenderPipeline:${this.id}.draw() aborted - no vertices to draw`)();
+    //   Note: false means that the app needs to redraw the pipeline again.
+    //   return true;
+    // }
 
     this.device.gl.useProgram(this.handle);
 
@@ -390,10 +382,19 @@ export class WEBGLRenderPipeline extends RenderPipeline {
   _areTexturesRenderable() {
     let texturesRenderable = true;
 
+    for (const bindingInfo of this.shaderLayout.bindings) {
+      if (
+        !this.bindings[bindingInfo.name] &&
+        !this.bindings[bindingInfo.name.replace(/Uniforms$/, '')]
+      ) {
+        log.warn(`Binding ${bindingInfo.name} not found in ${this.id}`)();
+        texturesRenderable = false;
+      }
+    }
+
     for (const [, texture] of Object.entries(this.bindings)) {
       if (texture instanceof WEBGLTexture) {
         texture.update();
-        texturesRenderable = texturesRenderable && texture.loaded;
       }
     }
 
@@ -474,7 +475,7 @@ export class WEBGLRenderPipeline extends RenderPipeline {
           }
 
           gl.activeTexture(GL.TEXTURE0 + textureUnit);
-          gl.bindTexture(texture.target, texture.handle);
+          gl.bindTexture(texture.glTarget, texture.handle);
           // gl.bindSampler(textureUnit, sampler.handle);
           textureUnit += 1;
           break;
@@ -504,3 +505,28 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     }
   }
 }
+
+/**
+ * Merges an provided shader layout into a base shader layout
+ * In WebGL, this allows the auto generated shader layout to be overridden by the application
+ * Typically to change the format of the vertex attributes (from float32x4 to uint8x4 etc).
+ * @todo Drop this? Aren't all use cases covered by mergeBufferLayout()?
+ */
+function mergeShaderLayout(baseLayout: ShaderLayout, overrideLayout: ShaderLayout): ShaderLayout {
+  // Deep clone the base layout
+  const mergedLayout: ShaderLayout = {
+    ...baseLayout,
+    attributes: baseLayout.attributes.map(attribute => ({...attribute}))
+  };
+  // Merge the attributes
+  for (const attribute of overrideLayout?.attributes || []) {
+    const baseAttribute = mergedLayout.attributes.find(attr => attr.name === attribute.name);
+    if (!baseAttribute) {
+      log.warn(`shader layout attribute ${attribute.name} not present in shader`);
+    } else {
+      baseAttribute.type = attribute.type || baseAttribute.type;
+      baseAttribute.stepMode = attribute.stepMode || baseAttribute.stepMode;
+    }
+  }
+  return mergedLayout;
+}

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

@@ -44,15 +44,15 @@ export class WEBGLShader extends Shader {
     return this.getCompilationInfoSync();
   }
 
-  override getCompilationInfoSync() {
+  override getCompilationInfoSync(): readonly CompilerMessage[] {
     const log = this.device.gl.getShaderInfoLog(this.handle);
-    return parseShaderCompilerLog(log);
+    return log ? parseShaderCompilerLog(log) : [];
   }
 
   override getTranslatedSource(): string | null {
     const extensions = this.device.getExtension('WEBGL_debug_shaders');
     const ext = extensions.WEBGL_debug_shaders;
-    return ext?.getTranslatedShaderSource(this.handle);
+    return ext?.getTranslatedShaderSource(this.handle) || null;
   }
 
   // PRIVATE METHODS
@@ -60,7 +60,7 @@ 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 100\n${source}`;
+      source.startsWith('#version ') ? source : `#version 300 es\n${source}`;
     source = addGLSLVersion(source);
 
     const {gl} = this.device;

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

@@ -12,8 +12,7 @@ import {WEBGLTexture} from './webgl-texture';
 export class WEBGLTextureView extends TextureView {
   readonly device: WebGLDevice;
   readonly gl: WebGL2RenderingContext;
-  readonly handle: WebGLTexture;
-
+  readonly handle: null; // Does not have a WebGL representation
   readonly texture: WEBGLTexture;
 
   constructor(device: Device, props: TextureViewProps & {texture: WEBGLTexture}) {
@@ -22,7 +21,6 @@ export class WEBGLTextureView extends TextureView {
     this.device = device as WebGLDevice;
     this.gl = this.device.gl;
     this.handle = null;
-
     this.texture = props.texture;
   }
 }