GPUCanvasContext：configure() 方法

实验性： 这是一个实验性技术
在生产环境中使用之前，请仔细检查浏览器兼容性表。

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中。

configure() 方法是 GPUCanvasContext 接口的方法，用于使用给定的 GPUDevice 配置渲染上下文。调用时，画布将最初清除为透明黑色。

语法

configure(configuration)

参数

configuration

包含以下属性的对象

alphaMode 可选

一个枚举值，用于指定 alpha 值对从 getCurrentTexture() 返回的纹理内容读取、显示或用作图像源时产生的影响。可能的值为

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() 返回。建议使用此方法 - 如果在配置画布上下文时不使用首选格式，则可能会产生额外的开销，例如额外的纹理复制，具体取决于平台。

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() 调用中的绑定组条目。

请注意，可以使用按位或运算符指定多个可能的用途。例如，usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT。

viewFormats 可选

由 getCurrentTexture() 返回的纹理创建的视图可能使用的格式数组。有关所有可能的值，请参阅纹理格式。

返回值

无 (undefined)。

示例

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

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

规范

规范
WebGPU # dom-gpucanvascontext-configure

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅

WebGPU API