WebGPU 入门与性能优化实战

WebGPU 入门与性能优化实战概述WebGPU 为 Web 平台提供现代 GPU 接口，具备更高效的渲染与计算能力。本文展示设备初始化、基本渲染管线与优化策略，示例采用稳定 API 与 WGSL 着色器。初始化与上下文配置const adapter = await navigator.gpu.requestAdapter()

if (!adapter) throw new Error('No GPU adapter')

const device = await adapter.requestDevice()

const canvas = document.querySelector('canvas') as HTMLCanvasElement

const context = canvas.getContext('webgpu') as GPUCanvasContext

const format = navigator.gpu.getPreferredCanvasFormat()

context.configure({ device, format, alphaMode: 'opaque' })

基本渲染管线与绘制// 顶点与片元着色器（WGSL）

const shader = /* wgsl */ `

@vertex

fn vs_main(@builtin(vertex_index) vi: u32) -> @builtin(position) vec4f {

var pos = array<vec2f, 3>(

vec2f(0.0, 0.5),

vec2f(-0.5, -0.5),

vec2f(0.5, -0.5)

);

return vec4f(pos[vi], 0.0, 1.0);

}

@fragment

fn fs_main() -> @location(0) vec4f {

return vec4f(0.1, 0.6, 0.9, 1.0);

}

`

const module = device.createShaderModule({ code: shader })

const pipeline = device.createRenderPipeline({

layout: 'auto',

vertex: { module, entryPoint: 'vs_main' },

fragment: { module, entryPoint: 'fs_main', targets: [{ format }] },

primitive: { topology: 'triangle-list' },

})

const encoder = device.createCommandEncoder()

const view = context.getCurrentTexture().createView()

const pass = encoder.beginRenderPass({

colorAttachments: [{ view, loadOp: 'clear', storeOp: 'store', clearValue: { r: 0, g: 0, b: 0, a: 1 } }],

})

pass.setPipeline(pipeline)

pass.draw(3)

pass.end()

device.queue.submit([encoder.finish()])

性能优化实践资源复用：复用 `pipeline` 与绑定组，减少每帧重建。最小提交：批量记录命令后一次性 `queue.submit`。内存管理：合理配置 `GPUBuffer` 与纹理生命周期，避免频繁创建销毁。屏幕适配：使用 `preferredCanvasFormat` 与 `alphaMode` 控制输出与混合。验证要点示例基于稳定 WebGPU API 与 WGSL；在支持的浏览器（Chrome/Edge/Firefox 开启支持）可直接运行。借助性能面板观测帧时间与命令提交次数，指导资源复用与批处理策略。