SuperAPI AI 工具集

webgpu-syntax-canvas-context

通用与其它

查看项目

更新于 10-16 06:18

技能介绍

用途:本技能面向 WebGPU 画布上下文(GPUCanvasContext),它是 <canvas> 元素与 GPU 之间的桥梁,负责生成每帧由渲染通道绘制、再由浏览器合成到屏幕的 GPUTexture。适用于配置 WebGPU 画布、呈现渲染帧或处理画布缩放,支持 WebGPU 1.0 稳定版(Chrome 113+、Safari 26+、Firefox 141+)。

主要能力:说明 context.configure() 的 GPUCanvasConfiguration 字段(device、format 必填;usage、alphaMode、colorSpace、toneMapping、viewFormats 可选及默认值),以及 getContext("webgpu")、getPreferredCanvasFormat()、configure、getCurrentTexture、unconfigure 等核心方法。

必要用法:始终用 navigator.gpu.getPreferredCanvasFormat() 获取格式,不要硬编码 "bgra8unorm";必须先 configure() 再 getCurrentTexture(),否则抛 InvalidStateError;每帧只调用一次 getCurrentTexture() 并立即使用,绝不跨帧缓存纹理或其 createView 结果;缩放时设置 canvas.width/canvas.height 属性而非仅用 CSS,并用 ResizeObserver 结合 devicePixelContentBoxSize 与 device.limits.maxTextureDimension2D 做钳制;usage 需显式包含下游所需标志(如截图需 RENDER_ATTACHMENT | COPY_SRC)。

适用场景:响应式或全屏画布、需要与页面内容混合(alphaMode 选 premultiplied)、高 DPI 显示等。

限制:渲染管线 fragment.targets[0].format 必须与 configure 的 format 一致;画布尺寸不得超过 maxTextureDimension2D。参考文件与相关技能(核心架构、纹理、渲染目标、跨浏览器)的具体内容暂未提供。