@luma.gl/core 9.3.0-alpha.4 → 9.3.0-alpha.8

package/src/shadertypes/{textures → texture-types}/texture-format-decoder.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import type {NormalizedDataType} from '../data-types/data-types';
-import {getDataTypeInfo} from '../data-types/decode-data-types';
+import {dataTypeDecoder} from '../data-types/data-type-decoder';
 import type {
   TextureFormat,
   TextureFormatCompressed,
@@ -72,6 +72,7 @@ export class TextureFormatDecoder {
   }
 }
 
+/** Decoder for luma.gl texture types */
 export const textureFormatDecoder = new TextureFormatDecoder();
 
 // HELPERS - MEMORY LAYOUT
@@ -84,11 +85,20 @@ function computeTextureMemoryLayout({
   depth,
   byteAlignment
 }: TextureMemoryLayoutOptions): TextureMemoryLayout {
-  const {bytesPerPixel} = textureFormatDecoder.getInfo(format);
-  // WebGPU requires bytesPerRow to be a multiple of 256.
-  const unpaddedBytesPerRow = width * bytesPerPixel;
+  const formatInfo = textureFormatDecoder.getInfo(format);
+  const {
+    bytesPerPixel,
+    bytesPerBlock = bytesPerPixel,
+    blockWidth = 1,
+    blockHeight = 1,
+    compressed = false
+  } = formatInfo;
+  const blockColumns = compressed ? Math.ceil(width / blockWidth) : width;
+  const blockRows = compressed ? Math.ceil(height / blockHeight) : height;
+  // byteAlignment comes from the backend/call site. WebGPU buffer copies use 256, queue.writeTexture uses 1.
+  const unpaddedBytesPerRow = blockColumns * bytesPerBlock;
   const bytesPerRow = Math.ceil(unpaddedBytesPerRow / byteAlignment) * byteAlignment;
-  const rowsPerImage = height;
+  const rowsPerImage = blockRows;
   const byteLength = bytesPerRow * rowsPerImage * depth;
 
   return {
@@ -120,9 +130,10 @@ function getTextureFormatCapabilities(format: TextureFormat): TextureFormatCapab
   const isSigned = formatInfo?.signed;
   const isInteger = formatInfo?.integer;
   const isWebGLSpecific = formatInfo?.webgl;
+  const isCompressed = Boolean(formatInfo?.compressed);
 
-  // signed formats are not renderable
-  formatCapabilities.render &&= !isSigned;
+  // Only uncompressed color formats can be used as color-renderable attachments.
+  formatCapabilities.render &&= !isDepthStencil && !isCompressed;
   // signed and integer formats are not filterable
   formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
 
@@ -143,6 +154,7 @@ export function getTextureFormatInfo(format: TextureFormat): TextureFormatInfo {
     formatInfo.bytesPerPixel = 1;
     formatInfo.srgb = false;
     formatInfo.compressed = true;
+    formatInfo.bytesPerBlock = getCompressedTextureBlockByteLength(format);
 
     const blockSize = getCompressedTextureBlockSize(format);
     if (blockSize) {
@@ -152,11 +164,11 @@ export function getTextureFormatInfo(format: TextureFormat): TextureFormatInfo {
   }
 
   // Fill in missing information that can be derived from the format string
-  const matches = RGB_FORMAT_REGEX.exec(format as string);
+  const matches = !formatInfo.packed ? RGB_FORMAT_REGEX.exec(format as string) : null;
   if (matches) {
     const [, channels, length, type, srgb, suffix] = matches;
     const dataType = `${type}${length}` as NormalizedDataType;
-    const decodedType = getDataTypeInfo(dataType);
+    const decodedType = dataTypeDecoder.getDataTypeInfo(dataType);
     const bits = decodedType.byteLength * 8;
     const components = (channels?.length ?? 1) as 1 | 2 | 3 | 4;
     const bitsPerChannel: [number, number, number, number] = [
@@ -245,9 +257,63 @@ function getCompressedTextureBlockSize(
     const [, blockWidth, blockHeight] = matches;
     return {blockWidth: Number(blockWidth), blockHeight: Number(blockHeight)};
   }
+
+  if (
+    format.startsWith('bc') ||
+    format.startsWith('etc1') ||
+    format.startsWith('etc2') ||
+    format.startsWith('eac') ||
+    format.startsWith('atc')
+  ) {
+    return {blockWidth: 4, blockHeight: 4};
+  }
+
+  if (format.startsWith('pvrtc-rgb4') || format.startsWith('pvrtc-rgba4')) {
+    return {blockWidth: 4, blockHeight: 4};
+  }
+
+  if (format.startsWith('pvrtc-rgb2') || format.startsWith('pvrtc-rgba2')) {
+    return {blockWidth: 8, blockHeight: 4};
+  }
+
   return null;
 }
 
+function getCompressedTextureBlockByteLength(format: TextureFormatCompressed): number {
+  if (
+    format.startsWith('bc1') ||
+    format.startsWith('bc4') ||
+    format.startsWith('etc1') ||
+    format.startsWith('etc2-rgb8') ||
+    format.startsWith('etc2-rgb8a1') ||
+    format.startsWith('eac-r11') ||
+    format === 'atc-rgb-unorm-webgl'
+  ) {
+    return 8;
+  }
+
+  if (
+    format.startsWith('bc2') ||
+    format.startsWith('bc3') ||
+    format.startsWith('bc5') ||
+    format.startsWith('bc6h') ||
+    format.startsWith('bc7') ||
+    format.startsWith('etc2-rgba8') ||
+    format.startsWith('eac-rg11') ||
+    format.startsWith('astc') ||
+    format === 'atc-rgba-unorm-webgl' ||
+    format === 'atc-rgbai-unorm-webgl'
+  ) {
+    return 16;
+  }
+
+  if (format.startsWith('pvrtc')) {
+    return 8;
+  }
+
+  return 16;
+}
+
 /*
 'r8unorm':	{s: "float"}, // 	✓	✓	✓	},
 'r8snorm':	{s: "float"}, // 		✓		},

package/src/shadertypes/{textures → texture-types}/texture-format-generics.ts

@@ -8,54 +8,8 @@ import {
   type TextureFormatCompressed
 } from './texture-formats';
 
-import {type DataTypeArray, NormalizedDataTypeArray} from '../data-types/data-types';
-
-export type TextureFormatTypedArray<T extends TextureFormat> = DataTypeArray<
-  TextureFormatDataType<T>
->;
-
-export type TextureFormatNormalizedTypedArray<T extends TextureFormat> = NormalizedDataTypeArray<
-  TextureFormatDataType<T>
->;
-
-/** A numeric array of length matching the number of components in the texture format */
-export type TextureFormatPixel<T extends TextureFormat> =
-  TextureFormatPackedComponents<T> extends 1
-    ? [number]
-    : TextureFormatPackedComponents<T> extends 2
-      ? [number, number]
-      : TextureFormatPackedComponents<T> extends 3
-        ? [number, number, number]
-        : TextureFormatPackedComponents<T> extends 4
-          ? [number, number, number, number]
-          : never;
-
-/** @note packed formats have only one component. Use TextureFormatPackedComponents */
-export type TextureFormatComponents<T extends TextureFormat> = T extends
-  | TextureFormatR
-  | TextureFormatPackedRGB
-  | TextureFormatPackedRGBA
-  ? 1
-  : T extends TextureFormatRG
-    ? 2
-    : T extends TextureFormatRGB
-      ? 3
-      : T extends TextureFormatRGBA
-        ? 4
-        : never;
-
-export type TextureFormatPackedComponents<T extends TextureFormat> = T extends TextureFormatR
-  ? 1
-  : T extends TextureFormatRG
-    ? 2
-    : T extends TextureFormatRGB | TextureFormatPackedRGB
-      ? 3
-      : T extends TextureFormatRGBA | TextureFormatPackedRGBA
-        ? 4
-        : never;
-
-/** Get the data type for a texture format */
-export type TextureFormatDataType<T extends TextureFormat> = T extends TextureFormatUint8
+/** @type data type for a texture format */
+export type TextureFormatDataTypeT<T extends TextureFormat> = T extends TextureFormatUint8
   ? 'uint8'
   : T extends TextureFormatSint8
     ? 'sint8'
@@ -89,6 +43,46 @@ export type TextureFormatDataType<T extends TextureFormat> = T extends TextureFo
                                 ? 'uint32'
                                 : never;
 
+/** @type A numeric array of length matching the number of components in the texture format */
+export type TextureFormatPixelT<T extends TextureFormat> =
+  TextureFormatPackedComponentsT<T> extends 1
+    ? [number]
+    : TextureFormatPackedComponentsT<T> extends 2
+      ? [number, number]
+      : TextureFormatPackedComponentsT<T> extends 3
+        ? [number, number, number]
+        : TextureFormatPackedComponentsT<T> extends 4
+          ? [number, number, number, number]
+          : never;
+
+/**
+ * @type number - the number of components in a texture format
+ * @note packed formats have only one component. Use TextureFormatPackedComponentsT
+ */
+export type TextureFormatComponentsT<T extends TextureFormat> = T extends
+  | TextureFormatR
+  | TextureFormatPackedRGB
+  | TextureFormatPackedRGBA
+  ? 1
+  : T extends TextureFormatRG
+    ? 2
+    : T extends TextureFormatRGB
+      ? 3
+      : T extends TextureFormatRGBA
+        ? 4
+        : never;
+
+/** @type number - the number of components in a packed texture format */
+export type TextureFormatPackedComponentsT<T extends TextureFormat> = T extends TextureFormatR
+  ? 1
+  : T extends TextureFormatRG
+    ? 2
+    : T extends TextureFormatRGB | TextureFormatPackedRGB
+      ? 3
+      : T extends TextureFormatRGBA | TextureFormatPackedRGBA
+        ? 4
+        : never;
+
 // Component groups
 
 type TextureFormatR =

package/src/shadertypes/{textures → texture-types}/texture-format-table.ts

@@ -24,6 +24,7 @@ const float32_renderable: TextureFeature = 'float32-renderable-webgl';
 const float16_renderable: TextureFeature = 'float16-renderable-webgl';
 const rgb9e5ufloat_renderable: TextureFeature = 'rgb9e5ufloat-renderable-webgl';
 const snorm8_renderable: TextureFeature = 'snorm8-renderable-webgl';
+const norm16_webgl: TextureFeature = 'norm16-webgl';
 const norm16_renderable: TextureFeature = 'norm16-renderable-webgl';
 const snorm16_renderable: TextureFeature = 'snorm16-renderable-webgl';
 
@@ -93,15 +94,15 @@ const TEXTURE_FORMAT_COLOR_DEPTH_TABLE: Readonly<Record<TextureFormatColorUncomp
   'bgra8unorm-srgb': {},
 
 
-  'r16unorm': {f: norm16_renderable},
-  'rg16unorm': {render: norm16_renderable},
-  'rgb16unorm-webgl': {f: norm16_renderable}, // rgb not renderable
-  'rgba16unorm': {render: norm16_renderable},
+  'r16unorm': {f: norm16_webgl, render: norm16_renderable},
+  'rg16unorm': {f: norm16_webgl, render: norm16_renderable},
+  'rgb16unorm-webgl': {f: norm16_webgl, render: false}, // rgb not renderable
+  'rgba16unorm': {f: norm16_webgl, render: norm16_renderable},
 
-  'r16snorm': {f: snorm16_renderable},
-  'rg16snorm': {render: snorm16_renderable},
-  'rgb16snorm-webgl': {f: norm16_renderable}, // rgb not renderable
-  'rgba16snorm': {render: snorm16_renderable},
+  'r16snorm': {f: norm16_webgl, render: snorm16_renderable},
+  'rg16snorm': {f: norm16_webgl, render: snorm16_renderable},
+  'rgb16snorm-webgl': {f: norm16_webgl, render: false}, // rgb not renderable
+  'rgba16snorm': {f: norm16_webgl, render: snorm16_renderable},
 
   'r16uint': {},
   'rg16uint': {},
@@ -225,7 +226,7 @@ const TEXTURE_FORMAT_COMPRESSED_TABLE: Readonly<Record<TextureFormatCompressed,
 
   'pvrtc-rgb4unorm-webgl': {f: texture_compression_pvrtc_webgl},
   'pvrtc-rgba4unorm-webgl': {f: texture_compression_pvrtc_webgl},
-  'pvrtc-rbg2unorm-webgl': {f: texture_compression_pvrtc_webgl},
+  'pvrtc-rgb2unorm-webgl': {f: texture_compression_pvrtc_webgl},
   'pvrtc-rgba2unorm-webgl': {f: texture_compression_pvrtc_webgl},
 
   // WEBGL_compressed_texture_etc1

package/src/shadertypes/{textures → texture-types}/texture-formats.ts

@@ -2,7 +2,11 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {NormalizedDataType, DataTypeArray, NormalizedDataTypeArray} from '../data-types/data-types';
+import type {
+  NormalizedDataType,
+  TypedArrayConstructorT,
+  NormalizedTypedArrayConstructorT
+} from '../data-types/data-types';
 
 /** Information about the structure of a texture format */
 export type TextureFormatInfo = {
@@ -18,6 +22,8 @@ export type TextureFormatInfo = {
   dataType?: NormalizedDataType;
   /** Number of bytes per pixel */
   bytesPerPixel: number;
+  /** Compressed formats only: Number of bytes per block */
+  bytesPerBlock?: number;
   /** Number of bits per channel (may be unreliable for packed formats) */
   bitsPerChannel: [number, number, number, number];
   /** If this is a packed data type */
@@ -116,6 +122,7 @@ export type TextureFeature =
   | 'float16-renderable-webgl'
   | 'rgb9e5ufloat-renderable-webgl'
   | 'snorm8-renderable-webgl'
+  | 'norm16-webgl'
   | 'norm16-renderable-webgl'
   | 'snorm16-renderable-webgl'
   | 'float32-filterable'
@@ -199,13 +206,12 @@ export type TextureFormatPacked32 =
   | 'rg11b10ufloat'
   | 'rgb10a2unorm'
   | 'rgb10a2uint';
-
 export type TextureFormatCompressed =
   | 'bc1-rgb-unorm-webgl'
   | 'bc1-rgb-unorm-srgb-webgl'
   | 'pvrtc-rgb4unorm-webgl'
   | 'pvrtc-rgba4unorm-webgl'
-  | 'pvrtc-rbg2unorm-webgl'
+  | 'pvrtc-rgb2unorm-webgl'
   | 'pvrtc-rgba2unorm-webgl'
   | 'etc1-rbg-unorm-webgl'
   | 'atc-rgb-unorm-webgl'
@@ -274,6 +280,8 @@ export type TextureFormatCompressed =
   | 'astc-12x12-unorm'
   | 'astc-12x12-unorm-srgb';
 
+export type CompressedTextureFormat = TextureFormatCompressed;
+
 // Texture format helper types
 
 export type TextureFormatTypedArray<T extends TextureFormat> = DataTypeArray<
@@ -318,6 +326,15 @@ export type TextureFormatDataType<T extends TextureFormat> = T extends TextureFo
                                 ? 'uint32'
                                 : never;
 
+export type TextureFormatDataTypeT<T extends TextureFormat> = TextureFormatDataType<T>;
+
+type DataTypeArray<T extends NormalizedDataType> = InstanceType<TypedArrayConstructorT<T>>;
+type NormalizedDataTypeArray<T extends NormalizedDataType> = InstanceType<
+  NormalizedTypedArrayConstructorT<T>
+>;
+
+// HELPER TYPES
+
 /*
 export type TextureFormatColorWebGPU =
   // 8-bit formats

package/src/shadertypes/vertex-types/vertex-format-decoder.ts

@@ -0,0 +1,131 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {TypedArray} from '../../types';
+import type {NormalizedDataType, PrimitiveDataType, SignedDataType} from '../data-types/data-types';
+import type {VertexFormat, VertexFormatInfo} from './vertex-formats';
+import {dataTypeDecoder} from '../data-types/data-type-decoder';
+
+export class VertexFormatDecoder {
+  /**
+   * Decodes a vertex format, returning type, components, byte  length and flags (integer, signed, normalized)
+   */
+  getVertexFormatInfo<T extends VertexFormat = VertexFormat>(format: T): VertexFormatInfo<T> {
+    // Strip the -webgl ending if present
+    let webglOnly: boolean | undefined;
+    if (format.endsWith('-webgl')) {
+      format.replace('-webgl', '');
+      webglOnly = true;
+    }
+    // split components from type
+    const [type_, count] = format.split('x');
+    const type = type_ as NormalizedDataType;
+    const components = (count ? parseInt(count) : 1) as 1 | 2 | 3 | 4;
+    // decode the type
+    const decodedType = dataTypeDecoder.getDataTypeInfo(type);
+    const result: VertexFormatInfo = {
+      type,
+      components,
+      byteLength: decodedType.byteLength * components,
+      integer: decodedType.integer,
+      signed: decodedType.signed,
+      normalized: decodedType.normalized
+    };
+    if (webglOnly) {
+      result.webglOnly = true;
+    }
+    return result;
+  }
+
+  /** Build a vertex format from a signed data type and a component */
+  makeVertexFormat(
+    signedDataType: SignedDataType,
+    components: 1 | 2 | 3 | 4,
+    normalized?: boolean
+  ): VertexFormat {
+    const dataType: NormalizedDataType = normalized
+      ? dataTypeDecoder.getNormalizedDataType(signedDataType)
+      : signedDataType;
+
+    switch (dataType) {
+      // TODO - Special cases for WebGL (not supported on WebGPU), overrides the check below
+      case 'unorm8':
+        if (components === 1) {
+          return 'unorm8';
+        }
+        if (components === 3) {
+          return 'unorm8x3-webgl';
+        }
+        return `${dataType}x${components}`;
+
+      case 'snorm8':
+      case 'uint8':
+      case 'sint8':
+      // WebGPU 8 bit formats must be aligned to 16 bit boundaries');
+      // fall through
+      case 'uint16':
+      case 'sint16':
+      case 'unorm16':
+      case 'snorm16':
+      case 'float16':
+        // WebGPU 16 bit formats must be aligned to 32 bit boundaries
+        if (components === 1 || components === 3) {
+          throw new Error(`size: ${components}`);
+        }
+        return `${dataType}x${components}`;
+
+      default:
+        return components === 1 ? dataType : `${dataType}x${components}`;
+    }
+  }
+
+  /** Get the vertex format for an attribute with TypedArray and size */
+  getVertexFormatFromAttribute(
+    typedArray: TypedArray,
+    size: number,
+    normalized?: boolean
+  ): VertexFormat {
+    if (!size || size > 4) {
+      throw new Error(`size ${size}`);
+    }
+
+    const components = size as 1 | 2 | 3 | 4;
+    const signedDataType = dataTypeDecoder.getDataType(typedArray);
+    return this.makeVertexFormat(signedDataType, components, normalized);
+  }
+
+  /**
+   * Return a "default" vertex format for a certain shader data type
+   * The simplest vertex format that matches the shader attribute's data type
+   */
+
+  getCompatibleVertexFormat(opts: {
+    primitiveType: PrimitiveDataType;
+    components: 1 | 2 | 3 | 4;
+  }): VertexFormat {
+    let vertexType: NormalizedDataType;
+    switch (opts.primitiveType) {
+      case 'f32':
+        vertexType = 'float32';
+        break;
+      case 'i32':
+        vertexType = 'sint32';
+        break;
+      case 'u32':
+        vertexType = 'uint32';
+        break;
+      case 'f16':
+        return opts.components <= 2 ? 'float16x2' : 'float16x4';
+    }
+
+    // TODO logic does not work for float16
+    if (opts.components === 1) {
+      return vertexType;
+    }
+    return `${vertexType}x${opts.components}`;
+  }
+}
+
+/** Decoder for luma.gl vertex types */
+export const vertexFormatDecoder = new VertexFormatDecoder();

package/src/shadertypes/vertex-types/vertex-formats.ts

@@ -0,0 +1,183 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {
+  DataTypeIsIntegerT,
+  DataTypeIsNormalizedT,
+  DataTypeIsSignedT
+} from '../data-types/data-types';
+
+/**
+ * Describes the **memory format** and interpretation (normalization) of a buffer that will be supplied to vertex attributes
+ * @note Must be compatible with the AttributeShaderType of the shaders, see documentation.
+ * @note This is a superset of WebGPU vertex formats to allow for some flexibility for WebGL only applications
+ * @todo Add device.isVertexFormatSupported() method?
+ */
+export type VertexFormat =
+  // 8 bit integers, note that only 16 bit aligned formats are supported in WebGPU (x2 and x4)
+  | 'uint8' // Chrome 133+
+  | 'uint8x2'
+  | 'uint8x4'
+  | 'sint8' // Chrome 133+
+  | 'sint8x2'
+  | 'sint8x4'
+  | 'unorm8' // Chrome 133+
+  | 'unorm8x2'
+  | 'unorm8x3-webgl' // Not in WebGPU
+  | 'unorm8x4'
+  | 'unorm8x4-bgra' // Chrome 133+
+  | 'unorm10-10-10-2' // Chrome 119+
+  // | 'snorm-10-10-10-2' // Not in WebGPU, DXD12 doesn't support
+  | 'snorm8' // Chrome 133+
+  | 'snorm8x2'
+  | 'snorm8x3-webgl'
+  | 'snorm8x4'
+  // 16 bit integers, that only 32 bit aligned formats are supported in WebGPU (x2 and x4)
+  | 'uint16' // Chrome 133+
+  | 'sint16' // Chrome 133+
+  | 'unorm16' // Chrome 133+
+  | 'snorm16' // Chrome 133+
+  | 'uint16x2'
+  | 'uint16x4'
+  | 'sint16x2'
+  | 'sint16x4'
+  | 'unorm16x2'
+  | 'unorm16x4'
+  | 'snorm16x2'
+  | 'snorm16x4'
+  // 32 bit integers
+  | 'uint32'
+  | 'uint32x2'
+  | 'uint32x3'
+  | 'uint32x4'
+  | 'sint32'
+  | 'sint32x2'
+  | 'sint32x3'
+  | 'sint32x4'
+  // No normalized 32 bit integers in WebGPU...
+  // | 'unorm32'
+  // | 'unorm32x2'
+  // | 'unorm32x3'
+  // | 'unorm32x4'
+  // | 'snorm32'
+  // | 'snorm32x2'
+  // | 'snorm32x3'
+  // | 'snorm32x4'
+  // floats
+  | 'float16' // Chrome 133+
+  | 'float16x2'
+  | 'float16x4'
+  | 'float32'
+  | 'float32x2'
+  | 'float32x3'
+  | 'float32x4';
+
+/**
+ * @type Information about a vertex format
+ */
+export type VertexFormatInfo<T extends VertexFormat = VertexFormat> = {
+  /** Type of each component */
+  type: VertexFormatDataTypeT<T>;
+  /** Number of components per vertex / row */
+  components: VertexFormatComponentsT<T>;
+  /** Is this an integer format (normalized integer formats are not integer) */
+  integer: DataTypeIsIntegerT<VertexFormatDataTypeT<T>>;
+  /** Is this a signed format? */
+  signed: DataTypeIsSignedT<VertexFormatDataTypeT<T>>;
+  /** Is this a normalized format? */
+  normalized: DataTypeIsNormalizedT<VertexFormatDataTypeT<T>>;
+  /** Length in bytes */
+  byteLength: number;
+  /** Is this a bgra format? */
+  bgra?: boolean;
+  /** Is this a webgl only format? */
+  webglOnly?: boolean;
+};
+
+/** @type the NormalizedDataType of the components in a VertexFormat */
+export type VertexFormatDataTypeT<T extends VertexFormat> = T extends VertexFormatUint8
+  ? 'uint8'
+  : T extends VertexFormatSint8
+    ? 'sint8'
+    : T extends VertexFormatUnorm8
+      ? 'unorm8'
+      : T extends VertexFormatSnorm8
+        ? 'snorm8'
+        : T extends VertexFormatUint16
+          ? 'uint16'
+          : T extends VertexFormatSint16
+            ? 'sint16'
+            : T extends VertexFormatUnorm16
+              ? 'unorm16'
+              : T extends VertexFormatSnorm16
+                ? 'snorm16'
+                : T extends VertexFormatUint32
+                  ? 'uint32'
+                  : T extends VertexFormatSint32
+                    ? 'sint32'
+                    : T extends VertexFormatFloat16
+                      ? 'float16'
+                      : T extends VertexFormatFloat32
+                        ? 'float32'
+                        : never;
+
+/** @type number - the number of components in a VertexFormat */
+export type VertexFormatComponentsT<T extends VertexFormat> = T extends VertexFormat2Components
+  ? 2
+  : T extends VertexFormat3Components
+    ? 3
+    : T extends VertexFormat4Components
+      ? 4
+      : 1;
+
+// Helper types for the above
+
+type VertexFormatUint8 = 'uint8' | 'uint8x2' | 'uint8x4';
+type VertexFormatSint8 = 'sint8' | 'sint8x2' | 'sint8x4';
+type VertexFormatUnorm8 =
+  | 'unorm8'
+  | 'unorm8x2'
+  | 'unorm8x3-webgl'
+  | 'unorm8x4'
+  | 'unorm8x4-bgra'
+  | 'unorm10-10-10-2';
+type VertexFormatSnorm8 = 'snorm8' | 'snorm8x2' | 'snorm8x3-webgl' | 'snorm8x4';
+type VertexFormatUint16 = 'uint16' | 'uint16x2' | 'uint16x4';
+type VertexFormatSint16 = 'sint16' | 'sint16x2' | 'sint16x4';
+type VertexFormatUnorm16 = 'unorm16' | 'unorm16x2' | 'unorm16x4';
+type VertexFormatSnorm16 = 'snorm16' | 'snorm16x2' | 'snorm16x4';
+type VertexFormatUint32 = 'uint32' | 'uint32x2' | 'uint32x3' | 'uint32x4';
+type VertexFormatSint32 = 'sint32' | 'sint32x2' | 'sint32x3' | 'sint32x4';
+type VertexFormatFloat16 = 'float16' | 'float16x2' | 'float16x4';
+type VertexFormatFloat32 = 'float32' | 'float32x2' | 'float32x3' | 'float32x4';
+
+type VertexFormat2Components =
+  | 'uint8x2'
+  | 'sint8x2'
+  | 'unorm8x2'
+  | 'snorm8x2'
+  | 'uint16x2'
+  | 'sint16x2'
+  | 'unorm16x2'
+  | 'snorm16x2'
+  | 'uint32x2'
+  | 'sint32x2'
+  | 'float16x2'
+  | 'float32x2';
+type VertexFormat3Components = 'unorm8x3-webgl' | 'uint32x3' | 'sint32x3' | 'float32x3';
+type VertexFormat4Components =
+  | 'uint8x4'
+  | 'sint8x4'
+  | 'unorm8x4'
+  | 'unorm8x4-bgra'
+  | 'unorm10-10-10-2'
+  | 'snorm8x4'
+  | 'uint16x4'
+  | 'sint16x4'
+  | 'unorm16x4'
+  | 'snorm16x4'
+  | 'uint32x4'
+  | 'sint32x4'
+  | 'float16x4'
+  | 'float32x4';