@luma.gl/core 9.0.0-alpha.9 → 9.0.0-beta.2

package/src/adapter/resources/transform-feedback.ts

@@ -0,0 +1,45 @@
+// luma.gl, MIT license
+import type {Device} from '../device';
+import {PrimitiveTopology} from '../types/parameters';
+import {ShaderLayout} from '../types/shader-layout';
+import type {Buffer} from './buffer';
+import {Resource, ResourceProps} from './resource';
+
+/** For bindRange */
+export type BufferRange = {
+  buffer: Buffer;
+  byteOffset?: number;
+  byteLength?: number;
+};
+
+/** Configures a set of output buffers for pipeline (WebGL 2 only) */
+export type TransformFeedbackProps = ResourceProps & {
+  /** Layout of shader (for varyings) */
+  layout: ShaderLayout;
+  /** Buffer bindings (for varyings) */
+  buffers: Record<string, Buffer | BufferRange>;
+};
+
+/** Holds a set of output buffers for pipeline (WebGL 2 only) */
+export abstract class TransformFeedback extends Resource<TransformFeedbackProps> {
+  static override defaultProps: Required<TransformFeedbackProps> = {
+    ...Resource.defaultProps,
+    layout: undefined!,
+    buffers: {}
+  };
+
+  get [Symbol.toStringTag](): string {
+    return 'TransformFeedback';
+  }
+
+  constructor(device: Device, props?: TransformFeedbackProps) {
+    super(device, props, TransformFeedback.defaultProps);
+  }
+
+  abstract begin(topology?: PrimitiveTopology): void;
+  abstract end(): void;
+
+  abstract setBuffers(buffers: Record<string, Buffer | BufferRange>): void;
+  abstract setBuffer(locationOrName: string | number, bufferOrRange: Buffer | BufferRange): void;
+  abstract getBuffer(locationOrName: string | number): Buffer | BufferRange | null;
+}

package/src/adapter/resources/vertex-array.ts

@@ -0,0 +1,65 @@
+// luma.gl, MIT license
+import type {TypedArray} from '../../types';
+import {
+  AttributeInfo,
+  getAttributeInfosByLocation
+} from '../attribute-utils/get-attribute-from-layouts';
+import type {Device} from '../device';
+import type {Buffer} from './buffer';
+import type {RenderPass} from './render-pass';
+import type {RenderPipeline} from './render-pipeline';
+import {Resource, ResourceProps} from './resource';
+
+/** Properties for initializing a VertexArray */
+export type VertexArrayProps = ResourceProps & {
+  renderPipeline: RenderPipeline | null;
+};
+
+/**
+ * Stores attribute bindings.
+ * Makes it easy to share a render pipeline and use separate vertex arrays.
+ * @note On WebGL, VertexArray allows non-constant bindings to be performed in advance
+ * reducing the number of WebGL calls per draw call.
+ * @note On WebGPU this is just a convenience class that collects the bindings.
+ */
+export abstract class VertexArray extends Resource<VertexArrayProps> {
+  static override defaultProps: Required<VertexArrayProps> = {
+    ...Resource.defaultProps,
+    renderPipeline: null
+  };
+
+  override get [Symbol.toStringTag](): string {
+    return 'VertexArray';
+  }
+
+  /** Max number of vertex attributes */
+  readonly maxVertexAttributes: number;
+  /** Attribute infos indexed by location - TODO only needed by webgl module? */
+  protected readonly attributeInfos: AttributeInfo[];
+
+  /** Index buffer */
+  indexBuffer: Buffer | null = null;
+  /** Attributes indexed by buffer slot */
+  attributes: (Buffer | TypedArray | null)[];
+
+  constructor(device: Device, props: VertexArrayProps) {
+    super(device, props, VertexArray.defaultProps);
+    this.maxVertexAttributes = device.limits.maxVertexAttributes;
+    this.attributes = new Array(this.maxVertexAttributes).fill(null);
+    this.attributeInfos = getAttributeInfosByLocation(
+      props.renderPipeline.shaderLayout,
+      props.renderPipeline.bufferLayout,
+      this.maxVertexAttributes
+    );
+  }
+
+  /** Set attributes (stored on pipeline and set before each call) */
+  abstract setIndexBuffer(indices: Buffer | null): void;
+  /** Set attributes (stored on pipeline and set before each call) */
+  abstract setBuffer(bufferSlot: number, buffer: Buffer | null): void;
+  /** Set constant attributes (WebGL only) */
+  abstract setConstant(location: number, value: TypedArray | null): void;
+
+  abstract bindBeforeRender(renderPass: RenderPass): void;
+  abstract unbindAfterRender(renderPass: RenderPass): void;
+}

package/src/adapter/type-utils/decode-attribute-type.ts

@@ -0,0 +1,82 @@
+// luma.gl, MIT licese
+import {ShaderDataType, ShaderAttributeType} from '../types/shader-types';
+import {VertexFormat, VertexType} from '../types/vertex-formats';
+
+/** Information extracted from a ShaderAttributeInfo constant */
+export type ShaderAttributeTypeInfo = {
+  /** WGSL-style primitive data type, f32, i32, u32 */
+  dataType: ShaderDataType,
+  /** Whether this is a normalized integer (that must be used as float) */
+  components: 1 | 2 | 3 | 4;
+  /** Length in bytes of the data for one vertex */
+  byteLength?: number;
+  /** Whether this is for integer or float vert */
+  integer: boolean;
+  /** Whether this data type is signed */
+  signed: boolean;
+  /** The simplest vertex format that matches the shader attribute's data type */
+  defaultVertexFormat?: VertexFormat;
+};
+
+/** Decodes a vertex type, returning byte length and flags (integer, signed, normalized) */
+export function decodeShaderAttributeType(attributeType: ShaderAttributeType): ShaderAttributeTypeInfo {
+  const [dataType, components] = TYPE_INFO[attributeType];
+  const integer: boolean = dataType === 'i32' || dataType === 'u32';
+  const signed: boolean = dataType !== 'u32';
+
+  const byteLength = TYPE_SIZES[dataType] * components;
+  const defaultVertexFormat = getCompatibleVertexFormat(dataType, components);
+  return {
+    dataType,
+    components,
+    defaultVertexFormat,
+    byteLength,
+    integer,
+    signed
+  };
+}
+
+/** Get the "default" vertex format for a certain shader data type */
+function getCompatibleVertexFormat(dataType: ShaderDataType, components: 1 | 2 | 3 | 4): VertexFormat {
+  let vertexType: VertexType;
+  switch (dataType) {
+    case 'f32': vertexType = 'float32'; break;
+    case 'i32': vertexType = 'sint32'; break;
+    case 'u32': vertexType = 'uint32'; break;
+    case 'f16': 
+      return components <= 2 ? 'float16x2' : 'float16x4';
+  }
+  // TODO logic does not work for float16
+  if (components === 1) {
+    return vertexType;
+  }
+  return `${vertexType}x${components}`;
+}
+
+/** All valid shader attribute types. A table guarantees exhaustive list and fast execution */
+const TYPE_INFO: Record<ShaderAttributeType, [ShaderDataType, 1 | 2 | 3 | 4]> = {
+  f32: ['f32', 1],
+  'vec2<f32>': ['f32', 2],
+  'vec3<f32>': ['f32', 3],
+  'vec4<f32>': ['f32', 4],
+  f16: ['f16', 1],
+  'vec2<f16>': ['f16', 2],
+  'vec3<f16>': ['f16', 3],
+  'vec4<f16>': ['f16', 4],
+  i32: ['i32', 1],
+  'vec2<i32>': ['i32', 2],
+  'vec3<i32>': ['i32', 3],
+  'vec4<i32>': ['i32', 4],
+  u32: ['u32', 1],
+  'vec2<u32>': ['u32', 2],
+  'vec3<u32>': ['u32', 3],
+  'vec4<u32>': ['u32', 4]
+};
+
+const TYPE_SIZES: Record<ShaderDataType, number> = {
+  f32: 4,
+  f16: 2,
+  i32: 4,
+  u32: 4,
+  // 'bool-webgl': 4,  
+};

package/src/adapter/type-utils/decode-data-type.ts

@@ -0,0 +1,62 @@
+import {DataType, NormalizedDataType} from '../types/vertex-formats';
+
+export type DecodedVertexType = {
+  /** WebGPU data type */
+  dataType: DataType,
+  /** Length in bytes of the data for one vertex */
+  byteLength: number;
+  /** Whether this is for integer or float vert */
+  integer: boolean;
+  /** Whether this data type is signed */
+  signed: boolean;
+  /** Whether this is a normalized integer (that must be used as float) */
+  normalized: boolean;
+};
+
+/** Decodes a vertex type, returning byte length and flags (integer, signed, normalized) */
+export function decodeVertexType(type: NormalizedDataType): DecodedVertexType {
+  const dataType = TYPE_MAP[type];
+  const bytes = getDataTypeBytes(dataType);
+  const normalized: boolean = type.includes('norm');
+  const integer: boolean = !normalized && !type.startsWith('float');
+  const signed: boolean = type.startsWith('s');
+  return {
+    dataType: TYPE_MAP[type],
+    byteLength: bytes,
+    integer,
+    signed,
+    normalized
+  };
+}
+
+function getDataTypeBytes(type: DataType): number {
+  const bytes = TYPE_SIZES[type];
+  // assert(bytes);
+  return bytes;
+}
+
+const TYPE_MAP: Record<NormalizedDataType, DataType> = {
+  uint8: 'uint8',
+  sint8: 'sint8',
+  unorm8: 'uint8',
+  snorm8: 'sint8',
+  uint16: 'uint16',
+  sint16: 'sint16',
+  unorm16: 'uint16',
+  snorm16: 'sint16',
+  float16: 'float16',
+  float32: 'float32',
+  uint32: 'uint32',
+  sint32: 'sint32'
+};
+
+const TYPE_SIZES: Record<DataType, number> = {
+  uint8: 1,
+  sint8: 1,
+  uint16: 2,
+  sint16: 2,
+  float16: 2,
+  float32: 4,
+  uint32: 4,
+  sint32: 4
+};

package/src/adapter/type-utils/decode-shader-types.ts

@@ -0,0 +1,48 @@
+// luma.gl, MIT license
+// Copyright (c) vis.gl contributors
+
+import {assert} from '../../utils/assert';
+import {ShaderUniformType, ShaderDataType} from '../types/shader-types';
+
+const UNIFORM_FORMATS: Record<ShaderUniformType, {type: ShaderDataType, components: number}> = {
+  'f32': {type: 'f32', components: 1},
+  'i32': {type: 'i32', components: 1},
+  'u32': {type: 'u32', components: 1},
+  // 'bool-webgl': {type: 'bool-webgl', components: 1},
+  'vec2<f32>': {type: 'f32', components: 2},
+  'vec3<f32>': {type: 'f32', components: 3},
+  'vec4<f32>': {type: 'f32', components: 4},
+  'vec2<i32>': {type: 'i32', components: 2},
+  'vec3<i32>': {type: 'i32', components: 3},
+  'vec4<i32>': {type: 'i32', components: 4},
+  'vec2<u32>': {type: 'u32', components: 2},
+  'vec3<u32>': {type: 'u32', components: 3},
+  'vec4<u32>': {type: 'u32', components: 4},
+  'mat2x2<f32>': {type: 'f32', components: 4},
+  'mat2x3<f32>': {type: 'f32', components: 6},
+  'mat2x4<f32>': {type: 'f32', components: 8},
+  'mat3x2<f32>': {type: 'f32', components: 6},
+  'mat3x3<f32>': {type: 'f32', components: 9},
+  'mat3x4<f32>': {type: 'f32', components: 12},
+  'mat4x2<f32>': {type: 'f32', components: 8},
+  'mat4x3<f32>': {type: 'f32', components: 12},
+  'mat4x4<f32>': {type: 'f32', components: 16},
+};
+
+/** Split a uniform type string into type and components */
+export function decodeShaderUniformType(format: ShaderUniformType): {type: ShaderDataType, components: number} {
+  const decoded = UNIFORM_FORMATS[format];
+  assert(format);
+  return decoded;
+} 
+
+/** Align offset to 1, 2 or 4 elements (4, 8 or 16 bytes) */
+export function alignTo(size: number, count: number): number {
+  // prettier-ignore
+  switch (count) {
+    case 1: return size; // Pad upwards to even multiple of 2
+    case 2: return size + (size % 2); // Pad upwards to even multiple of 2
+    default: return size + ((4 - (size % 4)) % 4); // Pad upwards to even multiple of 4
+  }
+}
+

package/src/adapter/type-utils/decode-texture-format.ts

@@ -0,0 +1,190 @@
+import {TextureFormat} from '../types/texture-formats';
+import {VertexType} from '../types/vertex-formats';
+import {decodeVertexType} from './decode-data-type';
+
+const REGEX = /^(rg?b?a?)([0-9]*)([a-z]*)(-srgb)?(-webgl|-unsized)?$/;
+
+export type DecodedTextureFormat = {
+  format: 'r' | 'rg' | 'rgb' | 'rgba';
+  components: 1 | 2 | 3 | 4;
+  dataType?: VertexType;
+  srgb: boolean;
+  webgl: boolean;
+  unsized: boolean;
+  byteLength: number;
+  integer: boolean;
+  signed: boolean;
+  normalized: boolean;
+}
+
+/**
+ * Decodes a vertex format, returning type, components, byte length and flags (integer, signed, normalized)
+ */
+export function decodeTextureFormat(format: TextureFormat): DecodedTextureFormat {
+  const matches = REGEX.exec((format as string));
+  if (matches) {
+    const [, format, length, type, srgb, suffix] = matches;
+    if (format) {
+      const dataType = `${type}${length}` as VertexType;
+      const decodedType = decodeVertexType(dataType);
+      return {
+        format: format as 'r' | 'rg' | 'rgb' | 'rgba',
+        components: format.length as 1 | 2 | 3 | 4,
+        // dataType - overwritten by decodedType
+        srgb: srgb === '-srgb',
+        unsized: suffix === '-unsized',
+        webgl: suffix === '-webgl',
+        ...decodedType
+      };
+    }
+  }
+
+  return decodeNonStandardFormat(format);
+}
+
+// https://www.w3.org/TR/webgpu/#texture-format-caps
+
+const EXCEPTIONS: Partial<Record<TextureFormat, any>> = {
+  // Packed 16 bit formats
+  'rgba4unorm-webgl': {format: 'rgba', bpp: 2}, 
+  'rgb565unorm-webgl': {format: 'rgb', bpp: 2},
+  'rgb5a1unorm-webgl': {format: 'rgba', bbp: 2}, 
+  // Packed 32 bit formats
+  'rgb9e5ufloat': {format: 'rgb', bbp: 4},
+  'rg11b10ufloat': {format: 'rgb', bbp: 4},
+  'rgb10a2unorm': {format: 'rgba', bbp: 4},
+  'rgb10a2unorm-webgl': {format: 'rgba', bbp: 4},
+  // Depth/stencil
+  'stencil8': {components: 1, bpp: 1, a: 'stencil'},
+  'depth16unorm': {components: 1, bpp: 2, a: 'depth'},
+  'depth24plus': {components: 1, bpp: 3, a: 'depth'},
+  'depth32float': {components: 1, bpp: 4, a: 'depth'},
+  'depth24plus-stencil8': {components: 2, bpp: 4, a: 'depth-stencil'},
+  // "depth24unorm-stencil8" feature
+  'depth24unorm-stencil8': {components: 2, bpp: 4, a: 'depth-stencil'},
+  // "depth32float-stencil8" feature
+  'depth32float-stencil8': {components: 2, bpp: 4, a: 'depth-stencil'}
+};
+
+function decodeNonStandardFormat(format: TextureFormat): DecodedTextureFormat {
+  const data = EXCEPTIONS[format];
+  if (!data) {
+    throw new Error(`Unknown format ${format}`);
+  }
+  return {
+    format: data.format || '',
+    components: data.components || data.format?.length || 1,
+    byteLength: data.bpp || 1,
+    srgb: false,
+    unsized: false    
+  } as DecodedTextureFormat;
+}
+
+/*
+'r8unorm':	{s: "float"}, // 	✓	✓	✓	},
+'r8snorm':	{s: "float"}, // 		✓		},
+'r8uint':	{s: "uint"}, // 	✓	✓		},
+'r8sint':	{s: "sint"}, // 	✓	✓		},
+'rg8unorm':	{s: "float"}, // 	✓	✓	✓	},
+'rg8snorm':	{s: "float"}, // 		✓		},
+'rg8uint':	{s: "uint"}, // 	✓	✓		},
+'rg8sint':	{s: "sint"}, // 	✓	✓		},
+'rgba8unorm':	{s: "float"}, // 	✓	✓	✓	✓},
+'rgba8unorm-srgb': {s: "float"}, // 	✓	✓	✓	},
+'rgba8snorm':	{s: "float"}, // 		✓		✓},
+'rgba8uint':	{s: "uint"}, // 	✓	✓		✓},
+'rgba8sint':	{s: "sint"}, // 	✓	✓		✓},
+'bgra8unorm':	{s: "float"}, // 	✓	✓	✓	},
+'bgra8unorm-srgb': {s: "float"}, // 	✓	✓	✓	},
+// 16-bit per component					
+'r16uint': {s: "uint"}, // 	✓	✓		},
+'r16sint': {s: "sint"}, // 	✓	✓		},
+'r16float': {s: "float"}, // 	✓	✓	✓	},
+'rg16uint': {s: "uint"}, // 	✓	✓		},
+'rg16sint': {s: "sint"}, // 	✓	✓		},
+'rg16float': {s: "float"}, // 	✓	✓	✓	},
+'rgba16uint': {s: "uint"}, // 	✓	✓		✓},
+'rgba16sint': {s: "sint"}, // 	✓	✓		✓},
+'rgba16float': {s: "float"}, // 	✓	✓	✓	✓},
+// 32-bit per component					
+'r32uint': {s: "uint"}, // 	✓			✓},
+'r32sint': {s: "sint"}, // 	✓			✓},
+'r32float': {"unfilterable-float"	✓	✓		✓},
+'rg32uint': {s: "uint"}, // 	✓			✓},
+'rg32sint': {s: "sint"}, // 	✓			✓},
+'rg32float': {"unfilterable-float"	✓			✓},
+'rgba32uint': {s: "uint"}, // 	✓			✓},
+'rgba32sint': {s: "sint"}, // 	✓			✓},
+'rgba32float': {"unfilterable-float"	✓			✓},
+// mixed component width					
+'rgb10a2unorm': {s: "float"}, // 	✓	✓	✓	}
+'rg11b10ufloat': {s: "float"}, // 		✓		}
+// Format	Bytes per texel	Aspect	GPUTextureSampleType	Valid image copy source	Valid image copy destination
+'stencil8': {1 − 4	stencil	"uint"	✓}
+'depth16unorm': {2	depth	"depth"	✓}
+'depth24plus': {4	depth	"depth"	✗}
+'depth24plus': {stencil8	4 − 8	depth	"depth"	✗}
+'stencil': {s: "uint"}, // 	✓}
+'depth32float': {4	depth	"depth"	✓	✗}
+'depth24unorm': {stencil8	4	depth	"depth"	✗}
+'stencil': {s: "uint"}, // 	✓}
+'depth32float': {stencil8}
+
+// Format	Bytes per block	GPUTextureSampleType	Block Size	Feature
+'rgb9e5ufloat': {c: 4, s: "float",	bpp: 4/(1*1)},
+
+'bc1-rgba-unorm': {c: 4. s: "float", bpp: 8/(4 * 4) f: 'texture-compression-bc'},
+'bc1-rgba-unorm-srgb': {c: 4. s: "float", bpp: 8/(4 * 4) f: 'texture-compression-bc'},
+'bc2-rgba-unorm': {c: 4. s: "float", bpp: 16/(4 * 4) f: 'texture-compression-bc'},
+'bc2-rgba-unorm-srgb': {c: 4. s: "float", bpp: 16/(4 * 4) f: 'texture-compression-bc'},
+'bc3-rgba-unorm': {c: 4. s: "float", bpp: 16/(4 * 4) f: 'texture-compression-bc'},
+'bc3-rgba-unorm-srgb': {c: 4. s: "float", bpp: 16/(4 * 4) f: 'texture-compression-bc'},
+'bc4-r-unorm': {c: 1. s: "float", bpp: 8/(4 * 4) f: 'texture-compression-bc'},
+'bc4-r-snorm': {c: 1. s: "float", bpp: 8/(4 * 4) f: 'texture-compression-bc'},
+'bc5-rg-unorm': {c: 2. s: "float", bpp: 16/(4 * 4) f: 'texture-compression-bc'},
+'bc5-rg-snorm': { },
+'bc6h-rgb-ufloat': {	16 },
+'bc6h-rgb-float': { },
+'bc7-rgba-unorm': {	16 },
+'bc7-rgba-unorm-srgb': { },
+
+'etc2-rgb8unorm': {	8	"float"	4 × 4	texture-compression-etc2 },
+'etc2-rgb8unorm-srgb': { },
+'etc2-rgb8a1unorm': {	8 },
+'etc2-rgb8a1unorm-srgb': { },
+'etc2-rgba8unorm': {	16 },
+'etc2-rgba8unorm-srgb': { },
+
+'eac-r11unorm': {	8 },
+'eac-r11snorm': { },
+'eac-rg11unorm': {	16 },
+'eac-rg11snorm': { },
+
+'astc-4x4-unorm': {	16	"float"	4 × 4	texture-compression-astc },
+'astc-4x4-unorm-srgb': { },
+'astc-5x4-unorm': {	16	5 × 4 },
+'astc-5x4-unorm-srgb': { },
+'astc-5x5-unorm': {	16	5 × 5 },
+'astc-5x5-unorm-srgb': { },
+'astc-6x5-unorm': {	16	6 × 5 },
+'astc-6x5-unorm-srgb': { },
+'astc-6x6-unorm': {	16	6 × 6 },
+'astc-6x6-unorm-srgb': { },
+'astc-8x5-unorm': {	16	8 × 5 },
+'astc-8x5-unorm-srgb': { },
+'astc-8x6-unorm': {	16	8 × 6 },
+'astc-8x6-unorm-srgb': { },
+'astc-8x8-unorm': {	16	8 × 8 },
+'astc-8x8-unorm-srgb': { },
+'astc-10x5-unorm': {	16	10 × 5 },
+'astc-10x5-unorm-srgb': { },
+'astc-10x6-unorm': {	16	10 × 6 },
+'astc-10x6-unorm-srgb': { },
+'astc-10x8-unorm': {	16	10 × 8 },
+'astc-10x8-unorm-srgb': { },
+'astc-10x10-unorm': {	16	10 × 10 },
+'astc-10x10-unorm-srgb': { },
+'astc-12x10-unorm': {	16	12 × 10 },
+'astc-12x10-unorm-srgb': { },
+'astc-12x12-unorm': {	16 },
+*/

package/src/adapter/type-utils/decode-vertex-format.ts

@@ -0,0 +1,49 @@
+import {VertexFormat, VertexType} from '../types/vertex-formats';
+import {decodeVertexType} from './decode-data-type';
+
+export type VertexFormatInfo = {
+  /** Length in bytes */
+  byteLength: number;
+  /** Type of each component */
+  type: VertexType;
+  /** Number of components per vertex / row */
+  components: 1 | 2 | 3 | 4;
+  /** Is this an integer format (normalized integer formats are not integer) */
+  integer: boolean;
+  /** Is this a signed format? */
+  signed: boolean;
+  /** Is this a normalized format? */
+  normalized: boolean;
+  /** Is this a webgl only format? */
+  webglOnly?: boolean;
+};
+
+/**
+ * Decodes a vertex format, returning type, components, byte  length and flags (integer, signed, normalized)
+ */
+export function decodeVertexFormat(format: VertexFormat): VertexFormatInfo {
+  // 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 VertexType;
+  const components = (count ? parseInt(count) : 1) as 1 | 2 | 3 | 4;
+  // decode the type
+  const decodedType = decodeVertexType(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;
+}

package/src/adapter/type-utils/vertex-format-from-attribute.ts

@@ -0,0 +1,103 @@
+// luma.gl, MIT licese
+import {TypedArray, TypedArrayConstructor} from '../..';
+import {VertexFormat} from '../types/vertex-formats';
+
+// import {DataType} from '../types/vertex-formats';
+// type Omit<DataType, 'float16'> unfortunately breaks Typescript inferance
+type DataType = 'uint8' | 'sint8' | 'uint16' | 'sint16' | 'uint32' | 'sint32' | 'float32';
+type DataTypeNorm = 'unorm8' | 'snorm8' | 'unorm16' | 'snorm16';
+
+export function getDataTypeFromTypedArray(
+  arrayOrType: TypedArray | TypedArrayConstructor
+): DataType {
+  const type = ArrayBuffer.isView(arrayOrType) ? arrayOrType.constructor : arrayOrType;
+  switch (type) {
+    case Float32Array:
+      return 'float32';
+    case Uint16Array:
+      return 'uint16';
+    case Uint32Array:
+      return 'uint32';
+    case Uint8Array:
+    case Uint8ClampedArray:
+      return 'uint8';
+    case Int8Array:
+      return 'sint8';
+    case Int16Array:
+      return 'sint16';
+    case Int32Array:
+      return 'sint32';
+    default:
+      // Failed to deduce data type from typed array
+      throw new Error(type.constructor.name);
+  }
+}
+
+export function getTypedArrayFromDataType(
+  dataType: DataType | DataTypeNorm
+): TypedArrayConstructor {
+  switch (dataType) {
+    case 'float32':
+      return Float32Array;
+    case 'uint32':
+      return Uint32Array;
+    case 'sint32':
+      return Int32Array;
+    case 'uint16':
+    case 'unorm16':
+      return Uint16Array;
+    case 'sint16':
+    case 'snorm16':
+      return Int16Array;
+    case 'uint8':
+    case 'unorm8':
+      return Uint8Array;
+    case 'sint8':
+    case 'snorm8':
+      return Int8Array;
+    default:
+      // Failed to deduce typed array from data type
+      throw new Error(dataType);
+  }
+}
+
+/** Get the vertex format for an attribute with TypedArray and size */
+export function 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;
+  let dataType: DataType | DataTypeNorm = getDataTypeFromTypedArray(typedArray);
+
+  if (dataType === 'uint8' || dataType === 'sint8') {
+    if (components === 1 || components === 3) {
+      // WebGPU 8 bit formats must be aligned to 16 bit boundaries');
+      throw new Error(`size: ${size}`);
+    }
+    if (normalized) {
+      dataType = dataType.replace('int', 'norm') as 'unorm8' | 'snorm8';
+    }
+    return `${dataType}x${components}`;
+  }
+  if (dataType === 'uint16' || dataType === 'sint16') {
+    if (components === 1 || components === 3) {
+      // WebGPU 16 bit formats must be aligned to 32 bit boundaries
+      throw new Error(`size: ${size}`);
+    }
+    if (normalized) {
+      dataType = dataType.replace('int', 'norm') as 'unorm16' | 'snorm16';
+    }
+    return `${dataType}x${components}`;
+  }
+
+  if (components === 1) {
+    return dataType;
+  }
+
+  return `${dataType}x${components}`;
+}

package/src/adapter/type-utils/wgsl-utils.ts

@@ -0,0 +1,18 @@
+import { ShaderAttributeType } from '../types/shader-types';
+
+/**  Predeclared aliases @see https://www.w3.org/TR/WGSL/#vector-types */
+export const WGSL_TYPE_ALIAS_MAP: Record<string, ShaderAttributeType> = {
+  vec2i: 'vec2<i32>',
+  vec3i: 'vec3<i32>',
+  vec4i: 'vec4<i32>',
+  vec2u: 'vec2<u32>',
+  vec3u: 'vec3<u32>',
+  vec4u: 'vec4<u32>',
+  vec2f: 'vec2<f32>',
+  vec3f: 'vec3<f32>',
+  vec4f: 'vec4<f32>',
+  // Requires the f16 extension.
+  vec2h: 'vec2<f16>',
+  vec3h: 'vec3<f16>',
+  vec4h: 'vec4<f16>',
+};