GPURenderPipeline

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die GPURenderPipeline-Schnittstelle der WebGPU API repräsentiert eine Pipeline, die die Vertex- und Fragment-Shader-Stufen steuert und in einem GPURenderPassEncoder oder GPURenderBundleEncoder verwendet werden kann.

Ein GPURenderPipeline-Objekt kann mithilfe der Methoden GPUDevice.createRenderPipeline() oder GPUDevice.createRenderPipelineAsync() erstellt werden.

Instanz-Attribute

label

Ein String, der eine Kennzeichnung bereitstellt, die verwendet werden kann, um das Objekt zu identifizieren, zum Beispiel in GPUError-Nachrichten oder Konsolenwarnungen.

Instanz-Methoden

getBindGroupLayout()

Gibt das GPUBindGroupLayout-Objekt der Pipeline mit dem angegebenen Index zurück (d.h. enthalten im ursprünglichen Aufruf von GPUDevice.createRenderPipeline() oder GPUDevice.createRenderPipelineAsync()).

Beispiele

Hinweis: Die WebGPU-Beispiele enthalten viele weitere Beispiele.

Einfaches Beispiel

Unser einfaches Render-Demo bietet ein einfaches Beispiel für die Konstruktion eines gültigen Render-Pipeline-Deskriptor-Objekts, das dann verwendet wird, um eine GPURenderPipeline durch einen Aufruf von createRenderPipeline() zu erstellen.

js
// ...

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);

// ...

Spezifikationen

Specification
WebGPU
# gpurenderpipeline

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch