3 posts tagged with "webgpu"

It's here! 🥳 Today, we're excited to announce that WebGPU support has officially arrived in the PlayCanvas Editor.

WebGPU on the Rise​

Since its inception back in 2010, PlayCanvas has been layered on top of WebGL. In 2017, we were proud to launch support for WebGL 2.0 in partnership with our friends at Mozilla. April 2023 marked the beginning of a new era for web graphics when Google enabled WebGPU by default in Chrome 113. Since then, WebGPU adoption has exploded and today, Web3D Survey reports that 62.19% of end users can now run WebGPU. With Firefox and Safari due to launch their WebGPU support in the not-too-distant future, expect this number to rise dramatically in 2024.

Why WebGPU Matters​

If you enable WebGPU for your PlayCanvas project, you may not notice much difference to begin with. In fact, we have put a great deal of effort into ensuring your WebGL projects look identical under WebGPU. But over time, there is are a great deal of opportunities to achieve performance improvements due to WebGPU's reduced driver overhead.

Another key feature unique to WebGPU is support for Compute Shaders which allow for general computation on the GPU. Support for Compute Shaders landed in Engine v1.70.0. Here you can see Computer Shaders in action simulating 1 million particles on the GPU:

Click here to run it for yourself in a WebGPU-enabled browser (i.e. Chrome or Edge).

In short, WebGPU represents the future for PlayCanvas and you can expect some incredible advances in performance and functionality over the coming months.

Getting Started with WebGPU​

WebGPU support in PlayCanvas is still considered 'Beta'. There are still some unimplemented features (for example, the run-time lightmapper is still not supported). Therefore, you have to currently 'opt in' to WebGPU support. To do this, open your Project's Settings in the Inspector and expand the RENDERING section. Then update Graphics Devices to include WebGPU (beta).

Once we are satisfied WebGPU support has matured enough, it will become the default.

Your Feedback is Important​

Since WebGPU support is new, we rely on the community for feedback. What works and what doesn't? Please submit an issue if you discover any problems or kick off a new thread on the forum if you want to discuss WebGPU support in more detail. We want to hear what your opinions! 👂

We're thrilled to announce the launch of the open source glTF Viewer 4.0, an update that supercharges your 3D model viewing experience with powerful features and support for the latest web technologies!

"Cyber Samurai" by KhoaMinh is licensed under CC BY 4.0.

TRY IT NOW

This new release is chock-full with enhancements aimed at providing more realistic, insightful, and versatile viewing options for your glTF files. Let's dive into the headline features of glTF Viewer 4.0.

New WebGPU Renderer​

Topping the list of today's updates is support for WebGPU! WebGPU heralds a new era in graphics and compute capabilities, offering enhanced performance and efficiency. Users can now select WebGPU as their default renderer, and don't worry if your platform doesn't support it yet - the viewer gracefully falls back to WebGL 2, and subsequently WebGL 1, depending on API availability. Note that WebGPU support is considered beta for the moment and you'll need to proactively enable it and refresh the viewer to check it out:

Also make sure you're running the viewer in a browser that supports WebGPU. At time of writing, this means Google Chrome!

Enhanced WebXR AR Mode​

Take your 3D models into the real world with our revamped WebXR Augmented Reality (AR) mode! Available currently on Android devices, this enhanced AR mode lets you view any model in your actual environment, complete with intuitive new controls that allow you to accurately position and rotate objects in the real world. Let's hope Apple decides to roll out WebXR support on iOS soon! 🙏

Frame Selected Node​

Navigating large scenes can be a pain - Viewer 4.0 addresses this by allowing you to select a node in the scene via the hierarchy panel on the left. You can then press 'F' on the keyboard to frame that node and recenter the orbit camera on that node's position.

Better Immersion with Projective Sky Dome​

"130" by mononofu is licensed under CC BY 4.0.

Experience realistic photographic skies with our new projective sky dome! While previous versions allowed for skyboxex with an infinite projection, 4.0 introduces a dome-shaped skybox projection that incorporates a flat ground plane. This warps the skybox texture to have a more believable appearance, delivering a more authentic and immersive perspective, melding your 3D models with strikingly realistic backdrops.

Debug and Inspect with Render Mode​

Ensuring that developers can seamlessly troubleshoot and inspect glTF files, the new render mode allows you to select and display individual inputs/outputs of the render pipeline, including albedo, emissive, normals, gloss, AO, and more. This new level of insight is invaluable for debugging, making it even easier to work with your glTF data.

Enhanced Realism with VSM Shadows​

The addition of Variance Shadow Mapping (VSM) casts your 3D scenes in a new light, literally! Shadows aren't merely aesthetic; they provide context and depth, especially in AR mode, assisting to ground your object naturally within its real-world environment. Explore scenes with a newfound depth and realism that draws viewers into the experience, both in standard and AR viewing modes. Find the new shadow controls in the Light Settings panel:

Join Our Open Source Community​

We're not just excited to share these innovations with you; we're eager to hear your thoughts and welcome your contributions! If there's a feature you're longing for, please don't hesitate to submit your requests.

Better yet, become an active contributor to our codebase! Our open-source community thrives on collaboration and fresh perspectives. So, dive right in, explore the code, and let's shape the future of 3D model viewing together! Your expertise and insights could help shape the next release.

GO TO GITHUB NOW

Conclusion​

With glTF Viewer 4.0, we're redefining the standards of 3D model viewing. From WebGPU-powered rendering to WebXR-powered AR, this update is designed to inspire, assist, and elevate your work with glTF data.

So stay creative, friends, and we'll see you on the forums! 👋

WebGPU is a cutting-edge technology that promises to revolutionize the way 3D graphics are handled on the web. As the successor to WebGL, WebGPU provides faster and more efficient rendering capabilities for complex 3D graphics and simulations.

PlayCanvas has been at the forefront of this new technology and has been working on adding WebGPU support to its platform.

With WebGPU, we can expect to see more immersive and interactive 3D experiences on the web in the future.

PlayCanvas WebGPU Clustered Area Lights Demo

Refactoring of WebGL engine​

Before adding support for WebGPU, it's important to discuss the significant amount of refactoring work that was required on our existing WebGL engine. Implementing deeper architectural changes while preserving backwards compatibility required a significant amount of meticulous care.

• To enable support for WebGPU, we needed to establish a clear separation of graphics technology that could be shared between WebGL and WebGPU. This involved a significant refactoring effort to extract WebGL-specific code into a separate set of classes.
• PlayCanvas utilizes a collection of shader chunks to produce GLSL shaders that implement advanced material properties and lighting modes, as well as custom shader chunks defined by users. However, since WebGPU employs the WGSL language, we used glslang and tint WASM modules to dynamically convert these shaders on-the-fly with injecting support for uniform buffers and other modifications.
• The PlayCanvas engine lacked explicit render passes, making the rendering process more rigid and harder to extend. This was solved by implementing a FrameGraph that allowed us to describe the rendering process as a set of render passes, their dependencies, and associated targets, which created a more flexible and performant rendering architecture.
• Unlike WebGL, which sets render state and shaders using a custom API, WebGPU specifies all those through render pipelines. To support both rendering APIs with optimal performance, we needed to refactor the render states into standalone objects that are efficient to compare and set up.
• To support the WebGPU platform, we need to undergo a significant refactoring to organize uniforms into uniform buffers.
• To facilitate the asynchronous creation of WebGPU device, we have introduced a new async API to create a graphics device, which is the primary breaking change required to adopt WebGPU.

What is left to do​

• Our primary objective is to align the WebGPU implementation with that of WebGL, and while we have made significant progress towards this goal, there are still some features that are missing. Furthermore, several smaller details require cleanup and rectification.
• We need to incorporate it into the Editor environment for both launched and published applications. Currently, only WebGL is available in this environment.
• Our primary objective is to achieve full parity with WebGL, but initially, we are focusing on basic implementations of some concepts to deliver a working implementation, which will need to be extended to meet our performance objectives.
• WebGPU provides developers with access to Compute Shaders, which enables more efficient parallel processing of data on the GPU. This feature can significantly improve the performance of complex algorithms and simulations, which may have been impractical to run on the CPU. With access to Compute Shaders, we can bring new visual features to the next level, such as advanced particle systems, post-processing and global illumination techniques.

Engine examples​

As an early pre-release of WebGPU, we have updated several engine examples to use it, which can be accessed on https://playcanvas.github.io. To use WebGPU, the Chrome Canary browser is required, with the 'chrome://flags/#enable-unsafe-webgpu' flag enabled.

PlayCanvas Examples Browser

Let us know what you think in the forums!

Attributions​

Oldsmobile Cutlass Supreme Sedan '71 by Barbo is licensed under Creative Commons Attribution