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

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

@@ -2,95 +2,57 @@
 // Provides a function that enables simple checking of which WebGL features are
 // available in an WebGL1 or WebGL2 environment.
 
+import {DeviceFeature} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import {isWebGL2} from '../../context/context/webgl-checks';
 import {isOldIE} from './is-old-ie';
-
-export type DeviceFeature =
-  'depth-clamping' |
-  'depth24unorm-stencil8' |
-  'depth32float-stencil8' |
-  'pipeline-statistics-query' |
-  'timestamp-query' |
-  'texture-compression-bc';
-
-// TODO - this should be the default export, test cases need updating
-export type WebGLFeature =
-  'webgl2' |
-
-  // api support (unify with WebGPU timestamp-query?)
-  'webgl-timer-query' |
-
-  // api support
-  'webgl-vertex-array-object' |
-  'webgl-instanced-rendering' |
-  'webgl-multiple-render-targets' |
-
-  // features
-  'webgl-element-index-uint32' |
-
-  // blending
-  'webgl-blend-equation-minmax' |
-  'webgl-float-blend' |
-
-  // textures | renderbuffers
-  'webgl-color-encoding-srgb' |
-
-  // textures
-  'webgl-texture-depth' |
-  'webgl-texture-float' |
-  'webgl-texture-half-float' |
-
-  'webgl-texture-filter-linear-float' |
-  'webgl-texture-filter-linear-half-float' |
-  'webgl-texture-filter-anisotropic' |
-
-  // framebuffers | textures and renderbuffers
-  'webgl-color-attachment-rgba32f' |
-  'webgl-color-attachment-float' |
-  'webgl-color-attachment-half-float' |
-
-  // glsl extensions
-  'glsl-frag-data' |
-  'glsl-frag-depth' |
-  'glsl-derivatives' |
-  'glsl-texture-lod';
-
-/** Valid feature strings */
-export type Feature = DeviceFeature | WebGLFeature;
+import {getTextureFeatures, _checkFloat32ColorAttachment} from '../converters/texture-formats';
 
 /** Get WebGPU style feature strings */
-export function getDeviceFeatures(gl: WebGLRenderingContext): Set<DeviceFeature | WebGLFeature> {
+export function getDeviceFeatures(gl: WebGLRenderingContext): Set<DeviceFeature> {
   const features = getWebGLFeatures(gl);
-  // features.add('depth-clamping'); // GPUPrimitiveState.clampDepth
+
+  // texture features
+  // features.add('texture-compression-bc'); 
+  for (const textureFeature of getTextureFeatures(gl)) {
+    features.add(textureFeature);
+  }
+
+  // TODO
+  // features.add('depth-clip-control'); // GPUPrimitiveState.clampDepth
   // features.add('depth24unorm-stencil8'); // GPUTextureFormat 'depth24unorm-stencil8'.
   // features.add('depth32float-stencil8'); // GPUTextureFormat 'depth32float-stencil8'.
-  // features.add('pipeline-statistics-query'); // GPUQueryType "pipeline-statistics"
   // features.add('timestamp-query'); // GPUQueryType "timestamp-query"
-  // TODO
-  // features.add('texture-compression-bc'); //  GPUQueryType "timestamp"
-  // TODO
+  // "indirect-first-instance"
+
   return features;
 }
 
 /** Extract all WebGL features */
-export function getWebGLFeatures(gl: WebGLRenderingContext): Set<WebGLFeature> {
-  // Enable EXT_float_blend first: https://developer.mozilla.org/en-US/docs/Web/API/EXT_float_blend
+export function getWebGLFeatures(gl: WebGLRenderingContext): Set<DeviceFeature> {
+  // Enables 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<WebGLFeature>();
-  for (const feature in WEBGL_FEATURES) {
-    if (isFeatureSupported(gl, feature as WebGLFeature)) {
-      features.add(feature as WebGLFeature );
+  const features = new Set<DeviceFeature>();
+  for (const feature of Object.keys(WEBGL_FEATURES)) {
+    // @ts-expect-error
+    if (isFeatureSupported(gl, feature)) {
+      // @ts-expect-error
+      features.add(feature);
     }
   }
   return features;
 }
 
-function isFeatureSupported(gl: WebGLRenderingContext, feature: WebGLFeature): boolean {
-  const [webgl1Feature, webgl2Feature] = WEBGL_FEATURES[feature];;
+function isFeatureSupported(gl: WebGLRenderingContext, feature: DeviceFeature): boolean {
+  const featureInfo = WEBGL_FEATURES[feature];
+  if (!featureInfo) {
+    return false;
+  }
+
+  const [webgl1Feature, webgl2Feature] = featureInfo || [];
 
   // Get extension name from table
   const featureDefinition = isWebGL2(gl) ? webgl2Feature : webgl1Feature;
@@ -101,9 +63,9 @@ function isFeatureSupported(gl: WebGLRenderingContext, feature: WebGLFeature): b
   }
 
   switch (feature) {
-    case 'webgl-color-attachment-rgba32f':
+    case 'texture-renderable-rgba32float-webgl':
       return isWebGL2(gl) ? Boolean(gl.getExtension(featureDefinition)) :
-        checkFloat32ColorAttachment(gl);
+        _checkFloat32ColorAttachment(gl);
     case 'glsl-derivatives':
       return canCompileGLSLExtension(gl, featureDefinition); // TODO options
     case 'glsl-frag-data':
@@ -115,39 +77,7 @@ function isFeatureSupported(gl: WebGLRenderingContext, feature: WebGLFeature): b
   }
 }
 
-
-// function to test if Float 32 bit format texture can be bound as color attachment
-function checkFloat32ColorAttachment(gl: WebGLRenderingContext): boolean {
-  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);
-  }
-}
-
-const compiledGLSLExtensions = {};
+const compiledGLSLExtensions: Record<string, boolean> = {};
 
 /*
  * Enables feature detection in IE11 due to a bug where gl.getExtension may return true
@@ -175,6 +105,9 @@ export function canCompileGLSLExtension(gl: WebGLRenderingContext, extensionName
   const source = `#extension GL_${extensionName} : ${behavior}\nvoid main(void) {}`;
 
   const shader = gl.createShader(gl.VERTEX_SHADER);
+  if (!shader) {
+    throw new Error('shader');
+  }
   gl.shaderSource(shader, source);
   gl.compileShader(shader);
   const canCompile = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
@@ -186,38 +119,36 @@ export function canCompileGLSLExtension(gl: WebGLRenderingContext, extensionName
 /** 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<WebGLFeature, [boolean | string, boolean | string]> = {
+const WEBGL_FEATURES: Partial<Record<DeviceFeature, [boolean | string, boolean | string]>> = {
+  'webgl': [true, true],
   'webgl2': [false, true],
 
-  // API SUPPORT
-  'webgl-vertex-array-object': ['OES_vertex_array_object', true],
-  'webgl-timer-query': ['EXT_disjoint_timer_query', 'EXT_disjoint_timer_query_webgl2'],
-  'webgl-instanced-rendering': ['ANGLE_instanced_arrays', true],
-  'webgl-multiple-render-targets': ['WEBGL_draw_buffers', true],
-
-  // FEATURES
-  'webgl-element-index-uint32': ['OES_element_index_uint', true],
+  'timer-query-webgl': ['EXT_disjoint_timer_query', 'EXT_disjoint_timer_query_webgl2'],
 
-  // BLENDING
-  'webgl-blend-equation-minmax': ['EXT_blend_minmax', true],
-  'webgl-float-blend': ['EXT_float_blend', 'EXT_float_blend'],
+  // WEBGL1 SUPPORT
+  'vertex-array-object-webgl1': ['OES_vertex_array_object', true],
+  'instanced-rendering-webgl1': ['ANGLE_instanced_arrays', true],
+  'multiple-render-targets-webgl1': ['WEBGL_draw_buffers', true],
+  'index-uint32-webgl1': ['OES_element_index_uint', true],
+  'blend-minmax-webgl1': ['EXT_blend_minmax', true],
+  'texture-blend-float-webgl1': ['EXT_float_blend', 'EXT_float_blend'],
 
   // TEXTURES, RENDERBUFFERS
-  'webgl-color-encoding-srgb': ['EXT_sRGB', true],
+  'texture-formats-srgb-webgl1': ['EXT_sRGB', true],
 
   // TEXTURES
-  'webgl-texture-depth': ['WEBGL_depth_texture', true],
-  'webgl-texture-float': ['OES_texture_float', true],
-  'webgl-texture-half-float': ['OES_texture_half_float', true],
+  'texture-formats-depth-webgl1': ['WEBGL_depth_texture', true],
+  'texture-formats-float32-webgl1': ['OES_texture_float', true],
+  'texture-formats-float16-webgl1': ['OES_texture_half_float', true],
 
-  'webgl-texture-filter-linear-float': ['OES_texture_float_linear', 'OES_texture_float_linear'],
-  'webgl-texture-filter-linear-half-float': ['OES_texture_half_float_linear', 'OES_texture_half_float_linear'],
-  'webgl-texture-filter-anisotropic': ['EXT_texture_filter_anisotropic', 'EXT_texture_filter_anisotropic'],
+  'texture-filter-linear-float32-webgl': ['OES_texture_float_linear', 'OES_texture_float_linear'],
+  'texture-filter-linear-float16-webgl': ['OES_texture_half_float_linear', 'OES_texture_half_float_linear'],
+  'texture-filter-anisotropic-webgl': ['EXT_texture_filter_anisotropic', 'EXT_texture_filter_anisotropic'],
 
   // FRAMEBUFFERS, TEXTURES AND RENDERBUFFERS
-  'webgl-color-attachment-rgba32f': [false, 'EXT_color_buffer_float'], // Note override check
-  'webgl-color-attachment-float': [false, 'EXT_color_buffer_float'],
-  'webgl-color-attachment-half-float': ['EXT_color_buffer_half_float', 'EXT_color_buffer_half_float'],
+  'texture-renderable-rgba32float-webgl': ['WEBGL_color_buffer_float', 'EXT_color_buffer_float'], // Note override check
+  'texture-renderable-float32-webgl': [false, 'EXT_color_buffer_float'],
+  'texture-renderable-float16-webgl': ['EXT_color_buffer_half_float', 'EXT_color_buffer_half_float'],
 
   // GLSL extensions
   'glsl-frag-data': ['WEBGL_draw_buffers', true],

package/src/adapter/device-helpers/device-limits.ts

@@ -5,7 +5,7 @@ import {getWebGL2Context} from '../../context/context/webgl-checks';
 
 /** Populate a WebGPU style device limits */
 export function getDeviceLimits(gl: WebGLRenderingContext): DeviceLimits {
-  const gl2: WebGL2RenderingContext = getWebGL2Context(gl);
+  const gl2: WebGL2RenderingContext | null = getWebGL2Context(gl);
   return {
     maxTextureDimension1D: 0, // WebGL does not support 1D textures
     maxTextureDimension2D: gl.getParameter(GL.MAX_TEXTURE_SIZE),
@@ -53,7 +53,7 @@ export type WebGLLimits = {
   [GL.MAX_VIEWPORT_DIMS]: [number, number];
 
   // Extensions
-  // [GL.MAX_TEXTURE_MAX_ANISOTROPY_EXT]: number;
+  [GL.MAX_TEXTURE_MAX_ANISOTROPY_EXT]: number;
 
   // WebGL2 Limits
   [GL.MAX_3D_TEXTURE_SIZE]: number;
@@ -98,6 +98,9 @@ export function getWebGLLimits(gl: WebGLRenderingContext): WebGLLimits {
   function get2<T>(pname: number, defaultValue: T): T {
     return gl2 ? gl2.getParameter(pname) as T : (defaultValue || 0) as T;
   }
+  // function getMaxAnistropy() {
+  //   const extension = gl.getExtension('EXT_texture_filter_anisotropic');
+  // }
   return {
     [GL.ALIASED_LINE_WIDTH_RANGE]: get(GL.ALIASED_LINE_WIDTH_RANGE),
     [GL.ALIASED_POINT_SIZE_RANGE]: get(GL.ALIASED_POINT_SIZE_RANGE),
@@ -114,7 +117,7 @@ export function getWebGLLimits(gl: WebGLRenderingContext): WebGLLimits {
     [GL.MAX_VIEWPORT_DIMS]: get(GL.MAX_VIEWPORT_DIMS),
 
     // Extensions
-    // [GL.MAX_TEXTURE_MAX_ANISOTROPY_EXT]: {gl1: 1.0, extension: 'EXT_texture_filter_anisotropic'},
+    [GL.MAX_TEXTURE_MAX_ANISOTROPY_EXT]: get(GL.MAX_TEXTURE_MAX_ANISOTROPY_EXT), // getMaxAnistropy(),
 
     // WebGL2 Limits
     [GL.MAX_3D_TEXTURE_SIZE]: get2(GL.MAX_3D_TEXTURE_SIZE), //  GLint

package/src/adapter/device-helpers/get-device-info.ts

@@ -13,10 +13,10 @@ export function getDeviceInfo(gl: WebGLRenderingContext): DeviceInfo {
   const rendererUnmasked = gl.getParameter(ext ? ext.UNMASKED_RENDERER_WEBGL : GL.RENDERER);
   const vendor = vendorUnmasked || vendorMasked;
   const renderer = rendererUnmasked || rendererMasked;
-  const gpuVendor = identifyGPUVendor(vendor, renderer);
+  const gpu = identifyGPUVendor(vendor, renderer);
   return {
     type: isWebGL2(gl) ? 'webgl2' : 'webgl',
-    gpuVendor,
+    gpu,
     vendor: vendorUnmasked || vendorMasked,
     renderer: rendererUnmasked || rendererMasked,
     version: gl.getParameter(GL.VERSION),
@@ -27,15 +27,15 @@ export function getDeviceInfo(gl: WebGLRenderingContext): DeviceInfo {
   };
 }
 
-function identifyGPUVendor(vendor: string, renderer: string): 'NVIDIA' | 'INTEL' | 'APPLE' | 'AMD' | 'UNKNOWN' {
+function identifyGPUVendor(vendor: string, renderer: string): 'nvidia' | 'intel' | 'apple' | 'amd' | 'unknown' {
   if (vendor.match(/NVIDIA/i) || renderer.match(/NVIDIA/i)) {
-    return 'NVIDIA';
+    return 'nvidia';
   }
   if (vendor.match(/INTEL/i) || renderer.match(/INTEL/i)) {
-    return 'INTEL';
+    return 'intel';
   }
   if (vendor.match(/Apple/i) || renderer.match(/Apple/i)) {
-    return 'APPLE';
+    return 'apple';
   }
   if (
     vendor.match(/AMD/i) ||
@@ -43,7 +43,7 @@ function identifyGPUVendor(vendor: string, renderer: string): 'NVIDIA' | 'INTEL'
     vendor.match(/ATI/i) ||
     renderer.match(/ATI/i)
   ) {
-    return 'AMD';
+    return 'amd';
   }
-  return 'UNKNOWN';
+  return 'unknown';
 }

package/src/adapter/helpers/attribute-utils.ts

@@ -0,0 +1,61 @@
+import GL from '@luma.gl/constants';
+import {GLDrawMode, GLPrimitive} from '../../types/webgl';
+
+// Counts the number of complete primitives given a number of vertices and a drawMode
+export function getPrimitiveDrawMode(drawMode: GLDrawMode): GLPrimitive {
+  switch (drawMode) {
+    case GL.POINTS:
+      return GL.POINTS;
+    case GL.LINES:
+      return GL.LINES;
+    case GL.LINE_STRIP:
+      return GL.LINES;
+    case GL.LINE_LOOP:
+      return GL.LINES;
+    case GL.TRIANGLES:
+      return GL.TRIANGLES;
+    case GL.TRIANGLE_STRIP:
+      return GL.TRIANGLES;
+    case GL.TRIANGLE_FAN:
+      return GL.TRIANGLES;
+    default:
+      throw new Error('drawMode');
+  }
+}
+
+// Counts the number of complete "primitives" given a number of vertices and a drawMode
+export function getPrimitiveCount(options: {drawMode: GLDrawMode, vertexCount: number}): number {
+  const {drawMode, vertexCount} = options;
+  switch (drawMode) {
+    case GL.POINTS:
+    case GL.LINE_LOOP:
+      return vertexCount;
+    case GL.LINES:
+      return vertexCount / 2;
+    case GL.LINE_STRIP:
+      return vertexCount - 1;
+    case GL.TRIANGLES:
+      return vertexCount / 3;
+    case GL.TRIANGLE_STRIP:
+    case GL.TRIANGLE_FAN:
+      return vertexCount - 2;
+    default:
+      throw new Error('drawMode');
+  }
+}
+
+// Counts the number of vertices after splitting the vertex stream into separate "primitives"
+export function getVertexCount(options: {drawMode: GLDrawMode, vertexCount: number}): number {
+  const {drawMode, vertexCount} = options;
+  const primitiveCount = getPrimitiveCount({drawMode, vertexCount});
+  switch (getPrimitiveDrawMode(drawMode)) {
+    case GL.POINTS:
+      return primitiveCount;
+    case GL.LINES:
+      return primitiveCount * 2;
+    case GL.TRIANGLES:
+      return primitiveCount * 3;
+    default:
+      throw new Error('drawMode');
+  }
+}