alaingalvan / webgpu-seed

🔺🌱 An example on how to render a hello triangle with WebGPU.

🔺 WebGPU Seed

A WebGPU repo you can use to get started with your own renderer.

• 🔳 Codepen Example

• 💬 Blog Post

Setup

First install:

• Git

• Node.js

• A Text Editor such as Visual Studio Code.

Then type the following in any terminal your such as VS Code's Integrated Terminal.

# 🐑 Clone the repo
git clone https://github.com/alaingalvan/webgpu-seed

# 💿 go inside the folder
cd webgpu-seed

# 🔨 Start installing dependencies, building, and running at localhost:8080
npm start

Refer to this blog post on designing web libraries and apps for more details on Node.js, packages, etc.

Project Layout

As your project becomes more complex, you'll want to separate files and organize your application to something more akin to a game or renderer, check out this post on game engine architecture and this one on real time renderer architecture for more details.

├─ 📂 node_modules/   # 👶 Dependencies
│  ├─ 📁 gl-matrix      # ➕ Linear Algebra
│  └─ 📁 ...            # 🕚 Other Dependencies (TypeScript, Webpack, etc.)
├─ 📂 src/            # 🌟 Source Files
│  ├─ 📄 index.html     #  📇 Main HTML file
│  └─ 📄 renderer.ts    # 🔺 Triangle Renderer
├─ 📄 .gitignore      # 👁️ Ignore certain files in git repo
├─ 📄 package.json    # 📦 Node Package File
├─ 📄 license.md      # ⚖️ Your License (Unlicense)
└─ 📃readme.md        # 📖 Read Me!

webgpu-seed's Issues

Buffer example image position VBO

Hi - I think the signs or order are off in this image from the blog post? They don't match what's in the VBO in the code. Thanks!!

TypeError: m.device.createBufferMapped is not a function

Uncaught (in promise) TypeError: m.device.createBufferMapped is not a function
at e (main.js:1)
at c. (main.js:1)
at main.js:1
at Object.next (main.js:1)
at main.js:1
at new Promise ()
at n (main.js:1)
at c.initializeResources (main.js:1)
at c. (main.js:1)
at main.js:1

Shaders haven't been updated for new @ syntax

In your blog post, you've updated the shaders for the new WGSL @attribute syntax, but in this repo, the vertex and fragment shaders still follow the old-style double square-brackets syntax.

webgpu-seed/src/shaders/triangle.frag.wgsl

Lines 1 to 4 in 1ee2bdd

	[[stage(fragment)]]
	fn main([[location(0)]] inColor: vec3<f32>) -> [[location(0)]] vec4<f32> {
	return vec4<f32>(inColor, 1.0);
	}

webgpu-seed/src/shaders/triangle.vert.wgsl

Lines 1 to 13 in 1ee2bdd

	struct VSOut {
	[[builtin(position)]] Position: vec4<f32>;
	[[location(0)]] color: vec3<f32>;
	};
	[[stage(vertex)]]
	fn main([[location(0)]] inPos: vec3<f32>,
	[[location(1)]] inColor: vec3<f32>) -> VSOut {
	var vsOut: VSOut;
	vsOut.Position = vec4<f32>(inPos, 1.0);
	vsOut.color = inColor;
	return vsOut;
	}

P.S. Thank you for the excellent posts 👏

Out of date again

Uncaught (in promise) TypeError: Failed to execute 'createRenderPipeline' on 'GPUDevice': required member vertex is undefined.
    at t.default.<anonymous> (main.js:1)
    at Generator.next (<anonymous>)
    at n (main.js:1)

Blogpost: UBO in shader syntax.

Under Shader Modules,

vsOut.Position = modelViewProj * vec4<f32>(inPos, 1.0);
should be
vsOut.Position = uniforms.modelViewProj * vec4<f32>(inPos, 1.0);

The former doesn't compile and throws an error.

#enable-unsafe-webgpu flag in about://flags.

I'm on the latest mac chrome, 95, and can't seem to find the enable flag?