WebGPU 开源项目教程
webgpuWebGPU for Node [Deprecated, Unmaintained]项目地址:https://gitcode.com/gh_mirrors/we/webgpu
项目介绍
WebGPU 是一个基于 Web 的图形处理 API,旨在提供现代 GPU 功能的高性能访问。该项目由 maierfelix 开发,旨在为 Web 开发者提供一种新的方式来利用现代 GPU 的能力,从而在浏览器中实现更复杂的图形渲染和计算任务。
项目快速启动
环境准备
在开始之前,请确保你的开发环境已经安装了最新版本的 Node.js 和 npm。
安装项目
- 克隆项目仓库:
git clone https://github.com/maierfelix/webgpu.git
- 进入项目目录:
cd webgpu
- 安装依赖:
npm install
运行示例
- 启动开发服务器:
npm start
- 打开浏览器,访问
http://localhost:8080
,你将看到一个简单的 WebGPU 示例。
示例代码
以下是一个简单的 WebGPU 示例代码,展示了如何初始化 WebGPU 并绘制一个三角形:
async function init() {
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const context = canvas.getContext('webgpu');
const presentationFormat = navigator.gpu.getPreferredFormat(adapter);
context.configure({
device,
format: presentationFormat,
});
const vertices = new Float32Array([
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
]);
const vertexBuffer = device.createBuffer({
size: vertices.byteLength,
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(vertexBuffer, 0, vertices);
const pipeline = device.createRenderPipeline({
vertex: {
module: device.createShaderModule({
code: `
[[stage(vertex)]]
fn main([[location(0)]] pos: vec3<f32>) -> [[builtin(position)]] vec4<f32> {
return vec4<f32>(pos, 1.0);
}
`,
}),
entryPoint: 'main',
buffers: [{
arrayStride: 12,
attributes: [{
format: 'float32x3',
offset: 0,
shaderLocation: 0,
}],
}],
},
fragment: {
module: device.createShaderModule({
code: `
[[stage(fragment)]]
fn main() -> [[location(0)]] vec4<f32> {
return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
`,
}),
entryPoint: 'main',
targets: [{
format: presentationFormat,
}],
},
primitive: {
topology: 'triangle-list',
},
});
function render() {
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginRenderPass({
colorAttachments: [{
view: context.getCurrentTexture().createView(),
loadValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
storeOp: 'store',
}],
});
passEncoder.setPipeline(pipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);
passEncoder.endPass();
device.queue.submit([commandEncoder.finish()]);
}
render();
}
init();
应用案例和最佳实践
应用案例
- 图形渲染:WebGPU 可以用于在浏览器中实现复杂的 3D 图形渲染,如
webgpuWebGPU for Node [Deprecated, Unmaintained]项目地址:https://gitcode.com/gh_mirrors/we/webgpu