@luma.gl/webgl 9.0.0-alpha.26 → 9.0.0-alpha.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-alpha.26",
+  "version": "9.0.0-alpha.29",
   "description": "WebGL2 adapter for the luma.gl API",
   "type": "module",
   "license": "MIT",
@@ -44,12 +44,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/api": "9.0.0-alpha.26",
-    "@luma.gl/constants": "9.0.0-alpha.26",
+    "@luma.gl/api": "9.0.0-alpha.29",
+    "@luma.gl/constants": "9.0.0-alpha.29",
     "@probe.gl/env": "^4.0.2"
   },
   "devDependencies": {
-    "@luma.gl/test-utils": "9.0.0-alpha.26"
+    "@luma.gl/test-utils": "9.0.0-alpha.29"
   },
-  "gitHead": "e255f78c1c0a4555808c6e9282bcecb6accd147b"
+  "gitHead": "1aee1ad82fd09d441172f5ef490ebc083a7fa239"
 }

package/src/adapter/helpers/get-shader-layout.ts

@@ -1,16 +1,17 @@
 // luma.gl, MIT license
 
-import {
+import type {
   ShaderLayout,
-  // BindingLayout,
+  AttributeLayout,
   UniformBinding,
   UniformBlockBinding,
-  ProgramBindings,
   AttributeBinding,
   VaryingBinding,
-  // AttributeLayout,
-  AccessorObject
+  AccessorObject,
+  BufferMapping,
+  VertexFormat
 } from '@luma.gl/api';
+import {log} from '@luma.gl/api';
 import {GL} from '@luma.gl/constants';
 import {isWebGL2} from '../../context/context/webgl-checks';
 import {Accessor} from '../../classic/accessor'; // TODO - should NOT depend on classic API
@@ -24,14 +25,13 @@ import {isSamplerUniform} from './uniforms';
  * (although linking does not need to have been successful).
  */
 export function getShaderLayout(gl: WebGLRenderingContext, program: WebGLProgram): ShaderLayout {
-  const programBindings = getProgramBindings(gl, program);
-
   const shaderLayout: ShaderLayout = {
     attributes: [],
     bindings: []
   };
 
-  for (const attribute of programBindings.attributes) {
+  const attributes: AttributeBinding[] = readAttributeBindings(gl, program);
+  for (const attribute of attributes) {
     // TODO - multicolumn attributes like a matrix4 can be up to 16 elts...
     const size = Math.min(attribute.accessor.size, 4);
     const format =
@@ -46,8 +46,9 @@ export function getShaderLayout(gl: WebGLRenderingContext, program: WebGLProgram
   }
 
   // Uniform blocks
-  for (const uniformBlock of programBindings.uniformBlocks) {
-    const uniforms = uniformBlock.uniforms.map((uniform) => ({
+  const uniformBlocks: UniformBlockBinding[] = readUniformBlocks(gl, program);
+  for (const uniformBlock of uniformBlocks) {
+    const uniforms = uniformBlock.uniforms.map(uniform => ({
       name: uniform.name,
       format: uniform.format,
       byteOffset: uniform.byteOffset,
@@ -64,8 +65,9 @@ export function getShaderLayout(gl: WebGLRenderingContext, program: WebGLProgram
     });
   }
 
+  const uniforms: UniformBinding[] = readUniformBindings(gl, program);
   let textureUnit = 0;
-  for (const uniform of programBindings.uniforms) {
+  for (const uniform of uniforms) {
     if (isSamplerUniform(uniform.type)) {
       const {viewDimension, sampleType} = getSamplerInfo(uniform.type);
       shaderLayout.bindings.push({
@@ -82,38 +84,95 @@ export function getShaderLayout(gl: WebGLRenderingContext, program: WebGLProgram
     }
   }
 
-  const uniforms = programBindings.uniforms?.filter((uniform) => uniform.location !== null) || [];
   if (uniforms.length) {
     shaderLayout.uniforms = uniforms;
   }
-  if (programBindings.varyings?.length) {
-    shaderLayout.varyings = programBindings.varyings;
+
+  // Varyings
+  const varyings: VaryingBinding[] = readVaryings(gl, program);
+  // Note - samplers are always in unform bindings, even if uniform blocks are used
+  if (varyings?.length) {
+    shaderLayout.varyings = varyings;
   }
 
   return shaderLayout;
 }
 
 /**
- * Extract metadata describing binding information for a program's shaders
- * Note: `linkProgram()` needs to have been called
- * (although linking does not need to have been successful).
+ * 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? This could also be done more clearly with bufferMapping
  */
-export function getProgramBindings(
-  gl: WebGLRenderingContext,
-  program: WebGLProgram
-): ProgramBindings {
-  const config: ProgramBindings = {
-    attributes: readAttributeBindings(gl, program),
-    uniforms: readUniformBindings(gl, program),
-    uniformBlocks: readUniformBlocks(gl, program),
-    varyings: readVaryings(gl, program)
+export 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.format = attribute.format || baseAttribute.format;
+      baseAttribute.stepMode = attribute.stepMode || baseAttribute.stepMode;
+    }
+  }
+  return mergedLayout;
+}
+
+export function mergeBufferMap(baseLayout: ShaderLayout, bufferMap: BufferMapping[]): ShaderLayout {
+  // Deep clone the base layout
+  const mergedLayout: ShaderLayout = {
+    ...baseLayout,
+    attributes: baseLayout.attributes.map(attribute => ({...attribute}))
   };
+  for (const bufferMapping of bufferMap) {
+    // Handle interleave
+    switch (bufferMapping.type) {
+      case 'interleave':
+        // Handle interleaved buffer mapping
+        for (const attributeOverride of bufferMapping.attributes) {
+          overrideShaderLayoutAttribute(mergedLayout, attributeOverride);
+        }
+        break;
+
+      default:
+        // Handle simple attribute overrides
+        overrideShaderLayoutAttribute(mergedLayout, bufferMapping);
+    }
+  }
+  return mergedLayout;
+}
 
-  Object.seal(config);
-  return config;
-  // generateWebGPUStyleBindings(bindings);
+function overrideShaderLayoutAttribute(
+  layout: ShaderLayout,
+  attributeOverride: {name: string; format?: VertexFormat}
+): void {
+  const attribute = getAttributeFromLayout(layout, attributeOverride.name);
+  if (attribute && attributeOverride.format) {
+    attribute.format = attributeOverride.format;
+  }
 }
 
+export function getAttributeFromLayout(
+  shaderLayout: ShaderLayout,
+  name: string
+): AttributeLayout | null {
+  const attribute = shaderLayout.attributes.find(attr => attr.name === name);
+  if (!attribute) {
+    log.warn(`shader layout attribute "${name}" not present in shader`);
+  }
+  return attribute || null;
+}
+
+// HELPERS
+
 /**
  * Extract info about all transform feedback varyings
  *
@@ -261,7 +320,8 @@ function readUniformBlocks(
       uniforms: [] as any[]
     };
 
-    const uniformIndices = getBlockParameter(blockIndex, GL.UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICES) as number[] || [];
+    const uniformIndices =
+      (getBlockParameter(blockIndex, GL.UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICES) as number[]) || [];
 
     const uniformType = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_TYPE); // Array of GLenum indicating the types of the uniforms.
     const uniformArrayLength = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_SIZE); // Array of GLuint indicating the sizes of the uniforms.
@@ -283,14 +343,14 @@ function readUniformBlocks(
       if (!activeInfo) {
         throw new Error('activeInfo');
       }
-  
+
       blockInfo.uniforms.push({
         name: activeInfo.name,
         format: decodeUniformType(uniformType[i]).format,
         type: uniformType[i],
         arrayLength: uniformArrayLength[i],
         byteOffset: uniformOffset[i],
-        byteStride: uniformStride[i],
+        byteStride: uniformStride[i]
         // matrixStride: uniformStride[i],
         // rowMajor: uniformRowMajor[i]
       });
@@ -327,7 +387,7 @@ const SAMPLER_UNIFORMS_GL_TO_GPU: Record<
   [GL.UNSIGNED_INT_SAMPLER_2D_ARRAY]: ['2d-array', 'uint']
 };
 
-type SamplerInfo =   | {
+type SamplerInfo = {
   viewDimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
   sampleType: 'float' | 'unfilterable-float' | 'depth' | 'sint' | 'uint';
 };

package/src/adapter/helpers/get-vertex-buffer-layout.ts

@@ -0,0 +1,123 @@
+import type {ShaderLayout, BufferMapping, AttributeLayout} from '@luma.gl/api';
+import {decodeVertexFormat} from '@luma.gl/api';
+
+/**
+ * Build a WebGPU vertex buffer layout intended for use in a GPURenderPassDescriptor.
+ * Converts luma.gl attribute definitions to a WebGPU GPUVertexBufferLayout[] array
+ * @param layout
+ * @param bufferMap The buffer map is optional
+ * @returns WebGPU layout intended for a GPURenderPassDescriptor.
+ */
+export function getVertexBufferLayout(layout: ShaderLayout, bufferMap: BufferMapping[]): GPUVertexBufferLayout[] {
+  const vertexBufferLayouts: GPUVertexBufferLayout[] = [];
+  const usedAttributes = new Set<string>();
+
+  // First handle any buffers mentioned in `bufferMapping`
+  for (const mapping of bufferMap) {
+    // Build vertex attributes for one buffer
+    const vertexAttributes: GPUVertexAttribute[] = [];
+
+    // TODO verify that all stepModes for one buffer are the same
+    let stepMode: 'vertex' | 'instance' = 'vertex';
+    let byteStride = 0;
+    const byteOffset = mapping.byteOffset || 0;
+
+    // interleaved mapping {..., attributes: [{...}, ...]}
+    if ('attributes' in mapping) {
+      // const arrayStride = mapping.byteStride; TODO 
+      for (const interleaved of mapping.attributes) {
+        const attributeLayout = findAttributeLayout(layout, interleaved.name, usedAttributes);
+
+        stepMode = attributeLayout.stepMode || 'vertex';
+        vertexAttributes.push({
+          format: attributeLayout.format,
+          offset: byteOffset + byteStride,
+          shaderLocation: attributeLayout.location
+        });
+
+        byteStride += decodeVertexFormat(attributeLayout.format).byteLength;
+      }
+      // non-interleaved mapping (just set offset and stride)
+    } else {
+      const attributeLayout = findAttributeLayout(layout, mapping.name, usedAttributes);
+      byteStride = decodeVertexFormat(attributeLayout.format).byteLength;
+
+      stepMode = attributeLayout.stepMode || 'vertex';
+      vertexAttributes.push({
+        format: attributeLayout.format,
+        offset: byteOffset,
+        shaderLocation: attributeLayout.location
+      });
+    }
+
+    // Store all the attribute bindings for one buffer
+    vertexBufferLayouts.push({
+      arrayStride: mapping.byteStride || byteStride,
+      stepMode: stepMode || 'vertex',
+      attributes: vertexAttributes
+    });
+  }
+
+  // Add any non-mapped attributes
+  for (const attribute of layout.attributes) {
+    if (!usedAttributes.has(attribute.name)) {
+      vertexBufferLayouts.push({
+        arrayStride: decodeVertexFormat(attribute.format).byteLength,
+        stepMode: attribute.stepMode || 'vertex',
+        attributes: [{
+          format: attribute.format,
+          offset: 0,
+          shaderLocation: attribute.location
+        }]
+      });
+    }
+  }
+
+  return vertexBufferLayouts;
+}
+
+export function getBufferSlots(layout: ShaderLayout, bufferMap: BufferMapping[]): Record<string, number> {
+  const usedAttributes = new Set<string>();
+  let bufferSlot = 0;
+  const bufferSlots: Record<string, number> = {};
+
+  // First handle any buffers mentioned in `bufferMapping`
+  for (const mapping of bufferMap) {
+    // interleaved mapping {..., attributes: [{...}, ...]}
+    if ('attributes' in mapping) {
+      for (const interleaved of mapping.attributes) {
+        usedAttributes.add(interleaved.name);
+      }
+      // non-interleaved mapping (just set offset and stride)
+    } else {
+      usedAttributes.add(mapping.name);
+    }
+    bufferSlots[mapping.name] = bufferSlot++;
+  }
+
+  // Add any non-mapped attributes
+  for (const attribute of layout.attributes) {
+    if (!usedAttributes.has(attribute.name)) {
+      bufferSlots[attribute.name] = bufferSlot++;
+    }
+  }
+
+  return bufferSlots;
+}
+
+/**
+ * Looks up an attribute in the ShaderLayout.
+ * @throws if name is not in ShaderLayout
+ * @throws if name has already been referenced
+ */
+function findAttributeLayout(layout: ShaderLayout, name: string, attributeNames: Set<string>): AttributeLayout {
+  const attribute = layout.attributes.find(attribute => attribute.name === name);
+  if (!attribute) {
+    throw new Error(`Unknown attribute ${name}`);
+  }
+  if (attributeNames.has(name)) {
+    throw new Error(`Duplicate attribute ${name}`);
+  }
+  attributeNames.add(name);
+  return attribute;
+}

package/src/adapter/objects/webgl-vertex-array-object.ts

@@ -1,18 +1,23 @@
-import {assert, ResourceProps} from '@luma.gl/api';
+import type {Device, Buffer, ResourceProps, TypedArray, NumericArray} from '@luma.gl/api';
+import {Resource, assert, getScratchArray, fillArray} from '@luma.gl/api';
 import {GL} from '@luma.gl/constants';
 import {getBrowser} from '@probe.gl/env';
 
 import {WebGLDevice} from '../webgl-device';
 import {WebGLResource} from './webgl-resource';
-
 import {WEBGLBuffer} from '../resources/webgl-buffer';
 
+import {BufferWithAccessor} from '../../classic/buffer-with-accessor';
+
 const ERR_ELEMENTS = 'elements must be GL.ELEMENT_ARRAY_BUFFER';
 
 /**
  * VertexArrayObject properties
+ * @param constantAttributeZero Attribute 0 can not be disable on most desktop OpenGL based browsers
+ * and on iOS Safari browser.
  */
 export type VertexArrayObjectProps = ResourceProps & {
+  constantAttributeZero?: boolean;
 };
 
 /** VertexArrayObject wrapper */
@@ -21,11 +26,26 @@ export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps
     return 'BaseVertexArrayObject';
   }
 
-  constructor(device: WebGLDevice, props?: VertexArrayObjectProps) {
-    // @ts-expect-error
-    super(device, props, {});
+  /** Buffer constant */
+  private buffer: BufferWithAccessor | null = null;
+  private bufferValue = null;
+
+  static isConstantAttributeZeroSupported(device: Device): boolean {
+    return device.info.type === 'webgl2' || getBrowser() === 'Chrome';
   }
 
+  // Create a VertexArray
+  constructor(device: Device, props?: VertexArrayObjectProps) {
+    super(device, props, {...Resource.defaultProps, constantAttributeZero: false});
+    Object.seal(this);
+  }
+
+  override destroy(): void {
+    super.destroy();
+    if (this.buffer) {
+      this.buffer?.destroy();
+    }  }
+
   override _createHandle() {
     return this.gl2.createVertexArray();
   }
@@ -41,24 +61,43 @@ export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps
     this.gl2.bindVertexArray(handle);
   }
 
+  /**
+   * Enabling an attribute location makes it reference the currently bound buffer
+   *  Disabling an attribute location makes it reference the global constant value
+   * TODO - handle single values for size 1 attributes?
+   * TODO - convert classic arrays based on known type?
+   */
+  enable(location: number, enable = true): void {
+    // Attribute 0 cannot be disabled in most desktop OpenGL based browsers...
+    const canDisableAttributeZero = this.device.isWebGL2 || getBrowser() === 'Chrome';
+    const canDisableAttribute = canDisableAttributeZero || location !== 0;
+
+    if (enable || canDisableAttribute) {
+      location = Number(location);
+      this.bind(() =>
+        enable
+          ? this.gl.enableVertexAttribArray(location)
+          : this.gl.disableVertexAttribArray(location)
+      );
+    }  }
+
   // Set (bind) an elements buffer, for indexed rendering.
   // Must be a Buffer bound to GL.ELEMENT_ARRAY_BUFFER. Constants not supported
   setElementBuffer(elementBuffer: WEBGLBuffer | null = null, opts = {}) {
-    assert(!elementBuffer || elementBuffer.target === GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
+    assert(!elementBuffer || elementBuffer.glTarget === GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
 
     // The GL.ELEMENT_ARRAY_BUFFER_BINDING is stored on the VertexArrayObject...
     this.bind(() => {
       this.gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, elementBuffer ? elementBuffer.handle : null);
     });
-
-    return this;
   }
 
   /** Set a location in vertex attributes array to a buffer, enables the location, sets divisor */
-  setBuffer(location: number, buffer: WEBGLBuffer, accessor: any): this {
+  setBuffer(location: number, buffer: WEBGLBuffer, accessor: any): void {
     // Check target
-    if (buffer.target === GL.ELEMENT_ARRAY_BUFFER) {
-      return this.setElementBuffer(buffer, accessor);
+    if (buffer.glTarget === GL.ELEMENT_ARRAY_BUFFER) {
+      this.setElementBuffer(buffer, accessor);
+      return;
     }
 
     const {size, type, stride, offset, normalized, integer, divisor} = accessor;
@@ -83,29 +122,154 @@ export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps
 
       // NOTE We don't unbind buffer here, typically another buffer will be bound just after
     });
+  }
 
-    return this;
+  /**
+   * Set an attribute to a constant value
+   * @param device
+   * @param location
+   * @param array
+   * 
+   * @note Constants are stored globally on the WebGL context, not the VAO
+   * so they need to be updated before every render
+   * @todo - use known type (in configuration or passed in) to allow non-typed arrays?
+   * @todo - remember/cache values to avoid setting them unnecessarily?
+   */
+  setConstant(location: any, array: TypedArray): void {
+    switch (array.constructor) {
+      case Float32Array:
+        setConstantFloatArray(this.device, location, array as Float32Array);
+        break;
+      case Int32Array:
+        setConstantIntArray(this.device, location, array as Int32Array);
+        break;
+      case Uint32Array:
+        setConstantUintArray(this.device, location, array as Uint32Array);
+        break;
+      default:
+        assert(false);
+    }
   }
 
   /**
-   * Enabling an attribute location makes it reference the currently bound buffer
-   *  Disabling an attribute location makes it reference the global constant value
-   * TODO - handle single values for size 1 attributes?
-   * TODO - convert classic arrays based on known type?
+   * Provide a means to create a buffer that is equivalent to a constant.
+   * NOTE: Desktop OpenGL cannot disable attribute 0.
+   * https://stackoverflow.com/questions/20305231/webgl-warning-attribute-0-is-disabled-
+   * this-has-significant-performance-penalty
    */
-  enable(location: number, enable = true): this {
-    // Attribute 0 cannot be disabled in most desktop OpenGL based browsers...
-    const canDisableAttributeZero = this.device.isWebGL2 || getBrowser() === 'Chrome';
-    const canDisableAttribute = canDisableAttributeZero || location !== 0;
+  getConstantBuffer(elementCount: number, value): Buffer {
+    // Create buffer only when needed, and reuse it (avoids inflating buffer creation statistics)
 
-    if (enable || canDisableAttribute) {
-      location = Number(location);
-      this.bind(() =>
-        enable
-          ? this.gl.enableVertexAttribArray(location)
-          : this.gl.disableVertexAttribArray(location)
-      );
+    const constantValue = normalizeConstantArrayValue(value);
+
+    const byteLength = constantValue.byteLength * elementCount;
+    const length = constantValue.length * elementCount;
+
+    let updateNeeded = !this.buffer;
+
+    this.buffer = this.buffer || this.device.createBuffer({byteLength}) as BufferWithAccessor;
+    updateNeeded = updateNeeded || this.buffer.reallocate(byteLength);
+
+    // Reallocate and update contents if needed
+    updateNeeded =
+      updateNeeded || !compareConstantArrayValues(constantValue, this.bufferValue);
+
+    if (updateNeeded) {
+      // Create a typed array that is big enough, and fill it with the required data
+      const typedArray = getScratchArray(value.constructor, length);
+      fillArray({target: typedArray, source: constantValue, start: 0, count: length});
+      this.buffer.subData(typedArray);
+      this.bufferValue = value;
+    }
+
+    return this.buffer;
+  }
+}
+
+function setConstantFloatArray(device: WebGLDevice, location: number, array: Float32Array): void {
+  switch (array.length) {
+    case 1:
+      device.gl.vertexAttrib1fv(location, array);
+      break;
+    case 2:
+      device.gl.vertexAttrib2fv(location, array);
+      break;
+    case 3:
+      device.gl.vertexAttrib3fv(location, array);
+      break;
+    case 4:
+      device.gl.vertexAttrib4fv(location, array);
+      break;
+    default:
+      assert(false);
+  }
+}
+
+function setConstantIntArray(device: WebGLDevice, location: number, array: Int32Array): void {
+  device.assertWebGL2();
+  device.gl2?.vertexAttribI4iv(location, array);
+  // switch (array.length) {
+  //   case 1:
+  //     gl.vertexAttribI1iv(location, array);
+  //     break;
+  //   case 2:
+  //     gl.vertexAttribI2iv(location, array);
+  //     break;
+  //   case 3:
+  //     gl.vertexAttribI3iv(location, array);
+  //     break;
+  //   case 4:
+  //     break;
+  //   default:
+  //     assert(false);
+  // }
+}
+
+function setConstantUintArray(device: WebGLDevice, location: number, array: Uint32Array) {
+  device.assertWebGL2();
+  device.gl2?.vertexAttribI4uiv(location, array);
+  // switch (array.length) {
+  //   case 1:
+  //     gl.vertexAttribI1uiv(location, array);
+  //     break;
+  //   case 2:
+  //     gl.vertexAttribI2uiv(location, array);
+  //     break;
+  //   case 3:
+  //     gl.vertexAttribI3uiv(location, array);
+  //     break;
+  //   case 4:
+  //     gl.vertexAttribI4uiv(location, array);
+  //     break;
+  //   default:
+  //     assert(false);
+  // }
+}
+
+// HELPERS
+
+/**
+ * TODO - convert Arrays based on known type? (read type from accessor, don't assume Float32Array)
+ * TODO - handle single values for size 1 attributes?
+ */
+function normalizeConstantArrayValue(arrayValue: NumericArray) {
+  if (Array.isArray(arrayValue)) {
+    return new Float32Array(arrayValue);
+  }
+  return arrayValue;
+}
+
+/**
+ * 
+ */
+function compareConstantArrayValues(v1: NumericArray, v2: NumericArray): boolean {
+  if (!v1 || !v2 || v1.length !== v2.length || v1.constructor !== v2.constructor) {
+    return false;
+  }
+  for (let i = 0; i < v1.length; ++i) {
+    if (v1[i] !== v2[i]) {
+      return false;
     }
-    return this;
   }
+  return true;
 }