[MUSIC PLAYING] CORENTIN WALLEZ: Hi, everyone. I'm Corentin, the WebGPU lead at Google. Today, with my friend Brandon, 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 ChromeOS, macOS, and
Windows, with other platforms coming soon. A huge thank you to other
Chromium 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 compute shaders, 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 metal balls. The algorithm, when it's
running in JavaScript, struggles to keep up
with the page only running at 8fps, which
results in janky animation.

To keep it performant,
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 compute shader. 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
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 leads to duplicate work
and suboptimal 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
the 3x performance gain on the 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
Web ML in 2023 session.

You'll find the link
in the description. But WebGPU is not about
just bringing GPU features to the web. [MUSIC PLAYING] BRANDON JONES: 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
heavyweight 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 render 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 render,
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 that 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 helps 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 web 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, ChromeOS, 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
construction 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 codelab, Your first WebGPU
App, where you'll build a GPU version of the
classic Conway's Game of Life. This codelab 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 codelab 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. [MUSIC PLAYING]

Introducing WebGPU: Unlocking modern GPU access for JavaScript

Helping you build, grow and innovate on the web.

Chrome will disable third-party cookies for 1% of users from the start of 2024. Test your site now for any breakages → https://goo.gle/3NielGG
