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

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

@@ -7,13 +7,14 @@ import type {
   PrimitiveTopology,
   // BindingLayout,
   AttributeLayout,
-  TypedArray
+  TypedArray,
+  BufferMapping
 } from '@luma.gl/api';
 import {RenderPipeline, cast, log, decodeVertexFormat} from '@luma.gl/api';
 import {GL} from '@luma.gl/constants';
 
 import {getWebGLDataType} from '../converters/texture-formats';
-import {getShaderLayout} from '../helpers/get-shader-layout';
+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';
@@ -29,19 +30,35 @@ const LOG_PROGRAM_PERF_PRIORITY = 4;
 
 /** Creates a new render pipeline */
 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[] | null = null;
-  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;
@@ -70,7 +87,12 @@ export class WEBGLRenderPipeline extends RenderPipeline {
 
     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);
   }
 
@@ -85,7 +107,7 @@ export class WEBGLRenderPipeline extends RenderPipeline {
   setIndexBuffer(indexBuffer: Buffer): void {
     const webglBuffer = cast<WEBGLBuffer>(indexBuffer);
     this.vertexArrayObject.setElementBuffer(webglBuffer);
-    this._indexBuffer = indexBuffer;
+    this._indexBuffer = webglBuffer;
   }
 
   /** @todo needed for portable model */
@@ -128,6 +150,7 @@ export class WEBGLRenderPipeline extends RenderPipeline {
       }
       this.vertexArrayObject.setConstant(attribute.location, value);
     }
+    Object.assign(this.constantAttributes, attributes);
   }
 
   /** 
@@ -203,7 +226,7 @@ export class WEBGLRenderPipeline extends RenderPipeline {
 
     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 indexType = this._indexBuffer?.glIndexType;
     const isInstanced: boolean = Number(options.instanceCount) > 0;
 
     // Avoid WebGL draw call when not rendering any data or values are incomplete
@@ -227,6 +250,7 @@ export 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;
 
@@ -386,9 +410,25 @@ export class WEBGLRenderPipeline extends RenderPipeline {
       }
     }
   }
+
+  /**
+   * 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.LINE_LOOP | GL.TRIANGLES | GL.TRIANGLE_STRIP | GL.TRIANGLE_FAN {
@@ -420,30 +460,6 @@ function getGLPrimitive(topology: PrimitiveTopology): GL.POINTS | GL.LINES | GL.
   }
 }
 
-// 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);
-//     if (attribute) {
-//       byLocation[attribute.location] = buffer;
-//     }
-//   }
-//   return byLocation;
-// }
-
 function getAttributeLayout(layout: ShaderLayout, name: string): AttributeLayout | null {
   return layout.attributes.find((binding) => binding.name === name) || null;
 }
-
-/* TODO
-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;
-}
-*/

package/src/adapter/webgl-device.ts

@@ -130,11 +130,13 @@ export class WebGLDevice extends Device {
     }
 
     // Load webgl and spector debug scripts from CDN if requested
-    if (props.debug) {
+    if (log.get('debug') || props.debug) {
       await loadWebGLDeveloperTools();
     }
+    
     // @ts-expect-error spector not on props
-    if (props.spector) {
+    const {spector} = props;
+    if (log.get('spector') || spector) {
       await loadSpectorJS();
     }
 

package/src/classic/buffer-with-accessor.ts

@@ -55,9 +55,9 @@ function getWEBGLBufferProps(props: BufferWithAccessorProps | ArrayBufferView |
 
   props = checkProps('Buffer', props, PROP_CHECKS_INITIALIZE);
   const bufferProps = {...props };
-  if (bufferProps.offset) {
-    bufferProps.byteOffset = bufferProps.offset;
-  }
+  // if (bufferProps.offset) {
+  //   bufferProps.byteOffset = bufferProps.offset;
+  // }
   return bufferProps;
 }
 
@@ -65,19 +65,18 @@ function getWEBGLBufferProps(props: BufferWithAccessorProps | ArrayBufferView |
 export type BufferWithAccessorProps = BufferProps & {
   handle?: WebGLBuffer;
 
-  target?: number;
-  webglUsage?: number;
-
   accessor?: AccessorObject;
 
-  /** @deprecated */
-  index?: number;
-  /** @deprecated */
-  offset?: number;
-  /** @deprecated */
-  size?: number;
-  /** @deprecated */
-  type?: number
+  // target?: number;
+  // glUsage?: number;
+  // /** @deprecated */
+  // index?: number;
+  // /** @deprecated */
+  // offset?: number;
+  // /** @deprecated */
+  // size?: number;
+  // /** @deprecated */
+  // type?: number
 }
 
 /** WebGL Buffer interface */
@@ -141,7 +140,8 @@ export class BufferWithAccessor extends WEBGLBuffer {
     props = checkProps('Buffer', props, PROP_CHECKS_INITIALIZE);
 
     // Initialize member fields
-    this.webglUsage = props.webglUsage || GL.STATIC_DRAW;
+    // @ts-expect-error readonly field
+    this.glUsage = props.glUsage || GL.STATIC_DRAW;
     this.debugData = null;
 
     // Deprecated: Merge main props and accessor
@@ -149,7 +149,7 @@ export class BufferWithAccessor extends WEBGLBuffer {
 
     // Set data: (re)initializes the buffer
     if (props.data) {
-      this._setData(props.data, props.offset, props.byteLength);
+      this._setData(props.data, props.byteOffset, props.byteLength);
     } else {
       this._setByteLength(props.byteLength || 0);
     }
@@ -220,17 +220,17 @@ export class BufferWithAccessor extends WEBGLBuffer {
     // 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
     // @ts-expect-error
-    const target = this.gl.webgl2 ? GL.COPY_WRITE_BUFFER : this.target;
-    this.gl.bindBuffer(target, this.handle);
+    const glTarget = this.gl.webgl2 ? 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) {
       assertWebGL2Context(this.gl);
       // @ts-expect-error
-      this.gl.bufferSubData(this.target, offset, data, srcOffset, byteLength);
+      this.gl.bufferSubData(this.glTarget, offset, data, srcOffset, byteLength);
     } else {
-      this.gl.bufferSubData(target, offset, data);
+      this.gl.bufferSubData(glTarget, offset, data);
     }
-    this.gl.bindBuffer(target, null);
+    this.gl.bindBuffer(glTarget, null);
 
     // TODO - update local `data` if offsets are right
     this.debugData = null;
@@ -321,9 +321,9 @@ export class BufferWithAccessor extends WEBGLBuffer {
    *   - GL.UNIFORM_BUFFER: `offset` must be aligned to GL.UNIFORM_BUFFER_OFFSET_ALIGNMENT.
    *   - GL.UNIFORM_BUFFER: `size` must be a minimum of GL.UNIFORM_BLOCK_SIZE_DATA.
    */
-  bind(options?: {target?: number; index?: any; offset?: number; size: any}): this {
+  bind(options?: {glTarget?: number; index?: any; offset?: number; size?: any}): this {
     const {
-      target = this.target, // target for the bind operation
+      glTarget = this.glTarget, // target for the bind operation
       index = this.accessor && this.accessor.index, // index = index of target (indexed bind point)
       offset = 0,
       size
@@ -331,27 +331,27 @@ export class BufferWithAccessor extends WEBGLBuffer {
     // NOTE: While GL.TRANSFORM_FEEDBACK_BUFFER and GL.UNIFORM_BUFFER could
     // be used as direct binding points, they will not affect transform feedback or
     // uniform buffer state. Instead indexed bindings need to be made.
-    if (target === GL.UNIFORM_BUFFER || target === GL.TRANSFORM_FEEDBACK_BUFFER) {
+    if (glTarget === GL.UNIFORM_BUFFER || glTarget === GL.TRANSFORM_FEEDBACK_BUFFER) {
       if (size !== undefined) {
-        this.gl2?.bindBufferRange(target, index, this.handle, offset, size);
+        this.gl2?.bindBufferRange(glTarget, index, this.handle, offset, size);
       } else {
         assert(offset === 0); // Make sure offset wasn't supplied
-        this.gl2?.bindBufferBase(target, index, this.handle);
+        this.gl2?.bindBufferBase(glTarget, index, this.handle);
       }
     } else {
-      this.gl.bindBuffer(target, this.handle);
+      this.gl.bindBuffer(glTarget, this.handle);
     }
 
     return this;
   }
 
-  unbind(options?: {target?: any; index?: any}): this {
-    const {target = this.target, index = this.accessor && this.accessor.index} = options || {};
-    const isIndexedBuffer = target === GL.UNIFORM_BUFFER || target === GL.TRANSFORM_FEEDBACK_BUFFER;
+  unbind(options?: {glTarget?: any; index?: any}): this {
+    const {glTarget = this.glTarget, index = this.accessor && this.accessor.index} = options || {};
+    const isIndexedBuffer = glTarget === GL.UNIFORM_BUFFER || glTarget === GL.TRANSFORM_FEEDBACK_BUFFER;
     if (isIndexedBuffer) {
-      this.gl2?.bindBufferBase(target, index, null);
+      this.gl2?.bindBufferBase(glTarget, index, null);
     } else {
-      this.gl.bindBuffer(target, null);
+      this.gl.bindBuffer(glTarget, null);
     }
     return this;
   }
@@ -384,7 +384,7 @@ export class BufferWithAccessor extends WEBGLBuffer {
 
     const target = this._getTarget();
     this.gl.bindBuffer(target, this.handle);
-    this.gl.bufferData(target, byteLength, this.webglUsage);
+    this.gl.bufferData(target, byteLength, this.glUsage);
     this.gl.bufferSubData(target, offset, data);
     this.gl.bindBuffer(target, null);
 
@@ -401,7 +401,7 @@ export class BufferWithAccessor extends WEBGLBuffer {
   }
 
   // Allocate a GPU buffer of specified size.
-  _setByteLength(byteLength: number, webglUsage = this.webglUsage): this {
+  _setByteLength(byteLength: number): this {
     assert(byteLength >= 0);
 
     this.trackDeallocatedMemory();
@@ -414,12 +414,11 @@ export class BufferWithAccessor extends WEBGLBuffer {
       data = new Float32Array(0);
     }
 
-    const target = this._getTarget();
-    this.gl.bindBuffer(target, this.handle);
-    this.gl.bufferData(target, data, webglUsage);
-    this.gl.bindBuffer(target, null);
+    const glTarget = this._getTarget();
+    this.gl.bindBuffer(glTarget, this.handle);
+    this.gl.bufferData(glTarget, data, this.glUsage);
+    this.gl.bindBuffer(glTarget, null);
 
-    this.webglUsage = webglUsage;
     this.debugData = null;
     this.bytesUsed = byteLength;
     this.byteLength = byteLength;
@@ -433,7 +432,7 @@ export class BufferWithAccessor extends WEBGLBuffer {
   // In WebGL2, use GL.COPY_WRITE_BUFFER to avoid locking the type
   _getTarget() {
     // @ts-expect-error
-    return this.gl.webgl2 ? GL.COPY_WRITE_BUFFER : this.target;
+    return this.gl.webgl2 ? GL.COPY_WRITE_BUFFER : this.glTarget;
   }
 
   _getAvailableElementCount(srcByteOffset: number) {
@@ -453,9 +452,9 @@ export class BufferWithAccessor extends WEBGLBuffer {
   // RESOURCE METHODS
 
   getParameter(pname: GL): any {
-    this.gl.bindBuffer(this.target, this.handle);
-    const value = this.gl.getBufferParameter(this.target, pname);
-    this.gl.bindBuffer(this.target, null);
+    this.gl.bindBuffer(this.glTarget, this.handle);
+    const value = this.gl.getBufferParameter(this.glTarget, pname);
+    this.gl.bindBuffer(this.glTarget, null);
     return value;
   }
 

package/src/classic/copy-and-blit.ts

@@ -121,8 +121,7 @@ export function readPixelsToBuffer(
     target = new Buffer(gl2, {byteLength, accessor: {type: sourceType, size: components}});
   }
 
-  // @ts-expect-error
-  target.bind({target: GL.PIXEL_PACK_BUFFER});
+  target.bind({glTarget: GL.PIXEL_PACK_BUFFER});
   withParameters(gl2, {framebuffer}, () => {
     gl2.readPixels(
       sourceX,
@@ -134,7 +133,7 @@ export function readPixelsToBuffer(
       targetByteOffset
     );
   });
-  target.unbind({target: GL.PIXEL_PACK_BUFFER});
+  target.unbind({glTarget: GL.PIXEL_PACK_BUFFER});
   if (deleteFramebuffer) {
     framebuffer.destroy();
   }

package/src/context/debug/webgl-developer-tools.ts

@@ -1,6 +1,7 @@
 // luma.gl, MIT license
 import {log, loadScript} from '@luma.gl/api';
 import {GL} from '@luma.gl/constants';
+import {isBrowser} from '@probe.gl/env'
 
 const WEBGL_DEBUG_CDN_URL = 'https://unpkg.com/webgl-debug@2.0.1/index.js';
 
@@ -18,8 +19,13 @@ type DebugContextProps = {
 //   webgl2: false,
 // }
 
+type ContextData = {
+  realContext?: WebGLRenderingContext;
+  debugContext?: WebGLRenderingContext;
+}
+
 // Helper to get shared context data
-function getContextData(gl: any) {
+function getContextData(gl: any): ContextData {
   gl.luma = gl.luma || {};
   return gl.luma;
 }
@@ -36,7 +42,7 @@ declare global {
  * @see https://github.com/vorg/webgl-debug
  */
 export async function loadWebGLDeveloperTools(): Promise<void> {
-  if (!globalThis.WebGLDebugUtils) {
+  if (isBrowser() && !globalThis.WebGLDebugUtils) {
     globalThis.global = globalThis.global || globalThis;
     // @ts-expect-error Developer tools expects global to be set
     globalThis.global.module = {};

package/src/context/parameters/webgl-parameter-tables.ts

@@ -116,9 +116,9 @@ const bindBuffer = (gl: WebGLRenderingContext, value: unknown, key: GL) => {
     [GL.PIXEL_PACK_BUFFER_BINDING]: GL.PIXEL_PACK_BUFFER,
     [GL.PIXEL_UNPACK_BUFFER_BINDING]: GL.PIXEL_UNPACK_BUFFER
   };
-  const target = bindingMap[key];
+  const glTarget = bindingMap[key];
 
-  gl.bindBuffer(target, value);
+  gl.bindBuffer(glTarget, value);
 };
 
 // Utility

package/src/index.ts

@@ -73,7 +73,7 @@ export {
 export {polyfillContext} from './context/polyfill/polyfill-context';
 
 // HELPERS - EXPERIMENTAL
-export {getShaderLayout, getProgramBindings} from './adapter/helpers/get-shader-layout';
+export {getShaderLayout, mergeShaderLayout} from './adapter/helpers/get-shader-layout';
 export {convertGLToTextureFormat, _checkFloat32ColorAttachment} from './adapter/converters/texture-formats';
 
 // TEST EXPORTS