@luma.gl/webgl 9.0.0-beta.5 → 9.0.0-beta.7

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

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import {RenderPass, RenderPassProps, NumberArray, RenderPassParameters} from '@luma.gl/core';
@@ -7,6 +8,7 @@ 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
 const GL_DEPTH_BUFFER_BIT = 0x00000100;
@@ -36,7 +38,7 @@ export class WEBGLRenderPass extends RenderPass {
   end(): void {
     popContextState(this.device.gl);
     if (this.props.framebuffer) {
-      setGLParameters(this.device, {framebuffer: null});
+      setGLParameters(this.device.gl, {framebuffer: null});
     }
     // should add commands to CommandEncoder.
   }
@@ -45,8 +47,6 @@ export class WEBGLRenderPass extends RenderPass {
   popDebugGroup(): void {}
   insertDebugMarker(markerLabel: string): void {}
 
-  // writeTimestamp(querySet: GPUQuerySet, queryIndex: number): void;
-
   // beginOcclusionQuery(queryIndex: number): void;
   // endOcclusionQuery(): void;
 
@@ -99,10 +99,20 @@ export class WEBGLRenderPass extends RenderPass {
 
     this.glParameters = glParameters;
 
-    setGLParameters(this.device, glParameters);
+    setGLParameters(this.device.gl, glParameters);
+  }
+
+  beginOcclusionQuery(queryIndex: number): void {
+    const webglQuerySet = this.props.occlusionQuerySet as WEBGLQuerySet;
+    webglQuerySet?.beginOcclusionQuery();
   }
 
-  // Internal
+  override endOcclusionQuery(): void {
+    const webglQuerySet = this.props.occlusionQuerySet as WEBGLQuerySet;
+    webglQuerySet?.endOcclusionQuery();
+  }
+
+  // PRIVATE
 
   /**
    * Optionally clears depth, color and stencil buffers based on parameters
@@ -127,19 +137,19 @@ export class WEBGLRenderPass extends RenderPass {
 
     if (clearMask !== 0) {
       // Temporarily set any clear "colors" and call clear
-      withGLParameters(this.device, glParameters, () => {
+      withGLParameters(this.device.gl, glParameters, () => {
         this.device.gl.clear(clearMask);
       });
 
       // TODO - clear multiple color attachments
       // for (attachment of this.framebuffer.colorAttachments) {
-      //   this.clearColorBuffer  
+      //   this.clearColorBuffer
       // }
     }
   }
 
-  /** 
-   * WebGL2 - clear a specific color buffer 
+  /**
+   * WebGL2 - clear a specific color buffer
    */
   protected clearColorBuffer(drawBuffer: number = 0, value: NumberArray = [0, 0, 0, 0]) {
     withGLParameters(this.device.gl, {framebuffer: this.props.framebuffer}, () => {
@@ -182,4 +192,3 @@ export class WEBGLRenderPass extends RenderPass {
   //   }
   // });
 }
-

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

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import type {UniformValue, RenderPipelineProps, Binding} from '@luma.gl/core';
@@ -19,7 +20,7 @@ import {WEBGLBuffer} from './webgl-buffer';
 import {WEBGLShader} from './webgl-shader';
 import {WEBGLFramebuffer} from './webgl-framebuffer';
 import {WEBGLTexture} from './webgl-texture';
-// import {WEBGLVertexArray} from './webgl-vertex-array';
+import {WEBGLTextureView} from './webgl-texture-view';
 import {WEBGLRenderPass} from './webgl-render-pass';
 import {WEBGLTransformFeedback} from './webgl-transform-feedback';
 import {getGLDrawMode} from '../helpers/webgl-topology-utils';
@@ -71,7 +72,10 @@ export class WEBGLRenderPipeline extends RenderPipeline {
 
     this._linkShaders();
 
+    log.time(0, `RenderPipeline ${this.id} - shaderLayout introspection`)();
     this.introspectedLayout = getShaderLayout(this.device.gl, this.handle);
+    log.timeEnd(0, `RenderPipeline ${this.id} - shaderLayout introspection`)();
+
     // Merge provided layout with introspected layout
     this.shaderLayout = mergeShaderLayout(this.introspectedLayout, props.shaderLayout);
 
@@ -133,7 +137,13 @@ export class WEBGLRenderPipeline extends RenderPipeline {
           }
           break;
         case 'texture':
-          if (!(value instanceof WEBGLTexture || value instanceof WEBGLFramebuffer)) {
+          if (
+            !(
+              value instanceof WEBGLTextureView ||
+              value instanceof WEBGLTexture ||
+              value instanceof WEBGLFramebuffer
+            )
+          ) {
             throw new Error('texture value');
           }
           break;
@@ -148,20 +158,6 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     }
   }
 
-  /** This function is @deprecated, use uniform buffers */
-  setUniforms(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);
-  }
-
   /** @todo needed for portable model
    * @note The WebGL API is offers many ways to draw things
    * This function unifies those ways into a single call using common parameters with sane defaults
@@ -179,11 +175,6 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     baseVertex?: number;
     transformFeedback?: WEBGLTransformFeedback;
   }): boolean {
-    // If we are using async linking, we need to wait until linking completes
-    if (this.linkStatus !== 'success') {
-      return false;
-    }
-
     const {
       renderPass,
       vertexArray,
@@ -202,15 +193,27 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     const glIndexType = (vertexArray.indexBuffer as WEBGLBuffer)?.glIndexType;
     const isInstanced: boolean = Number(instanceCount) > 0;
 
+    // If we are using async linking, we need to wait until linking completes
+    if (this.linkStatus !== 'success') {
+      log.info(2, `RenderPipeline:${this.id}.draw() aborted - waiting for shader linking`)();
+      return false;
+    }
+
     // Avoid WebGL draw call when not rendering any data or values are incomplete
     // 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) {
-      // (isInstanced && instanceCount === 0)
+      log.info(2, `RenderPipeline:${this.id}.draw() aborted - textures not yet loaded`)();
       return false;
     }
 
+    // (isInstanced && instanceCount === 0)
+    if (vertexCount === 0) {
+      log.info(2, `RenderPipeline:${this.id}.draw() aborted - no vertices to draw`)();
+      return true;
+    }
+
     this.device.gl.useProgram(this.handle);
 
     // Note: Rebinds constant attributes before each draw call
@@ -225,31 +228,6 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     this._applyUniforms();
 
     const webglRenderPass = renderPass as WEBGLRenderPass;
-    //     // TODO - Use polyfilled WebGL2RenderingContext instead of ANGLE extension
-    //     if (isIndexed && isInstanced) {
-    //       // ANGLE_instanced_arrays extension
-    //       this.device.gl.drawElementsInstanced(
-    //         drawMode,
-    //         vertexCount || 0, // indexCount?
-    //         indexType,
-    //         firstVertex,
-    //         instanceCount || 0
-    //       );
-    //       // } else if (isIndexed && this.device.isWebGL2 && !isNaN(start) && !isNaN(end)) {
-    //       //   this.device.gldrawRangeElements(drawMode, start, end, vertexCount, indexType, offset);
-    //     } else if (isIndexed) {
-    //       this.device.gl.drawElements(drawMode, vertexCount || 0, indexType, firstVertex); // indexCount?
-    //     } else if (isInstanced) {
-    //       this.device.gl.drawArraysInstanced(
-    //         drawMode,
-    //         firstVertex,
-    //         vertexCount || 0,
-    //         instanceCount || 0
-    //       );
-    //     } else {
-    //       this.device.gl.drawArrays(drawMode, firstVertex, vertexCount || 0);
-    //     }
-    //   });
 
     withDeviceAndGLParameters(
       this.device,
@@ -257,7 +235,6 @@ export class WEBGLRenderPipeline extends RenderPipeline {
       webglRenderPass.glParameters,
       () => {
         if (isIndexed && isInstanced) {
-          // ANGLE_instanced_arrays extension
           this.device.gl.drawElementsInstanced(
             glDrawMode,
             vertexCount || 0, // indexCount?
@@ -291,6 +268,21 @@ 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 {}
@@ -309,7 +301,7 @@ export class WEBGLRenderPipeline extends RenderPipeline {
       // return;
     }
 
-    if (!this.device.features.has('shader-status-async-webgl')) {
+    if (!this.device.features.has('compilation-status-async-webgl')) {
       const status = this._getLinkStatus();
       this._reportLinkStatus(status);
       return;
@@ -373,14 +365,14 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     const DELAY_MS = 10; // Shader compilation is typically quite fast (with some exceptions)
 
     // If status polling is not available, we can't wait for completion. Just wait a little to minimize blocking
-    if (!this.device.features.has('shader-status-async-webgl')) {
+    if (!this.device.features.has('compilation-status-async-webgl')) {
       await waitMs(DELAY_MS);
       return;
     }
 
     const {gl} = this.device;
     for (;;) {
-      const complete = gl.getProgramParameter(this.handle, GL.COMPLETION_STATUS);
+      const complete = gl.getProgramParameter(this.handle, GL.COMPLETION_STATUS_KHR);
       if (complete) {
         return;
       }
@@ -453,11 +445,19 @@ export class WEBGLRenderPipeline extends RenderPipeline {
           break;
 
         case 'texture':
-          if (!(value instanceof WEBGLTexture || value instanceof WEBGLFramebuffer)) {
+          if (
+            !(
+              value instanceof WEBGLTextureView ||
+              value instanceof WEBGLTexture ||
+              value instanceof WEBGLFramebuffer
+            )
+          ) {
             throw new Error('texture');
           }
           let texture: WEBGLTexture;
-          if (value instanceof WEBGLTexture) {
+          if (value instanceof WEBGLTextureView) {
+            texture = value.texture;
+          } else if (value instanceof WEBGLTexture) {
             texture = value;
           } else if (
             value instanceof WEBGLFramebuffer &&

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

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import {Sampler, SamplerProps} from '@luma.gl/core';

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

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import {Shader, ShaderProps, CompilerMessage, log} from '@luma.gl/core';
@@ -48,6 +49,12 @@ export class WEBGLShader extends Shader {
     return 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);
+  }
+
   // PRIVATE METHODS
 
   /** Compile a shader and get compilation status */
@@ -67,7 +74,7 @@ export class WEBGLShader extends Shader {
     }
 
     // Sync case - slower, but advantage is that it throws in the constructor, making break on error more useful
-    if (!this.device.features.has('shader-status-async-webgl')) {
+    if (!this.device.features.has('compilation-status-async-webgl')) {
       this._getCompilationStatus();
       if (this.compilationStatus === 'error') {
         throw new Error(`GLSL compilation errors in ${this.props.stage} shader ${this.props.id}`);
@@ -93,14 +100,14 @@ export class WEBGLShader extends Shader {
     const DELAY_MS = 10; // Shader compilation is typically quite fast (with some exceptions)
 
     // If status polling is not available, we can't wait for completion. Just wait a little to minimize blocking
-    if (!this.device.features.has('shader-status-async-webgl')) {
+    if (!this.device.features.has('compilation-status-async-webgl')) {
       await waitMs(DELAY_MS);
       return;
     }
 
     const {gl} = this.device;
     for (;;) {
-      const complete = gl.getShaderParameter(this.handle, GL.COMPLETION_STATUS);
+      const complete = gl.getShaderParameter(this.handle, GL.COMPLETION_STATUS_KHR);
       if (complete) {
         return;
       }
@@ -112,7 +119,7 @@ export class WEBGLShader extends Shader {
    * Get the shader compilation status
    * TODO - Load log even when no error reported, to catch warnings?
    * https://gamedev.stackexchange.com/questions/30429/how-to-detect-glsl-warnings
-  */
+   */
   protected _getCompilationStatus() {
     this.compilationStatus = this.device.gl.getShaderParameter(this.handle, GL.COMPILE_STATUS)
       ? 'success'

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

@@ -0,0 +1,28 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {Device, TextureViewProps} from '@luma.gl/core';
+// import {decodeTextureFormat} from '@luma.gl/core';
+import {TextureView, Texture} from '@luma.gl/core';
+
+import {WebGLDevice} from '../webgl-device';
+import {WEBGLTexture} from './webgl-texture';
+
+export class WEBGLTextureView extends TextureView {
+  readonly device: WebGLDevice;
+  readonly gl: WebGL2RenderingContext;
+  readonly handle: WebGLTexture;
+
+  readonly texture: WEBGLTexture;
+
+  constructor(device: Device, props: TextureViewProps & {texture: WEBGLTexture}) {
+    super(device, {...Texture.defaultProps, ...props});
+
+    this.device = device as WebGLDevice;
+    this.gl = this.device.gl;
+    this.handle = null;
+
+    this.texture = props.texture;
+  }
+}

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

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 // Texture class.
@@ -9,6 +10,7 @@
 import {
   Device,
   TextureProps,
+  TextureViewProps,
   Sampler,
   SamplerProps,
   SamplerParameters,
@@ -26,6 +28,7 @@ import {convertSamplerParametersToWebGL} from '../converters/sampler-parameters'
 import {WebGLDevice} from '../webgl-device';
 import {WEBGLBuffer} from './webgl-buffer';
 import {WEBGLSampler} from './webgl-sampler';
+import {WEBGLTextureView} from './webgl-texture-view';
 
 export type WEBGLTextureProps = TextureProps & {
   /** @deprecated use props.sampler */
@@ -151,9 +154,11 @@ export class WEBGLTexture extends Texture<WEBGLTextureProps> {
   readonly gl: WebGL2RenderingContext;
   readonly handle: WebGLTexture;
 
-  /** Sampler object (currently unused) */
+  // (TODO - currently unused in WebGL, but WebGL 2 does support sampler objects) */
   sampler: WEBGLSampler = undefined;
 
+  view: WEBGLTextureView = undefined;
+
   // data;
 
   glFormat: GL = undefined;
@@ -223,6 +228,10 @@ export class WEBGLTexture extends Texture<WEBGLTextureProps> {
     return `Texture(${this.id},${this.width}x${this.height})`;
   }
 
+  createView(props: TextureViewProps): WEBGLTextureView {
+    return new WEBGLTextureView(this.device, {...props, texture: this});
+  }
+
   // eslint-disable-next-line max-statements
   initialize(props: WEBGLTextureProps = {}): this {
     // Cube textures
@@ -314,7 +323,9 @@ export class WEBGLTexture extends Texture<WEBGLTextureProps> {
     this.setSampler(props.sampler);
     this._setSamplerParameters(parameters);
 
-    if (mipmaps) {
+    this.view = this.createView({...this.props, mipLevelCount: 1, arrayLayerCount: 1});
+
+    if (mipmaps && this.device.isTextureFormatFilterable(props.format)) {
       this.generateMipmap();
     }
 

package/src/adapter/resources/webgl-transform-feedback.ts

@@ -2,7 +2,7 @@ import type {PrimitiveTopology, ShaderLayout, TransformFeedbackProps} from '@lum
 import {log, TransformFeedback, Buffer, BufferRange} from '@luma.gl/core';
 import {GL} from '@luma.gl/constants';
 import {WebGLDevice} from '../webgl-device';
-import {WEBGLBuffer} from '../..';
+import {WEBGLBuffer} from '../../index';
 import {getGLPrimitive} from '../helpers/webgl-topology-utils';
 
 export class WEBGLTransformFeedback extends TransformFeedback {
@@ -174,12 +174,7 @@ export class WEBGLTransformFeedback extends TransformFeedback {
     }
   }
 
-  protected _bindBuffer(
-    index: number,
-    buffer: Buffer,
-    byteOffset = 0,
-    byteLength?: number
-  ): void {
+  protected _bindBuffer(index: number, buffer: Buffer, byteOffset = 0, byteLength?: number): void {
     const handle = buffer && (buffer as WEBGLBuffer).handle;
     if (!handle || byteLength === undefined) {
       this.gl.bindBufferBase(GL.TRANSFORM_FEEDBACK_BUFFER, index, handle);

package/src/adapter/resources/webgl-vertex-array.ts

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import type {Device, Buffer, VertexArrayProps, TypedArray, NumberArray} from '@luma.gl/core';
@@ -106,7 +107,7 @@ export class WEBGLVertexArray extends VertexArray {
   }
 
   /** Set a location in vertex attributes array to a constant value, disables the location */
-  override setConstant(location: number, value: TypedArray): void {
+  override setConstantWebGL(location: number, value: TypedArray): void {
     this._enable(location, false);
     this.attributes[location] = value;
   }
@@ -146,7 +147,7 @@ export class WEBGLVertexArray extends VertexArray {
       const constant = this.attributes[location];
       // A typed array means this is a constant
       if (ArrayBuffer.isView(constant)) {
-        this.device.setConstantAttribute(location, constant);
+        this.device.setConstantAttributeWebGL(location, constant);
       }
     }
   }

package/src/adapter/webgl-canvas-context.ts

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import type {CanvasContextProps} from '@luma.gl/core';
@@ -6,8 +7,8 @@ import {CanvasContext} from '@luma.gl/core';
 import {WebGLDevice} from './webgl-device';
 import {WEBGLFramebuffer} from './resources/webgl-framebuffer';
 
-/** 
- * A WebGL Canvas Context which manages the canvas and handles drawing buffer resizing etc 
+/**
+ * A WebGL Canvas Context which manages the canvas and handles drawing buffer resizing etc
  */
 export class WebGLCanvasContext extends CanvasContext {
   readonly device: WebGLDevice;
@@ -33,7 +34,8 @@ export class WebGLCanvasContext extends CanvasContext {
   /** Resizes and updates render targets if necessary */
   update() {
     const size = this.getPixelSize();
-    const sizeChanged = size[0] !== this.presentationSize[0] || size[1] !== this.presentationSize[1];
+    const sizeChanged =
+      size[0] !== this.presentationSize[0] || size[1] !== this.presentationSize[1];
     if (sizeChanged) {
       this.presentationSize = size;
       this.resize();