JS GameDev Summit

JS GameDev Summit 2022

Optimizing HTML5 Games: 10 Years of Learnings

Will Eastcott

Making Awesome Games with LittleJS

Frank Force

Unreal Engine in WebAssembly/WebGPU

Alex St. Louis

Extending Unity WebGL With Javascript

Brendan Duncan

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, 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 GPU. It's basically the next step of the successor to WebGL. So kind of at a glance, the big difference is that WebGPU gives you more direct access to the GPU. So unlike WebGL, WebGL was more of like 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 DirectX12 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 use, 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 ray 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. 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, WebGPU will be enabled for those users on your URL or domain, so they don't have to flip a flag. And it'll 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, like GPGPU, general computation on a GPU, instead of before, if you wanted to run any computation on, you know, on the GPU on the web, you'd have to run it through a fragment shader and you 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 threading 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 frag shader, you get 10 FPS on this scene and with the compute, you get like 300 FPS. That's a huge, obviously, difference. And basically what they're doing here is they're skipping the vertex and frag 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 frag shader. And one cool kind of technique that you can do here that you couldn't otherwise do, like with an aggregate frag shader, is because they have a lot of points that render to the same point, a lot of points that render to the same pixel, instead of just showing the most closest one to the camera, they average the 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 frag shader. 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 of 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 how much control we have once we build something like this. Here and 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 compute rasterizer we control the 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 a compute pipeline, because we have full control over it, we can kind of just see that. And more commonly you'll have like particle simulation, so again, this is something today maybe you'll do on the CPU, or if you do it on GPUs through a frag 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, not supported today, but in the future, something like support for ray tracing may come to the browser, which would be huge. Thank you so much. And here's links and resources. The big one 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. 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.


Omar Shehata

#game engine