@luma.gl/webgl 8.6.0-alpha.1 → 8.6.0-alpha.2

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

@@ -0,0 +1,197 @@
+// WebGL parameter types
+import GL from '@luma.gl/constants';
+
+export type TypedArray =
+  | Int8Array
+  | Uint8Array
+  | Int16Array
+  | Uint16Array
+  | Int32Array
+  | Uint32Array
+  | Uint8ClampedArray
+  | Float32Array
+  | Float64Array;
+
+/**
+ * TypeScript type covering all typed arrays and classic arrays consisting of numbers
+ */
+export type NumberArray = number[] | TypedArray;
+
+type Framebuffer = any;
+
+type GL_FUNCTION =
+  GL.NEVER |
+  GL.LESS |
+  GL.EQUAL |
+  GL.LEQUAL |
+  GL.GREATER |
+  GL.NOTEQUAL |
+  GL.GEQUAL |
+  GL.ALWAYS;
+
+type GL_BLEND_EQUATION = GL.FUNC_ADD | GL.FUNC_SUBTRACT | GL.FUNC_REVERSE_SUBTRACT | GL.MIN_EXT | GL.MAX_EXT;
+
+type GL_BLEND_FUNCTION =
+  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;
+
+type GL_STENCIL_OP =
+  GL.KEEP |
+  GL.ZERO |
+  GL.REPLACE |
+  GL.INCR |
+  GL.INCR_WRAP |
+  GL.DECR |
+  GL.DECR_WRAP |
+  GL.INVERT;
+
+export type GLValueParameters = {
+   [GL.BLEND]?: boolean;
+   [GL.BLEND_COLOR]?: [number, number, number, number] | NumberArray;
+   [GL.BLEND_EQUATION_RGB]?: GL_BLEND_EQUATION;
+   [GL.BLEND_EQUATION_ALPHA]?: GL_BLEND_EQUATION;
+   [GL.BLEND_SRC_RGB]?: GL_BLEND_FUNCTION;
+   [GL.BLEND_DST_RGB]?: GL_BLEND_FUNCTION;
+   [GL.BLEND_SRC_ALPHA]?: GL_BLEND_FUNCTION;
+   [GL.BLEND_DST_ALPHA]?: GL_BLEND_FUNCTION;
+   [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]?: GL_FUNCTION;
+   [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]?: GL_FUNCTION;
+   [GL.STENCIL_REF]?: GL_FUNCTION;
+   [GL.STENCIL_VALUE_MASK]?: GL_FUNCTION;
+   [GL.STENCIL_BACK_FUNC]?: GL_FUNCTION;
+   [GL.STENCIL_BACK_REF]?: GL_FUNCTION;
+   [GL.STENCIL_BACK_VALUE_MASK]?: GL_FUNCTION;
+   [GL.STENCIL_FAIL]?: GL_STENCIL_OP;
+   [GL.STENCIL_PASS_DEPTH_FAIL]?: GL_STENCIL_OP;
+   [GL.STENCIL_PASS_DEPTH_PASS]?: GL_STENCIL_OP;
+   [GL.STENCIL_BACK_FAIL]?: GL_STENCIL_OP;
+   [GL.STENCIL_BACK_PASS_DEPTH_FAIL]?: GL_STENCIL_OP;
+   [GL.STENCIL_BACK_PASS_DEPTH_PASS]?: GL_STENCIL_OP;
+   [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 GLFunctionStyleParameters = {
+   // Function-style setters
+   framebuffer?: Framebuffer | null;
+   blend?: boolean;
+   blendColor?: [number, number, number, number] | NumberArray;
+   blendEquation?: GL_BLEND_EQUATION | [GL_BLEND_EQUATION, GL_BLEND_EQUATION];
+   blendFunc?:
+    [GL_BLEND_FUNCTION, GL_BLEND_FUNCTION] |
+    [GL_BLEND_FUNCTION, GL_BLEND_FUNCTION, GL_BLEND_FUNCTION, GL_BLEND_FUNCTION];
+
+   clearColor?: [number, number, number, number] | NumberArray;
+   clearDepth?: number;
+   clearStencil?: number;
+
+   colorMask?: [boolean, boolean, boolean, boolean];
+
+   cull?: boolean;
+   cullFace?: GL.FRONT | GL.BACK | GL.FRONT_AND_BACK;
+
+   depthTest?: boolean;
+   depthFunc?: GL_FUNCTION;
+   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?: [GL_FUNCTION, number, number] | [GL_FUNCTION, number, number, GL_FUNCTION, number, number];
+   stencilOp?:
+    [GL_STENCIL_OP, GL_STENCIL_OP, GL_STENCIL_OP] |
+    [GL_STENCIL_OP, GL_STENCIL_OP, GL_STENCIL_OP, GL_STENCIL_OP, GL_STENCIL_OP, GL_STENCIL_OP];
+   viewport?: [number, number, number, number] | NumberArray;
+ };
+
+ export type GLParameters = GLValueParameters | GLFunctionStyleParameters;

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

@@ -0,0 +1,118 @@
+/* eslint-disable no-inline-comments, max-len, camelcase */
+import GL from '@luma.gl/constants';
+import {isWebGL2} from '../context/webgl-checks';
+
+const OES_element_index = 'OES_element_index';
+const WEBGL_draw_buffers = 'WEBGL_draw_buffers';
+const EXT_disjoint_timer_query = 'EXT_disjoint_timer_query';
+const EXT_disjoint_timer_query_webgl2 = 'EXT_disjoint_timer_query_webgl2';
+const EXT_texture_filter_anisotropic = 'EXT_texture_filter_anisotropic';
+const WEBGL_debug_renderer_info = 'WEBGL_debug_renderer_info';
+
+const GL_FRAGMENT_SHADER_DERIVATIVE_HINT = 0x8b8b;
+const GL_DONT_CARE = 0x1100;
+const GL_GPU_DISJOINT_EXT = 0x8fbb;
+const GL_MAX_TEXTURE_MAX_ANISOTROPY_EXT = 0x84ff;
+const GL_UNMASKED_VENDOR_WEBGL = 0x9245; // vendor string of the graphics driver.
+const GL_UNMASKED_RENDERER_WEBGL = 0x9246; // renderer string of the graphics driver.
+
+const getWebGL2ValueOrZero = (gl) => (!isWebGL2(gl) ? 0 : undefined);
+
+// if a function returns undefined in this table,
+// the original getParameter will be called, defeating the override
+const WEBGL_PARAMETERS = {
+  [GL.READ_BUFFER]: (gl) => (!isWebGL2(gl) ? GL.COLOR_ATTACHMENT0 : undefined),
+
+  // WebGL2 context parameters
+  [GL_FRAGMENT_SHADER_DERIVATIVE_HINT]: (gl) => (!isWebGL2(gl) ? GL_DONT_CARE : undefined),
+
+  [GL.RASTERIZER_DISCARD]: getWebGL2ValueOrZero,
+
+  [GL.SAMPLES]: getWebGL2ValueOrZero,
+
+  // WebGL2 extension context parameters
+  [GL_GPU_DISJOINT_EXT]: (gl, getParameter) => {
+    const ext = isWebGL2(gl)
+      ? gl.getExtension(EXT_disjoint_timer_query_webgl2)
+      : gl.getExtension(EXT_disjoint_timer_query);
+    return ext && ext.GPU_DISJOINT_EXT ? getParameter(ext.GPU_DISJOINT_EXT) : 0;
+  },
+
+  // Extension fixed values
+  [GL_UNMASKED_VENDOR_WEBGL]: (gl, getParameter) => {
+    const ext = gl.getExtension(WEBGL_debug_renderer_info);
+    return getParameter((ext && ext.UNMASKED_VENDOR_WEBGL) || GL.VENDOR);
+  },
+
+  [GL_UNMASKED_RENDERER_WEBGL]: (gl, getParameter) => {
+    const ext = gl.getExtension(WEBGL_debug_renderer_info);
+    return getParameter((ext && ext.UNMASKED_RENDERER_WEBGL) || GL.RENDERER);
+  },
+
+  // Extension LIMITS
+  [GL_MAX_TEXTURE_MAX_ANISOTROPY_EXT]: (gl, getParameter) => {
+    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;
+  },
+
+  // WebGL2 Limits
+  [GL.MAX_3D_TEXTURE_SIZE]: getWebGL2ValueOrZero,
+  [GL.MAX_ARRAY_TEXTURE_LAYERS]: getWebGL2ValueOrZero,
+  [GL.MAX_CLIENT_WAIT_TIMEOUT_WEBGL]: getWebGL2ValueOrZero,
+  [GL.MAX_COLOR_ATTACHMENTS]: (gl, getParameter) => {
+    if (!isWebGL2(gl)) {
+      const ext = gl.getExtension(WEBGL_draw_buffers);
+      return ext ? getParameter(ext.MAX_COLOR_ATTACHMENTS_WEBGL) : 0;
+    }
+    return undefined;
+  },
+  [GL.MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS]: getWebGL2ValueOrZero,
+  [GL.MAX_COMBINED_UNIFORM_BLOCKS]: getWebGL2ValueOrZero,
+  [GL.MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS]: getWebGL2ValueOrZero,
+  [GL.MAX_DRAW_BUFFERS]: (gl) => {
+    if (!isWebGL2(gl)) {
+      const ext = gl.getExtension(WEBGL_draw_buffers);
+      return ext ? ext.MAX_DRAW_BUFFERS_WEBGL : 0;
+    }
+    return undefined;
+  },
+  [GL.MAX_ELEMENT_INDEX]:
+    // Guess: per webglstats.com 99.6% of webgl2 supports 2147483647
+    (gl) => (gl.getExtension(OES_element_index) ? 2147483647 : 65535),
+  [GL.MAX_ELEMENTS_INDICES]:
+    // Guess: "Reasonably safe" per webglstats.com - could be higher/lower (on some mobile devices)
+    (gl) => (gl.getExtension(OES_element_index) ? 16777216 : 65535),
+  [GL.MAX_ELEMENTS_VERTICES]:
+    // Guess: "Reasonably safe" per webglstats.com - could be higher/lower (on some mobile devices)
+    (gl) => 16777216,
+  [GL.MAX_FRAGMENT_INPUT_COMPONENTS]: getWebGL2ValueOrZero,
+  [GL.MAX_FRAGMENT_UNIFORM_BLOCKS]: getWebGL2ValueOrZero,
+  [GL.MAX_FRAGMENT_UNIFORM_COMPONENTS]: getWebGL2ValueOrZero,
+  [GL.MAX_SAMPLES]: getWebGL2ValueOrZero,
+  [GL.MAX_SERVER_WAIT_TIMEOUT]: getWebGL2ValueOrZero,
+  [GL.MAX_TEXTURE_LOD_BIAS]: getWebGL2ValueOrZero,
+  [GL.MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS]: getWebGL2ValueOrZero,
+  [GL.MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS]: getWebGL2ValueOrZero,
+  [GL.MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS]: getWebGL2ValueOrZero,
+  [GL.MAX_UNIFORM_BLOCK_SIZE]: getWebGL2ValueOrZero,
+  [GL.MAX_UNIFORM_BUFFER_BINDINGS]: getWebGL2ValueOrZero,
+  [GL.MAX_VARYING_COMPONENTS]: getWebGL2ValueOrZero,
+  [GL.MAX_VERTEX_OUTPUT_COMPONENTS]: getWebGL2ValueOrZero,
+  [GL.MAX_VERTEX_UNIFORM_BLOCKS]: getWebGL2ValueOrZero,
+  [GL.MAX_VERTEX_UNIFORM_COMPONENTS]: getWebGL2ValueOrZero,
+  [GL.MIN_PROGRAM_TEXEL_OFFSET]: getWebGL2ValueOrZero,
+  [GL.MAX_PROGRAM_TEXEL_OFFSET]: getWebGL2ValueOrZero,
+  [GL.UNIFORM_BUFFER_OFFSET_ALIGNMENT]: getWebGL2ValueOrZero
+};
+
+// A "replacement" gl.getParameter that accepts "enums" from extensions and WebGL2
+// and returns reasonably safe defaults
+export function getParameterPolyfill(gl, originalGetParameter, pname) {
+  // Return mock limits (usually 0) for WebGL2 constants to ensure these
+  // can be queries without error
+  const limit = WEBGL_PARAMETERS[pname];
+  const value = typeof limit === 'function' ? limit(gl, originalGetParameter, pname) : limit;
+  const result = value !== undefined ? value : originalGetParameter(pname);
+  return result;
+}

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

@@ -0,0 +1,98 @@
+// WebGL1/WebGL2 extension polyfill support
+//
+// Provides a function that creates polyfills for WebGL2 functions based
+// on available extensions and installs them on a supplied target (could be
+// the WebGLContext or its prototype, or a separate object).
+//
+// This is intended to be a stand-alone file with minimal dependencies,
+// easy to reuse or repurpose in other projects.
+
+import {assert} from '@luma.gl/api';
+import {polyfillVertexArrayObject} from './polyfill-vertex-array-object';
+
+import {WEBGL2_CONTEXT_POLYFILLS, WEBGL2_CONTEXT_OVERRIDES} from './polyfill-table';
+import {getContextState} from '../context/context-state';
+
+/**
+ * Registers extensions, polyfills or mock functions for extensions in the polyfills list
+ */
+export function polyfillContext(gl: WebGLRenderingContext): WebGL2RenderingContext {
+  const contextState = getContextState(gl);
+
+  if (!contextState._polyfilled) {
+    polyfillVertexArrayObject(gl);
+    initializeExtensions(gl);
+    installPolyfills(gl, WEBGL2_CONTEXT_POLYFILLS);
+    installOverrides(gl, {target: contextState, target2: gl});
+    contextState._polyfilled = true;
+  }
+
+  // Note - only supports a subset of WebGL2
+  return gl as WebGL2RenderingContext;
+}
+
+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);
+  }
+}
+
+function installPolyfills(gl: WebGLRenderingContext, polyfills): void {
+  const contextState = getContextState(gl);
+  for (const extension of Object.getOwnPropertyNames(polyfills)) {
+    if (extension !== 'overrides') {
+      polyfillExtension(gl, {extension, target: contextState, target2: gl});
+    }
+  }
+}
+
+/** Polyfills a single WebGL extension into the `target` object */
+function polyfillExtension(gl: WebGLRenderingContext, {extension, target, target2}): void {
+  const defaults = WEBGL2_CONTEXT_POLYFILLS[extension];
+  assert(defaults);
+
+  const {meta = {}} = defaults;
+  const {suffix = ''} = meta;
+
+  const ext = gl.getExtension(extension);
+
+  for (const key of Object.keys(defaults)) {
+    const extKey = `${key}${suffix}`;
+
+    let polyfill = null;
+    if (key === 'meta') {
+      // ignore
+    } else if (typeof gl[key] === 'function') {
+      // WebGL2 implementation is already
+    } else if (ext && typeof ext[extKey] === 'function') {
+      // pick extension implementation,if available
+      polyfill = (...args) => ext[extKey](...args);
+    } else if (typeof defaults[key] === 'function') {
+      // pick the mock implementation, if no implementation was detected
+      polyfill = defaults[key].bind(target);
+    }
+
+    if (polyfill) {
+      target[key] = polyfill;
+      target2[key] = polyfill;
+    }
+  }
+}
+
+/** Install simple overrides (mostly get* functions) */
+function installOverrides(gl, {target, target2}) {
+  Object.keys(WEBGL2_CONTEXT_OVERRIDES).forEach((key) => {
+    if (typeof WEBGL2_CONTEXT_OVERRIDES[key] === 'function') {
+      // install an override, if no implementation was detected
+      const originalFunc = gl[key] ? gl[key].bind(gl) : () => {};
+      const polyfill = WEBGL2_CONTEXT_OVERRIDES[key].bind(null, gl, originalFunc);
+      target[key] = polyfill;
+      target2[key] = polyfill;
+    }
+  });
+}

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

@@ -0,0 +1,162 @@
+import {assert} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import {isWebGL2} from '../context/webgl-checks';
+
+import {getParameterPolyfill} from './get-parameter-polyfill';
+import {getContextState} from '../context/context-state';
+
+const OES_vertex_array_object = 'OES_vertex_array_object';
+const ANGLE_instanced_arrays = 'ANGLE_instanced_arrays';
+const WEBGL_draw_buffers = 'WEBGL_draw_buffers';
+const EXT_disjoint_timer_query = 'EXT_disjoint_timer_query';
+const EXT_texture_filter_anisotropic = 'EXT_texture_filter_anisotropic';
+
+const ERR_VAO_NOT_SUPPORTED = 'VertexArray requires WebGL2 or OES_vertex_array_object extension';
+
+// Return object with webgl2 flag and an extension
+function getExtensionData(gl, extension) {
+  return {
+    webgl2: isWebGL2(gl),
+    ext: gl.getExtension(extension)
+  };
+}
+
+// function mapExtensionConstant(gl, constant) {
+//   switch (constant) {
+//   case ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES: return GL.FRAGMENT_SHADER_DERIVATIVE_HINT;
+//   }
+// }
+
+export const WEBGL2_CONTEXT_POLYFILLS = {
+  // POLYFILL TABLE
+  [OES_vertex_array_object]: {
+    meta: {suffix: 'OES'},
+    // NEW METHODS
+    createVertexArray: () => {
+      assert(false, ERR_VAO_NOT_SUPPORTED);
+    },
+    deleteVertexArray: () => {},
+    bindVertexArray: () => {},
+    isVertexArray: () => false
+  },
+  [ANGLE_instanced_arrays]: {
+    meta: {
+      suffix: 'ANGLE'
+      // constants: {
+      //   VERTEX_ATTRIB_ARRAY_DIVISOR: 'VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE'
+      // }
+    },
+    vertexAttribDivisor(location, divisor) {
+      // Accept divisor 0 even if instancing is not supported (0 = no instancing)
+      assert(divisor === 0, 'WebGL instanced rendering not supported');
+    },
+    drawElementsInstanced: () => {},
+    drawArraysInstanced: () => {}
+  },
+  [WEBGL_draw_buffers]: {
+    meta: {
+      suffix: 'WEBGL'
+    },
+    drawBuffers: () => {
+      assert(false);
+    }
+  },
+  [EXT_disjoint_timer_query]: {
+    meta: {suffix: 'EXT'},
+    // WebGL1: Polyfills the WebGL2 Query API
+    createQuery: () => {
+      assert(false);
+    },
+    deleteQuery: () => {
+      assert(false);
+    },
+    beginQuery: () => {
+      assert(false);
+    },
+    endQuery: () => {},
+    getQuery(handle, pname) {
+      return this.getQueryObject(handle, pname);
+    },
+    // The WebGL1 extension uses getQueryObject rather then getQueryParameter
+    getQueryParameter(handle, pname) {
+      return this.getQueryObject(handle, pname);
+    },
+    getQueryObject: () => {}
+  }
+};
+
+export const WEBGL2_CONTEXT_OVERRIDES = {
+  // Ensure readBuffer is a no-op
+  readBuffer: (gl, originalFunc, attachment) => {
+    if (isWebGL2(gl)) {
+      originalFunc(attachment);
+    } else {
+      // assert(attachment !== GL_COLOR_ATTACHMENT0 && attachment !== GL_FRONT);
+    }
+  },
+  // Override for getVertexAttrib that returns sane values for non-WebGL1 constants
+  getVertexAttrib: (gl, originalFunc, location, pname) => {
+    // const gl = this; // eslint-disable-line
+    const {webgl2, ext} = getExtensionData(gl, ANGLE_instanced_arrays);
+
+    let result;
+    switch (pname) {
+      // WebGL1 attributes will never be integer
+      case GL.VERTEX_ATTRIB_ARRAY_INTEGER:
+        result = !webgl2 ? false : undefined;
+        break;
+      // if instancing is not available, return 0 meaning divisor has not been set
+      case GL.VERTEX_ATTRIB_ARRAY_DIVISOR:
+        result = !webgl2 && !ext ? 0 : undefined;
+        break;
+      default:
+    }
+
+    return result !== undefined ? result : originalFunc(location, pname);
+  },
+  // Handle transform feedback and uniform block queries in WebGL1
+  getProgramParameter: (gl, originalFunc, program, pname) => {
+    if (!isWebGL2(gl)) {
+      switch (pname) {
+        case GL.TRANSFORM_FEEDBACK_BUFFER_MODE:
+          return GL.SEPARATE_ATTRIBS;
+        case GL.TRANSFORM_FEEDBACK_VARYINGS:
+          return 0;
+        case GL.ACTIVE_UNIFORM_BLOCKS:
+          return 0;
+        default:
+      }
+    }
+    return originalFunc(program, pname);
+  },
+  getInternalformatParameter: (gl, originalFunc, target, format, pname) => {
+    if (!isWebGL2(gl)) {
+      switch (pname) {
+        case GL.SAMPLES:
+          return new Int32Array([0]);
+        default:
+      }
+    }
+    return gl.getInternalformatParameter(target, format, pname);
+  },
+  getTexParameter(gl, originalFunc, target, pname) {
+    switch (pname) {
+      case GL.TEXTURE_MAX_ANISOTROPY_EXT:
+        const contextState = getContextState(gl);
+        const {_extensions} = contextState;
+        const ext = _extensions[EXT_texture_filter_anisotropic];
+        pname = (ext && ext.TEXTURE_MAX_ANISOTROPY_EXT) || GL.TEXTURE_MAX_ANISOTROPY_EXT;
+        break;
+      default:
+    }
+    return originalFunc(target, pname);
+  },
+  getParameter: getParameterPolyfill,
+  hint(gl, originalFunc, pname, value) {
+    // TODO - handle GL.FRAGMENT_SHADER_DERIVATIVE_HINT:
+    // switch (pname) {
+    // case GL.FRAGMENT_SHADER_DERIVATIVE_HINT:
+    // }
+    return originalFunc(pname, value);
+  }
+};