|
|
 |
WebGPU..
Games, Tutorials, Demos, Projects, and Code..... |
|
|
|
WebGPU Game Programming Tutorials
These tutorials are to help you on the road to writing games (and other cool interactive pages) using the WebGPU API. Not just about the end-goal! But the journey.
Range of interactive examples, source code and explainations.
From triangles and transforms, to cameras, keyboard input, mouse coordinates, 3d model loading, animations... for walking around a 3D world ... then onto lighting, textures, graphical effects, particles, ...
In addition to the code there will be tips, rants and short explanations - like basic 2D/3D principles, lighting, normalization - what and whys to go with tutorial (with some extra links and information at the end)
 | First WebGPU Program (50ish Lines) |  |
WebGPU tutorial that shows how to draw a triangle...
| Color (Rainbows!) | |
Update the triangle demo to have `color' (including buffers, vertices, and indices). (enable multisampled rendering)...
| Multisampled Triangle | |
Enabling multisampling in the rendering pipeline - adding a bit of extra detail and smoothness to the final image...
Using matrix to control position, rotation and scaling for the same vertices. This goes...
| Frames Per Second (Faster, Faster, FASTER...) | |
Adding frames per second timing to the WebGPU update loop ....
| Camera (What you looking at?) | |
An introduction to being able to move a camera around the (position)...
| Camera Part2 | |
The previous camera tutorial demonstrated moving the camera forward and backward (using keyboard). This tutorial focuses on yaw rotation
| Camera Part3 | |
An expansion on the prior camera tutorials, this demonstrates how to pitch the camera (look up and down).
| Camera Part4 | |
This camera tutorial shows one technique for doing a 3rd person...
| Camera Part5 | |
This camera tutorial shows how to stafe from side to side....
| Time Based Movement (Frame based vs Time based) | |
This tutorial shows how to add just a few lines to...
| Texture Mapping (Texture Pixels) | |
A 3D object isn't complete without a texture map on it (generate one). ...
| Texture Mapping Part2 | |
The first texture mapping tutorial loads the texture...
| Texture Mapping Part3 | |
This tutorial shows you how to load a png (transparency) file and...
| Texture Matrix (Manipulating Textures/Transforms/Texture Space) | |
Demonstrates how to manipulate the WebGPU texture so that you...
| Multi-Texturing | |
Mult-texturing allows you to acheive a whole slew of graphical effects....
| Rotating Cube (Voxels) | |
This tutorial shows you how to create the famous spinning cube....
| Transparency | |
This tutorial goes over how to have transparent objects. Here we...
| Normals | |
In this tutorial we explain what a normal is and the...
| Sky Box | |
This tutorial will show you how to make a sky box. ...
| Masking And Ortho Mode | |
This tutorial demonstrates how to render transparent images using a mask...
| Render to a Texture | |
This demonstrates rendering a spinning cube to a blank texture real-time,...
| Vertex Arrays and Indices (Topologies) | |
Your vertex data come in lots of formats either arrays of triangles or triangles with lookup indices...
| Motion Blur | |
This tutorial shows you how to do incredibly fast motion blurring...
| Fog | |
Fog is a simple, yet effective, technique to make your 3D...
| Per-Vertex Lighting | |
Here we brighten up your WebGPU applications with a little light. ...
| Per-Pixel Lighting | |
This tutorial shows how to do per-pixel lighting with a shader. Per-pixel...
| Specular Lighting (Shiny) - Materials | |
How to reproduce those bright, shiny highlights of light ...
| Particles (and Billboarding) | |
Particles are a stock piece of eye candy you'll see in...
| Object Selection | |
Checking for mouse clicks in 3D can't be done the same...
| Resources and Links | |
• Hundres of Live Examples with Code are Available on the WebGPU Lab [https://webgpulab.xbdev.net/]
• WebGPU Tutorials/Information [https://xbdev.net/internet/webgpu/]
• WGSL Information [https://xbdev.net/shaderx/wgsl/]
|
|
