GPUCanvasContext: Methode configure()

Syntax

configure(configuration)

Parameter

configuration

Ein Objekt, das die folgenden Eigenschaften enthält:

alphaMode Optional

Ein enumerierter Wert, der den Effekt angibt, den Alpha-Werte auf den Inhalt der von getCurrentTexture() zurückgegebenen Texturen beim Lesen, Anzeigen oder Verwenden als Bildquelle haben werden. Mögliche Werte sind:

• opaque: Alpha-Werte werden ignoriert — wenn eine Textur noch nicht opak ist, wird der Alpha-Kanal auf 1,0 gelöscht, wenn sie als Bildquelle verwendet oder auf dem Bildschirm angezeigt wird. Dies ist der Standardwert.
• premultiplied: Farbwerte werden mit ihrem Alpha-Wert multipliziert. Zum Beispiel sind 100 % Rot bei 50 % Alpha [0.5, 0, 0, 0.5].

colorSpace Optional

Der Farbraum, mit dem Werte in Texturen, die von getCurrentTexture() zurückgegeben werden, angezeigt werden sollen. Mögliche Werte sind srgb (der Standardwert) und display-p3.

device

Das GPUDevice, das die Rendering-Informationen für den Kontext liefert.

format

Das Format, das Texturen haben werden, die von getCurrentTexture() zurückgegeben werden. Dies kann bgra8unorm, rgba8unorm oder rgba16float sein. Das optimale Canvas-Texturformat für das aktuelle System kann von GPU.getPreferredCanvasFormat() zurückgegeben werden. Es wird empfohlen, dieses zu verwenden — wenn Sie das bevorzugte Format beim Konfigurieren des Canvas-Kontexts nicht verwenden, können zusätzliche Overheads auftreten, z. B. zusätzliche Texturkopien, je nach Plattform.

toneMapping Optional

Ein Objekt, das Parameter spezifiziert, die das Tone Mapping für den Kontext definieren — wie der Inhalt der zugehörigen Texturen angezeigt werden soll. Dies ermöglicht es WebGPU, Farben heller als white (#FFFFFF) zu zeichnen. Mögliche Eigenschaften sind:

mode Optional

Ein enumerierter Wert, der den Tone-Mapping-Modus für das Canvas angibt. Mögliche Werte sind:

standard

Der Standardwert. Beschränkt den gerenderten Inhalt auf den Standard-Dynamikbereich (SDR) des Displays. Dieser Modus wird erreicht, indem alle Farbwerte im Farbraum des Bildschirms auf das Intervall [0, 1] eingeschränkt werden.

extended

Ermöglicht das Rendern von Inhalten im gesamten Hochdynamikbereich (HDR) des Displays, sofern verfügbar. Der HDR-Modus erlaubt, eine größere Bandbreite an Farben und Helligkeitsebenen anzuzeigen, mit präziseren Anweisungen, welche Farbe in jedem Fall angezeigt werden soll. Dieser Modus entspricht "standard" im [0, 1]-Bereich des Bildschirms. Die Einschränkung oder Projektion erfolgt auf den erweiterten Dynamikbereich des Bildschirms, jedoch nicht auf [0, 1].

usage Optional

Bitweise Flags zur Angabe der erlaubten Nutzung für Texturen, die von getCurrentTexture() zurückgegeben werden. Mögliche Werte sind:

• GPUTextureUsage.COPY_SRC: Die Textur kann als Quelle einer Kopieroperation verwendet werden, beispielsweise als Argument source eines Aufrufs von GPUCommandEncoder.copyTextureToBuffer().
• GPUTextureUsage.COPY_DST: Die Textur kann als Ziel einer Kopier-/Schreiboperation verwendet werden, beispielsweise als Argument destination eines Aufrufs von GPUCommandEncoder.copyTextureToTexture().
• GPUTextureUsage.RENDER_ATTACHMENT: Die Textur kann als Farbanhang in einem Renderpass verwendet werden, beispielsweise in einer Farbanhangansicht in einem Aufruf von GPUCommandEncoder.beginRenderPass(). GPUTextureUsage.RENDER_ATTACHMENT ist der Standardwert für usage, aber beachten Sie, dass dieser nicht automatisch enthalten ist, wenn ein anderer Wert explizit gesetzt wird; in solchen Fällen müssen Sie ihn zusätzlich einbeziehen.
• GPUTextureUsage.TEXTURE_BINDING: Die Textur kann für die Verwendung als abgetastete Textur in einem Shader gebunden werden, beispielsweise in einem Bindgruppeeintrag in einem Aufruf von GPUDevice.createBindGroup().
• GPUTextureUsage.STORAGE_BINDING: Die Textur kann für die Verwendung als Speicherungstextur in einem Shader gebunden werden, beispielsweise in einem Bindgruppeeintrag in einem Aufruf von GPUDevice.createBindGroup().

Beachten Sie, dass mehrere mögliche Nutzungen unter Verwendung des bitweisen OR-Operators spezifiziert werden können. Zum Beispiel usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT.

viewFormats Optional

Ein Array von Formaten, welches Formate enthält, die Ansichten von Texturen, die von getCurrentTexture() zurückgegeben werden, verwenden dürfen. Siehe Texture Formats für alle möglichen Werte.

Rückgabewert

Kein (undefined).

Ausnahmen

TypeError DOMException

Wird geworfen, wenn usage das TRANSIENT_ATTACHMENT-Bit enthält.

Beispiele

Grundlegende Verwendung

const canvas = document.querySelector("#gpuCanvas");
const context = canvas.getContext("webgpu");

context.configure({
  device,
  format: navigator.gpu.getPreferredCanvasFormat(),
  alphaMode: "premultiplied",
});

HDR-toneMapping-Demos

Siehe das Beispiel Particles (HDR) und den Test HDR support.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die WebGPU API