@luma.gl/webgl 9.0.0-alpha.5 → 9.0.0-alpha.6

package/src/adapter/helpers/uniforms.ts

@@ -1,6 +1,6 @@
 import {UniformFormat, VertexFormat} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {GLUniformType, GLSamplerType, GLCompositeType, GLType} from '../../types/webgl'
+import {GLUniformType, GLSamplerType, GLCompositeType, GLType} from '../../types/webgl';
 
 /** Check is uniform is of sampler type */
 export function isSamplerUniform(type: GLUniformType): boolean {
@@ -25,8 +25,11 @@ const SAMPLER_TYPES: GLSamplerType[] = [
   GL.UNSIGNED_INT_SAMPLER_2D_ARRAY
 ];
 
-// Composite types table 
-const COMPOSITE_GL_TYPES: Record<GLCompositeType, [GLType, number, string, UniformFormat, VertexFormat?]> = {
+// Composite types table
+const COMPOSITE_GL_TYPES: Record<
+  GLCompositeType,
+  [GLType, number, string, UniformFormat, VertexFormat?]
+> = {
   [GL.FLOAT]: [GL.FLOAT, 1, 'float', 'f32', 'float32'],
   [GL.FLOAT_VEC2]: [GL.FLOAT, 2, 'vec2', 'vec2<f32>', 'float32x2'],
   [GL.FLOAT_VEC3]: [GL.FLOAT, 3, 'vec3', 'vec3<f32>', 'float32x3'],
@@ -61,26 +64,34 @@ const COMPOSITE_GL_TYPES: Record<GLCompositeType, [GLType, number, string, Unifo
 };
 
 /** Decomposes a composite type GL.VEC3 into a basic type (GL.FLOAT) and components (3) */
-export function decodeUniformType(uniformType: GL): {format: UniformFormat, components: number, glType: GLType} {
+export function decodeUniformType(
+  uniformType: GL
+): {format: UniformFormat; components: number; glType: GLType} {
   const typeAndSize = COMPOSITE_GL_TYPES[uniformType];
   if (!typeAndSize) {
-    return null;
+    throw new Error('uniform');
   }
   const [glType, components, , format] = typeAndSize;
   return {format, components, glType};
 }
 
-export function decodeAttributeType(uniformType: GL): {format: VertexFormat, components: number, glType: GLType} {
-  const typeAndSize = COMPOSITE_GL_TYPES[uniformType];
+export function decodeAttributeType(attributeType: GL): {
+  format: VertexFormat;
+  components: number;
+  glType: GLType;
+} {
+  const typeAndSize = COMPOSITE_GL_TYPES[attributeType];
   if (!typeAndSize) {
-    return null;
+    throw new Error('attribute')
   }
   const [glType, components, , , format] = typeAndSize;
   return {format, components, glType};
 }
 
 /** Decomposes a composite type GL.VEC3 into a basic type (GL.FLOAT) and components (3) */
-export function decomposeCompositeGLType(compositeGLType: GLCompositeType): {type: GLType, components: number} | null {
+export function decomposeCompositeGLType(
+  compositeGLType: GLCompositeType
+): {type: GLType; components: number} | null {
   const typeAndSize = COMPOSITE_GL_TYPES[compositeGLType];
   if (!typeAndSize) {
     return null;
@@ -89,7 +100,7 @@ export function decomposeCompositeGLType(compositeGLType: GLCompositeType): {typ
   return {type, components};
 }
 
-export function getCompositeGLType(type: GL, components): {glType: GLType, name: string} | null {
+export function getCompositeGLType(type: GL, components): {glType: GLType; name: string} | null {
   switch (type) {
     case GL.BYTE:
     case GL.UNSIGNED_BYTE:

package/src/adapter/objects/webgl-vertex-array-object.ts

@@ -43,7 +43,7 @@ export default class WEBGLVertexArrayObject extends WebGLResource<VertexArrayObj
 
   // Set (bind) an elements buffer, for indexed rendering.
   // Must be a Buffer bound to GL.ELEMENT_ARRAY_BUFFER. Constants not supported
-  setElementBuffer(elementBuffer: Buffer = null, opts = {}) {
+  setElementBuffer(elementBuffer: Buffer | null = null, opts = {}) {
     assert(!elementBuffer || elementBuffer.target === GL.ELEMENT_ARRAY_BUFFER, ERR_ELEMENTS);
 
     // The GL.ELEMENT_ARRAY_BUFFER_BINDING is stored on the VertexArrayObject...

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

@@ -15,7 +15,7 @@ export default class WEBGLBuffer extends Buffer {
 
   byteLength: number;
   bytesUsed: number;
-  debugData: ArrayBuffer;
+  debugData: ArrayBuffer | null = null;
 
   webglUsage: number;
 
@@ -106,8 +106,8 @@ export default class WEBGLBuffer extends Buffer {
       this.removeStats();
       this.trackDeallocatedMemory();
       this.gl.deleteBuffer(this.handle);
-      // @ts-expect-error
-      this.handle = null;
+      // this.handle = null;
+      this.destroyed = true;
     }
   }
 

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

@@ -1,3 +1,5 @@
+// luma.gl, MIT license
+
 import type {FramebufferProps, DepthStencilTextureFormat, ColorTextureFormat} from '@luma.gl/api';
 import {Framebuffer, Texture, log, assert} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
@@ -17,7 +19,7 @@ export default class WEBGLFramebuffer extends Framebuffer {
 
   get texture() { return this.colorAttachments[0]; }
   readonly colorAttachments: WebGLTexture[] = [];
-  readonly depthStencilAttachment: WebGLTexture | undefined = undefined;
+  readonly depthStencilAttachment: WebGLTexture | null = null;  d 
   protected _ownResources: (WebGLTexture | Renderbuffer)[] = [];
 
   constructor(device: WebGLDevice, props: FramebufferProps) {
@@ -66,7 +68,8 @@ export default class WEBGLFramebuffer extends Framebuffer {
         resource.destroy();
       }
       this.gl.deleteFramebuffer(this.handle);
-      this.handle = null;
+      // this.handle = null;
+      this.destroyed = true;
     }
   }
 
@@ -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:

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

@@ -6,6 +6,7 @@ export default class WEBGLRenderPass extends RenderPass {
 
   constructor(device: WebGLDevice, props: RenderPassProps) {
     super(device, props);
+    this.device = device;
   }
 
   endPass(): void {}

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

@@ -1,6 +1,5 @@
 import type {
   RenderPipelineProps,
-  RenderPipelineParameters,
   RenderPass,
   Buffer,
   Binding,
@@ -11,9 +10,11 @@ import type {
 } from '@luma.gl/api';
 import {RenderPipeline, cast, log, decodeVertexFormat} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
+
+import type {GLParameters} from '../../types/webgl';
 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 +36,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,7 +44,7 @@ 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);
@@ -64,7 +65,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();
@@ -76,7 +77,8 @@ export default class WEBGLRenderPipeline extends RenderPipeline {
   destroy(): void {
     if (this.handle) {
       this.device.gl.deleteProgram(this.handle);
-      this.handle = null;
+      // this.handle = null;
+      this.destroyed = true;
     }
   }
 
@@ -121,6 +123,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;
       }
       if (!value) {
         log.warn(`Unsetting binding ${name} in render pipeline ${this.id}`)();
@@ -181,7 +184,7 @@ export default 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 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 +198,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 +209,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;
@@ -295,6 +298,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;
@@ -395,13 +401,15 @@ function getAttributesByLocation(
   const byLocation: Record<number, Buffer> = {};
   for (const [name, buffer] of Object.entries(attributes)) {
     const attribute = getAttributeLayout(layout, name);
-    byLocation[attribute.location] = buffer;
+    if (attribute) {
+      byLocation[attribute.location] = buffer;
+    }
   }
   return byLocation;
 }
 
-function getAttributeLayout(layout: ShaderLayout, name: string): AttributeLayout | undefined {
-  return layout.attributes.find((binding) => binding.name === name);
+function getAttributeLayout(layout: ShaderLayout, name: string): AttributeLayout | null {
+  return layout.attributes.find((binding) => binding.name === name) || null;
 }
 
 function getBindingLayout(layout: ShaderLayout, name: string): BindingLayout {

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);
@@ -35,7 +37,7 @@ export default class WEBGLSampler extends Sampler {
   }
 
   /** 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

@@ -32,14 +32,14 @@ import WebGLDevice from '../webgl-device';
     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;
@@ -189,8 +199,8 @@ export default class WEBGLTexture extends Texture {
       this.gl.deleteTexture(this.handle);
       this.removeStats();
       this.trackDeallocatedMemory('Texture');
-      // @ts-expect-error
-      this.handle = null;
+      // this.handle = null;
+      this.destroyed = true;
     }
   }
 
@@ -714,7 +724,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;
 
@@ -857,18 +867,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);
@@ -928,7 +940,7 @@ export default class WEBGLTexture extends Texture {
    * Sets sampler parameters on texture
    * @note: Applies NPOT workaround if appropriate
    */
-  _setSamplerParameters(parameters: WebGLSamplerParameters) {
+  _setSamplerParameters(parameters: GLSamplerParameters) {
     // Work around WebGL1 sampling restrictions on NPOT textures
     if (this.device.isWebGL1 && isNPOT(this.width, this.height)) {
       parameters = updateSamplerParametersForNPOT(parameters);

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

@@ -12,7 +12,7 @@ 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)

package/src/classic/buffer.ts

@@ -111,8 +111,8 @@ export default class ClassicBuffer extends WEBGLBuffer {
       this.removeStats();
       this.trackDeallocatedMemory();
       this.gl.deleteBuffer(this.handle);
-      // @ts-expect-error
-      this.handle = null;
+      // this.handle = null;
+      this.destroyed = true;
     }
   }
 
@@ -264,7 +264,7 @@ export default class ClassicBuffer extends WEBGLBuffer {
     // Use GL.COPY_READ_BUFFER+GL.COPY_WRITE_BUFFER avoid disturbing other targets and locking type
     gl.bindBuffer(GL.COPY_READ_BUFFER, sourceBuffer.handle);
     gl.bindBuffer(GL.COPY_WRITE_BUFFER, this.handle);
-    gl2.copyBufferSubData(GL.COPY_READ_BUFFER, GL.COPY_WRITE_BUFFER, readOffset, writeOffset, size);
+    gl2?.copyBufferSubData(GL.COPY_READ_BUFFER, GL.COPY_WRITE_BUFFER, readOffset, writeOffset, size);
     gl.bindBuffer(GL.COPY_READ_BUFFER, null);
     gl.bindBuffer(GL.COPY_WRITE_BUFFER, null);
 
@@ -314,7 +314,7 @@ export default class ClassicBuffer extends WEBGLBuffer {
 
     // Use GL.COPY_READ_BUFFER to avoid disturbing other targets and locking type
     this.gl.bindBuffer(GL.COPY_READ_BUFFER, this.handle);
-    this.gl2.getBufferSubData(GL.COPY_READ_BUFFER, srcByteOffset, dstData, dstOffset, length);
+    this.gl2?.getBufferSubData(GL.COPY_READ_BUFFER, srcByteOffset, dstData, dstOffset, length);
     this.gl.bindBuffer(GL.COPY_READ_BUFFER, null);
 
     // TODO - update local `data` if offsets are 0
@@ -340,10 +340,10 @@ export default class ClassicBuffer extends WEBGLBuffer {
     // uniform buffer state. Instead indexed bindings need to be made.
     if (target === GL.UNIFORM_BUFFER || target === GL.TRANSFORM_FEEDBACK_BUFFER) {
       if (size !== undefined) {
-        this.gl2.bindBufferRange(target, index, this.handle, offset, size);
+        this.gl2?.bindBufferRange(target, 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(target, index, this.handle);
       }
     } else {
       this.gl.bindBuffer(target, this.handle);
@@ -356,7 +356,7 @@ export default class ClassicBuffer extends WEBGLBuffer {
     const {target = this.target, index = this.accessor && this.accessor.index} = options || {};
     const isIndexedBuffer = target === GL.UNIFORM_BUFFER || target === GL.TRANSFORM_FEEDBACK_BUFFER;
     if (isIndexedBuffer) {
-      this.gl2.bindBufferBase(target, index, null);
+      this.gl2?.bindBufferBase(target, index, null);
     } else {
       this.gl.bindBuffer(target, null);
     }

package/src/context/context/create-context.ts

@@ -55,7 +55,7 @@ const DEFAULT_CONTEXT_PROPS: ContextProps = {
   canvas.addEventListener('webglcontextcreationerror', onCreateError, false);
 
   // Create the desired context
-  let gl = null;
+  let gl: WebGLRenderingContext | null = null;
 
   if (props.type === 'webgl2') {
     props = {...props, webgl1: false};
@@ -66,10 +66,10 @@ const DEFAULT_CONTEXT_PROPS: ContextProps = {
 
   // Prefer webgl2 over webgl1 if both are acceptable
   if (props.webgl2) {
-    gl = gl || canvas.getContext('webgl2', props);
+    gl = gl || canvas.getContext('webgl2', props) as WebGL2RenderingContext | null;
   }
   if (props.webgl1) {
-    gl = gl || canvas.getContext('webgl', props);
+    gl = gl || canvas.getContext('webgl', props) as WebGLRenderingContext | null;
   }
 
   // TODO are we removing this listener before giving it a chance to fire?
@@ -83,8 +83,12 @@ const DEFAULT_CONTEXT_PROPS: ContextProps = {
     );
   }
 
-  canvas.addEventListener('webglcontextlost', props.onContextLost, false);
-  canvas.addEventListener('webglcontextrestored', props.onContextRestored, false);
+  if (props.onContextLost) {
+    canvas.addEventListener('webglcontextlost', props.onContextLost, false);
+  }
+  if (props.onContextRestored) {
+    canvas.addEventListener('webglcontextrestored', props.onContextRestored, false);
+  }
 
   return gl;
 }

package/src/context/context/device-pixels.ts

@@ -53,16 +53,22 @@ export function cssToDeviceRatio(gl: WebGLRenderingContext): number {
 
 // use devicePixelRatio to set canvas width and height
 export function setDevicePixelRatio(gl: WebGLRenderingContext, devicePixelRatio: number, options: {width?: number, height?: number} = {}) {
+  if (!(gl.canvas instanceof HTMLCanvasElement)) {
+    return;
+  }
+
+  const canvas: HTMLCanvasElement = gl.canvas;
+
   // NOTE: if options.width and options.height not used remove in v8
-  let clientWidth = 'width' in options ? options.width : gl.canvas.clientWidth;
-  let clientHeight = 'height' in options ? options.height : gl.canvas.clientHeight;
+  let clientWidth = 'width' in options ? options.width : canvas.clientWidth;
+  let clientHeight = 'height' in options ? options.height : canvas.clientHeight;
 
   if (!clientWidth || !clientHeight) {
     log.log(1, 'Canvas clientWidth/clientHeight is 0')();
-    // by forcing devicePixel ratio to 1, we do not scale gl.canvas.width and height in each frame.
+    // by forcing devicePixel ratio to 1, we do not scale canvas.width and height in each frame.
     devicePixelRatio = 1;
-    clientWidth = gl.canvas.width || 1;
-    clientHeight = gl.canvas.height || 1;
+    clientWidth = canvas.width || 1;
+    clientHeight = canvas.height || 1;
   }
 
   const contextState = getContextState(gl);
@@ -77,8 +83,8 @@ export function setDevicePixelRatio(gl: WebGLRenderingContext, devicePixelRatio:
 
     const canvasWidth = Math.floor(clientWidth * clampedPixelRatio);
     const canvasHeight = Math.floor(clientHeight * clampedPixelRatio);
-    gl.canvas.width = canvasWidth;
-    gl.canvas.height = canvasHeight;
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
 
     // Note: when devicePixelRatio is too high, it is possible we might hit system limit for
     // drawing buffer width and hight, in those cases they get clamped and resulting aspect ration may not be maintained
@@ -90,8 +96,8 @@ export function setDevicePixelRatio(gl: WebGLRenderingContext, devicePixelRatio:
         gl.drawingBufferHeight / clientHeight
       );
 
-      gl.canvas.width = Math.floor(clientWidth * clampedPixelRatio);
-      gl.canvas.height = Math.floor(clientHeight * clampedPixelRatio);
+      canvas.width = Math.floor(clientWidth * clampedPixelRatio);
+      canvas.height = Math.floor(clientHeight * clampedPixelRatio);
     }
 
     Object.assign(contextState._canvasSizeInfo, {clientWidth, clientHeight, devicePixelRatio});

package/src/context/debug/spector.ts

@@ -32,7 +32,7 @@ export async function loadSpectorJS(props?: SpectorProps) {
     try {
       await loadScript(SPECTOR_CDN_URL);
     } catch(error) {
-      log.warn(error)
+      log.warn(String(error))
     }
   }
 }

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

@@ -14,7 +14,7 @@ type DebugContextProps = {
 const DEFAULT_DEBUG_CONTEXT_PROPS: Required<DebugContextProps> = {
   debug: true,
   throwOnError: false,
-  break: undefined,
+  break: [],
   webgl2: false,
 }