GPURenderPipeline

实验性： 这是一个实验性技术
在生产环境中使用之前，请仔细查看浏览器兼容性表格。

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中。

WebGPU API 的 GPURenderPipeline 接口表示一个控制顶点和片段着色器阶段的管道，可用于 GPURenderPassEncoder 或 GPURenderBundleEncoder。

可以使用 GPUDevice.createRenderPipeline() 或 GPUDevice.createRenderPipelineAsync() 方法创建 GPURenderPipeline 对象实例。

实例属性

label 实验性: 一个字符串，提供一个标签，可用于标识对象，例如在 GPUError 消息或控制台警告中。

实例方法

getBindGroupLayout() 实验性: 返回管道具有给定索引的 GPUBindGroupLayout 对象（即包含在源 GPUDevice.createRenderPipeline() 或 GPUDevice.createRenderPipelineAsync() 调用管道布局中）。

示例

注意：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 # gpurenderpipeline

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

WebGPU API