@luma.gl/webgl 9.0.0-alpha.2 → 9.0.0-alpha.21

package/src/adapter/resources/webgl-command-encoder.ts

@@ -6,10 +6,10 @@ import type {
   CopyTextureToTextureOptions
 } from '@luma.gl/api';
 
-import CommandBuffer from './webgl-command-buffer';
-import WebGLDevice from '../webgl-device';
+import {CommandBuffer} from './webgl-command-buffer';
+import {WebGLDevice} from '../webgl-device';
 
-export default class WEBGLCommandEncoder extends CommandEncoder {
+export class WEBGLCommandEncoder extends CommandEncoder {
   readonly device: WebGLDevice;
 
   readonly commandBuffer = new CommandBuffer();
@@ -19,7 +19,7 @@ export default class WEBGLCommandEncoder extends CommandEncoder {
     this.device = device;
   }
 
-  destroy() {}
+  override destroy(): void {}
 
   // beginRenderPass(GPURenderPassDescriptor descriptor): GPURenderPassEncoder;
   // beginComputePass(optional GPUComputePassDescriptor descriptor = {}): GPUComputePassEncoder;
@@ -41,10 +41,10 @@ export default class WEBGLCommandEncoder extends CommandEncoder {
     this.commandBuffer.commands.push({name: 'copy-texture-to-texture', options});
   }
 
-  pushDebugGroup(groupLabel: string): void {}
-  popDebugGroup() {}
+  override pushDebugGroup(groupLabel: string): void {}
+  override popDebugGroup() {}
 
-  insertDebugMarker(markerLabel: string): void {}
+  override insertDebugMarker(markerLabel: string): void {}
 
   // writeTimestamp(querySet: Query, queryIndex: number): void {}
 
@@ -55,4 +55,4 @@ export default class WEBGLCommandEncoder extends CommandEncoder {
   //   destination: Buffer,
   //   destinationOffset?: number;
   // }): void;
-};
+}

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

@@ -1,5 +1,5 @@
 /*
-export default class WEBGLExternalTexture extends WEBGLTexture {
+export class WEBGLExternalTexture extends WEBGLTexture {
   readonly device: WebGLDevice;
   readonly gl: WebGLRenderingContext;
   readonly gl2: WebGL2RenderingContext | null;

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

@@ -1,24 +1,26 @@
-import type {FramebufferProps, DepthStencilTextureFormat, ColorTextureFormat} from '@luma.gl/api';
+// luma.gl, MIT license
+
+import type {FramebufferProps, ColorTextureFormat} from '@luma.gl/api';
 import {Framebuffer, Texture, log, assert} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import WebGLDevice from '../webgl-device';
-import WebGLTexture from './webgl-texture';
-import Renderbuffer from '../objects/webgl-renderbuffer';
+import {WebGLDevice} from '../webgl-device';
+import {WEBGLTexture} from './webgl-texture';
+import {WEBGLRenderbuffer} from '../objects/webgl-renderbuffer';
 import {getWebGLTextureFormat, getWebGLDepthStencilAttachment} from '../converters/texture-formats';
 
 export type TextureAttachment = [Texture, number?, number?];
-export type Attachment = WebGLTexture | Renderbuffer | TextureAttachment;
+export type Attachment = WEBGLTexture | WEBGLRenderbuffer | TextureAttachment;
 
 /** luma.gl Framebuffer, WebGL implementation  */
-export default class WEBGLFramebuffer extends Framebuffer {
+export class WEBGLFramebuffer extends Framebuffer {
   device: WebGLDevice;
   gl: WebGLRenderingContext;
   handle: WebGLFramebuffer;
 
   get texture() { return this.colorAttachments[0]; }
-  readonly colorAttachments: WebGLTexture[] = [];
-  readonly depthStencilAttachment: WebGLTexture | undefined = undefined;
-  protected _ownResources: (WebGLTexture | Renderbuffer)[] = [];
+  readonly colorAttachments: WEBGLTexture[] = [];
+  readonly depthStencilAttachment: WEBGLTexture | null = null;
+  protected _ownResources: (WEBGLTexture | WEBGLRenderbuffer)[] = [];
 
   constructor(device: WebGLDevice, props: FramebufferProps) {
     super(device, props);
@@ -27,8 +29,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
     this.handle = this.props.handle !== undefined ? this.props.handle : this.gl.createFramebuffer();
 
     if (this.handle) { // default framebuffer is null...
-      // @ts-expect-error Per SPECTOR docs
-      this.handle.__SPECTOR_Metadata = {id: this.props.id, props: this.props};
+      device.setSpectorMetadata(this.handle, {id: this.props.id, props: this.props});
     }
 
     this.colorAttachments = this._createColorAttachments();
@@ -60,13 +61,14 @@ export default class WEBGLFramebuffer extends Framebuffer {
     }
   }
 
-  destroy() {
+  override destroy(): void {
     if (this.handle !== null) {
       for (const resource of this._ownResources) {
         resource.destroy();
       }
       this.gl.deleteFramebuffer(this.handle);
-      this.handle = null;
+      // this.handle = null;
+      this.destroyed = true;
     }
   }
 
@@ -84,12 +86,12 @@ export default class WEBGLFramebuffer extends Framebuffer {
     }
   }
 
-  _createColorAttachments(): WebGLTexture[] {
+  _createColorAttachments(): WEBGLTexture[] {
     return this.props.colorAttachments.map(colorAttachment => {
       if (!colorAttachment) {
         return undefined;
       }
-      if (colorAttachment instanceof WebGLTexture) {
+      if (colorAttachment instanceof WEBGLTexture) {
         return colorAttachment;
       }
       // if (typeof colorAttachment === 'default') {
@@ -101,7 +103,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
   }
 
   /** Create a color attachment */
-  protected _createColorAttachment(format: ColorTextureFormat, width: number, height: number): WebGLTexture {
+  protected _createColorAttachment(format: ColorTextureFormat, width: number, height: number): WEBGLTexture {
     const texture = this.device._createTexture({
       id: `${this.id}-color`,
       data: null, // reserves texture memory, but texels are undefined
@@ -128,26 +130,26 @@ export default class WEBGLFramebuffer extends Framebuffer {
       //   [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
       //   [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
       // }
-    }) as WebGLTexture;
+    }) ;
     this._ownResources.push(texture);
     return texture;
   }
 
   /** Create a depth stencil attachment GL.DEPTH24_STENCIL8 */
-  protected _createDepthStencilAttachment(): Renderbuffer | WebGLTexture {
+  protected _createDepthStencilAttachment(): WEBGLRenderbuffer | WEBGLTexture {
     if (!this.props.depthStencilAttachment) {
       return undefined;
     }
-    if (this.props.depthStencilAttachment instanceof Renderbuffer) {
+    if (this.props.depthStencilAttachment instanceof WEBGLRenderbuffer) {
       return this.props.depthStencilAttachment;
     }
     if (this.props.depthStencilAttachment instanceof Texture) {
-      return this.props.depthStencilAttachment as unknown as WebGLTexture;
+      return this.props.depthStencilAttachment as unknown as WEBGLTexture;
     }
     const format = this.props.depthStencilAttachment;
     const webglFormat = getWebGLTextureFormat(this.gl, format);
 
-    const texture = new Renderbuffer(this.device, {
+    const texture = new WEBGLRenderbuffer(this.device, {
       id: `${this.id}-depth-stencil`, // TODO misleading if not depth and stencil?
       format: webglFormat,
       // dataFormat: GL.DEPTH_STENCIL,
@@ -187,21 +189,22 @@ export default class WEBGLFramebuffer extends Framebuffer {
   }
 
   /** Attach one attachment */
-  protected _attachOne(attachmentPoint: GL, attachment: Attachment): WebGLTexture | Renderbuffer {
-    if (attachment instanceof Renderbuffer) {
-      this._attachRenderbuffer(attachmentPoint, attachment);
+  protected _attachOne(attachmentPoint: GL, attachment: Attachment): WEBGLTexture | WEBGLRenderbuffer {
+    if (attachment instanceof WEBGLRenderbuffer) {
+      this._attachWEBGLRenderbuffer(attachmentPoint, attachment);
       return attachment;
     } else if (Array.isArray(attachment)) {
       const [texture, layer = 0, level = 0] = attachment;
-      this._attachTexture(attachmentPoint, texture as unknown as WebGLTexture, layer, level);
-      return texture as unknown as WebGLTexture;
-    } else if (attachment instanceof WebGLTexture) {
+      this._attachTexture(attachmentPoint, texture as unknown as WEBGLTexture, layer, level);
+      return texture as unknown as WEBGLTexture;
+    } else if (attachment instanceof WEBGLTexture) {
       this._attachTexture(attachmentPoint, attachment, 0, 0);
       return attachment;
     }
+    throw new Error('attach');
   }
 
-  protected _attachRenderbuffer(attachment: GL, renderbuffer: Renderbuffer): void {
+  protected _attachWEBGLRenderbuffer(attachment: GL, renderbuffer: WEBGLRenderbuffer): void {
     this.gl.framebufferRenderbuffer(
       GL.FRAMEBUFFER,
       attachment,
@@ -213,10 +216,10 @@ export default class WEBGLFramebuffer extends Framebuffer {
   /**
    * @param attachment
    * @param texture
-   * @param layer = 0 - index into WebGLTextureArray and Texture3D or face for `TextureCubeMap`
+   * @param layer = 0 - index into WEBGLTextureArray and Texture3D or face for `TextureCubeMap`
    * @param level  = 0 - mipmapLevel (must be 0 in WebGL1)
    */
-   protected _attachTexture(attachment: GL, texture: WebGLTexture, layer: number, level: number): void {
+  protected _attachTexture(attachment: GL, texture: WEBGLTexture, layer: number, level: number): void {
     const {gl, gl2} = this.device;
     gl.bindTexture(texture.target, texture.handle);
 
@@ -224,7 +227,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
       case GL.TEXTURE_2D_ARRAY:
       case GL.TEXTURE_3D:
         this.device.assertWebGL2();
-        gl2.framebufferTextureLayer(GL.FRAMEBUFFER, attachment, texture.target, level, layer);
+        gl2?.framebufferTextureLayer(GL.FRAMEBUFFER, attachment, texture.target, level, layer);
         break;
 
       case GL.TEXTURE_CUBE_MAP:
@@ -248,7 +251,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
 // Helper functions
 
 // Map an index to a cube map face constant
-function mapIndexToCubeMapFace(layer) {
+function mapIndexToCubeMapFace(layer: number | GL): GL {
   // TEXTURE_CUBE_MAP_POSITIVE_X is a big value (0x8515)
   // if smaller assume layer is index, otherwise assume it is already a cube map face constant
   return layer < GL.TEXTURE_CUBE_MAP_POSITIVE_X ? layer + GL.TEXTURE_CUBE_MAP_POSITIVE_X : layer;
@@ -256,7 +259,7 @@ function mapIndexToCubeMapFace(layer) {
 
 // Helper METHODS
 // Get a string describing the framebuffer error if installed
-function _getFrameBufferStatus(status) {
+function _getFrameBufferStatus(status: GL) {
   switch (status) {
     case GL.FRAMEBUFFER_COMPLETE:
       return 'success';

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

@@ -1,14 +1,15 @@
 import {RenderPass, RenderPassProps} from '@luma.gl/api';
-import WebGLDevice from '../webgl-device';
+import {WebGLDevice} from '../webgl-device';
 
-export default class WEBGLRenderPass extends RenderPass {
+export class WEBGLRenderPass extends RenderPass {
   readonly device: WebGLDevice;
 
   constructor(device: WebGLDevice, props: RenderPassProps) {
     super(device, props);
+    this.device = device;
   }
 
-  endPass(): void {}
+  end(): void {}
 
   pushDebugGroup(groupLabel: string): void {}
   popDebugGroup(): void {}

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

@@ -1,32 +1,32 @@
 import type {
   RenderPipelineProps,
-  RenderPipelineParameters,
   RenderPass,
   Buffer,
   Binding,
   ShaderLayout,
   PrimitiveTopology,
-  BindingLayout,
+  // BindingLayout,
   AttributeLayout
 } 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 {withDeviceParameters} from '../converters/device-parameters';
+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';
 
 const LOG_PROGRAM_PERF_PRIORITY = 4;
 
 /** Creates a new render pipeline */
-export default class WEBGLRenderPipeline extends RenderPipeline {
+export class WEBGLRenderPipeline extends RenderPipeline {
   device: WebGLDevice;
   handle: WebGLProgram;
   vs: WEBGLShader;
@@ -35,7 +35,7 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
 
   // configuration: ProgramConfiguration;
   // Experimental flag to avoid deleting Program object while it is cached
-  varyings: string[];
+  varyings: string[] | null = null;
   vertexArrayObject: WEBGLVertexArrayObject;
   _indexBuffer?: Buffer;
   uniforms: Record<string, any> = {};
@@ -43,14 +43,13 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
   _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,7 +63,7 @@ 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();
@@ -73,10 +72,11 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     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;
     }
   }
 
@@ -93,7 +93,7 @@ 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;
@@ -106,7 +106,7 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
         offset: 0,
         normalized,
         integer,
-        divisor: attribute.stepMode === 'instance' ? 1 : 0
+        divisor
       });
     }
   }
@@ -121,6 +121,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}`)();
@@ -170,18 +171,18 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
     const {
       renderPass = this.device.getDefaultRenderPass(),
       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 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 +196,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) {
@@ -208,31 +207,33 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
       this._applyUniforms();
 
       // 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, {framebuffer: renderPass.props.framebuffer}, () => {
+          // 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 +276,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 +296,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;
@@ -363,15 +367,17 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
 /** Get the primitive type for transform feedback */
 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': return GL.LINE_LOOP;
+    case 'triangle-list': return GL.TRIANGLES;
+    case 'triangle-strip': return GL.TRIANGLE_STRIP;
+    case 'triangle-fan': return GL.TRIANGLE_FAN;
+    default: throw new Error(topology);
   }
 }
 
@@ -379,31 +385,36 @@ 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);
-  }
-}
-
-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;
+    case 'point-list': return GL.POINTS;
+    case 'line-list': return GL.LINES;
+    case 'line-strip': return GL.LINES;
+    case 'line-loop': return GL.LINES;
+    case 'triangle-list': return GL.TRIANGLES;
+    case 'triangle-strip': return GL.TRIANGLES;
+    case 'triangle-fan': return GL.TRIANGLES;
+    default: throw new Error(topology);
   }
-  return byLocation;
 }
 
-function getAttributeLayout(layout: ShaderLayout, name: string): AttributeLayout | undefined {
-  return layout.attributes.find((binding) => binding.name === name);
+// 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) {
@@ -411,3 +422,4 @@ function getBindingLayout(layout: ShaderLayout, name: string): BindingLayout {
   }
   return binding;
 }
+*/

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

@@ -1,8 +1,10 @@
+// luma.gl, MIT license
+
 import {Sampler, SamplerProps} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import type {WebGLSamplerParameters} from '../../types/webgl';
+import type {GLSamplerParameters} from '../../types/webgl';
 import {convertSamplerParametersToWebGL} from '../converters/sampler-parameters';
-import type WebGLDevice from '../webgl-device';
+import type {WebGLDevice} from '../webgl-device';
 
 /**
  * Sampler object -
@@ -11,10 +13,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 +28,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 +36,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.