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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "8.6.0-alpha.1",
+  "version": "8.6.0-alpha.5",
   "description": "WebGL2 Classes",
   "license": "MIT",
   "publishConfig": {
@@ -35,10 +35,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/api": "8.6.0-alpha.1",
-    "@luma.gl/constants": "8.6.0-alpha.1",
-    "@luma.gl/gltools": "8.6.0-alpha.1",
-    "probe.gl": "^3.4.0"
+    "@luma.gl/api": "8.6.0-alpha.5",
+    "@luma.gl/constants": "8.6.0-alpha.5",
+    "@probe.gl/env": "^3.5.0"
   },
-  "gitHead": "e3895ce8a6dd376394c6662bb8cf0e1ad1f233f3"
+  "gitHead": "c07a1da6a4cac293a1b10658adcaafe872ac9efe"
 }

package/src/_deprecated/context-api.ts

@@ -0,0 +1,146 @@
+// luma.gl, MIT license
+// LEGACY luma.gl v8 API for WebGLRendering context
+// DEPRECATED API - may be removed in luma.gl v9 or v10.
+
+/* eslint-disable quotes */
+import GL from '@luma.gl/constants';
+import {WebGLDevice, WebGLDeviceProps} from '@luma.gl/webgl';
+import {DEPRECATED_FEATURES} from './features';
+
+export type GLContextOptions = WebGLDeviceProps & {
+  throwOnError?: boolean; // If set to false, return `null` if context creation fails.
+};
+
+/** @deprecated Use `new WebGLDevice()` or `luma.createDevice()` */
+export function createGLContext(options?: GLContextOptions): WebGLRenderingContext | null {
+  const webglDevice = new WebGLDevice(options);
+  // Note: OK to return the context, it holds on to the device
+  return webglDevice.gl;
+}
+
+/** @deprecated Use `WebGLDevice.attach()` */
+export function instrumentGLContext(
+  gl: WebGLRenderingContext | WebGL2RenderingContext,
+  options?: GLContextOptions
+): WebGLRenderingContext {
+  const webglDevice = WebGLDevice.attach(gl, options);
+  return webglDevice.gl;
+}
+
+/**
+ * Resize the canvas' drawing buffer.
+ *
+ * Can match the canvas CSS size, and optionally also consider devicePixelRatio
+ * Can be called every frame
+ *
+ * Regardless of size, the drawing buffer will always be scaled to the viewport, but
+ * for best visual results, usually set to either:
+ *  canvas CSS width x canvas CSS height
+ *  canvas CSS width * devicePixelRatio x canvas CSS height * devicePixelRatio
+ * See http://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
+ *
+ * resizeGLContext(gl, {width, height, useDevicePixels})
+ * @deprecated Use WebGLDevice.resize()
+ */
+export function resizeGLContext(
+  gl: WebGLRenderingContext,
+  options?: {
+    width?: number;
+    height?: number;
+    useDevicePixels?: boolean | number;
+  }
+) {
+  const webglDevice = WebGLDevice.attach(gl);
+  webglDevice.resize(options);
+}
+
+/** 
+ * Check one or more features
+ * @deprecated Use `WebGLDevice.features.has()`
+*/
+export function hasFeatures(gl: WebGLRenderingContext, features: string | string[]): boolean {
+  const webglDevice = WebGLDevice.attach(gl);
+  const normalizedFeatures = Array.isArray(features) ? features : [features];
+  const deviceFeatures = normalizedFeatures.map(feature => classicToDeviceFeature(feature));
+  // @ts-expect-error Feature is a string enum
+  return deviceFeatures.every((feature) => webglDevice.features.has(feature));
+}
+
+function classicToDeviceFeature(feature: string): string {
+  const deviceFeature = feature.toLowerCase().replace(/\_/g, '-');
+  if (deviceFeature.startsWith('webgl2') || deviceFeature.startsWith('glsl-')) {
+    return deviceFeature;
+  }
+  return `webgl-${deviceFeature}`;
+}
+
+/**
+ * Check one feature
+ * @deprecated Use `WebGLDevice.features`
+ */
+export function hasFeature(gl: WebGLRenderingContext, feature: string): boolean {
+  return hasFeatures(gl, feature);
+}
+
+/**
+ * Return a map of supported features
+ * @deprecated Use `WebGLDevice.features`
+ */
+export function getFeatures(gl: WebGLRenderingContext): Record<string, boolean>  {
+  const webglDevice = WebGLDevice.attach(gl);
+  const featureMap: Record<string, boolean> = {};
+  for (const feature in DEPRECATED_FEATURES) {
+    // @ts-expect-error Feature is a string enum
+    featureMap[feature] = webglDevice.features.has(classicToDeviceFeature(feature));
+  }
+  return featureMap;
+}
+
+/**
+ * Provides strings identifying the GPU vendor and driver.
+ * https://www.khronos.org/registry/webgl/extensions/WEBGL_debug_renderer_info/
+ *
+ * @deprecated Use `WebGLDevice.info`
+ */
+export function getContextDebugInfo(gl: WebGLRenderingContext): {
+  vendor: string;
+  renderer: string;
+  vendorMasked: string;
+  rendererMasked: string;
+  version: string;
+} {
+  const webglDevice = WebGLDevice.attach(gl);
+  const info = webglDevice.info;
+  return {
+    ...webglDevice.info,
+    vendorMasked: webglDevice.info.vendor,
+    rendererMasked: webglDevice.info.renderer
+  };
+}
+
+/** @deprecated Use `WebGLDevice.info` */
+export function getGLContextInfo(gl) {
+  const info = getContextDebugInfo(gl);
+  return {
+    [GL.UNMASKED_VENDOR_WEBGL]: info.vendor,
+    [GL.UNMASKED_RENDERER_WEBGL]: info.renderer,
+    [GL.VENDOR]: info.vendorMasked,
+    [GL.RENDERER]: info.rendererMasked,
+    [GL.VERSION]: info.version,
+  };
+}
+
+/** @deprecated Use `WebGLDevice.info` and `WebGLDevice.limits` */
+export function getContextInfo(gl) {
+  return {
+    ...getContextDebugInfo(gl),
+    ...getContextLimits(gl),
+    info: getGLContextInfo(gl),
+  };
+}
+
+/** @deprecated Use `WebGLDevice.limits` */
+export function getContextLimits(gl) {
+  const webglDevice = WebGLDevice.attach(gl);
+  return {limits: webglDevice.webglLimits};
+}

package/src/_deprecated/features.ts

@@ -0,0 +1,159 @@
+// Feature detection for WebGL
+// Provides a function that enables simple checking of which WebGL features are
+// available in an WebGL1 or WebGL2 environment.
+
+import GL from '@luma.gl/constants';
+import {isWebGL2} from '@luma.gl/webgl';
+import {assert} from '@luma.gl/api';
+
+// TODO - this should be the default export, test cases need updating
+export const DEPRECATED_FEATURES = {
+  WEBGL2: 'WEBGL2',
+
+  // API SUPPORT
+  VERTEX_ARRAY_OBJECT: 'VERTEX_ARRAY_OBJECT',
+  TIMER_QUERY: 'TIMER_QUERY',
+  INSTANCED_RENDERING: 'INSTANCED_RENDERING',
+  MULTIPLE_RENDER_TARGETS: 'MULTIPLE_RENDER_TARGETS',
+
+  // FEATURES
+  ELEMENT_INDEX_UINT32: 'ELEMENT_INDEX_UINT32',
+
+  // BLENDING
+  BLEND_EQUATION_MINMAX: 'BLEND_EQUATION_MINMAX',
+  FLOAT_BLEND: 'FLOAT_BLEND',
+
+  // TEXTURES: '// TEXTURES', RENDERBUFFERS
+  COLOR_ENCODING_SRGB: 'COLOR_ENCODING_SRGB',
+
+  // TEXTURES
+  TEXTURE_DEPTH: 'TEXTURE_DEPTH',
+  TEXTURE_FLOAT: 'TEXTURE_FLOAT',
+  TEXTURE_HALF_FLOAT: 'TEXTURE_HALF_FLOAT',
+
+  TEXTURE_FILTER_LINEAR_FLOAT: 'TEXTURE_FILTER_LINEAR_FLOAT',
+  TEXTURE_FILTER_LINEAR_HALF_FLOAT: 'TEXTURE_FILTER_LINEAR_HALF_FLOAT',
+  TEXTURE_FILTER_ANISOTROPIC: 'TEXTURE_FILTER_ANISOTROPIC',
+
+  // FRAMEBUFFERS: '// FRAMEBUFFERS', TEXTURES AND RENDERBUFFERS
+  COLOR_ATTACHMENT_RGBA32F: 'COLOR_ATTACHMENT_RGBA32F',
+  COLOR_ATTACHMENT_FLOAT: 'COLOR_ATTACHMENT_FLOAT',
+  COLOR_ATTACHMENT_HALF_FLOAT: 'COLOR_ATTACHMENT_HALF_FLOAT',
+
+  // GLSL extensions
+  GLSL_FRAG_DATA: 'GLSL_FRAG_DATA',
+  GLSL_FRAG_DEPTH: 'GLSL_FRAG_DEPTH',
+  GLSL_DERIVATIVES: 'GLSL_DERIVATIVES',
+  GLSL_TEXTURE_LOD: 'GLSL_TEXTURE_LOD'
+};
+
+/** Extract all WebGL features */
+export function getWebGLFeatures(gl: WebGLRenderingContext): Set<string> {
+  // Enable EXT_float_blend first: https://developer.mozilla.org/en-US/docs/Web/API/EXT_float_blend
+  gl.getExtension('EXT_color_buffer_float');
+  gl.getExtension('WEBGL_color_buffer_float');
+  gl.getExtension('EXT_float_blend');
+
+  const features = new Set<string>();
+  for (const feature in WEBGL_FEATURES) {
+    if (isFeatureSupported(gl, feature)) {
+      features.add(feature);
+    }
+  }
+  return features;
+}
+
+function isFeatureSupported(gl: WebGLRenderingContext, cap: string): boolean {
+  const feature = WEBGL_FEATURES[cap];
+  assert(feature, cap);
+
+  const [webgl1Feature, webgl2Feature] = feature;
+
+  // Get extension name from table
+  const featureDefinition = isWebGL2(gl) ? webgl2Feature : webgl1Feature;
+
+  if (cap === DEPRECATED_FEATURES.COLOR_ATTACHMENT_RGBA32F && !isWebGL2(gl)) {
+    return checkFloat32ColorAttachment(gl);
+  }
+
+  // Check if the value is dependent on checking one or more extensions
+  if (typeof featureDefinition === 'string') {
+    return Boolean(gl.getExtension(featureDefinition));
+  }
+
+  return featureDefinition;
+}
+
+
+// function to test if Float 32 bit format texture can be bound as color attachment
+function checkFloat32ColorAttachment(gl: WebGLRenderingContext) {
+  let texture: WebGLTexture;
+  let framebuffer: WebGLFramebuffer;
+  try {
+    const texture = gl.createTexture();
+    gl.bindTexture(GL.TEXTURE_2D, texture);
+
+    const level = 0;
+    const internalFormat = gl.RGBA;
+    const width = 1;
+    const height = 1;
+    const border = 0;
+    const srcFormat = gl.RGBA;
+    const srcType = gl.UNSIGNED_BYTE;
+    const pixel = new Uint8Array([0, 0, 255, 255]);  // opaque blue
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                  width, height, border, srcFormat, srcType,
+                  pixel);
+
+    const framebuffer = gl.createFramebuffer();
+    gl.bindFramebuffer(GL.FRAMEBUFFER, framebuffer);
+    gl.framebufferTexture2D(GL.FRAMEBUFFER, GL.COLOR_ATTACHMENT0, GL.TEXTURE_2D, texture, 0);
+    const status = gl.checkFramebufferStatus(GL.FRAMEBUFFER) === GL.FRAMEBUFFER_COMPLETE;
+    return status;
+  } finally {
+    gl.deleteTexture(texture);
+    gl.deleteFramebuffer(framebuffer);
+  }
+}
+
+// Defines luma.gl "feature" names and semantics
+// Format: 'feature-name: [WebGL1 support, WebGL2 support] / [WebGL1 and WebGL2 support]', when support is 'string' it is the name of the extension
+const WEBGL_FEATURES: Record<string, [boolean | string, boolean | string]> = {
+  [DEPRECATED_FEATURES.WEBGL2]: [false, true],
+
+  // API SUPPORT
+  [DEPRECATED_FEATURES.VERTEX_ARRAY_OBJECT]: ['OES_vertex_array_object', true],
+  [DEPRECATED_FEATURES.TIMER_QUERY]: ['EXT_disjoint_timer_query', 'EXT_disjoint_timer_query_webgl2'],
+  [DEPRECATED_FEATURES.INSTANCED_RENDERING]: ['ANGLE_instanced_arrays', true],
+  [DEPRECATED_FEATURES.MULTIPLE_RENDER_TARGETS]: ['WEBGL_draw_buffers', true],
+
+  // FEATURES
+  [DEPRECATED_FEATURES.ELEMENT_INDEX_UINT32]: ['OES_element_index_uint', true],
+
+  // BLENDING
+  [DEPRECATED_FEATURES.BLEND_EQUATION_MINMAX]: ['EXT_blend_minmax', true],
+  [DEPRECATED_FEATURES.FLOAT_BLEND]: ['EXT_float_blend', 'EXT_float_blend'],
+
+  // TEXTURES, RENDERBUFFERS
+  [DEPRECATED_FEATURES.COLOR_ENCODING_SRGB]: ['EXT_sRGB', true],
+
+  // TEXTURES
+  [DEPRECATED_FEATURES.TEXTURE_DEPTH]: ['WEBGL_depth_texture', true],
+  [DEPRECATED_FEATURES.TEXTURE_FLOAT]: ['OES_texture_float', true],
+  [DEPRECATED_FEATURES.TEXTURE_HALF_FLOAT]: ['OES_texture_half_float', true],
+
+  [DEPRECATED_FEATURES.TEXTURE_FILTER_LINEAR_FLOAT]: ['OES_texture_float_linear', 'OES_texture_float_linear'],
+  [DEPRECATED_FEATURES.TEXTURE_FILTER_LINEAR_HALF_FLOAT]: ['OES_texture_half_float_linear', 'OES_texture_half_float_linear'],
+  [DEPRECATED_FEATURES.TEXTURE_FILTER_ANISOTROPIC]: ['EXT_texture_filter_anisotropic', 'EXT_texture_filter_anisotropic'],
+
+  // FRAMEBUFFERS, TEXTURES AND RENDERBUFFERS
+  [DEPRECATED_FEATURES.COLOR_ATTACHMENT_RGBA32F]: [false, 'EXT_color_buffer_float'], // Note override check
+  [DEPRECATED_FEATURES.COLOR_ATTACHMENT_FLOAT]: [false, 'EXT_color_buffer_float'],
+  [DEPRECATED_FEATURES.COLOR_ATTACHMENT_HALF_FLOAT]: ['EXT_color_buffer_half_float', 'EXT_color_buffer_half_float'],
+
+  // GLSL extensions
+  [DEPRECATED_FEATURES.GLSL_FRAG_DATA]: ['WEBGL_draw_buffers', true],
+  [DEPRECATED_FEATURES.GLSL_FRAG_DEPTH]: ['EXT_frag_depth', true],
+  [DEPRECATED_FEATURES.GLSL_DERIVATIVES]: ['OES_standard_derivatives', true],
+  [DEPRECATED_FEATURES.GLSL_TEXTURE_LOD]: ['EXT_shader_texture_lod', true]
+};

package/src/adapter/converters/set-device-parameters.ts

@@ -0,0 +1,182 @@
+import {Device, Parameters, CompareFunction, StencilOperation, log} from '@luma.gl/api';
+import GL from '@luma.gl/constants';
+import {WebGLDevice} from '@luma.gl/webgl';
+
+/** Set WebGPU Style Parameters */
+export function setDeviceParameters(device: Device, parameters: Parameters) {
+  const webglDevice = WebGLDevice.attach(device);
+  const {gl, gl2} = webglDevice;
+
+  // RASTERIZATION SETTINGS
+  if (parameters.cullMode) {
+    switch (parameters.cullMode) {
+      case 'none':
+        gl.disable(GL.CULL_FACE);
+        break;
+      case 'front':
+        gl.enable(GL.CULL_FACE);
+        gl.cullFace(GL.FRONT);
+        break;
+      case 'back':
+        gl.enable(GL.CULL_FACE);
+        gl.cullFace(GL.BACK);
+        break;
+    }
+  }
+
+  if (parameters.frontFace) {
+    gl.frontFace(map('frontFace', parameters.frontFace, {
+      ccw: GL.CCW,
+      cw: GL.CW
+    }));
+  }
+
+  if (parameters.depthBias !== undefined) {
+    gl.polygonOffset(parameters.depthBias, parameters.depthBiasSlopeScale || 0);
+  }
+
+  // depthBiasSlopeScale: {
+  //   // Handled by depthBias
+  // },
+
+  // DEPTH STENCIL
+
+  if (parameters.depthWriteEnabled !== undefined) {
+    gl.depthMask(mapBoolean('depthWriteEnabled', parameters.depthWriteEnabled));
+  }
+
+ if (parameters.depthCompare) {
+    parameters.depthCompare !== 'always' ? gl.enable(GL.DEPTH_TEST) : gl.disable(GL.DEPTH_TEST),
+    gl.depthFunc(convertCompareFunction('depthCompare', parameters.depthCompare));
+  }
+
+  if (parameters.stencilWriteMask) {
+    const mask = parameters.stencilWriteMask;
+    gl.stencilMaskSeparate(GL.FRONT, mask);
+    gl.stencilMaskSeparate(GL.BACK, mask);
+  }
+
+  if (parameters.stencilReadMask) {
+    // stencilReadMask is handle inside stencil***Compare.
+    log.warn('stencilReadMask not supported under WebGL');
+  }
+
+  if (parameters.stencilCompare) {
+    const mask = parameters.stencilReadMask || 0xffffffff;
+    const glValue = convertCompareFunction('depthCompare', parameters.stencilCompare);
+    // TODO - ensure back doesn't overwrite
+    parameters.stencilCompare !== 'always' ? gl.enable(GL.STENCIL_TEST) : gl.disable(GL.STENCIL_TEST),
+    gl.stencilFuncSeparate(GL.FRONT, glValue, 0, mask);
+    gl.stencilFuncSeparate(GL.BACK, glValue, 0, mask);
+  }
+
+  if (parameters.stencilPassOperation) {
+    const dppass = convertStencilOperation('stencilPassOperation', parameters.stencilPassOperation);
+    const sfail = convertStencilOperation('stencilFailOperation', parameters.stencilFailOperation);
+    const dpfail = convertStencilOperation('stencilDepthFailOperation', parameters.stencilDepthFailOperation);
+    gl.stencilOpSeparate(GL.FRONT, sfail, dpfail, dppass);
+    gl.stencilOpSeparate(GL.BACK, sfail, dpfail, dppass);
+  }
+
+  // stencilDepthFailOperation() {
+  //   // handled by stencilPassOperation
+  // },
+
+  // stencilFailOperation() {
+  //   // handled by stencilPassOperation
+  // },
+
+  // COLOR STATE
+
+  // if (parameters.blend) {
+  //   gl.enable(GL.BLEND);
+
+  //   const blend = parameters.blend;
+
+  //   let colorEquation = (blend && blend.color && blend.color.operation) || 'add';
+  //   let alphaEquation = (blend && blend.alpha && blend.alpha.operation) || 'add';
+  //   gl.blendEquationSeparate(colorEquation, alphaEquation);
+
+  //   let colorSrcFactor = (blend && blend.color && blend.color.srcFactor) || 'one';
+  //   let colorDstFactor = (blend && blend.color && blend.color.dstFactor) || 'zero';
+  //   let alphaSrcFactor = (blend && blend.alpha && blend.alpha.srcFactor) || 'one';
+  //   let alphaDstFactor = (blend && blend.alpha && blend.alpha.dstFactor) || 'zero';
+  //   gl.blendFuncSeparate(colorSrcFactor, colorDstFactor, alphaSrcFactor, alphaDstFactor);
+  // }
+}
+
+/*
+      rasterizationState: {
+        cullMode: "back",
+      },
+
+      depthStencilState: {
+        depthWriteEnabled: true,
+        depthCompare: "less",
+        format: "depth24plus-stencil8",
+      },
+
+      colorStates: [
+        {
+          format: "bgra8unorm",
+          // colorBlend.srcFactor = wgpu::BlendFactor::SrcAlpha;
+          // colorBlend.dstFactor = wgpu::BlendFactor::OneMinusSrcAlpha;
+          // alphaBlend.srcFactor = wgpu::BlendFactor::SrcAlpha;
+          // alphaBlend.dstFactor = wgpu::BlendFactor::OneMinusSrcAlpha;
+        },
+      ],
+    });
+*/
+
+
+export function convertCompareFunction(parameter, value: CompareFunction): number {
+  return map(parameter, value, {
+    'never': GL.NEVER,
+    'less': GL.LESS,
+    'equal': GL.EQUAL,
+    'less-equal': GL.LEQUAL,
+    'greater': GL.GREATER,
+    'not-equal': GL.NOTEQUAL,
+    'greater-equal': GL.GEQUAL,
+    'always': GL.ALWAYS
+  });
+}
+
+function convertStencilOperation(parameter, value: StencilOperation): number {
+  return map(parameter, value, {
+    'keep': GL.KEEP,
+    'zero': GL.ZERO,
+    'replace': GL.REPLACE,
+    'invert': GL.INVERT,
+    'increment-clamp': GL.INCR,
+    'decrement-clamp': GL.DECR,
+    'increment-wrap': GL.INCR_WRAP,
+    'decrement-wrap': GL.DECR_WRAP
+  });
+}
+
+function convertBlendOperationToEquation(parameter, value): number {
+  return map(parameter, value, {
+    'add': GL.FUNC_ADD,
+    'sub': GL.FUNC_SUBTRACT,
+    'reverse-subtract': GL.FUNC_REVERSE_SUBTRACT,
+    // When using a WebGL 2 context, the following values are available additionally:
+    'min': GL.MIN,
+    'max': GL.MAX
+  });
+}
+
+function message(parameter, value) {
+  return `Illegal parameter ${value} for ${parameter}`;
+}
+
+function map(parameter, value, valueMap) {
+  if (!(value in valueMap)) {
+    throw new Error(message(parameter, value));
+  }
+  return valueMap[value];
+}
+
+function mapBoolean(parameter, value) {
+  return value;
+}

package/src/adapter/converters/webgpu-texture-formats.ts

@@ -0,0 +1,167 @@
+import GL from '@luma.gl/constants';
+
+// Define local extension strings to optimize minification
+const SRGB = 'EXT_sRGB';
+const EXT_FLOAT_WEBGL1 = 'WEBGL.color_buffer_float';
+const EXT_FLOAT_WEBGL2 = 'EXT_color_buffer_float';
+const EXT_HALF_FLOAT_WEBGL1 = 'EXT_color_buffer_half_float';
+
+// const S3TC = 'WEBGL_compressed_texture_s3tc';
+// const PVRTC = 'WEBGL_compressed_texture_pvrtc';
+// const ES3 = 'WEBGL_compressed_texture_es3';
+// const ETC1 = 'WEBGL_compressed_texture_etc1';
+// const SRGB = 'EXT_sRGB';
+// const DEPTH = 'WEBGL_depth_texture';
+
+// NOTES:
+// - gl2: format requires WebGL2, when using a WebGL 1 context, color renderbuffer formats are limited
+// - b (bytes per pixel), for memory usage calculations.
+// - c (channels)
+// - p (packed)
+
+export const TEXTURE_FORMAT_DEFINITIONS = {
+  // 8-bit formats
+  'r8unorm': {b: 1, c: 1, gl: GL.R8, gl2: true},
+  'r8snorm': {b: 1, c: 1},
+  'r8uint': {b: 1, c: 1, gl: GL.R8UI, gl2: true},
+  'r8sint': {b: 1, c: 1, gl: GL.R8I, gl2: true},
+
+  // 16-bit formats
+  'r16uint': {b: 2, c: 1, gl: GL.R16UI, gl2: true},
+  'r16sint': {b: 2, c: 1, gl: GL.R16I, gl2: true},
+  'r16float': {b: 2, c: 1, gl: GL.R16F, gl2: EXT_FLOAT_WEBGL2},
+  'rg8unorm': {b: 2, c: 2, gl: GL.RG8, gl2: true},
+  'rg8snorm': {b: 2, c: 2},
+  'rg8uint': {b: 2, c: 2, gl: GL.RG8UI, gl2: true},
+  'rg8sint': {b: 2, c: 2, gl: GL.RG8I, gl2: true},
+
+  // Packed 16-bit formats
+  // 'rgba4norm?': {b: 2, c: 4, gl: GL.RGBA4, wgpu: false},
+  // 'rgb565norm?': {b: 2, c: 4, gl: GL.RGB565, wgpu: false},
+  // 'rgb5a1norm?': {b: 2, c: 4, gl: GL.RGB5_A1, wgpu: false},
+
+  // 24-bit formats
+  // 'rbg8norm?': {b: 3, c: 3, gl: GL.RGB8, gl2: true, wgpu: false},
+
+  // 32-bit formats
+  'r32uint': {b: 4, c: 1, gl: GL.R32UI, gl2: true, bpp: 4},
+  'r32sint': {b: 4, c: 1, gl: GL.R32I, gl2: true, bpp: 4},
+  'r32float': {b: 4, c: 1, gl: GL.R32F, gl2: EXT_FLOAT_WEBGL2, bpp: 4},
+  'rg16uint': {b: 4, c: 1, gl: GL.RG16UI, gl2: true, bpp: 4},
+  'rg16sint': {b: 4, c: 2, gl: GL.RG16I, gl2: true, bpp: 4},
+  // When using a WebGL 2 context and the EXT_color_buffer_float WebGL2 extension
+  'rg16float': {b: 4, c: 2, gl: GL.RG16F, gl2: EXT_FLOAT_WEBGL2, bpp: 4},
+  'rgba8unorm': {b: 4, c: 2, gl: GL.RGBA8, gl2: true, bpp: 4},
+
+  'rgba8unorm-srgb': {b: 4, c: 4, gl: GL.SRGB8_ALPHA8, gl2: true, gl1: SRGB, bpp: 4},
+  'rgba8snorm': {b: 4, c: 4},
+  'rgba8uint': {b: 4, c: 4, gl: GL.RGBA8UI, gl2: true, bpp: 4},
+  'rgba8sint': {b: 4, c: 4, gl: GL.RGBA8I, gl2: true, bpp: 4},
+  'bgra8unorm': {b: 4, c: 4},
+  'bgra8unorm-srgb': {b: 4, c: 4},
+
+  // Packed 32-bit formats
+  'rgb9e5ufloat': {b: 4, c: 3, p: 1, gl: GL.RGB9_E5, gl2: true, gl1: 'WEBGL_color_buffer_half_float'},
+  'rg11b10ufloat': {b: 4, c: 3, p: 1, gl: GL.R11F_G11F_B10F, gl2: EXT_FLOAT_WEBGL2},
+  'rgb10a2unorm': {b: 4, c: 4, p: 1, gl: GL.RGB10_A2, gl2: true},
+  // webgl2 only
+  // '?rgb10a2unorm?': {b: 4, c: 4, p: 1, webgpu: false, gl: GL.RGB10_A2UI, gl2: true, bpp: 4},
+
+  // 64-bit formats
+  'rg32uint': {b: 8, c: 2, gl: GL.RG32UI, gl2: true},
+  'rg32sint': {b: 8, c: 2, gl: GL.RG32I, gl2: true},
+  'rg32float': {b: 8, c: 2, gl: GL.RG32F, gl2: EXT_FLOAT_WEBGL2},
+  'rgba16uint': {b: 8, c: 4, gl: GL.RGBA16UI, gl2: true},
+  'rgba16sint': {b: 8, c: 4, gl: GL.RGBA16I, gl2: true},
+  'rgba16float': {b: 8, c: 4, gl: GL.RGBA16F, gl2: EXT_FLOAT_WEBGL2},
+
+  // 96-bit formats
+  // {gl: GL.RGB32F, dataFormat: GL.RGB, types: [GL.FLOAT], gl2: true},
+
+  // 128-bit formats
+  'rgba32uint': {b: 16, c: 4, gl: GL.RGBA32UI, gl2: true},
+  'rgba32sint': {b: 16, c: 4, gl: GL.RGBA32I, gl2: true},
+  'rgba32float': {b: 16, c: 4, gl: GL.RGBA32F, gl2: EXT_FLOAT_WEBGL2}, // gl1: EXT_FLOAT_WEBGL1
+
+  // Depth and stencil formats
+  'stencil8': {b: 1, c: 1, gl: GL.STENCIL_INDEX8}, // 8 stencil bits
+  'depth16unorm': {b: 2, c: 1, gl: GL.DEPTH_COMPONENT16}, // 16 depth bits
+  'depth24plus': {b: 3, c: 1, gl: GL.DEPTH_COMPONENT24, gl2: true},
+  'depth24plus-stencil8': {b: 4, c: 2, p: 1, gl: GL.DEPTH24_STENCIL8, gl2: true},
+  'depth32float': {b: 4, c: 1, gl: GL.DEPTH_COMPONENT32F, gl2: true},
+
+  // "depth24unorm-stencil8" feature
+  'depth24unorm-stencil8': {b: 4, c: 2, p: 1, gl: GL.DEPTH_STENCIL},
+
+  // "depth32float-stencil8" feature
+  "depth32float-stencil8": {b: 5, c: 2, p: 1, gl: GL.DEPTH32F_STENCIL8, gl2: true},
+
+  // BC compressed formats usable if "texture-compression-bc" is both
+  // supported by the device/user agent and enabled in requestDevice.
+  'bc1-rgba-unorm': {},
+  'bc1-rgba-unorm-srgb': {},
+  'bc2-rgba-unorm': {},
+  'bc2-rgba-unorm-srgb': {},
+  'bc3-rgba-unorm': {},
+  'bc3-rgba-unorm-srgb': {},
+  'bc4-r-unorm': {},
+  'bc4-r-snorm': {},
+  'bc5-rg-unorm': {},
+  'bc5-rg-snorm': {},
+  'bc6h-rgb-ufloat': {},
+  'bc6h-rgb-float': {},
+  'bc7-rgba-unorm': {},
+  'bc7-rgba-unorm-srgb': {}
+};
+
+////////////////////////////////////////////////////
+// Compressed formats
+
+// WEBGL_compressed_texture_s3tc
+
+// {gl: GL.COMPRESSED_RGB_S3TC_DXT1_EXT, compressed: true, gl1: S3TC},
+// {gl: GL.COMPRESSED_RGBA_S3TC_DXT1_EXT, compressed: true, gl1: S3TC},
+// {gl: GL.COMPRESSED_RGBA_S3TC_DXT3_EXT, compressed: true, gl1: S3TC},
+// {gl: GL.COMPRESSED_RGBA_S3TC_DXT5_EXT, compressed: true, gl1: S3TC},
+
+// WEBGL_compressed_texture_es3
+
+// {gl: GL.COMPRESSED_R11_EAC, compressed: true, gl1: ES3}, // RED
+// {gl: GL.COMPRESSED_SIGNED_R11_EAC, compressed: true, gl1: ES3}, // RED
+// {gl: GL.COMPRESSED_RG11_EAC, compressed: true, gl1: ES3}, // RG
+// {gl: GL.COMPRESSED_SIGNED_RG11_EAC, compressed: true, gl1: ES3}, // RG
+// {gl: GL.COMPRESSED_RGB8_ETC2, compressed: true, gl1: ES3}, // RGB
+// {gl: GL.COMPRESSED_RGBA8_ETC2_EAC, compressed: true, gl1: ES3}, // RBG
+// {gl: GL.COMPRESSED_SRGB8_ETC2, compressed: true, gl1: ES3}, // RGB
+// {gl: GL.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC, compressed: true, gl1: ES3}, // RGBA
+// {gl: GL.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2, compressed: true, gl1: ES3}, // RGBA
+// {gl: GL.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2, compressed: true, gl1: ES3}, // RGBA
+/* WebGL2 guaranteed availability compressed formats?
+COMPRESSED_R11_EAC RED
+COMPRESSED_SIGNED_R11_EAC RED
+COMPRESSED_RG11_EAC RG
+COMPRESSED_SIGNED_RG11_EAC RG
+COMPRESSED_RGB8_ETC2 RGB
+COMPRESSED_SRGB8_ETC2 RGB
+COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2 RGBA
+COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2 RGBA
+COMPRESSED_RGBA8_ETC2_EAC RGBA
+COMPRESSED_SRGB8_ALPHA8_ETC2_EAC
+*/
+
+// WEBGL_compressed_texture_pvrtc
+
+// {gl: GL.COMPRESSED_RGB_PVRTC_4BPPV1_IMG, compressed: true, gl1: PVRTC},
+// {gl: GL.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG, compressed: true, gl1: PVRTC},
+// {gl: GL.COMPRESSED_RGB_PVRTC_2BPPV1_IMG, compressed: true, gl1: PVRTC},
+// {gl: GL.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG, compressed: true, gl1: PVRTC},
+
+// WEBGL_compressed_texture_etc1
+
+// {gl: GL.COMPRESSED_RGB_ETC1_WEBGL, compressed: true, gl1: ETC1},
+
+// WEBGL_compressed_texture_atc
+
+// {gl: GL.COMPRESSED_RGB_ATC_WEBGL, compressed: true, gl1: ETC1},
+// {gl: GL.COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL, compressed: true, gl1: ETC1},
+// {gl: GL.COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL, compressed: true, gl1: ETC1}