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

看了这么多 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 的工程师为咱们做了什么吧！

前端技术的敌人们比拟相熟的打包工具还有 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/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 版本。

顶点着色器 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);
}

片元着色器 red.frag.wgsl

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

绘制三角形 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，传入顶点和片元着色器代码，最初绘制胜利！

为了不便本地开发，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 场景暴发时代提供引擎根底工具。

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

应用 Vite 打包

装置 WebGPU 库，配置 tsconfig 文件

绘制三角形

WebGPU Origin Trial Token

小练习