WebGPU小白入门(一): 零基础创建第一个WebGPU项目

[admin]

看了这么多WebGPU的发展和优势，你是不是也有点手痒了，心想，WebGPU听起来那么复杂，到底怎么开始着手？发布一个WebGPU的Project到底怎么做？

我们不知道把大象放冰箱是不是只要三步，但是我们可以告诉大家，有了Orillusion的模板，制作一个WebGPU的项目是多么轻松！

Orillusion提供并部署了Chrome WebGPU Token，运行后，在Chrome 100+ 上即可支持WebGPU内容（支持最新wgsl版本）。

Orillusion WebGPU模板链接:
https://github.com/Orillusion/orillusion-webgpu-samples

在Terminal中，输入以下命令，下载Github库，使用npm或yarn安装库，并运行，浏览器打开localhost:3000，即可看到运行结果，一个小小的三角形。

# Clone the repo
git clone https://github.com/Orillusion/orillusion-webgpu-samples.git
​
# Go inside the folder
cd orillusion-webgpu-samples
​
# Start installing dependencies
npm install #or yarn add
​
# Run project at localhost:3000
npm run dev #or yarn run dev

就是这么简单，相信你已经在自己的电脑上实现了第一个WebGPU小程序，下面我们来看一下，在这个小小三角形下，Orillusion的工程师为我们做了什么吧！

使用Vite打包

前端技术的朋友们比较熟悉的打包工具还有Webpack、Rollup 和 Parcel 等，它们极大地改善了前端开发者的开发体验。Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，通过原生ESM加载，极大的改进了代码编译时间，启动和热更新速度非常快，几乎是毫秒级更新。

对 TypeScript、JSX、CSS 等支持开箱即用，Vite 使用 esbuild 将 TypeScript 转译到 JavaScript，约是 tsc 速度的 20~30 倍，同时 HMR 更新反映到浏览器的时间小于 50ms。这些特点优势对开发者是非常友好的。

使用Vite开发的文件结构如下:

├─ 📂 node_modules/   # Dependencies
│  ├─ 📁 @webgpu      # WebGPU types for TS
│  └─ 📁 ...          # Other dependencies (TypeScript, Vite, etc.)
├─ 📂 src/            # Source files
│  ├─ 📁 shaders      # Folder for shader files
│  └─ 📄 *.ts         # TS files for each demo
├─ 📂 samples/        # Sample html
│  └─ 📄 *.html       # HTML entry for each demo
├─ 📄 .gitignore      # Ignore certain files in git repo
├─ 📄 index.html      # Entry page
├─ 📄 LICENSE         # MIT
├─ 📄 logo.png        # Orillusion logo image
├─ 📄 package.json    # Node package file
├─ 📄 readme.md       # Read Me!
└─ 📄 tsconfig.json   # TS configuration file

安装WebGPU库，配置tsconfig文件

我们的模板库已经安装了@webgpu/types，来支持WebGPU：

npm install @webgpu/types --save

将 vite/client 和 @webgpu/types 添加到 tsconfig 中的 compilerOptions.types 下：

{
  "compilerOptions": {
    .. .. ..
    "types": ["vite/client", "@webgpu/types"]
  }
  "include": ["src"]
}

vite/client 会提供以下类型定义补充：

• 资源导入 (例如：导入一个 .wgsl 文件)

• import.meta.env 上 Vite 注入的环境变量的类型定义

• import.meta.hot 上的 HMR API 类型定义

绘制三角形

Chrome 100+ wgsl 使用新的@ 标签 ，如果wgsl报错无法显示，请更新Chrome版本。

1. 顶点着色器 triangle.vert.wgsl

// 使用最新的wgsl标准
@stage(vertex)
fn main(@builtin(vertex_index) VertexIndex : u32) -> @builtin(position) vec4<f32> {
var pos = array<vec2<f32>, 3>(
  vec2<f32>(0.0, 0.5),
  vec2<f32>(-0.5, -0.5),
  vec2<f32>(0.5, -0.5)
  );
  return vec4<f32>(pos[VertexIndex], 0.0, 1.0);
}

2. 片元着色器 red.frag.wgsl

// 使用最新的wgsl标准
@stage(fragment)
fn main() -> @location(0) vec4<f32> {
  return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}

3. 绘制三角形 basicTriangle.ts

vite/client 可以很方便的引入 string 类型的 wgsl 文件，在链接后添加<?raw>标注即可

import triangleVertWGSL from './shaders/triangle.vert.wgsl?raw'
import redFragWGSL from './shaders/red.frag.wgsl?raw'

通过90行代码，来初始化webgpu的device，调用canvas，创建一个pipeline，传入顶点和片元着色器代码，最后绘制成功！

WebGPU Origin Trial Token

为了方便本地开发，Orillusion 申请了在 localhost 环境中可以使用的 Chrome WebGPU 的 Origin Trial Token，配置在 vite.config.js 中，可以不用下载Chrome Canary版本，也无需手动设置 unsafe-webgpu flag，在普通 Chrome 96+ 中均可支持WebGPU。在WebGPU正式发布前，Orillusion 会定期更新 token。

// vite.config.js
import { defineConfig } from 'vite'
const devToken = 'Amu*****************=='
module.exports = defineConfig({
  plugins: [
  {
    name: 'Origin-Trial',
    configureServer: server => {
      server.middlewares.use((_req, res, next) => {
        res.setHeader("Origin-Trial", devToken)
        next()
      })
    }
  }
  ]
})

小练习

我们介绍了顶点着色器和片元着色器，那么尝试改变下坐标和颜色，来制作专属你的图形！Push到Git里，和我们一起交流分享！

Orillusion WebGPU模板链接:
https://github.com/Orillusion/orillusion-webgpu-samples

我们知道，一个三角形怎么能满足同学们的求知欲呢，Orillusion团队计划发布更多WebGPU的课程，让我们一起来探索WebGPU，关注我们，敬请期待后续的分享！

[支阿怪]

@admin

1.请问出现No adapter found，是什么原因呢？
2.如果浏览器不支持webgpu应该是Not support WebGPU吧，使用的edge最新版，还是说必须要用Chrome才可以？
3.是否可以在vite.config.js配置中修改，使得Edge正常运行么？

[shuangliu]

@wenhao0807
目前webgpu没有正式发布，各大浏览器默认都是不开启webgpu的支持的，需要通过配置来启用webgpu的api，比如在chrome canary 中通过 chrome://flags/#enable-unsafe-webgpu 手动开启才可以。普通版本的chrome是没有这个选项的

同样，edge其实也是基于chrome内核，其大部分配置跟chrome是一样的，也可以在 edge canary 中访问 edge://flags 开启webgpu。但同样普通edge版本中也没有该选项。

除了这种手动设置flag的开启方式，chrome有另一种方法来测试webgpu，可以通过向chrome申请特定域名下的某个未公开的api的使用权限，也就是我们内置在 vite.config.js 中的那个devtoken，有了这个token，就可以在 localhost:3000 域名下的页面中使用webgpu权限了。但这个token只有在chrome中才起作用。

Edge也有chrome一样的测试机制，可以识别chrome的token，但edge的验证服务和chrome是独立的，不能验证chrome的token，所以就出现一个bug，在edge中navigator.gpu存在，理论上可以用webgpu的api，但实际上没有权限调用。

edge 目前的origin trail计划中没有webgpu的测试项目，所以目前只有在edge的开发者版本里通过设置flag手动启用webgpu才可以
edge://flags/#enable-unsafe-webgpu

[支阿怪]

@shuangliu 感谢回复，了解了

[Nerd]

好评, 相比起视频版我更喜欢文字, 期待下一期

[galooha]

chrome 101稳定版加入WebGpu的API了吗

[shuangliu]

@galooha 还没有，目前还是处于测试阶段，预计到105版本才会加入

[shibingli]

因工作需要，最近开始学习这个，感谢！

[cx32205991]

请问我在chrome102版本中显示不支持webgpu并且是拉取的模板已经存在了token是为什么？

[shuangliu]

@cx32205991 看您贴图的token 应该是已经过期了，请重新pull我们最新的代码，token需要定期更新。

另外，最新的 sample 代码使用的是最新的webgpu api，有一些 Chrome 102 版本已经不支持了，请尝试使用 Chrome Canary 版本运行

[cx32205991]

@shuangliu 好的多谢指导

[jellyl823]

@shuangliu 已经拉取了最新的代码，但还是not surpport webgpu。

chrome canary版本106
chrome://flags/里面和webgpu有关的选项为WebGPU Developer Features设置为enable了

[shuangliu]

@jellyl823 是 Canary 的发布 bug，出现过好几次，Chrome 新版本发布时 忘了改 WebGPU 的版本 flag，导致 106 版本无法使用 WebGPU

1. 一般 Chrome 会在几天内修复该问题，可以保持更新
2. 可以先暂时启用 M105 的 flag，可以手动开启 webgpu，等106修复后再关闭正常使用

[jellyl823]

@shuangliu 多谢大佬，目前已经开了两个feature

但还是不能跑起来

[jellyl823]

@shuangliu 多谢大佬，我刚试了一下，重新下载canary105
开启chrome://flags/#enable-unsafe-webgpu，可以正常运行了！多谢！

[cfl997]

小白入门，棒棒棒

[Davidyanlong]

老师，想获得该系列培训的PPT，在哪里可以下载到？