Get more 5-minute insights about dev trends every 3-4 weeks. To subscribe you need to code your way there via the home page (or the easy way here)...

Thank you for your support! I just launched Unzip on Product Hunt!

WebGPU

TL;DR:

• Problem: WebGL (JS API for rendering graphics in browsers) is outdated, not performant, and lacks low-level API access.
• Solution: Use modern graphic APIs built from the ground up with performance in mind.
• In Sum: WebGPU is still new, but it shows great promise for the future of complex GPU usage on the web.

How does it work? 💡

While WebGL was built as a thin wrapper over OpenGL, WebGPU is an abstraction for modern graphics APIs such as Direct3D 12, Metal, and Vulkan designed to run on the user’s graphics processing unit (GPU) directly from the browser.

WebGPU was first published in mid-2021 (super new!), so it isn’t fully supported on browsers (also shows how you can enable it) yet, but I think it’s good to know it exists. To start working with WebGPU, follow these steps:

1. Enable WebGPU on your browser.
2. Check for support:

if ("gpu" in navigator) {
  // WebGPU is supported! 🎉
}

3. Request an adapter (GPU type: high performance or low-energy for example) and device (logical) to operate on.
4. Now you can interact with the GPU using Shaders (a user-defined program designed to run on the GPU using WGSL), Pipelines (either rendering pixels or computing numbers), Buffers (memory) using Commands, and Bind Group Layouts (exchange data) and many other abstractions (see Surma’s great explanation).

Also, check out web.dev's tutorial on compute shaders. It’s awesome.

Who is this for? ✅

• Game developers
• Graphics intensive applications
• GPU-centric calculations (AI/ML)

Why? 🤔

• Modern low-level APIs: With WebGL out of the window, you can now harness the cutting-edge tech that comes with modern tooling like Vulkan, exposing low-level APIs that were not exposed in the past → leading to substantial performance gains and low-level access. Compute shaders are a novel concept we can now use with WebGPU.
• Parallel-intensive applications: Did you know that Figma uses WebGL 🤯 (and not webGPU because of compatibility) under the hood? Any computation that can be parallelized might be relevant for WebGPU - Simulations, Signal processing, Image processing, ML, and many more. Also, keep in mind that Access to the GPU results in faster parallel computations vs the CPU.

Why not? 🙅

• Not production ready: It is still a W3C working draft in most browsers. But it can be enabled with a browser setting in most browsers.
• Not beginner-friendly: WebGPU assumes you have intimate knowledge of low-level GPU operations and terms like shaders (see extra).

Tools & players 🛠️

• Babylon.js - A rendering engine for the web using WebGPU with a WebGL fallback.
• GPU.js - A JavaScript Acceleration library for GPGPU (see Demos for a bit of inspiration). Edit: Not supported yet.
• wgpu - Write WebGPU using Rust and compile natively or to browsers with WebAssembly.
• Dawn - A C++ WebGPU implementation.
• WGSL for VSCode - Syntax highlighting for WebGPU's WGSL.
• (Update) Use.GPU - a set of declarative, reactive WebGPU components.
• (Update) shadeup.dev - an easier way to interact with WebGPU.

Forecast 🧞

• Privacy-centric machine learning: Think about use cases that need to run highly sensitive ML computations locally (personal health, personal finance, home automation…).
• User Interface: UI libraries harnessing the power of WebGPU to create native-like interfaces (see this HN thread for an example).
• Desktop → Web: Everything seems to be moving to the web; I can see how many desktop-related headaches (like installing software) will become irrelevant over time. While services migrate to be completely web-based (will Steam transition to the browser?), real-time video/photo editing moves to the web - making it more accessible to a wider audience.

• Fringe thoughts: Crypto mining and browser fingerprinting might be more problematic → Could lead to a browser permission prompt to allow GPU capabilities (like you do for your camera).
• Game Engine Usage: It seems like Unity already plans on it.
• Better browser building blocks: Might there be new browsers or old rehauls of how browsers render elements, like this HN comment suggests?

Examples ⚗️

Try it out yourself?

• Some WebGPU examples you can try now.
• A fully-fledged space game with babylon.js.
• WGSL sandbox (shader language for WebGPU).

Extra ✨

Additional information that is related to the subject matter:

• An introductory video or longer (unity-related) video about Shaders, 3D terms you might want to know.
• The history of WebGL and WebGPU (2021).
• A comparison of Graphic APIs by @alainxyz.
• Surma’s great WebGPU explanation.
• Shadertoy.com lets you play with shaders in your browser.
• Three.js is also implementing WebGPU.
• The official W3 WebGPU repo.
• Awesome-webgpu.
• (Update) Rendering glTF models - a great starting point into the WebGPU world.
• (Update) webgpufundamentals.org - A nice resource about the graphical aspects of WebGPU.
• (Update) eliemichel.github.io/LearnWebGPU - A nice resource to learn WebGPU.

Thanks 🙏

I wanted to thank @TomGranot (the best growth machine I know), who for some unexplainable reason continues to proofread all my newsletter issues, and still considers me a friend.

EOF

Again, if you reached this part, it would make my day to get a comment or an upvote on my Product Hunt launch 🤩