2

看了这么多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);
}
  1. 绘制三角形 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.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的发展。我们会尽自己最大的努力把最干货最前沿的WebGPU技术分享给每一位社区成员,也诚心的希望大家为Orillusion开源社区做出自己的贡献。我们一直坚信,开源社区的技术留痕是每一位技术人员最崇高的追求。因此,我们尊重,我们认可,我们更期待,加入Orillusion,让我们共同进步!

——Link uncharted, 链接未来世界

Orillusion 团队介绍

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

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


Orillusion
12 声望10 粉丝

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