The new WebGPU API unlocks massive performance gains in graphics and machine learning workloads. This article explores how WebGPU is an improvement over the current solution of WebGL, with a sneak peek at future developments. But first, let’s provide some context for why WebGPU was developed.
# Context on WebGPU
WebGL landed in Chrome in 2011. By allowing web applications to take advantage of GPUs, WebGL enables 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 APIs first developed in 1992. That's a long time ago! And you can imagine that GPU hardware has evolved significantly since that time.
To keep up with this evolution, a new breed of APIs were developed to more efficiently interact with modern GPU hardware. APIs like Direct3D 12, Metal, and Vulkan. These new APIs have supported new and demanding use cases for GPU programming such as the explosion in machine learning and advances in rendering algorithms. WebGPU is the successor to WebGL bringing the advancements of this new class of modern APIs to the Web.
WebGPU unlocks a lot of new GPU programming possibilities in the browser. It better reflects how modern GPU hardware works, while also laying a foundation for more advanced GPU capabilities in the future. The API has been baking in the W3C’s "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 6 years of work, we’re excited to announce that one of the biggest additions to the Web platform is finally available!
WebGPU is available today in Chrome113 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 WebGPU enables.
# Unlocking new GPU workloads for rendering
WebGPU features such as compute shaders enable new classes of algorithms to be ported on the GPU. For example, algorithms that can add more dynamic details to scenes, simulate physical phenomenons, and more! There are even workloads that previously could only be done in JavaScript that can now be moved to the GPU.
The following video shows the marching cubes algorithm being used to triangulate the surface of these metaballs. In the first 20 seconds of the video, the algorithm, when it's running in JavaScript, struggles to keep up with the page only running at 8 FPS resulting in janky animation. To keep it performant in JavaScript we would need to lower the level of details a lot.
It's a night and day difference when we move the same algorithm to a compute shader, which is seen in the video after 20 seconds. 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 the following 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, this uses the spectral data which is much more efficient to perform computations. Then each frame uses the Fourier Transform to convert from spectral data to the positional data that represents the height of the waves.
# Faster ML inference
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 computations, and carefully packing and unpacking tensor data in texture instead of more general purpose memory accesses.
Using WebGL in this way 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 access 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.
Compute shaders give 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 of the hardware tested the image was 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! Check out What’s new with Web ML in 2023? Google I/O session.
But WebGPU is not only about bringing GPU features to the web.
# Designed for JavaScript first
The features that enable these use cases have been available to platform-specific desktop and mobile 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 funneled 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 the GPU commands.
We heard that debugging WebGL applications was a pain, so WebGPU includes more flexible error handling mechanisms that don’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 renderer can execute all the JavaScript calls to render this art gallery scene about 500 times a second. Which is pretty good!
Their WebGPU renderer, however, enables a feature they call Snapshot Rendering. Built on top of WebGPUs render bundles, this feature allows the same scene to be submitted more than 10x 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 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 might 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.
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.
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. Finally, check out our other resources.
After years of development, the Chrome team ships WebGPU which allows high-performance 3D graphics and data-parallel computation on the web. The Chrome team is thrilled to announce that WebGPU is now available by default in Chrome 113, which is currently in the Beta channel.
Built on top of WebGPUs render bundles, this feature allows the same scene to be submitted more than 10x faster. This significantly reduced overhead allows WebGPU to render more complex scenes, while also allowing applications to do more with JavaScript in parallel.
WebGPU is the successor to WebGL, providing better compatibility with modern GPUs, support for general-purpose GPU computations, faster operations, and access to more advanced GPU features.
You can enable it at chrome://flags/#enable-unsafe-webgpu . The API is constantly changing and currently unsafe. As GPU sandboxing isn't implemented yet for the WebGPU API, it is possible to read GPU data for other processes! Don't browse the web with it enabled.
To force acceleration, enter chrome://flags in the search bar.Under Override software rendering list, set to Enabled, then select Relaunch. You can check whether hardware acceleration is turned on in Chrome by typing chrome://gpu into the address bar at the top of the browser.
Obviously, Chrome uses the GPU not only for video decoding but also for 2D rendering. Especially during video playback, but also with a regular website such as Boxtrolls the GPU is still used extensively.
"Whereas WebGL is mostly for drawing images but can be repurposed (with great effort) to do other kinds of computations, WebGPU has first-class support for performing general computations on the GPU," says the draft document explaining why WebGPU exists.
However, the graphics card processor (GPU) is usually much faster. With this option you allow Chrome to use the GPU for completing certain tasks to make it faster. For maximum performance make sure the option is turned on.
WebGPU does, which allows it to render graphics faster. “WebGPU is a new web graphics API that offers significant benefits such as greatly reduced JavaScript workload for the same graphics,” Google engineers François Beaufort and Corentin Wallez detailed in a blog post.
Open Google Chrome, type “chrome://gpu” in the address bar on the top, and then press Enter. After you execute the command, Chrome should display a list of various data about the software. For hardware acceleration, you should only pay attention to the Graphics Feature Status section.
Launch the Chrome web browser on Android. You can use desktop mode for any website you want to view. Tap on the 3 vertical dots for the menu. The desktop site can be enabled by selecting the checkbox.
There is no flag to enable developer mode. But you can force developer mode to be enabled for new Chrome profiles by setting extensions. ui. developer_mode to true in the master preference file.
The Chrome GPU process is a hardware acceleration process that is used by Chrome to handle graphics and visual processing. This process is necessary for Chrome to display web pages correctly, but it can sometimes use a lot of memory, particularly on older computers or if you have a lot of tabs and windows open.
As everyone's computer is slightly different, the issue could lie in the GPU or driver associated with it. If you suspect hardware acceleration is the culprit, the best thing to do is to disable it and see if that fixes the problem.
Using hardware acceleration in Google Chrome allows you to consume media and browse through your daily routine much smoother. That's another thing: if it starts causing freezing and crashing issues and you may need to disable hardware acceleration.
The advantage to GPU Rendering is two fold. GPU Rendering takes almost no processing power from your workstation, meaning you will have greater performance for other tasks while rendering. GPU Rendering is usually more tuned for faster rendering.
However, as a general guide, GPU rendering is best if you want a faster render time or a more realistic image. CPU rendering is better for larger scenes, more accurate results, and access to more features and plugins. To save money on hardware, GPU rendering is the way to go.
Although Nvidia has been in business for over 20 years now, there's really only one GPU the company has ever put out that was truly terrible on a technological level, and it's the GTX 480.
Yes, WebGL is indeed a potential security risk, though the magnitude of the risk is hard to assess and open to debate. There are some tricky issues here.
In version 2021.2, Unity marked support for the WebGL 1 Graphics API as deprecated. In Unity 2021.2, there are no changes in behavior and Unity still includes the WebGL 1 Graphics API if you enable the Auto Graphics API Player Setting.
A WebGPU implementation translates the workloads issued by the user into API commands specific to the target platform. Native APIs specify the valid usage for the commands (for example, see vkCreateDescriptorSetLayout) and generally don't guarantee any outcome if the valid usage rules are not followed.
From the upper-right of your Chrome browser, click the three dots icon.Select Settings.Click Advanced and select System.Enable Use hardware acceleration when available.
While RAM will help the Web browser run, it won't have a direct impact on Internet speed. Whether or not an upgrade in RAM will make the browser work better depends on how much memory is already in the system. If you already have more than enough memory to run the browser, an upgrade will have little to no effect.
While WebGL was a thin wrapper over OpenGL, WebGPU is an abstraction that can drive Vulkan, Metal, or DirectX 12 — all popular ways to talk to a GPU, depending on your operating system. The post is long and covers topics like shaders, pipelines, and staging buffers.
No, WebGPU will be easier to use than WebGL, because it doesn't have the global ... | Hacker News. No, WebGPU will be easier to use than WebGL, because it doesn't have the global state. Global state is the worst thing about OpenGL and requires a lot of code to get it under control.
Wgpu is a Rust implementation of the WebGPU API spec . WebGPU is a specification published by the GPU for the Web Community Group. It aims to allow web code access to GPU functions in a safe and reliable manner.
Without hardware acceleration, most of these pages will stutter and freeze. Once you turn hardware acceleration on, you can enjoy digital fireworks, play around with a blob, or try solving a 3D Rubik's cube. Letting your CPU process and perform all tasks by itself greatly slows down your computer.
Right click on the desktop and select [NVIDIA Control Panel]. Select [View] or [Desktop] (the option varies by driver version) in the tool bar then check [Display GPU Activity Icon in Notification Area]. In Windows taskbar, mouse over the "GPU Activity" icon to check the list.
In your PC's Start menu, type "Device Manager," and press Enter to launch the Control Panel.Click the drop-down arrow next to Display adapters, and it should list your GPU right there.
WebAssembly on Chrome is fully supported on 57-114, partially supported on None of the versions, and not supported on 4-56 Chrome versions. WebAssembly on Safari is fully supported on 11-16.4, partially supported on None of the versions, and not supported on 3.2-10.1 Safari versions.
Google Chrome is a very customizable browser, allowing you to to change many of your settings to your liking. One of the options that you can choose to enable is WebGL, or Web Graphics Library. WebGL is a JavaScript API that allows you to render 3D and 2D computer within your browser.
WebGL 1.0 is supported in the stable releases of most major browsers on both desktop and mobile platforms. Chrome, Firefox, Internet Explorer, Opera, and Safari are all known to have good WebGL support on both desktop and mobile browsers.
Go to chrome://settings in your address bar, or click the three dots in the upper-right corner of the browser window and select Settings. Scroll to the bottom of the page and click Advanced. In the System section, toggle Use hardware acceleration when available to the ON position (the button should be blue).
On Google Chrome, JavaScript is enabled by default, but you can verify if it works through the Settings menu. To reveal the Settings menu, simply click on three tiny black dots at the top-right corner of your Chrome window. Next, click on the Settings option to access a search box labeled Search settings.
Google originally used WebKit for its Chrome browser but eventually forked it to create the Blink engine. All Chromium-based browsers use Blink, as do applications built with CEF, Electron, or any other framework that embeds Chromium.
Your computer hardware needs to have a minimum of 2 GB system memory and a video graphics card that supports WebGL. It is recommended that you have at least 4 GB of system memory. Your hardware should have a nonmobile graphics card with at least 512 MB of video memory.
Created by KhronosGroup, the WebGL technology is a direct descendant of OpenGL ES, used for 3D visualizations in games and VR. This innovative technology is currently utilized in 3D web design, interactive games, physics simulations, data visualization, and artwork.
The WebGL specification defines security measures for every possible kind of out-of-range indexing operation in the OpenGL ES API, and the conformance suite guarantees secure operation. The security measures preventing out-of-range memory accesses may, in some cases, reduce overall performance.
WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 2D and 3D rendering in an HTML canvas in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and shader code (GLSL) that is executed on a computer's Graphics Processing Unit (GPU).
Support for WebGL is present in later versions of Firefox, Google Chrome, Safari , and Microsoft Edge; however, the user's device must also have hardware that supports these features.
From the upper-right of your Chrome browser, click the three dots icon.Select Settings.Click Advanced and select System.Enable Use hardware acceleration when available.
WebGL can be a threat to your device security and online anonymity. How to be protected? You can disable WebGL manually in the browser Settings, or with a special plugins (e.g., "Disable WebGL" for Chrome).
Address: Suite 153 582 Lubowitz Walks, Port Alfredoborough, IN 72879-2838
Phone: +128413562823324
Job: IT Strategist
Hobby: Video gaming, Basketball, Web surfing, Book restoration, Jogging, Shooting, Fishing
Introduction: My name is Rev. Porsche Oberbrunner, I am a zany, graceful, talented, witty, determined, shiny, enchanting person who loves writing and wants to share my knowledge and understanding with you.
We notice you're using an ad blocker
Without advertising income, we can't keep making this site awesome for you.
