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

看了这么多 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 repogit clone https://github.com/Orillusion/orillusion-webgpu-samples.git
#Go inside the foldercd orillusion-webgpu-samples​
#Start installing dependenciesnpm install #or yarn add​
#Run project at localhost:3000npm 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 files

安装 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，传入顶点和片元着色器代码，最后绘制成功！

localhost:3000

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.jsimport { 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，关注我们，敬请期待后续的分享！

欢迎更多开发者留言，

加入 Orillusion 社区参与讨论！

👇

长按下图，扫码添加管理员微信

欢迎更多的小伙伴可以加入我们的 Orillusion 社区，陪我们一起见证 WebGPU 的发展。我们会尽自己最大的努力把最干货最前沿的 WebGPU 技术分享给每一位社区成员，也诚心的希望大家为 Orillusion 开源社区做出自己的贡献。我们一直坚信，开源社区的技术留痕是每一位技术人员最崇高的追求。因此，我们尊重，我们认可，我们更期待，加入 Orillusion，让我们共同进步！

—— Link uncharted, 链接未来世界

Orillusion 团队介绍

Orillusion 团队由帝国理工大学可视化渲染方向博后创建，团队成员具备顶级的学术背景，包括来自海内外名校的硕士博士，如港大，哈工大，北邮等，而且引擎技术研发成员均来自原白鹭引擎核心团队，具备 10 年以上的底层引擎研发经验。我们也一直持续关注优秀企业和开源社区的相关人才，期待更多热爱开源的小伙伴加入 Orillusion，一起改变世界！

团队专注于引擎底层技术研发，主要工作是打造完全开源的 WebGPU 轻量级通用渲染引擎，目标是在浏览器中实现桌面级的渲染效果，以及支持超大复杂场景的 3D 呈现。未来团队会一直专注于引擎底层的技术突破，打造优秀的开源软件及开源区，为 3D 场景爆发时代提供引擎基础工具。