看了这么多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，传入顶点和片元着色器代码，最后绘制成功！
localhost:3000
WebGPU Origin Trial Token
为了方便本地开发，Orillusion申请了在 localhost 环境中可以使用的Chrome WebGPU 的Origin Trial Token，配置在vite.config.js 中，可以不用下载Chrome Canary版本，也无需手动设置unsafe-webgpuflag，在普通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，关注我们，敬请期待后续的分享！
欢迎大家加入 Orillusion 开发者社群，陪我们一起见证 WebGPU 的发展，快来成为 Orillusion 社区第一批 “源” 住民吧！让一起打造有价值、有活力、有温度的共创社区！长按或扫描下方二维码添加小鸥微信吧
Orillusion 致力于打造全世界第一款完全开源基于 WebGPU 标准的一种轻量级渲染引擎，目标是在浏览器中实现桌面级的渲染效果，支持超大复杂场景的 3D 呈现。易上手，易分享，易迭代，易协作、成本低，跨平台是我们的核心优势，我们将为 3D 场景爆发时代提供引擎基础工具。
未来我们将会持续把最干货最前沿的 WebGPU 技术分享给每一位社区成员，也欢迎大家为 Orillusion 开源社区做出自己的贡献。我们一直坚信，开源社区的技术留痕是每一位技术人员最崇高的追求！因此，我们尊重，我们认可，我们更期待，加入 Orillusion，让我们共同进步！
——Link uncharted, 链接未来世界
长按关注 Orillusion 官方微信
第一时间了解 WebGPU 引擎动向，学习开发技巧，一起打造 Web 3D 世界
