WebGPU入门一

小白啥时候能进阶成功

已于 2023-10-17 14:58:26 修改

阅读量443

点赞数

文章标签： webgpu

于 2023-10-16 14:31:46 首次发布

本文链接：https://blog.csdn.net/qq_34754747/article/details/133797360

版权

1 WebGPU学习开发环境配置

WebGPU的环境配置比较简单，不需要vite或webpack配置一个复杂的开发环境，直接使用.html文件即可。

1.1 支持WebGPU的浏览器

Chrome 113 beta测试版开始默认支持WebGPU。

1.2 index.html文件

创建index.html文件，<script>标签设置type=“module”，就可以在模块中编写ES6语法，不需要webpack和vite进行编译处理。

1.3 vscode编辑器

借助live server插件，就可以在代码页面直接右键在live server中打开，默认浏览器中打开执行。

测试是否支持webgpu

if (navigator.gpu) {
   console.log("support webgpu");
} else {
   console.log("not support webgpu");
}

2 WebGPU API和Canvas画布

WebGPU提供了很多相关的API，通过这些WebGPU API可以控制你的显卡GPU渲染3D场景或计算数据。

WebGPU API文档：https://www.w3.org/TR/webgpu/

GPU：图形处理器，即电脑上的显卡，如果为了追求更好的性能，一般会在电脑上安装独立显卡。

2.1 使用WebGPU API获取到GPU设备对象

//浏览器请求GPU适配器
const adapter = await navigator.gpu.requestAdapter();
//获取GPU设备对象，通过GPU设备对象就可以使用WebGPU API控制GPU渲染过程
const device = await adapter.requestDevice();

获取GPU设备对象非常简单，执行上面两步操作即可。

***注意***

requestAdapter()和requestDevice都是异步函数，函数前需要加上es6语法关键字await。

device设备对象有很多方法和属性，可以去控制物理上的显卡GPU。

2.2 device设备对象的属性和方法

device.createRenderPipeline();//创建渲染管线
device.createComputePipeline();//创建计算管线
device.createShaderModule();//创建着色器模块
device.createCommandEncoder();//创建命令对象（绘制和计算命令）
device.createBuffer();//创建缓冲区对象

device.createCommandEncoder();//创建命令对象（绘制和计算命令），不是创建编码器。

2.3 获取WebGPU上下文

Canvas元素作为WebGPU的画布

const canvas = document.getElementById("player");
const context = canvas.getContext("webgpu");

2.4 配置WebGPU上下文

关联Canvas对象和GPU设备对象device。这样就能把Canvas元素作为WebGPU的画布，用来呈现3D渲染效果。

//配置webgpu上下文（canvas上下文和device绑定在一起）:device设备,format颜色格式，
const format = navigator.gpu.getPreferredCanvasFormat();//获取浏览器canvas默认的颜色格式
context.configure({
   device:device,
   format:format,
})