GPUCanvasContext: configure() 方法
注意:此功能在 Web Workers 中可用。
GPUCanvasContext 介面的 configure() 方法使用給定的 GPUDevice 配置上下文以用於渲染。呼叫時,畫布將最初被清除為透明黑色。
語法
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()返回的紋理的格式。可以是bgra8unorm、rgba8unorm或rgba16float。當前系統的最佳畫布紋理格式可以透過GPU.getPreferredCanvasFormat()返回。建議使用它——如果您在配置畫布上下文時沒有使用首選格式,可能會產生額外的開銷,例如額外的紋理複製,具體取決於平臺。 toneMapping可選-
一個物件,用於指定定義上下文的色調對映引數——即關聯紋理的內容將如何顯示。這允許 WebGPU 繪製比
white(#FFFFFF)更亮的顏色。可能的屬性包括: 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)。
示例
基本用法
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 |
瀏覽器相容性
載入中…