GPUCanvasContext: configure() 方法

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

安全上下文: 此功能僅在安全上下文(HTTPS)中可用,且支援此功能的瀏覽器數量有限。

注意:此功能在 Web Workers 中可用。

GPUCanvasContext 介面的 configure() 方法使用給定的 GPUDevice 配置上下文以用於渲染。呼叫時,畫布將最初被清除為透明黑色。

語法

js
configure(configuration)

引數

configuration

包含以下屬性的物件:

alphaMode 可選

一個列舉值,指定當透過 getCurrentTexture() 返回的紋理被讀取、顯示或用作影像源時,alpha 值將對其內容產生的影響。可能的值為:

  • opaque:alpha 值將被忽略——如果紋理本身不是不透明的,那麼當它被用作影像源或顯示在螢幕上時,alpha 通道將被清除為 1.0。這是預設值。
  • premultiplied:顏色值將與其 alpha 值預乘。例如,50% alpha 的 100% 紅色是 [0.5, 0, 0, 0.5]
colorSpace 可選

寫入 getCurrentTexture() 返回的紋理中的值的顯示應使用的顏色空間。可能的值為 srgb(預設值)和 display-p3

device

上下文的渲染資訊將從中獲取的 GPUDevice

格式(format)

getCurrentTexture() 返回的紋理的格式。可以是 bgra8unormrgba8unormrgba16float。當前系統的最佳畫布紋理格式可以透過 GPU.getPreferredCanvasFormat() 返回。建議使用它——如果您在配置畫布上下文時沒有使用首選格式,可能會產生額外的開銷,例如額外的紋理複製,具體取決於平臺。

toneMapping 可選

一個物件,用於指定定義上下文的色調對映引數——即關聯紋理的內容將如何顯示。這允許 WebGPU 繪製比 white#FFFFFF)更亮的顏色。可能的屬性包括:

mode 可選

指定畫布的色調對映模式的列舉值。可能的值包括:

standard

預設值。將渲染內容限制在顯示器的標準動態範圍(SDR)內。此模式透過將顏色空間中的所有顏色值裁剪到 [0, 1] 間隔來實現。

extended

如果可用,允許內容以顯示器的全高動態範圍(HDR)進行渲染。HDR 模式允許顯示更寬的顏色和亮度級別範圍,並提供更精確的指示,說明每種情況應顯示什麼顏色。此模式匹配螢幕的 [0, 1] 範圍內的 "standard"。裁剪或投影到螢幕的擴充套件動態範圍,而不是 [0, 1]

usage 可選

指定 getCurrentTexture() 返回的紋理允許使用的 按位標誌。可能的值為:

  • GPUTextureUsage.COPY_SRC:紋理可以用作複製操作的源,例如 GPUCommandEncoder.copyTextureToBuffer() 呼叫的源引數。
  • GPUTextureUsage.COPY_DST:紋理可以用作複製/寫入操作的目標,例如 GPUCommandEncoder.copyTextureToTexture() 呼叫的目標引數。
  • GPUTextureUsage.RENDER_ATTACHMENT:紋理可以用作渲染通道中的顏色附件,例如 GPUCommandEncoder.beginRenderPass() 呼叫中的顏色附件檢視。GPUTextureUsage.RENDER_ATTACHMENT 是預設的 usage,但請注意,如果顯式設定了不同的值,它不會自動包含;在這種情況下,您需要額外包含它。
  • GPUTextureUsage.TEXTURE_BINDING:紋理可以繫結以在著色器中用作取樣紋理,例如 GPUDevice.createBindGroup() 呼叫中的繫結組條目。
  • GPUTextureUsage.STORAGE_BINDING:紋理可以繫結以在著色器中用作儲存紋理,例如 GPUDevice.createBindGroup() 呼叫中的繫結組條目。

請注意,可以使用 按位 OR 運算子指定多個可能的用法。例如,usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT

viewFormats 可選

getCurrentTexture() 返回的紋理建立的檢視可能使用的格式陣列。有關所有可能值的詳細資訊,請參閱 紋理格式

返回值

無 (undefined)。

示例

基本用法

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

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

HDR toneMapping 演示

請參閱 Particles (HDR) 示例和 HDR 支援測試。

規範

規範
WebGPU
# dom-gpucanvascontext-configure

瀏覽器相容性

另見