 Hi, everyone. I'm Corentin, the WebGPU leader at Google. Today, with my friend Brendan, we're going to show you how the new WebGPU API unlocks massive performance gains in graphics and machine learning workloads. But first, let's provide some context on why WebGPU was developed. In 2011, WebGL came out, which allows web applications to take advantage of GPUs. WebGL has enabled amazing experiences on the web from Google Earth to interactive music videos to 3D real estate walkthroughs and more. WebGL was based on the OpenGL family of API first developed in 1992. And that's a long time ago. I barely knew how to walk back then. And you can imagine that GPU hardware has evolved significantly since that time. So to keep up with the evolution, there was a new breed of native APIs that have been developed to more efficiently interact with modern GPUs, APIs like Direct3D12, Metal, and Vulkan. These new APIs have supported new and demanding use cases for GPU programming, like the explosion in machine learning, and even more advances in rendering algorithms. WebGPU is the successor to WebGL, which brings the advancement of this new class of modern APIs to the web. WebGPU unlocks a lot of new GPU programming possibilities in the browser. It both better reflects how modern GPU hardware works. And it lays a foundation on which we can build even more advanced GPU capabilities in the future. The API has been baking in the W3C GPU for the web group since 2017, and is a collaboration between many companies such as Apple, Google, Mozilla, Microsoft, and Intel. And now, after six years of hard work, we're excited to announce that one of the biggest additions to the web platform is finally available. WebGPU is available today in Chrome 113 on Chrome OS, Mac OS, and Windows, with other platforms coming soon. A huge thank you to other Chrome contributors and Intel in particular who helped make this happen. Now, let's take a look at some of the exciting use cases that WebGPU enables. WebGPU features such as computators enable a new class of algorithms to be ported on the GPU. For example, algorithms that can add more dynamic details to the scene simulate physical phenomenons and more. And there are even workloads that previously could only be done in JavaScript that can now be moved to the GPU. This demonstration shows the marching cube algorithm being used to triangulate the surface of these metables. The algorithm, when it's running in JavaScript, struggles to keep up with the page only running at 8 FPS, which results in janky animation. To keep it performance, we would have to lower the level of details a lot. It's night and day difference when we move the same algorithm to a computer. The performance improves dramatically with the page now running at a smooth 60 FPS. And there's still a lot of performance headroom for other effects. In addition, the page's main JavaScript loop is completely freed up for other tasks, ensuring that interactions with the page stay responsive. WebGPU also enables complex visual effects that were not practical before. In this example created in the popular Babylon.js library, the ocean surface is being simulated entirely on the GPU. The realistic dynamics are created from many independent waves being added to each other, but simulating each wave directly would be too expensive. That's why the demo uses an advanced algorithm called Fast Fourier Transform. Instead of representing all the waves as complex positional data, we can work with the spectral data, which is much more efficient to perform computations. Then each frame, we use the Fourier Transform to convert from spectral data to the positional data that represents the height of the waves. WebGPU is also useful to accelerate machine learning, which has become a major use of GPUs in recent years. For a long time creative developers have been repurposing WebGL's rendering API to perform non-rendering operations, such as machine learning computations. However, this requires drawing the pixels of triangles as a way to initiate the computation and carefully packing and unpacking tensor data in textures instead of more general purpose memory accesses. It requires developers to awkwardly conform their code to the expectations of an API designed only for drawing. Combined with the lack of basic features like shared memory accesses between computations, this lead to duplicate work and sub-optimal performance. Compute shaders are WebGPU's primary new feature and remove these pain points. Compute shaders offer a more flexible programming model that takes advantage of the GPU's massively parallel nature while not being constrained by the strict structure of rendering operations. This gives more opportunity for sharing data and computation results within groups of shader work for better efficiency. This can lead to significant gains over previous attempts to use WebGL for the same purpose. As an example of the efficiency gains this can bring, an initial port of an image diffusion model in TensorFlow.js shows a 3x performance gain on a variety of hardware when moved from WebGL to WebGPU. On some hardware we tested, the image can be rendered in under 10 seconds and because this was an early port, we believe there are even more improvements possible in both WebGPU and TensorFlow.js. If you're interested in advances in web machine learning and TensorFlow.js, be sure to check out the, what's new with WebML in 2023 session. You'll find the link in the description. But WebGPU is not about just bringing GPU features to the web. Hey, I'm Brandon, one of the specification editors for WebGPU. The features that enable these use cases have been available to native developers for a while and it's been our challenge to expose them in a way that feels like a natural part of the web platform. WebGPU was developed with the benefit of hindsight from over a decade of developers doing amazing work with WebGL. We were able to take the problems they encountered, the bottlenecks they hit, and the issues they raised and funnel all of that feedback into this new API. We saw that WebGL's global state model made creating robust, composable libraries and applications difficult and fragile. So WebGPU dramatically reduces the amount of state that developers need to keep track of while sending commands to the GPU. We heard that debugging WebGL applications was a pain. So WebGPU includes a more flexible error handling mechanism that doesn't tank your performance. And we've gone out of our way to ensure that every message you get back from the API is easy to understand and actionable. We also saw that frequently the overhead of making too many JavaScript calls was a bottleneck for complex WebGL applications. As a result, the WebGPU API is less chatty so you can accomplish more with fewer function calls. We focus on performing heavy weight validation up front, keeping the critical draw loop as lean as possible. And we offer new APIs like render bundles, which allow you to record large numbers of drawing commands in advance and replay them with a single call. To demonstrate what a dramatic difference a feature like render bundles can make, here's another demo from Babylon.js. Their WebGL 2 renderer can execute all of the JavaScript calls to render this art gallery scene at about 500 times a second, which is pretty good. Their WebGPU renderer, however, enables a feature they call snapshot rendering. Built on top of WebGPU's render bundles, this feature allows the same scene to be submitted more than 10 times faster. This significantly reduced overhead allows WebGPU to render more complex scenes while also allowing applications to do more with JavaScript in parallel. Modern graphics APIs have a reputation for complexity, trading simplicity for extreme optimization opportunities. WebGPU, on the other hand, is focused on cross-platform compatibility, handling traditionally difficult topics like resource synchronization automatically in most cases. This has the happy side effect. The WebGPU is easy to learn and use. It relies on existing features of the web platform for things like image and video loading and leans into well-known JavaScript patterns like promises for asynchronous operations. This helped keep the amount of boilerplate code needed to a minimum. You can get your first triangle on screen in under 50 lines of code. It's exciting to see all the new possibilities that WebGPU brings to the web platform, and we're looking forward to seeing all of the cool new use cases that you will find for WebGPU. A vibrant ecosystem of libraries and frameworks has been built around WebGL, and that same ecosystem is eager to embrace WebGPU. Support for WebGPU is in progress or already complete in many popular JavaScript WebGL libraries. And in some cases, taking advantage of the benefits of WebGPU may be as simple as changing a single flag. And this first release in Chrome 113 is just a start. While our initial release is for Windows, Chrome OS and macOS, we plan to bring WebGPU to the remaining platforms like Android and Linux in the near future. And it's not just the Chrome team that's been working on launching WebGPU. Implementations are also in progress in Firefox and WebKit as well, additionally. New features are already being designed at the W3C that can be exposed when available in hardware. For example, in Chrome, we plan to enable support for 16-bit floating point numbers and shaders and the DP4 class of instructions soon. These will enable even more machine learning performance improvements. WebGPU is an extensive API that unlocks amazing performance if you invest in it. Today, we could only cover its benefits at a high level, but if you'd like to get a hands-on start with WebGPU, please check out our introductory code lab, your first WebGPU app, where you'll build a GPU version of the classic Conway's Game of Life. This code lab will walk you through the process step by step, so you can try it out, even if it's your first time doing GPU development. A link to the code lab can be found in the description. The WebGPU samples are also a good place to get a feel for the API. They range from the traditional hello triangle to more complete rendering and compute pipelines, demonstrating a variety of techniques. And by the way, as some of our more observant viewers may have noticed, these samples aren't running in Chrome. It's actually a pre-release version of WebGPU support in Firefox Nightly that our friends at Mozilla have been hard at work on. We were able to get these samples running in their implementation with only a few minor modifications and expect that even those won't be necessary soon. Finally, the WebGPU article on developers.chrome.com linked in the description, contains all of the links from this talk and pointers to tutorials, MDN documentation, samples, and more. So please try out WebGPU.