@luma.gl/webgl 8.6.0-alpha.4 → 9.0.0-alpha.10

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

@@ -52,17 +52,23 @@ export function cssToDeviceRatio(gl: WebGLRenderingContext): number {
 }
 
 // use devicePixelRatio to set canvas width and height
-export function setDevicePixelRatio(gl, devicePixelRatio, options: {width?: number, height?: number} = {}) {
+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, devicePixelRatio, options: {width?: numb
 
     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, devicePixelRatio, options: {width?: numb
         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});
@@ -101,7 +107,12 @@ export function setDevicePixelRatio(gl, devicePixelRatio, options: {width?: numb
 
 // PRIVATE
 
-function scalePixels(pixel, ratio, width, height, yInvert) {
+function scalePixels(pixel: number[], ratio: number, width: number, height: number, yInvert: boolean): {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+} {
   const x = scaleX(pixel[0], ratio, width);
   let y = scaleY(pixel[1], ratio, height, yInvert);
 
@@ -133,13 +144,13 @@ function scalePixels(pixel, ratio, width, height, yInvert) {
   };
 }
 
-function scaleX(x, ratio, width) {
+function scaleX(x: number, ratio: number, width: number): number {
   // since we are rounding to nearest, when ratio > 1, edge pixels may point to out of bounds value, clamp to the limit
   const r = Math.min(Math.round(x * ratio), width - 1);
   return r;
 }
 
-function scaleY(y, ratio, height, yInvert) {
+function scaleY(y: number, ratio: number, height: number, yInvert: boolean): number {
   // since we are rounding to nearest, when ratio > 1, edge pixels may point to out of bounds value, clamp to the limit
   return yInvert
     ? Math.max(0, height - 1 - Math.round(y * ratio))

package/src/context/debug/spector.ts

@@ -0,0 +1,92 @@
+// luma.gl, MIT license
+import {log, loadScript} from '@luma.gl/api';
+
+/** Spector debug initialization options */
+type SpectorProps = {
+  /** Canvas to monitor */
+  canvas?: HTMLCanvasElement | OffscreenCanvas;
+  /** Whether debug is enabled. Auto-detected if ommitted */
+  debug?: boolean;
+  /** Whether spector is disabled */
+  spector?: boolean | string | object;
+};
+
+const DEFAULT_SPECTOR_PROPS: SpectorProps = {
+  spector: log.get('spector') || log.get('inspect')
+};
+
+// https://github.com/BabylonJS/Spector.js#basic-usage
+const SPECTOR_CDN_URL = 'https://spectorcdn.babylonjs.com/spector.bundle.js';
+const LOG_LEVEL = 1;
+
+let spector: any = null;
+let initialized: boolean = false;
+
+declare global {
+  var SPECTOR: any;
+}
+
+/** Loads spector from CDN if not already installed */
+export async function loadSpectorJS(props?: SpectorProps) {
+  if (!globalThis.SPECTOR) {
+    try {
+      await loadScript(SPECTOR_CDN_URL);
+    } catch(error) {
+      log.warn(String(error))
+    }
+  }
+}
+
+export function initializeSpectorJS(props?: SpectorProps) {
+  props = {...DEFAULT_SPECTOR_PROPS, ...props};
+  if (!props?.spector) {
+    return null;
+  }
+
+  if (!spector && globalThis.SPECTOR) {
+    log.probe(LOG_LEVEL, "SPECTOR found and initialized")();
+    spector = new globalThis.SPECTOR.Spector();
+    if (globalThis.luma) {
+      globalThis.luma.spector = spector;
+    }
+  }
+
+  if (!spector) {
+    return null;
+  }
+
+  if (!initialized) {
+    initialized = true;
+
+    // enables recording some extra information merged in the capture like texture memory sizes and formats
+    spector.spyCanvases();
+    // A callback when results are ready
+    spector?.onCaptureStarted.add((capture: unknown) => log.info(`Spector capture started:`, capture)());
+    spector?.onCapture.add((capture: unknown) => {
+      log.info(`Spector capture complete:`, capture)();
+      // Use undocumented Spector API to open the UI with our capture
+      // See https://github.com/BabylonJS/Spector.js/blob/767ad1195a25b85a85c381f400eb50a979239eca/src/spector.ts#L124
+      spector?.getResultUI()
+      spector?.resultView.display();
+      spector?.resultView.addCapture(capture)
+    });
+  }
+
+  if (props?.canvas) {
+    // @ts-expect-error If spector is specified as a canvas id, only monitor that canvas
+    if (typeof props.spector === 'string' && props.spector !== props.canvas.id) {
+      return spector;
+    }
+
+    // capture startup
+    // spector?.captureCanvas(props?.canvas);
+    spector?.startCapture(props?.canvas, 500); // 500 commands
+    new Promise(resolve => setTimeout(resolve, 2000)).then(_ => {
+      log.info(`Spector capture stopped after 2 seconds`)();
+      spector?.stopCapture();
+      // spector?.displayUI();
+    });
+  }
+
+  return spector;
+}

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

@@ -0,0 +1,162 @@
+// luma.gl, MIT license
+import {log, loadScript} from '@luma.gl/api/';
+import GL from '@luma.gl/constants';
+
+const WEBGL_DEBUG_CDN_URL = 'https://unpkg.com/webgl-debug@2.0.1/index.js';
+
+type DebugContextProps = {
+  debug?: boolean;
+  throwOnError?: boolean;
+  break?: string[];
+  webgl2?: boolean;
+};
+
+const DEFAULT_DEBUG_CONTEXT_PROPS: Required<DebugContextProps> = {
+  debug: true,
+  throwOnError: false,
+  break: [],
+  webgl2: false,
+}
+
+// Helper to get shared context data
+function getContextData(gl: any) {
+  gl.luma = gl.luma || {};
+  return gl.luma;
+}
+
+declare global {
+  var WebGLDebugUtils: any;
+}
+
+/**
+ * Loads Khronos WebGLDeveloperTools from CDN if not already installed 
+ * const WebGLDebugUtils = require('webgl-debug');
+ * @see https://github.com/KhronosGroup/WebGLDeveloperTools
+ * @see https://github.com/vorg/webgl-debug
+ */
+export async function loadWebGLDeveloperTools(): Promise<void> {
+  if (!globalThis.WebGLDebugUtils) {
+    // @ts-expect-error Developer tools expects global to be set
+    globalThis.global = globalThis.global || globalThis;
+    // @ts-expect-error Developer tools expects global to be set
+    globalThis.global.module = {};
+    await loadScript(WEBGL_DEBUG_CDN_URL);
+  }
+}
+
+// Returns (a potentially new) context with debug instrumentation turned off or on.
+// Note that this actually returns a new context
+export function makeDebugContext(gl: WebGLRenderingContext, props: DebugContextProps = {}): WebGLRenderingContext | null {
+  // Return null to ensure we don't try to create a context in this case (TODO what case is that?)
+  if (!gl) {
+    return null;
+  }
+
+  return props.debug ? getDebugContext(gl, props) : getRealContext(gl);
+}
+
+// Returns the real context from either of the real/debug contexts
+function getRealContext(gl: WebGLRenderingContext): WebGLRenderingContext {
+  const data = getContextData(gl);
+  // If the context has a realContext member, it is a debug context so return the realContext
+  return data.realContext ? data.realContext : gl;
+}
+
+// Returns the debug context from either of the real/debug contexts
+function getDebugContext(gl: WebGLRenderingContext, props: DebugContextProps): WebGLRenderingContext {
+  if (!globalThis.WebGLDebugUtils) {
+    log.warn('webgl-debug not loaded')();
+    return gl;
+  }
+
+  const data = getContextData(gl);
+
+  // If this already has a debug context, return it.
+  if (data.debugContext) {
+    return data.debugContext;
+  }
+
+  // Create a new debug context
+  globalThis.WebGLDebugUtils.init({...GL, ...gl});
+  const glDebug = globalThis.WebGLDebugUtils.makeDebugContext(
+    gl,
+    onGLError.bind(null, props),
+    onValidateGLFunc.bind(null, props)
+  );
+
+  // Make sure we have all WebGL2 and extension constants (todo dynamic import to circumvent minification?)
+  for (const key in GL) {
+    if (!(key in glDebug) && typeof GL[key] === 'number') {
+      glDebug[key] = GL[key];
+    }
+  }
+  
+  // Ensure we have a clean prototype on the instrumented object
+  // Note: setPrototypeOf does come with perf warnings, but we already take a bigger perf reduction
+  // by synchronizing the WebGL errors after each WebGL call.
+  class WebGLDebugContext {}
+  Object.setPrototypeOf(glDebug, Object.getPrototypeOf(gl));
+  Object.setPrototypeOf(WebGLDebugContext, glDebug);
+  const debugContext = Object.create(WebGLDebugContext);
+  // Store the debug context
+  data.realContext = gl;
+  data.debugContext = debugContext;
+  debugContext.debug = true;
+
+  // Return it
+  return debugContext;
+}
+
+// DEBUG TRACING
+
+function getFunctionString(functionName: string, functionArgs): string {
+  // Cover bug in webgl-debug-tools
+  functionArgs = Array.from(functionArgs).map(arg => arg === undefined ? 'undefined' : arg);
+  let args = globalThis.WebGLDebugUtils.glFunctionArgsToString(functionName, functionArgs);
+  args = `${args.slice(0, 100)}${args.length > 100 ? '...' : ''}`;
+  return `gl.${functionName}(${args})`;
+}
+
+function onGLError(props: DebugContextProps, err, functionName: string, args: any[]): void {
+  // Cover bug in webgl-debug-tools
+  args = Array.from(args).map(arg => arg === undefined ? 'undefined' : arg);
+  const errorMessage = globalThis.WebGLDebugUtils.glEnumToString(err);
+  const functionArgs = globalThis.WebGLDebugUtils.glFunctionArgsToString(functionName, args);
+  const glName = props.webgl2 ? 'gl2' : 'gl1';
+  const message = `${errorMessage} in ${glName}.${functionName}(${functionArgs})`;
+  log.error(message)();
+  debugger; // eslint-disable-line
+  if (props.throwOnError) {
+    throw new Error(message);
+  }
+}
+
+// Don't generate function string until it is needed
+function onValidateGLFunc(props: DebugContextProps, functionName: string, functionArgs: any[]): void {
+  let functionString: string = '';
+  if (log.level >= 1) {
+    functionString = getFunctionString(functionName, functionArgs);
+    log.log(1, functionString)();
+  }
+
+  if (props.break) {
+    functionString = functionString || getFunctionString(functionName, functionArgs);
+    const isBreakpoint =
+      props.break && props.break.every((breakOn: string) => functionString.indexOf(breakOn) !== -1);
+    if (isBreakpoint) {
+      debugger; // eslint-disable-line
+    }
+  }
+
+  for (const arg of functionArgs) {
+    if (arg === undefined) {
+      functionString = functionString || getFunctionString(functionName, functionArgs);
+      if (props.throwOnError) {
+        throw new Error(`Undefined argument: ${functionString}`);
+      } else {
+        log.error(`Undefined argument: ${functionString}`)();
+        debugger; // eslint-disable-line
+      }
+    }
+  }
+}

package/src/context/parameters/unified-parameter-api.ts

@@ -1,8 +1,8 @@
 // Provides a unified API for getting and setting any WebGL parameter
 // Also knows default values of all parameters, enabling fast cache initialization
 // Provides base functionality for the state caching.
-import {assert} from '@luma.gl/api';
-import type {GLParameters} from './webgl-parameters';
+import {Device} from '@luma.gl/api';
+import type {GLParameters} from '../../types/webgl';
 import {
   GL_PARAMETER_DEFAULTS,
   GL_PARAMETER_SETTERS,
@@ -11,6 +11,7 @@ import {
 } from './webgl-parameter-tables';
 
 import {isWebGL} from '../context/webgl-checks';
+import WebGLDevice from '../../adapter/webgl-device';
 
 export type {GLParameters};
 
@@ -20,8 +21,12 @@ export type {GLParameters};
  * @note requires a `cache` object to be set on the context (gl.state.cache)
  * This object is used to fill in any missing values for composite setter functions
  */
-export function setParameters(gl: WebGLRenderingContext, parameters: GLParameters): void {
-  assert(isWebGL(gl), 'setParameters requires a WebGL context');
+export function setParameters(
+  device: Device | WebGLRenderingContext,
+  parameters: GLParameters
+): void {
+  const webglDevice = WebGLDevice.attach(device);
+  const gl = webglDevice.gl;
 
   if (isObjectEmpty(parameters)) {
     return;
@@ -72,7 +77,10 @@ export function setParameters(gl: WebGLRenderingContext, parameters: GLParameter
 
 /**
  * Reads the entire WebGL state from a context
- * @returns - a newly created map, with values keyed by GL parameters
+
+  // default to querying all parameters
+
+  * @returns - a newly created map, with values keyed by GL parameters
  *
  * @note Copies the state from a context (gl.getParameter should not be overriden)
  * Reads the entire WebGL state from a context
@@ -81,13 +89,13 @@ export function setParameters(gl: WebGLRenderingContext, parameters: GLParameter
  * considered a very slow operation, to be used only if/when a context already manipulated
  * by external code needs to be synchronized for the first time
  */
-export function getParameters(gl: WebGLRenderingContext, parameters?: Record<keyof GLParameters, any>): GLParameters;
-export function getParameters(gl: WebGLRenderingContext, parameters?: (keyof GLParameters)[]): GLParameters;
-export function getParameters(gl: WebGLRenderingContext, parameters: keyof GLParameters): GLParameters;
+export function getParameters(
+  device: Device | WebGLRenderingContext,
+  parameters: keyof GLParameters | (keyof GLParameters)[] | GLParameters = GL_PARAMETER_DEFAULTS
+): GLParameters {
+  const webglDevice = WebGLDevice.attach(device);
+  const gl = webglDevice.gl;
 
-export function getParameters(gl, parameters) {
-  // default to querying all parameters
-  parameters = parameters || GL_PARAMETER_DEFAULTS;
   // support both arrays of parameters and objects (keys represent parameters)
 
   if (typeof parameters === 'number') {
@@ -113,8 +121,8 @@ export function getParameters(gl, parameters) {
  * NOT the canvas size dimensions, so they will have to be properly set after
  * calling this function.
  */
-export function resetParameters(gl: WebGLRenderingContext): void {
-  setParameters(gl, GL_PARAMETER_DEFAULTS);
+export function resetParameters(device: Device | WebGLRenderingContext): void {
+  setParameters(device, GL_PARAMETER_DEFAULTS);
 }
 
 // Helpers

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

@@ -1,7 +1,7 @@
 // Tables describing WebGL parameters
 import GL from '@luma.gl/constants';
 import {isWebGL2} from '../context/webgl-checks';
-import {GLParameters} from './webgl-parameters';
+import type {GLParameters} from '../../types/webgl';
 // DEFAULT SETTINGS - FOR FAST CACHE INITIALIZATION AND CONTEXT RESETS
 
 /* eslint-disable no-shadow */
@@ -346,42 +346,44 @@ export const GL_COMPOSITE_PARAMETER_SETTERS = {
     )
 };
 
+type UpdateFunc = (params: Record<string, any>) => void;
+
 // Setter functions intercepted for cache updates
 export const GL_HOOKED_SETTERS = {
   // GENERIC SETTERS
 
-  enable: (update, capability) =>
+  enable: (update: UpdateFunc, capability) =>
     update({
       [capability]: true
     }),
-  disable: (update, capability) =>
+  disable: (update: UpdateFunc, capability) =>
     update({
       [capability]: false
     }),
-  pixelStorei: (update, pname, value) =>
+  pixelStorei: (update: UpdateFunc, pname, value) =>
     update({
       [pname]: value
     }),
-  hint: (update, pname, hint) =>
+  hint: (update: UpdateFunc, pname, hint) =>
     update({
       [pname]: hint
     }),
 
   // SPECIFIC SETTERS
-  useProgram: (update, value) => update({
+  useProgram: (update: UpdateFunc, value) => update({
     [GL.CURRENT_PROGRAM]: value,
   }),
-  bindRenderbuffer: (update, target, value) => update({
+  bindRenderbuffer: (update: UpdateFunc, target, value) => update({
     [GL.RENDERBUFFER_BINDING]: value
   }),
-  bindTransformFeedback: (update, target, value) => update({
+  bindTransformFeedback: (update: UpdateFunc, target, value) => update({
     [GL.TRANSFORM_FEEDBACK_BINDING]: value
   }),
-  bindVertexArray: (update, value) => update({
+  bindVertexArray: (update: UpdateFunc, value) => update({
     [GL.VERTEX_ARRAY_BINDING]: value
   }),
 
-  bindFramebuffer: (update, target, framebuffer) => {
+  bindFramebuffer: (update: UpdateFunc, target, framebuffer) => {
     switch (target) {
       case GL.FRAMEBUFFER:
         return update({
@@ -396,7 +398,7 @@ export const GL_HOOKED_SETTERS = {
         return null;
     }
   },
-  bindBuffer: (update, target, buffer) => {
+  bindBuffer: (update: UpdateFunc, target, buffer) => {
     const pname = ({
       [GL.ARRAY_BUFFER]: [GL.ARRAY_BUFFER_BINDING],
       [GL.COPY_READ_BUFFER]: [GL.COPY_READ_BUFFER_BINDING],
@@ -412,24 +414,24 @@ export const GL_HOOKED_SETTERS = {
     return {valueChanged: true};
   },
 
-  blendColor: (update, r, g, b, a) =>
+  blendColor: (update: UpdateFunc, r: number, g: number, b: number, a: number) =>
     update({
       [GL.BLEND_COLOR]: new Float32Array([r, g, b, a])
     }),
 
-  blendEquation: (update, mode) =>
+  blendEquation: (update: UpdateFunc, mode) =>
     update({
       [GL.BLEND_EQUATION_RGB]: mode,
       [GL.BLEND_EQUATION_ALPHA]: mode
     }),
 
-  blendEquationSeparate: (update, modeRGB, modeAlpha) =>
+  blendEquationSeparate: (update: UpdateFunc, modeRGB, modeAlpha) =>
     update({
       [GL.BLEND_EQUATION_RGB]: modeRGB,
       [GL.BLEND_EQUATION_ALPHA]: modeAlpha
     }),
 
-  blendFunc: (update, src, dst) =>
+  blendFunc: (update: UpdateFunc, src, dst) =>
     update({
       [GL.BLEND_SRC_RGB]: src,
       [GL.BLEND_DST_RGB]: dst,
@@ -437,7 +439,7 @@ export const GL_HOOKED_SETTERS = {
       [GL.BLEND_DST_ALPHA]: dst
     }),
 
-  blendFuncSeparate: (update, srcRGB, dstRGB, srcAlpha, dstAlpha) =>
+  blendFuncSeparate: (update: UpdateFunc, srcRGB, dstRGB, srcAlpha, dstAlpha) =>
     update({
       [GL.BLEND_SRC_RGB]: srcRGB,
       [GL.BLEND_DST_RGB]: dstRGB,
@@ -445,85 +447,85 @@ export const GL_HOOKED_SETTERS = {
       [GL.BLEND_DST_ALPHA]: dstAlpha
     }),
 
-  clearColor: (update, r, g, b, a) =>
+  clearColor: (update: UpdateFunc, r: number, g: number, b: number, a: number) =>
     update({
       [GL.COLOR_CLEAR_VALUE]: new Float32Array([r, g, b, a])
     }),
 
-  clearDepth: (update, depth) =>
+  clearDepth: (update: UpdateFunc, depth: number) =>
     update({
       [GL.DEPTH_CLEAR_VALUE]: depth
     }),
 
-  clearStencil: (update, s) =>
+  clearStencil: (update: UpdateFunc, s: number) =>
     update({
       [GL.STENCIL_CLEAR_VALUE]: s
     }),
 
-  colorMask: (update, r, g, b, a) =>
+  colorMask: (update: UpdateFunc, r: number, g: number, b: number, a: number) =>
     update({
       [GL.COLOR_WRITEMASK]: [r, g, b, a]
     }),
 
-  cullFace: (update, mode) =>
+  cullFace: (update: UpdateFunc, mode) =>
     update({
       [GL.CULL_FACE_MODE]: mode
     }),
 
-  depthFunc: (update, func) =>
+  depthFunc: (update: UpdateFunc, func) =>
     update({
       [GL.DEPTH_FUNC]: func
     }),
 
-  depthRange: (update, zNear, zFar) =>
+  depthRange: (update: UpdateFunc, zNear: number, zFar: number) =>
     update({
       [GL.DEPTH_RANGE]: new Float32Array([zNear, zFar])
     }),
 
-  depthMask: (update, mask) =>
+  depthMask: (update: UpdateFunc, mask: number) =>
     update({
       [GL.DEPTH_WRITEMASK]: mask
     }),
 
-  frontFace: (update, face) =>
+  frontFace: (update: UpdateFunc, face) =>
     update({
       [GL.FRONT_FACE]: face
     }),
 
-  lineWidth: (update, width) =>
+  lineWidth: (update: UpdateFunc, width) =>
     update({
       [GL.LINE_WIDTH]: width
     }),
 
-  polygonOffset: (update, factor, units) =>
+  polygonOffset: (update: UpdateFunc, factor, units) =>
     update({
       [GL.POLYGON_OFFSET_FACTOR]: factor,
       [GL.POLYGON_OFFSET_UNITS]: units
     }),
 
-  sampleCoverage: (update, value, invert) =>
+  sampleCoverage: (update: UpdateFunc, value, invert) =>
     update({
       [GL.SAMPLE_COVERAGE_VALUE]: value,
       [GL.SAMPLE_COVERAGE_INVERT]: invert
     }),
 
-  scissor: (update, x, y, width, height) =>
+  scissor: (update: UpdateFunc, x, y, width, height) =>
     update({
       [GL.SCISSOR_BOX]: new Int32Array([x, y, width, height])
     }),
 
-  stencilMask: (update, mask) =>
+  stencilMask: (update: UpdateFunc, mask) =>
     update({
       [GL.STENCIL_WRITEMASK]: mask,
       [GL.STENCIL_BACK_WRITEMASK]: mask
     }),
 
-  stencilMaskSeparate: (update, face, mask) =>
+  stencilMaskSeparate: (update: UpdateFunc, face, mask) =>
     update({
       [face === GL.FRONT ? GL.STENCIL_WRITEMASK : GL.STENCIL_BACK_WRITEMASK]: mask
     }),
 
-  stencilFunc: (update, func, ref, mask) =>
+  stencilFunc: (update: UpdateFunc, func, ref, mask) =>
     update({
       [GL.STENCIL_FUNC]: func,
       [GL.STENCIL_REF]: ref,
@@ -533,14 +535,14 @@ export const GL_HOOKED_SETTERS = {
       [GL.STENCIL_BACK_VALUE_MASK]: mask
     }),
 
-  stencilFuncSeparate: (update, face, func, ref, mask) =>
+  stencilFuncSeparate: (update: UpdateFunc, face, func, ref, mask) =>
     update({
       [face === GL.FRONT ? GL.STENCIL_FUNC : GL.STENCIL_BACK_FUNC]: func,
       [face === GL.FRONT ? GL.STENCIL_REF : GL.STENCIL_BACK_REF]: ref,
       [face === GL.FRONT ? GL.STENCIL_VALUE_MASK : GL.STENCIL_BACK_VALUE_MASK]: mask
     }),
 
-  stencilOp: (update, fail, zfail, zpass) =>
+  stencilOp: (update: UpdateFunc, fail, zfail, zpass) =>
     update({
       [GL.STENCIL_FAIL]: fail,
       [GL.STENCIL_PASS_DEPTH_FAIL]: zfail,
@@ -550,14 +552,14 @@ export const GL_HOOKED_SETTERS = {
       [GL.STENCIL_BACK_PASS_DEPTH_PASS]: zpass
     }),
 
-  stencilOpSeparate: (update, face, fail, zfail, zpass) =>
+  stencilOpSeparate: (update: UpdateFunc, face, fail, zfail, zpass) =>
     update({
       [face === GL.FRONT ? GL.STENCIL_FAIL : GL.STENCIL_BACK_FAIL]: fail,
       [face === GL.FRONT ? GL.STENCIL_PASS_DEPTH_FAIL : GL.STENCIL_BACK_PASS_DEPTH_FAIL]: zfail,
       [face === GL.FRONT ? GL.STENCIL_PASS_DEPTH_PASS : GL.STENCIL_BACK_PASS_DEPTH_PASS]: zpass
     }),
 
-  viewport: (update, x, y, width, height) =>
+  viewport: (update: UpdateFunc, x, y, width, height) =>
     update({
       [GL.VIEWPORT]: [x, y, width, height]
     })

package/src/context/polyfill/get-parameter-polyfill.ts

@@ -51,7 +51,7 @@ const WEBGL_PARAMETERS = {
 
   // Extension LIMITS
   [GL_MAX_TEXTURE_MAX_ANISOTROPY_EXT]: (gl, getParameter) => {
-    const ext = gl.luma?.extensions?.[EXT_texture_filter_anisotropic] || 
+    const ext = gl.luma?.extensions?.[EXT_texture_filter_anisotropic] ||
       gl.getExtension('EXT_texture_filter_anisotropic');
     return ext ? getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT) : 1.0;
   },

package/src/context/polyfill/polyfill-context.ts

@@ -35,10 +35,9 @@ function initializeExtensions(gl: WebGLRenderingContext): void {
   const contextState = getContextState(gl);
   // `getSupportedExtensions` can return null when context is lost.
   const EXTENSIONS = gl.getSupportedExtensions() || [];
-  for (const extension of EXTENSIONS) {
-    contextState._extensions[extension] = gl.getExtension(extension);
-    // TODO - this looks like a mistake?
-    contextState[extension] = gl.getExtension(extension);
+  for (const extensionName of EXTENSIONS) {
+    const extension = gl.getExtension(extensionName);
+    contextState._extensions[extensionName] = extension;
   }
 }
 
@@ -64,7 +63,7 @@ function polyfillExtension(gl: WebGLRenderingContext, {extension, target, target
   for (const key of Object.keys(defaults)) {
     const extKey = `${key}${suffix}`;
 
-    let polyfill = null;
+    let polyfill: Function | null = null;
     if (key === 'meta') {
       // ignore
     } else if (typeof gl[key] === 'function') {