Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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