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

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

@@ -1,19 +1,19 @@
 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';
 
@@ -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,6 +1,8 @@
+// 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';
 
@@ -14,7 +16,7 @@ import type WebGLDevice from '../webgl-device';
 export default 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.

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

@@ -1,14 +1,14 @@
 // luma.gl, MIT license
-import {log, uid, Shader, ShaderProps} from '@luma.gl/api';
+import {log, uid, Shader, ShaderProps, CompilerMessage, formatCompilerLog} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {getShaderInfo, CompilerMessage, formatCompilerLog} from '@luma.gl/shadertools';
+import {getShaderInfo} from '../helpers/get-shader-info';
 import {parseShaderCompilerLog} from '../helpers/parse-shader-compiler-log';
 import WebGLDevice from '../webgl-device';
 
 /**
  * An immutable compiled shader program that execute portions of the GPU Pipeline
  */
- export default class WEBGLShader extends Shader {
+export default class WEBGLShader extends Shader {
   readonly device: WebGLDevice;
   readonly handle: WebGLShader;
 
@@ -28,18 +28,18 @@ import WebGLDevice from '../webgl-device';
     this._compile(this.source);
   }
 
-  destroy(): void {
+  override destroy(): void {
     if (this.handle) {
       this.removeStats();
       this.device.gl.deleteShader(this.handle);
-      // @ts-expect-error
-      this.handle = null;
+      // this.handle = null;
+      this.destroyed = true;
     }
   }
 
   async compilationInfo(): Promise<readonly CompilerMessage[]> {
     const log = this.device.gl.getShaderInfoLog(this.handle);
-    return parseShaderCompilerLog(log);
+    return log ? parseShaderCompilerLog(log) : [];
   }
 
   // PRIVATE METHODS
@@ -58,7 +58,8 @@ import WebGLDevice from '../webgl-device';
     const compileStatus = gl.getShaderParameter(this.handle, GL.COMPILE_STATUS);
     if (!compileStatus) {
       const shaderLog = gl.getShaderInfoLog(this.handle);
-      const messages = parseShaderCompilerLog(shaderLog).filter(message => message.type === 'error');
+      const parsedLog = shaderLog ? parseShaderCompilerLog(shaderLog) : [];
+      const messages = parsedLog.filter(message => message.type === 'error');
       const formattedLog = formatCompilerLog(messages, source);
       const shaderName: string = getShaderInfo(source).name;
       const shaderDescription = `${this.stage} shader ${shaderName}`;

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

@@ -10,11 +10,12 @@ import {
   Sampler,
   SamplerProps,
   SamplerParameters,
+  TypedArray,
   isObjectEmpty
 } from '@luma.gl/api';
 import {Texture, cast, log, assert, isPowerOfTwo, loadImage} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import type {WebGLSamplerParameters} from '../../types/webgl';
+import type {GLSamplerParameters} from '../../types/webgl';
 import {withParameters} from '../../context/state-tracker/with-parameters';
 import {
   getWebGLTextureFormat,
@@ -31,22 +32,31 @@ import WEBGLSampler from './webgl-sampler';
 
 export type {TextureProps};
 
+export type TextureSourceData = 
+  TypedArray |
+  ImageData |
+  HTMLImageElement |
+  HTMLCanvasElement |
+  ImageBitmap |
+  HTMLVideoElement
+  ;
+
 type SetImageDataOptions = {
   target?: number;
   level?: number;
   dataFormat?: any;
-  width: number;
-  height: number;
+  width?: number;
+  height?: number;
   depth?: number;
-  format: any;
+  format?: any;
   type?: any;
   offset?: number;
-  data: any;
+  data: any; // TextureSourceData;
   compressed?: boolean;
   parameters?: Record<GL, any>;
   /** @deprecated */
   pixels?: any;
-};
+}
 
 /**
  * @param {*} pixels, data -
@@ -92,10 +102,10 @@ type SetSubImageDataOptions = {
 type SetImageData3DOptions = {
   level?: number;
   dataFormat?: any;
-  width: number;
-  height: number;
+  width?: number;
+  height?: number;
   depth?: number;
-  format: any;
+  format?: any;
   type?: any;
   offset?: number;
   data: any;
@@ -166,8 +176,7 @@ export default class WEBGLTexture extends Texture {
     this.gl = this.device.gl;
     this.gl2 = this.device.gl2;
     this.handle = this.props.handle || this.gl.createTexture();
-    // @ts-expect-error Per SPECTOR docs
-    this.handle.__SPECTOR_Metadata = {...this.props, data: typeof this.props.data}; // {name: this.props.id};
+    this.device.setSpectorMetadata(this.handle, {...this.props, data: typeof this.props.data}); // {name: this.props.id};
 
     this.target = getWebGLTextureTarget(this.props);
 
@@ -184,17 +193,17 @@ export default class WEBGLTexture extends Texture {
     Object.seal(this);
   }
 
-  destroy(): void {
+  override destroy(): void {
     if (this.handle) {
       this.gl.deleteTexture(this.handle);
       this.removeStats();
       this.trackDeallocatedMemory('Texture');
-      // @ts-expect-error
-      this.handle = null;
+      // this.handle = null;
+      this.destroyed = true;
     }
   }
 
-  toString(): string {
+  override toString(): string {
     return `Texture(${this.id},${this.width}x${this.height})`;
   }
 
@@ -228,7 +237,7 @@ export default class WEBGLTexture extends Texture {
       return this;
     }
 
-    let {parameters = {}  as Record<GL, any>} = props;
+    const {parameters = {}  as Record<GL, any>} = props;
 
     const {
       pixels = null, recreate = false, pixelStore = {}, textureUnit = undefined} = props;
@@ -357,7 +366,8 @@ export default class WEBGLTexture extends Texture {
    * If size has changed, reinitializes with current format
    * @note note clears image and mipmaps
    */
-  resize({height, width, mipmaps = false}): this {
+  resize(options: {height: number, width: number, mipmaps?: boolean}): this {
+    const {height, width, mipmaps = false} = options;
     if (width !== this.width || height !== this.height) {
       return this.initialize({
         width,
@@ -372,7 +382,7 @@ export default class WEBGLTexture extends Texture {
   }
 
   /** Update external texture (video frame) */
-  update(): this {
+  update(): void {
     if (this._video) {
       const {video, parameters, lastTime} = this._video;
       // @ts-expect-error
@@ -479,7 +489,7 @@ export default class WEBGLTexture extends Texture {
     withParameters(this.gl, parameters, () => {
       switch (dataType) {
         case 'null':
-          gl.texImage2D(target, level, format, width, height, 0 /*border*/, dataFormat, type, data);
+          gl.texImage2D(target, level, format, width, height, 0 /* border*/, dataFormat, type, data);
           break;
         case 'typed-array':
           // Looks like this assert is not necessary, as offset is ignored under WebGL1
@@ -508,7 +518,7 @@ export default class WEBGLTexture extends Texture {
             format,
             width,
             height,
-            0 /*border*/,
+            0 /* border*/,
             dataFormat,
             type,
             offset
@@ -523,7 +533,7 @@ export default class WEBGLTexture extends Texture {
               format,
               width,
               height,
-              0 /*border*/,
+              0 /* border*/,
               dataFormat,
               type,
               data
@@ -713,7 +723,7 @@ export default class WEBGLTexture extends Texture {
 
   // HELPER METHODS
 
-  _deduceParameters(opts) {
+  _deduceParameters(opts: TextureProps) {
     const {format, data} = opts;
     let {width, height, dataFormat, type, compressed} = opts;
 
@@ -808,7 +818,7 @@ export default class WEBGLTexture extends Texture {
       resolvedFaces[index].forEach((image, lodLevel) => {
         // TODO: adjust width & height for LOD!
         if (width && height) {
-          gl.texImage2D(face, lodLevel, format, width, height, 0 /*border*/, format, type, image);
+          gl.texImage2D(face, lodLevel, format, width, height, 0 /* border*/, format, type, image);
         } else {
           gl.texImage2D(face, lodLevel, format, format, type, image);
         }
@@ -847,7 +857,7 @@ export default class WEBGLTexture extends Texture {
         )
       );
     } else if (this.width || this.height) {
-      gl.texImage2D(face, 0, format, width, height, 0 /*border*/, format, type, imageData);
+      gl.texImage2D(face, 0, format, width, height, 0 /* border*/, format, type, imageData);
     } else {
       gl.texImage2D(face, 0, format, format, type, imageData);
     }
@@ -856,18 +866,20 @@ export default class WEBGLTexture extends Texture {
   }
 
   /** Image 3D copies from Typed Array or WebGLBuffer */
-  setImageData3D({
-    level = 0,
-    dataFormat,
-    format,
-    type, // = GL.UNSIGNED_BYTE,
-    width,
-    height,
-    depth = 1,
-    offset = 0,
-    data,
-    parameters = {}  as Record<GL, any> as Record<GL, any>
-  }: SetImageData3DOptions) {
+  setImageData3D(options: SetImageData3DOptions) {
+    const {
+      level = 0,
+      dataFormat,
+      format,
+      type, // = GL.UNSIGNED_BYTE,
+      width,
+      height,
+      depth = 1,
+      offset = 0,
+      data,
+      parameters = {}
+    } = options;
+
     this.trackDeallocatedMemory('Texture');
 
     this.gl.bindTexture(this.target, this.handle);
@@ -927,7 +939,7 @@ export default class WEBGLTexture extends Texture {
    * Sets sampler parameters on texture
    * @note: Applies NPOT workaround if appropriate
    */
-  _setSamplerParameters(parameters: WebGLSamplerParameters) {
+  _setSamplerParameters(parameters: GLSamplerParameters): void {
     // Work around WebGL1 sampling restrictions on NPOT textures
     if (this.device.isWebGL1 && isNPOT(this.width, this.height)) {
       parameters = updateSamplerParametersForNPOT(parameters);
@@ -943,7 +955,7 @@ export default class WEBGLTexture extends Texture {
     this.gl.bindTexture(this.target, this.handle);
     for (const [pname, pvalue] of Object.entries(parameters)) {
       const param = Number(pname);
-      let value = pvalue;
+      const value = pvalue;
 
       // 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.
@@ -959,7 +971,7 @@ export default class WEBGLTexture extends Texture {
       }
     }
     this.gl.bindTexture(this.target, null);
-    return this;
+    return;
   }
 
   /** @deprecated For LegacyTexture subclass */
@@ -1018,6 +1030,4 @@ function isNPOT(width: number, height: number): boolean {
 
 function logParameters(parameters: Record<number, GL | number>) {
   log.log(1, 'texture sampler parameters', parameters)();
-  for (const [pname, pvalue] of Object.entries(parameters)) {
-  }
 }

package/src/adapter/webgl-canvas-context.ts

@@ -1,7 +1,6 @@
 // luma.gl, MIT license
 import type {CanvasContextProps} from '@luma.gl/api';
 import {CanvasContext} from '@luma.gl/api';
-import {getDevicePixelRatio, setDevicePixelRatio} from '../context/context/device-pixels';
 import WebGLDevice from './webgl-device';
 import WEBGLFramebuffer from './resources/webgl-framebuffer';
 
@@ -12,13 +11,14 @@ import WEBGLFramebuffer from './resources/webgl-framebuffer';
 export default class WebGLCanvasContext extends CanvasContext {
   readonly device: WebGLDevice;
   presentationSize: [number, number];
-  private _framebuffer: WEBGLFramebuffer;
+  private _framebuffer: WEBGLFramebuffer | null = null;
 
   constructor(device: WebGLDevice, props: CanvasContextProps) {
     // Note: Base class creates / looks up the canvas (unless under Node.js)
     super(props);
     this.device = device;
     this.presentationSize = [-1, -1];
+    this._setAutoCreatedCanvasId(`${this.device.id}-canvas`);
     this.update();
   }
 
@@ -49,17 +49,16 @@ export default class WebGLCanvasContext extends CanvasContext {
    *  canvas CSS width * devicePixelRatio x canvas CSS height * devicePixelRatio
    * See http://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
    */
-   resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
+  resize(options?: {width?: number; height?: number; useDevicePixels?: boolean | number}): void {
     // Resize browser context .
     if (this.canvas) {
-      const devicePixelRatio = getDevicePixelRatio(options?.useDevicePixels);
-      setDevicePixelRatio(this.device.gl, devicePixelRatio, options);
+      this.setDevicePixelRatio(devicePixelRatio, options);
       return;
     }
 
     // Resize headless gl context
     const ext = this.device.gl.getExtension('STACKGL_resize_drawingbuffer');
-    if (ext && options && `width` in options && `height` in options) {
+    if (ext && options && 'width' in options && 'height' in options) {
       ext.resize(options.width, options.height);
     }
   }