glTF 2.0 Import Arrives in the PlayCanvas Editor

We are excited to announce a major update for the PlayCanvas Editor: glTF 2.0 import. This new feature allows users to easily import and use 3D models created in other applications such as Blender and SketchUp, as well as from digital asset stores like Sketchfab, directly into the PlayCanvas Editor.

Model by Loïc Norgeot and mosquito scan by Geoffrey Marchal for Sketchfab licensed under CC BY 4.0
Author: Sketchfab License: CC-BY-4.0 Source: Mosquito in Amber

glTF (GL Transmission Format) is a file format developed by The Khronos Group for 3D models that is quickly becoming the industry standard. It is an open format that is designed to be efficient and easy to use, making it the perfect choice for use in the PlayCanvas Editor.

The PlayCanvas Editor and run-time now supports the full glTF 2.0 specification, including 100% of ratified glTF extensions (such as sheen, transmission, volume and iridescence). This means that developers can import and use high-quality 3D models and take advantage of the latest advancements in the glTF format to create truly stunning interactive experiences.

One of the major benefits of glTF import is the ability for users to edit glTF materials in the PlayCanvas Editor’s powerful Material Inspector. Here you can see the famous Stanford Dragon imported from GLB with refraction properties edited live in the Inspector:

The dragon model based on the one from Morgan McGuire’s Computer Graphics Archive.
Original dragon mesh data based on a Stanford Scan © 1996 Stanford University.

Once a glTF model is imported into the editor, all of its materials are available to be tweaked and customized. This added flexibility and control will greatly enhance the workflow of developers and allow them to tweak the appearance of assets without having to fire up Blender.

Another great benefit of the new glTF import feature is its integration with PlayCanvas’ Template system. The PlayCanvas Template system allows developers to create reusable and modular components that can be trivially reused across multiple scenes. With the integration of glTF import, developers can now import their 3D models and scenes, and then directly edit the hierarchy, attaching scripts and other component types to the imported scene nodes. This will allow them to create complex and interactive 3D scenes quickly and easily, with minimal coding.

Additionally, the glTF import feature is also integrated with PlayCanvas’ animation system. The PlayCanvas animation system allows developers to create and control animations on their entities and characters. When importing animated glTF/GLB, developers can now quickly set up an Animation State Graph to build simple loops or complex transitions. This will allow them to create more dynamic and interactive 3D scenes, with minimal effort. Check out how it can be done in just a few seconds:

CC0: Low poly fox by PixelMannen CC-BY 4.0: Rigging and animation by @tomkranis on Sketchfa.
glTF conversion by @AsoboStudio and @scurest

In short, glTF import is a major addition to the PlayCanvas Editor, and will greatly enhance the workflow of our users. It allows developers to:

  • Faithfully import glTF/GLB files from many different applications and stores.
  • Edit the materials and hierarchy of imported glTF/GLB files.
  • Import glTF/GLB animations and quickly configure loops and transitions.

We are thrilled to bring this new feature to our users and we can’t wait to see the amazing projects that will be created with it. If you have any questions or feedback, please let us know on our community forum.

Thank you for choosing PlayCanvas, and happy creating!

PlayCanvas Review of 2022

Happy New Year to you all! 

As we begin 2023, let’s take a moment to look back at last year’s highlights for PlayCanvas, the powerful WebGL engine and platform for creating interactive web content. 

From new features and improvements to exciting projects and partnerships, PlayCanvas has had a busy and successful year. In this review, we will cover some of the key developments and achievements of the platform, and how they have helped to advance the capabilities and potential of WebGL-based content creation.

The fantastic work done by you!

One of the most exciting aspects of PlayCanvas is seeing the amazing projects and work created by you! 

From games and interactive experiences to architectural visualizations and simulations, the PlayCanvas community is constantly pushing the boundaries of what is possible with WebGL.

To celebrate this work, we’ve created a showcase video with the standout projects and work from 2022.

PlayCanvas Showcase 2022

We are looking to do more of these in 2023 so don’t be shy! Share with us and the rest of the community on Twitter, forums and Discord.

We also wanted to take a deeper dive into the creative process and workflows behind these projects. 

To do this, we reached out to a selection of developers who have used PlayCanvas to create fantastic content across e-commerce, WebAR, games and the metaverse.

In these Developer Spotlights, developers share their experience with PlayCanvas, the challenges and solutions they encountered during development, and the unique insights and approaches they brought to their projects. 

These interviews provide valuable insights and inspiration for other PlayCanvas users and anyone interested in WebGL-based content creation.

Graphics Engine Enhancements

This year, we’ve been laser-focused on adding WebGPU support and glTF 2.0 spec compliance to the PlayCanvas graphics engine, and we’re thrilled with the progress we’ve made.

With Google Chrome set to enable WebGPU by default in 2023, we’re excited to be at the forefront of the future of interactive 3D content on the web, and we can’t wait to see what WebGPU will allow developers to create.

In addition to WebGPU support, we’ve also added support for all ratified glTF 2.0 extensions to the PlayCanvas engine, complete with Editor support for iridescence and dynamic refraction. These features allow developers to create even more realistic and visually stunning 3D content.

But we didn’t stop there! We also released Editor support for Clustered Lighting and Area Lights, which allow developers to easily incorporate hundreds of dynamic lights into their projects. And as it turns out, our users have already been using these new features to add extra flair and fidelity to their projects.

glTF Viewer 2.0 with AR support

We released a major update to the Model Viewer, taking it to version 2.0! This update not only improved the user experience, but also added a host of new features. 

The most notable new feature is AR support with WebXR (Android) and USDZ export (iOS). This allows users to view glTF models in AR directly from the browser. 

We’ve also made the UI more streamlined and mobile-friendly, grouping related functionality together for easier use. Rendering has been improved with the ‘High Quality Rendering’ option, which enables supersampling to smooth out jagged edges along polygons and high resolution reflections for more realistic rendering.

Tools Updates

We’ve been continuously improving the Editor, making it even more powerful and user-friendly for our developers.

These include:

  • Infrastructure upgrades across the board with benefits to all users including:
    • Faster download speeds for published build zips across the world.
    • Faster asset delivery with up to 50% improvement in loading projects in the Editor and the Launch Tab. 
    • Zero downtime deployment for services.
  • More powerful Scene Hierarchy Search that searches components and script names.
  • Creating Texture Tool to inspect textures and convert HDRIs to/from cubemaps (also open source!).
  • Adding GitHub sign-in.

The project dashboard has gotten a huge refresh and can be accessed in-Editor. It includes searching and sorting of the project list as well as being able to manage teams and settings without leaving the Editor!

Version Control also got some major features this year, including the addition of the Item History and Graph View, which make it easier to track changes to your projects. And looking ahead to this year, we’re planning to make some of our REST API public, so developers can automate flows for CI and tools.

Thank You

As we wrap up our 2022 review of PlayCanvas, we want to take a moment to thank all of our users for their continued support and for the amazing projects and work they have created with PlayCanvas. 

Your creativity and innovation inspire us to continue improving and expanding the capabilities of our WebGL engine and platform.

We can’t wait to see what the new year brings and the incredible projects and work that our users will create with PlayCanvas. Whether you are new to PlayCanvas or a seasoned pro, we hope that you will continue to be a part of our community and push the boundaries of what is possible with WebGL-based content creation. 

Thank you again, and we look forward to seeing what you will accomplish in the new year!

PCUI Framework Migrated to TypeScript

PCUI is the open source, front-end framework for building amazing web-based tools like the PlayCanvas Editor, glTF Viewer, Texture Tool and more!

Today, we are excited to announce the release of PCUI version 2.10.0! This new release includes a number of significant updates and improvements that will make building web tools with PCUI even easier and more efficient.

One of the biggest changes in this release is the migration of the entire source code from JavaScript to TypeScript. This will provide a number of benefits to developers, including improved type checking, better code completion and IntelliSense in IDEs, and easier maintenance and refactoring of code.

In addition to the source code migration, we have also released a new API reference manual built with Typedoc. This will make it easier for developers to understand and use the various APIs and components available in PCUI.

TypeScript developers will also be pleased to know that we have improved the TypeScript declarations in this release, making it even easier to use PCUI in a TypeScript project.

Finally, we want to highlight the open source nature of PCUI. We believe in the power of the open source community to build great software together, and we encourage open source developers to get involved with the project. Whether you want to contribute code, report issues, or just provide feedback, we welcome your participation. Explore the PCUI repo today on GitHub!

Thank you for using PCUI, and we hope you enjoy the new release!