xbdev - software development
Friday September 22, 2023
home | about | contact | Donations



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 you create powerful compute and graphics solutions. The ability to create beautiful graphics quickly and easily that are which is accessible to everyone with a modern browser is incredible. Also, it's not just for creating candy for the eyes, the API also lets you perform complex compute tasks using the massively parallel architecture of the GPU.

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 the those computational bytes out of the 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.

Other Upcoming WebGPU Texts

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
















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