@luma.gl/webgl 9.0.0-beta.5 → 9.0.0-beta.7

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

@@ -1,9 +1,11 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import type {TextureFormat, DeviceFeature} from '@luma.gl/core';
 import {decodeTextureFormat} from '@luma.gl/core';
-import {GL} from '@luma.gl/constants';
+import {GL, GLExtensions} from '@luma.gl/constants';
+import {getWebGLExtension} from '../../context/helpers/webgl-extensions';
 import {getGLFromVertexType} from './vertex-formats';
 
 /* eslint-disable camelcase */
@@ -18,8 +20,15 @@ const texture_compression_etc1_webgl: DeviceFeature = 'texture-compression-etc1-
 const texture_compression_pvrtc_webgl: DeviceFeature = 'texture-compression-pvrtc-webgl';
 const texture_compression_atc_webgl: DeviceFeature = 'texture-compression-atc-webgl';
 
-// const float32_renderable_webgl: DeviceFeature = 'float32-renderable-webgl';
-// const float16_renderable_webgl: DeviceFeature = 'float16-renderable-webgl';
+const float32_renderable: DeviceFeature = 'float32-renderable-webgl';
+const float16_renderable: DeviceFeature = 'float16-renderable-webgl';
+const rgb9e5ufloat_renderable: DeviceFeature = 'rgb9e5ufloat_renderable-webgl';
+const snorm8_renderable: DeviceFeature = 'snorm8-renderable-webgl';
+const norm16_renderable: DeviceFeature = 'norm16-renderable-webgl';
+const snorm16_renderable: DeviceFeature = 'snorm16-renderable-webgl';
+
+const float32_filterable: DeviceFeature = 'float32-filterable';
+const float16_filterable: DeviceFeature = 'float16-filterable-webgl';
 
 // Define local webgl extension strings to optimize minification
 const X_S3TC = 'WEBGL_compressed_texture_s3tc'; // BC1, BC2, BC3
@@ -33,22 +42,21 @@ const X_PVRTC = 'WEBGL_compressed_texture_pvrtc';
 const X_ATC = 'WEBGL_compressed_texture_atc';
 
 // Define local webgl extension strings to optimize minification
-const EXT_TEXTURE_NORM16 = 'EXT_texture_norm16';
-const EXT_FLOAT_RENDER_WEBGL2 = 'EXT_color_buffer_float';
-// const EXT_HALF_FLOAT_WEBGL1 = 'EXT_color_buffer_half_float';
-// const DEPTH = 'WEBGL_depth_texture';
-
-// WebGL1-only extensions
-// const EXT_SRGB = 'EXT_sRGB'; // https://developer.mozilla.org/en-US/docs/Web/API/EXT_sRGB
+const EXT_texture_norm16 = 'EXT_texture_norm16';
+const EXT_render_snorm = 'EXT_render_snorm';
+const EXT_color_buffer_float = 'EXT_color_buffer_float';
 
 // prettier-ignore
-const TEXTURE_FEATURE_CHECKS: Partial<Record<DeviceFeature, string[]>> = {
-  'float32-renderable-webgl': ['EXT_color_buffer_float'], // [false, 'EXT_color_buffer_float'],
+export const TEXTURE_FEATURES: Partial<Record<DeviceFeature, string[]>> = {
+  'float32-renderable-webgl': ['EXT_color_buffer_float'],
   'float16-renderable-webgl': ['EXT_color_buffer_half_float'],
-  'norm16-renderable-webgl': [EXT_TEXTURE_NORM16],
+  'rgb9e5ufloat_renderable-webgl': ['WEBGL_render_shared_exponent'],
+  'snorm8-renderable-webgl': [EXT_render_snorm],
+  'norm16-renderable-webgl': [EXT_texture_norm16],
+  'snorm16-renderable-webgl': [EXT_texture_norm16, EXT_render_snorm],
 
-  'float32-filterable-linear-webgl': ['OES_texture_float_linear'],
-  'float16-filterable-linear-webgl': ['OES_texture_half_float_linear'],
+  'float32-filterable': ['OES_texture_float_linear'],
+  'float16-filterable-webgl': ['OES_texture_half_float_linear'],
   'texture-filterable-anisotropic-webgl': ['EXT_texture_filter_anisotropic'],
 
   'texture-blend-float-webgl': ['EXT_float_blend'],
@@ -65,19 +73,27 @@ const TEXTURE_FEATURE_CHECKS: Partial<Record<DeviceFeature, string[]>> = {
   'texture-compression-atc-webgl': [X_ATC]
 };
 
-function checkTextureFeature(gl: WebGL2RenderingContext, feature: DeviceFeature): boolean {
-  const extensions = TEXTURE_FEATURE_CHECKS[feature] || [];
-  return extensions.every(extension => gl.getExtension(extension));
-}
-
-function checkTextureFeatures(gl: WebGL2RenderingContext, features: DeviceFeature[]): boolean {
-  return features.every(feature => checkTextureFeature(gl, feature));
+/** Return a list of texture feature strings (for Device.features). Mainly compressed texture support */
+// export function getTextureFeatures(
+//   gl: WebGL2RenderingContext,
+//   extensions: GLExtensions
+// ): DeviceFeature[] {
+//   const textureFeatures = Object.keys(TEXTURE_FEATURES) as DeviceFeature[];
+//   return textureFeatures.filter(feature => checkTextureFeature(gl, feature, extensions));
+// }
+
+export function isTextureFeature(feature: DeviceFeature): boolean {
+  return feature in TEXTURE_FEATURES;
 }
 
-/** Return a list of texture feature strings (for Device.features). Mainly compressed texture support */
-export function getTextureFeatures(gl: WebGL2RenderingContext): DeviceFeature[] {
-  const textureFeatures = Object.keys(TEXTURE_FEATURE_CHECKS) as DeviceFeature[];
-  return textureFeatures.filter(feature => checkTextureFeature(gl, feature));
+/** Checks a texture feature (for Device.features). Mainly compressed texture support */
+export function checkTextureFeature(
+  gl: WebGL2RenderingContext,
+  feature: DeviceFeature,
+  extensions: GLExtensions
+): boolean {
+  const textureExtensions = TEXTURE_FEATURES[feature] || [];
+  return textureExtensions.every(extension => getWebGLExtension(gl, extension, extensions));
 }
 
 // TEXTURE FORMATS
@@ -114,8 +130,8 @@ type Format = {
   attachment?: GL.DEPTH_ATTACHMENT | GL.STENCIL_ATTACHMENT | GL.DEPTH_STENCIL_ATTACHMENT;
   /** if depthTexture is set this is a depth/stencil format that can be set to a texture  */
   depthTexture?: boolean;
-
-  renderbuffer?: boolean;
+  /** @deprecated can this format be used with renderbuffers */
+  rb?: boolean;
 };
 
 // TABLES
@@ -126,38 +142,37 @@ type Format = {
  */
 // prettier-ignore
 export const TEXTURE_FORMATS: Record<TextureFormat, Format> = {
-  // Unsized formats that leave the precision up to the driver.
-  // TODO - Fix bpp constants
-  // 'r8unorm-unsized': {gl: GL.LUMINANCE, b: 4, c: 2, bpp: 4},
+  // Unsized formats that leave the precision up to the driver. TODO - Fix bpp constants
   'rgb8unorm-unsized': {gl: GL.RGB, b: 4, c: 2, bpp: 4,
     dataFormat: GL.RGB, types: [GL.UNSIGNED_BYTE, GL.UNSIGNED_SHORT_5_6_5]},
   'rgba8unorm-unsized': {gl: GL.RGBA, b: 4, c: 2, bpp: 4,
     dataFormat: GL.RGBA, types: [GL.UNSIGNED_BYTE, GL.UNSIGNED_SHORT_4_4_4_4, GL.UNSIGNED_SHORT_5_5_5_1]},
+  // 'r8unorm-unsized': {gl: GL.LUMINANCE, b: 4, c: 2, bpp: 4},
   // 'rgb8unorm-srgb-unsized': {gl: GL.SRGB_EXT, b: 4, c: 2, bpp: 4, gl1Ext: SRGB},
   // 'rgba8unorm-srgb-unsized': {gl: GL.SRGB_ALPHA_EXT, b: 4, c: 2, bpp: 4, gl1Ext: SRGB},
 
   // 8-bit formats
-  'r8unorm': {gl: GL.R8, b: 1, c: 1, renderbuffer: true},
-  'r8snorm': {gl: GL.R8_SNORM, b: 1, c: 1},
-  'r8uint': {gl: GL.R8UI, b: 1, c: 1, renderbuffer: true},
-  'r8sint': {gl: GL.R8I, b: 1, c: 1, renderbuffer: true},
+  'r8unorm': {gl: GL.R8, b: 1, c: 1, rb: true},
+  'r8snorm': {gl: GL.R8_SNORM, b: 1, c: 1, render: snorm8_renderable},
+  'r8uint': {gl: GL.R8UI, b: 1, c: 1, rb: true},
+  'r8sint': {gl: GL.R8I, b: 1, c: 1, rb: true},
 
   // 16-bit formats
-  'rg8unorm': {gl: GL.RG8, b: 2, c: 2, renderbuffer: true},
-  'rg8snorm': {gl: GL.RG8_SNORM, b: 2, c: 2},
-  'rg8uint': {gl: GL.RG8UI, b: 2, c: 2, renderbuffer: true},
-  'rg8sint': {gl: GL.RG8I, b: 2, c: 2, renderbuffer: true},
+  'rg8unorm': {gl: GL.RG8, b: 2, c: 2, rb: true},
+  'rg8snorm': {gl: GL.RG8_SNORM, b: 2, c: 2, render: snorm8_renderable},
+  'rg8uint': {gl: GL.RG8UI, b: 2, c: 2, rb: true},
+  'rg8sint': {gl: GL.RG8I, b: 2, c: 2, rb: true},
 
-  'r16uint': {gl: GL.R16UI, b: 2, c: 1, renderbuffer: true},
-  'r16sint': {gl: GL.R16I, b: 2, c: 1, renderbuffer: true},
-  'r16float': {gl: GL.R16F, b: 2, c: 1, render: 'float16-renderable-webgl', filter: 'float16-filterable-linear-webgl', renderbuffer: true},
-  'r16unorm-webgl': {gl: GL.R16_EXT, b:2, c:1, f: 'norm16-renderable-webgl', renderbuffer: true, x: EXT_TEXTURE_NORM16},
-  'r16snorm-webgl': {gl: GL.R16_SNORM_EXT, b:2, c:1, f: 'norm16-renderable-webgl', x: EXT_TEXTURE_NORM16},
+  'r16uint': {gl: GL.R16UI, b: 2, c: 1, rb: true},
+  'r16sint': {gl: GL.R16I, b: 2, c: 1, rb: true},
+  'r16float': {gl: GL.R16F, b: 2, c: 1, render: float16_renderable, filter: 'float16-filterable-webgl', rb: true},
+  'r16unorm-webgl': {gl: GL.R16_EXT, b:2, c:1, f: norm16_renderable, rb: true},
+  'r16snorm-webgl': {gl: GL.R16_SNORM_EXT, b:2, c:1, f: snorm16_renderable},
 
   // Packed 16-bit formats
-  'rgba4unorm-webgl': {gl: GL.RGBA4, b: 2, c: 4, wgpu: false, renderbuffer: true},
-  'rgb565unorm-webgl': {gl: GL.RGB565, b: 2, c: 4, wgpu: false, renderbuffer: true},
-  'rgb5a1unorm-webgl': {gl: GL.RGB5_A1, b: 2, c: 4, wgpu: false, renderbuffer: true},
+  'rgba4unorm-webgl': {gl: GL.RGBA4, b: 2, c: 4, wgpu: false, rb: true},
+  'rgb565unorm-webgl': {gl: GL.RGB565, b: 2, c: 4, wgpu: false, rb: true},
+  'rgb5a1unorm-webgl': {gl: GL.RGB5_A1, b: 2, c: 4, wgpu: false, rb: true},
 
   // 24-bit formats
   'rgb8unorm-webgl': {gl: GL.RGB8, b: 3, c: 3, wgpu: false},
@@ -166,7 +181,7 @@ export const TEXTURE_FORMATS: Record<TextureFormat, Format> = {
   // 32-bit formats  
   'rgba8unorm': {gl: GL.RGBA8, b: 4, c: 2, bpp: 4},
   'rgba8unorm-srgb': {gl: GL.SRGB8_ALPHA8, b: 4, c: 4, bpp: 4},
-  'rgba8snorm': {gl: GL.RGBA8_SNORM, b: 4, c: 4},
+  'rgba8snorm': {gl: GL.RGBA8_SNORM, b: 4, c: 4, render: snorm8_renderable},
   'rgba8uint': {gl: GL.RGBA8UI, b: 4, c: 4, bpp: 4},
   'rgba8sint': {gl: GL.RGBA8I, b: 4, c: 4, bpp: 4},
   // reverse colors, webgpu only
@@ -176,56 +191,62 @@ export const TEXTURE_FORMATS: Record<TextureFormat, Format> = {
   'rg16uint': {gl: GL.RG16UI, b: 4, c: 1, bpp: 4},
   'rg16sint': {gl: GL.RG16I, b: 4, c: 2, bpp: 4},
   // When using a WebGL 2 context and the EXT_color_buffer_float WebGL2 extension
-  'rg16float': {gl: GL.RG16F, bpp: 4, b: 4, c: 2, render: 'float16-renderable-webgl', filter: 'float16-filterable-linear-webgl', renderbuffer: true},
-  'rg16unorm-webgl': {gl: GL.RG16_EXT, b:2, c:2, f: 'norm16-renderable-webgl', x: EXT_TEXTURE_NORM16},
-  'rg16snorm-webgl': {gl: GL.RG16_SNORM_EXT, b:2, c:2, f: 'norm16-renderable-webgl', x: EXT_TEXTURE_NORM16},
+  'rg16float': {gl: GL.RG16F, bpp: 4, b: 4, c: 2, render: float16_renderable, filter: float16_filterable, rb: true},
+  'rg16unorm-webgl': {gl: GL.RG16_EXT, b:2, c:2, render: norm16_renderable},
+  'rg16snorm-webgl': {gl: GL.RG16_SNORM_EXT, b:2, c:2, render: snorm16_renderable},
 
-  'r32uint': {gl: GL.R32UI, b: 4, c: 1, bpp: 4, renderbuffer: true},
-  'r32sint': {gl: GL.R32I, b: 4, c: 1, bpp: 4, renderbuffer: true},
-  'r32float': {gl: GL.R32F, bpp: 4, b: 4, c: 1, render: 'float32-renderable-webgl', filter: 'float32-filterable-linear-webgl'},
+  'r32uint': {gl: GL.R32UI, b: 4, c: 1, bpp: 4, rb: true},
+  'r32sint': {gl: GL.R32I, b: 4, c: 1, bpp: 4, rb: true},
+  'r32float': {gl: GL.R32F, bpp: 4, b: 4, c: 1, render: float32_renderable, filter: float32_filterable},
 
   // Packed 32-bit formats
-  'rgb9e5ufloat': {gl: GL.RGB9_E5, b: 4, c: 3, p: 1, render: 'float16-renderable-webgl', filter: 'float16-filterable-linear-webgl'},
-  'rg11b10ufloat': {gl: GL.R11F_G11F_B10F, b: 4, c: 3, p: 1,render: 'float32-renderable-webgl', renderbuffer: true},
-  'rgb10a2unorm': {gl: GL.RGB10_A2, b: 4, c: 4, p: 1, renderbuffer: true},
-  'rgb10a2unorm-webgl': {b: 4, c: 4, gl: GL.RGB10_A2UI, p: 1, wgpu: false, bpp: 4, renderbuffer: true},
+  'rgb9e5ufloat': {gl: GL.RGB9_E5, b: 4, c: 3, p: 1, render: rgb9e5ufloat_renderable}, // , filter: true},
+  'rg11b10ufloat': {gl: GL.R11F_G11F_B10F, b: 4, c: 3, p: 1,render: float32_renderable, rb: true},
+  'rgb10a2unorm': {gl: GL.RGB10_A2, b: 4, c: 4, p: 1, rb: true},
+  'rgb10a2uint-webgl': {b: 4, c: 4, gl: GL.RGB10_A2UI, p: 1, wgpu: false, bpp: 4, rb: true},
 
   // 48-bit formats
-  'rgb16unorm-webgl': {gl: GL.RGB16_EXT, b:2, c:3, f: 'norm16-renderable-webgl', x: EXT_TEXTURE_NORM16},
-  'rgb16snorm-webgl': {gl: GL.RGB16_SNORM_EXT, b:2, c:3, f: 'norm16-renderable-webgl', x: EXT_TEXTURE_NORM16},
+  'rgb16unorm-webgl': {gl: GL.RGB16_EXT, b:2, c:3, f: norm16_renderable}, // rgb not renderable
+  'rgb16snorm-webgl': {gl: GL.RGB16_SNORM_EXT, b:2, c:3, f: norm16_renderable}, // rgb not renderable
 
   // 64-bit formats
-  'rg32uint': {gl: GL.RG32UI, b: 8, c: 2, renderbuffer: true},
-  'rg32sint': {gl: GL.RG32I, b: 8, c: 2, renderbuffer: true},
-  'rg32float': {gl: GL.RG32F, b: 8, c: 2, render: 'float32-renderable-webgl', filter: 'float32-filterable-linear-webgl', renderbuffer: true},
-  'rgba16uint': {gl: GL.RGBA16UI, b: 8, c: 4, renderbuffer: true},
-  'rgba16sint': {gl: GL.RGBA16I, b: 8, c: 4, renderbuffer: true},
-  'rgba16float': {gl: GL.RGBA16F, b: 8, c: 4, render: 'float16-renderable-webgl', filter: 'float16-filterable-linear-webgl'},
-  'rgba16unorm-webgl': {gl: GL.RGBA16_EXT, b:2, c:4, f: 'norm16-renderable-webgl', renderbuffer: true, x: EXT_TEXTURE_NORM16},
-  'rgba16snorm-webgl': {gl: GL.RGBA16_SNORM_EXT, b:2, c:4, f: 'norm16-renderable-webgl', x: EXT_TEXTURE_NORM16},
+  'rg32uint': {gl: GL.RG32UI, b: 8, c: 2, rb: true},
+  'rg32sint': {gl: GL.RG32I, b: 8, c: 2, rb: true},
+  'rg32float': {gl: GL.RG32F, b: 8, c: 2, render: float32_renderable, filter: float32_filterable, rb: true},
+  'rgba16uint': {gl: GL.RGBA16UI, b: 8, c: 4, rb: true},
+  'rgba16sint': {gl: GL.RGBA16I, b: 8, c: 4, rb: true},
+  'rgba16float': {gl: GL.RGBA16F, b: 8, c: 4, render: float16_renderable, filter: float16_filterable},
+  'rgba16unorm-webgl': {gl: GL.RGBA16_EXT, b:2, c:4, render: norm16_renderable, rb: true},
+  'rgba16snorm-webgl': {gl: GL.RGBA16_SNORM_EXT, b:2, c:4, render: snorm16_renderable},
 
   // 96-bit formats (deprecated!)
-  'rgb32float-webgl': {gl: GL.RGB32F, render: 'float32-renderable-webgl', filter: 'float32-filterable-linear-webgl',
-    gl2ext: EXT_FLOAT_RENDER_WEBGL2, dataFormat: GL.RGB, types: [GL.FLOAT]},
+  'rgb32float-webgl': {gl: GL.RGB32F, render: float32_renderable, filter: float32_filterable,
+    gl2ext: EXT_color_buffer_float, dataFormat: GL.RGB, types: [GL.FLOAT]},
   
   // 128-bit formats
-  'rgba32uint': {gl: GL.RGBA32UI, b: 16, c: 4, renderbuffer: true},
-  'rgba32sint': {gl: GL.RGBA32I, b: 16, c: 4, renderbuffer: true},
-  'rgba32float': {gl: GL.RGBA32F, b: 16, c: 4, render: 'float32-renderable-webgl', filter: 'float32-filterable-linear-webgl', renderbuffer: true},
+  'rgba32uint': {gl: GL.RGBA32UI, b: 16, c: 4, rb: true},
+  'rgba32sint': {gl: GL.RGBA32I, b: 16, c: 4, rb: true},
+  'rgba32float': {gl: GL.RGBA32F, b: 16, c: 4, render: float32_renderable, filter: float32_filterable, rb: true},
 
   // Depth and stencil formats
-  'stencil8': {gl: GL.STENCIL_INDEX8, b: 1, c: 1, attachment: GL.STENCIL_ATTACHMENT, renderbuffer: true}, // 8 stencil bits
+  'stencil8': {gl: GL.STENCIL_INDEX8, b: 1, c: 1, attachment: GL.STENCIL_ATTACHMENT, rb: true}, // 8 stencil bits
 
-  'depth16unorm': {gl: GL.DEPTH_COMPONENT16, b: 2, c: 1, attachment: GL.DEPTH_ATTACHMENT, renderbuffer: true}, // 16 depth bits
-  'depth24plus': {gl: GL.DEPTH_COMPONENT24, b: 3, c: 1, attachment: GL.DEPTH_ATTACHMENT},
-  'depth32float': {gl: GL.DEPTH_COMPONENT32F, b: 4, c: 1, attachment: GL.DEPTH_ATTACHMENT, renderbuffer: true},
+  'depth16unorm': {gl: GL.DEPTH_COMPONENT16, b: 2, c: 1, attachment: GL.DEPTH_ATTACHMENT, 
+    dataFormat: GL.DEPTH_COMPONENT, types: [GL.UNSIGNED_SHORT], rb: true}, // 16 depth bits
+  'depth24plus': {gl: GL.DEPTH_COMPONENT24, b: 3, c: 1, attachment: GL.DEPTH_ATTACHMENT,
+    dataFormat: GL.DEPTH_COMPONENT, types: [GL.UNSIGNED_INT]},
+  'depth32float': {gl: GL.DEPTH_COMPONENT32F, b: 4, c: 1, attachment: GL.DEPTH_ATTACHMENT, 
+    dataFormat: GL.DEPTH_COMPONENT, types: [GL.FLOAT], rb: true},
 
   // The depth component of the "depth24plus" and "depth24plus-stencil8" formats may be implemented as either a 24-bit depth value or a "depth32float" value.
-  'depth24plus-stencil8': {gl: GL.DEPTH_STENCIL, b: 4, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT, renderbuffer: true, depthTexture: true},
+  'depth24plus-stencil8': {gl: GL.DEPTH24_STENCIL8, b: 4, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT, rb: true, depthTexture: true,
+    dataFormat: GL.DEPTH_STENCIL, types: [GL.UNSIGNED_INT_24_8]},
   // "depth24unorm-stencil8" feature
-  'depth24unorm-stencil8': {gl: GL.DEPTH24_STENCIL8, b: 4, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT, renderbuffer: true},
-  // "depth32float-stencil8" feature
-  'depth32float-stencil8': {gl: GL.DEPTH32F_STENCIL8, b: 5, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT, renderbuffer: true},
+  'depth24unorm-stencil8': {gl: GL.DEPTH24_STENCIL8, b: 4, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT, 
+    dataFormat: GL.DEPTH_STENCIL, types: [GL.UNSIGNED_INT_24_8], rb: true},
+  // "depth32float-stencil8" feature - TODO below is render buffer only?
+  'depth32float-stencil8': {gl: GL.DEPTH32F_STENCIL8, b: 5, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT, 
+    dataFormat: GL.DEPTH_STENCIL, types: [GL.FLOAT_32_UNSIGNED_INT_24_8_REV], rb: true},
 
   // BC compressed formats: check device.features.has("texture-compression-bc");
 
@@ -400,7 +421,7 @@ export const RENDERBUFFER_FORMATS: Record<string, RenderbufferFormat> = {
   [GL.RG32F]: {ext: EXT_FLOAT_WEBGL2, bpp: 8},
   // TODO - can't get WEBGL_color_buffer_float to work on renderbuffers
   [GL.RGBA32F]: {ext: EXT_FLOAT_WEBGL2, bpp: 16},
-  // [GL.RGBA32F]: {ext: EXT_FLOAT_WEBGL2, gl1: EXT_FLOAT_WEBGL1},
+  // [GL.RGBA32F]: {ext: EXT_FLOAT_WEBGL2},
   [GL.R11F_G11F_B10F]: {ext: EXT_FLOAT_WEBGL2, bpp: 4}
 };
 */
@@ -439,9 +460,9 @@ const TYPE_SIZES = {
 /** Checks if a texture format is supported */
 export function isTextureFormatSupported(
   gl: WebGL2RenderingContext,
-  formatOrGL: TextureFormat | GL
+  format: TextureFormat,
+  extensions: GLExtensions
 ): boolean {
-  const format = convertGLToTextureFormat(formatOrGL);
   const info = TEXTURE_FORMATS[format];
   if (!info) {
     return false;
@@ -453,17 +474,18 @@ export function isTextureFormatSupported(
   // Check extensions
   const extension = info.x || info.gl2ext;
   if (extension) {
-    return Boolean(gl.getExtension(extension));
+    return Boolean(getWebGLExtension(gl, extension, extensions));
   }
   return true;
 }
 
 export function isRenderbufferFormatSupported(
   gl: WebGL2RenderingContext,
-  format: TextureFormat
+  format: TextureFormat,
+  extensions: GLExtensions
 ): boolean {
   // Note: Order is important since the function call initializes extensions.
-  return isTextureFormatSupported(gl, format) && TEXTURE_FORMATS[format]?.renderbuffer;
+  return isTextureFormatSupported(gl, format, extensions) && TEXTURE_FORMATS[format]?.rb;
 }
 
 /**
@@ -495,7 +517,8 @@ export function convertTextureFormatToGL(format: TextureFormat): GL | undefined
 /** Checks if a texture format is supported */
 export function getTextureFormatSupport(
   gl: WebGL2RenderingContext,
-  formatOrGL: TextureFormat | GL
+  format: TextureFormat,
+  extensions: GLExtensions
 ): {
   supported: boolean;
   filterable?: boolean;
@@ -503,7 +526,6 @@ export function getTextureFormatSupport(
   blendable?: boolean;
   storable?: boolean;
 } {
-  const format = convertGLToTextureFormat(formatOrGL);
   const info = TEXTURE_FORMATS[format];
   if (!info) {
     return {supported: false};
@@ -515,20 +537,20 @@ export function getTextureFormatSupport(
 
   // Support Check that we have a GL constant
   let supported = info.gl === undefined;
-  supported = supported && checkTextureFeatures(gl, [info.f]);
+  supported = supported && checkTextureFeature(gl, info.f, extensions);
 
   // Filtering
   // const filterable = info.filter
-  //   ? checkTextureFeatures(gl, [info.filter])
+  //   ? checkTextureFeature(gl, infofilter])
   //   : decoded && !decoded.signed;
   // const renderable = info.filter
-  //   ? checkTextureFeatures(gl, [info.render])
+  //   ? checkTextureFeature(gl, inforender])
   //   : decoded && !decoded.signed;
 
   return {
     supported,
-    renderable: supported && checkTextureFeatures(gl, [info.render]),
-    filterable: supported && checkTextureFeatures(gl, [info.filter]),
+    renderable: supported && checkTextureFeature(gl, info.render, extensions),
+    filterable: supported && checkTextureFeature(gl, info.filter, extensions),
     blendable: false, // tod,
     storable: false
   };
@@ -537,10 +559,13 @@ export function getTextureFormatSupport(
 /** Checks whether linear filtering (interpolated sampling) is available for floating point textures */
 export function isTextureFormatFilterable(
   gl: WebGL2RenderingContext,
-  formatOrGL: TextureFormat | GL
+  format: TextureFormat,
+  extensions: GLExtensions
 ): boolean {
-  const format = convertGLToTextureFormat(formatOrGL);
-  if (!isTextureFormatSupported(gl, format)) {
+  if (!isTextureFormatSupported(gl, format, extensions)) {
+    return false;
+  }
+  if (format.startsWith('depth') || format.startsWith('stencil')) {
     return false;
   }
   try {
@@ -552,20 +577,20 @@ export function isTextureFormatFilterable(
     return false;
   }
   if (format.endsWith('32float')) {
-    return Boolean(gl.getExtension('OES_texture_float_linear'));
+    return Boolean(getWebGLExtension(gl, 'OES_texture_float_linear, extensions', extensions));
   }
   if (format.endsWith('16float')) {
-    return Boolean(gl.getExtension('OES_texture_half_float_linear'));
+    return Boolean(getWebGLExtension(gl, 'OES_texture_half_float_linear, extensions', extensions));
   }
   return true;
 }
 
 export function isTextureFormatRenderable(
   gl: WebGL2RenderingContext,
-  formatOrGL: TextureFormat | GL
+  format: TextureFormat,
+  extensions: GLExtensions
 ): boolean {
-  const format = convertGLToTextureFormat(formatOrGL);
-  if (!isTextureFormatSupported(gl, format)) {
+  if (!isTextureFormatSupported(gl, format, extensions)) {
     return false;
   }
   if (typeof format === 'number') {
@@ -575,20 +600,20 @@ export function isTextureFormatRenderable(
   return true;
 }
 
-export function getWebGLTextureParameters(formatOrGL: TextureFormat | GL) {
-  const format = convertGLToTextureFormat(formatOrGL);
+/** Get parameters necessary to work with format in WebGL: internalFormat, dataFormat, type, compressed, */
+export function getWebGLTextureParameters(format: TextureFormat) {
+  const formatData = TEXTURE_FORMATS[format];
   const webglFormat = convertTextureFormatToGL(format);
   const decoded = decodeTextureFormat(format);
   return {
     format: webglFormat,
-    dataFormat: getWebGLPixelDataFormat(
-      decoded.format,
-      decoded.integer,
-      decoded.normalized,
-      webglFormat
-    ),
+    dataFormat:
+      formatData?.dataFormat ||
+      getWebGLPixelDataFormat(decoded.format, decoded.integer, decoded.normalized, webglFormat),
     // depth formats don't have a type
-    type: decoded.dataType ? getGLFromVertexType(decoded.dataType) : GL.UNSIGNED_BYTE,
+    type: decoded.dataType
+      ? getGLFromVertexType(decoded.dataType)
+      : formatData?.types?.[0] || GL.UNSIGNED_BYTE,
     // @ts-expect-error
     compressed: decoded.compressed
   };
@@ -605,9 +630,8 @@ export function getDepthStencilAttachmentWebGL(
 }
 
 /** TODO - VERY roundabout legacy way of calculating bytes per pixel */
-export function getTextureFormatBytesPerPixel(formatOrGL: TextureFormat | GL): number {
+export function getTextureFormatBytesPerPixel(format: TextureFormat): number {
   // TODO remove webgl1 support
-  const format = convertGLToTextureFormat(formatOrGL);
   const params = getWebGLTextureParameters(format);
   // NOTE(Tarek): Default to RGBA bytes
   const channels = DATA_FORMAT_CHANNELS[params.dataFormat] || 4;

package/src/adapter/converters/vertex-formats.ts

@@ -1,10 +1,11 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import {GL} from '@luma.gl/constants';
 import {VertexFormat, VertexType} from '@luma.gl/core';
 
-type GLDataType = 
+type GLDataType =
   | GL.UNSIGNED_BYTE
   | GL.BYTE
   | GL.UNSIGNED_SHORT
@@ -14,7 +15,6 @@ type GLDataType =
   | GL.HALF_FLOAT
   | GL.FLOAT;
 
-
 /** Get vertex format from GL constants */
 export function getVertexFormatFromGL(type: GLDataType, components: 1 | 2 | 3 | 4): VertexFormat {
   const base = getVertexTypeFromGL(type);

package/src/adapter/device-helpers/webgl-device-features.ts

@@ -1,69 +1,121 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 // Feature detection for WebGL
 // Provides a function that enables simple checking of which WebGL features are
 
-import {DeviceFeature} from '@luma.gl/core';
-import {getTextureFeatures} from '../converters/texture-formats';
+import {DeviceFeature, DeviceFeatures} from '@luma.gl/core';
+import {GLExtensions} from '@luma.gl/constants';
+import {getWebGLExtension} from '../../context/helpers/webgl-extensions';
+import {isTextureFeature, checkTextureFeature} from '../converters/texture-formats';
+import {TEXTURE_FEATURES} from '../converters/texture-formats';
 
-/** Get WebGPU style feature strings */
-export function getDeviceFeatures(gl: WebGL2RenderingContext): Set<DeviceFeature> {
-  const features = getWebGLFeatures(gl);
+/**
+ * Defines luma.gl "feature" names and semantics
+ * when value is 'string' it is the name of the extension that enables this feature
+ */
+const WEBGL_FEATURES: Partial<Record<DeviceFeature, boolean | string>> = {
+  // optional WebGPU features
+  'depth-clip-control': 'EXT_depth_clamp', // TODO these seem subtly different
+  // 'timestamp-query' // GPUQueryType "timestamp-query"
+  // "indirect-first-instance"
+  // Textures are handled by getTextureFeatures()
+  // 'depth24unorm-stencil8' // GPUTextureFormat 'depth24unorm-stencil8'
+  // 'depth32float-stencil8' // GPUTextureFormat 'depth32float-stencil8'
 
-  // texture features
-  // features.add('texture-compression-bc');
-  for (const textureFeature of getTextureFeatures(gl)) {
-    features.add(textureFeature);
-  }
+  // optional WebGL features
+  'timer-query-webgl': 'EXT_disjoint_timer_query_webgl2',
+  'compilation-status-async-webgl': 'KHR_parallel_shader_compile',
+  'polygon-mode-webgl': 'WEBGL_polygon_mode',
+  'provoking-vertex-webgl': 'WEBGL_provoking_vertex',
+  'shader-clip-cull-distance-webgl': 'WEBGL_clip_cull_distance',
+  'shader-noperspective-interpolation-webgl': 'NV_shader_noperspective_interpolation',
+  'shader-conservative-depth-webgl': 'EXT_conservative_depth'
 
-  // TODO
-  // features.add('depth-clip-control'); // GPUPrimitiveState.clampDepth
-  // features.add('depth24unorm-stencil8'); // GPUTextureFormat 'depth24unorm-stencil8'.
-  // features.add('depth32float-stencil8'); // GPUTextureFormat 'depth32float-stencil8'.
-  // features.add('timestamp-query'); // GPUQueryType "timestamp-query"
-  // "indirect-first-instance"
+  // Textures are handled by getTextureFeatures()
+};
 
-  return features;
-}
+/**
+ * WebGL extensions exposed as luma.gl features
+ * To minimize GL log noise and improve performance, this class ensures that
+ * - WebGL extensions are not queried until the corresponding feature is checked.
+ * - WebGL extensions are only queried once.
+ */
+export class WebGLDeviceFeatures extends DeviceFeatures {
+  protected gl: WebGL2RenderingContext;
+  protected extensions: GLExtensions;
+  protected testedFeatures = new Set<DeviceFeature>();
 
-/** Extract all WebGL features */
-export function getWebGLFeatures(gl: WebGL2RenderingContext): Set<DeviceFeature> {
-  // Enable EXT_float_blend first: https://developer.mozilla.org/en-US/docs/Web/API/EXT_float_blend
-  gl.getExtension('EXT_color_buffer_float');
+  constructor(
+    gl: WebGL2RenderingContext,
+    extensions: GLExtensions,
+    disabledFeatures: Partial<Record<DeviceFeature, boolean>>
+  ) {
+    super([], disabledFeatures);
+    this.gl = gl;
+    this.extensions = extensions;
+    // TODO - is this really needed?
+    // Enable EXT_float_blend first: https://developer.mozilla.org/en-US/docs/Web/API/EXT_float_blend
+    getWebGLExtension(gl, 'EXT_color_buffer_float', extensions);
+  }
 
-  const features = new Set<DeviceFeature>();
-  for (const feature of Object.keys(WEBGL_FEATURES) as DeviceFeature[]) {
-    if (isFeatureSupported(gl, feature)) {
-      features.add(feature);
+  *[Symbol.iterator](): IterableIterator<DeviceFeature> {
+    for (const feature of Object.keys(WEBGL_FEATURES) as DeviceFeature[]) {
+      if (this.has(feature)) {
+        yield feature;
+      }
+    }
+    for (const feature of Object.keys(TEXTURE_FEATURES) as DeviceFeature[]) {
+      if (this.has(feature)) {
+        yield feature;
+      }
     }
+    return [];
   }
-  return features;
-}
 
-function isFeatureSupported(gl: WebGL2RenderingContext, feature: DeviceFeature): boolean {
-  const featureInfo = WEBGL_FEATURES[feature];
+  override has(feature: DeviceFeature): boolean {
+    if (this.disabledFeatures[feature]) {
+      return false;
+    }
 
-  // string value requires checking the corresponding WebGL extension
-  return typeof featureInfo === 'string'
-    ? Boolean(gl.getExtension(featureInfo))
-    : Boolean(featureInfo);
-}
+    // We have already tested this feature
+    if (!this.testedFeatures.has(feature)) {
+      this.testedFeatures.add(feature);
 
-/**
- * Defines luma.gl "feature" names and semantics
- * when value is 'string' it is the name of the extension that enables this feature
- */
-const WEBGL_FEATURES: Partial<Record<DeviceFeature, boolean | string>> = {
-  webgl: true,
-  glsl: true,
+      // Check the feature once
+      if (isTextureFeature(feature) && checkTextureFeature(this.gl, feature, this.extensions)) {
+        this.features.add(feature);
+      }
 
-  'uniforms-webgl': true,
-  'transform-feedback-webgl': true,
-  'constant-attributes-webgl': true,
+      if (this.getWebGLFeature(feature)) {
+        this.features.add(feature);
+      }
+    }
+    return this.features.has(feature);
+  }
 
-  'timer-query-webgl': 'EXT_disjoint_timer_query_webgl2',
-  'shader-status-async-webgl': 'KHR_parallel_shader_compile'
+  // FOR DEVICE
 
-  // Textures are handled by getTextureFeatures()
-};
+  initializeFeatures() {
+    // @ts-expect-error
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    for (const feature of this) {
+      // WebGL extensions are initialized by requesting them
+    }
+  }
+
+  // IMPLEMENTATION
+
+  /** Extract all WebGL features */
+  protected getWebGLFeature(feature: DeviceFeature): boolean {
+    const featureInfo = WEBGL_FEATURES[feature];
+    // string value requires checking the corresponding WebGL extension
+    const isSupported =
+      typeof featureInfo === 'string'
+        ? Boolean(getWebGLExtension(this.gl, featureInfo, this.extensions))
+        : Boolean(featureInfo);
+
+    return isSupported;
+  }
+}