关于前端:WebGPU小白入门一-零基础创建第一个WebGPU项目

42次阅读

共计 3609 个字符,预计需要花费 10 分钟才能阅读完成。

看了这么多 WebGPU 的倒退和劣势,你是不是也有点手痒了,心想,WebGPU 听起来那么简单,到底怎么开始着手?公布一个 WebGPU 的 Project 到底怎么做?

咱们不晓得把大象放冰箱是不是只有三步,然而咱们能够通知大家,有了 Orillusion 的模板,制作一个 WebGPU 的我的项目是如许轻松!

Orillusion 提供并部署了 Chrome WebGPU Token,运行后,在 C hrome 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,传入顶点和片元着色器代码,最初绘制胜利!

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 场景暴发时代提供引擎根底工具。

正文完
 0