@luma.gl/core 9.2.6 → 9.3.0-alpha.10

package/src/shadertypes/shader-types/shader-types.ts

@@ -0,0 +1,207 @@
+// luma.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {PrimitiveDataType} from '../data-types/data-types';
+
+/**
+ * @type the type of an attribute as defined in the shader source code.
+ * @note This is a subset of shader variable types
+ * @note Buffers with various `VertexFormat`s can be supplied for each type, GPU will convert them at runtime/
+ */
+export type AttributeShaderType =
+  | 'i32'
+  | 'u32'
+  | 'f32'
+  | 'f16'
+  | `vec2<${PrimitiveDataType}>`
+  | `vec3<${PrimitiveDataType}>`
+  | `vec4<${PrimitiveDataType}>`;
+
+/**
+ * @type Describes the type of a variable that can declared in shader source code.
+ * @note Uniforms can be declared using these types
+ * @note Uniforms can be of a wider range of types than attributes.
+ * @note to WebGL users: "bindings" (textures, samplers, and uniform buffers) are considered "bindings", not shader variables/uniforms
+ */
+export type VariableShaderType =
+  | 'i32'
+  | 'u32'
+  | 'f32'
+  | 'f16'
+  | `vec2<${PrimitiveDataType}>`
+  | `vec3<${PrimitiveDataType}>`
+  | `vec4<${PrimitiveDataType}>`
+  | `mat2x2<${PrimitiveDataType}>`
+  | `mat2x3<${PrimitiveDataType}>`
+  | `mat2x4<${PrimitiveDataType}>`
+  | `mat3x2<${PrimitiveDataType}>`
+  | `mat3x3<${PrimitiveDataType}>`
+  | `mat3x4<${PrimitiveDataType}>`
+  | `mat4x2<${PrimitiveDataType}>`
+  | `mat4x3<${PrimitiveDataType}>`
+  | `mat4x4<${PrimitiveDataType}>`;
+
+/** @type A composite shader type can include structs and arrays, recursively */
+export type CompositeShaderType = VariableShaderType | StructShaderType | ArrayShaderType;
+
+/** @type Represents a struct in WGSL */
+export type StructShaderType = {
+  [memberName: string]: CompositeShaderType;
+};
+
+/** @type Represents an array in WGSL */
+export type ArrayShaderType = readonly [type: CompositeShaderType, length: number];
+
+// Alias types
+
+/** @type Shorthand type aliases recognized by WGSL */
+export type AttributeShaderTypeAlias = keyof AttributeShaderTypeAliasMap;
+
+/** @note work around for lack of type narrowing in conditional generics */
+// prettier-ignore
+type AttributeShaderTypeAliasMap = {
+  vec2f: 'vec2<f32>';
+  vec3f: 'vec3<f32>';
+  vec4f: 'vec4<f32>';
+  vec2i: 'vec2<i32>';
+  vec3i: 'vec3<i32>';
+  vec4i: 'vec4<i32>';
+  vec2u: 'vec2<u32>';
+  vec3u: 'vec3<u32>';
+  vec4u: 'vec4<u32>';
+  vec2h: 'vec2<f16>';
+  vec3h: 'vec3<f16>';
+  vec4h: 'vec4<f16>';
+};
+
+/** @type Shorthand type aliases recognized by WGSL */
+export type VariableShaderTypeAlias = keyof VariableShaderTypeAliasMap;
+
+/** @note work around for lack of type narrowing in conditional generics */
+// prettier-ignore
+type VariableShaderTypeAliasMap = {
+  // Vector aliases
+  vec2f: 'vec2<f32>';
+  vec3f: 'vec3<f32>';
+  vec4f: 'vec4<f32>';
+  vec2i: 'vec2<i32>';
+  vec3i: 'vec3<i32>';
+  vec4i: 'vec4<i32>';
+  vec2u: 'vec2<u32>';
+  vec3u: 'vec3<u32>';
+  vec4u: 'vec4<u32>';
+  vec2h: 'vec2<f16>';
+  vec3h: 'vec3<f16>';
+  vec4h: 'vec4<f16>';
+
+  // Matrix aliases
+  mat2x2f: 'mat2x2<f32>';
+  mat2x3f: 'mat2x3<f32>';
+  mat2x4f: 'mat2x4<f32>';
+  mat3x2f: 'mat3x2<f32>';
+  mat3x3f: 'mat3x3<f32>';
+  mat3x4f: 'mat3x4<f32>';
+  mat4x2f: 'mat4x2<f32>';
+  mat4x3f: 'mat4x3<f32>';
+  mat4x4f: 'mat4x4<f32>';
+
+  mat2x2i: 'mat2x2<i32>';
+  mat2x3i: 'mat2x3<i32>';
+  mat2x4i: 'mat2x4<i32>';
+  mat3x2i: 'mat3x2<i32>';
+  mat3x3i: 'mat3x3<i32>';
+  mat3x4i: 'mat3x4<i32>';
+  mat4x2i: 'mat4x2<i32>';
+  mat4x3i: 'mat4x3<i32>';
+  mat4x4i: 'mat4x4<i32>';
+
+  mat2x2u: 'mat2x2<u32>';
+  mat2x3u: 'mat2x3<u32>';
+  mat2x4u: 'mat2x4<u32>';
+  mat3x2u: 'mat3x2<u32>';
+  mat3x3u: 'mat3x3<u32>';
+  mat3x4u: 'mat3x4<u32>';
+  mat4x2u: 'mat4x2<u32>';
+  mat4x3u: 'mat4x3<u32>';
+  mat4x4u: 'mat4x4<u32>';
+
+  mat2x2h: 'mat2x2<f16>';
+  mat2x3h: 'mat2x3<f16>';
+  mat2x4h: 'mat2x4<f16>';
+  mat3x2h: 'mat3x2<f16>';
+  mat3x3h: 'mat3x3<f16>';
+  mat3x4h: 'mat3x4<f16>';
+  mat4x2h: 'mat4x2<f16>';
+  mat4x3h: 'mat4x3<f16>';
+  mat4x4h: 'mat4x4<f16>';
+};
+
+// GENERICS
+
+/** @type The unaliased type */
+export type AttributeShaderTypeT<T extends AttributeShaderTypeAlias | AttributeShaderType> =
+  T extends AttributeShaderTypeAlias ? AttributeShaderTypeAliasMap[T] : T;
+
+/** @type The unaliased type */
+export type VariableShaderTypeT<T extends VariableShaderType | keyof VariableShaderTypeAliasMap> =
+  T extends VariableShaderTypeAlias ? VariableShaderTypeAliasMap[T] : T;
+
+// HELPER TYPES
+
+// prettier-ignore
+type TypeOfAliasSuffix<T extends string> =
+  T extends 'f' ? 'f32' :
+  T extends 'i' ? 'i32' :
+  T extends 'u' ? 'u32' :
+  T extends 'h' ? 'f16' :
+  never;
+
+// prettier-ignore
+export type AttributeShaderTypeAliasT<T extends AttributeShaderTypeAlias> =
+  T extends `vec2${infer S}` ? `vec2<${TypeOfAliasSuffix<S>}>` :
+  T extends `vec3${infer S}` ? `vec3<${TypeOfAliasSuffix<S>}>` :
+  T extends `vec4${infer S}` ? `vec4<${TypeOfAliasSuffix<S>}>` :
+  never;
+
+// prettier-ignore
+export type VariableShaderTypeAliasT<T extends VariableShaderTypeAlias> =
+  T extends `vec2${infer S}` ? `vec2<${TypeOfAliasSuffix<S>}>` :
+  T extends `vec3${infer S}` ? `vec3<${TypeOfAliasSuffix<S>}>` :
+  T extends `vec4${infer S}` ? `vec4<${TypeOfAliasSuffix<S>}>` :
+  T extends `mat2x2${infer S}` ? `mat2x2<${TypeOfAliasSuffix<S>}>` :
+  T extends `mat2x3${infer S}` ? `mat2x3<${TypeOfAliasSuffix<S>}>` :
+  T extends `mat2x4${infer S}` ? `mat2x4<${TypeOfAliasSuffix<S>}>` :
+  T extends `mat3x2${infer S}` ? `mat3x2<${TypeOfAliasSuffix<S>}>` :
+  T extends `mat3x3${infer S}` ? `mat3x3<${TypeOfAliasSuffix<S>}>` :
+  T extends `mat3x4${infer S}` ? `mat3x4<${TypeOfAliasSuffix<S>}>` :
+  T extends `mat4x2${infer S}` ? `mat4x2<${TypeOfAliasSuffix<S>}>` :
+  T extends `mat4x3${infer S}` ? `mat4x3<${TypeOfAliasSuffix<S>}>` :
+  T extends `mat4x4${infer S}` ? `mat4x4<${TypeOfAliasSuffix<S>}>` :
+  never;
+
+// : T extends `vec2<${infer S}>`
+//   ? `vec2<${S}>`
+//   : T extends `vec3<${infer S}>`
+//     ? `vec3<${S}>`
+//     : T extends `vec4<${infer S}>`
+//       ? `vec4<${S}>`
+//       : T extends `mat2x2<${infer S}>`
+//         ? `mat2x2<${S}>`
+//         : T extends `mat2x3<${infer S}>`
+//           ? `mat2x3<${S}>`
+//           : T extends `mat2x4<${infer S}>`
+//             ? `mat2x4<${S}>`
+//             : T extends `mat3x2<${infer S}>`
+//               ? `mat3x2<${S}>`
+//               : T extends `mat3x3<${infer S}>`
+//                 ? `mat3x3<${S}>`
+//                 : T extends `mat3x4<${infer S}>`
+//                   ? `mat3x4<${S}>`
+//                   : T extends `mat4x2<${infer S}>`
+//                     ? `mat4x2<${S}>`
+//                     : T extends `mat4x3<${infer S}>`
+//                       ? `mat4x3<${S}>`
+//                       : T extends `mat4x4<${infer S}>`
+//                         ? `mat4x4<${S}>`
+//                         : never;

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

@@ -77,7 +77,7 @@ export function readPixel(
 
   // Extract each of the four channels.
   for (let i = 0; i < 4; i++) {
-    const bits = bitsPerChannel[i];
+    const bits = bitsPerChannel[i] ?? 0;
     // If a channel's bit width is zero or negative, consider it not present.
     if (bits <= 0) {
       channels.push(0);
@@ -88,7 +88,7 @@ export function readPixel(
     }
   }
 
-  return [channels[0], channels[1], channels[2], channels[3]];
+  return [channels[0] ?? 0, channels[1] ?? 0, channels[2] ?? 0, channels[3] ?? 0];
 }
 
 /**
@@ -130,10 +130,10 @@ export function writePixel(
 ): void {
   let currentBitOffset = bitOffset;
   for (let channel = 0; channel < 4; channel++) {
-    const bits = bitsPerChannel[channel];
+    const bits = bitsPerChannel[channel] ?? 0;
     // Clamp the channel value to the maximum allowed by the bit width.
     const maxValue = (1 << bits) - 1;
-    const channelValue = pixel[channel] & maxValue;
+    const channelValue = (pixel[channel] ?? 0) & maxValue;
     writeBitsToDataView(dataView, currentBitOffset, bits, channelValue);
     currentBitOffset += bits;
   }

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

@@ -3,83 +3,149 @@
 // 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,
   TextureFormatInfo,
   TextureFormatCapabilities,
-  TextureFormatColor
+  TextureFormatColor,
+  TextureMemoryLayout,
+  TextureFormatDepthStencil
 } from './texture-formats';
 import {getTextureFormatDefinition} from './texture-format-table';
 
+const RGB_FORMAT_REGEX = /^(r|rg|rgb|rgba|bgra)([0-9]*)([a-z]*)(-srgb)?(-webgl)?$/;
+const COLOR_FORMAT_PREFIXES = ['rgb', 'rgba', 'bgra'];
+const DEPTH_FORMAT_PREFIXES = ['depth', 'stencil'];
 // prettier-ignore
 const COMPRESSED_TEXTURE_FORMAT_PREFIXES = [
   'bc1', 'bc2', 'bc3', 'bc4', 'bc5', 'bc6', 'bc7', 'etc1', 'etc2', 'eac', 'atc', 'astc', 'pvrtc'
 ];
 
-const RGB_FORMAT_REGEX = /^(r|rg|rgb|rgba|bgra)([0-9]*)([a-z]*)(-srgb)?(-webgl)?$/;
-
+// HELPERS - MEMORY LAYOUT
+
+/** Options to calculate a texture layout */
+export type TextureMemoryLayoutOptions = {
+  /** Number of bytes per pixel */
+  format: TextureFormat;
+  /** Width of the texture in pixels */
+  width: number;
+  /** Height of the texture in pixels */
+  height: number;
+  /** Number of images in the texture */
+  depth: number;
+  /** Alignment of each row */
+  byteAlignment: number;
+};
+
+/** Class that helps applications work with texture formats */
 export class TextureFormatDecoder {
-  /** Returns information about a texture format, e.g. attatchment type, components, byte length and flags (integer, signed, normalized) */
-  getInfo(format: TextureFormat): TextureFormatInfo {
-    return getTextureFormatInfo(format);
-  }
-
   /** Checks if a texture format is color */
   isColor(format: TextureFormat): format is TextureFormatColor {
-    return format.startsWith('rgba') || format.startsWith('bgra') || format.startsWith('rgb');
+    return COLOR_FORMAT_PREFIXES.some(prefix => format.startsWith(prefix));
   }
 
   /** Checks if a texture format is depth or stencil */
-  isDepthStencil(format: TextureFormat): boolean {
-    return format.startsWith('depth') || format.startsWith('stencil');
+  isDepthStencil(format: TextureFormat): format is TextureFormatDepthStencil {
+    return DEPTH_FORMAT_PREFIXES.some(prefix => format.startsWith(prefix));
   }
 
   /** Checks if a texture format is compressed */
   isCompressed(format: TextureFormat): format is TextureFormatCompressed {
-    return COMPRESSED_TEXTURE_FORMAT_PREFIXES.some(prefix => (format as string).startsWith(prefix));
+    return COMPRESSED_TEXTURE_FORMAT_PREFIXES.some(prefix => format.startsWith(prefix));
   }
 
-  /**
-   * Returns the "static" capabilities of a texture format.
-   * @note Needs to be checked against current device
-   */
-  getCapabilities(format: TextureFormat): TextureFormatCapabilities {
-    const info = getTextureFormatDefinition(format);
-
-    const formatCapabilities: Required<TextureFormatCapabilities> = {
-      format,
-      create: info.f ?? true,
-      render: info.render ?? true,
-      filter: info.filter ?? true,
-      blend: info.blend ?? true,
-      store: info.store ?? true
-    };
-
-    const formatInfo = getTextureFormatInfo(format);
-    const isDepthStencil = format.startsWith('depth') || format.startsWith('stencil');
-    const isSigned = formatInfo?.signed;
-    const isInteger = formatInfo?.integer;
-    const isWebGLSpecific = formatInfo?.webgl;
+  /** Returns information about a texture format, e.g. attachment type, components, byte length and flags (integer, signed, normalized) */
+  getInfo(format: TextureFormat): TextureFormatInfo {
+    return getTextureFormatInfo(format);
+  }
 
-    // signed formats are not renderable
-    formatCapabilities.render &&= !isSigned;
-    // signed and integer formats are not filterable
-    formatCapabilities.filter &&= !isDepthStencil && !isSigned && !isInteger && !isWebGLSpecific;
+  /**  "static" capabilities of a texture format. @note Needs to be adjusted against current device */
+  getCapabilities(format: TextureFormat): TextureFormatCapabilities {
+    return getTextureFormatCapabilities(format);
+  }
 
-    return formatCapabilities;
+  /** Computes the memory layout for a texture, in particular including row byte alignment */
+  computeMemoryLayout(opts: TextureMemoryLayoutOptions): TextureMemoryLayout {
+    return computeTextureMemoryLayout(opts);
   }
 }
 
+/** Decoder for luma.gl texture types */
 export const textureFormatDecoder = new TextureFormatDecoder();
 
-// HELPERS
+// HELPERS - MEMORY LAYOUT
+
+/** Get the memory layout of a texture */
+function computeTextureMemoryLayout({
+  format,
+  width,
+  height,
+  depth,
+  byteAlignment
+}: TextureMemoryLayoutOptions): TextureMemoryLayout {
+  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 = blockRows;
+  const byteLength = bytesPerRow * rowsPerImage * depth;
+
+  return {
+    bytesPerPixel,
+    bytesPerRow,
+    rowsPerImage,
+    depthOrArrayLayers: depth,
+    bytesPerImage: bytesPerRow * rowsPerImage,
+    byteLength
+  };
+}
+
+// HELPERS - CAPABILITIES
+
+function getTextureFormatCapabilities(format: TextureFormat): TextureFormatCapabilities {
+  const info = getTextureFormatDefinition(format);
+
+  const formatCapabilities: Required<TextureFormatCapabilities> = {
+    format,
+    create: info.f ?? true,
+    render: info.render ?? true,
+    filter: info.filter ?? true,
+    blend: info.blend ?? true,
+    store: info.store ?? true
+  };
+
+  const formatInfo = getTextureFormatInfo(format);
+  const isDepthStencil = format.startsWith('depth') || format.startsWith('stencil');
+  const isSigned = formatInfo?.signed;
+  const isInteger = formatInfo?.integer;
+  const isWebGLSpecific = formatInfo?.webgl;
+  const isCompressed = Boolean(formatInfo?.compressed);
+
+  // 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;
+
+  return formatCapabilities;
+}
+
+// HELPER - FORMAT INFO
 
 /**
  * Decodes a texture format, returning e.g. attatchment type, components, byte length and flags (integer, signed, normalized)
  */
-function getTextureFormatInfo(format: TextureFormat): TextureFormatInfo {
+export function getTextureFormatInfo(format: TextureFormat): TextureFormatInfo {
   let formatInfo: TextureFormatInfo = getTextureFormatInfoUsingTable(format);
 
   if (textureFormatDecoder.isCompressed(format)) {
@@ -88,6 +154,7 @@ function getTextureFormatInfo(format: TextureFormat): TextureFormatInfo {
     formatInfo.bytesPerPixel = 1;
     formatInfo.srgb = false;
     formatInfo.compressed = true;
+    formatInfo.bytesPerBlock = getCompressedTextureBlockByteLength(format);
 
     const blockSize = getCompressedTextureBlockSize(format);
     if (blockSize) {
@@ -97,13 +164,13 @@ 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 as 1 | 2 | 3 | 4;
+    const components = (channels?.length ?? 1) as 1 | 2 | 3 | 4;
     const bitsPerChannel: [number, number, number, number] = [
       bits,
       components >= 2 ? bits : 0,
@@ -121,7 +188,7 @@ function getTextureFormatInfo(format: TextureFormat): TextureFormatInfo {
       signed: decodedType.signed,
       normalized: decodedType.normalized,
       bitsPerChannel,
-      bytesPerPixel: decodedType.byteLength * channels.length,
+      bytesPerPixel: decodedType.byteLength * components,
       packed: formatInfo.packed,
       srgb: formatInfo.srgb
     };
@@ -190,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