xbdev - software development
Sunday June 16, 2024
Home | Contact | Support | WebGPU WebGPU API .. taking web-based compute and graphics to the next level!


WebGPU API .. taking web-based compute and graphics to the next level!


WebGPU API (Graphics and Compute)


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).

Unlock your web-browser
Unlock your web-browser's potential using the WebGPU API!

About the WebGPU Coffee Series Book (In A Nutshell)

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

Mix Extended WebGPU Examples/Projects

Miscellaneous examples and test cases using the WebGPU API (just for fun).

Generated 3D Sierpinski Model (Fractal) Link
Cube Map Example (Reflections) Link
Fractal Cube Link
SPH Simulation (Smoothed Particle Hydrodynamics Simulation) Link
Screen Space Ambient Occlusion (SSAO) Link
Toon Shader Example Link
.obj model loader/viewer (simplified) Link
Storing and Using the Depth Buffer (Texture or Directly) Link
Shadow Maps Link
Depth of Field Link
Grid (Plane) and Mouse Movement Link
Image Filter (Kernel)/Blurring Link
Metaballs Link
Pixelation (Post Processing Effect) Link
Swirl (Post Processing Effect) Link
Color Bars Link
Cell Noise Link
Clouds Link
Clydescope Link
Water Drops Link
Etha Link
Fire/Flame Link
Kleinian Link
Mandelbrot Link
Metaballs 3D Link
Sierpinski 2D Link
Sierpinski 3D Link
Sinusoid Link
Wireframe Link
Parallax Link
Grass Link

WebGPU Resources

Additional WebGPU Resources/References

WebGPU CheatSheet webgpu-cheatsheet.pdf
WebGPU Overview webgpu-overview.pdf
WebGPU QuickRef webgpu-quick.pdf
WebGPU Basics webgpu-basics.pdf

WebGPU Lab - Learning Resource/Test Playground

WebGPULab is a free tool that allows you to edit, test, execute and debug WebGPU code within your browser. WebGPULab is a great tool for testing and learning about WebGPU.

Try WebGPU Lab (Online Playground for testing and experimenting with simple WebGPU projects/learning resource) [LINK].

About the WebGPU API An Introduction Book

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

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).


Other Upcoming WebGPU Texts

WebGPU by Example: Fractals, Image Effects, Ray-Tracing, Procedural Geometry, 2D/3D, Particles, Simulations graphics and animations using the webgpu api 12 week course kenwright learn webgpu api kenwright programming compute and graphics applications with html5 and webgpu api kenwright real-time 3d graphics with webgpu kenwright webgpu api develompent a quick start guide kenwright webgpu by example 2022 kenwright webgpu gems kenwright webgpu interactive compute and graphics visualization cookbook kenwright wgsl webgpu shading language cookbook kenwright wgsl webgpugems shading language cookbook kenwright

Advert (Support Website)

Copyright (c) 2002-2024 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.