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

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;

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

@@ -6,13 +6,15 @@ import type {
   ShaderLayout,
   PrimitiveTopology,
   // BindingLayout,
-  AttributeLayout
+  AttributeLayout,
+  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';
@@ -28,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;
@@ -69,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);
   }
 
@@ -84,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 */
@@ -112,7 +135,28 @@ export class WEBGLRenderPipeline extends RenderPipeline {
     }
   }
 
-  /** @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);
@@ -182,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
@@ -206,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;
 
@@ -365,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 {
@@ -399,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