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!

WebGPU Graphics API in 20 Minutes

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 API An Introduction

(DRAFT VERSION)

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

• Memory Array Alignment Pains

• Mesh to Spheres (Sphere Hierarchies)

• Minkowski Collision Detection (Minkowski Difference)

• Fluid Simulation (Computational Fluid Dynamics/2D)

• Ocean Water (with Floating Object)

• Wiggly Worms (Animated Worm Texture Pattern)

• Generating Sexy Sunset (Realistic and Animated)

• Flight of the Navigator Clouds (Flying)

• Noise - More Than Just Random Pixels

• Full List of Noise Functions

• Classify Noise Functins into Categories

• Generating Procedural 2D Textures (Wood/Stones/Plasma/...)

• Morph Targets (Horse Animation)

• Skinning Michelle (Debugging the Glitch)

• Minecraft-Theme Tunnel (Infinite Pixel Tunnel)

• Signed Distance Functions (SDF) Basics (2D)

• WebGPU Timing Feature

• Cellular Noise

• Grass Ray-Marching (Generating Lots and Lots of Grass Blades)

• Army Marching Spheres (and other Shapes)

• SDF Normals (More Than One Way)

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!

LearnWebGPU Quick Start

A quick start text for WebGPU - complete set of tutorials and explanations - going from the history of WebGPU (why it exists), through to setting up and getting started (basic hello world examples) - then onto lots of practical examples to stretch your muscles and get you on the road to becoming a WebGPU master!

101 WebGPU & WGSL Projects

Want to push the boat out with lots of projects to keep you busy?

This will keep you busy - with a diverse range of projects from hello world through to ray-tracing... helping you get to grips with WebGPU while also building up your porfolio.