WebGPU小白入门(一): 零基础创建第一个WebGPU项目
点击此处查看最新的网赚项目教程
看了这么多WebGPU的发展和优势，你是不是也有点手痒了，心想，WebGPU听起来那么复杂，到底怎么开始着手？发布一个WebGPU的Project到底怎么做？
我们不知道把大象放冰箱是不是只要三步，但是我们可以告诉大家，有了Orillusion的模板，制作一个WebGPU的项目是多么轻松！
Orillusion提供并部署了Chrome WebGPU Token，运行后，在Chrome 100+ 上即可支持WebGPU内容（支持最新wgsl版本）。
Orillusion WebGPU模板链接:
在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 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 会提供以下类型定义补充：
绘制三角形
Chrome 100+ wgsl 使用新的@ 标签 ，如果wgsl报错无法显示，请更新Chrome版本。
1. 顶点着色器 triangle.vert.wgsl
// 使用最新的wgsl标准fn main( VertexIndex : u32) -> vec4 {var pos = array<vec2, 3>(vec2(0.0, 0.5),vec2(-0.5, -0.5),vec2(0.5, -0.5));return vec4(pos[VertexIndex], 0.0, 1.0);}2. 片元着色器 red.frag.wgsl
// 使用最新的wgsl标准fn main() -> vec4 {return vec4(1.0, 0.0, 0.0, 1.0);}3. 绘制三角形 basicTriangle.ts
vite/client可以很方便的引入 string 类型的wgsl 文件，在链接后添加标注即可
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模板链接:
我们知道，一个三角形怎么能满足同学们的求知欲呢，Orillusion团队计划发布更多WebGPU的课程，让我们一起来探索WebGPU，关注我们，敬请期待后续的分享！
———END———
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： qs62318888主题授权提示：请在后台主题设置-主题授权-激活主题的正版授权，授权购买：RiTheme官网
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
