WebGPU入门
随着WebGPU日益成熟，本季度将赢来WebGPU正式版本的发布。关注WebGPU开发的小伙伴也越来越多。笔者也希望边学边记录分享给大家。
WebGPU 简介
由W3C组织定义的一个新的API标准，用于在Web上使用Javascript来控制GPU计算和绘制。该标准获得了目前所有主流厂商的支持，由大家一起参与WebGPU的发展。有望成为一个全平台支持的标准。
WebGPU拟补了过去WebGL的各种不足和背负的各种历史包袱，其主要接入现代图形API（Direct3D、Vulkman、Metal）。总之相比WebGL，其会更快、更强、更灵活，更符合Web现代的开发标准。
WebGL与WebGPU的那些事儿
WebGL相当于是在使用十几年前的OpenGL框架体系。而OpenGL本身就已经非常古老，有将近30年历史了。WebGL仅仅只实现了OpenGL ES 2.0和3.0的标准，已经无法满足现代GPU框架体系，也无法满足现在高性能的计算和渲染需求。苹果公司在2018年宣布抛弃OpenGL整个框架。在2015年前后，苹果、微软、Khronos分别推出了基于全新GPU框架的Metal（2014年）、Direct3D 12（2015年）、Vulkan（2016年），现在三者被大家统称为为现代图形学API。W3C在制定新的Web图形学标准也完全参考了新的三个图形学API，抛弃了OpenGL的整个框架。
- WebGL1.0标准，2011 年定制，基于OpenGL ES2.0在Web上的实现
- OpenGL ES2.0是OpenGL 2.0在移动端的具体实现
- 相当于WebGL对标的是2004年的OpenGL的标准
- WebGL2.0标准，对标OpenGL 3.2 在2009年的实现
WebGPU支持现状
- Chrome Google 基于 Dawn 实现，v94-101 版本已经提供桌面端支持
- FireFox Mozilla 基于 gfx-rs 实现，Nightly Build版本支持桌面端和Android端
- Safari Apple 基于 WebKit 实现，开发者预览版支持IOS、Mac
开发需求
- 开发工具
- Chrome Canary支持最新的 WebGPU API
- Visual Studio Code 对 WebGPU 相关生态支持比较完善
- Vite 速度上较快的编译、打包工具
- 语言
- TypeScript 利用其类型特性来检查代码是否使用正确，节省找文档时间
- WGSL WebGPU 新的着色器语言
- HTML/CSS
- 环境
- Node.js
- npm或yarn
- CMD/Terminal
工程搭建
-
yarn create vite创建一个项目，根据提示输入项目名称并选择项目模版vanilla-ts -
cd 项目名称进入到项目目录 -
yarn安装依赖 -
yarn add @webgpu/types -D安装webgpu的类型支持 - 在
tsconfig.json配置文件中为compilerOptions增加"types": ["vite/client", "@webgpu/types"] -
yarn run dev启动项目，根据提示在浏览器访问预览地址
接下来所有的代码操作入口将从
src/main.ts开始
判断浏览器是否支持WebGPU
// 判断WebGPU是否可用，根据定义
const gpu = navigator.gpu;
if(gpu === undefined){
throw new Error("浏览器不支持WebGPU");
};
