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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-beta.5",
+  "version": "9.0.0-beta.6",
   "description": "WebGL2 adapter for the luma.gl core API",
   "type": "module",
   "license": "MIT",
@@ -43,9 +43,9 @@
     "@luma.gl/constants": "^9.0.0-beta.4"
   },
   "dependencies": {
-    "@luma.gl/constants": "9.0.0-beta.5",
-    "@luma.gl/core": "9.0.0-beta.5",
+    "@luma.gl/constants": "9.0.0-beta.6",
+    "@luma.gl/core": "9.0.0-beta.6",
     "@probe.gl/env": "^4.0.2"
   },
-  "gitHead": "793d3ab42f5a572b6cb603ea78aabaa73a873301"
+  "gitHead": "cb2f0938d03a65e3588622ac99650b14a10488b6"
 }

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

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import {
@@ -28,7 +29,7 @@ import {WebGLDevice} from '../webgl-device';
  * - Returns the return value of the supplied function
  */
 export function withDeviceAndGLParameters<T = unknown>(
-  device: Device, 
+  device: Device,
   parameters: Parameters,
   glParameters: GLParameters,
   func: (device?: Device) => T
@@ -143,6 +144,13 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
     );
   }
 
+  if (parameters.unclippedDepth) {
+    if (device.features.has('depth-clip-control')) {
+      // EXT_depth_clamp
+      gl.enable(GL.DEPTH_CLAMP_EXT);
+    }
+  }
+
   if (parameters.depthBias !== undefined) {
     gl.polygonOffset(parameters.depthBias, parameters.depthBiasSlopeScale || 0);
   }
@@ -151,6 +159,66 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
   //   // Handled by depthBias
   // },
 
+  // WEBGL EXTENSIONS
+
+  if (device.features.has('provoking-vertex-webgl')) {
+    const extensions = webglDevice.getExtension('WEBGL_provoking_vertex');
+    const ext = extensions.WEBGL_provoking_vertex;
+
+    if (parameters.provokingVertex) {
+      const vertex = map('provokingVertex', parameters.provokingVertex, {
+        first: GL.FIRST_VERTEX_CONVENTION_WEBGL,
+        last: GL.LAST_VERTEX_CONVENTION_WEBGL
+      });
+      ext?.provokingVertexWEBGL(vertex);
+    }
+  }
+
+  if (device.features.has('polygon-mode-webgl')) {
+    const extensions = webglDevice.getExtension('WEBGL_polygon_mode');
+    const ext = extensions.WEBGL_polygon_mode;
+
+    if (parameters.polygonMode) {
+      const mode = map('polygonMode', parameters.provokingVertex, {
+        fill: GL.FILL_WEBGL,
+        lint: GL.LINE_WEBGL
+      });
+      ext?.polygonModeWEBGL(GL.FRONT, mode);
+      ext?.polygonModeWEBGL(GL.BACK, mode);
+    }
+
+    if (parameters.polygonOffsetLine) {
+      gl.enable(GL.POLYGON_OFFSET_LINE_WEBGL);
+    }
+  }
+
+  if (device.features.has('shader-clip-cull-distance-webgl')) {
+    if (parameters.clipDistance0) {
+      gl.enable(GL.CLIP_DISTANCE0_WEBGL);
+    }
+    if (parameters.clipDistance1) {
+      gl.enable(GL.CLIP_DISTANCE1_WEBGL);
+    }
+    if (parameters.clipDistance2) {
+      gl.enable(GL.CLIP_DISTANCE2_WEBGL);
+    }
+    if (parameters.clipDistance3) {
+      gl.enable(GL.CLIP_DISTANCE3_WEBGL);
+    }
+    if (parameters.clipDistance4) {
+      gl.enable(GL.CLIP_DISTANCE4_WEBGL);
+    }
+    if (parameters.clipDistance5) {
+      gl.enable(GL.CLIP_DISTANCE5_WEBGL);
+    }
+    if (parameters.clipDistance6) {
+      gl.enable(GL.CLIP_DISTANCE6_WEBGL);
+    }
+    if (parameters.clipDistance7) {
+      gl.enable(GL.CLIP_DISTANCE7_WEBGL);
+    }
+  }
+
   // DEPTH STENCIL
 
   if (parameters.depthWriteEnabled !== undefined) {
@@ -212,14 +280,32 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
   if (parameters.blendColorOperation || parameters.blendAlphaOperation) {
     gl.enable(GL.BLEND);
 
-    const colorEquation = convertBlendOperationToEquation('blendColorOperation', parameters.blendColorOperation || 'add');
-    const alphaEquation = convertBlendOperationToEquation('blendAlphaOperation', parameters.blendAlphaOperation || 'add');
+    const colorEquation = convertBlendOperationToEquation(
+      'blendColorOperation',
+      parameters.blendColorOperation || 'add'
+    );
+    const alphaEquation = convertBlendOperationToEquation(
+      'blendAlphaOperation',
+      parameters.blendAlphaOperation || 'add'
+    );
     gl.blendEquationSeparate(colorEquation, alphaEquation);
 
-    const colorSrcFactor = convertBlendFactorToFunction('blendColorSrcFactor', parameters.blendColorSrcFactor || 'one');
-    const colorDstFactor = convertBlendFactorToFunction('blendColorDstFactor', parameters.blendColorDstFactor || 'zero');
-    const alphaSrcFactor = convertBlendFactorToFunction('blendAlphaSrcFactor', parameters.blendAlphaSrcFactor || 'one');
-    const alphaDstFactor = convertBlendFactorToFunction('blendAlphaDstFactor', parameters.blendAlphaDstFactor || 'zero');
+    const colorSrcFactor = convertBlendFactorToFunction(
+      'blendColorSrcFactor',
+      parameters.blendColorSrcFactor || 'one'
+    );
+    const colorDstFactor = convertBlendFactorToFunction(
+      'blendColorDstFactor',
+      parameters.blendColorDstFactor || 'zero'
+    );
+    const alphaSrcFactor = convertBlendFactorToFunction(
+      'blendAlphaSrcFactor',
+      parameters.blendAlphaSrcFactor || 'one'
+    );
+    const alphaDstFactor = convertBlendFactorToFunction(
+      'blendAlphaDstFactor',
+      parameters.blendAlphaDstFactor || 'zero'
+    );
     gl.blendFuncSeparate(colorSrcFactor, colorDstFactor, alphaSrcFactor, alphaDstFactor);
   }
 }
@@ -286,20 +372,23 @@ function convertStencilOperation(parameter: string, value: StencilOperation): GL
   });
 }
 
-function convertBlendOperationToEquation(parameter: string, value: BlendOperation): GLBlendEquation {
+function convertBlendOperationToEquation(
+  parameter: string,
+  value: BlendOperation
+): GLBlendEquation {
   return map(parameter, value, {
-    'add': GL.FUNC_ADD,
-    'subtract': GL.FUNC_SUBTRACT,
+    add: GL.FUNC_ADD,
+    subtract: GL.FUNC_SUBTRACT,
     'reverse-subtract': GL.FUNC_REVERSE_SUBTRACT,
-    'min': GL.MIN,
-    'max': GL.MAX
+    min: GL.MIN,
+    max: GL.MAX
   } as Record<BlendOperation, GLBlendEquation>);
 }
 
 function convertBlendFactorToFunction(parameter: string, value: BlendFactor): GLBlendFunction {
   return map(parameter, value, {
-    'one': GL.ONE,
-    'zero': GL.ZERO,
+    one: GL.ONE,
+    zero: GL.ZERO,
     'src-color': GL.SRC_COLOR,
     'one-minus-src-color': GL.ONE_MINUS_SRC_COLOR,
     'dst-color': GL.DST_COLOR,
@@ -307,7 +396,7 @@ function convertBlendFactorToFunction(parameter: string, value: BlendFactor): GL
     'src-alpha': GL.SRC_ALPHA,
     'one-minus-src-alpha': GL.ONE_MINUS_SRC_ALPHA,
     'dst-alpha': GL.DST_ALPHA,
-    'one-minus-dst-alpha': GL.ONE_MINUS_DST_ALPHA,
+    'one-minus-dst-alpha': GL.ONE_MINUS_DST_ALPHA
   } as Record<BlendFactor, GLBlendFunction>);
 }
 

package/src/adapter/converters/sampler-parameters.ts

@@ -1,4 +1,5 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 // SAMPLER FILTERS
@@ -55,7 +56,9 @@ export function convertSamplerParametersToWebGL(props: SamplerProps): GLSamplerP
 // HELPERS
 
 /** Convert address more */
-function convertAddressMode(addressMode: 'clamp-to-edge' | 'repeat' | 'mirror-repeat'): GL.CLAMP_TO_EDGE | GL.REPEAT | GL.MIRRORED_REPEAT {
+function convertAddressMode(
+  addressMode: 'clamp-to-edge' | 'repeat' | 'mirror-repeat'
+): GL.CLAMP_TO_EDGE | GL.REPEAT | GL.MIRRORED_REPEAT {
   switch (addressMode) {
     case 'clamp-to-edge':
       return GL.CLAMP_TO_EDGE;
@@ -82,7 +85,13 @@ function convertMaxFilterMode(maxFilter: 'nearest' | 'linear'): GL.NEAREST | GL.
 function convertMinFilterMode(
   minFilter: 'nearest' | 'linear',
   mipmapFilter?: 'nearest' | 'linear'
-): GL.NEAREST | GL.LINEAR | GL.NEAREST_MIPMAP_NEAREST | GL.LINEAR_MIPMAP_NEAREST | GL.NEAREST_MIPMAP_LINEAR | GL.LINEAR_MIPMAP_LINEAR {
+):
+  | GL.NEAREST
+  | GL.LINEAR
+  | GL.NEAREST_MIPMAP_NEAREST
+  | GL.LINEAR_MIPMAP_NEAREST
+  | GL.NEAREST_MIPMAP_LINEAR
+  | GL.LINEAR_MIPMAP_LINEAR {
   if (!mipmapFilter) {
     return convertMaxFilterMode(minFilter);
   }

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

@@ -1,44 +1,69 @@
-// luma.gl, MIT license
+// luma.gl
+// SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import {GL} from '@luma.gl/constants';
 import {ShaderAttributeType, ShaderDataType} from '@luma.gl/core';
 
 /** Get shader attribute type from GL constants */
-export function getShaderAttributeTypeFromGL(type: GL, components: 1 | 2 | 3 | 4): ShaderAttributeType {
+export function getShaderAttributeTypeFromGL(
+  type: GL,
+  components: 1 | 2 | 3 | 4
+): ShaderAttributeType {
   const dataType = getShaderDataTypeFromGL(type);
   switch (components) {
-    case 1: return dataType;
-    case 2: return `vec2<${dataType}>`;
-    case 3: return `vec2<${dataType}>`;
-    case 4: return `vec2<${dataType}>`;
-    default: throw new Error(String(components));
+    case 1:
+      return dataType;
+    case 2:
+      return `vec2<${dataType}>`;
+    case 3:
+      return `vec2<${dataType}>`;
+    case 4:
+      return `vec2<${dataType}>`;
+    default:
+      throw new Error(String(components));
   }
 }
 
 /** Get shader data type from GL constants */
 export function getShaderDataTypeFromGL(type: GL): ShaderDataType {
   switch (type) {
-    case GL.INT: return 'i32';
-    case GL.UNSIGNED_INT: return 'u32';
-    case GL.SHORT: return 'i32';
-    case GL.UNSIGNED_SHORT: return 'u32';
-    case GL.BYTE: return 'i32';
-    case GL.UNSIGNED_BYTE: return 'u32';
-    case GL.FLOAT: return 'f32';
-    case GL.HALF_FLOAT: return 'f16';
-    default: throw new Error(String(type));
+    case GL.INT:
+      return 'i32';
+    case GL.UNSIGNED_INT:
+      return 'u32';
+    case GL.SHORT:
+      return 'i32';
+    case GL.UNSIGNED_SHORT:
+      return 'u32';
+    case GL.BYTE:
+      return 'i32';
+    case GL.UNSIGNED_BYTE:
+      return 'u32';
+    case GL.FLOAT:
+      return 'f32';
+    case GL.HALF_FLOAT:
+      return 'f16';
+    default:
+      throw new Error(String(type));
   }
 }
 
 /** GetGL constant from shader data type */
-export function getGLFromShaderDataType(type: ShaderDataType): GL.INT | GL.UNSIGNED_INT | GL.FLOAT | GL.HALF_FLOAT {
+export function getGLFromShaderDataType(
+  type: ShaderDataType
+): GL.INT | GL.UNSIGNED_INT | GL.FLOAT | GL.HALF_FLOAT {
   switch (type) {
     // TODO
-    case 'i32': return GL.INT;
-    case 'u32': return GL.UNSIGNED_INT;
-    case 'f32': return GL.FLOAT;
-    case 'f16': return GL.HALF_FLOAT;
-    default: throw new Error(String(type));
+    case 'i32':
+      return GL.INT;
+    case 'u32':
+      return GL.UNSIGNED_INT;
+    case 'f32':
+      return GL.FLOAT;
+    case 'f16':
+      return GL.HALF_FLOAT;
+    default:
+      throw new Error(String(type));
   }
 }

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
@@ -138,21 +154,21 @@ export const TEXTURE_FORMATS: Record<TextureFormat, Format> = {
 
   // 8-bit formats
   'r8unorm': {gl: GL.R8, b: 1, c: 1, renderbuffer: true},
-  'r8snorm': {gl: GL.R8_SNORM, b: 1, c: 1},
+  'r8snorm': {gl: GL.R8_SNORM, b: 1, c: 1, render: snorm8_renderable},
   'r8uint': {gl: GL.R8UI, b: 1, c: 1, renderbuffer: true},
   'r8sint': {gl: GL.R8I, b: 1, c: 1, renderbuffer: true},
 
   // 16-bit formats
   'rg8unorm': {gl: GL.RG8, b: 2, c: 2, renderbuffer: true},
-  'rg8snorm': {gl: GL.RG8_SNORM, b: 2, c: 2},
+  'rg8snorm': {gl: GL.RG8_SNORM, b: 2, c: 2, render: snorm8_renderable},
   'rg8uint': {gl: GL.RG8UI, b: 2, c: 2, renderbuffer: true},
   'rg8sint': {gl: GL.RG8I, b: 2, c: 2, renderbuffer: 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},
+  'r16float': {gl: GL.R16F, b: 2, c: 1, render: float16_renderable, filter: 'float16-filterable-webgl', renderbuffer: true},
+  'r16unorm-webgl': {gl: GL.R16_EXT, b:2, c:1, f: norm16_renderable, renderbuffer: 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},
@@ -166,7 +182,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,42 +192,42 @@ 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, renderbuffer: 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'},
+  '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},
+  '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, 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},
+  'rgb10a2uint-webgl': {b: 4, c: 4, gl: GL.RGB10_A2UI, p: 1, wgpu: false, bpp: 4, renderbuffer: 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},
+  'rg32float': {gl: GL.RG32F, b: 8, c: 2, render: float32_renderable, filter: float32_filterable, 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},
+  '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, renderbuffer: 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},
+  'rgba32float': {gl: GL.RGBA32F, b: 16, c: 4, render: float32_renderable, filter: float32_filterable, renderbuffer: true},
 
   // Depth and stencil formats
   'stencil8': {gl: GL.STENCIL_INDEX8, b: 1, c: 1, attachment: GL.STENCIL_ATTACHMENT, renderbuffer: true}, // 8 stencil bits
@@ -400,7 +416,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,7 +455,8 @@ const TYPE_SIZES = {
 /** Checks if a texture format is supported */
 export function isTextureFormatSupported(
   gl: WebGL2RenderingContext,
-  formatOrGL: TextureFormat | GL
+  formatOrGL: TextureFormat | GL,
+  extensions: GLExtensions
 ): boolean {
   const format = convertGLToTextureFormat(formatOrGL);
   const info = TEXTURE_FORMATS[format];
@@ -453,17 +470,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]?.renderbuffer;
 }
 
 /**
@@ -495,7 +513,8 @@ export function convertTextureFormatToGL(format: TextureFormat): GL | undefined
 /** Checks if a texture format is supported */
 export function getTextureFormatSupport(
   gl: WebGL2RenderingContext,
-  formatOrGL: TextureFormat | GL
+  formatOrGL: TextureFormat | GL,
+  extensions: GLExtensions
 ): {
   supported: boolean;
   filterable?: boolean;
@@ -515,20 +534,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 +556,11 @@ export function getTextureFormatSupport(
 /** Checks whether linear filtering (interpolated sampling) is available for floating point textures */
 export function isTextureFormatFilterable(
   gl: WebGL2RenderingContext,
-  formatOrGL: TextureFormat | GL
+  formatOrGL: TextureFormat | GL,
+  extensions: GLExtensions
 ): boolean {
   const format = convertGLToTextureFormat(formatOrGL);
-  if (!isTextureFormatSupported(gl, format)) {
+  if (!isTextureFormatSupported(gl, format, extensions)) {
     return false;
   }
   try {
@@ -552,20 +572,21 @@ 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
+  formatOrGL: TextureFormat | GL,
+  extensions: GLExtensions
 ): boolean {
   const format = convertGLToTextureFormat(formatOrGL);
-  if (!isTextureFormatSupported(gl, format)) {
+  if (!isTextureFormatSupported(gl, format, extensions)) {
     return false;
   }
   if (typeof format === 'number') {

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);