【WebGPU学习杂记】WGSL中的数据类型和对齐方式

在WebGPU中手动做Uniform的对齐容易出错，以下是类型的字节对齐参照表以及举例子看如何做对齐。需要注意字节对齐不仅仅与数据类型有关还与数据字段的先后顺序有关。，建议封装一个对齐库或使用 webgpu-utils。最终有一段完整的代码示例包括 WGSL 代码 以及对应的 bindGroup 布局设置。

类型对照表

类型	描述	简称
vec2<f32>	a type with 2 f32s	vec2f
vec2<u32>	a type with 2 u32s	vec2u
vec2<i32>	a type with 2 i32s	vec2i
vec2<f16>	a type with 2 f16s	vec2h
vec3<f32>	a type with 3 f32s	vec3f
vec3<u32>	a type with 3 u32s	vec3u
vec3<i32>	a type with 3 i32s	vec3i
vec3<f16>	a type with 3 f16s	vec3h
vec4<f32>	a type with 4 f32s	vec4f
vec4<u32>	a type with 4 u32s	vec4u
vec4<i32>	a type with 4 i32s	vec4i
vec4<f16>	a type with 4 f16s	vec4h
mat2x2<f32>	a matrix of 2 vec2<f32>s	mat2x2f
mat2x2<u32>	a matrix of 2 vec2<u32>s	mat2x2u
mat2x2<i32>	a matrix of 2 vec2<i32>s	mat2x2i
mat2x2<f16>	a matrix of 2 vec2<f16>s	mat2x2h
mat2x3<f32>	a matrix of 2 vec3<f32>s	mat2x3f
mat2x3<u32>	a matrix of 2 vec3<u32>s	mat2x3u
mat2x3<i32>	a matrix of 2 vec3<i32>s	mat2x3i
mat2x3<f16>	a matrix of 2 vec3<f16>s	mat2x3h
mat2x4<f32>	a matrix of 2 vec4<f32>s	mat2x4f
mat2x4<u32>	a matrix of 2 vec4<u32>s	mat2x4u
mat2x4<i32>	a matrix of 2 vec4<i32>s	mat2x4i
mat2x4<f16>	a matrix of 2 vec4<f16>s	mat2x4h
mat3x2<f32>	a matrix of 3 vec2<f32>s	mat3x2f
mat3x2<u32>	a matrix of 3 vec2<u32>s	mat3x2u
mat3x2<i32>	a matrix of 3 vec2<i32>s	mat3x2i
mat3x2<f16>	a matrix of 3 vec2<f16>s	mat3x2h
mat3x3<f32>	a matrix of 3 vec3<f32>s	mat3x3f
mat3x3<u32>	a matrix of 3 vec3<u32>s	mat3x3u
mat3x3<i32>	a matrix of 3 vec3<i32>s	mat3x3i
mat3x3<f16>	a matrix of 3 vec3<f16>s	mat3x3h
mat3x4<f32>	a matrix of 3 vec4<f32>s	mat3x4f
mat3x4<u32>	a matrix of 3 vec4<u32>s	mat3x4u
mat3x4<i32>	a matrix of 3 vec4<i32>s	mat3x4i
mat3x4<f16>	a matrix of 3 vec4<f16>s	mat3x4h
mat4x2<f32>	a matrix of 4 vec2<f32>s	mat4x2f
mat4x2<u32>	a matrix of 4 vec2<u32>s	mat4x2u
mat4x2<i32>	a matrix of 4 vec2<i32>s	mat4x2i
mat4x2<f16>	a matrix of 4 vec2<f16>s	mat4x2h
mat4x3<f32>	a matrix of 4 vec3<f32>s	mat4x3f
mat4x3<u32>	a matrix of 4 vec3<u32>s	mat4x3u
mat4x3<i32>	a matrix of 4 vec3<i32>s	mat4x3i
mat4x3<f16>	a matrix of 4 vec3<f16>s	mat4x3h
mat4x4<f32>	a matrix of 4 vec4<f32>s	mat4x4f
mat4x4<u32>	a matrix of 4 vec4<u32>s	mat4x4u
mat4x4<i32>	a matrix of 4 vec4<i32>s	mat4x4i
mat4x4<f16>	a matrix of 4 vec4<f16>s	mat4x4h

解释说明

示例一

• 查看下方 字节对齐表，你会发现 vec3<f32> 它的对齐方式为 16 字节。这意味着每个 vec3<f32> 都会有额外的空间。

struct MyData {
   
   
  scale: f32,
  offset: vec3f,
  projection: mat4x4f
};

示例二

• 携带类型 array<type, count>，count = 4

struct MyData2 {
   
   
  transform: mat3x3f,
  directions: array<vec3f, 4>,
};

示例三

• 注意 orientation: vec3f, size: f32 、scale: f32, direction: array<vec3f, 1> 先后顺序不同对齐方式却不同。

struct MyData3 {
   
   
  velocity: vec3f,
};
 
struct MyData4 {
   
   
  orientation: vec3f,
  size: f32,
  direction: array<vec3f, 1>,
  scale: f32,
  info: MyData3,
  friction: f32
};

</