What Can you Do with WebGPU?

Rate this content
Bookmark

One of the major new features WebGPU introduces is compute shaders. I'll cover the basics of how they work and go through some applications that weren't possible before on the web. Examples include Unreal Engine 5's compute-based rendering techniques, and complex particle simulations.

9 min
07 Apr, 2022

AI Generated Video Summary

WebGPU is an upcoming web API that provides low-level access to the GPU, offering better performance and enabling new rendering techniques. It allows for the use of compute shaders, which provide more control over memory synchronization and threading, and can be used for general computation on a GPU. WebGPU opens up possibilities for unique effects in games and promises future support for ray tracing in browsers.

1. Introduction to WebGPU

Short description:

WebGPU is an upcoming web API for low-level access to the GPU, providing more direct access and better performance. It allows new techniques and makes applications more future-proof. Currently, it can be enabled in Chrome or Firefox behind a flag, and will be widely available in Chrome in September. Babylon, 3GS, and Play Canvas are some of the engines that support WebGPU. The most significant new feature is Compute Shaders, which allow general computation on a GPU.

Hi everyone, and thanks for joining me on this What can you do with WebGPU session. My name is Omar, I work as a graphics engineer at Snapchat. I'm currently based in Ithaca, New York, and I used to make Flash games back in the day.

So I want to talk about WebGPU. What it is, what its current state is, and when it will be widely available. And I also want to show a few of the things that are new in WebGPU that you can do with it that you couldn't do today. And I want to share a bunch of links and resources to help you point you in the right direction. And I'll share a link to these slides, because they have a lot of links. So you'll have those available.

So what is WebGPU? It's an upcoming web API for low-level access to the GPU. It's basically the next step of the successor to WebGL. So at a glance, the big difference is that WebGPU gives you more direct access to the GPU. So unlike WebGL, WebGL was more of an abstraction around OpenGL. It wasn't so much about how the hardware works. WebGPU is more of a modern graphics API. So similar to how Vulkan, Metal and DirectX 12 work, they give you control over what the hardware can do more directly. And so generally what that means for us building applications and games with it, is it means better performance. So you can also use new techniques that otherwise weren't available, which I'll talk a bit more about this. It also kind of makes it more future proof because it means as the hardware does more things like great tracing, those things can be exposed directly instead of having to create kind of a whole new API layer wrapper around that for developers to use. So this is very exciting. And so the current state is you can use it. You can enable it in Chrome or Firefox behind a flag. It can also be used through an origin trial, which means you sign up for a token and then your users can – GP will be enabled for those users on your URL or domain so they don't have to flip a flag and it will be widely available for everyone in Chrome in September. Some of the engines that support it, Babylon was the most mature that I've seen. And all of these link to pages that explain how to turn on WebGPU in these engines. 3GS, I think it has a lot of support, but it's still not officially released as part of it, but you can still use it today. And then Play Canvas is currently in development for WebGPU support. And so Compute Shaders are kind of the most significant new feature. And what that means is you have the ability to essentially write like general – GPU, general computation on a GPU. Instead of before, if you wanted to run any computation on the GPU on the web, you'd have to run it through a fragment shader and you'd have to run the results on a texture.

2. Benefits and Possibilities of WebGPU

Short description:

WebGPU offers better performance and enables new rendering techniques. It allows rendering point clouds faster using compute shaders and skipping the traditional pipeline. Compute shaders provide more control over memory synchronization and threading. The compute rasterizer approach is faster for writing small elements. WebGPU opens up possibilities for unique effects in games, such as deformable objects in real-time. It also promises future support for ray tracing in browsers. Check out the WebGPU official GitHub forum for more information and resources.

And then something else would have to read that texture. And so that was kind of a hassle. So this is just easier, but also it could be much faster because doing this gives you much more control over memory synchronization and the threading in here.

So one example here is rendering point clouds. So point clouds are just instead of a 3D mesh made of triangles, a point cloud is just made of millions or sometimes billions of points. And this is a paper that's talking about getting significantly faster rendering using a compute shader to render instead of traditional pipeline. So you can see in the bottom left here, like with the Vertex and FractShader, you get 10 FPS on this scene and with the compute you get like 300 FPS. That's a huge difference. And basically what they're doing here is they're skipping the Vertex and Fract pipeline. Their compute shader takes in the vertices as a buffer and then it writes the pixels to another, the color data, to a buffer and then that then gets rendered to the screen with a FractShader. And one cool technique that you can do here that you couldn't otherwise do, like with an Agilent FractShader, is because they have a lot of points that render to the same pixel, instead of just showing the closest one to the camera, they average with colors to just make it... In a way it kind of shows you what's inside if you have a complex point cloud that describes a volume. And so they kind of average all the points. And this is something that we can do because we have full control over how the threads synchronize when they're all writing to the same pixel, but not something we have a lot of control over in a FractShader. And the other reason it's really fast is because generally, if you're writing very small things, like points or very small quads, a Compute Rasterizer approach is going to be much faster. And this is actually something that Unreal Engine 5's Nanite uses to speed up rendering, like really tiny triangles. And I also wrote this, how to build a Compute Rasterizer, WebGPU, if you're curious how this works. And it's a good way to get started with learning both WebGPU, but also with this technique, how it works and why it can be faster.

There's a few kind of teaser here videos just to show you, like, how much control we have once we build something like this. Here and then it may not be very clear on the screen here, but what I'm doing is I'm changing between smooth shading and flat shading on individual triangles as the model moves back and forth. Which normally this is something you can change on the whole model, but because in this computer asterisk, we control a full pipeline, so I can change individual triangles from smooth to flat dynamically, or one cool effect you could even have it. So as you mouse over it, or as you touch different parts of the model, they turn from smooth to flat, which creates like a really unique effect, I think. And this is another one kind of visualizing. The order in which triangles are drawn, which again isn't really something you can normally do, but with the compute pipeline, because we have full control over it, we can kind of just see that. And more commonly you'll have like particle simulations, so again this is something today maybe you'll do on the CPU, or if you do it on GPUs through a Frac shader. But here you can do it on a compute shader directly, which will be easier, but potentially faster as well. And finally, this one is really exciting because there's a lot of games that use these kind of techniques, not just for speed but also to create very unique effects. Like here, this is a game called Claybook, which everything is rendered assigned distance fields, which makes everything deformable in real-time, which is really cool and very unique. And as of today you can't really do this on the web, but with WebGPU, stuff like this will be possible, which I'm very excited about. And there's a link to the talk where they talk about Claybook and how it was made using these techniques here. Not using WebGPU, but the general compute technique. So, to summarize, what WebGPU promises is mainly better performance, but also the ability to kind of explore new rendering techniques and maybe in the future, not today, but not supported today, but in the future, something like support for ray tracing may come to the browser, which will be huge.

Thank you so much, and here's links and resources, the big one that I want to point out is the WebGPU official GitHub forum. This is where they write the specification, and the developers working on it are very nice by answering questions, and they're available to answer things. So it's a good place to learn, and I've learned a lot from that, and I've also linked the tutorial I wrote about creating a compute rasterizer here. Thank you so much.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
WorkshopFree
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)