Skip to content
/ webgpu-seed Public template

πŸ”ΊπŸŒ± An example on how to render a hello triangle with WebGPU.

License

Notifications You must be signed in to change notification settings

alaingalvan/webgpu-seed

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

36 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Cover Art

πŸ”Ί WebGPU Seed

License Unit Tests

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

Setup

First install:

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!