@luma.gl/webgl 9.0.0-beta.1 → 9.0.0-beta.10

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

@@ -1,9 +1,9 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 // Tables describing WebGL parameters
 import {GL, GLParameters} from '@luma.gl/constants';
-import {isWebGL2} from '../context/webgl-checks';
 
 // DEFAULT SETTINGS - FOR FAST CACHE INITIALIZATION AND CONTEXT RESETS
 
@@ -65,15 +65,7 @@ export const GL_PARAMETER_DEFAULTS: GLParameters = {
   [GL.STENCIL_BACK_PASS_DEPTH_PASS]: GL.KEEP,
   // Dynamic value: We use [0, 0, 1024, 1024] as default, but usually this is updated in each frame.
   [GL.VIEWPORT]: [0, 0, 1024, 1024],
-  // WEBGL1 PIXEL PACK/UNPACK MODES
-  [GL.PACK_ALIGNMENT]: 4,
-  [GL.UNPACK_ALIGNMENT]: 4,
-  [GL.UNPACK_FLIP_Y_WEBGL]: false,
-  [GL.UNPACK_PREMULTIPLY_ALPHA_WEBGL]: false,
-  [GL.UNPACK_COLORSPACE_CONVERSION_WEBGL]: GL.BROWSER_DEFAULT_WEBGL,
 
-  // WEBGL2 / EXTENSIONS
-  // gl1: 'OES_standard_derivatives'
   [GL.TRANSFORM_FEEDBACK_BINDING]: null,
   [GL.COPY_READ_BUFFER_BINDING]: null,
   [GL.COPY_WRITE_BUFFER_BINDING]: null,
@@ -82,6 +74,12 @@ export const GL_PARAMETER_DEFAULTS: GLParameters = {
   [GL.FRAGMENT_SHADER_DERIVATIVE_HINT]: GL.DONT_CARE,
   [GL.READ_FRAMEBUFFER_BINDING]: null,
   [GL.RASTERIZER_DISCARD]: false,
+
+  [GL.PACK_ALIGNMENT]: 4,
+  [GL.UNPACK_ALIGNMENT]: 4,
+  [GL.UNPACK_FLIP_Y_WEBGL]: false,
+  [GL.UNPACK_PREMULTIPLY_ALPHA_WEBGL]: false,
+  [GL.UNPACK_COLORSPACE_CONVERSION_WEBGL]: GL.BROWSER_DEFAULT_WEBGL,
   [GL.PACK_ROW_LENGTH]: 0,
   [GL.PACK_SKIP_PIXELS]: 0,
   [GL.PACK_SKIP_ROWS]: 0,
@@ -94,24 +92,18 @@ export const GL_PARAMETER_DEFAULTS: GLParameters = {
 
 // SETTER TABLES - ENABLES SETTING ANY PARAMETER WITH A COMMON API
 
-const enable = (gl: WebGLRenderingContext, value: unknown, key: GL) =>
+const enable = (gl: WebGL2RenderingContext, 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) =>
+const hint = (gl: WebGL2RenderingContext, value: GL, key: GL) => gl.hint(key, value);
+const pixelStorei = (gl: WebGL2RenderingContext, value: number | boolean, key: GL) =>
   gl.pixelStorei(key, value);
 
-const bindFramebuffer = (gl: WebGLRenderingContext, value: unknown, key: GL) => {
-  let target;
-  if (key === GL.FRAMEBUFFER_BINDING) {
-    target = isWebGL2(gl) ? GL.DRAW_FRAMEBUFFER : GL.FRAMEBUFFER;
-  } else {
-    // GL.READ_FRAMEBUFFER_BINDING
-    target = GL.READ_FRAMEBUFFER;
-  }
+const bindFramebuffer = (gl: WebGL2RenderingContext, value: unknown, key: GL) => {
+  const target = key === GL.FRAMEBUFFER_BINDING ? GL.DRAW_FRAMEBUFFER : GL.READ_FRAMEBUFFER;
   return gl.bindFramebuffer(target, value);
 };
 
-const bindBuffer = (gl: WebGLRenderingContext, value: unknown, key: GL) => {
+const bindBuffer = (gl: WebGL2RenderingContext, 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,
@@ -134,7 +126,7 @@ function isArray(array: unknown): boolean {
 // 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: WebGLRenderingContext, value: [number, number, number, number]) =>
+  [GL.BLEND_COLOR]: (gl: WebGL2RenderingContext, value: [number, number, number, number]) =>
     gl.blendColor(...value),
   [GL.BLEND_EQUATION_RGB]: 'blendEquation',
   [GL.BLEND_EQUATION_ALPHA]: 'blendEquation',
@@ -142,26 +134,27 @@ export const GL_PARAMETER_SETTERS = {
   [GL.BLEND_DST_RGB]: 'blendFunc',
   [GL.BLEND_SRC_ALPHA]: 'blendFunc',
   [GL.BLEND_DST_ALPHA]: 'blendFunc',
-  [GL.COLOR_CLEAR_VALUE]: (gl: WebGLRenderingContext, value: [number, number, number, number]) =>
+  [GL.COLOR_CLEAR_VALUE]: (gl: WebGL2RenderingContext, value: [number, number, number, number]) =>
     gl.clearColor(...value),
-  [GL.COLOR_WRITEMASK]: (gl: WebGLRenderingContext, value: [boolean, boolean, boolean, boolean]) => gl.colorMask(...value),
+  [GL.COLOR_WRITEMASK]: (gl: WebGL2RenderingContext, value: [boolean, boolean, boolean, boolean]) =>
+    gl.colorMask(...value),
   [GL.CULL_FACE]: enable,
-  [GL.CULL_FACE_MODE]: (gl: WebGLRenderingContext, value) => gl.cullFace(value),
+  [GL.CULL_FACE_MODE]: (gl: WebGL2RenderingContext, value) => gl.cullFace(value),
   [GL.DEPTH_TEST]: enable,
-  [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.DEPTH_CLEAR_VALUE]: (gl: WebGL2RenderingContext, value) => gl.clearDepth(value),
+  [GL.DEPTH_FUNC]: (gl: WebGL2RenderingContext, value) => gl.depthFunc(value),
+  [GL.DEPTH_RANGE]: (gl: WebGL2RenderingContext, value: [number, number]) =>
+    gl.depthRange(...value),
+  [GL.DEPTH_WRITEMASK]: (gl: WebGL2RenderingContext, value) => gl.depthMask(value),
   [GL.DITHER]: enable,
   [GL.FRAGMENT_SHADER_DERIVATIVE_HINT]: hint,
 
-  [GL.CURRENT_PROGRAM]: (gl: WebGLRenderingContext, value) => gl.useProgram(value),
-  [GL.RENDERBUFFER_BINDING]: (gl: WebGLRenderingContext, value) =>
+  [GL.CURRENT_PROGRAM]: (gl: WebGL2RenderingContext, value) => gl.useProgram(value),
+  [GL.RENDERBUFFER_BINDING]: (gl: WebGL2RenderingContext, 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),
+  [GL.TRANSFORM_FEEDBACK_BINDING]: (gl: WebGL2RenderingContext, value) =>
+    gl.bindTransformFeedback?.(GL.TRANSFORM_FEEDBACK, value),
+  [GL.VERTEX_ARRAY_BINDING]: (gl: WebGL2RenderingContext, value) => gl.bindVertexArray(value),
   // NOTE: FRAMEBUFFER_BINDING and DRAW_FRAMEBUFFER_BINDING(WebGL2) refer same state.
   [GL.FRAMEBUFFER_BINDING]: bindFramebuffer,
   [GL.READ_FRAMEBUFFER_BINDING]: bindFramebuffer,
@@ -173,9 +166,9 @@ export const GL_PARAMETER_SETTERS = {
   [GL.PIXEL_PACK_BUFFER_BINDING]: bindBuffer,
   [GL.PIXEL_UNPACK_BUFFER_BINDING]: bindBuffer,
 
-  [GL.FRONT_FACE]: (gl: WebGLRenderingContext, value) => gl.frontFace(value),
+  [GL.FRONT_FACE]: (gl: WebGL2RenderingContext, value) => gl.frontFace(value),
   [GL.GENERATE_MIPMAP_HINT]: hint,
-  [GL.LINE_WIDTH]: (gl: WebGLRenderingContext, value) => gl.lineWidth(value),
+  [GL.LINE_WIDTH]: (gl: WebGL2RenderingContext, value) => gl.lineWidth(value),
   [GL.POLYGON_OFFSET_FILL]: enable,
   [GL.POLYGON_OFFSET_FACTOR]: 'polygonOffset',
   [GL.POLYGON_OFFSET_UNITS]: 'polygonOffset',
@@ -185,12 +178,13 @@ export const GL_PARAMETER_SETTERS = {
   [GL.SAMPLE_COVERAGE_VALUE]: 'sampleCoverage',
   [GL.SAMPLE_COVERAGE_INVERT]: 'sampleCoverage',
   [GL.SCISSOR_TEST]: enable,
-  [GL.SCISSOR_BOX]: (gl: WebGLRenderingContext, value: [number, number, number, number]) => gl.scissor(...value),
+  [GL.SCISSOR_BOX]: (gl: WebGL2RenderingContext, value: [number, number, number, number]) =>
+    gl.scissor(...value),
   [GL.STENCIL_TEST]: enable,
-  [GL.STENCIL_CLEAR_VALUE]: (gl: WebGLRenderingContext, value) => gl.clearStencil(value),
-  [GL.STENCIL_WRITEMASK]: (gl: WebGLRenderingContext, value) =>
+  [GL.STENCIL_CLEAR_VALUE]: (gl: WebGL2RenderingContext, value) => gl.clearStencil(value),
+  [GL.STENCIL_WRITEMASK]: (gl: WebGL2RenderingContext, value) =>
     gl.stencilMaskSeparate(GL.FRONT, value),
-  [GL.STENCIL_BACK_WRITEMASK]: (gl: WebGLRenderingContext, value) =>
+  [GL.STENCIL_BACK_WRITEMASK]: (gl: WebGL2RenderingContext, value) =>
     gl.stencilMaskSeparate(GL.BACK, value),
   [GL.STENCIL_FUNC]: 'stencilFuncFront',
   [GL.STENCIL_REF]: 'stencilFuncFront',
@@ -204,17 +198,41 @@ 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: WebGLRenderingContext, value: [number, number, number, number]) => gl.viewport(...value),
+  [GL.VIEWPORT]: (gl: WebGL2RenderingContext, value: [number, number, number, number]) =>
+    gl.viewport(...value),
+
+  // WEBGL2 EXTENSIONS
 
-  // WEBGL1 PIXEL PACK/UNPACK MODES
+  // EXT_depth_clamp https://registry.khronos.org/webgl/extensions/EXT_depth_clamp/
+
+  [GL.DEPTH_CLAMP_EXT]: enable,
+
+  // WEBGL_provoking_vertex https://registry.khronos.org/webgl/extensions/WEBGL_provoking_vertex/
+
+  // [GL.PROVOKING_VERTEX_WEBL]: TODO - extension function needed
+
+  // WEBGL_polygon_mode https://registry.khronos.org/webgl/extensions/WEBGL_polygon_mode/
+
+  // POLYGON_MODE_WEBGL  TODO - extension function needed
+  [GL.POLYGON_OFFSET_LINE_WEBGL]: enable,
+
+  // WEBGL_clip_cull_distance https://registry.khronos.org/webgl/extensions/WEBGL_clip_cull_distance/
+
+  [GL.CLIP_DISTANCE0_WEBGL]: enable,
+  [GL.CLIP_DISTANCE1_WEBGL]: enable,
+  [GL.CLIP_DISTANCE2_WEBGL]: enable,
+  [GL.CLIP_DISTANCE3_WEBGL]: enable,
+  [GL.CLIP_DISTANCE4_WEBGL]: enable,
+  [GL.CLIP_DISTANCE5_WEBGL]: enable,
+  [GL.CLIP_DISTANCE6_WEBGL]: enable,
+  [GL.CLIP_DISTANCE7_WEBGL]: enable,
+
+  // PIXEL PACK/UNPACK MODES
   [GL.PACK_ALIGNMENT]: pixelStorei,
   [GL.UNPACK_ALIGNMENT]: pixelStorei,
   [GL.UNPACK_FLIP_Y_WEBGL]: pixelStorei,
   [GL.UNPACK_PREMULTIPLY_ALPHA_WEBGL]: pixelStorei,
   [GL.UNPACK_COLORSPACE_CONVERSION_WEBGL]: pixelStorei,
-
-  // WEBGL2 PIXEL PACK/UNPACK MODES
-  // RASTERIZER_DISCARD ...
   [GL.PACK_ROW_LENGTH]: pixelStorei,
   [GL.PACK_SKIP_PIXELS]: pixelStorei,
   [GL.PACK_SKIP_ROWS]: pixelStorei,
@@ -225,85 +243,97 @@ export const GL_PARAMETER_SETTERS = {
   [GL.UNPACK_SKIP_IMAGES]: pixelStorei,
 
   // Function-style setters
-  framebuffer: (gl: WebGLRenderingContext, framebuffer) => {
+  framebuffer: (gl: WebGL2RenderingContext, 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: 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;
+  blend: (gl: WebGL2RenderingContext, value) =>
+    value ? gl.enable(GL.BLEND) : gl.disable(GL.BLEND),
+  blendColor: (gl: WebGL2RenderingContext, value: [number, number, number, number]) =>
+    gl.blendColor(...value),
+  blendEquation: (gl: WebGL2RenderingContext, args: number | [number, number]) => {
+    const separateModes = typeof args === 'number' ? ([args, args] as [number, number]) : args;
     gl.blendEquationSeparate(...separateModes);
   },
-  blendFunc: (gl: WebGLRenderingContext, args: [number, number] | [number, number, number, number]) => {
-    const separateFuncs = args?.length === 2 ? [...args, ...args] as [number, number, number, number] : args;
+  blendFunc: (
+    gl: WebGL2RenderingContext,
+    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: WebGLRenderingContext, value: [number, number, number, number]) => gl.clearColor(...value),
-  clearDepth: (gl: WebGLRenderingContext, value) => gl.clearDepth(value),
-  clearStencil: (gl: WebGLRenderingContext, value) => gl.clearStencil(value),
+  clearColor: (gl: WebGL2RenderingContext, value: [number, number, number, number]) =>
+    gl.clearColor(...value),
+  clearDepth: (gl: WebGL2RenderingContext, value) => gl.clearDepth(value),
+  clearStencil: (gl: WebGL2RenderingContext, value) => gl.clearStencil(value),
 
-  colorMask: (gl: WebGLRenderingContext, value: [boolean, boolean, boolean, boolean]) => gl.colorMask(...value),
+  colorMask: (gl: WebGL2RenderingContext, value: [boolean, boolean, boolean, boolean]) =>
+    gl.colorMask(...value),
 
-  cull: (gl: WebGLRenderingContext, value) =>
+  cull: (gl: WebGL2RenderingContext, value) =>
     value ? gl.enable(GL.CULL_FACE) : gl.disable(GL.CULL_FACE),
-  cullFace: (gl: WebGLRenderingContext, value) => gl.cullFace(value),
+  cullFace: (gl: WebGL2RenderingContext, value) => gl.cullFace(value),
 
-  depthTest: (gl: WebGLRenderingContext, value) =>
+  depthTest: (gl: WebGL2RenderingContext, 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),
+  depthFunc: (gl: WebGL2RenderingContext, value) => gl.depthFunc(value),
+  depthMask: (gl: WebGL2RenderingContext, value) => gl.depthMask(value),
+  depthRange: (gl: WebGL2RenderingContext, value: [number, number]) => gl.depthRange(...value),
 
-  dither: (gl: WebGLRenderingContext, value) =>
+  dither: (gl: WebGL2RenderingContext, value) =>
     value ? gl.enable(GL.DITHER) : gl.disable(GL.DITHER),
 
-  derivativeHint: (gl: WebGLRenderingContext, value) => {
+  derivativeHint: (gl: WebGL2RenderingContext, value) => {
     // gl1: 'OES_standard_derivatives'
     gl.hint(GL.FRAGMENT_SHADER_DERIVATIVE_HINT, value);
   },
 
-  frontFace: (gl: WebGLRenderingContext, value) => gl.frontFace(value),
+  frontFace: (gl: WebGL2RenderingContext, value) => gl.frontFace(value),
 
-  mipmapHint: (gl: WebGLRenderingContext, value) => gl.hint(GL.GENERATE_MIPMAP_HINT, value),
+  mipmapHint: (gl: WebGL2RenderingContext, value) => gl.hint(GL.GENERATE_MIPMAP_HINT, value),
 
-  lineWidth: (gl: WebGLRenderingContext, value) => gl.lineWidth(value),
+  lineWidth: (gl: WebGL2RenderingContext, value) => gl.lineWidth(value),
 
-  polygonOffsetFill: (gl: WebGLRenderingContext, value) =>
+  polygonOffsetFill: (gl: WebGL2RenderingContext, value) =>
     value ? gl.enable(GL.POLYGON_OFFSET_FILL) : gl.disable(GL.POLYGON_OFFSET_FILL),
-  polygonOffset: (gl: WebGLRenderingContext, value: [number, number]) => gl.polygonOffset(...value),
+  polygonOffset: (gl: WebGL2RenderingContext, value: [number, number]) =>
+    gl.polygonOffset(...value),
 
-  sampleCoverage: (gl: WebGLRenderingContext, value: [number, boolean?]) => gl.sampleCoverage(...value),
+  sampleCoverage: (gl: WebGL2RenderingContext, value: [number, boolean?]) =>
+    gl.sampleCoverage(...value),
 
-  scissorTest: (gl: WebGLRenderingContext, value) =>
+  scissorTest: (gl: WebGL2RenderingContext, value) =>
     value ? gl.enable(GL.SCISSOR_TEST) : gl.disable(GL.SCISSOR_TEST),
-  scissor: (gl: WebGLRenderingContext, value: [number, number, number, number]) => gl.scissor(...value),
+  scissor: (gl: WebGL2RenderingContext, value: [number, number, number, number]) =>
+    gl.scissor(...value),
 
-  stencilTest: (gl: WebGLRenderingContext, value) =>
+  stencilTest: (gl: WebGL2RenderingContext, value) =>
     value ? gl.enable(GL.STENCIL_TEST) : gl.disable(GL.STENCIL_TEST),
-  stencilMask: (gl: WebGLRenderingContext, value) => {
+  stencilMask: (gl: WebGL2RenderingContext, value) => {
     value = isArray(value) ? value : [value, value];
     const [mask, backMask] = value;
     gl.stencilMaskSeparate(GL.FRONT, mask);
     gl.stencilMaskSeparate(GL.BACK, backMask);
   },
-  stencilFunc: (gl: WebGLRenderingContext, args) => {
+  stencilFunc: (gl: WebGL2RenderingContext, 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: WebGLRenderingContext, args) => {
+  stencilOp: (gl: WebGL2RenderingContext, 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: WebGLRenderingContext, value: [number, number, number, number]) => gl.viewport(...value)
+  viewport: (gl: WebGL2RenderingContext, value: [number, number, number, number]) =>
+    gl.viewport(...value)
 };
 
 function getValue(glEnum, values, cache) {
@@ -312,50 +342,50 @@ function getValue(glEnum, values, cache) {
 
 // COMPOSITE_WEBGL_PARAMETER_
 export const GL_COMPOSITE_PARAMETER_SETTERS = {
-  blendEquation: (gl: WebGLRenderingContext, values, cache) =>
+  blendEquation: (gl: WebGL2RenderingContext, values, cache) =>
     gl.blendEquationSeparate(
       getValue(GL.BLEND_EQUATION_RGB, values, cache),
       getValue(GL.BLEND_EQUATION_ALPHA, values, cache)
     ),
-  blendFunc: (gl: WebGLRenderingContext, values, cache) =>
+  blendFunc: (gl: WebGL2RenderingContext, 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: WebGLRenderingContext, values, cache) =>
+  polygonOffset: (gl: WebGL2RenderingContext, values, cache) =>
     gl.polygonOffset(
       getValue(GL.POLYGON_OFFSET_FACTOR, values, cache),
       getValue(GL.POLYGON_OFFSET_UNITS, values, cache)
     ),
-  sampleCoverage: (gl: WebGLRenderingContext, values, cache) =>
+  sampleCoverage: (gl: WebGL2RenderingContext, values, cache) =>
     gl.sampleCoverage(
       getValue(GL.SAMPLE_COVERAGE_VALUE, values, cache),
       getValue(GL.SAMPLE_COVERAGE_INVERT, values, cache)
     ),
-  stencilFuncFront: (gl: WebGLRenderingContext, values, cache) =>
+  stencilFuncFront: (gl: WebGL2RenderingContext, 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: WebGLRenderingContext, values, cache) =>
+  stencilFuncBack: (gl: WebGL2RenderingContext, 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: WebGLRenderingContext, values, cache) =>
+  stencilOpFront: (gl: WebGL2RenderingContext, 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: WebGLRenderingContext, values, cache) =>
+  stencilOpBack: (gl: WebGL2RenderingContext, values, cache) =>
     gl.stencilOpSeparate(
       GL.BACK,
       getValue(GL.STENCIL_BACK_FAIL, values, cache),
@@ -589,7 +619,7 @@ export const GL_HOOKED_SETTERS = {
 
 // GETTER TABLE - FOR READING OUT AN ENTIRE CONTEXT
 
-const isEnabled = (gl: WebGLRenderingContext, key) => gl.isEnabled(key);
+const isEnabled = (gl: WebGL2RenderingContext, key) => gl.isEnabled(key);
 
 // Exceptions for any keys that cannot be queried by gl.getParameters
 export const GL_PARAMETER_GETTERS = {
@@ -602,8 +632,6 @@ export const GL_PARAMETER_GETTERS = {
   [GL.SAMPLE_COVERAGE]: isEnabled,
   [GL.SCISSOR_TEST]: isEnabled,
   [GL.STENCIL_TEST]: isEnabled,
-
-  // WebGL 2
   [GL.RASTERIZER_DISCARD]: isEnabled
 };
 

package/src/context/state-tracker/deep-array-equal.ts

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 /** deeply compare two arrays */

package/src/context/state-tracker/track-context-state.ts

@@ -1,10 +1,15 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 // Support for listening to context state changes and intercepting state queries
 // NOTE: this system does not handle buffer bindings
 import {assert} from '@luma.gl/core';
-import {GL_PARAMETER_DEFAULTS, GL_HOOKED_SETTERS, NON_CACHE_PARAMETERS} from '../parameters/webgl-parameter-tables';
+import {
+  GL_PARAMETER_DEFAULTS,
+  GL_HOOKED_SETTERS,
+  NON_CACHE_PARAMETERS
+} from '../parameters/webgl-parameter-tables';
 import {setGLParameters, getGLParameters} from '../parameters/unified-parameter-api';
 import {deepArrayEqual} from './deep-array-equal';
 
@@ -12,7 +17,7 @@ import {deepArrayEqual} from './deep-array-equal';
 
 /* eslint-disable no-shadow */
 class GLState {
-  gl: WebGLRenderingContext;
+  gl: WebGL2RenderingContext;
   program: unknown = null;
   stateStack: object[] = [];
   enable = true;
@@ -20,7 +25,7 @@ class GLState {
   log;
 
   constructor(
-    gl: WebGLRenderingContext,
+    gl: WebGL2RenderingContext,
     {
       copyState = false, // Copy cache from params (slow) or initialize from WebGL defaults (fast)
       log = () => {} // Logging function, called when gl parameter change calls are actually issued
@@ -57,7 +62,8 @@ class GLState {
     let valueChanged = false;
     let oldValue; // = undefined
 
-    const oldValues: {[key: number | string]: any} | null = this.stateStack.length > 0 ? this.stateStack[this.stateStack.length - 1] : null;
+    const oldValues: {[key: number | string]: any} | null =
+      this.stateStack.length > 0 ? this.stateStack[this.stateStack.length - 1] : null;
 
     for (const key in values) {
       assert(key !== undefined);
@@ -84,7 +90,7 @@ class GLState {
   }
 }
 
-function getContextState(gl: WebGLRenderingContext): GLState {
+function getContextState(gl: WebGL2RenderingContext): GLState {
   // @ts-expect-error
   return gl.state as GLState;
 }
@@ -100,13 +106,13 @@ function getContextState(gl: WebGLRenderingContext): GLState {
  * temporarily modifying, and then restoring state.
  */
 export function trackContextState(
-  gl: WebGLRenderingContext,
+  gl: WebGL2RenderingContext,
   options?: {
     enable?: boolean;
     copyState?: boolean;
     log?: any;
   }
-): WebGLRenderingContext {
+): WebGL2RenderingContext {
   const {enable = true, copyState} = options;
   assert(copyState !== undefined);
   // @ts-expect-error
@@ -143,7 +149,7 @@ export function trackContextState(
 /**
  * Saves current WebGL context state onto an internal per-context stack
  */
-export function pushContextState(gl: WebGLRenderingContext): void {
+export function pushContextState(gl: WebGL2RenderingContext): void {
   let glState = getContextState(gl);
   if (!glState) {
     trackContextState(gl, {copyState: false});
@@ -152,11 +158,10 @@ export function pushContextState(gl: WebGLRenderingContext): void {
   glState.push();
 }
 
-
 /**
  * Restores previously saved WebGL context state
  */
-export function popContextState(gl: WebGLRenderingContext): void {
+export function popContextState(gl: WebGL2RenderingContext): void {
   const glState = getContextState(gl);
   assert(glState);
   glState.pop();
@@ -165,13 +170,13 @@ export function popContextState(gl: WebGLRenderingContext): void {
 // HELPER FUNCTIONS - INSTALL GET/SET INTERCEPTORS (SPYS) ON THE CONTEXT
 
 /**
-// Overrides a WebGLRenderingContext state "getter" function
+// Overrides a WebGL2RenderingContext state "getter" function
 // to return values directly from cache
  * @param gl
  * @param functionName
  */
-function installGetterOverride(gl: WebGLRenderingContext, functionName: string) {
-  // Get the original function from the WebGLRenderingContext
+function installGetterOverride(gl: WebGL2RenderingContext, functionName: string) {
+  // Get the original function from the WebGL2RenderingContext
   const originalGetterFunc = gl[functionName].bind(gl);
 
   // Wrap it with a spy so that we can update our state cache when it gets called
@@ -187,12 +192,12 @@ function installGetterOverride(gl: WebGLRenderingContext, functionName: string)
       glState.cache[pname] = originalGetterFunc(pname);
     }
 
-    // Optionally call the original function to do a "hard" query from the WebGLRenderingContext
+    // Optionally call the original function to do a "hard" query from the WebGL2RenderingContext
     return glState.enable
       ? // Call the getter the params so that it can e.g. serve from a cache
-      glState.cache[pname]
-      : // Optionally call the original function to do a "hard" query from the WebGLRenderingContext
-      originalGetterFunc(pname);
+        glState.cache[pname]
+      : // Optionally call the original function to do a "hard" query from the WebGL2RenderingContext
+        originalGetterFunc(pname);
   };
 
   // Set the name of this anonymous function to help in debugging and profiling
@@ -203,7 +208,7 @@ function installGetterOverride(gl: WebGLRenderingContext, functionName: string)
 }
 
 /**
-// Overrides a WebGLRenderingContext state "setter" function
+// Overrides a WebGL2RenderingContext state "setter" function
 // to call a setter spy before the actual setter. Allows us to keep a cache
 // updated with a copy of the WebGL context state.
  * @param gl
@@ -211,9 +216,10 @@ function installGetterOverride(gl: WebGLRenderingContext, functionName: string)
  * @param setter
  * @returns
  */
-function installSetterSpy(gl: WebGLRenderingContext, functionName: string, setter: Function) {
-  // Get the original function from the WebGLRenderingContext
+function installSetterSpy(gl: WebGL2RenderingContext, functionName: string, setter: Function) {
+  // Get the original function from the WebGL2RenderingContext
   if (!gl[functionName]) {
+    // TODO - remove?
     // This could happen if we try to intercept WebGL2 method on a WebGL1 context
     return;
   }
@@ -228,7 +234,7 @@ function installSetterSpy(gl: WebGLRenderingContext, functionName: string, sette
     // eslint-disable-next-line @typescript-eslint/unbound-method
     const {valueChanged, oldValue} = setter(glState._updateCache, ...params);
 
-    // Call the original WebGLRenderingContext func to make sure the context actually gets updated
+    // Call the original WebGL2RenderingContext func to make sure the context actually gets updated
     if (valueChanged) {
       originalSetterFunc(...params);
     }
@@ -248,7 +254,7 @@ function installSetterSpy(gl: WebGLRenderingContext, functionName: string, sette
   });
 }
 
-function installProgramSpy(gl: WebGLRenderingContext): void {
+function installProgramSpy(gl: WebGL2RenderingContext): void {
   const originalUseProgram = gl.useProgram.bind(gl);
 
   gl.useProgram = function useProgramLuma(handle) {

package/src/context/state-tracker/with-parameters.ts

@@ -1,8 +1,7 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {Device} from '@luma.gl/core';
-import {WebGLDevice} from '../../adapter/webgl-device';
 import {GLParameters, setGLParameters} from '../parameters/unified-parameter-api';
 import {pushContextState, popContextState} from './track-context-state';
 
@@ -14,13 +13,14 @@ import {pushContextState, popContextState} from './track-context-state';
  * - Restores parameters
  * - Returns the return value of the supplied function
  */
-export function withGLParameters(device: Device | WebGLRenderingContext, parameters: GLParameters & {nocatch?: boolean}, func: any): any {
-  const webglDevice = WebGLDevice.attach(device);
-  const gl = webglDevice.gl;
-
+export function withGLParameters(
+  gl: WebGL2RenderingContext,
+  parameters: GLParameters & {nocatch?: boolean},
+  func: any
+): any {
   if (isObjectEmpty(parameters)) {
     // Avoid setting state if no parameters provided. Just call and return
-    return func(device);
+    return func(gl);
   }
 
   const {nocatch = true} = parameters;