WebGPU新手入门(一): 零基础创建第一个WebGPU项目

原创

已于 2022-07-06 10:37:44 修改 · 4.2k 阅读

标签

#javascript #开发语言 #webgl #渲染管线

收录于

于 2022-03-08 20:00:00 首次发布

本文介绍如何从零开始创建一个WebGPU项目，利用Orillusion的模板简化流程。通过Vite进行打包，安装WebGPU库并配置tsconfig文件，然后讲解绘制三角形的步骤，包括顶点和片元着色器。最后，鼓励读者通过修改坐标和颜色进行小练习，以加深理解。Orillusion致力于WebGPU技术的开源分享和轻量级渲染引擎开发。

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