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 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 von GPUDevice.createRenderPipeline() oder GPUDevice.createRenderPipelineAsync()'s Pipeline-Layout).

Beispiele

Hinweis: Die WebGPU-Beispiele bieten viele weitere Beispiele.

Einfaches Beispiel

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