@luma.gl/webgl 9.0.0-alpha.8 → 9.0.0-beta.1

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

@@ -1,10 +1,13 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
 const ERR_HEADLESSGL_FAILED =
   'Failed to create WebGL context in Node.js, headless gl returned null';
 
-const ERR_HEADLESSGL_LOAD = `\
+const ERR_HEADLESSGL_LOAD = '\
   luma.gl: loaded under Node.js without headless gl installed, meaning that WebGL \
   contexts can not be created. This may not be an error. For example, this is a \
-  typical configuration for isorender applications running on the server.`;
+  typical configuration for isorender applications running on the server.';
 
 const CONTEXT_DEFAULTS = {
   width: 1,

package/src/context/context/webgl-checks.ts

@@ -1,5 +1,7 @@
 // luma.gl, MIT license
-import {assert} from '@luma.gl/api';
+// Copyright (c) vis.gl contributors
+
+import {assert} from '@luma.gl/core';
 
 const ERR_CONTEXT = 'Invalid WebGLRenderingContext';
 export const ERR_WEBGL = ERR_CONTEXT;

package/src/context/debug/spector.ts

@@ -1,5 +1,7 @@
 // luma.gl, MIT license
-import {log, loadScript} from '@luma.gl/api';
+// Copyright (c) vis.gl contributors
+
+import {log, loadScript} from '@luma.gl/core';
 
 /** Spector debug initialization options */
 type SpectorProps = {
@@ -23,6 +25,7 @@ let spector: any = null;
 let initialized: boolean = false;
 
 declare global {
+  // eslint-disable-next-line no-var
   var SPECTOR: any;
 }
 
@@ -44,7 +47,7 @@ export function initializeSpectorJS(props?: SpectorProps) {
   }
 
   if (!spector && globalThis.SPECTOR) {
-    log.probe(LOG_LEVEL, "SPECTOR found and initialized")();
+    log.probe(LOG_LEVEL, 'SPECTOR found and initialized')();
     spector = new globalThis.SPECTOR.Spector();
     if (globalThis.luma) {
       globalThis.luma.spector = spector;
@@ -61,9 +64,9 @@ export function initializeSpectorJS(props?: SpectorProps) {
     // 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?.onCaptureStarted.add((capture: unknown) => log.info('Spector capture started:', capture)());
     spector?.onCapture.add((capture: unknown) => {
-      log.info(`Spector capture complete:`, capture)();
+      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()
@@ -82,7 +85,7 @@ export function initializeSpectorJS(props?: SpectorProps) {
     // 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`)();
+      log.info('Spector capture stopped after 2 seconds')();
       spector?.stopCapture();
       // spector?.displayUI();
     });

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

@@ -1,6 +1,10 @@
 // luma.gl, MIT license
-import {log, loadScript} from '@luma.gl/api/';
-import GL from '@luma.gl/constants';
+// Copyright (c) vis.gl contributors
+
+import {log, loadScript} from '@luma.gl/core';
+// Rename constant to prevent inlining. We need the full set of constants for generating debug strings.
+import {GL as GLEnum} from '@luma.gl/constants';
+import {isBrowser} from '@probe.gl/env'
 
 const WEBGL_DEBUG_CDN_URL = 'https://unpkg.com/webgl-debug@2.0.1/index.js';
 
@@ -11,20 +15,26 @@ type DebugContextProps = {
   webgl2?: boolean;
 };
 
-const DEFAULT_DEBUG_CONTEXT_PROPS: Required<DebugContextProps> = {
-  debug: true,
-  throwOnError: false,
-  break: [],
-  webgl2: false,
+// const DEFAULT_DEBUG_CONTEXT_PROPS: Required<DebugContextProps> = {
+//   debug: true,
+//   throwOnError: false,
+//   break: [],
+//   webgl2: false,
+// }
+
+type ContextData = {
+  realContext?: WebGLRenderingContext;
+  debugContext?: WebGLRenderingContext;
 }
 
 // Helper to get shared context data
-function getContextData(gl: any) {
+function getContextData(gl: any): ContextData {
   gl.luma = gl.luma || {};
   return gl.luma;
 }
 
 declare global {
+  // eslint-disable-next-line no-var
   var WebGLDebugUtils: any;
 }
 
@@ -35,8 +45,7 @@ declare global {
  * @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
+  if (isBrowser() && !globalThis.WebGLDebugUtils) {
     globalThis.global = globalThis.global || globalThis;
     // @ts-expect-error Developer tools expects global to be set
     globalThis.global.module = {};
@@ -77,7 +86,7 @@ function getDebugContext(gl: WebGLRenderingContext, props: DebugContextProps): W
   }
 
   // Create a new debug context
-  globalThis.WebGLDebugUtils.init({...GL, ...gl});
+  globalThis.WebGLDebugUtils.init({...GLEnum, ...gl});
   const glDebug = globalThis.WebGLDebugUtils.makeDebugContext(
     gl,
     onGLError.bind(null, props),
@@ -85,9 +94,9 @@ function getDebugContext(gl: WebGLRenderingContext, props: DebugContextProps): W
   );
 
   // 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];
+  for (const key in GLEnum) {
+    if (!(key in glDebug) && typeof GLEnum[key] === 'number') {
+      glDebug[key] = GLEnum[key];
     }
   }
   
@@ -139,10 +148,10 @@ function onValidateGLFunc(props: DebugContextProps, functionName: string, functi
     log.log(1, functionString)();
   }
 
-  if (props.break) {
+  // If array of breakpoint strings supplied, check if any of them is contained in current GLEnum function
+  if (props.break && props.break.length > 0) {
     functionString = functionString || getFunctionString(functionName, functionArgs);
-    const isBreakpoint =
-      props.break && props.break.every((breakOn: string) => functionString.indexOf(breakOn) !== -1);
+    const isBreakpoint = props.break.every((breakOn: string) => functionString.indexOf(breakOn) !== -1);
     if (isBreakpoint) {
       debugger; // eslint-disable-line
     }

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

@@ -1,8 +1,11 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
 // 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 {Device} from '@luma.gl/api';
-import type {GLParameters} from '../../types/webgl';
+import {Device} from '@luma.gl/core';
+import type {GLParameters} from '@luma.gl/constants';
 import {
   GL_PARAMETER_DEFAULTS,
   GL_PARAMETER_SETTERS,
@@ -10,8 +13,7 @@ import {
   GL_PARAMETER_GETTERS
 } from './webgl-parameter-tables';
 
-import {isWebGL} from '../context/webgl-checks';
-import WebGLDevice from '../../adapter/webgl-device';
+import {WebGLDevice} from '../../adapter/webgl-device';
 
 export type {GLParameters};
 
@@ -21,7 +23,7 @@ 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(
+export function setGLParameters(
   device: Device | WebGLRenderingContext,
   parameters: GLParameters
 ): void {
@@ -89,10 +91,13 @@ export function setParameters(
  * 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,
+export function getGLParameters(
+  device: Device | WebGLRenderingContext,
   parameters: keyof GLParameters | (keyof GLParameters)[] | GLParameters = GL_PARAMETER_DEFAULTS
 ): GLParameters {
+  const webglDevice = WebGLDevice.attach(device);
+  const gl = webglDevice.gl;
+
   // support both arrays of parameters and objects (keys represent parameters)
 
   if (typeof parameters === 'number') {
@@ -118,14 +123,15 @@ export function getParameters(
  * 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 resetGLParameters(device: Device | WebGLRenderingContext): void {
+  setGLParameters(device, GL_PARAMETER_DEFAULTS);
 }
 
 // Helpers
 
 // Returns true if given object is empty, false otherwise.
 function isObjectEmpty(object) {
+  // @ts-ignore dummy key variable
   for (const key in object) {
     return false;
   }

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

@@ -1,7 +1,10 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
 // Tables describing WebGL parameters
-import GL from '@luma.gl/constants';
+import {GL, GLParameters} from '@luma.gl/constants';
 import {isWebGL2} from '../context/webgl-checks';
-import type {GLParameters} from '../../types/webgl';
+
 // DEFAULT SETTINGS - FOR FAST CACHE INITIALIZATION AND CONTEXT RESETS
 
 /* eslint-disable no-shadow */
@@ -91,11 +94,13 @@ export const GL_PARAMETER_DEFAULTS: GLParameters = {
 
 // SETTER TABLES - ENABLES SETTING ANY PARAMETER WITH A COMMON API
 
-const enable = (gl, value, key) => (value ? gl.enable(key) : gl.disable(key));
-const hint = (gl, value, key) => gl.hint(key, value);
-const pixelStorei = (gl, value, key) => gl.pixelStorei(key, value);
+const enable = (gl: WebGLRenderingContext, value: unknown, key: GL) =>
+  value ? gl.enable(key) : gl.disable(key);
+const hint = (gl: WebGLRenderingContext, value: GL, key: GL) => gl.hint(key, value);
+const pixelStorei = (gl: WebGLRenderingContext, value: number | boolean, key: GL) =>
+  gl.pixelStorei(key, value);
 
-const bindFramebuffer = (gl, value, key) => {
+const bindFramebuffer = (gl: WebGLRenderingContext, value: unknown, key: GL) => {
   let target;
   if (key === GL.FRAMEBUFFER_BINDING) {
     target = isWebGL2(gl) ? GL.DRAW_FRAMEBUFFER : GL.FRAMEBUFFER;
@@ -106,21 +111,22 @@ const bindFramebuffer = (gl, value, key) => {
   return gl.bindFramebuffer(target, value);
 };
 
-const bindBuffer = (gl, value, key) => {
-  const target = ({
-    [GL.ARRAY_BUFFER_BINDING]: [GL.ARRAY_BUFFER],
-    [GL.COPY_READ_BUFFER_BINDING]: [GL.COPY_READ_BUFFER],
-    [GL.COPY_WRITE_BUFFER_BINDING]: [GL.COPY_WRITE_BUFFER],
-    [GL.PIXEL_PACK_BUFFER_BINDING]: [GL.PIXEL_PACK_BUFFER],
-    [GL.PIXEL_UNPACK_BUFFER_BINDING]: [GL.PIXEL_UNPACK_BUFFER]
-  })[key];
-
-  gl.bindBuffer(target, value);
+const bindBuffer = (gl: WebGLRenderingContext, value: unknown, key: GL) => {
+  const bindingMap: Partial<Record<GL, GL>> = {
+    [GL.ARRAY_BUFFER_BINDING]: GL.ARRAY_BUFFER,
+    [GL.COPY_READ_BUFFER_BINDING]: GL.COPY_READ_BUFFER,
+    [GL.COPY_WRITE_BUFFER_BINDING]: GL.COPY_WRITE_BUFFER,
+    [GL.PIXEL_PACK_BUFFER_BINDING]: GL.PIXEL_PACK_BUFFER,
+    [GL.PIXEL_UNPACK_BUFFER_BINDING]: GL.PIXEL_UNPACK_BUFFER
+  };
+  const glTarget = bindingMap[key];
+
+  gl.bindBuffer(glTarget, value);
 };
 
 // Utility
-function isArray(array) {
-  return Array.isArray(array) || ArrayBuffer.isView(array);
+function isArray(array: unknown): boolean {
+  return Array.isArray(array) || (ArrayBuffer.isView(array) && !(array instanceof DataView));
 }
 
 // Map from WebGL parameter names to corresponding WebGL setter functions
@@ -128,29 +134,34 @@ function isArray(array) {
 // NOTE: When value type is a string, it will be handled by 'GL_COMPOSITE_PARAMETER_SETTERS'
 export const GL_PARAMETER_SETTERS = {
   [GL.BLEND]: enable,
-  [GL.BLEND_COLOR]: (gl, value) => gl.blendColor(...value),
+  [GL.BLEND_COLOR]: (gl: WebGLRenderingContext, value: [number, number, number, number]) =>
+    gl.blendColor(...value),
   [GL.BLEND_EQUATION_RGB]: 'blendEquation',
   [GL.BLEND_EQUATION_ALPHA]: 'blendEquation',
   [GL.BLEND_SRC_RGB]: 'blendFunc',
   [GL.BLEND_DST_RGB]: 'blendFunc',
   [GL.BLEND_SRC_ALPHA]: 'blendFunc',
   [GL.BLEND_DST_ALPHA]: 'blendFunc',
-  [GL.COLOR_CLEAR_VALUE]: (gl, value) => gl.clearColor(...value),
-  [GL.COLOR_WRITEMASK]: (gl, value) => gl.colorMask(...value),
+  [GL.COLOR_CLEAR_VALUE]: (gl: WebGLRenderingContext, value: [number, number, number, number]) =>
+    gl.clearColor(...value),
+  [GL.COLOR_WRITEMASK]: (gl: WebGLRenderingContext, value: [boolean, boolean, boolean, boolean]) => gl.colorMask(...value),
   [GL.CULL_FACE]: enable,
-  [GL.CULL_FACE_MODE]: (gl, value) => gl.cullFace(value),
+  [GL.CULL_FACE_MODE]: (gl: WebGLRenderingContext, value) => gl.cullFace(value),
   [GL.DEPTH_TEST]: enable,
-  [GL.DEPTH_CLEAR_VALUE]: (gl, value) => gl.clearDepth(value),
-  [GL.DEPTH_FUNC]: (gl, value) => gl.depthFunc(value),
-  [GL.DEPTH_RANGE]: (gl, value) => gl.depthRange(...value),
-  [GL.DEPTH_WRITEMASK]: (gl, value) => gl.depthMask(value),
+  [GL.DEPTH_CLEAR_VALUE]: (gl: WebGLRenderingContext, value) => gl.clearDepth(value),
+  [GL.DEPTH_FUNC]: (gl: WebGLRenderingContext, value) => gl.depthFunc(value),
+  [GL.DEPTH_RANGE]: (gl: WebGLRenderingContext, value: [number, number]) => gl.depthRange(...value),
+  [GL.DEPTH_WRITEMASK]: (gl: WebGLRenderingContext, value) => gl.depthMask(value),
   [GL.DITHER]: enable,
   [GL.FRAGMENT_SHADER_DERIVATIVE_HINT]: hint,
 
-  [GL.CURRENT_PROGRAM]: (gl, value) => gl.useProgram(value),
-  [GL.RENDERBUFFER_BINDING]: (gl, value) => gl.bindRenderbuffer(GL.RENDERBUFFER, value),
-  [GL.TRANSFORM_FEEDBACK_BINDING]: (gl, value) => gl.bindTransformFeedback?.(GL.TRANSFORM_FEEDBACK, value),
-  [GL.VERTEX_ARRAY_BINDING]: (gl, value) => gl.bindVertexArray(value),
+  [GL.CURRENT_PROGRAM]: (gl: WebGLRenderingContext, value) => gl.useProgram(value),
+  [GL.RENDERBUFFER_BINDING]: (gl: WebGLRenderingContext, value) =>
+    gl.bindRenderbuffer(GL.RENDERBUFFER, value),
+  [GL.TRANSFORM_FEEDBACK_BINDING]: (gl: WebGLRenderingContext, value) =>
+    (gl as WebGL2RenderingContext).bindTransformFeedback?.(GL.TRANSFORM_FEEDBACK, value),
+  [GL.VERTEX_ARRAY_BINDING]: (gl: WebGLRenderingContext, value) =>
+    (gl as WebGL2RenderingContext).bindVertexArray(value),
   // NOTE: FRAMEBUFFER_BINDING and DRAW_FRAMEBUFFER_BINDING(WebGL2) refer same state.
   [GL.FRAMEBUFFER_BINDING]: bindFramebuffer,
   [GL.READ_FRAMEBUFFER_BINDING]: bindFramebuffer,
@@ -162,9 +173,9 @@ export const GL_PARAMETER_SETTERS = {
   [GL.PIXEL_PACK_BUFFER_BINDING]: bindBuffer,
   [GL.PIXEL_UNPACK_BUFFER_BINDING]: bindBuffer,
 
-  [GL.FRONT_FACE]: (gl, value) => gl.frontFace(value),
+  [GL.FRONT_FACE]: (gl: WebGLRenderingContext, value) => gl.frontFace(value),
   [GL.GENERATE_MIPMAP_HINT]: hint,
-  [GL.LINE_WIDTH]: (gl, value) => gl.lineWidth(value),
+  [GL.LINE_WIDTH]: (gl: WebGLRenderingContext, value) => gl.lineWidth(value),
   [GL.POLYGON_OFFSET_FILL]: enable,
   [GL.POLYGON_OFFSET_FACTOR]: 'polygonOffset',
   [GL.POLYGON_OFFSET_UNITS]: 'polygonOffset',
@@ -174,11 +185,13 @@ export const GL_PARAMETER_SETTERS = {
   [GL.SAMPLE_COVERAGE_VALUE]: 'sampleCoverage',
   [GL.SAMPLE_COVERAGE_INVERT]: 'sampleCoverage',
   [GL.SCISSOR_TEST]: enable,
-  [GL.SCISSOR_BOX]: (gl, value) => gl.scissor(...value),
+  [GL.SCISSOR_BOX]: (gl: WebGLRenderingContext, value: [number, number, number, number]) => gl.scissor(...value),
   [GL.STENCIL_TEST]: enable,
-  [GL.STENCIL_CLEAR_VALUE]: (gl, value) => gl.clearStencil(value),
-  [GL.STENCIL_WRITEMASK]: (gl, value) => gl.stencilMaskSeparate(GL.FRONT, value),
-  [GL.STENCIL_BACK_WRITEMASK]: (gl, value) => gl.stencilMaskSeparate(GL.BACK, value),
+  [GL.STENCIL_CLEAR_VALUE]: (gl: WebGLRenderingContext, value) => gl.clearStencil(value),
+  [GL.STENCIL_WRITEMASK]: (gl: WebGLRenderingContext, value) =>
+    gl.stencilMaskSeparate(GL.FRONT, value),
+  [GL.STENCIL_BACK_WRITEMASK]: (gl: WebGLRenderingContext, value) =>
+    gl.stencilMaskSeparate(GL.BACK, value),
   [GL.STENCIL_FUNC]: 'stencilFuncFront',
   [GL.STENCIL_REF]: 'stencilFuncFront',
   [GL.STENCIL_VALUE_MASK]: 'stencilFuncFront',
@@ -191,7 +204,7 @@ export const GL_PARAMETER_SETTERS = {
   [GL.STENCIL_BACK_FAIL]: 'stencilOpBack',
   [GL.STENCIL_BACK_PASS_DEPTH_FAIL]: 'stencilOpBack',
   [GL.STENCIL_BACK_PASS_DEPTH_PASS]: 'stencilOpBack',
-  [GL.VIEWPORT]: (gl, value) => gl.viewport(...value),
+  [GL.VIEWPORT]: (gl: WebGLRenderingContext, value: [number, number, number, number]) => gl.viewport(...value),
 
   // WEBGL1 PIXEL PACK/UNPACK MODES
   [GL.PACK_ALIGNMENT]: pixelStorei,
@@ -212,80 +225,85 @@ export const GL_PARAMETER_SETTERS = {
   [GL.UNPACK_SKIP_IMAGES]: pixelStorei,
 
   // Function-style setters
-  framebuffer: (gl, framebuffer) => {
+  framebuffer: (gl: WebGLRenderingContext, framebuffer) => {
     // accepts 1) a WebGLFramebuffer 2) null (default framebuffer), or 3) luma.gl Framebuffer class
     // framebuffer is null when restoring to default framebuffer, otherwise use the WebGL handle.
     const handle = framebuffer && 'handle' in framebuffer ? framebuffer.handle : framebuffer;
     return gl.bindFramebuffer(GL.FRAMEBUFFER, handle);
   },
-  blend: (gl, value) => (value ? gl.enable(GL.BLEND) : gl.disable(GL.BLEND)),
-  blendColor: (gl, value) => gl.blendColor(...value),
-  blendEquation: (gl, args) => {
-    args = isArray(args) ? args : [args, args];
-    gl.blendEquationSeparate(...args);
+  blend: (gl: WebGLRenderingContext, value) => (value ? gl.enable(GL.BLEND) : gl.disable(GL.BLEND)),
+  blendColor: (gl: WebGLRenderingContext, value: [number, number, number, number]) => gl.blendColor(...value),
+  blendEquation: (gl: WebGLRenderingContext, args: number | [number, number]) => {
+    const separateModes = typeof args === 'number' ? [args, args] as [number, number]: args;
+    gl.blendEquationSeparate(...separateModes);
   },
-  blendFunc: (gl, args) => {
-    args = isArray(args) && args.length === 2 ? [...args, ...args] : args;
-    gl.blendFuncSeparate(...args);
+  blendFunc: (gl: WebGLRenderingContext, args: [number, number] | [number, number, number, number]) => {
+    const separateFuncs = args?.length === 2 ? [...args, ...args] as [number, number, number, number] : args;
+    gl.blendFuncSeparate(...separateFuncs);
   },
 
-  clearColor: (gl, value) => gl.clearColor(...value),
-  clearDepth: (gl, value) => gl.clearDepth(value),
-  clearStencil: (gl, value) => gl.clearStencil(value),
+  clearColor: (gl: WebGLRenderingContext, value: [number, number, number, number]) => gl.clearColor(...value),
+  clearDepth: (gl: WebGLRenderingContext, value) => gl.clearDepth(value),
+  clearStencil: (gl: WebGLRenderingContext, value) => gl.clearStencil(value),
 
-  colorMask: (gl, value) => gl.colorMask(...value),
+  colorMask: (gl: WebGLRenderingContext, value: [boolean, boolean, boolean, boolean]) => gl.colorMask(...value),
 
-  cull: (gl, value) => (value ? gl.enable(GL.CULL_FACE) : gl.disable(GL.CULL_FACE)),
-  cullFace: (gl, value) => gl.cullFace(value),
+  cull: (gl: WebGLRenderingContext, value) =>
+    value ? gl.enable(GL.CULL_FACE) : gl.disable(GL.CULL_FACE),
+  cullFace: (gl: WebGLRenderingContext, value) => gl.cullFace(value),
 
-  depthTest: (gl, value) => (value ? gl.enable(GL.DEPTH_TEST) : gl.disable(GL.DEPTH_TEST)),
-  depthFunc: (gl, value) => gl.depthFunc(value),
-  depthMask: (gl, value) => gl.depthMask(value),
-  depthRange: (gl, value) => gl.depthRange(...value),
+  depthTest: (gl: WebGLRenderingContext, value) =>
+    value ? gl.enable(GL.DEPTH_TEST) : gl.disable(GL.DEPTH_TEST),
+  depthFunc: (gl: WebGLRenderingContext, value) => gl.depthFunc(value),
+  depthMask: (gl: WebGLRenderingContext, value) => gl.depthMask(value),
+  depthRange: (gl: WebGLRenderingContext, value: [number, number]) => gl.depthRange(...value),
 
-  dither: (gl, value) => (value ? gl.enable(GL.DITHER) : gl.disable(GL.DITHER)),
+  dither: (gl: WebGLRenderingContext, value) =>
+    value ? gl.enable(GL.DITHER) : gl.disable(GL.DITHER),
 
-  derivativeHint: (gl, value) => {
+  derivativeHint: (gl: WebGLRenderingContext, value) => {
     // gl1: 'OES_standard_derivatives'
     gl.hint(GL.FRAGMENT_SHADER_DERIVATIVE_HINT, value);
   },
 
-  frontFace: (gl, value) => gl.frontFace(value),
+  frontFace: (gl: WebGLRenderingContext, value) => gl.frontFace(value),
 
-  mipmapHint: (gl, value) => gl.hint(GL.GENERATE_MIPMAP_HINT, value),
+  mipmapHint: (gl: WebGLRenderingContext, value) => gl.hint(GL.GENERATE_MIPMAP_HINT, value),
 
-  lineWidth: (gl, value) => gl.lineWidth(value),
+  lineWidth: (gl: WebGLRenderingContext, value) => gl.lineWidth(value),
 
-  polygonOffsetFill: (gl, value) =>
+  polygonOffsetFill: (gl: WebGLRenderingContext, value) =>
     value ? gl.enable(GL.POLYGON_OFFSET_FILL) : gl.disable(GL.POLYGON_OFFSET_FILL),
-  polygonOffset: (gl, value) => gl.polygonOffset(...value),
+  polygonOffset: (gl: WebGLRenderingContext, value: [number, number]) => gl.polygonOffset(...value),
 
-  sampleCoverage: (gl, value) => gl.sampleCoverage(...value),
+  sampleCoverage: (gl: WebGLRenderingContext, value: [number, boolean?]) => gl.sampleCoverage(...value),
 
-  scissorTest: (gl, value) => (value ? gl.enable(GL.SCISSOR_TEST) : gl.disable(GL.SCISSOR_TEST)),
-  scissor: (gl, value) => gl.scissor(...value),
+  scissorTest: (gl: WebGLRenderingContext, value) =>
+    value ? gl.enable(GL.SCISSOR_TEST) : gl.disable(GL.SCISSOR_TEST),
+  scissor: (gl: WebGLRenderingContext, value: [number, number, number, number]) => gl.scissor(...value),
 
-  stencilTest: (gl, value) => (value ? gl.enable(GL.STENCIL_TEST) : gl.disable(GL.STENCIL_TEST)),
-  stencilMask: (gl, value) => {
+  stencilTest: (gl: WebGLRenderingContext, value) =>
+    value ? gl.enable(GL.STENCIL_TEST) : gl.disable(GL.STENCIL_TEST),
+  stencilMask: (gl: WebGLRenderingContext, value) => {
     value = isArray(value) ? value : [value, value];
     const [mask, backMask] = value;
     gl.stencilMaskSeparate(GL.FRONT, mask);
     gl.stencilMaskSeparate(GL.BACK, backMask);
   },
-  stencilFunc: (gl, args) => {
+  stencilFunc: (gl: WebGLRenderingContext, args) => {
     args = isArray(args) && args.length === 3 ? [...args, ...args] : args;
     const [func, ref, mask, backFunc, backRef, backMask] = args;
     gl.stencilFuncSeparate(GL.FRONT, func, ref, mask);
     gl.stencilFuncSeparate(GL.BACK, backFunc, backRef, backMask);
   },
-  stencilOp: (gl, args) => {
+  stencilOp: (gl: WebGLRenderingContext, args) => {
     args = isArray(args) && args.length === 3 ? [...args, ...args] : args;
     const [sfail, dpfail, dppass, backSfail, backDpfail, backDppass] = args;
     gl.stencilOpSeparate(GL.FRONT, sfail, dpfail, dppass);
     gl.stencilOpSeparate(GL.BACK, backSfail, backDpfail, backDppass);
   },
 
-  viewport: (gl, value) => gl.viewport(...value)
+  viewport: (gl: WebGLRenderingContext, value: [number, number, number, number]) => gl.viewport(...value)
 };
 
 function getValue(glEnum, values, cache) {
@@ -294,50 +312,50 @@ function getValue(glEnum, values, cache) {
 
 // COMPOSITE_WEBGL_PARAMETER_
 export const GL_COMPOSITE_PARAMETER_SETTERS = {
-  blendEquation: (gl, values, cache) =>
+  blendEquation: (gl: WebGLRenderingContext, values, cache) =>
     gl.blendEquationSeparate(
       getValue(GL.BLEND_EQUATION_RGB, values, cache),
       getValue(GL.BLEND_EQUATION_ALPHA, values, cache)
     ),
-  blendFunc: (gl, values, cache) =>
+  blendFunc: (gl: WebGLRenderingContext, values, cache) =>
     gl.blendFuncSeparate(
       getValue(GL.BLEND_SRC_RGB, values, cache),
       getValue(GL.BLEND_DST_RGB, values, cache),
       getValue(GL.BLEND_SRC_ALPHA, values, cache),
       getValue(GL.BLEND_DST_ALPHA, values, cache)
     ),
-  polygonOffset: (gl, values, cache) =>
+  polygonOffset: (gl: WebGLRenderingContext, values, cache) =>
     gl.polygonOffset(
       getValue(GL.POLYGON_OFFSET_FACTOR, values, cache),
       getValue(GL.POLYGON_OFFSET_UNITS, values, cache)
     ),
-  sampleCoverage: (gl, values, cache) =>
+  sampleCoverage: (gl: WebGLRenderingContext, values, cache) =>
     gl.sampleCoverage(
       getValue(GL.SAMPLE_COVERAGE_VALUE, values, cache),
       getValue(GL.SAMPLE_COVERAGE_INVERT, values, cache)
     ),
-  stencilFuncFront: (gl, values, cache) =>
+  stencilFuncFront: (gl: WebGLRenderingContext, values, cache) =>
     gl.stencilFuncSeparate(
       GL.FRONT,
       getValue(GL.STENCIL_FUNC, values, cache),
       getValue(GL.STENCIL_REF, values, cache),
       getValue(GL.STENCIL_VALUE_MASK, values, cache)
     ),
-  stencilFuncBack: (gl, values, cache) =>
+  stencilFuncBack: (gl: WebGLRenderingContext, values, cache) =>
     gl.stencilFuncSeparate(
       GL.BACK,
       getValue(GL.STENCIL_BACK_FUNC, values, cache),
       getValue(GL.STENCIL_BACK_REF, values, cache),
       getValue(GL.STENCIL_BACK_VALUE_MASK, values, cache)
     ),
-  stencilOpFront: (gl, values, cache) =>
+  stencilOpFront: (gl: WebGLRenderingContext, values, cache) =>
     gl.stencilOpSeparate(
       GL.FRONT,
       getValue(GL.STENCIL_FAIL, values, cache),
       getValue(GL.STENCIL_PASS_DEPTH_FAIL, values, cache),
       getValue(GL.STENCIL_PASS_DEPTH_PASS, values, cache)
     ),
-  stencilOpBack: (gl, values, cache) =>
+  stencilOpBack: (gl: WebGLRenderingContext, values, cache) =>
     gl.stencilOpSeparate(
       GL.BACK,
       getValue(GL.STENCIL_BACK_FAIL, values, cache),
@@ -352,36 +370,40 @@ type UpdateFunc = (params: Record<string, any>) => void;
 export const GL_HOOKED_SETTERS = {
   // GENERIC SETTERS
 
-  enable: (update: UpdateFunc, capability) =>
+  enable: (update: UpdateFunc, capability: GL) =>
     update({
       [capability]: true
     }),
-  disable: (update: UpdateFunc, capability) =>
+  disable: (update: UpdateFunc, capability: GL) =>
     update({
       [capability]: false
     }),
-  pixelStorei: (update: UpdateFunc, pname, value) =>
+  pixelStorei: (update: UpdateFunc, pname: GL, value) =>
     update({
       [pname]: value
     }),
-  hint: (update: UpdateFunc, pname, hint) =>
+  hint: (update: UpdateFunc, pname: GL, hint: GL) =>
     update({
       [pname]: hint
     }),
 
   // SPECIFIC SETTERS
-  useProgram: (update: UpdateFunc, value) => update({
-    [GL.CURRENT_PROGRAM]: value,
-  }),
-  bindRenderbuffer: (update: UpdateFunc, target, value) => update({
-    [GL.RENDERBUFFER_BINDING]: value
-  }),
-  bindTransformFeedback: (update: UpdateFunc, target, value) => update({
-    [GL.TRANSFORM_FEEDBACK_BINDING]: value
-  }),
-  bindVertexArray: (update: UpdateFunc, value) => update({
-    [GL.VERTEX_ARRAY_BINDING]: value
-  }),
+  useProgram: (update: UpdateFunc, value) =>
+    update({
+      [GL.CURRENT_PROGRAM]: value
+    }),
+  bindRenderbuffer: (update: UpdateFunc, target, value) =>
+    update({
+      [GL.RENDERBUFFER_BINDING]: value
+    }),
+  bindTransformFeedback: (update: UpdateFunc, target, value) =>
+    update({
+      [GL.TRANSFORM_FEEDBACK_BINDING]: value
+    }),
+  bindVertexArray: (update: UpdateFunc, value) =>
+    update({
+      [GL.VERTEX_ARRAY_BINDING]: value
+    }),
 
   bindFramebuffer: (update: UpdateFunc, target, framebuffer) => {
     switch (target) {
@@ -399,13 +421,13 @@ export const GL_HOOKED_SETTERS = {
     }
   },
   bindBuffer: (update: UpdateFunc, target, buffer) => {
-    const pname = ({
+    const pname = {
       [GL.ARRAY_BUFFER]: [GL.ARRAY_BUFFER_BINDING],
       [GL.COPY_READ_BUFFER]: [GL.COPY_READ_BUFFER_BINDING],
       [GL.COPY_WRITE_BUFFER]: [GL.COPY_WRITE_BUFFER_BINDING],
       [GL.PIXEL_PACK_BUFFER]: [GL.PIXEL_PACK_BUFFER_BINDING],
       [GL.PIXEL_UNPACK_BUFFER]: [GL.PIXEL_UNPACK_BUFFER_BINDING]
-    })[target];
+    }[target];
 
     if (pname) {
       return update({[pname]: buffer});
@@ -567,7 +589,7 @@ export const GL_HOOKED_SETTERS = {
 
 // GETTER TABLE - FOR READING OUT AN ENTIRE CONTEXT
 
-const isEnabled = (gl, key) => gl.isEnabled(key);
+const isEnabled = (gl: WebGLRenderingContext, key) => gl.isEnabled(key);
 
 // Exceptions for any keys that cannot be queried by gl.getParameters
 export const GL_PARAMETER_GETTERS = {