GPURenderPipeline

Limited availability

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

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 mit den Methoden GPUDevice.createRenderPipeline() oder GPUDevice.createRenderPipelineAsync() erstellt werden.

Instanz-Eigenschaften

label

Ein String, der ein Label bereitstellt, das zur Identifizierung des Objekts verwendet werden kann, beispielsweise in GPUError-Meldungen oder Konsolenwarnungen.

Instanz-Methoden

getBindGroupLayout()

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

Beispiele

Hinweis: Die WebGPU-Beispiele bieten viele weitere Beispiele.

Einfaches Beispiel

Unser einfaches Rendering-Demo bietet ein Beispiel für die Konstruktion eines gültigen Render-Pipeline-Descriptor-Objekts, das dann verwendet wird, um mittels eines createRenderPipeline()-Aufrufs eine GPURenderPipeline 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

Siehe auch