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

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

@@ -81,7 +81,7 @@ export const WEBGL2_CONTEXT_POLYFILLS = {
     getQueryParameter(handle, pname) {
       return this.getQueryObject(handle, pname);
     },
-    getQueryObject: () => {}
+    getQueryObject: (handle: unknown, pname: unknown) => {}
   }
 };
 

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

@@ -1,6 +1,6 @@
 
 /** deeply compare two arrays */
-export function deepArrayEqual(x, y): boolean {
+export function deepArrayEqual(x: any, y: any): boolean {
   if (x === y) {
     return true;
   }

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

@@ -10,14 +10,14 @@ import {deepArrayEqual} from './deep-array-equal';
 /* eslint-disable no-shadow */
 class GLState {
   gl: WebGLRenderingContext;
-  program = null;
-  stateStack = [];
+  program: unknown = null;
+  stateStack: object[] = [];
   enable = true;
-  cache;
+  cache: Record<string, any>;
   log;
 
   constructor(
-    gl,
+    gl: WebGLRenderingContext,
     {
       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
@@ -50,11 +50,11 @@ class GLState {
    * @param values
    * @returns
    */
-  _updateCache(values) {
+  _updateCache(values: {[key: number | string]: any}) {
     let valueChanged = false;
     let oldValue; // = undefined
 
-    const oldValues = this.stateStack.length > 0 && this.stateStack[this.stateStack.length - 1];
+    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);
@@ -81,6 +81,11 @@ class GLState {
   }
 }
 
+function getContextState(gl: WebGLRenderingContext): GLState {
+  // @ts-expect-error
+  return gl.state as GLState;
+}
+
 // PUBLIC API
 
 /**
@@ -127,8 +132,8 @@ class GLState {
     installGetterOverride(gl, 'isEnabled');
   }
 
-  // @ts-expect-error
-  gl.state.enable = enable;
+  const glState = getContextState(gl);
+  glState.enable = enable;
 
   return gl;
 }
@@ -137,12 +142,12 @@ class GLState {
  * Saves current WebGL context state onto an internal per-context stack
  */
  export function pushContextState(gl: WebGLRenderingContext): void {
-  // @ts-expect-error
-  if (!gl.state) {
+  let glState = getContextState(gl);
+  if (!glState) {
     trackContextState(gl, {copyState: false});
+    glState = getContextState(gl);
   }
-  // @ts-expect-error
-  gl.state.push();
+  glState.push();
 }
 
 
@@ -150,10 +155,9 @@ class GLState {
  * Restores previously saved WebGL context state
  */
 export function popContextState(gl: WebGLRenderingContext): void {
-  // @ts-expect-error
-  assert(gl.state);
-  // @ts-expect-error
-  gl.state.pop();
+  const glState = getContextState(gl);
+  assert(glState);
+  glState.pop();
 }
 
 // HELPER FUNCTIONS - INSTALL GET/SET INTERCEPTORS (SPYS) ON THE CONTEXT
@@ -164,7 +168,7 @@ export function popContextState(gl: WebGLRenderingContext): void {
  * @param gl
  * @param functionName
  */
-function installGetterOverride(gl, functionName) {
+function installGetterOverride(gl: WebGLRenderingContext, functionName: string) {
   // Get the original function from the WebGLRenderingContext
   const originalGetterFunc = gl[functionName].bind(gl);
 
@@ -175,15 +179,16 @@ function installGetterOverride(gl, functionName) {
       return originalGetterFunc(pname);
     }
 
-    if (!(pname in gl.state.cache)) {
+    const glState = getContextState(gl);
+    if (!(pname in glState.cache)) {
       // WebGL limits are not prepopulated in the cache, call the original getter when first queried.
-      gl.state.cache[pname] = originalGetterFunc(pname);
+      glState.cache[pname] = originalGetterFunc(pname);
     }
 
     // Optionally call the original function to do a "hard" query from the WebGLRenderingContext
-    return gl.state.enable
+    return glState.enable
       ? // Call the getter the params so that it can e.g. serve from a cache
-        gl.state.cache[pname]
+        glState.cache[pname]
       : // Optionally call the original function to do a "hard" query from the WebGLRenderingContext
         originalGetterFunc(pname);
   };
@@ -204,19 +209,21 @@ function installGetterOverride(gl, functionName) {
  * @param setter
  * @returns
  */
-function installSetterSpy(gl, functionName, setter) {
+function installSetterSpy(gl: WebGLRenderingContext, functionName: string, setter) {
   // Get the original function from the WebGLRenderingContext
   if (!gl[functionName]) {
     // This could happen if we try to intercept WebGL2 method on a WebGL1 context
     return;
   }
+
   const originalSetterFunc = gl[functionName].bind(gl);
 
   // Wrap it with a spy so that we can update our state cache when it gets called
   gl[functionName] = function set(...params) {
     // Update the value
     // Call the setter with the state cache and the params so that it can store the parameters
-    const {valueChanged, oldValue} = setter(gl.state._updateCache, ...params);
+    const glState = getContextState(gl);
+    const {valueChanged, oldValue} = setter(glState._updateCache, ...params);
 
     // Call the original WebGLRenderingContext func to make sure the context actually gets updated
     if (valueChanged) {
@@ -238,13 +245,14 @@ function installSetterSpy(gl, functionName, setter) {
   });
 }
 
-function installProgramSpy(gl) {
+function installProgramSpy(gl: WebGLRenderingContext): void {
   const originalUseProgram = gl.useProgram.bind(gl);
 
   gl.useProgram = function useProgramLuma(handle) {
-    if (gl.state.program !== handle) {
+    const glState = getContextState(gl);
+    if (glState.program !== handle) {
       originalUseProgram(handle);
-      gl.state.program = handle;
+      glState.program = handle;
     }
   };
 }

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

@@ -1,3 +1,5 @@
+import type {Device} from '@luma.gl/api';
+import {WebGLDevice} from '../..';
 import {GLParameters, setParameters} from '../parameters/unified-parameter-api';
 import {pushContextState, popContextState} from './track-context-state';
 
@@ -9,10 +11,13 @@ import {pushContextState, popContextState} from './track-context-state';
  * - Restores parameters
  * - Returns the return value of the supplied function
  */
- export function withParameters(gl: WebGLRenderingContext, parameters: GLParameters & {nocatch?: boolean}, func: any): any {
+ export function withParameters(device: Device | WebGLRenderingContext, parameters: GLParameters & {nocatch?: boolean}, func: any): any {
+  const webglDevice = WebGLDevice.attach(device);
+  const gl = webglDevice.gl;
+
   if (isObjectEmpty(parameters)) {
     // Avoid setting state if no parameters provided. Just call and return
-    return func(gl);
+    return func(device);
   }
 
   const {nocatch = true} = parameters;

package/src/index.ts

@@ -5,71 +5,44 @@
 // Higher level abstractions can be built on these classes
 
 // Initialize any global state
-import './init';
+import '@luma.gl/api';
+import './init'
+
+// Types
+export type {WebGLLimits} from './adapter/device-helpers/device-limits';
+
+export {registerHeadlessGL} from './context/context/create-headless-context';
+
+// WebGL adapter classes
+export {default as WebGLDevice} from './adapter/webgl-device';
+export {default as WebGLCanvasContext} from './adapter/webgl-canvas-context';
+
+// WebGL Resource classes
+export {default as WEBGLResource, default as WebGLResource} from './adapter/objects/webgl-resource';
+export {default as WEBGLBuffer} from './adapter/resources/webgl-buffer';
+export {default as WEBGLTexture} from './adapter/resources/webgl-texture';
+// export {default as WEBGLExternalTexture} from './adapter/resources/webgl-external-texture';
+export {default as WEBGLShader} from './adapter/resources/webgl-shader';
+export {default as WEBGLSampler} from './adapter/resources/webgl-sampler';
+export {default as WEBGLFramebuffer} from './adapter/resources/webgl-framebuffer';
+
+export {default as WEBGLRenderPipeline} from './adapter/resources/webgl-render-pipeline';
+// export {default as WEBGLComputePipeline} from './adapter/resources/webgl-compute-pipeline';
+export {default as WEBGLCommandEncoder} from './adapter/resources/webgl-command-encoder';
+export {default as WEBGLRenderPass} from './adapter/resources/webgl-render-pass';
+//export {default as WEBGLComputePass} from './adapter/resources/webgl-compute-pass';
+
+// non-api resources
+export type {RenderbufferProps} from './adapter/objects/webgl-renderbuffer';
+export {default as WEBGLRenderbuffer} from './adapter/objects/webgl-renderbuffer';
+export {default as WEBGLVertexArrayObject} from './adapter/objects/webgl-vertex-array-object';
+
+// WebGL adapter classes (Legacy, will be moved to gltools)
+export {default as Accessor} from './classic/accessor';
+export type {AccessorObject} from './types';
+export type {ClassicBufferProps, ClassicBufferProps as BufferProps} from './classic/buffer';
+export {default as ClassicBuffer, default as Buffer} from './classic/buffer';
 
-// export type {WebGLDeviceProps, WebGLDeviceInfo, WebGPUDeviceLimits} from './lib/webgl-device';
-export type {WebGLDeviceProps} from './adapter/webgl-device';
-export {default as WebGLDevice, getWebGLDevice} from './adapter/webgl-device';
-
-// UTILS
-export {requestAnimationFrame, cancelAnimationFrame} from './webgl-utils/request-animation-frame';
-
-// WebGL Functions
-export {cloneTextureFrom} from './webgl-utils/texture-utils';
-export {getKeyValue, getKey} from './webgl-utils/constants-to-keys';
-
-// WebGL Helper Classes
-export {default as Accessor} from './classes/accessor';
-
-// WebGL1 classes
-export type {BufferProps} from '@luma.gl/api';
-export {default as Buffer} from './classes/webgl-buffer';
-export type {Texture2DProps} from './classes/texture-2d';
-export {default as Texture2D} from './classes/texture-2d';
-export type {TextureCubeProps} from './classes/texture-cube';
-export {default as TextureCube} from './classes/texture-cube';
-
-export type {ProgramProps} from './classes/program';
-export {default as Program} from './classes/program';
-export type {FramebufferProps} from './classes/framebuffer';
-export {default as Framebuffer} from './classes/framebuffer';
-export type {RenderbufferProps} from './classes/renderbuffer';
-export {default as Renderbuffer} from './classes/renderbuffer';
-
-// Classic luma.gl classes (For backwards compatibility)
-export type {ShaderProps} from './classes/shader';
-export {Shader, VertexShader, FragmentShader} from './classes/shader';
-
-export {clear, clearBuffer} from './classes/clear';
-
-// Copy and Blit
-export {
-  readPixelsToArray,
-  readPixelsToBuffer,
-  copyToDataUrl,
-  copyToImage,
-  copyToTexture,
-  blit
-} from './classes/copy-and-blit';
-
-// WebGL2 classes & Extensions
-export type {QueryProps} from './classes/query';
-export {default as Query} from './classes/query';
-export type {Texture3DProps} from './classes/texture-3d';
-export {default as Texture3D} from './classes/texture-3d';
-export type {TransformFeedbackProps} from './classes/transform-feedback';
-export {default as TransformFeedback} from './classes/transform-feedback';
-export type {VertexArrayObjectProps} from './classes/vertex-array-object';
-export {default as VertexArrayObject} from './classes/vertex-array-object';
-export type {VertexArrayProps} from './classes/vertex-array';
-export {default as VertexArray} from './classes/vertex-array';
-export {default as UniformBufferLayout} from './classes/uniform-buffer-layout';
-
-export {setDeviceParameters} from './adapter/converters/set-device-parameters';
-
-// experimental WebGL exports
-
-// UTILS
 export {
   isWebGL,
   isWebGL2,
@@ -83,7 +56,9 @@ export {cssToDeviceRatio, cssToDevicePixels} from './context/context/device-pixe
 
 // Unified parameter API
 
-export type {GLParameters} from './context/parameters/webgl-parameters';
+export {setDeviceParameters, withDeviceParameters} from './adapter/converters/device-parameters';
+
+export type {GLParameters} from './types/webgl';
 export {
   getParameters,
   setParameters,
@@ -104,41 +79,6 @@ export {
 // Polyfills (supports a subset of WebGL2 APIs on WebGL1 contexts)
 export {polyfillContext} from './context/polyfill/polyfill-context';
 
-// INTERNAL
-export {parseUniformName, getUniformSetter} from './classes/uniforms';
-export {getDebugTableForUniforms} from './debug/debug-uniforms';
-export {getDebugTableForVertexArray} from './debug/debug-vertex-array';
-export {getDebugTableForProgramConfiguration} from './debug/debug-program-configuration';
-
 // HELPERS - EXPERIMENTAL
-export {getProgramBindings} from './helpers/get-program-bindings';
-
-// DEPRECATED
-
-// Deprecated re-exports
-export {lumaStats} from './init';
-export {log, assert, uid, isObjectEmpty} from '@luma.gl/api';
-export {setPathPrefix, loadFile, loadImage} from '@luma.gl/api';
-
-// GLTOOLS
-export type {GLContextOptions} from './_deprecated/context-api';
-export {
-  createGLContext,
-  instrumentGLContext,
-  resizeGLContext,
-  hasFeature,
-  hasFeatures,
-  getFeatures,
-  getContextInfo,
-  getGLContextInfo,
-  getContextLimits,
-  getContextDebugInfo
-} from './_deprecated/context-api';
-
-// Features
-export {DEPRECATED_FEATURES as FEATURES} from './_deprecated/features';
-
-// REMOVED in v8.7
-// getShaderInfo,
-// getShaderName
-// getShaderVersion
+export {getShaderLayout, getProgramBindings} from './adapter/helpers/get-shader-layout';
+export {_checkFloat32ColorAttachment} from './adapter/converters/texture-formats';

package/src/init.ts

@@ -1,48 +1,4 @@
-import {log} from '@luma.gl/api';
-import {isBrowser} from '@probe.gl/env';
-import {luma, lumaStats} from '@luma.gl/api';
+import {luma} from '@luma.gl/api';
 import WebGLDevice from './adapter/webgl-device';
 
-// Version detection using babel plugin
-// @ts-expect-error
-const VERSION = typeof __VERSION__ !== 'undefined' ? __VERSION__ : 'untranspiled source';
-
-const STARTUP_MESSAGE = 'set luma.log.level=1 (or higher) to trace rendering';
-// Assign luma.log.level in console to control logging: \
-// 0: none, 1: minimal, 2: verbose, 3: attribute/uniforms, 4: gl logs
-// luma.log.break[], set to gl funcs, luma.log.profile[] set to model names`;
-
-if (globalThis.luma && globalThis.luma.VERSION !== VERSION) {
-  throw new Error(`luma.gl - multiple VERSIONs detected: ${globalThis.luma.VERSION} vs ${VERSION}`);
-}
-
-if (!globalThis.luma) {
-  luma.registerDevices([WebGLDevice]);
-
-  if (isBrowser()) {
-    log.log(1, `luma.gl ${VERSION} - ${STARTUP_MESSAGE}`)();
-  }
-
-  globalThis.luma = globalThis.luma || {
-    VERSION,
-    version: VERSION,
-    log,
-
-    // A global stats object that various components can add information to
-    // E.g. see webgl/resource.js
-    stats: lumaStats,
-
-    // Keep some luma globals in a sub-object
-    // This allows us to dynamically detect if certain modules have been
-    // included (such as IO and headless) and enable related functionality,
-    // without unconditionally requiring and thus bundling big dependencies
-    // into the app.
-    globals: {
-      modules: {},
-      nodeIO: {}
-    }
-  };
-}
-
-export {lumaStats};
-export default globalThis.luma;
+luma.registerDevices([WebGLDevice]);

package/src/types/webgl.ts

@@ -0,0 +1,284 @@
+import type {NumberArray} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+
+type Framebuffer = any;
+
+export type GLDrawMode =
+  | GL.POINTS
+  | GL.LINES
+  | GL.LINE_STRIP
+  | GL.LINE_LOOP
+  | GL.TRIANGLES
+  | GL.TRIANGLE_STRIP
+  | GL.TRIANGLE_FAN;
+
+export type GLPrimitive = GL.POINTS | GL.LINES | GL.TRIANGLES;
+
+export type GLType =
+  | GL.FLOAT
+  | GL.UNSIGNED_SHORT
+  | GL.UNSIGNED_INT
+  | GL.UNSIGNED_BYTE
+  | GL.BYTE
+  | GL.SHORT
+  | GL.INT;
+
+export type GLPackedType =
+  | GL.UNSIGNED_SHORT_5_6_5
+  | GL.UNSIGNED_SHORT_4_4_4_4
+  | GL.UNSIGNED_SHORT_5_5_5_1;
+
+export type GLUniformType = GLSamplerType | GLCompositeType;
+
+export type GLSamplerType =
+  | GL.SAMPLER_2D
+  | GL.SAMPLER_CUBE
+  | GL.SAMPLER_3D
+  | GL.SAMPLER_2D_SHADOW
+  | GL.SAMPLER_2D_ARRAY
+  | GL.SAMPLER_2D_ARRAY_SHADOW
+  | GL.SAMPLER_CUBE_SHADOW
+  | GL.INT_SAMPLER_2D
+  | GL.INT_SAMPLER_3D
+  | GL.INT_SAMPLER_CUBE
+  | GL.INT_SAMPLER_2D_ARRAY
+  | GL.UNSIGNED_INT_SAMPLER_2D
+  | GL.UNSIGNED_INT_SAMPLER_3D
+  | GL.UNSIGNED_INT_SAMPLER_CUBE
+  | GL.UNSIGNED_INT_SAMPLER_2D_ARRAY;
+
+// Composite types table
+export type GLCompositeType =
+  | GL.FLOAT
+  | GL.FLOAT_VEC2
+  | GL.FLOAT_VEC3
+  | GL.FLOAT_VEC4
+  | GL.INT
+  | GL.INT_VEC2
+  | GL.INT_VEC3
+  | GL.INT_VEC4
+  | GL.UNSIGNED_INT
+  | GL.UNSIGNED_INT_VEC2
+  | GL.UNSIGNED_INT_VEC3
+  | GL.UNSIGNED_INT_VEC4
+  | GL.BOOL
+  | GL.BOOL_VEC2
+  | GL.BOOL_VEC3
+  | GL.BOOL_VEC4
+  | GL.FLOAT_MAT2
+  | GL.FLOAT_MAT2x3
+  | GL.FLOAT_MAT2x4
+  | GL.FLOAT_MAT3x2
+  | GL.FLOAT_MAT3
+  | GL.FLOAT_MAT3x4
+  | GL.FLOAT_MAT4x2
+  | GL.FLOAT_MAT4x3
+  | GL.FLOAT_MAT4;
+
+export type GLFunction =
+  | GL.NEVER
+  | GL.LESS
+  | GL.EQUAL
+  | GL.LEQUAL
+  | GL.GREATER
+  | GL.NOTEQUAL
+  | GL.GEQUAL
+  | GL.ALWAYS;
+
+export type GLBlendEquation =
+  | GL.FUNC_ADD
+  | GL.FUNC_SUBTRACT
+  | GL.FUNC_REVERSE_SUBTRACT
+  | GL.MIN_EXT
+  | GL.MAX_EXT;
+
+export type GLBlendFunction =
+  | GL.ZERO
+  | GL.ONE
+  | GL.SRC_COLOR
+  | GL.ONE_MINUS_SRC_COLOR
+  | GL.DST_COLOR
+  | GL.ONE_MINUS_DST_COLOR
+  | GL.SRC_ALPHA
+  | GL.ONE_MINUS_SRC_ALPHA
+  | GL.DST_ALPHA
+  | GL.ONE_MINUS_DST_ALPHA
+  | GL.CONSTANT_COLOR
+  | GL.ONE_MINUS_CONSTANT_COLOR
+  | GL.CONSTANT_ALPHA
+  | GL.ONE_MINUS_CONSTANT_ALPHA
+  | GL.SRC_ALPHA_SATURATE;
+
+export type GLStencilOp =
+  | GL.KEEP
+  | GL.ZERO
+  | GL.REPLACE
+  | GL.INCR
+  | GL.INCR_WRAP
+  | GL.DECR
+  | GL.DECR_WRAP
+  | GL.INVERT;
+
+/** Parameters for textures and samplers */
+export type GLSamplerParameters = {
+  [GL.TEXTURE_WRAP_S]?: GL.CLAMP_TO_EDGE | GL.REPEAT | GL.MIRRORED_REPEAT;
+  [GL.TEXTURE_WRAP_T]?: GL.CLAMP_TO_EDGE | GL.REPEAT | GL.MIRRORED_REPEAT;
+  [GL.TEXTURE_WRAP_R]?: GL.CLAMP_TO_EDGE | GL.REPEAT | GL.MIRRORED_REPEAT;
+  [GL.TEXTURE_MAG_FILTER]?: GL.NEAREST | GL.LINEAR;
+  [GL.TEXTURE_MIN_FILTER]?:
+    | GL.NEAREST
+    | GL.LINEAR
+    | GL.NEAREST_MIPMAP_NEAREST
+    | GL.NEAREST_MIPMAP_LINEAR
+    | GL.LINEAR_MIPMAP_NEAREST
+    | GL.LINEAR_MIPMAP_LINEAR;
+  [GL.TEXTURE_MIN_LOD]?: number;
+  [GL.TEXTURE_MAX_LOD]?: number;
+  [GL.TEXTURE_COMPARE_FUNC]?: number; // COMPARE_FUNC);
+  [GL.TEXTURE_COMPARE_MODE]?: GL.COMPARE_REF_TO_TEXTURE;
+  [GL.TEXTURE_MAX_ANISOTROPY_EXT]?: number; //
+};
+
+/**
+ * All global WebGL values set by a variety of setter gl.enable ...
+ */
+export type GLValueParameters = {
+  [GL.BLEND]?: boolean;
+  [GL.BLEND_COLOR]?: [number, number, number, number] | NumberArray;
+  [GL.BLEND_EQUATION_RGB]?: GLBlendEquation;
+  [GL.BLEND_EQUATION_ALPHA]?: GLBlendEquation;
+  [GL.BLEND_SRC_RGB]?: GLBlendFunction;
+  [GL.BLEND_DST_RGB]?: GLBlendFunction;
+  [GL.BLEND_SRC_ALPHA]?: GLBlendFunction;
+  [GL.BLEND_DST_ALPHA]?: GLBlendFunction;
+  [GL.COLOR_CLEAR_VALUE]?: [number, number, number, number] | NumberArray;
+  [GL.COLOR_WRITEMASK]?: [boolean, boolean, boolean, boolean] | boolean[];
+  [GL.CULL_FACE]?: boolean;
+  [GL.CULL_FACE_MODE]?: GL.FRONT | GL.BACK | GL.FRONT_AND_BACK;
+  [GL.DEPTH_TEST]?: boolean;
+  [GL.DEPTH_CLEAR_VALUE]?: number;
+  [GL.DEPTH_FUNC]?: GLFunction;
+  [GL.DEPTH_RANGE]?: [number, number] | NumberArray;
+  [GL.DEPTH_WRITEMASK]?: boolean;
+  [GL.DITHER]?: boolean;
+  [GL.FRAGMENT_SHADER_DERIVATIVE_HINT]?: GL.FASTEST | GL.NICEST | GL.DONT_CARE;
+  [GL.CURRENT_PROGRAM]?: WebGLProgram | null;
+  [GL.FRAMEBUFFER_BINDING]?: WebGLFramebuffer | null;
+  [GL.RENDERBUFFER_BINDING]?: WebGLRenderbuffer | null;
+  [GL.TRANSFORM_FEEDBACK_BINDING]?: WebGLTransformFeedback | null;
+  [GL.VERTEX_ARRAY_BINDING]?: WebGLVertexArrayObject | null;
+  [GL.ARRAY_BUFFER_BINDING]?: WebGLBuffer | null;
+  [GL.COPY_READ_BUFFER_BINDING]?: WebGLBuffer | null;
+  [GL.COPY_WRITE_BUFFER_BINDING]?: WebGLBuffer | null;
+  [GL.PIXEL_PACK_BUFFER_BINDING]?: WebGLBuffer | null;
+  [GL.PIXEL_UNPACK_BUFFER_BINDING]?: WebGLBuffer | null;
+  [GL.TEXTURE_BINDING_2D]?: WebGLTexture | null;
+  [GL.TEXTURE_BINDING_2D_ARRAY]?: WebGLTexture | null;
+  [GL.TEXTURE_BINDING_3D]?: WebGLTexture | null;
+  [GL.TEXTURE_BINDING_CUBE_MAP]?: WebGLTexture | null;
+  [GL.FRONT_FACE]?: GL.CW | GL.CCW;
+  [GL.GENERATE_MIPMAP_HINT]?: GL.FASTEST | GL.NICEST | GL.DONT_CARE;
+  [GL.LINE_WIDTH]?: number;
+  [GL.POLYGON_OFFSET_FILL]?: boolean;
+  [GL.POLYGON_OFFSET_FACTOR]?: number;
+  [GL.POLYGON_OFFSET_UNITS]?: number;
+  [GL.SAMPLE_ALPHA_TO_COVERAGE]?: boolean;
+  [GL.SAMPLE_COVERAGE]?: boolean;
+  [GL.RASTERIZER_DISCARD]?: boolean;
+  [GL.SAMPLE_COVERAGE_VALUE]?: number;
+  [GL.SAMPLE_COVERAGE_INVERT]?: boolean;
+  [GL.SCISSOR_TEST]?: boolean;
+  [GL.SCISSOR_BOX]?: [number, number, number, number] | NumberArray;
+  [GL.STENCIL_TEST]?: boolean;
+  [GL.STENCIL_CLEAR_VALUE]?: number;
+  [GL.STENCIL_WRITEMASK]?: number;
+  [GL.STENCIL_BACK_WRITEMASK]?: number;
+  [GL.STENCIL_FUNC]?: GLFunction;
+  [GL.STENCIL_REF]?: GLFunction;
+  [GL.STENCIL_VALUE_MASK]?: GLFunction;
+  [GL.STENCIL_BACK_FUNC]?: GLFunction;
+  [GL.STENCIL_BACK_REF]?: GLFunction;
+  [GL.STENCIL_BACK_VALUE_MASK]?: GLFunction;
+  [GL.STENCIL_FAIL]?: GLStencilOp;
+  [GL.STENCIL_PASS_DEPTH_FAIL]?: GLStencilOp;
+  [GL.STENCIL_PASS_DEPTH_PASS]?: GLStencilOp;
+  [GL.STENCIL_BACK_FAIL]?: GLStencilOp;
+  [GL.STENCIL_BACK_PASS_DEPTH_FAIL]?: GLStencilOp;
+  [GL.STENCIL_BACK_PASS_DEPTH_PASS]?: GLStencilOp;
+  [GL.VIEWPORT]?: [number, number, number, number] | NumberArray;
+
+  // WEBGL1 PIXEL PACK/UNPACK MODES
+  [GL.PACK_ALIGNMENT]?: number;
+  [GL.UNPACK_ALIGNMENT]?: number;
+  [GL.UNPACK_FLIP_Y_WEBGL]?: boolean;
+  [GL.UNPACK_PREMULTIPLY_ALPHA_WEBGL]?: boolean;
+  [GL.UNPACK_COLORSPACE_CONVERSION_WEBGL]?: GL.NONE | GL.BROWSER_DEFAULT_WEBGL;
+
+  // WEBGL2 PIXEL PACK/UNPACK MODES
+  // RASTERIZER_DISCARD ...
+  [GL.PACK_ROW_LENGTH]?: number;
+  [GL.PACK_SKIP_PIXELS]?: number;
+  [GL.PACK_SKIP_ROWS]?: number;
+  [GL.READ_FRAMEBUFFER_BINDING]?: Framebuffer | null;
+  [GL.UNPACK_ROW_LENGTH]?: number;
+  [GL.UNPACK_IMAGE_HEIGHT]?: number;
+  [GL.UNPACK_SKIP_PIXELS]?: number;
+  [GL.UNPACK_SKIP_ROWS]?: number;
+  [GL.UNPACK_SKIP_IMAGES]?: number;
+};
+
+export type GLFunctionParameters = {
+  // Function-style setters
+  framebuffer?: Framebuffer | null;
+  blend?: boolean;
+  blendColor?: [number, number, number, number] | NumberArray;
+  blendEquation?: GLBlendEquation | [GLBlendEquation, GLBlendEquation];
+  blendFunc?:
+    | [GLBlendFunction, GLBlendFunction]
+    | [GLBlendFunction, GLBlendFunction, GLBlendFunction, GLBlendFunction];
+
+  clearColor?: [number, number, number, number] | NumberArray;
+  clearDepth?: number;
+  clearStencil?: number;
+
+  colorMask?: [boolean, boolean, boolean, boolean] | boolean[];
+
+  cull?: boolean;
+  cullFace?: GL.FRONT | GL.BACK | GL.FRONT_AND_BACK;
+
+  depthTest?: boolean;
+  depthFunc?: GLFunction;
+  depthMask?: boolean;
+  depthRange?: [number, number] | NumberArray;
+
+  dither?: boolean;
+
+  derivativeHint?: GL.FASTEST | GL.NICEST | GL.DONT_CARE;
+
+  frontFace?: GL.CW | GL.CCW;
+
+  mipmapHint?: GL.FASTEST | GL.NICEST | GL.DONT_CARE;
+
+  lineWidth?: number;
+
+  polygonOffsetFill?: boolean;
+  polygonOffset?: [number, number];
+
+  sampleCoverage?: [number, boolean];
+
+  scissorTest?: boolean;
+  scissor?: [number, number, number, number] | NumberArray;
+
+  stencilTest?: boolean;
+  stencilMask?: number | [number, number];
+  stencilFunc?:
+    | [GLFunction, number, number]
+    | [GLFunction, number, number, GLFunction, number, number];
+  stencilOp?:
+    | [GLStencilOp, GLStencilOp, GLStencilOp]
+    | [GLStencilOp, GLStencilOp, GLStencilOp, GLStencilOp, GLStencilOp, GLStencilOp];
+  viewport?: [number, number, number, number] | NumberArray;
+};
+
+/** WebGL style parameters object (with both GL constants and function style fields) */
+export type GLParameters = GLValueParameters & GLFunctionParameters;