PlayCanvas Review of 2021

Happy New Year to you all!

In 2021, we marked the 10th anniversary of PlayCanvas. In that time, we have seen WebGL become the world’s standard for web graphics, implemented into every major web browser. And we have done our part to help make WebGL content creation both easy and fun!

2021 was definitely our most productive year yet. The platform has continued to evolve, delivering a host of new features and performance improvements. Let’s take a look at some of the highlights:

Tools Updates

As you might expect, the vast majority of PlayCanvas users build their applications in the Editor. Perhaps the biggest Editor-related story this year was the release of our new Editor API that allows you to automate certain operations in the Editor front-end. And this is just the first step. We will be fleshing out the Editor API further in 2022 with the goal of building a fully fledged plugin system. Stay tuned for updates on that.

The Code Editor also received a major upgrade this year when we switched from CodeMirror to Monaco, the text editor that powers Visual Studio Code. So if you were already a VS Code user, you should feel right at home in the new Code Editor. It brings better performance for handling large text files, better code completion, a powerful command palette and even theme selection.

Animation tooling also received a huge boost in 2021 with the introduction of the Anim State Graph Editor.

AnimStateGraph Editor

You now have the ability to author anything from simple animation cycles to advanced locomotion systems. Check out how indie developer Cem Demir is using the new animation system in his forthcoming multiplayer survival game:

With all of the front-end updates to the Editor, don’t think that we have neglected the back-end! Throughout 2021, we have been diligently rebuilding the platform’s back-end to be more reliable, scalable and responsive. Users around the globe should now be experiencing Editor and Launch Page load times that are up to 50% faster. In addition, asset related jobs should now complete faster meaning you can focus on building with less time waiting.

Aside from the Editor, one of the coolest new tools we released this year was the Engine Examples Browser. This is a coding playground for learning and experimenting with the PlayCanvas Engine API. And naturally, it’s fully open sourced on GitHub.

Engine Examples Browser

Back in the summer, we announced our new Node-based Shader Editor. This is a new and accessible way to build custom shaders for your PlayCanvas application.

Node-based Shader Editor

We’re nearing the end of the closed beta and in the coming months, we will kick off an open beta and fully open source the tool.

The PlayCanvas Viewer is our open source 3D model viewer tool. In 2021, it received a number of important improvements. First up, as well as glTF files, the viewer can now also load VOX files (for voxel based scenes constructed in tools like MagicaVoxel). We also improved skeletal visualization as well as skybox handling. Check it out on GitHub!

PlayCanvas Viewer

Graphics Engine Enhancements

Let’s be honest – everybody loves beautifully rendered pixels. So let’s examine how PlayCanvas’ graphics engine has advanced this year. First up, we have area lights that allow lights to adopt a physical shape: rectangle, circle or sphere. Later in the year, we released a preview or our new clustered lighting pipeline, which essentially increases the number of dynamic lights you can place in your scenes. With both features combined, the engine can now process clustered area lights as our new engine example demonstrates.

Clustered Area Lights

You can expect clustered lighting to fully replace the existing lighting system in early 2022 once it has been thoroughly beta-tested.

PlayCanvas’ run-time lightmapper received a major upgrade this year. Previously, it was only able to bake direct light to lightmaps and while this could speed up scene load and render times, direct lighting alone struggles to deliver high quality visuals. Now, it can generate soft shadows and bake ambient occlusion. Check out the new engine example that shows off these amazing new capabilities:

Lastly, we implemented cascaded shadows maps that dramatically boosts shadow quality for large-scale environments. It didn’t take long for the community to start showcasing the benefits:

Open Source FTW!

The PlayCanvas team are huge advocates of open source. The Engine runtime was originally open sourced way back in June 2014. Today, it has 6,932 stars,1,095 forks and 96 individual contributors (who we want to thank for all their incredible contributions). Simply put, PlayCanvas would not be what it is today without our amazing open source community.

2021 saw us double down on our open source mission with an explosion of new and updated OSS projects:

  • Editor API – the core functionality of the Editor
  • PCUI and PCUI-Graph – a front-end framework for building powerful browser-based tools
  • Observer – an implementation of the observer pattern for web application development
  • PlayCanvas Viewer – a fast and lightweight 3D model viewer

As mentioned above, the new Shader Editor will be joining this list in 2022. And we shall continue to open source more and more of our technology over time.

2021 Content Picks

We have been blown away by the incredible content the community has created. Browser and messenger games, 3D configurators, VR and AR apps, playable ads and more. We recently published an updated PlayCanvas Showcase video that highlights some of the best examples:

Our top picks for 2021 are:

  • Snap Games – Snapchat’s HTML5 gaming platform featuring new arrivals such as Hole.io and Aquapark
  • Bullet Bonanza – Frenetic online multiplayer game made by Kiloo
  • Fjällräven Kånken – Backpack configurator made by Animech
  • The Crypt – NFT gallery made by Kuva

For more PlayCanvas examples, check out the Awesome List.

What’s In Store for 2022?

We already provided some hints about our 2022 roadmap. The Shader Editor makes its debut in Q1. The Editor’s Plugin System will appear later in the year. But what else?

PlayCanvas’ glTF support will continue to advance. All remaining glTF 2.0 extensions will be implemented and we will finally release a glTF exporter (that you will be able to invoke from the Editor).

WebGPU, the forthcoming successor to WebGL, is also in our sights for 2022. As we continue to push the limits of 3D rendering on the web, WebGPU is a critical part of our plans. So 2022 will see us release an initial proof of concept of WebGPU support and we will share our findings with you as soon as we have them.

For a final peek into PlayCanvas’ future, we would like to share our plan to release what we are calling the ‘Visual Debugger’. This tool will run in the Editor’s Launch Page. You will be able to pause the app, single step it, inspect the hierarchy and entity properties and even edit them in real-time.

We have so much more planned and we will publish a full 2022 public roadmap in the coming weeks. In the meantime, if you have any of your own feature requests, please do log them here.

Have a wonderful 2022 everyone! Let’s make it a great year full of creativity.

Upcoming Code Editor upgrade to Monaco!

We have almost completed work on moving the Code Editor from Code Mirror to Monaco, the same editor that powers the ever popular, Visual Studio Code.

Look familiar? 👀

With this upgrade, it will give developers:

  • Much better performance, especially with large text files
  • More editing functionality through the command palette
  • Mouse driven features such as Cmd/Ctrl + Click to jump to definition, hover for documentation and a context menu!

There will be some small differences which will include:

  • Syntax color changes as we’ve opted to use Monaco’s default theme, which should be comfortably familiar to VS Code users
  • Some hotkeys/shortcuts will be different (e.g moving a line up/down)

When can we use it?

We are still working through a few issues but planning to release the Editor as early as next week. Keep your eyes peeled!

Editor API beta release

Over the last few months, we have been working on an Editor API that allows users to automate tedious tasks and extend the base functionality.

We are excited to announce the beta release of the API today and would love to see how the PlayCanvas community will use it to power up their workflows!

Creating and modifying Entities and Assets are all accessible via the API. Add/remove components, scripts, tags, assets, create and instantiate templates and so much more.

Here’s a great example where a context menu can be added to select Entity parents in the hierarchy to speed up scene editing:

From: https://twitter.com/yaustar/status/1446504233537314816

Or add random Entities to the scene:

More examples and links to the documentation can be found in the User Manual.

Join our Open Source Effort

The PlayCanvas team is a big advocate for open source. This is why we have taken the step to open source the Editor API on GitHub. We want to build the best possible API for you so we need your help:

  • Log issues and features requests (or leave feedback on those submitted by others).
  • Submit pull requests for fixes and API changes.
  • Watch the repo or individual issues to get progress updates in real time.

Get experimenting and show us your work with the Editor API in the forums!

Anim Layer Masks and Blending

https://playcanvas.github.io/#/animation/layer-masks

Today, we are releasing the latest anim component feature: the masking and blending of anim layers. 

This is a versatile feature that has been hotly requested by PlayCanvas developers that wish to get even more creative with their animations. We’re excited to be able to share how it works in this blog.

Animating characters

When creating complex animation behavior for games, it is often necessary to make a character carry out multiple actions at once. For instance, you might want to create a character that can pick up and carry an item, or shoot a weapon while freely moving around a scene. 

To perform these actions at the same time, the upper and lower body of the character must be animated independently. The upper body should be able to move from an idle stance to a shooting stance, and then shoot on demand, all while the lower body moves between idling, walking, running based on the player’s command.

A character with two animation layers. A movement layer and a shooting layer masked to the upper body

This effect can be difficult to achieve in most 3D engines, as it usually requires removing certain animated bones in the animation files themselves, before importing those assets into a game project. Only then would a developer be able to create two animation layers, one for movement and another for shooting. 

A shooting animation might have all of its lower body bones removed, which would free up the lower body to be animated by the movement layer. In large projects, this can start to become really cumbersome. Adding or removing bones from an animation would require a rebuild of the animation asset in whichever modelling software the developer is using, followed by a reimport of the asset into the PlayCanvas project.

Anim Layer Masks

Masks can streamline this workflow by enabling developers to add or remove a model’s bones from an animation layer directly. This means you can select which part of a character a particular set of animations should animate directly in the PlayCanvas editor. Testing out different combinations of character bones now becomes as simple as toggling a few checkboxes.

Creating layer masks in the PlayCanvas editor

By selecting only the bones in the upper body of the character model for an anim layer, you can free up the lower body to be animated by previous layers which would have been overwritten without this upper body mask.

Anim Layer Blending

Previously when using the anim component, you could play any number of animations on top of each other by creating multiple anim layers. However, any animations from subsequent layers that animate the same bones as previous ones will completely overwrite those previous animations. 

That meant that even if you were to add a shooting animation to the top half of a character, it would always be playing over a walking animation that was placed on a previous layer. 

Now with anim layer blending, it is possible to smoothly blend subsequent layers in and out, changing the weight each layer contributes to the characters animation in real time.

Animation layer blending in the PlayCanvas examples browser

When editing an AnimStateGraph asset, you’re now presented with two `Blend Type` options in each layer. The `Overwrite` option is set by default and works as before, each subsequent layer completely overwrites the animation values of previous layers. 

However, now, if you select the ‘Additive’ option, the anim system will take the weight of each additive layer into account and blend the layered animations accordingly. This is a great way to blend one animation on top of another.

Useful Links

We’re really keen to see what you can create in PlayCanvas using this feature, so be sure to check out the links below so you can begin working with layer masks and blending.

Changes to our Editor and Engine releases

Up to now, our process for releasing new features and fixes to the PlayCanvas Engine and Editor has been rather simple.

As features and fixes are ready, we would plan a release and test against a comprehensive list of PlayCanvas projects and the Engine examples. Once testing is passed, it would be released to everyone that is using the playcanvas.com service and Editor.

This has served us well for many years and meant that users always had the latest features of the Engine.

However, as the features of the Engine are get bigger and more complex and users’ projects grow in scale and size, this release process needs to change to match our users’ needs for stability and transparency with releases.

Over the next month or so, we will be rolling out the following changes (finer details subject to change):

Minor and patch versions updates

Minor releases (1.XX.0 where the XX is the minor version) are currently reserved for API additions/changes in the Engine and/or larger feature releases while patch releases (1.XX.YY where YY is the patch version) could be bug fixes and minor features.

Going forward, patch releases will strictly only be for bug fixes which will generally improve stability and user expectations.

New functionality will only be added in minor releases.

Renaming Engine’s GitHub ‘master’ branch to ‘dev’

To better reflect our usage of the ‘master’ branch, we will be renaming it to ‘dev’ over the next few days as that is where our features and updates are merged prior being released.

As the branch is typically unstable, the naming of ‘dev’ is more descriptive of the branch’s purpose.

This will have knock on effects to forks of the Engine repo on GitHub. If you have a fork of the Engine, please read the following documentation from GitHub to see how this affects you.

The steps from the documentation will be:

$ git branch -m master dev
$ git fetch origin
$ git branch -u origin/dev dev
$ git remote set-head origin -a

Alternatively, creating a fresh clone from GitHub will work as well.

Separate Engine releases from the Editor

The Editor will no longer be affected by the latest release of the Engine on the GitHub repo. The Engine version used in the Editor will only be updated via an Editor release.

While it means that Editor users will have to wait a little longer to get the latest features, it allows extra time for users to test their projects against the upcoming Engine release and report any issues.

However, users will still be able test early against the latest Engine releases using the use_local_engine param on the Launch Tab. We will also be looking at making this process easier to do via the Editor, such as an option in the Launch Tab settings.

Once this has been tested against the Editor and any reported issues are fixed, the Editor will be released with this version of the Engine.

Feedback

This is currently the high level plan and we would love to hear your thoughts and suggestions on the forums!

Import full model hierarchy into PlayCanvas

The PlayCanvas team are very excited to fully release the Import Hierarchy pipeline feature in the PlayCanvas Editor!

With this feature enabled, any imported FBX will create a Template asset which contains the full node hierarchy as entities representing sub-models of the model. This gives users greater flexibility in manipulating mesh instances in the model directly in the Editor.

Render assets will also be created that can be used with the Render Component and allow users to add an individual mesh instance of a model in the scene.

For example, an imported car FBX model would create several Render assets, doors, wheels, wipers etc. The wheel assets can be used independently from the rest of the car model to create a tire wall.

With the model hierarchy being editable in the Editor, this opens a number of uses that weren’t possible before:

  • Attach other Entities and/or models as part of another model’s hierarchy such as adding a helmet to a character’s head.
  • Move/Rotate/Scale sub-models directly in the Editor such as moving/adding/removing chairs around a house model.
  • Use the Render assets elsewhere in the scene for decoration or customization.
  • Add components and/or scripts to individual nodes such as attaching particle effects to animated parts.

However, please note that while the Model Component is compatible with both the Animation and Anim (State Graph) Component, the Render Component/Import Hierarchy feature is only compatible with the Anim (State Graph) Component.

Going forward, we will be marking the Model and Animation Components as ‘legacy’ but if you have an existing project using these components, please do not worry. None of the existing functionality is being removed and you will not be forced to update projects to the new pipeline for continued development. Although no new features will be added to the Model Component, the PlayCanvas team will continue to fix bugs with the existing pipeline until our next major version (2.0.0) of the engine at the earliest.

You can even mix both pipelines in the same project if you wish to take advantage of the features in the new pipeline in an existing project. However, please bear in mind that this can add complexity to the project code.

The Import Hierarchy asset task will be enabled by default for newly created projects. If you would like to use this feature in your existing project, please consult User Manual for details.

Useful Links

Important Information about macOS Safari 15

We have been made aware of a critical issue regarding WebGL content and the release of macOS Safari 15 earlier this week where previously published content could fail to load.

Apple are aware of this and have a fix in place on WebKit. However, we don’t know when this fix will be included in an update release.

PlayCanvas have released v1.46.5 of the engine to workaround this issue.

Actions to take

If you have a PlayCanvas application that was published between Feb 2020 and 21st Sep 2021, the application will fail to load on Safari 15 until Apple releases an update and users update their devices.

Please republish the application so that it uses the latest engine release or update the engine version to v1.46.5 if you are using NPM.

If you need to stay on particular version of the PlayCanvas engine, it is possible modify the engine or build a custom version and include the following code change from this PR.

If you have any issues or questions, please message us on the forum where we will provide support.

PlayCanvas Showcase 2021

We are very excited to release our very first showcase reel, showing some of the very best WebGL browser games and experiences made with PlayCanvas to date!

Many thanks for to all our partners and users that allowed us to show their awesome content in the video:

See more games and experiences at Awesome PlayCanvas!

A Graph Rendering Library for the Web: PCUI Graph

Today, we are excited to announce a new open source library: PCUI Graph. It’s a graph rendering framework for the browser which can be used to build and view various types of node-based graphs.

PCUI Graph in action

Last year, we open sourced PCUI, a front-end framework for building web-based tools like the PlayCanvas Editor. This was subsequently used as the foundation for a new family of open source tools: the glTF Viewer and the PlayCanvas Examples Browser. However, some of our more recent tools projects have had requirements related to the creation and editing of node-based graphs. As a result, we set about developing a new plugin to PCUI called PCUI Graph. This plugin is already in use today since it powers both the PlayCanvas Shader Editor and Animation State Graph Editor:

You can rapidly map out key parts of your project’s workflow using pcui-graph, as it supports both directed and visual programming graphs. Here are some of the key features that PCUI Graph provides:

  • Schema based – Each graph you create is based on a JSON formatted schema, allowing you to easily define the type of your graph up-front.
  • Event system – You can hook up event listeners to any of the UI interactions made to a graph.
  • Graph state data – Easily retrieve the current state of the graph in JSON data format at any time and this can be loaded back into the graph later.
  • Context menus – You can define context menus in a graph schema, supporting the creation and deletion of nodes / edges in the UI.
  • Simple API – Any of the user interactions with the graph can also be made programmatically.
  • Styling – The graph can be configured to change the default styling of nodes / edges. These styles can also be overridden in the schema of each individual node / edge type.

Useful links

So get started with PCUI and PCUI Graph today. We can’t wait to see what you build!

Learn the PlayCanvas API with the Engine Examples Browser

PlayCanvas has a rich JavaScript API that allows you to build just about any type of interactive content imaginable – games, playable ads, product configurators, AR, VR and more! But learning a new API can be tough. Reading API reference documentation is all well and good, but many people prefer to learn by experimentation. And by examining the code of real world examples. This led the PlayCanvas team to build a new application: the Engine Examples Browser.

Starting exploring the Examples Browser now:

https://playcanvas.github.io/

The browser is written entirely in Typescript and uses a Webpack build process. Naturally, it is 100% open source (MIT license) and the source can be found here.

The Examples Browser has some pretty cool features:

  • Gallery panel. Select any of the 86 examples from the (filterable) list on the left, either by name or thumbnail.
  • Inspect Source. Expand the source panel (built on the awesome Monaco code editor) on the right to inspect any example’s source code.
  • Edit and hot reload. Edit any example and hit the Play button to refresh the running example. Monaco uses PlayCanvas’ Typescript definitions to provide inline API hints.
  • Embed links. Want to embed PlayCanvas examples in your own site? Simply hit the embed icon and copy the URL!
  • Share to Twitter. Want to share a specific example with the world? Just hit the Twitter icon!

If you would like to request an example to be added to the browser, submit an issue here. Or if you’re feeling creative, submit a pull request of your own to the repo! Stay tuned for newly added examples in the coming months. Enjoy!