Getting started with WebGPU: creating the first WebGPU project with zero Foundation

Posted by nonphixion on Tue, 08 Mar 2022 13:08:53 +0100

After looking at the development and advantages of so many webgpus, do you feel a little itchy and think, WebGPU sounds so complex, how do you start? How to publish a WebGPU Project?

We don't know if it's only three steps to put the elephant in the refrigerator, but we can tell you how easy it is to make a WebGPU project with Orillusion's template!

Orillusion provides and deploys Chrome WebGPU Token. After running, it can support WebGPU content on Chrome 100 + (support the latest wgsl version).

Orillusion WebGPU template linkhttps://github.com/Orillusion/orillusion-webgpu-samples

In Terminal, enter the following command, Download Github library, use npm or yarn to install the library and run it. Open localhost:3000 in the browser to see the running result, a small triangle.

# 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

It's that simple. I believe you have implemented the first WebGPU applet on your computer. Let's take a look at what Orillusion engineers have done for us under this small triangle!

Package with Vite

Friends of front-end technology are familiar with Webpack, Rollup and Parcel, which greatly improve the development experience of front-end developers. Vite divides the modules in the application into dependency and source code at the beginning, and greatly improves the code compilation time through native ESM loading. The startup and hot update speed is very fast, almost millisecond level.

Support TypeScript, JSX and CSS out of the box. Vite uses esbuild to translate TypeScript into JavaScript, which is about 20 ~ 30 times faster than tsc. At the same time, the time for HMR update to be reflected in the browser is less than 50ms. These features and advantages are very friendly to developers.

The file structure developed with Vite is as follows:

├─ 📂 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

Install the WebGPU library and configure the tsconfig file

Our template library has installed @ webgpu/types to support WebGPU:

npm install @webgpu/types --save

Add vite/client and @ webgpu/types to compileroptions. In tsconfig Under types:

{
  "compilerOptions": {
    .. .. ..
    "types": ["vite/client", "@webgpu/types"]
  }
  "include": ["src"]
}

vite/client will provide the following type definition supplements:

Resource import (for example: import a. wgsl file)

import. meta. Type definition of environment variable injected by Vite on Env
import. meta. HMR API type definition on hot

Draw triangle

Chrome 100+ wgsl uses a new @ tag. If wgsl reports an error and cannot be displayed, please update the chrome version.

1. Vertex shader triangle vert. wgsl

// Use the latest wgsl standard
@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. Slice shader red frag. wgsl

// Use the latest wgsl standard
@stage(fragment)
fn main() -> @location(0) vec4<f32> {
  return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}

3. Draw the triangle basictriangle ts

vite/client can easily introduce wgsl files of string type, and add <? Raw > mark

import triangleVertWGSL from './shaders/triangle.vert.wgsl?raw'
import redFragWGSL from './shaders/red.frag.wgsl?raw'

Initialize the device of webgpu through 90 lines of code, call canvas, create a pipeline, pass in vertex and slice shader code, and finally draw successfully!

localhost:3000

WebGPU Origin Trial Token

In order to facilitate local development, orillusion applied for the Origin Trial Token of Chrome WebGPU that can be used in the localhost environment, which is configured in vite config. JS, there is no need to download the Chrome Canary version or manually set the unsafe WebGPU flag. WebGPU can be supported in ordinary Chrome 96 +. Orillusion will update the token regularly before the official release of WebGPU.

// 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()
      })
    }
  }
  ]
})

Little practice

We introduced vertex shader and slice shader, so try to change the coordinates and colors to make your own graphics! Push to Git and share with us!

Orillusion WebGPU template linkhttps://github.com/Orillusion/orillusion-webgpu-samples

We know how a triangle can meet the students' thirst for knowledge. The Orillusion team plans to release more WebGPU courses. Let's explore WebGPU and follow us. Please look forward to the follow-up sharing!

More developers are welcome to leave messages,

Join the Orillusion community and participate in the discussion!

👇

Long click the figure below to scan the code and add the administrator wechat

Welcome more partners to join our Orillusion community and witness the development of WebGPU with us. We will try our best to share the most dry and cutting-edge WebGPU technology with every member of the community, and sincerely hope that you can make your own contribution to the Orillusion open source community. We always firmly believe that the technology mark of the open source community is the highest pursuit of every technician. Therefore, we respect, we recognize, and we look forward to joining Orillusion to make progress together!

——Link uncharted, link the future world

Introduction to Orillusion team

Members of the top-level R & D teams, such as those from the University of science and technology at home and abroad, including those from Beilu University of technology, and those from the former University of science and technology at home and abroad who have more than 10 years of experience in R & D of visualization engine, including those from Beilu University of technology, and those from the former University of technology at home and abroad. We also continue to pay attention to the relevant talents of excellent enterprises and open source communities, and look forward to more small partners who love open source to join Orillusion and change the world together!

The team focuses on the research and development of the underlying technology of the engine, and its main work is to build a fully open-source WebGPU lightweight general rendering engine. The goal is to achieve desktop level rendering effect in the browser and support 3D rendering of super large and complex scenes. In the future, the team will always focus on the technical breakthrough at the bottom of the engine, create excellent open source software and open source area, and provide engine basic tools for the era of 3D scene explosion.

Topics: Javascript webgl

Programmer Think