@luma.gl/webgl 9.0.0-alpha.3 → 9.0.0-alpha.30

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

@@ -1,56 +1,74 @@
 import type {
   RenderPipelineProps,
-  RenderPipelineParameters,
   RenderPass,
   Buffer,
   Binding,
   ShaderLayout,
   PrimitiveTopology,
-  BindingLayout,
-  AttributeLayout
-} from '@luma.gl/api';
-import {RenderPipeline, cast, log, decodeVertexFormat} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
+  // BindingLayout,
+  AttributeLayout,
+  TypedArray,
+  BufferMapping
+} from '@luma.gl/core';
+import {RenderPipeline, cast, log, decodeVertexFormat} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+
 import {getWebGLDataType} from '../converters/texture-formats';
-import {getShaderLayout} from '../helpers/get-shader-layout';
-import {withDeviceParameters} from '../converters/device-parameters';
+import {getShaderLayout, mergeShaderLayout, mergeBufferMap} from '../helpers/get-shader-layout';
+import {withDeviceParameters, withGLParameters} from '../converters/device-parameters';
 import {setUniform} from '../helpers/set-uniform';
 // import {copyUniform, checkUniformValues} from '../../classes/uniforms';
 
-import WebGLDevice from '../webgl-device';
-import WEBGLBuffer from './webgl-buffer';
-import WEBGLShader from './webgl-shader';
-import WEBGLTexture from './webgl-texture';
-import WEBGLVertexArrayObject from '../objects/webgl-vertex-array-object';
+import {WebGLDevice} from '../webgl-device';
+import {WEBGLBuffer} from './webgl-buffer';
+import {WEBGLShader} from './webgl-shader';
+import {WEBGLTexture} from './webgl-texture';
+import {WEBGLVertexArrayObject} from '../objects/webgl-vertex-array-object';
+import {WEBGLRenderPass} from './webgl-render-pass';
 
 const LOG_PROGRAM_PERF_PRIORITY = 4;
 
 /** Creates a new render pipeline */
-export default class WEBGLRenderPipeline extends RenderPipeline {
+export class WEBGLRenderPipeline extends RenderPipeline {
+  /** The WebGL device that created this render pipeline */
   device: WebGLDevice;
+  /** Handle to underlying WebGL program */
   handle: WebGLProgram;
+  /** vertex shader */
   vs: WEBGLShader;
+  /** fragment shader */
   fs: WEBGLShader;
+  /** The merged layout */
   layout: ShaderLayout;
+  /** The layout extracted from shader by WebGL introspection APIs */
+  introspectedLayout: ShaderLayout;
+  /** Buffer map describing buffer interleaving etc */
+  bufferMap: BufferMapping[];
 
-  // configuration: ProgramConfiguration;
-  // Experimental flag to avoid deleting Program object while it is cached
-  varyings: string[];
-  vertexArrayObject: WEBGLVertexArrayObject;
-  _indexBuffer?: Buffer;
+  /** Uniforms set on this model */
   uniforms: Record<string, any> = {};
+  /** Bindings set on this model */
   bindings: Record<string, any> = {};
+  /** Any constant attributes */
+  constantAttributes: Record<string, TypedArray> = {};
+  /** Index buffer is stored separately */
+  _indexBuffer?: WEBGLBuffer;
+  /** WebGL varyings */
+  varyings: string[] | null = null;
+
+  /** Stores attribute bindings */
+  vertexArrayObject: WEBGLVertexArrayObject;
+
   _textureUniforms: Record<string, any> = {};
   _textureIndexCounter: number = 0;
   _uniformCount: number = 0;
-  _uniformSetters: Record<string, Function>;
+  _uniformSetters: Record<string, Function> = {}; // TODO are these used?
 
   constructor(device: WebGLDevice, props: RenderPipelineProps) {
     super(device, props);
     this.device = device;
     this.handle = this.props.handle || this.device.gl.createProgram();
-    // @ts-expect-error
-    this.handle.__SPECTOR_Metadata = {id: this.props.id};
+    this.device.setSpectorMetadata(this.handle, {id: this.props.id});
 
     // Create shaders if needed
     this.vs = cast<WEBGLShader>(props.vs);
@@ -64,26 +82,32 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     if (varyings && varyings.length > 0) {
       this.device.assertWebGL2();
       this.varyings = varyings;
-      this.device.gl2.transformFeedbackVaryings(this.handle, varyings, bufferMode);
+      this.device.gl2?.transformFeedbackVaryings(this.handle, varyings, bufferMode);
     }
 
     this._compileAndLink();
 
-    this.layout = props.layout || getShaderLayout(this.device.gl, this.handle);
+    this.introspectedLayout = getShaderLayout(this.device.gl, this.handle);
+    // Merge provided layout with introspected layout
+    this.layout = mergeShaderLayout(this.introspectedLayout, props.layout); 
+    // Merge layout with any buffer map overrides
+    this.bufferMap = props.bufferMap || [];
+    this.layout = mergeBufferMap(this.layout, this.bufferMap); 
     this.vertexArrayObject = new WEBGLVertexArrayObject(this.device);
   }
 
-  destroy(): void {
+  override destroy(): void {
     if (this.handle) {
       this.device.gl.deleteProgram(this.handle);
-      this.handle = null;
+      // this.handle = null;
+      this.destroyed = true;
     }
   }
 
   setIndexBuffer(indexBuffer: Buffer): void {
     const webglBuffer = cast<WEBGLBuffer>(indexBuffer);
     this.vertexArrayObject.setElementBuffer(webglBuffer);
-    this._indexBuffer = indexBuffer;
+    this._indexBuffer = webglBuffer;
   }
 
   /** @todo needed for portable model */
@@ -93,10 +117,10 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
       const attribute = getAttributeLayout(this.layout, name);
       if (!attribute) {
         log.warn(`Ignoring buffer supplied for unknown attribute "${name}" in pipeline "${this.id}" (buffer "${buffer.id}")`)();
-        continue;
+        continue; // eslint-disable-line no-continue
       }
       const decoded = decodeVertexFormat(attribute.format);
-      const {type: typeString, components: size, byteLength: stride, normalized, integer} = decoded;
+      const {type: typeString, components: size, byteLength: stride, normalized /* , integer*/} = decoded;
       const divisor = attribute.stepMode === 'instance' ? 1 : 0;
       const type = getWebGLDataType(typeString);
       this.vertexArrayObject.setBuffer(attribute.location, webglBuffer, {
@@ -105,13 +129,39 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
         stride,
         offset: 0,
         normalized,
-        integer,
-        divisor: attribute.stepMode === 'instance' ? 1 : 0
+        // it is the shader attribute declaration, not the vertex memory format, 
+        // that determines if the data in the buffer will be treated as integers.
+        // /
+        // Also note that WebGL supports assigning non-normalized integer data to floating point attributes,
+        // but as far as we can tell, WebGPU does not.
+        integer: false,
+        divisor
       });
     }
   }
 
-  /** @todo needed for portable model */
+  /**
+   * Constant attributes are only supported in WebGL, not in WebGPU
+   * Any attribute that is disabled in the current vertex array object
+   * is read from the context's global constant value for that attribute location.
+   * @param attributes 
+   */
+  setConstantAttributes(attributes: Record<string, TypedArray>): void {
+    for (const [name, value] of Object.entries(attributes)) {
+      const attribute = getAttributeLayout(this.layout, name);
+      if (!attribute) {
+        log.warn(`Ignoring constant value supplied for unknown attribute "${name}" in pipeline "${this.id}"`)();
+        continue; // eslint-disable-line no-continue
+      }
+      this.vertexArrayObject.setConstant(attribute.location, value);
+    }
+    Object.assign(this.constantAttributes, attributes);
+  }
+
+  /** 
+   * Bindings include: textures, samplers and uniform buffers
+   * @todo needed for portable model 
+   */
   setBindings(bindings: Record<string, Binding>): void {
     // if (log.priority >= 2) {
     //   checkUniformValues(uniforms, this.id, this._uniformSetters);
@@ -121,6 +171,7 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
       const binding = this.layout.bindings.find((binding) => binding.name === name);
       if (!binding) {
         log.warn(`Unknown binding ${name} in render pipeline ${this.id}`)();
+        continue; // eslint-disable-line no-continue
       }
       if (!value) {
         log.warn(`Unsetting binding ${name} in render pipeline ${this.id}`)();
@@ -158,7 +209,7 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
    * This function unifies those ways into a single call using common parameters with sane defaults
    */
   draw(options: {
-    renderPass?: RenderPass;
+    renderPass: RenderPass;
     vertexCount?: number;
     indexCount?: number;
     instanceCount?: number;
@@ -168,20 +219,20 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     baseVertex?: number;
   }): boolean {
     const {
-      renderPass = this.device.getDefaultRenderPass(),
+      renderPass,
       vertexCount,
-      indexCount,
+      // indexCount,
       instanceCount,
       firstVertex = 0,
-      firstIndex,
-      firstInstance,
-      baseVertex
+      // firstIndex,
+      // firstInstance,
+      // baseVertex
     } = options;
 
     const drawMode = getDrawMode(this.props.topology);
     const isIndexed: boolean = Boolean(this._indexBuffer);
-    const indexType = this._indexBuffer?.props.indexType === 'uint16' ? GL.UNSIGNED_SHORT : GL.UNSIGNED_INT;
-    const isInstanced: boolean = options.instanceCount > 0;
+    const indexType = this._indexBuffer?.glIndexType;
+    const isInstanced: boolean = Number(options.instanceCount) > 0;
 
     // Avoid WebGL draw call when not rendering any data or values are incomplete
     // Note: async textures set as uniforms might still be loading.
@@ -195,8 +246,6 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     this.device.gl.useProgram(this.handle);
 
     this.vertexArrayObject.bind(() => {
-      const parameters = {...this.props.parameters, framebuffer: renderPass.props.framebuffer};
-
       const primitiveMode = getGLPrimitive(this.props.topology);
       const transformFeedback: any = null;
       if (transformFeedback) {
@@ -206,33 +255,38 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
       // We have to apply bindings before every draw call since other draw calls will overwrite
       this._applyBindings();
       this._applyUniforms();
+      this._applyConstantAttributes();
+
+      const webglRenderPass = renderPass as WEBGLRenderPass;
 
       // TODO - double context push/pop
-      withDeviceParameters(this.device, parameters, () => {
-        // TODO - Use polyfilled WebGL2RenderingContext instead of ANGLE extension
-        if (isIndexed && isInstanced) {
-          // ANGLE_instanced_arrays extension
-          this.device.gl2.drawElementsInstanced(
-            drawMode,
-            vertexCount,
-            indexType,
-            firstVertex,
-            instanceCount
-          );
-          // } else if (isIndexed && this.device.isWebGL2 && !isNaN(start) && !isNaN(end)) {
-          //   this.device.gl2.drawRangeElements(drawMode, start, end, vertexCount, indexType, offset);
-        } else if (isIndexed) {
-          this.device.gl.drawElements(drawMode, vertexCount, indexType, firstVertex);
-        } else if (isInstanced) {
-          this.device.gl2.drawArraysInstanced(drawMode, firstVertex, vertexCount, instanceCount);
-        } else {
-          this.device.gl.drawArrays(drawMode, firstVertex, vertexCount);
+      withDeviceParameters(this.device, this.props.parameters, () => {
+        withGLParameters(this.device, webglRenderPass.glParameters, () => {
+          // TODO - Use polyfilled WebGL2RenderingContext instead of ANGLE extension
+          if (isIndexed && isInstanced) {
+            // ANGLE_instanced_arrays extension
+            this.device.gl2?.drawElementsInstanced(
+              drawMode,
+              vertexCount || 0, // indexCount?
+              indexType,
+              firstVertex,
+              instanceCount || 0
+            );
+            // } else if (isIndexed && this.device.isWebGL2 && !isNaN(start) && !isNaN(end)) {
+            //   this.device.gl2.drawRangeElements(drawMode, start, end, vertexCount, indexType, offset);
+          } else if (isIndexed) {
+            this.device.gl.drawElements(drawMode, vertexCount || 0, indexType, firstVertex); // indexCount?
+          } else if (isInstanced) {
+            this.device.gl2?.drawArraysInstanced(drawMode, firstVertex, vertexCount || 0, instanceCount || 0);
+          } else {
+            this.device.gl.drawArrays(drawMode, firstVertex, vertexCount || 0);
+          }
+        });
+
+        if (transformFeedback) {
+          transformFeedback.end();
         }
       });
-
-      if (transformFeedback) {
-        transformFeedback.end();
-      }
     });
 
     return true;
@@ -275,12 +329,12 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
   _areTexturesRenderable() {
     let texturesRenderable = true;
 
-    for (const [name, texture] of Object.entries(this._textureUniforms)) {
+    for (const [, texture] of Object.entries(this._textureUniforms)) {
       texture.update();
       texturesRenderable = texturesRenderable && texture.loaded;
     }
 
-    for (const [name, texture] of Object.entries(this.bindings)) {
+    for (const [, texture] of Object.entries(this.bindings)) {
       // texture.update();
       if (texture.loaded !== undefined) {
         texturesRenderable = texturesRenderable && texture.loaded;
@@ -295,6 +349,9 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     this.device.gl.useProgram(this.handle);
 
     const {gl2} = this.device;
+    if (!gl2) {
+      throw new Error('bindings');
+    }
 
     let textureUnit = 0;
     let uniformBufferIndex = 0;
@@ -352,26 +409,44 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
   _applyUniforms() {
     for (const uniformLayout of this.layout.uniforms || []) {
       const {name, location, type, textureUnit} = uniformLayout;
-      const value = this.uniforms[name] || textureUnit;
+      const value = this.uniforms[name] ?? textureUnit;
       if (value !== undefined) {
         setUniform(this.device.gl, location, type, value);
       }
     }
   }
+
+  /**
+   * Constant attributes are only supported in WebGL, not in WebGPU
+   * Any attribute that is disabled in the current vertex array object
+   * is read from the context's global constant value for that attribute location.
+   */
+  _applyConstantAttributes(): void {
+    for (const [name, value] of Object.entries(this.constantAttributes)) {
+      const attribute = getAttributeLayout(this.layout, name);
+      if (!attribute) {
+        log.warn(`Ignoring constant value supplied for unknown attribute "${name}" in pipeline "${this.id}"`)();
+        continue; // eslint-disable-line no-continue
+      }
+      this.vertexArrayObject.setConstant(attribute.location, value);
+    }
+  }  
 }
 
-/** Get the primitive type for transform feedback */
+/** Get the primitive type for draw */
 function getDrawMode(
   topology: PrimitiveTopology
-): GL.POINTS | GL.LINES | GL.LINE_STRIP | GL.TRIANGLES | GL.TRIANGLE_STRIP {
+): GL.POINTS | GL.LINES | GL.LINE_STRIP | GL.LINE_LOOP | GL.TRIANGLES | GL.TRIANGLE_STRIP | GL.TRIANGLE_FAN {
   // prettier-ignore
   switch (topology) {
-  case 'point-list': return GL.POINTS;
-  case 'line-list': return GL.LINES;
-  case 'line-strip': return GL.LINE_STRIP;
-  case 'triangle-list': return GL.TRIANGLES;
-  case 'triangle-strip': return GL.TRIANGLE_STRIP;
-  default: throw new Error(topology);
+    case 'point-list': return GL.POINTS;
+    case 'line-list': return GL.LINES;
+    case 'line-strip': return GL.LINE_STRIP;
+    case 'line-loop-webgl': return GL.LINE_LOOP;
+    case 'triangle-list': return GL.TRIANGLES;
+    case 'triangle-strip': return GL.TRIANGLE_STRIP;
+    case 'triangle-fan-webgl': return GL.TRIANGLE_FAN;
+    default: throw new Error(topology);
   }
 }
 
@@ -379,35 +454,17 @@ function getDrawMode(
 function getGLPrimitive(topology: PrimitiveTopology): GL.POINTS | GL.LINES | GL.TRIANGLES {
   // prettier-ignore
   switch (topology) {
-  case 'point-list': return GL.POINTS;
-  case 'line-list': return GL.LINES;
-  case 'line-strip': return GL.LINES;
-  case 'triangle-list': return GL.TRIANGLES;
-  case 'triangle-strip': return GL.TRIANGLES;
-  default: throw new Error(topology);
+    case 'point-list': return GL.POINTS;
+    case 'line-list': return GL.LINES;
+    case 'line-strip': return GL.LINES;
+    case 'line-loop-webgl': return GL.LINES;
+    case 'triangle-list': return GL.TRIANGLES;
+    case 'triangle-strip': return GL.TRIANGLES;
+    case 'triangle-fan-webgl': return GL.TRIANGLES;
+    default: throw new Error(topology);
   }
 }
 
-function getAttributesByLocation(
-  attributes: Record<string, Buffer>,
-  layout: ShaderLayout
-): Record<number, Buffer> {
-  const byLocation: Record<number, Buffer> = {};
-  for (const [name, buffer] of Object.entries(attributes)) {
-    const attribute = getAttributeLayout(layout, name);
-    byLocation[attribute.location] = buffer;
-  }
-  return byLocation;
-}
-
-function getAttributeLayout(layout: ShaderLayout, name: string): AttributeLayout | undefined {
-  return layout.attributes.find((binding) => binding.name === name);
-}
-
-function getBindingLayout(layout: ShaderLayout, name: string): BindingLayout {
-  const binding = layout.bindings.find((binding) => binding.name === name);
-  if (!binding) {
-    throw new Error(`Unknown binding ${name}`);
-  }
-  return binding;
+function getAttributeLayout(layout: ShaderLayout, name: string): AttributeLayout | null {
+  return layout.attributes.find((binding) => binding.name === name) || null;
 }

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

@@ -1,8 +1,9 @@
-import {Sampler, SamplerProps} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-import type {WebGLSamplerParameters} from '../../types/webgl';
+// luma.gl, MIT license
+
+import {Sampler, SamplerProps} from '@luma.gl/core';
+import {GL, GLSamplerParameters} from '@luma.gl/constants';
 import {convertSamplerParametersToWebGL} from '../converters/sampler-parameters';
-import type WebGLDevice from '../webgl-device';
+import type {WebGLDevice} from '../webgl-device';
 
 /**
  * Sampler object -
@@ -11,10 +12,10 @@ import type WebGLDevice from '../webgl-device';
  * so that they can be set directly on the texture
  * https://github.com/WebGLSamples/WebGL2Samples/blob/master/samples/sampler_object.html
  */
-export default class WEBGLSampler extends Sampler {
+export class WEBGLSampler extends Sampler {
   readonly device: WebGLDevice;
   readonly handle: WebGLSampler;
-  readonly parameters: WebGLSamplerParameters;
+  readonly parameters: GLSamplerParameters;
 
   constructor(device: WebGLDevice, props: SamplerProps) {
     super(device, props);
@@ -26,7 +27,7 @@ export default class WEBGLSampler extends Sampler {
     }
   }
 
-  destroy(): void {
+  override destroy(): void {
     if (this.handle) {
       this.device.gl2.deleteSampler(this.handle);
       // @ts-expect-error
@@ -34,8 +35,12 @@ export default class WEBGLSampler extends Sampler {
     }
   }
 
+  override toString(): string {
+    return `Sampler(${this.id},${JSON.stringify(this.props)})`;
+  }
+
   /** Set sampler parameters on the sampler */
-  private _setSamplerParameters(parameters: WebGLSamplerParameters): void {
+  private _setSamplerParameters(parameters: GLSamplerParameters): void {
     for (const [pname, value] of Object.entries(parameters)) {
       // Apparently there are integer/float conversion issues requires two parameter setting functions in JavaScript.
       // For now, pick the float version for parameters specified as GLfloat.

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

@@ -1,14 +1,14 @@
 // luma.gl, MIT license
-import {log, uid, Shader, ShaderProps} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
-import {getShaderInfo, CompilerMessage, formatCompilerLog} from '@luma.gl/shadertools';
+import {log, uid, Shader, ShaderProps, CompilerMessage, formatCompilerLog} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import {getShaderInfo} from '../helpers/get-shader-info';
 import {parseShaderCompilerLog} from '../helpers/parse-shader-compiler-log';
-import WebGLDevice from '../webgl-device';
+import {WebGLDevice} from '../webgl-device';
 
 /**
  * An immutable compiled shader program that execute portions of the GPU Pipeline
  */
- export default class WEBGLShader extends Shader {
+export class WEBGLShader extends Shader {
   readonly device: WebGLDevice;
   readonly handle: WebGLShader;
 
@@ -28,18 +28,18 @@ import WebGLDevice from '../webgl-device';
     this._compile(this.source);
   }
 
-  destroy(): void {
+  override destroy(): void {
     if (this.handle) {
       this.removeStats();
       this.device.gl.deleteShader(this.handle);
-      // @ts-expect-error
-      this.handle = null;
+      // this.handle = null;
+      this.destroyed = true;
     }
   }
 
   async compilationInfo(): Promise<readonly CompilerMessage[]> {
     const log = this.device.gl.getShaderInfoLog(this.handle);
-    return parseShaderCompilerLog(log);
+    return log ? parseShaderCompilerLog(log) : [];
   }
 
   // PRIVATE METHODS
@@ -58,7 +58,8 @@ import WebGLDevice from '../webgl-device';
     const compileStatus = gl.getShaderParameter(this.handle, GL.COMPILE_STATUS);
     if (!compileStatus) {
       const shaderLog = gl.getShaderInfoLog(this.handle);
-      const messages = parseShaderCompilerLog(shaderLog).filter(message => message.type === 'error');
+      const parsedLog = shaderLog ? parseShaderCompilerLog(shaderLog) : [];
+      const messages = parsedLog.filter(message => message.type === 'error');
       const formattedLog = formatCompilerLog(messages, source);
       const shaderName: string = getShaderInfo(source).name;
       const shaderDescription = `${this.stage} shader ${shaderName}`;