Announcing the New PlayCanvas Asset Store

The PlayCanvas Asset Store is the first place that users tend to go to find content for their projects. This is especially true for new users who want to get started as quickly as possible. Up until now, the Store has not been particularly easy to use and the content has not changed in quite a long time. In short, a complete overhaul and refresh has been long overdue. So today, we are incredibly excited to announce a major upgrade for the PlayCanvas Asset Store!

First up, check out a little example of building a city scene using content taken from the Asset Store. A skybox, a pack of 3D city block meshes and a camera control script are imported and the city is built via drag and drop. And not one single line of code is needed!

Now, let’s examine some of the key highlights that make the new Asset Store so special.

Built Right In To The Editor

It should be possible to grab assets quickly, right from within the Editor itself. Why should you have to open a new tab and go hunting around the web? So to keep things as convenient as possible, the ASSET STORE button (in the Editor’s Assets Panel) now opens a nicely designed, responsive Asset Store panel.

One really cool benefit of selecting assets from within the Editor is that the currently selected Asset folder is known. This means you have compete control over where your imported assets will be saved.

Preview Store Assets Before Import

Sometimes, an asset thumbnail just isn’t sufficient to tell if a particular asset is what you want.

Our new Store allows you to select a Store Item and preview it in an appropriate viewer (glTF Viewer for 3D models, Texture Viewer for textures and cubemaps).

Find What You Want Quickly

As the number of store items continues to grow, it’s going to be incredibly important for you to be able to narrow down your assets searches. As a result, the new Store comes with powerful searching, sorting and filtering capabilities.

You can filter by asset type, search asset names and descriptions and then order search results on a host of criteria.

Fresh New Content

Recently, the Asset Store content was, let’s just say, beginning to show its age. We are now in a world of HDR skyboxes, PBR materials and high polygon meshes. So it made sense to erase old store items and refresh the Store with better, more modern content. We have selected a broad variety of Creative Commons assets from fantastic content sources such as kenney.nl, HDRi Haven, Sketchfab and Khronos’ glTF Sample Models.

If you would have any suggestions for content you would like to be added to the Store, please do let us know!

The Future

There’s still so much we want to do with the new Asset Store! But here are some things we have in mind:

  1. More Content. The important thing to say about today’s update is that it delivers the core infrastructure on which we can iterate. It is now exceptionally easy for us to populate the store with more content. So, in the near term, you can expect to see the range of content expand quite rapidly.
  2. Third Party Stores. Now that we have a solid foundation in place for the Store, we have the ability to host third party stores within the same UI and maximize your choice.
  3. More Asset Types. Today’s launch offers models, fonts, textures, skyboxes and scripts. Next, we want to add audio assets and template assets (AKA prefabs). Template assets in particular are very exciting because you would be able to import fully interactive, visual entities into your projects (such as a drivable vehicle or a controllable character).

What would you like to see us add to the Asset Store next? Let us know on the forum.

Happy creating, friends!

Initial WebGPU support lands in PlayCanvas Engine 1.62!

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

WebXR AR Made Easy with PlayCanvas

We are excited to announce the launch of our WebXR AR Starter Kit, available in the New Project dialog today!

WebXR is a technology that powers immersive and interactive AR and VR experiences to be accessed through supported web browsers. This allows us to build memorable, engaging content and share them with just a URL. No installs needed!

The starter kit comes with all you need to kickstart your AR experience for WebXR including:

  • Real world light estimation
  • AR shadow renderer
  • AR object resizing and positioning controls
  • Physics raycasting
  • And more!

Look how quickly you can create AR experiences below!

Pacman Arcade + animation by Daniel Brück is licensed under CC BY 4.0

Give the Starter Kit a try today at playcanvas.com where you can use it for free!