关于gpu:WebGPU-规范篇-08-管线

系列博客总目录：https://segmentfault.com/a/1190000040716735

https://www.w3.org/TR/webgpu/…

GPUPipelineBase
├ GPURenderPipeline
└ GPUComputePipeline

管线代表某种计算的过程，在 WebGPU 中，有渲染管线和计算管线两种。

这一过程须要用到绑定组、VBO、着色器等对象或资源，而后最终能输入一些内容，譬如渲染管线输入色彩值（以色彩附件模式），计算管线输入到其指定的中央，此处就不列举太具体了。

管线在结构上看，由一系列 可编程阶段 和一些固定的状态组合而成。

留神，依据操作系统、显卡驱动不同，有局部固定的状态会编译到着色器代码中，因而将他们组合成一个管线对象里是不错的抉择。

两种管线对象均可由设施对象创立。

在对应的通道编码器中，能够切换管线以进行不同的计算过程。

dictionary GPUPipelineDescriptorBase : GPUObjectDescriptorBase {GPUPipelineLayout layout;};

interface mixin GPUPipelineBase {GPUBindGroupLayout getBindGroupLayout(unsigned long index);
};

两种管线在创立时均须要参数对象，参数对象各自有不同的具体类型，但均继承自这里的 GPUPipelineDescriptorBase 类型。

两种管线也均继承自根底管线类型 GPUPipelineBase。

每个管线对象均有此办法，它承受一个 unsigned long 类型的数字作为参数，返回一个管线布局对象中对应地位的绑定组布局对象。

译者注：若创立管线时没有传递布局对象，这个办法会依据着色器代码内的 group 个性主动结构出绑定组布局对象。

有一个须要留神的，那就是这个数字参数要小于设施限度列表中的 maxBindGroups 值。

如果创立一个管线时，没有设置管线布局对象，那么会主动在外部创立一个默认的布局对象。这个过程在文档中尚未详尽解释，只说了是一种“反射”技术，而后一步一步结构进去。

具体过程要参考文档中 WebGPU Spec 10.1.1 默认管线布局的创立步骤。

默认的管线布局对象，其 bindGroupLayouts 数组是空数组。

在创立管线对象时，须要用到参数对象，这个参数对象有不同可编程阶段能够设置，其中每一个阶段都是一个 GPUProgrammableStage 对象。这一点在下文管线创立局部会具体列举进去。

GPUProgrammableStage 类型的对象组织起了管线中具体的一个阶段用到什么 GPUShaderModule，其 WGSL 入口点函数名是什么，须要传递哪些常量值这些信息。

会有具体介绍。

dictionary GPUProgrammableStage {
  required GPUShaderModule module;
  required USVString entryPoint;
  record<USVString, GPUPipelineConstantValue> constants;
};

typedef double GPUPipelineConstantValue;

每一个这样的对象，有两个必选参数：

module，GPUShaderModule 类型的变量，着色器模块，参考着色器模块章节
entryPoint，字符串，指定 module 着色器代码中的入口函数

还有一个可选参数 constants，是一个值是 GPUPipelineConstantValue 类型的 JavaScript 对象，它用来传递着色器代码中具备 override 个性的常量值。

这个对象的键能够是 WGSL 中个性 override(i) 括号里的 i，也能够是常量名。例如（以顶点阶段为例）：

const pipeline = device.createRenderPipeline({
  vertex: {
    /* ... */
    constants: {
      1300: 2.0, // 将传递给着色器代码中第 1300 个，也即 gain 常量
      depth: -1, // 将传递给着色器代码中的 depth 常量
    }
  }
})

对应着色器代码：

[[override(1300)]] let gain: f32; // 将收到 2.0f
[[override]] let depth: f32; // 将收到 -1
[[override(0)]] let has_point_light: bool = true;
[[override(1200)]] let specular_param: f32 = 2.3;
[[override]] let width: f32 = 0.0;

// 其余代码

如果你想把这几个 WGSL 常量中带默认值的也一并笼罩掉，能够传递这样的对象：

const pipeline = device.createRenderPipeline({
  vertex: {
    /* ... */
    constants: {
      1300: 2.0, // 将传递给着色器代码中第 1300 个，也即 gain 常量
      depth: -1, // 将传递给着色器代码中的 depth 常量
      0: false,
      1200: 3.0,
      width: 20,
    }
  }
})

JavaScript 的数值类型转到 WGSL 时，会主动依据常量在 WGSL 中具体的类型（bool，i32，u32，f32）进行转换。

WebGPU 通过收回绘制命令或调度命令的形式向 GPU 下达指令。

管线在 GPU 执行的计算的行为，被形容为一系列的阶段，其中有一些是可编程的。在 WebGPU 中，执行绘制或调度之前须要创立管线，执行绘制的叫渲染管线，执行调度的叫计算管线。

创立管线时，对某个阶段对象（设为 stage）及管线布局对象（设为 layout）是有要求的：

stage.module 必须是一个无效的 GPUShaderModule 对象
stage.module 的着色器代码中必须有一个入口函数，名字与 stage.entryPoint 要统一
对入口函数中用到的每个被绑定的变量，验证绑定
对入口函数中用到的每个采样纹理，设纹理为 texture，设采样器为 sampler，sampler.type 如果是 “filtering”，那么 texture.sampleType 不能是 “unfilterable-float”
对于 stage.constants 中的所有常量，在着色器中必须有对应的 override 常量；如果着色器中的常量没有应用初始化语法给定默认值，那么 stage.constants 中必须给定值。

和题目用意一样，这一大节能够领导着色器中被绑定变量的语法书写、组织。

对于着色器中某个被绑定的变量，记作 variable，设其 group 和 bind 的数字别离是 bindGroupId 和 bindId，另外设管线布局对象为 pipelineLayout，绑定组布局可由 pipelineLayout.bindGroupLayouts[bindGroupId] 失去并记作 bindGroupLayout：

bindGroupLayout 必须有一个 binding 值与 bindId 一样的 entry 对象；
遍历 bindGroupLayout 中的 entries，设被遍历到的 GPUBindGroupLayoutEntry 变量为 entry：
- 如果是 buffer 类型，且 entry.buffer.type 是
  - “uniform”，那么着色器代码中此 variable 应用 var<uniform> 申明
  - “storage”，那么着色器代码中此 variable 应用 var<storage, read_write> 申明
  - “read-only-storage”，那么着色器代码中此 variable 应用 var<storage, read> 申明
- 如果是 buffer 类型且 entry.buffer.minBindingSize 不是 0：
  - 如果着色器代码中某个构造体的最初一个字段是无界数组，那么 entry.buffer.minBindingSize 必须大于等于数组的偏移量与步幅的和
  - 如果着色器代码中某个构造体最初一个字段并不是无界数组，那么 entry.buffer.minBindingSize 必须大于等于构造体的大小
- 如果是 sampler 类型，且 entry.sampler.type 是
  - “filtering”，那么 variable 应用 sampler 类型
  - “comparison”，那么 variable 应用 comparison_sampler 类型
- 如果是 texture 类型，当且仅当 entry.texture.multisampled 是 true 时，variable 要应用 texture_multisampled_2d<T> 或 texture_depth_multisampled_2d<T> 类型；
- 如果是 texture 类型，当 entry.texture.type 是
  - “float”，”unfilterable-float”，”sint”，”uint” 时，variable 要应用 texture_1d<T>, texture_2d<T>, texture_2d_array<T>, texture_cube<T>, texture_cube_array<T>, texture_3d<T>, 或 texture_multisampled_2d<T> 类型来申明；对于泛型参数 T，entry.texture.sampleType 是 “float”、”unfilterable-float” 时，T 是 f32，是 “sint” 时，T 是 i32，是 “uint” 时，T 是 u32；
  - “depth”，variable 要应用 texture_depth_2d, texture_depth_2d_array, texture_depth_cube, texture_depth_cube_array 或 texture_depth_multisampled_2d 类型来申明
- 如果是 texture 类型，当 entry.texture.viewDimension 是
  - “1d”，variable 要应用 texture_1d<T> 申明；
  - “2d”，variable 要应用 texture_2d<T> 或 texture_multisampled_2d<T> 申明；
  - “2d-array”，variable 要应用 texture_2d_array<T> 申明；
  - “cube”，variable 要应用 texture_cube<T> 申明；
  - “cube-array”，variable 要应用 texture_cube_array<T> 申明；
  - “3d”，variable 要应用 texture_3d<T> 申明；
- 如果是 storageTexture 类型，当 entry.storageTexture.viewDimension 是
  - “1d”，variable 要应用 texture_storage_1d<T, A> 类型来申明；
  - “2d”，variable 要应用 texture_storage_2d<T, A> 类型来申明；
  - “2d-array”，variable 要应用 texture_storage_2d_array<T, A> 类型来申明；
  - “3d”，variable 要应用 texture_storage_3d<T, A> 类型来申明；
    
    entry.storageTexture.access 是 “write-only” 时，上述泛型中的 A 要应用 write，泛型类型 T 要跟 entry.storageTexture.format 一样。

渲染管线 GPURenderPipeline 是一种管制着顶点着色和片元着色阶段的管线。

它能够被渲染通道编码器 GPURenderPassEncoder 和渲染打包编码器 GPURenderBundleEncoder 应用。

渲染管线的输出有：

通过 GPUPipelineLayout 提供的绑定组所绑定的资源
顶点和索引数据，由上面顶点着色阶段应用
色彩附件，由色彩指标状态形容
一个可选的深度模板附件，由深度模板状态形容

渲染管线的输入有：

绑定组中类型为 "storage" 的 GPUBuffer 资源
绑定组中 access 属性为 "write-only" 的 GPUStorageTexture 资源
色彩附件
可选的深度模板附件

渲染管线有如下几个 渲染阶段 ：

顶点提取（Vertex Fetch），由 GPUVertexState 对象的 buffers 属性来形容、管制
顶点着色（Vertex Shader），由 GPUVertexState 对象形容、管制
图元拆卸（Primitive Assembly），由 GPUPrimitiveState 对象形容、管制
光栅化（Rasterization），由 GPUPrimitiveState、GPUDepthStencilState 和 GPUMultisampleState 对象来形容、管制
片元着色（Fragment Shader），由 GPUFragmentState 对象来管制
顺次模板测试及操作（StencilTest）和深度测试并写入（DepthTest），由 GPUDepthStencilState 对象形容、管制
交融输入，由 GPUFragmentState 对象的 targets 属性来形容、管制

上述的 GPUVertexState、GPUPrimitiveState、GPUFragmentState、GPUDepthStencilState、GPUMultisampleState 类型在下文的顶点着色阶段、图元拼装阶段、片元着色阶段、深度模板测试阶段、多重采样阶段几个大节均有介绍，对应着接下来渲染管线创立大节中介绍的 GPURenderPipelineDescriptor 对象中的 vertex、primitive、fragment、depthStencil、fragment 字段。

这 5 个阶段中，只有顶点着色阶段和片元着色阶段是可编程阶段。

渲染管线的 WebIDL 定义如下：

[Exposed=(Window, DedicatedWorker), SecureContext]
interface GPURenderPipeline {
};
GPURenderPipeline includes GPUObjectBase;
GPURenderPipeline includes GPUPipelineBase;

渲染管线是通过设施对象的 createRenderPipeline 办法来创立的。

创立渲染管线须要一个 GPURenderPipelineDescriptor 类型的对象作为参数。

dictionary GPURenderPipelineDescriptor : GPUPipelineDescriptorBase {
  required GPUVertexState vertex;
  GPUPrimitiveState primitive = {};
  GPUDepthStencilState depthStencil;
  GPUMultisampleState multisample = {};
  GPUFragmentState fragment;
};

在此对象中，有若干个阶段状态，在此简略形容每个字段的用处，前面大节会具体介绍它们对应的类。

vertex 字段，GPUVertexState 类型的 JavaScript 对象，是一个可编程阶段，除了可编程阶段对象的属性外，还额定形容了顶点着色器的入口点函数、输出到管线中的顶点数据的布局；
primitive 字段，GPUPrimitiveState 类型的 JavaScript 对象，形容图元拆卸的信息，默认是空对象；
depthStencil 字段，GPUDepthStencilState 类型的 JavaScript 对象，是一个可选对象，形容深度模板测试信息；
multisample 字段，GPUMultisampleState 类型的 JavaScript 对象，默认是一个空对象，形容管线的多重采样信息；
fragment 字段，GPUFragmentState 类型的 JavaScript 对象，是一个可编程阶段，除了可编程阶段对象的属性外，还额定形容了片元着色器的入口点函数及如何输入片元色彩。如果它是 null，那么渲染管线就不会输入色彩，仅仅作为无色彩输入模式，个别这种管线只拿来作深度模板测试。

除了通过设施对象的 createRenderPipeline 办法同步创立外，还能够通过设施对象的 createRenderPipelineAsync 对象来异步创立，它返回的是 resolve 值是渲染管线对象的一个 Promise，你能够在异步函数中调用 await 来获取它的 resolve 值，异步创立函数同样也用到 GPURenderPipelineDescriptor 参数对象。

满足下列所有条件即可：

验证顶点着色阶段对象的可编程属性是否有问题
验证顶点着色阶段对象本人是否有问题
如果存在 descriptor.fragment 字段（不为 null）：
- 验证片元着色阶段对象的可编程属性是否有问题
- 验证片元着色阶段对象本人是否有问题
- 如果片元着色器中用到了 “sample_mask” 内置变量，那么 descriptor.multisample.alphaToCoverageEnable 要设为 false
验证图元拼装阶段对象是否有问题
如果 descriptor.depthStencil 不是 null，那么验证深度模板测试阶段对象是否有问题
验证多重采样阶段对象是否有问题
对于顶点着色器中用户自定义的进口，片元着色器必然要有与之对应的入口，到 wgsl 会介绍
对于片元着色器和片元着色器中自定义的组件（应该指的是通过 location 在两个着色器之间传递的总个数）的数量，要小于设施限度列表中的 maxInterStageShaderComponents 值。

GPURenderPipelineDescriptor 对象里的 primitive 字段值，是一个 JavaScript Object。

enum GPUPrimitiveTopology {
  "point-list",
  "line-list",
  "line-strip",
  "triangle-list",
  "triangle-strip"
};

enum GPUFrontFace {
  "ccw",
  "cw"
};

enum GPUCullMode {
  "none",
  "front",
  "back"
};

dictionary GPUPrimitiveState {
  GPUPrimitiveTopology topology = "triangle-list";
  GPUIndexFormat stripIndexFormat;
  GPUFrontFace frontFace = "ccw";
  GPUCullMode cullMode = "none";

  boolean clampDepth = false;
};

图元拆卸阶段对象是 GPUPrimitiveState 类型的，所有的参数均可选，它自身也是可选的。

参数 topology，GPUPrimitiveTopology 字符串枚举类型的值，示意顶点如何拆卸，默认是三角形列表 "triangle-list"，其余还有三角带 "triangle-strip"、线列表 "line-list"、线带 "line-strip" 和单纯绘制点 "piont-list"，与 WebGL 中 drawArray 的 mode 参数相似；
参数 stripIndexFormat，可选参数，若为索引三角形，则指定索引数值的数字类型，是一种字符串枚举类型 GPUIndexFormat，具体见顶点着色阶段中的 WebIDL 定义；
参数 frontFace，可选参数，默认值是 "ccw"，是一种字符串枚举类型 GPUFrontFace，指的是点形成三角形的缭绕方向，ccw 即逆时针，cw 即顺时针。
参数 cullMode，可选参数，默认值是 "none"，是一种字符串枚举类型 GPUCullMode，指的是剔除模式，除了 none 之外还有前剔除、背剔除；
参数 clampDepth，可选参数，默认值是 false，布尔类型，若启用则示意深度值会被截取；须要在申请设施对象时启用 clamp-depth 性能。

enum GPUIndexFormat {
  "uint16",
  "uint32"
};

顶点索引格局，GPUIndexFormat，它决定了 VBO 中索引值的数据类型以及当图元拓扑为 “line-strip” 和 “triangle-strip” 时图元的 从新起算值 。

图元的从新起算值 （Primitive Restart Value），批示应从哪里从新开始算一个图元，而不是持续应用先前索引过的顶点来结构三角带。

GPUPrimitiveState，如果其 "topology" 字段指定了 “line-strip” 或 “triangle-strip”，那么它的 "stripIndexFormat" 字段也须要相应地设置，以便管线创立时能够用到图元从新起算值。

如果用的是 “triangle-list”、”line-list” 和 “point-list”，那么 "stripIndexFormat" 要设为 undefined，并要应用渲染通道编码器（GPURenderPassEncoder）的 setIndexBuffer 办法来设置索引。

译者注

原文介绍 GPUIndexFormat 类型是在顶点着色阶段（Vertex State），笔者感觉此局部应摆在用到它的类型下更适合。

uint16 代表从新起算值是 2byte（0xFFFF），即 2byte 才取一个索引数字；uint32 示意从新起算值是 4byte（0xFFFFFFFF），即 4byte 才取一个索引数字。

如果下列条件都满足，那么图元拼装阶段对象就是没问题的：

图元拼装阶段对象的 topology 字段是 “line-strip” 或 “triangle-strip”，那么 stripIndexFormat 不能是 undefined；topology 是其余的，stripIndexFormat 就必须是 undefined；
图元拼装阶段对象的 clampDepth 是 true，那么设施的性能列表要包含 “depth-clamp” 性能

const renderPipeline = device.createRenderPipeline({
  /* ... */
  primitive: {topology: "triangle-list",}
})

顶点着色阶段对象，是 GPURenderPipelineDescriptor 对象中 vertex 字段的值，是一个 JavaScript Object，要满足 GPUVertexState 类型（包含其父类型 GPUProgrammableStage）：

dictionary GPUVertexState: GPUProgrammableStage {sequence<GPUVertexBufferLayout?> buffers = [];
};

dictionary GPUVertexBufferLayout {
  required GPUSize64 arrayStride;
  GPUVertexStepMode stepMode = "vertex";
  required sequence<GPUVertexAttribute> attributes;
};

enum GPUVertexStepMode {
  "vertex",
  "instance"
};

GPUVertexState 对象须要一个 buffers 字段，是 GPUVertexBufferLayout 对象的数组。

GPUVertexBufferLayout 对象，须要两个必选参数：

arrayStride，unsigned longlong 类型，示意一个顶点包含的所有数据（坐标、色彩、法线、纹理坐标等）步幅有多大；
attributes，一个数组，元素类型是 GPUVertexAttribute 的对象，形容这块顶点数据中有多少个顶点属性；

还有一个可选参数，GPUVertexStepMode 字符枚举类型的字段 stepMode，默认值是 "vertex"；它示意如何拜访顶点数据，它有两种值：

“vertex”，示意无论渲染通道编码器收回几次绘制（draw 办法的 instanceCount 参数无论是几）指令，都不会从 VertexBuffer 的头部再从新开始读取顶点数据，而是基于第一次读取的开端持续往下读；
“instance”，示意即便渲染通道编码器收回绘制屡次（draw 办法的 instanceCount 参数大于 1）的指令，在绘制完第一轮后（顶点着色器跑了一遍后），依然从同一个 VertexBuffer 的终点开始获取顶点数据；

概念上说，顶点缓存是显存中顶点数据的一个形容视图，具体而言是一个数组，前一个数组元素和后一个数组元素之间的间隔被称作 ArrayStride（单位：byte），也能够称之为元素的长度。

每一个元素，被称为一个顶点数据，它由若干个顶点属性（VertexAttribute）形成。每个顶点属性在顶点着色器中的 location 是举世无双的。

dictionary GPUVertexAttribute {
  required GPUVertexFormat format;
  required GPUSize64 offset;
  required GPUIndex32 shaderLocation;
};

在 GPUVertexBufferLayout 对象的 attributes 数组中，每个元素即 GPUVertexAttribute 对象。

每个 GPUVertexAttribute 对象有三个必选参数：

format，GPUVertexFormat 字符枚举类型，见下文顶点格局，确定某种顶点属性的数字类型、元素组成状况；
offset，unsigned longlong 类型，指定它在每块顶点数据中的偏移量，单位 byte；
shaderLocation，unsigned long 类型，指定它在 WGSL 顶点着色器中的 location 号。

enum GPUVertexFormat {
  "uint8x2",
  "uint8x4",
  "sint8x2",
  "sint8x4",
  "unorm8x2",
  "unorm8x4",
  "snorm8x2",
  "snorm8x4",
  "uint16x2",
  "uint16x4",
  "sint16x2",
  "sint16x4",
  "unorm16x2",
  "unorm16x4",
  "snorm16x2",
  "snorm16x4",
  "float16x2",
  "float16x4",
  "float32",
  "float32x2",
  "float32x3",
  "float32x4",
  "uint32",
  "uint32x2",
  "uint32x3",
  "uint32x4",
  "sint32",
  "sint32x2",
  "sint32x3",
  "sint32x4",
};

下面 WebIDL 中顶点格局 GPUVertexFormat 枚举的每一个值中，有按顶点的组件类型（二三四维）、每个维度的数字类型两局部信息，其中有一些简写：

unorm = 无符号归一化 u（unsigned）+ 归一化 norm（normalized）
snorm = 有符号归一化 s（signed）+ 归一化 norm（normalized）
uint = 无符号整型
sint = 有符号整型
float = 浮点数

以常见的 “float32x3” 为例（留神那个 x 是小写字母的 X），示意某个顶点属性的数值类型是三个 float32 数字（不肯定是坐标，也能够是其余的顶点属性（Vertex Attribute））。

const renderPipeline = device.createRenderPipeline({
  /* ... */
  vertex: {
    module: device.createShaderModule({code: ` /* wgsl vertex shader code */ `,}),
    entryPoint: 'vertex_main',
    buffers: [
      {
        arrayStride: 4 * 5, // 一个顶点数据占 20 bytes
        attributes: [
          {
            // for Position VertexAttribute
            shaderLocation: 0,
            offset: 0,
            format: "float32x3" // 其中顶点的坐标属性占 12 字节，三个 float32 数字
          },
          {
            // for UV0 VertexAttribute
            shaderLocation: 1,
            offset: 3 * 4,
            format: "float32x2" // 顶点的纹理坐标占 8 字节，两个 float32 数字
          }
        ]
      }
    ]
  }
})

下面例子：

用到的 GPUVertexFormat 有 “float32x3″、”float32x2″；
一个顶点数据（块）长 20 bytes，即从一个顶点数据的头部返回下一个顶点数据的头部，须要 “stride” 20 个字节；
对于排列在这块 VertexBuffer 中的某个顶点数据块中，有两个 GPUVertexAttribute，一个是坐标，紧接着第二个是二维纹理坐标，所以纹理坐标的数据应在顶点数据块的第 12 个字节开始起算（0~11 字节是坐标的三个 float32 数字）

设某个 GPUVertexBufferLayout 对象为 layout，当其合乎以下条件即可：

layout.arrayStride ≤ 设施限度列表中的 maxVertexBufferArrayStride，且为 4 的倍数
对于 layout.attributes 中的每个元素，令其为 attrib：
- 若 layout.arrayStride 是 0，则：attrib.offset + sizeof(attrib.format) ≤ 设施限度列表中的 maxVertexBufferArrayStride
- 否则 attrib.offset + sizeof(attrib.format) ≤ layout.arrayStride
- attrib.offset 至多是 min(4, sizeof(attrib.format)) 的倍数
- attrib.shaderLocation < 设施限度列表中的 maxVertexAttributes
对于顶点着色器代码中入口函数的每个顶点属性，layout.attributes 中的每个 GPUVertexAttribute 元素对象均要满足：
- 着色器代码中的顶点属性变量类型，与 attrib.format 相比：
  - 当 attrib.format 是 “unorm”，”snorm” 或 “float” 其中的一种时，着色器代码中变量类型要是 vecN<f32> 或 f32
  - 当 attrib.format 是 “uint” 其中的一种时，着色器代码中变量类型要是 vecN<u32> 或 u32
  - 当 attrib.format 是 “sint” 其中的一种时，着色器代码中变量类型要是 vecN<i32> 或 i32
- 着色器中顶点属性的 location 个性值要等于 attrib.shaderLocation

设某个 GPUVertexState 对象为 state，当其合乎以下条件即可：

state.buffers.length ≤ 设施限度列表中的 maxVertexBuffers
state.buffers 中每个元素均要通过顶点缓存布局对象的合规性验证
state.buffers 数组的所有元素的 attributes 个数之和 ≤ 设施限度列表中 maxVertexAttributes
所有 GPUVertexAttribute 顶点属性对象的 shaderLocation 要惟一

片元着色阶段对象，是 GPURenderPipelineDescriptor 对象中 fragment 字段的值，是一个 JavaScript Object，要满足 GPUFragmentState 类型（包含其父类型 GPUProgrammableStage）：

dictionary GPUFragmentState: GPUProgrammableStage {required sequence<GPUColorTargetState> targets;};

参数 targets 是元素为 GPUColorTargetState 类型的对象的数组，是一个必须存在的参数，见 2.6 色彩输入阶段

设片元着色阶段 GPUFragmentState 对象为 state，其满足如下要求即可：

state.targets.length ≤ 8
state.targets 中每个元素，称之为 colorState：
- colorState.format 必须是 WebGPU Spec 24.1.1 纯色格局（Plain color formats）中标为 RENDER_ATTACHMENT 的一种
- 若 colorState.blend 是 undefined：
  - colorState.format 要在 WebGPU Spec 24.1.1 纯色格局（Plain color formats）当选
  - colorState.blend.color、colorState.blend.alpha 必须是无效的
- colorState.writeMask ≤ 16
- 片元着色器入口函数有与 state.targets 中相匹配的输入 location，管线输入对象的类型要与 colorState.format 绝对应，否则 colorState.writeMask 必须是 0

colorState.blend.color、colorState.blend.alpha 如何说是无效的？令它俩为 component，若 component.operation 是 “min” 或 “max”，那么 component.srcFactor 和 component.dstFactor 都必须是 “one” 即可。

const renderPipeline = device.createRenderPipeline({
  /* ... */
  fragment: {
    module: device.createShaderModule({code: `/* wgsl fragment shader source code */`,}),
    entryPoint: "fragment_main",
    targets: [{format: "bgra8unorm"}]
  }
})

深度模板测试阶段对象，是 GPURenderPipelineDescriptor 对象中 depthStencil 字段的值，是一个 JavaScript Object，要满足 GPUDepthStencilState 类型：

dictionary GPUDepthStencilState {
  required GPUTextureFormat format;

  boolean depthWriteEnabled = false;
  GPUCompareFunction depthCompare = "always";

  GPUStencilFaceState stencilFront = {};
  GPUStencilFaceState stencilBack = {};

  GPUStencilValue stencilReadMask = 0xFFFFFFFF;
  GPUStencilValue stencilWriteMask = 0xFFFFFFFF;

  GPUDepthBias depthBias = 0;
  float depthBiasSlopeScale = 0;
  float depthBiasClamp = 0;
};

dictionary GPUStencilFaceState {
  GPUCompareFunction compare = "always";
  GPUStencilOperation failOp = "keep";
  GPUStencilOperation depthFailOp = "keep";
  GPUStencilOperation passOp = "keep";
};

enum GPUStencilOperation {
  "keep",
  "zero",
  "replace",
  "invert",
  "increment-clamp",
  "decrement-clamp",
  "increment-wrap",
  "decrement-wrap"
};

因为官网这部分没有文字介绍，到后续有例子学习时再专门补充。

对于深度模板测试阶段 GPUDepthStencilState 对象，令其为 state，只需满足：

state.format 是 WebGPU Spec 24.1.2 深度模板格局（Depth/stencil format）中的一个；
若 state.depthWriteEnabled 是 true，或者 state.depthCompare 不是 “always”，那么 state.format 必须是有深度局部的格局
若 state.stencilFront 或 state.stencilBack 不是默认值，那么 state.format 必须是有模板局部的格局

色彩输入阶段对象，GPUColorTargeState 类型，是 GPURenderPipelineDescriptor 对象中 fragment 字段中 targets 这个数组字段中元素的类型。

dictionary GPUColorTargetState {
  required GPUTextureFormat format;

  GPUBlendState blend;
  GPUColorWriteFlags writeMask = 0xF;  // GPUColorWrite.ALL
};

子类型：

dictionary GPUBlendState {
  required GPUBlendComponent color;
  required GPUBlendComponent alpha;
};

typedef [EnforceRange] unsigned long GPUColorWriteFlags;
[Exposed=(Window, DedicatedWorker)]
namespace GPUColorWrite {
  const GPUFlagsConstant RED   = 0x1;
  const GPUFlagsConstant GREEN = 0x2;
  const GPUFlagsConstant BLUE  = 0x4;
  const GPUFlagsConstant ALPHA = 0x8;
  const GPUFlagsConstant ALL   = 0xF;
};

dictionary GPUBlendComponent {
  GPUBlendOperation operation = "add";
  GPUBlendFactor srcFactor = "one";
  GPUBlendFactor dstFactor = "zero";
};

enum GPUBlendFactor {
  "zero",
  "one",
  "src",
  "one-minus-src",
  "src-alpha",
  "one-minus-src-alpha",
  "dst",
  "one-minus-dst",
  "dst-alpha",
  "one-minus-dst-alpha",
  "src-alpha-saturated",
  "constant",
  "one-minus-constant"
};

enum GPUBlendOperation {
  "add",
  "subtract",
  "reverse-subtract",
  "min",
  "max"
};

因为官网这部分没有文字介绍，到后续有例子学习时再专门补充。

色彩输入阶段对象，GPUMultisampleState 类型，是 GPURenderPipelineDescriptor 对象中 multisample 字段的值。

dictionary GPUMultisampleState {
  GPUSize32 count = 1;
  GPUSampleMask mask = 0xFFFFFFFF;
  boolean alphaToCoverageEnabled = false;
};

参数 count，采样次数，只能是 1 或者 4，默认值是 1；
参数 mask，采样遮罩值，类型是 unsigned long，默认值是 0xFFFFFFFF；
参数 alphaToCoverageEnabled，默认值是 false。

前面两个值，在 WebGPU Spec 21.3.10 采样遮罩中会介绍它们的用处，采样遮罩值是 0 的片元将不会输入色彩，它由三个遮罩变量取逻辑与形成，其中一个 shader-output-mask 由片元着色器中的内置变量 sample_mask 决定，而这个内置变量又由此处的 alphaToCoverageEnabled、mask 值独特作用而成，此处为简略形容。

alphaToCoverageEnabled 若为 true，count 要大于 1.

const renderPipeline = device.createRenderPipeline({
  /* ... */
  multisample: {count: 4}
})

const renderPipeline = device.createRenderPipeline({layout: [/* GPURenderPipelineLayout[] */],
  vertex: {/* {}: GPUVertexState */ },
  fragment: {/* {}: GPUVertexState */ },
  primitive: {/* {}: GPUPrimitiveState */ },
  multisample: {/* {}: GPUMultisampleState */ }
})

计算管线，GPUComputePipeline 类型，是一种能在计算通道编码器 GPUComputePassEncoder 中应用的管线，实现某个通用计算的过程。

计算管线的输出和输入在绑定组中绑定好了，并通过 GPUPipelineLayout 提供（详见资源绑定章节）。

它不像渲染管线一样有特地具体的输入后果，它的后果，将写入绑定组中 type 是 "storage" 的 buffer 和 type 是 "write-only" 的 storageTexture 的两种资源。

计算管线的阶段只有一个：计算着色器。

上面是计算管线的接口定义：

[Exposed=(Window, DedicatedWorker), SecureContext]
interface GPUComputePipeline {
};
GPUComputePipeline includes GPUObjectBase;
GPUComputePipeline includes GPUPipelineBase;

设施对象的 createComputePipeline 能够创立一个计算管线，它须要一个 GPUComputePipelineDescriptor 类型的 JavaScript 对象作为参数。

dictionary GPUComputePipelineDescriptor : GPUPipelineDescriptorBase {required GPUProgrammableStage compute;};

GPUComputePipelineDescriptor 类型继承自 GPUPipelineDescriptorBase 类型，意味着也要遵循父类型的字段规定。

也能够通过设施对象的 createComputePipelineAsync 办法异步创立计算管线，语法与异步创立渲染管线一样，参数与同步创立计算管线一样。

令 GPUComputePipelineDescriptor 对象名为 descriptor。

descriptor.layout 与设施对象必须是无效的
验证计算着色阶段对象的可编程属性是否有问题
descriptor.compute 中计算着色器用到的工作组大小要不大于设施对象限度列表中的 maxComputeWorkgroupStorageSize 值，每个工作组用到的 invocation 要不大于设施对象限度列表中 maxComputeInvocationsPerWorkgroup 值；
descriptor.compute 中计算着色器的 workgroup_size 个性的三个重量值都不能大于设施对象限度列表中的 maxComputeWorkgroupSizeX、maxComputeWorkgroupSizeY、maxComputeWorkgroupSizeZ 的值；

以上均通过的话，则能够返回一个正确的计算管线对象。

const computePipeline = device.createComputePipeline({
  compute: {
    module: device.createShaderModule({code: `/* wgsl compute shader source code */`}),
    entryPoint: "main",
  }
})

这部分较长，有一部分我还没有实际，学习、翻译起来比拟吃力。

然而稀释起来，提炼骨干看，只讲了上面四件事：

管线是什么，输出和输入是什么货色，如何创立的，有什么类型的管线
管线是由阶段形成的，其中有三个阶段（顶点着色、片元着色、通用计算）是可编程阶段
管线配套的绑定组布局、顶点缓存布局与着色器代码之间的坑位的连贯规定
顶点着色阶段中十分重要的概念：VertexBuffer 和顶点属性

管线是 WebGPU 中执行一个残缺的计算（或渲染，或通用计算）的最小单元，他有着本人的输出和输入。

你能够通过下一篇文章的通道编码器向其传递不同的 VertexBuffer 和资源绑定组，然而通道编码器的作用可不仅仅是向管线设置数据那么简略，下文见。

关于gpu:WebGPU-规范篇-08-管线

管线

1 根底管线

1.1 根底管线的 getBindGroupLayout 办法

1.2 默认管线布局

1.3 可编程阶段：GPUProgrammableStage

1.4 补充材料：管线和着色阶段

1.5 如何验证可编程阶段对象的合规性

1.6 如何验证某个着色器中被绑定的变量的合规性

2 渲染管线

2.1 管线的创立

2.1.1 异步创立管线

2.1.2 如何验证 GPURenderPipelineDescriptor 合规性

2.2 图元拼装阶段

2.2.1 顶点索引格局 GPUIndexFormat

2.2.2 如何验证图元拼装阶段对象合规性

2.2.3 代码举例

2.3 顶点着色阶段

2.3.1 顶点缓存（VertexBuffer）与顶点属性（GPUVertexAttribute）

2.3.2 顶点格局 GPUVertexFormat

2.3.3 代码举例

2.3.4 如何验证顶点缓存布局对象 GPUVertexBufferLayout 的合规性

2.3.5 如何验证顶点着色阶段对象 GPUVertexState 的合规性

2.4 片元着色阶段

如何验证片元着色阶段对象的合规性

举例

2.5 深度模板测试阶段

如何验证深度模板测试阶段对象的合规性

2.6 色彩输入阶段

混合模式

2.7 多重采样阶段

如何验证多重采样阶段对象的合规性

代码举例

2.8 综合代码举例

3 计算管线

计算管线的创立

如何验证 GPUComputePipelineDescriptor 参数对象的合规性

代码举例

4 译者注