GPUCanvasContext: configure()-Methode
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
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 configure()-Methode der GPUCanvasContext-Schnittstelle konfiguriert den Kontext für das Rendering mit einem bestimmten GPUDevice. Beim Aufruf wird das Canvas zunächst auf transparentes Schwarz zurückgesetzt.
Syntax
configure(configuration)
Parameter
configuration-
Ein Objekt mit den folgenden Eigenschaften:
alphaModeOptional-
Ein Aufzählungswert, der festlegt, wie sich Alphawerte auf den Inhalt von Texturen auswirken, die von
getCurrentTexture()zurückgegeben werden, wenn diese gelesen, angezeigt oder als Bildquelle verwendet werden. Mögliche Werte sind:opaque: Alphawerte werden ignoriert. Wenn eine Textur nicht bereits opak ist, wird der Alphakanal auf 1.0 gesetzt, wenn sie als Bildquelle verwendet oder auf dem Bildschirm angezeigt wird. Dies ist der Standardwert.premultiplied: Farbwerte werden mit ihrem Alphawert vormultipliziert. Beispielsweise entspricht 100 % Rot bei einem Alphawert von 50 % dem Wert[0.5, 0, 0, 0.5].
colorSpaceOptional-
Der Farbraum, in dem Werte angezeigt werden sollen, die in von
getCurrentTexture()zurückgegebene Texturen geschrieben wurden. Mögliche Werte sindsrgb(der Standardwert) unddisplay-p3. device-
Das
GPUDevice, von dem die Rendering-Informationen für den Kontext stammen. format-
Das Format der von
getCurrentTexture()zurückgegebenen Texturen. Es kannbgra8unorm,rgba8unormoderrgba16floatsein. Das optimale Canvas-Texturformat für das aktuelle System kann mitGPU.getPreferredCanvasFormat()ermittelt werden. Es wird empfohlen, dieses Format zu verwenden. Wenn Sie beim Konfigurieren des Canvas nicht das bevorzugte Format verwenden, kann je nach Plattform zusätzlicher Aufwand entstehen, beispielsweise durch zusätzliche Texturkopien. toneMappingOptional-
Ein Objekt mit Parametern, die das Tone Mapping für den Kontext festlegen, also wie der Inhalt der zugehörigen Texturen angezeigt werden soll. Dadurch kann WebGPU Farben darstellen, die heller als
white(#FFFFFF) sind. Mögliche Eigenschaften sind:modeOptional-
Ein Aufzählungswert, der den Tone-Mapping-Modus für das Canvas festlegt. Mögliche Werte sind:
standard-
Der Standardwert. Beschränkt die gerenderten Inhalte auf den Standard Dynamic Range (SDR) des Bildschirms. Dazu werden alle Farbwerte im Farbraum des Bildschirms auf das Intervall
[0, 1]begrenzt. extended-
Ermöglicht, sofern verfügbar, das Rendern von Inhalten im vollen High Dynamic Range (HDR) des Bildschirms. Im HDR-Modus kann ein größerer Bereich von Farben und Helligkeitsstufen mit präziseren Angaben dazu angezeigt werden, welche Farbe jeweils dargestellt werden soll. Im Bereich
[0, 1]des Bildschirms entspricht dieser Modus"standard". Die Werte werden auf den erweiterten Dynamikbereich des Bildschirms begrenzt oder in diesen projiziert, jedoch nicht auf[0, 1].
usageOptional-
Bitweise Flags, die die zulässige Verwendung der von
getCurrentTexture()zurückgegebenen Texturen festlegen. Mögliche Werte sind:GPUTextureUsage.COPY_SRC: Die Textur kann als Quelle eines Kopiervorgangs verwendet werden, beispielsweise als Quellargument bei einem Aufruf vonGPUCommandEncoder.copyTextureToBuffer().GPUTextureUsage.COPY_DST: Die Textur kann als Ziel eines Kopier- oder Schreibvorgangs verwendet werden, beispielsweise als Zielargument bei einem Aufruf vonGPUCommandEncoder.copyTextureToTexture().GPUTextureUsage.RENDER_ATTACHMENT: Die Textur kann als Color Attachment in einem Render Pass verwendet werden, beispielsweise in einer Color-Attachment-View bei einem Aufruf vonGPUCommandEncoder.beginRenderPass().GPUTextureUsage.RENDER_ATTACHMENTist der Standardwert fürusage. Beachten Sie jedoch, dass dieser Wert nicht automatisch enthalten ist, wenn ausdrücklich ein anderer Wert festgelegt wird. In diesem Fall müssen Sie ihn zusätzlich angeben.GPUTextureUsage.TEXTURE_BINDING: Die Textur kann zur Verwendung als Sampled Texture in einem Shader gebunden werden, beispielsweise in einem Bind-Group-Eintrag bei einem Aufruf vonGPUDevice.createBindGroup().GPUTextureUsage.STORAGE_BINDING: Die Textur kann zur Verwendung als Storage Texture in einem Shader gebunden werden, beispielsweise in einem Bind-Group-Eintrag bei einem Aufruf vonGPUDevice.createBindGroup().
Beachten Sie, dass mehrere Verwendungsarten mit dem bitweisen ODER-Operator angegeben werden können. Beispiel:
usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT. viewFormatsOptional-
Ein Array von Formaten, die Views verwenden dürfen, die aus von
getCurrentTexture()zurückgegebenen Texturen erstellt wurden. Alle möglichen Werte finden Sie unter Texturformate.
Rückgabewert
Keiner (undefined).
Ausnahmen
TypeError-
Wird ausgelöst, wenn
usagedas BitTRANSIENT_ATTACHMENTenthä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
Sehen Sie sich das Beispiel Particles (HDR) und den Test zur HDR-Unterstützung an.
Spezifikationen
| Spezifikation |
|---|
| WebGPU> # dom-gpucanvascontext-configure> |
Browser-Kompatibilität
Siehe auch
- Die WebGPU API