【WebGPU学习杂记】纹理格式表

供后续学习查阅检索

---

纹理类型

共有 “1d”、“2d” 、“3d” 三种纹理类型。可将 “2d” 纹理视为深度为 1 的 “3d” 纹理，而 “1d” 纹理只是高度为 1 的 “2d” 纹理。每种类型的纹理有不同的限制，在设置canvas大小时使用 2d 限制。

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const maxCanvasSize = device.limits.maxTextureDimension2D; // 纹理最大宽高像素值

canvas.width = Math.max(1, Math.min(width, maxCanvasSize));
canvas.height = Math.max(1, Math.min(height, maxCanvasSize));

对于 3d 纹理与 2d 纹理的对比而言，在所有 采样器（滤波器）（sampler） 都设置为 linear 的情况下，3d 纹理采样需要查看 16 个像素并将它们混合在一起。 2d 纹理采样只需要 8 个像素。

纹理视图

• 1d
• 2d
• 3d
• cube
• 2d-array
• cube-array

1d纹理 只能有 “1d” 视图。3d纹理 只能有 “3d” 视图。2d纹理 可以有 “2d-array” 视图。若 2d纹理 有 6 层，它可以有一个 “cube” 视图。如果是 6 层的倍数，则可以使用 “cube-array” 视图。可以在调用 <yourTexture>.createView 时选择如何查看纹理。纹理视图默认与其尺寸相同，允许可以向 <yourTexture>.createView 传递不同的尺寸。

cube纹理 表示立方体 6 个面的纹理。Cube 纹理通常用于绘制天空框、反射和环境贴图。

2d-array纹理 使用时可以选择在着色器中访问数组中的哪种纹理，通常用于地形渲染。

纹理视图与WGSL的对应关系

type	WGSL
1d	texture_1d 或 texture_storage_1d
2d	texture_2d 或 texture_storage_2d 或 texture_multisampled_2d 或 texture_depth_2d 或 texture_depth_multisampled_2d
3d	texture_3d 或 texture_storage_3d
cube	texture_cube 或 texture_depth_cube
2d-array	texture_2d_array 或 texture_storage_2d_array 或 texture_depth_2d_array
cube-array	texture_cube_array 或 texture_depth_cube_array

调用 device.createTexture 默认是2d, 可选 1d、2d、3d。

纹理格式

• “颜色” 纹理 格式常用 rgba8unorm。

格式	支持渲染	支持多重采样	支持写入storage	采样类型	单位纹素大小
r8unorm	true	true	false	float	1
r8snorm	false	false	false	float	1
r8uint	true	true	false	uint	1
r8sint	true	true	false	sint	1
r16uint	true	true	false	uint	2
r16sint	true	true	false	sint	2
r16float	true	true	false	float	2
rg8unorm	true	true	false	float	2
rg8snorm	false	false	false	float	2
rg8uint	true	true	false	uint	2
rg8sint	true	true	false	sint	2
r32uint	true	false	true	uint	4
r32sint	true	false	true	sint	4
r32float	true	true	true	unfilterable-float	4
rg16uint	true	true	false	uint	4
rg16sint	true	true	false	sint	4
rg16float	true	true	false	float	4
rgba8unorm	true	true	true	float	4
rgba8unorm-srgb	true	true	false	float	4
rgba8snorm	false	false	true	float	4
rgba8uint	true	true	true	uint	4
rgba8sint	true	true	true	sint	4
bgra8unorm	true	true	false	float	4
bgra8unorm-srgb	true	true	false	float	4
rgb10a2unorm	true	true	false	float	4
rg11b10ufloat	false	false	false	float	4
rgb9e5ufloat	false	false	false	float	4
rg32uint	true	false	true	uint	8
rg32sint	true	false	true	sint	8
rg32float	true	false	true	unfilterable-float	8
rgba16uint	true	true	true	uint	8
rgba16sint	true	true	true	sint	8
rgba16float	true	true	true	float	8
rgba32uint	true	false	true	uint	16
rgba32sint	true	false	true	sint	16
rgba32float	true	false	true	unfilterable-float	16

如 “rg16float”，rg 字母表示纹理支持的颜色通道支持红色和绿色（2 个通道）。16 表示每个通道都是 16 位。末尾的单词表示通道中的数据类型。“float” 表示浮点数据。

unorm 是无符号归一化数据 [0.0~1.0]，表示纹理中的数据从 0 到 N，其中 N 是该位数的最大整数值。该整数范围被解释为（0 至 1）的浮点范围。换句话说，对于 8unorm 纹理来说，就是 8 个比特值域 [0, 255] 被解释为数值 [0.0~1.0]。

snorm 是带符号的归一化数据 [-1~1] ，数据范围是从位数所代表的最负整数到最正整数。作为有符号整数 [-128~127] 被转换为 [-1~1]。

sint 是有符号整数。uint 是无符号整数。如果有多个字母数字组合，则指定每个通道的位数。例如，rg11b10ufloat 即红色和绿色各 11 位。b10 是 10 位蓝色，它们都是无符号浮点数。

• 将其用途设置为 GPUTextureUsage.RENDER_ATTACHMENT 表示支持对其进行渲染。

• 在 WGSL 中 sint 需要 texture_2d<i32>，uint 需要 texture_2d<u32>。

unfilterable-float（不可过滤浮点型）意味着采样器只能使用 nearest 的格式，这意味着可能需要手动创建一个绑定组布局，不能使用 'auto' 布局。因为桌面 GPU 通常可以过滤32 位浮点纹理，大多数移动设备还不能。如果您的适配器支持 float32-filterable 功能并且启用了该功能，那么 r32float、rg32float、rgba32float 格式就会从不可过滤浮点格式转换为浮点格式，这些纹理格式无需其他更改即可正常工作。

深度和模板格式

格式	支持渲染	支持多重采样	支持写入Storage	采样类型	单位纹素大小	支持作为拷贝源	支持作为拷贝写入目标	特性
depth32float	true	true	false	depth	4	true	false
depth16unorm	true	true	false	depth	2	true	true
stencil8	true	true	false	uint	1	true	true
depth24plus	true	true	false	depth		false	false
depth24plus-stencil8	true	true	false	depth		false	false
depth32float-stencil8	true	true	false	depth		false	false	depth32float-stencil8