xbdev - software development
Tuesday November 30, 2021
home | about | contact | Donations



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


WebGPU API (Coffee Break Series)


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 book (in a nutshell)
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

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


 Visitor: 9534626
{ }
Copyright (c) 2002-2020 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.