Basis Texture Compression arrives in PlayCanvas

PlayCanvas implemented the fantastic hardware texture compression workflow in 2016 which allowed users to build bigger and better WebGL apps, even on low memory devices like mobile phones.

JPGs and PNGs are great formats for transmission over a network because they tend to compress nicely. But once the images are downloaded and handed over to WebGL, they must decompressed to raw RGB(A) data. Using hardware compressed textures is important as decompression is performed in silicon on the GPU which avoids the need to utilize lots of memory.

This 4096 x 2048 Earth texture is a 1.81MB JPG but takes a huge 33.6MB of VRAM when uncompressed!

With hardware supported texture formats, we can retain a similar file size while massively reducing the amount of VRAM as seen below.

Now, what if you reduce file sizes as well as the VRAM usage?!

That is what Basis gives us and it is available right now to all PlayCanvas users! Compressing the same Earth texture above, produces a 521KB Basis Texture.That’s a 68% saving over the smallest file size from the hardware supported formats 💪

Basis is an open sourced, texture codec that produces a highly compressed intermediate file format (.basis) that can be converted at runtime to a format that the hardware supports in GPU hardware. This means that there is only a single (and often smaller) file that is created to support a wide range of platforms.

As shown by the numbers above, Basis offers huge savings in download times for the end user which in turn, can lead to improved user engagement and click to open metrics for your application.

Let’s check out a real world example. The Space Base Texture Compression Demo from our previous blog article achieves the following VRAM usage and download sizes (gzipped) on desktop in Chrome:

Note that VRAM usage for Basis would ordinarily be the same as with legacy compression. However, PlayCanvas compresses normal maps to YYYX format instead of XYZ for improved quality so utilization is marginally higher.

That’s a big saving of 52% (19.5 MB) in download size from updating the project to use Basis while using a similar amount of VRAM!

And all it takes is a couple of clicks in the asset inspector to get started with Basis compression!

To recap

  • Only need one compressed file vs many (DXT, PVR, ETC1, ETC2, etc) for every texture
  • Up to 2.8 times smaller files and faster download times for your users
  • Up to 10x faster compression times with Basis
  • Similar savings in VRAM usage as hardware supported formats
  • Same one click process to compress textures

Basis texture compression is available to everyone right now so start crunching down those textures! More information can be found in the documentation including a migration guide.

And if you’re new to PlayCanvas, why not sign up today. We can’t wait to see what you make! Let us hear your feedback in the forums!

PCUI 1.1.0 Adds Tree Control and Array Control

Back in October, we launched PCUI, an easy to use framework for building web-based tools. It already powers the PlayCanvas Editor and glTF Viewer applications.

Today, we’re excited to announce our next major release for the library: PCUI 1.1.0. Check out the release notes for the details. But let’s take a look at some of the highlights.

TreeView – Tree Control

Many web tools display data in a hierarchical or tree-based representation. But building a tree control in HTML and CSS can be tricky. PCUI 1.1.0 introduces a very easy to use tree control. And it incorporates some useful features such as:

  • Drag and drop of tree view items
  • Built-in ‘double-click to rename’

ArrayInput – Array Control

Also arriving in PCUI is ArrayInput. It allows you to create input controls for arrays of numbers, strings, booleans or vectors.

Resizable TextAreaInput Control

The TextAreaInput control has been augmented with a new resizable property that can be set to ‘none’, ‘horizontal’, ‘vertical’ or ‘both’.

To get started making awesome web tools with PCUI, here are some useful links:

Introducing JSON Script Attributes

JSON Script Attributes Preview

We have levelled up the Script Attributes that makes it much easier to organize and group related attributes together.

Using JSON, developers are able to define a schema for a data object that has multiple attributes and have them grouped together in the Inspector.

In the example below, we have created a JSON schema with the name ‘settings’ and has the attributes ‘gravity’, ‘startingHealth’ and ‘godMode’.

GameManager.attributes.add('settings', {
    type: 'json',
    schema: [{
        name: 'gravity',
        type: 'number',
        default: -9.8
    }, {
        name: 'startingHealth',
        type: 'number',
        default: 20
    }, {
        name: 'godMode',
        type: 'boolean',
        default: false
    }]
});

In the Inspector, the data object is shown as a collapsible section:

Collapsible script settings

Even better, these data objects can made into an array! This is a huge improvement over having to organize multiple attribute arrays that was difficult to update and error prone to maintain.

Example JSON schema for an array of enemies:

GameManager.attributes.add('enemies', {
    type: 'json',
    schema: [{
        name: 'health',
        type: 'number',
        default: 10
    }, {
        name: 'type',
        type: 'number',
        enum: [
            { 'Close Combat': 1 },
            { 'Range': 2 },
            { 'Both': 3 }
        ]
    }, {
        name: 'templateAsset',
        type: 'asset',
        assetType: 'template'
    }],
    array: true
});

Becomes the following in the inspector which is so much cleaner!

Arrays of JSON objects

Read more in the documentation and let us hear your feedback in the forums!

Copy and Paste Assets between Projects

PlayCanvas has a pretty cool (but not widely known about) feature that allows you to copy and paste entities and entity hierarchy between two instances of the Editor. This can save a lot of time, particularly when setting up new projects.

Many of you have requested the ability to do the same with assets. Well, we listened – and now you can! 🚀

So if you need to grab some assets from another project, no more need to download from Project A and then upload to Project B. Just copy and paste in seconds, directly from project to project.

This makes it super easy to share reusable code and assets with your team and the rest of the PlayCanvas community, especially in combination with the recent launch of Templates to setup preconfigured Entities.

Use the context menu or the Ctrl/Cmd + C and Ctrl/Cmd + V hotkeys to copy assets across to your projects. 💪

Check out the documentation for more details.

Faster Load Times with glTF’s GLB Format!

The PlayCanvas team is super excited to announce the Editor support of glTF GLB conversion with model and animation imports.

This gives developers an order of magnitude reduction in load times compared to the JSON format while keeping similar gzipped download size.

Using the Stanford Dragon model (2,613,679 vertices, 871,414 triangles), we can compare GLB and JSON parse times on a Macbook Pro 16 inch.

The JSON format took over 3 secs just to parse the data, a peak memory usage of ~498 MB and a gzipped package size of 28.1MB.

JSON

GLB speeds ahead taking only 0.193 secs which is 17x faster, uses a peak of ~25.2 MB of memory and a gzipped package size of 25.7MB 🚀!

GLB

That’s a huge saving in time and means applications will become snappier and more responsive to users, especially for content heavy games and product showcases.

We will be deprecating the use of JSON and the default format that model and animations files. Newly created projects will default to converting to GLB and in existing projects, this can be enabled in the projects settings:

If you would like to replace your current JSON assets with GLB, the User Manual has more information about the process to migrate over.

The conversion to GLB supports the importing of multiple animations in a single FBX which will help improve content workflows.

Remember our awesome glTF 2.0 Viewer? That is now integrated into the Editor to inspect any GLB asset from the project. Just right and select ‘Open In Viewer’!

Also, we have exposed Animation Import Settings under Asset Tasks in project settings. These will allow developers to adjust a balance between animation quality and fidelity against file size.

Animation Import Settings

Our next steps are to add support for viewing and editing a model hierarchy in the Editor which will lead onto support for the importing of GLB files.

The team is hard at work designing and implementing these features so watch this space!

Introducing PCUI – An Open Source UI Framework for the Web 🚀

Today, PlayCanvas is launching PCUI: a new, open source front-end framework for the web.

PCUI is designed with tools developers in mind. It is particularly well suited to building viewer and editor applications, providing a rich set of beautiful and consistent controls. It already powers the PlayCanvas Editor – the world’s most powerful WebGL production tool.

Here you can see tree controls, panels, buttons, checkboxes, toolbars, menus and more. The Editor also relies on PCUI’s observer system, that makes it easy to synchronize the state of your application’s UI with that of the underlying data. Plus, it has a built-in support for history to make implementing redo/undo a breeze.

Also built on PCUI is the PlayCanvas glTF Viewer, a tool for inspecting glTF 2.0 scenes.

Check out the viewer’s GitHub repo to see how a Typescript-based web application leverages PCUI.

If these applications inspire you to build your own browser-based tools, why not get started with PCUI today? Here are some useful links:

PCUI works great with vanilla JS projects, Typescript projects and React-based projects. It’s open source so we encourage you to get involved and help us advance PCUI.

If you’re building any kind of browser-based tool application – definitely check it out today and share your thoughts on the forum!

Supercharge your workflow with Template Assets!

It’s finally here! The PlayCanvas team is very excited to announce the public release of our new Templates feature! 🎉

Templates allow you to create preconfigured entities with all the values and child hierarchy as an asset reference.

This is a huge workflow boost as managing and changing objects in a scene is now easier and faster to do. New instances of the Template can be placed in the scene with the Editor. These instances have a link to the Template asset, so any changes to the asset will change the instances in the scene too.

Now we are able to change and update many scene entities via a single asset which is a welcome change from the tedious manual updating of multiple entities across multiple scenes.

Change all instances of Templates in one click! 🚀

Other features of the Template system also include:

  • Adding instances in the Scene editor (including drag and drop support of template assets to the Hierarchy panel)
  • Overriding properties on a per instance basis
  • Nested Templates which allows referencing a Template in another Template
  • Creating a new instances via code from an asset reference

In terms of how they can be used, we have been beta-testing the feature since early 2020 (big thanks to all those that have given us feedback and bug reports 🙏) and some of the use cases we’ve seen so far include:

  • Designing and creating sections of an infinite runner game
  • Managing UI screens and instantiating them at runtime
  • Different enemy types that a script can reference to randomly generate a level

As you can see, Templates give you a wide range of flexibility of workflow options to manage and modify content in your projects.

Find out more about Templates in the User Manual and give them a try yourself!

PlayCanvas launches glTF 2.0 Viewer Tool

Today, the PlayCanvas team is excited to announce the release of a brand new browser-based glTF viewer application.

Try it now: https://playcanvas.com/viewer

Or click these links to preload some classic glTF models: Boom Box, Damaged Helmet and Fox.

The viewer is open sourced under an MIT license and the code can be found on GitHub.

Fork it now: https://github.com/playcanvas/playcanvas-viewer

The viewer allows you to drag-and-drop any glTF 2.0 file and inspect it in detail. We challenge you to find one that doesn’t work! The viewer has the following features:

  • Visualize wireframe, skeleton, bounds and normals
  • Adjust scene lighting and skybox
  • Drag and drop equirectagular images (including HDR files) or six cubemap face images.
  • See how a model performs on both the CPU and GPU via the viewer’s real-time metrics panel
  • Play animations (including skinned and morphed meshes) – unlimited morph targets are supported
  • Visualize animation curves in real-time as graphs in the 3D view
  • Load models via drag-and-drop or by passing a URL query parameter
  • Support for Draco mesh compression

The release of the PlayCanvas Viewer coincides with the engine reaching 100% glTF 2.0 spec compliance! PlayCanvas passes every single core test in cx20’s glTF Test suite. We are now turning our attention to supporting the full range of glTF 2.0 extensions. The engine already supports:

  • KHR_materials_pbrSpecularGlossiness
  • KHR_materials_unlit

The engine itself can parse and render glTF 2.0 files incredibly quickly. You can expect glTF parse time to be approximately one tenth of that loading the equivalent JSON model.

Give it a try today – you’ll be impressed!

Plan Updates: More Storage, More Features, Same Price

Creativity makes our world a better place. PlayCanvas unlocks creativity through collaborative, frictionless tools that enable everybody to build, share and play together.

With PlayCanvas, getting started with game development is as simple as clicking on a hyperlink. No installation, available wherever you have access to a browser and easily shareable for a real-time collaborative workspace.

Super Snappy Bowling from NOWWA

Until today, some aspects of the platform have been limited or restricted. This just holds back the creativity of our community. So today, we have some incredibly exciting news. We have updated our plans to make our tools even more accessible for everyone at all levels!

We are now giving everyone:

Best of all, this comes at no extra cost! 🎉🎉🎉

If you’re new to PlayCanvas, now is the perfect time to get started! We hope you enjoy these new features and updates.

One last thing! We are super-excited to spread the word – can you help us with a retweet?
https://twitter.com/playcanvas/status/1285598408787582977

Porting a Large ES5 JavaScript Library to ES6 Modules and Rollup

Since 2011, the PlayCanvas engine sourcebase has adhered strictly to the ES5 JavaScript specification. Since then, the JavaScript language and the surrounding tools ecosystem has moved on considerably. But PlayCanvas has steadfastly stuck to ES5. Why? Internet Explorer 11.

IE11 was released on October 17, 2013. But even today, StatCounter reports that IE11 has 2.43% of the global desktop browser market. Since PlayCanvas content is viewed by 100s of millions of end users, this is a pretty big deal.

Over time, the engine codebase has grown significantly. It’s now nearly 100,000 lines long. Maintaining and building such a large codebase can be problematic. To help bring some level of consistency and structure, we imposed the following pattern:

Object.assign(pc, (function () {
    var SomeClass = function () {
        this.other = new pc.OtherClass();
    };

    Object.assign(SomeClass.prototype, {
        someFunction: function () {}
    });

    return {
        SomeClass: SomeClass
    };
}()));

pc is the PlayCanvas library namespace. So a developer would create instances of this class as follows:

var thing = new pc.SomeClass();

To build the engine, we wrote a node.js script which would parse a list of dependencies (JavaScript filenames) and concatenate them. There were several problems:

  1. The pattern above is overly verbose making it harder to inspect the code.
  2. Object.assign needs to be called 250 times when the library is initially executed by the browser, once for each module. This increases app start-up times.
  3. In internal engine code, all class names and constants need to be accessed via the pc namespace. This is because the internals of the pattern above cannot see the internals of other modules and vice versa. This bloats the engine code and slows things down.
  4. The dependencies file had to be carefully manually ordered to ensure things were declared in the right order.
  5. The build script itself was about 1000 lines of JavaScript which carried its own maintenance overhead.
  6. Unused code was being included in the published engine.

We believed the solution to these problems was to migrate the engine codebase from vanilla ES5 to ES6 modules. This would transform the original module pattern to:

import { OtherClass } from './other-class.js';

var SomeClass = function () {
    this.other = new OtherClass();
};

Object.assign(SomeClass.prototype, {
    someFunction: function () {}
});

export { SomeClass };

Much better!

  • No more needless calls to Object.assign to the pc namespace.
  • No further need to use the pc namespace within modules.
  • Dependencies are explicitly described in each JS file.
  • Only what is necessary is exported from modules (and the overall engine).

But what about IE11? It doesn’t understand ES6 module syntax! 😱 PlayCanvas still needs to ship as a strictly ES5 library. To transform the entire codebase from ES6 module format to ES5 UMD format (PlayCanvas is used in both the browser and Node), you simply need to leverage a JavaScript bundler.

There are many options for selecting a JS bundler. In the end, 3 options were tested: Rollup, Parcel and ESBuild. You can see the PRs for each here:

In the end, Rollup was selected over Parcel and ESBuild. In testing, Parcel needed up to 16s for an initial build, while Rollup only required 3s. And we were reticent to adopt ESBuild since it was far less established and battle tested compared to Rollup. But we may review this decision in the future. Now that the engine is ported to ES6 modules, switching bundler is fairly straightforward.

With Rollup, the build script reduced from ~1000 lines to ~100 lines. Quite a saving. Rollup’s plugin system made it incredibly easy to write custom handling for GLSL files and also run a C-like preprocessor in order to build debug, release and profile versions of the engine.

What’s Next?

Now that we have merged the ES6 Module port, where do we go from here?

First up, Rollup is kindly informing us that circular dependencies exist in the PlayCanvas codebase.

We want to clean things up and eliminate them. What’s the motivation for that? It makes it easier for the bundler to employ tree-shaking to remove unreferenced code from the engine. At the moment, the engine’s Application class imports pretty much everything. And many classes import the Application. This makes it hard to build a version of the library which doesn’t include the particle engine, say. Or maybe the physics engine.

Beyond that, we are keen to explore leaving ES5 behind and fully embracing ‘modern’ JavaScript, or maybe Typescript. Rollup can trivially run Babel or the Typescript compiler as plugins, thereby ensuring we can still ship an ES5 library. We’re looking forward to making that decision based on your feedback. So feel free to let us know what you think on the forum!