GPUDevice: createRenderPipeline() 方法
createRenderPipeline()
是 GPUDevice
接口的方法,它创建一个 GPURenderPipeline
,该管道可以控制顶点和片段着色器阶段,并可用于 GPURenderPassEncoder
或 GPURenderBundleEncoder
。
语法
createRenderPipeline(descriptor)
参数
descriptor
-
包含以下属性的对象
depthStencil
可选-
一个对象(参见
depthStencil
对象结构),描述深度模板属性,包括测试、操作和偏差。 fragment
可选-
一个对象(参见
fragment
对象结构),描述管道的片段着色器入口点及其输出颜色。如果未定义片段着色器入口点,则管道不会生成任何颜色附件输出,但它仍然执行光栅化并根据顶点位置输出生成深度值。深度测试和模板操作仍然可以使用。 label
可选-
一个字符串,提供一个标签,可用于标识对象,例如在
GPUError
消息或控制台警告中。 layout
-
定义在管道执行期间使用的所有 GPU 资源(缓冲区、纹理等)的布局(结构、用途和类型)。可能的值为
- 一个
GPUPipelineLayout
对象,使用GPUDevice.createPipelineLayout()
创建,它允许 GPU 预先确定如何以最有效的方式运行管道。 - 字符串
"auto"
,这会导致管道根据着色器代码中定义的任何绑定生成隐式绑定组布局。如果使用"auto"
,则生成的绑定组布局可能仅与当前管道一起使用。
- 一个
multisample
可选-
一个对象(参见
multisample
对象结构),描述管道如何与渲染通道的多采样附件交互。 primitive
可选-
一个对象(参见
primitive
对象结构),描述管道如何从其顶点输入构建和光栅化图元。 vertex
-
一个对象(参见
vertex
对象结构),描述管道的顶点着色器入口点及其输入缓冲区布局。
depthStencil
对象结构
depthStencil
对象可以包含以下属性
depthBias
可选-
一个数字,表示添加到每个片段的恒定深度偏差。如果省略,则
depthBias
默认为 0。 depthBiasClamp
可选-
一个数字,表示片段的最大深度偏差。如果省略,则
depthBiasClamp
默认为 0。 depthBiasSlopeScale
可选-
一个数字,表示随片段斜率缩放的深度偏差。如果省略,则
depthBiasSlopeScale
默认为 0。 depthCompare
-
一个枚举值,指定用于测试片段深度与
depthStencilAttachment
深度值的比较操作。可能的值为"never"
:比较测试永远不会通过。"less"
:如果提供的值小于采样值,则通过比较测试。"equal"
:如果提供的值等于采样值,则通过比较测试。"less-equal"
:如果提供的值小于或等于采样值,则通过比较测试。"greater"
:如果提供的值大于采样值,则通过比较测试。"not-equal"
:如果提供的值不等于采样值,则通过比较测试。"greater-equal"
:如果提供的值大于或等于采样值,则通过比较测试。"always"
:比较测试始终通过。
depthWriteEnabled
-
一个布尔值。值为
true
指定GPURenderPipeline
创建后可以修改depthStencilAttachment
深度值。将其设置为false
表示它不能修改。 format
-
一个枚举值,指定
GPURenderPipeline
将与其兼容的depthStencilAttachment
格式。有关所有可用的format
值,请参阅规范的 纹理格式 部分。 stencilBack
可选-
一个对象,定义如何对背面图元执行模板比较和操作。其属性可以包括
compare
可选-
一个枚举值,指定测试片段与
depthStencilAttachment
模板值时的比较操作。可能的值与depthCompare
属性相同;请参见上文。如果省略,则compare
默认为"always"
。 depthFailOp
可选-
一个枚举值,指定如果由
depthCompare
描述的片段深度比较失败,则执行的模板操作。可能的值为"decrement-clamp"
:递减当前渲染状态模板值,将其钳位到 0。"decrement-wrap"
:递减当前渲染状态模板值,如果该值低于 0,则将其环绕到depthStencilAttachment
的模板方面的最大可表示值。"invert"
:按位反转当前渲染状态模板值。"increment-clamp"
:递增当前渲染状态模板值,将其钳位到depthStencilAttachment
的模板方面的最大可表示值。"increment-wrap"
:递增当前渲染状态模板值,如果该值超过depthStencilAttachment
的模板方面的最大可表示值,则将其环绕到零。"keep"
:保留当前模板值。"replace"
:将模板值设置为当前渲染状态模板值。"zero"
:将模板值设置为 0。
如果省略,则
depthFailOp
默认为"keep"
。注意:在渲染通道开始时,渲染状态模板值初始化为 0。
failOp
可选-
一个枚举值,指定如果由
compare
描述的片段模板比较测试失败,则执行的模板操作。可能的值和默认值与depthFailOp
相同。 passOp
可选-
一个枚举值,指定如果由
compare
描述的片段模板比较测试通过,则执行的模板操作。可能的值和默认值与depthFailOp
相同。
stencilFront
可选-
一个对象,定义如何对正面图元执行模板比较和操作。其属性与
stencilBack
相同。 stencilReadMask
可选-
一个位掩码,控制执行模板比较测试时读取哪些
depthStencilAttachment
模板值位。如果省略,则stencilReadMask
默认为0xFFFFFFFF
。 stencilWriteMask
可选-
一个位掩码,控制执行模板操作时写入哪些
depthStencilAttachment
模板值位。如果省略,则stencilWriteMask
默认为0xFFFFFFFF
。
注意:depthStencilAttachment
值在 GPUCommandEncoder.beginRenderPass()
调用期间指定,此时 GPURenderPipeline
实际上用于执行渲染通道。
fragment
对象结构
fragment
对象包含一个对象数组,每个对象可以包含以下属性
constants
可选-
一系列记录类型,结构为
(id, value)
,表示 管道中可以覆盖的 WGSL 常量 的覆盖值。它们的行为类似于 有序映射。在每种情况下,id
都是用于标识或选择记录的键,而constant
是一个枚举值,表示 WGSL。根据您要覆盖的常量,
id
可以采用常量的数字 ID(如果指定了)或常量的标识符名称的形式。提供几个可覆盖常量的覆盖值的代码片段可能如下所示
js{ // ... constants: { 0: false, 1200: 3.0, 1300: 2.0, width: 20, depth: -1, height: 15, } }
entryPoint
-
module
中函数的名称,此阶段将使用该函数执行其工作。相应的着色器函数必须具有@fragment
属性才能被识别为此入口点。有关更多信息,请参阅 入口点声明。 module
-
一个
GPUShaderModule
对象,包含此可编程阶段将执行的 WGSL 代码。 targets
-
一个对象数组,表示颜色状态,这些状态表示片段着色器阶段输出的颜色配置详细信息。这些对象可以包括以下属性
blend
可选-
一个对象,描述要应用于输出颜色的混合模式。
blend
具有两个属性alpha
和color
都采用一个对象作为值,该对象可以包含以下属性dstFactor
可选-
一个枚举值,定义要对来自目标附件的值执行的混合因子操作。可能的值为
"constant"
"dst"
"dst-alpha"
"one"
"one-minus-dst"
"one-minus-src"
"one-minus-src-alpha"
"one-minus-dst-alpha"
"one-minus-constant"
"src"
"src-alpha"
"src-alpha-saturated"
"zero"
如果省略,则
dstFactor
默认为"zero"
。 operation
可选-
一个枚举值,用于定义用于组合源和目标混合因子的算法,以计算写入目标附件组件的最终值。可能的取值包括:
"add"
"max"
"min"
"reverse-subtract"
"subtract"
如果省略,则
operation
默认为"add"
。 srcFactor
可选-
一个枚举值,用于定义对来自片段着色器的值执行的混合因子操作。可能的取值与
dstFactor
相同。如果省略,则srcFactor
默认为"one"
。
注意:有关每个
dstFactor
/srcFactor
和operation
枚举值定义的算法的详细说明,请参阅规范的混合状态部分。 format
-
一个枚举值,指定输出颜色的所需格式。有关所有可用的
format
值,请参阅规范的纹理格式部分。 writeMask
可选-
一个或多个按位标志,用于定义要应用于颜色目标状态的写入掩码。可能的标志值包括:
GPUColorWrite.RED
GPUColorWrite.GREEN
GPUColorWrite.BLUE
GPUColorWrite.ALPHA
GPUColorWrite.ALL
如果省略,则
writeMask
默认为GPUColorWrite.ALL
。请注意,可以通过用管道符号分隔值来指定多个标志,例如:
jswriteMask: GPUColorWrite.RED | GPUColorWrite.ALPHA;
multisample
对象结构
multisample
对象可以包含以下属性:
alphaToCoverageEnabled
可选-
布尔值。值为
true
表示应使用片段的alpha通道生成样本覆盖掩码。如果省略,则alphaToCoverageEnabled
默认为false
。 count
可选-
一个数字,用于定义每个像素的样本数。管道将仅与具有匹配
sampleCounts
的附件纹理(colorAttachment
和depthStencilAttachment
)兼容(请参阅GPUTexture
)。如果省略,则
count
默认为1。 mask
可选-
一个位掩码,用于确定写入哪些样本。如果省略,则
mask
默认为0xFFFFFFFF
。
注意:colorAttachment
和depthStencilAttachment
值是在GPUCommandEncoder.beginRenderPass()
调用期间指定的,此时GPURenderPipeline
实际上用于执行渲染传递。
primitive
对象结构
primitive
对象可以包含以下属性:
cullMode
可选-
一个枚举值,用于定义如果存在,将剔除哪个多边形方向。可能的取值包括:
"back"
:剔除背面多边形。"front"
:剔除正面多边形。"none"
:不剔除任何多边形。
如果省略,则
cullMode
默认为"none"
。 frontFace
可选-
一个枚举值,用于定义哪些多边形被视为正面。可能的取值包括:
"ccw"
:顶点的帧缓冲区坐标按逆时针顺序给出的多边形。"cw"
:顶点的帧缓冲区坐标按顺时针顺序给出的多边形。
如果省略,则
frontFace
默认为"ccw"
。 stripIndexFormat
可选-
一个枚举值,用于确定索引缓冲区格式和带拓扑(
"line-strip"
或"triangle-strip"
)的管道的原始重启值。原始重启值指定哪个索引值指示应开始新的原始图形,而不是继续使用先前的索引顶点构建带。可能的取值包括:"uint16"
:表示字节大小为2,原始重启值为0xFFFF
。"uint32"
:表示字节大小为4,原始重启值为0xFFFFFFFF
。
指定带原始图形拓扑的GPU原始图形状态必须指定带索引格式,如果它们用于索引绘制(例如,通过
GPURenderPassEncoder.drawIndexed()
),以便在管道创建时知道将使用的原始重启值。具有列表原始图形拓扑("line-list"
、"point-list"
或"triangle-list"
)的管道不应指定stripIndexFormat
值。相反,它们将使用传递给例如GPURenderPassEncoder.setIndexBuffer()
的索引格式进行索引渲染。 topology
可选-
一个枚举值,用于定义从指定的
vertex
输入构建的原始图形类型。可能的取值包括:"line-list"
:每两个连续的顶点定义一个线段原始图形。"line-strip"
:第一个顶点之后的每个顶点都定义了它与前一个顶点之间的线段原始图形。"point-list"
:每个顶点都定义一个点原始图形。"triangle-list"
:每三个连续的顶点定义一个三角形原始图形。"triangle-strip"
:前两个顶点之后的每个顶点都定义了它与前两个顶点之间的三角形原始图形。
如果省略,则
topology
默认为"triangle-list"
。 unclippedDepth
可选-
布尔值。值为
true
表示深度裁剪已禁用。如果省略,则unclippedDepth
默认为false
。请注意,要控制深度裁剪,必须在GPUDevice
中启用depth-clip-control
功能。
注意:frontFace
和cullMode
对"point-list"
、"line-list"
或"line-strip"
拓扑无效。
vertex
对象结构
vertex
对象可以包含以下属性:
constants
可选-
一系列记录类型,结构为
(id, value)
,表示 管道中可以覆盖的 WGSL 常量 的覆盖值。它们的行为类似于 有序映射。在每种情况下,id
都是用于标识或选择记录的键,而constant
是一个枚举值,表示 WGSL。根据您要覆盖的常量,
id
可以采用常量的数字 ID(如果指定了)或常量的标识符名称的形式。提供几个可覆盖常量的覆盖值的代码片段可能如下所示
js{ // ... constants: { 0: false, 1200: 3.0, 1300: 2.0, width: 20, depth: -1, height: 15, } }
entryPoint
-
module
中函数的名称,此阶段将使用该函数执行其工作。相应的着色器函数必须具有@vertex
属性才能被识别为此入口点。有关更多信息,请参阅入口点声明。 module
-
一个
GPUShaderModule
对象,包含此可编程阶段将执行的 WGSL 代码。 buffers
可选-
对象数组,每个对象表示管道中使用的顶点缓冲区的预期布局。每个对象可以包含以下属性:
arrayStride
-
一个数字,表示缓冲区内不同结构(例如顶点)之间的跨度(以字节为单位)。
attributes
-
对象数组,用于定义每个结构中顶点属性的布局。每个对象都具有以下属性:
format
-
一个枚举值,用于指定顶点的格式。有关所有可用值,请参阅规范中的
GPUVertexFormat
定义。 offset
-
一个数字,指定从结构的开头到属性数据的偏移量(以字节为单位)。
shaderLocation
-
与此属性关联的数字位置,它将与在关联的
GPUShaderModule
(在vertex
对象的module
属性中引用)的WGSL代码中声明的@location
属性相对应。
stepMode
可选-
一个枚举值,用于定义缓冲区内的单独结构表示顶点还是实例。可能的取值包括:
"instance"
:每个结构都是一个实例——对于每个实例,地址都会增加arrayStride
。"vertex"
:每个结构都是一个顶点——对于每个顶点,地址都会增加arrayStride
,并在实例之间重置。
如果省略,则
stepMode
默认为"vertex"
。
返回值
一个GPURenderPipeline
对象实例。
验证
调用createRenderPipeline()
时必须满足以下条件,否则将生成GPUValidationError
并返回无效的GPURenderPipeline
对象:
- 对于
depthStencil
对象:format
是一个depth-or-stencil
格式。- 如果
depthWriteEnabled
为true
或depthCompare
不为"always"
,则format
具有深度分量。 - 如果
stencilFront
或stencilBack
的属性不处于其默认值,则format
具有模板分量。
- 对于
fragment
对象:
示例
注意:WebGPU示例提供了更多示例。
基本示例
我们的基本渲染演示提供了一个有效的渲染管道描述符对象的构造的简单示例,然后使用该对象通过createRenderPipeline()
调用创建一个GPURenderPipeline
。
// ...
const vertexBuffers = [
{
attributes: [
{
shaderLocation: 0, // position
offset: 0,
format: "float32x4",
},
{
shaderLocation: 1, // color
offset: 16,
format: "float32x4",
},
],
arrayStride: 32,
stepMode: "vertex",
},
];
const pipelineDescriptor = {
vertex: {
module: shaderModule,
entryPoint: "vertex_main",
buffers: vertexBuffers,
},
fragment: {
module: shaderModule,
entryPoint: "fragment_main",
targets: [
{
format: navigator.gpu.getPreferredCanvasFormat(),
},
],
},
primitive: {
topology: "triangle-list",
},
layout: "auto",
};
const renderPipeline = device.createRenderPipeline(pipelineDescriptor);
// ...
规范
规范 |
---|
WebGPU # dom-gpudevice-createrenderpipeline |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。