JavaScript in combination with the WebGPU API helps create powerful compute and graphics solutions.
The ability to create beautiful graphics quickly and easily which are accessible to everyone with a modern browser is incredible.
And it's not just about creating candy for the eyes, the API also lets you perform complex compute tasks using the massively parallel architecture for non-graphical tasks (such as large language models.chatgpt.. or stable diffusion for image generation).
WebGPU API (Coffee Break Series)
The book isn't an in-depth introduction to the low-level optimization of the API or squeezing those computational bytes out of the GPU kernel. No! It's a quick-start guide! It's intended to get you up and running quickly - such as initializing the API, getting something on screen (loading 3-dimensional geometry and basic shaders).
Graphical concepts by themselves could fill an entire book - effects such as shadows, reflection, lens-flare and much more. But what the book does do, is get you working with 3-dimensional geometry with your browser.
Grab a cup of coffee (decaf if it's late), lay back on your comfy sofa, and flick through - folding the odd corner page to note you must come back to that :)
Why bother with WebGPU? Is it hard? You might have reserves about learning WebGPU! Especially if you're also learning other concepts, such as, JavaScript and Linear Mathematics! It can be enough to make a person cry. A rabbit hole of material.
Take a deep breath. and again! WebGPU isn't that bad. Once you get past all the overhead code, you'll be throwing out 3d cubes and complex compute operations easily - without even breaking a sweat!
Since it also runs in a browser, it means you'll be able to share your cool creations with colleagues and friends at the click of a button (just send them the link). They'll be able to run the WebGPU programs on their phones, tablet or desktop. So cool! Non of this installing applications and drivers.
Of course, WebGPU API is new! Really really new! In fact, it's still in its final stages of development! Hence, you'll probably have to 'enable' it in the browser settings (or download development build - Chrome(Canary) or Firefox(Nightly)). But the extra work is worth it!
|
Basic WebGPU API Tests
|
Link
|
|
Graphics Topology Examples
|
Link
|
|
Data & Buffers
|
Link
|
|
Textures & Transforms (including depth buffer, cameras, uniforms, and more complex shaders)
|
Link
|
|
Simple lighting examples (directional lighting)
|
Link
|
|
WebGPU Compute (matrix multiplication)
|
Link
|
|
Loading in an external graphical model (JSON file)
|
Link
|
An Introduction to WebGPU API
Hands-on guide to getting started with the WebGPU API. WebGPU API enables high-performance 3D graphics and data-parallel computation on the web. After a decade of WebGL bringing 3D graphics to the web and enabling all sorts of new experiences, the WebGPU API breaks away from the norm and provides a long awaited upgrade to help developers take full advantage of modern graphics cards. WebGPU takes you closer than ever before to the hardware and lets you unlock the power of compute shader for web.
 | WebGPU Articles, Stories, Rants and Tips |  |
•
Alpha, Opacity, Transparency, ... Not So Easy
•
WebGPU Killed WebGL
•
9 Things You Might Not Know About WebGPU
•
WebGPU Meets LLMs (ChatGPT Like Chat Models)
•
Hello WebGPU Stable Diffusion
•
Is WebGPU On The Decline?
•
WebGPU and WGSL Data Structures and Algorithms
•
Video to WebGPU Texture
•
Compute Shader Generate Graphics and Output to CANVAS Texture
•
Mixed Data Buffer (Structures)
•
WebGPU/WGSL Fixer Upgrader (Userscript)
•
Fluffy Cotton Candy Clouds (Animated)
•
Flame and Fires
•
Mesh Generation (Compute Shader)
•
50,000 Animated Characters (MD2 Format)
•
A Tale of Two Graphics API
| WebGPU & Games (WebGPU 'Game' Programming Tutorial Series) | |
Yes! The WebGPU API is for more than just fancy graphics and scientic computations! It's also takes web gaming to a new level!
These
tutorials provide a set of step by step examples for those looking to
develop games - sort of a getting started roadmap that goes from hello triangle through to cameras and animated characters.
| WebGPU & Compute (WebGPU 'Compute' Programming Tutorial Series) | |
Set of tutorials that focus only on COMPUTE!
Only COMPUTE!
The compute aspect of the GPU (not graphics) is a big things now. WebGPU API has opened the door. No more hacking the backdoor of WebGL or using textures. You can now program compute shaders like you do JavaScript! These
tutorials provide a set of step by step examples for those looking to use the GPU for things other than games and graphics - using the GPU compute (only the compute examples).
Compute, COMPUTE, COMMMPUUUTTTTTEEE!
| Neural Networks & WebGPU Compute Shaders | |
Practical introduction to neural networks & deep learning from the ground-up using the WebGPU API (and compute shaders).
These examples are the intersection of neural networks an webgpu compute shaders.
All the hype around AI and recent breakthroughs are mostly based on deep learning techniques.
These deep learning techniques are based on neural networks, a type of data structure loosely inspired by networks of biological neurons.
Learn how these neural networks and deep learning architectures can run in the web-browser using the WebGPU API.
| Special Effects Programming with WebGPU | |
The magic and power of special effects - learn about the diversity and algorithms for creating effects; simple 2d image filtering effecs through to more complex volumetric approaches (fire and smoke).
Special effect unlock the magic and imagination of possiblity ... they'll empower your visuals with dynamic elements like lighting, textures and motion, transforming your ordinary scenes into mouth watering masterpieces.
Anyone learning graphics or games - special effects is essential ... they elevate the impact across various levels (not just visually but also the movement and dynamics).
| Data Visualization with WebGPU | |
Data visualization with WebGPU is not just about generating charts (bar and line charts) - it's about understanding the WebGPU API and WGSL to create custom visualizations that are unique and specific.
Learning to develop
bespoke data visualizations that can do anything!
