What Can you Do with WebGPU?

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.

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.