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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-alpha.27",
+  "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.27",
-    "@luma.gl/constants": "9.0.0-alpha.27",
+    "@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.27"
+    "@luma.gl/test-utils": "9.0.0-alpha.29"
   },
-  "gitHead": "4052244031cb80c27fa0e3fd4c3d5514daa08b78"
+  "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

@@ -84,7 +84,7 @@ export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps
   // 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(() => {
@@ -95,7 +95,7 @@ export class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObjectProps
   /** Set a location in vertex attributes array to a buffer, enables the location, sets divisor */
   setBuffer(location: number, buffer: WEBGLBuffer, accessor: any): void {
     // Check target
-    if (buffer.target === GL.ELEMENT_ARRAY_BUFFER) {
+    if (buffer.glTarget === GL.ELEMENT_ARRAY_BUFFER) {
       this.setElementBuffer(buffer, accessor);
       return;
     }

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

@@ -11,17 +11,21 @@ export class WEBGLBuffer extends Buffer {
   readonly gl: WebGLRenderingContext;
   readonly gl2: WebGL2RenderingContext | null;
   readonly handle: WebGLBuffer;
-  readonly target: number;
 
+  /** Target in OpenGL defines the type of buffer */
+  readonly glTarget: GL.ARRAY_BUFFER | GL.ELEMENT_ARRAY_BUFFER | GL.UNIFORM_BUFFER;
+  /** Usage is a hint on how frequently the buffer will be updates */
+  readonly glUsage: GL.STATIC_DRAW | GL.DYNAMIC_DRAW;
+  /** Index type is needed when issuing draw calls, so we pre-compute it */
+  readonly glIndexType: GL.UNSIGNED_SHORT | GL.UNSIGNED_INT = GL.UNSIGNED_SHORT;
+
+  /** Number of bytes allocated on the GPU for this buffer */
   byteLength: number;
+  /** Number of bytes used */
   bytesUsed: number;
+  /** A partial CPU-side copy of the data in this buffer, for debugging purposes */
   debugData: ArrayBuffer | null = null;
 
-  webglUsage: number;
-
-  // accessor: {};
-
-  
   constructor(device: WebGLDevice, props: BufferProps = {}) {
     super(device, props);
 
@@ -33,13 +37,13 @@ export class WEBGLBuffer extends Buffer {
     this.handle = handle || this.gl.createBuffer();
     device.setSpectorMetadata(this.handle, {...this.props, data: typeof this.props.data});
 
-    // In WebGL1, need to make sure we use GL.ELEMENT_ARRAY_BUFFER when initializing element buffers
-    // otherwise buffer type will lock to generic (non-element) buffer
-    // In WebGL2, we can use GL.COPY_READ_BUFFER which avoids locking the type here
-    // @ts-expect-error Hack - Checking for subclass prop
-    this.target = this.props.target || getWebGLTarget(this.props.usage);
-    // @ts-expect-error Hack - Checking for subclass prop
-    this.webglUsage = this.props.webglUsage || getWebGLUsage(this.props.usage);
+    // - In WebGL1, need to make sure we use GL.ELEMENT_ARRAY_BUFFER when initializing element buffers
+    //   otherwise buffer type will lock to generic (non-element) buffer
+    // - In WebGL2, we can use GL.COPY_READ_BUFFER which avoids locking the type here
+    this.glTarget = getWebGLTarget(this.props.usage);
+    this.glUsage = getWebGLUsage(this.props.usage);
+    this.glIndexType = this.props.indexType === 'uint32' ? GL.UNSIGNED_INT :  GL.UNSIGNED_SHORT;
+
     this.debugData = null;
 
     // Set data: (re)initializes the buffer
@@ -48,25 +52,19 @@ export class WEBGLBuffer extends Buffer {
     } else {
       this._initWithByteLength(props.byteLength || 0);
     }
-
-    // Deprecated: Merge main props and accessor
-    // this.accessor = {...props.accessor};
-
-    // Object.seal(this);
   }
 
   // PRIVATE METHODS
 
-  // Allocate a new buffer and initialize to contents of typed array
+  /** Allocate a new buffer and initialize to contents of typed array */
   _initWithData(data, byteOffset: number = 0, byteLength: number = data.byteLength + byteOffset): this {
     assert(ArrayBuffer.isView(data));
 
-    const target = this._getWriteTarget();
-
-    this.gl.bindBuffer(target, this.handle);
-    this.gl.bufferData(target, byteLength, this.webglUsage);
-    this.gl.bufferSubData(target, byteOffset, data);
-    this.gl.bindBuffer(target, null);
+    const glTarget = this._getWriteTarget();
+    this.gl.bindBuffer(glTarget, this.handle);
+    this.gl.bufferData(glTarget, byteLength, this.glUsage);
+    this.gl.bufferSubData(glTarget, byteOffset, data);
+    this.gl.bindBuffer(glTarget, null);
 
     this.debugData = data.slice(0, DEBUG_DATA_LENGTH);
     this.bytesUsed = byteLength;
@@ -88,11 +86,11 @@ export class WEBGLBuffer extends Buffer {
       data = new Float32Array(0);
     }
 
-    const target = this._getWriteTarget();
+    const glTarget = this._getWriteTarget();
 
-    this.gl.bindBuffer(target, this.handle);
-    this.gl.bufferData(target, data, this.webglUsage);
-    this.gl.bindBuffer(target, null);
+    this.gl.bindBuffer(glTarget, this.handle);
+    this.gl.bufferData(glTarget, data, this.glUsage);
+    this.gl.bindBuffer(glTarget, null);
 
     this.debugData = null;
     this.bytesUsed = byteLength;
@@ -118,16 +116,16 @@ export class WEBGLBuffer extends Buffer {
 
     // Create the buffer - binding it here for the first time locks the type
     // In WebGL2, use GL.COPY_WRITE_BUFFER to avoid locking the type
-    const target = this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.target;
-    this.gl.bindBuffer(target, this.handle);
+    const glTarget = this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.glTarget;
+    this.gl.bindBuffer(glTarget, this.handle);
     // WebGL2: subData supports additional srcOffset and length parameters
     if (srcOffset !== 0 || byteLength !== undefined) {
       this.device.assertWebGL2();
-      this.gl2.bufferSubData(target, byteOffset, data, srcOffset, byteLength);
+      this.gl2.bufferSubData(glTarget, byteOffset, data, srcOffset, byteLength);
     } else {
-      this.gl.bufferSubData(target, byteOffset, data);
+      this.gl.bufferSubData(glTarget, byteOffset, data);
     }
-    this.gl.bindBuffer(target, null);
+    this.gl.bindBuffer(glTarget, null);
 
     // TODO - update local `data` if offsets are right
     // this.debugData = data.slice(byteOffset, 40);
@@ -161,13 +159,13 @@ export class WEBGLBuffer extends Buffer {
   }
 
   _getWriteTarget() {
-    return this.target;
-    // return this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.target;
+    return this.glTarget;
+    // return this.device.isWebGL2 ? GL.COPY_WRITE_BUFFER : this.glTarget;
   }
 
   _getReadTarget() {
-    return this.target;
-    // return this.device.isWebGL2 ? GL.COPY_READ_BUFFER : this.target;
+    return this.glTarget;
+    // return this.device.isWebGL2 ? GL.COPY_READ_BUFFER : this.glTarget;
   }
 }
 
@@ -182,7 +180,7 @@ export class WEBGLBuffer extends Buffer {
 // static INDIRECT = 0x0100;
 // static QUERY_RESOLVE = 0x0200;
 
-function getWebGLTarget(usage: number): GL {
+function getWebGLTarget(usage: number): GL.ARRAY_BUFFER | GL.ELEMENT_ARRAY_BUFFER | GL.UNIFORM_BUFFER {
   if (usage & Buffer.INDEX) {
     return GL.ELEMENT_ARRAY_BUFFER;
   }
@@ -204,7 +202,8 @@ function getWebGLTarget(usage: number): GL {
   return GL.ARRAY_BUFFER;
 }
 
-function getWebGLUsage(usage: number): GL {
+/** @todo usage is not passed correctly */
+function getWebGLUsage(usage: number): GL.STATIC_DRAW | GL.DYNAMIC_DRAW {
   if (usage & Buffer.INDEX) {
     return GL.STATIC_DRAW;
   }
@@ -214,5 +213,5 @@ function getWebGLUsage(usage: number): GL {
   if (usage & Buffer.UNIFORM) {
     return GL.DYNAMIC_DRAW;
   }
-  return GL.DYNAMIC_DRAW;
+  return GL.STATIC_DRAW;
 }

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

@@ -53,7 +53,7 @@ export class WEBGLExternalTexture extends WEBGLTexture {
   constructor(device: Device | WebGLRenderingContext, props: TextureProps) {
     super(WebGLDevice.attach(device), {id: uid('texture'), ...props});
 
-    this.target = getWebGLTextureTarget(props);
+    this.glTarget = getWebGLTextureTarget(props);
 
     this.device = WebGLDevice.attach(device);
     this.gl = this.device.gl;