Skip to main content

Web AR Experiences - Developer Spotlight with Animech

· 7 min read
Associate Partner Support Engineer

Welcome to the third instalment of Developer Spotlight, a series of blog articles where we talk to developers about how they use PlayCanvas and showcase the fantastic work they are doing on the Web.

Today we are excited to be joined by Staffan Hagberg, CMO of Animech.

Hi Staffan, welcome to Developer Spotlight! Tell us about yourself and Animech!

Animech was founded back in 2007, in the city of Uppsala, Sweden. With a mix of 3D artists, engineers, developers, and UI/UX experts, we have a team of 40 people and all the competence in-house. The studio started in the early days of real-time 3D. It was a mix of CAD engineers and developers who realized the power of visualization for selling complex products in the life sciences segment.

Since then, we have visualized pretty much anything you can think of online and offline. We’ve worked in VR, AR, MR, phones, tablets, desktops, and pretty much any other device that has a browser. We have developed VR applications for cars, the first real-time 3D configurator in native WebGL ever developed, one of the world's first configurators for Oculus Rift Devkit and much more.

We have also visualized experiences for hotel safes, medical instruments and lab products for 7 of the 10 largest life science companies, as well as built 3D converters from Unreal to glTF and a bunch of custom tools specially built for PlayCanvas.

Our core business is real-time 3D. We push the boundaries every day trying to invent new ways of using 3D, where our solution makes the difference.

Bathroom Planner for Iconic Nordic Rooms

Why did Animech choose PlayCanvas?

After an extensive search for a WebGL-based engine, we evaluated a few and selected PlayCanvas for its performance, out-of-the-box features, its extensibility and its valuable editor. Our customers expect the highest level of visual quality along with a smooth browsing experience - without the need for an app or plugins. PlayCanvas truly helps us deliver.

As for our artists’ perspective, they think it was (and still is) the most artist-friendly WebGL editor out there, with the added bonuses that it is open source, and supports many important features, such as PBR, tonemapping, render layers, etc.

Did your team face any initial challenges? How did you overcome them?

It's always challenging when customers have high quality and performance expectations. Though, at the same time, that is what drives us. Being able to create stunning 3D experiences linked to real business value is a unique opportunity and challenge. Adding AR to that process helps you to stand out against competitors.

Our particular challenge was to dynamically create an AR model of a procedurally generated mesh as a generic function. Our solution was to create a SaaS service that can take of whatever 3D object you’re looking at in PlayCanvas, and on the fly create AR models for both iOS and Android devices (ARKit or ARCore).

You’ve built several Web AR experiences. Can you tell us a little about them and how important you think Web AR is today?

We have been early adopters of both AR and VR, both as standalone applications and on the web. We believe it's important to use AR not as a gimmick, but as an application that provides real value for the user. For example, looking at how that greenhouse would look in your actual backyard or similar. In that sense, Web AR will get more and more important, both as something that stands out but also as something that provides value for users.

Why do you think that your clients want Web AR in their experiences?

To offer something more to their customers - both in marketing value and actual value. To help users make smarter, more informed decisions.

We have also developed our own web based 3D converter that takes our PlayCanvas 3D models to glTF and USD on the fly. It is a server side solution that takes everything we develop to AR.

How is building a web experience different from a native experience?

You must optimize for both loading time and performance. The application could be run on a wide range of devices – from several years old phones to high-end desktops.

The application is accessible to a wider audience since they don’t need to install anything.

What are the team's favorite features of PlayCanvas?

As a team consisting of both 3D artists and developers, PlayCanvas’ online editor provides a fantastic way to collaborate, prepare and preview our projects before pairing the solution with a stunning web UI or deploying it as a standalone viewer.

Our 3D artists also enjoy how the editor is robust and easy to use, and how its design promotes collaboration. Powerful material settings (per-texture UV and color channel, vertex colors, blend types, depth test/write, etc.), flexible texture compression and a fast response by the team when reporting bugs and requesting features are also great.

What is on the feature wish list for PlayCanvas this year?

As the future for 3D on the web continues to evolve, we are excited to see support for more accessible 3D formats, such as the glTF standard by the Khronos Group, which PlayCanvas are advocating for as well.

Beyond this, here are some things we look forward to:

  • Node-based shader editor
  • Support for editor extensions
  • Post processing (HDR bloom, chromatic aberration, SSAO, motion blur, color grading, eye adaption, etc.)
  • More customizable asset import options
  • Reflection probes
  • Material instances (see Unreal Engine)
  • Debug visualization (see Unreal Engine’s View Modes)
  • Expose currently hidden options in the editor (detail maps, etc.)

How do you see AR and 3D e-commerce evolve over the next few years?

The possibilities are enormous. The question is when do people actually start using AR. It has been around for many years, lots of interesting solutions and demos have been built, but the real value of AR has not reached the masses yet.

I think we are closing in on that though. Just the other day I was about to buy a new espresso coffee machine. One supplier had an AR model online in the e-store with which I could see that it looked good and covered my needs. With just one static USDZ file. It is such an easy way of helping your customer to make the right decision. Imagine how much value you add if you can see configured 3D models in AR and really see the potential of what you are about to buy.

Next phase would be to configure and change your 3D model directly in AR-mode which would make the experience even stronger.

As the graphics quality gets better and better online and the fashion industry keeps on digitizing their customer journey, AR will probably be the best and easiest way of trying on fashion products like bags, watches, jewelry and clothes. It will reduce faulty orders on a massive scale if you can do a virtual fitting before buying stuff online.

Animech helps our customers to get what they want. Simply put: we empower people to make smart decisions through intelligent visualization.

Thank you, Staffan! Is there anything else you'd like to share?

You can visit our website here. You can also follow us on Twitter! You can also check out our other projects here:

glTF Viewer Arrives on Mobile with AR Support

· 3 min read
Elliott Thompson
Software Engineer

Today we’re excited to announce the next major release of our glTF viewer. This version makes the viewer an ideal tool for reviewing how glTF models render on mobile as well as in augmented reality!


View Models in AR on Mobile

Once a model has been loaded into the viewer on mobile, you’ll be given the option to drop into an augmented reality experience. The mode you get currently differs based on the operating system you’re using.

glTF Viewer AR on iOSglTF Viewer AR on Android

Quick Look mode on iOS (left) and WebXR mode on Android (right)

On iOS, the model will be loaded with Apple’s AR Quick Look mode (above left), while on Android the model will be placed into your environment using WebXR (above right).

Mobile-Optimized Design

glTF Viewer Mobile StartglTF Viewer Mobile ControlsglTF Viewer Mobile Hierarchy

It’s now possible to verify the content and rendering of your assets no matter which device you’re working on. The viewer has been redesigned using mobile-first principles, so you can explore glTF content just as well on mobile as you can on desktop. The UI scales up or down depending on the device screen size and takes an uncluttered approach to ensure you can focus on the glTF content itself even on very small screens.

Quickly Load Models on Mobile Devices

When loading PlayCanvas viewer v3.0 on desktop, you’ll be presented with the option to load a glTF model from a URL.

glTF Viewer Start Screen

When this is used, the application will generate a QR code you can scan to share the current viewer scene between your devices or others:

Share with QR Code

New PlayCanvas Theme

The latest release of PCUI (v2.7.0) enables the use of additional themes in applications built using it. This allowed us to apply a new color theme to the model-viewer:

New PCUI Theme

The new muted gray tones of this theme should allow users to more readily focus on their model content. Over the coming months, you’ll begin to see this new theme applied to more applications in the PlayCanvas ecosystem! Be sure to pass any feedback onto us using the issue tracker of the PCUI library.

Open Source

PlayCanvas is fully committed to an open source strategy and our glTF viewer is therefore made available to you on GitHub. It is a TypeScript application built on PlayCanvas PCUI front-end framework and, of course, the PlayCanvas Engine runtime.

These open source projects have been years in the making and would not have been possible without the amazing OSS community. So why not explore our various GitHub repositories and consider making some contributions of your own. We also appreciate feature requests and bug reports, so don’t be shy!


We hope you find the new and improved glTF viewer useful for your projects. Stay tuned for further updates to it in the coming months!

Building WebAR Experiences - Developer Spotlight with Visionaries777

· 10 min read
Associate Partner Support Engineer

Nissan AR

Welcome to the second installment of Developer Spotlight! A series of blog articles where we talk to developers about how they use PlayCanvas and showcase the fantastic work they are doing on the Web.

Today we are excited to be joined by Frantz Lasorne, co-founder of Visionaries777.

Hi! Let's get started. Firstly, welcome to the developer spotlight! Frantz, if you could just tell me a little bit about yourself and your team and your studio.

My name is Frantz and I'm the co-founder of Visionaries777. Actually, we [founders] are three. We started as two French guys. We studied together in France; Interaction Design, and then we created this company about 10 years ago in Hong Kong.

[We currently employ] Around 35 people. We've been working on AR since 2010. It's our main focus. Within the realm of AR, we are involved in 3D real time AR, and all sorts of XR applications.

Me and my business partner were working at Lego in Denmark before, so we started to work on AR back then in the R&D department. We helped Lego bridge the physical and digital to create hybrid play experiences.

Afterwards, we left Lego and started our own company. Lego hired us as consultants to keep working for them for some time. In the early days, we did a lot of collaborations for marketing and promotional events using AR.

Nowadays, the things we work on are more industrial-focused; automotive or luxury. AR is now a properly matured product, with WebGL, Web AR experiences, VR and so on.

Thank you! I'm curious, why did Visionaries777 choose PlayCanvas?

Before, we always used Unity 3D for any 3D real time project, because they have a huge compatibility of hardware platforms. It's quite nice. The only platform they are lacking is the web.

We were looking around, trying to find what is the best platform to develop WebGL experiences. Then, we saw PlayCanvas, opened the editor, and were surprised how familiar it was for us. I think the people who designed the PlayCanvas editor knew Unity and got inspired in terms of the menu and layout. It's very similar to the way [Unity] works. It's just that it's an editor on the web rather than a desktop application. So for us, it was very easy to do the jump.

So far we've been really happy with all the engine capabilities, the loading, how lightweight it is, et cetera. For us, it's the best platform for developing web experiences.


Awesome! So, were there any initial challenges that you guys faced? How did you guys end up overcoming them?

In terms of challenges? I think mostly the model optimizations; how to get the WebGL experience as small as possible, but retaining maximum visual quality. Most of our clients are either automotive brands or luxury brands, so they are concerned about the product that you are looking at on the screen. It's pointless to show a product that you can see the rough edges of. They won't like it in the end.

That was our struggle at the beginning - to try and find the right balance of optimizing enough, but not too much, and be happy with loading time. So it took some trying to get this right and find the right compromise.

Right now, with our current approach and the tools in our pipeline, we’re quite happy. And it's also why we work with Cartier and are now doing all these products on their websites.


That's very interesting. Visionaries777 has worked on several Web AR experiences. Can you tell me how important you think Web AR is today?

It's very important - but we are back to the same problem that we had in the early 2010s, when we relied on markers for tracking. Now with where we are in WebAR we are still very limited. You need something like an image marker, or a floor with a world target, but it's not as stable as if you use AR Kit or AR Core in a native Unity app.

With a standalone Unity application with ARKit and ARCore it's mind blowing what you can do. There's barely any drift, it's super accurate. With web you're still constrained. Tracking is not perfect. There's a lot of drift. So I think the applications we see with the present state of tech are limited, experiences are considered a bit gimmicky. It's getting there, but it still needs to grow.

But at the end of the day, for marketing initiatives, no one wants to install an ad app on their smartphone as a user, as a consumer. You don't want to install a BMW app just to uninstall it three days later because you're done playing around.

These sorts of experiences were fine 10 years ago on an iPhone, but now people have moved on, and have different mindsets - things should be accessible through a web browser directly, not through an app. If it's inside an app, it has to be inside Snapchat, inside Instagram, or inside an app that has more to it than just one AR experience.


Extending a bit from that question, why do you think that the clients you work with want Web AR in their experiences?

Augmented reality has always been exciting for brands to show a product in 3D and also integrate it into [customers’] homes or their driveway. It’s quite appealing for a brand, marketing-wise. Then, for consumers, it's something new, it's fun. You get closer to the product.

It’s key to reduce friction.

You don't have to install things anymore. You download some assets in your web browser, but it's more transparent than going into the store and searching for the app and downloading it.

Brands are definitely interested in WebAR for these reasons, so AR will keep growing. It brings a lot of value. You can try a car in your driveway or you can try a watch on your wrist.

eCommerce in a more immersive way is really the next generation for eCommerce experiences.

When you're building your Web AR experiences, what features does PlayCanvas provide that you think were most helpful?

I think the true value of PlayCanvas is really how they are keeping up to date with all the WebGL standards, improving materials, improving compression, improving loading and so on. And their UI is very easy to use.

When you import your model, it gets converted to the GLB format. It makes it more lightweight, and you don't need to pre-export it as GLB.

On the programming side, it's just JavaScript. You can do whatever you want. It doesn't have any preset for you aside from an orbit camera, but that's not really important. Anyone can build more.

Cool! So, how would you say that building an HTML5 or a WebGL experience differs from developing a native experience or a native application?

You have to always concern yourself with the loading. In some cases, when you develop a web experience, you have to load something quickly for the user to play with right away. Then the model and the rest gets loaded progressively afterwards. Let's say you have a car and this car has variants with different wheels, roofs, and so on. All these elements need to be loaded, but you shouldn't load everything at once. Otherwise, the download would be huge.

I think that's one of the main differences compared to designing a native application, aside from UX/UI, because you also need to be concerned about the browser for web experiences. Are you using it in portrait? On a desktop? Do you need to embed it into an iframe? Is it going to be full screen?

Those are questions that are quite different from a standalone application where you don't need to concern yourself about the surroundings of the app.

So next up; we went a bit over this in one of the previous questions I asked. You explained how you guys use some of the features of the editor, but is there any feature PlayCanvas provides that is the team's favorite?

To me it's more that we can collaborate. The collaboration aspect of PlayCanvas is quite nice because you have one project and anyone can access it from their desktop machine on the web.

And you can, as an artist, populate the scene with the assets. Then, the developer can work with it. In parallel. And you can have someone to check things, maybe not edit anything, but do quality control. The collaboration aspect is one of the best features I would say that makes [PlayCanvas] so nice to work with.

As part of the interview, but also as a feedback exercise, what is a PlayCanvas feature that would be at the top of your wishlist?

It would be great if the PlayCanvas editor had a feature to assign different texture resolutions for different platforms (mobile or desktop), similarly to how Unity does it for different devices. It would make it so much easier to manage rather than doing it with code and tagging etc.

Thanks for sharing the feedback! Going back to another question, how do you see HTML5 and web experiences evolving over the next few years?

I think it will grow. We see two things at the moment, WebGL experiences and cloud streaming, which is not HTML or WebGL at all. Some brands will choose either doing a WebGL configurator, or a cloud streaming configurator. Those are two different approaches. I have a tendency to prefer WebGL because you have a much more crisp image.

Also, once the experience is loaded, it's much more responsive to commands. You're not constrained by latency of streaming and video glitches. Those are things that put me off when I do classroom experiences.

So I think WebGL will continue, especially right now with the whole discussion around the metaverse, and when we talk about the necessary file transmission. GLTF, USDZ, USD - those files can be translated from one platform to another, so I think there's a lot of potential for these.

I think the metaverse will most likely be built in WebGL rather than in cloud streaming, but I could be wrong.

Either way, I believe that in the end, it's very important for brands to start digitizing all their assets. For example, Cartier chooses to have a WebGL viewer and recreate every single one of their products into GLB formats. I think it's quite smart because once you have them, you can reuse them anywhere on the web; whether it's in their website, the metaverse or a Snapchat AR filter.

I think there's lots of opportunities, and as 5G expands, compression format algorithms get more efficient, things are going to be smaller and we'll be able to build richer experiences on the web. I think there's a long positive future, and cloud streaming is not necessarily going to replace it.

Thank you! Those were all the questions I had. Thank you for your time, Frantz! Is there anything that you would like to promote, a website, a Twitter handle, or a job opening that you would like to share?

We have a website purely focused on product configurators, utilizing WebAR:

And a main website too, where we show all of our work:

We’re also on twitter! Follow us there:

Porting from Unity to PlayCanvas - Developer Spotlight with Christina Kaliora

· 5 min read
Steven Yau
Partner Relations Manager

Welcome to Developer Spotlight! A new series of blog articles where we talk to developers about how they use PlayCanvas and showcase the fantastic work they are doing on the Web.

Today we are excited to be joined by Christina Kaliora, a freelance web and games developer for Solar Games.

She will showing us the how she recently ported the John Lemon's Haunted Jaunt Unity project to PlayCanvas in the video presentation below covering areas:

  • Exporting the scene from Unity
  • Performance concerns
  • Use of shaders and effects
  • And more!

Presentation Slides

Hi Christina, welcome to Developer Spotlight! Tell us about yourself and your studio

Hello! My name is Christina Kaliora and I’m a Games Programmer. I wrote my first line of code in September of 2016 inside PlayCanvas! I still remember that excitement when I saw my cube rotating! That’s when I said "This is what I wanna do!".

After that, I started learning more about PlayCanvas and experimenting with other Game Engines, like Unity. Later, I attended an online coding bootcamp about web development, and since then, I work as a freelancer both for Web Development projects and web based games (using PlayCanvas).

Also, together with my husband and some friends we run a company called Solar Games, where we develop tools and projects for PlayCanvas.

Why did you choose PlayCanvas?

PlayCanvas caught my attention from the very beginning! Some of the main reasons me and my team choose PlayCanvas:

  • PlayCanvas is one of the most powerful web based game engines out there.
  • It is the only web based game engine that has such a powerful and collaborative editor.
  • It has amazing support in the forums and discord and also, a great team to back it up!
  • It has very good performance!

What were the initial challenges and how did the team overcome them?

Personally, when I started, I had a very hard time getting a good grasp of PlayCanvas. There weren’t that many tutorial projects back then and since I was pretty much a newbie in coding, I had a very hard time understanding the coding concepts of game development.

What helped me there, was building smaller projects focused on specific areas, for example physics, player movement, raycast, UI, shaders etc. That way, I learned how to work with the API and I was able to start building larger projects/games.

Also, studying the engine’s code is something that any aspiring PlayCanvas developer should get into and helped me personally! Learning the inside and out of the game engine you're using will help you tremendously!

How is building an HTML5 game/experience different from a native game/experience?

It is quite different in my opinion. Since things on the web work a bit differently, there are also different things that need to be taken into consideration. For example, loading times and download size are some very important things that web game devs need to pay attention to.

No one wants to wait over 30 seconds for a web page to load, right?

What are the team's favorite features of PlayCanvas?

Favorite feature is the editor, by far. The fact that it is collaborative in real time, makes PlayCanvas the best tool for teams to work together. Also, the fact that PlayCanvas has version control integrated, is pretty cool! Something else I would add, is that PlayCanvas provides a very clean API to work with.

What is on the feature wishlist for PlayCanvas this year?

Oh, there are so many things, but I will short down my list down to three:

  • More starter templates!
  • I would love to see the list of post processing effects growing! There isn’t something better than a web based game with nice graphics and effects. It would be great to provide developers with the tools to do so.
  • Better particle editor. We need more VFX artists in PlayCanvas!

How do you see HTML5 games/experiences evolve over the next few years?

I think that, since the devices are becoming more and more powerful and with the webGPU on the way, web games will become more and more popular.

Imagine, being able to play your game both on any web browser, phone, tv without the need of downloading and installing anything? It’s mind blowing to me!

And now with all the Metaverse buzz I see that web based experiences are gaining more and more attention.

Thank you very much for your time and we look forward to your presentation

Thank you very much for inviting me!

Useful links:

Stay tuned for more Developer Spotlights in the future!

Our 2022 developer showreel is live!

· One min read
Steven Yau
Partner Relations Manager

Welcome to our 2022 showcase, showing some of the very best WebGL browser games and experiences made with PlayCanvas!

We would like to thank our users that have allowed us to show their awesome content in this showcase:

See more games and experiences on Made with PlayCanvas!

PlayCanvas Releases glTF Viewer 2.0

· 4 min read
Steven Yau
Partner Relations Manager

Today, we are excited to announce the 2.0 release of our glTF viewer.


glTF (or Graphics Language Transmission Format) has become ubiquitous since its introduction in 2015. With support for advanced shading techniques, it is particularly important for graphics intensive applications like product configurators/visualizers.

With so many companies now relying on glTF to transmit graphics data over the web, it is critical that high quality tools are available to work with the format. This led us to develop v2.0 of our popular glTF viewer.

Let’s take a closer look at what’s new.

Improved glTF Specification Support

The glTF format is managed by the Khronos Group and defines a base specification along with a variety of extensions. The first version of the viewer supports 100% of the base spec plus the following extensions:

  • KHR_draco_mesh_compression
  • KHR_lights_punctual
  • KHR_materials_clearcoat
  • KHR_materials_unlit
  • KHR_mesh_quantization
  • KHR_texture_basisu
  • KHR_texture_transform

The new and improved viewer released today adds support for:

  • KHR_materials_emissive_strength
  • KHR_materials_ior
  • KHR_materials_sheen
  • KHR_materials_specular
  • KHR_materials_transmission
  • KHR_materials_variants
  • KHR_materials_volume

These extensions provide developers with the ability to achieve exciting new graphical effects.

Let’s take a look at three of them.

Advanced Refraction

The volume, transmission, and ior glTF extensions can simulate how light is refracted through transparent materials. This leverages PlayCanvas’ grab pass functionality to ‘grab’ and sample the back-buffer.

Dragon with IOR, Transmission and Volume

Realistic Rendering of Fabrics

glTF’s sheen extension enables developers to faithfully reproduce materials with the appearance of certain fabrics. This is incredibly important for production visualization (home furnishings, apparel, vehicle interiors, and so on).

Cushion with Sheen

Material Variants

Most product configurators allow the user to modify the appearance of a product. For example, a specific style of chair might be upholstered in various fabrics in various colors. Or a pair of shoes might be available in a number of different designs/patterns/colors.

Sneakers with Material Variants

The PlayCanvas viewer now detects any material variants in the loaded scene and permits their selection in the interface.

Material Variants in glTF Viewer

Rendering Enhancements

The new viewer introduces a couple of interesting features if you care about rendering fidelity.

First up is a ‘High Quality Rendering’ mode (which is a toggle in the Camera control panel).

Enabling this feature activates supersampling which is a type of antialiasing that aims to eliminate jagged edges along polygons. It progressively re-renders the scene many times when the camera stops, slightly offsetting and then compositing the rendered image over previous frames.

You can see both in action below, deliberately reduced in resolution to show the effect:

glTF Viewer High Quality Mode

Also new is sharper reflections for smooth reflective surfaces. The viewer will now use the full resolution skybox cubemap in the engine’s image-based lighting pipeline which looks crisp and far more realistic.

High Quality Reflections

Interface Redesign

Initially, all information and controls for the viewer appeared in the leftmost panel. Viewer 2.0 has been completely redesigned to more intelligently group specific areas of functionality. The leftmost panel remains but now just shows scene info and a tree view showing the loaded scene hierarchy.

glTF Viewer Left Panel

Buttons to control viewer settings can now be found at the bottom of the 3D view. These buttons open options for camera, lighting, and debug rendering (plus a fullscreen toggle).

glTF Viewer Buttons

If you load a scene that contains animation, animation controls will automatically appear:

glTF Viewer Animation Controls

The controls allow you to scrub through an animation, select playback speed, and even choose which animation clip to play should the file contain more than one.

Lastly, there is also now a button bottom right to download a rendered PNG of the 3D view.

glTF Viewer Download Screenshot

Open Source

PlayCanvas is fully committed to an open-source strategy and our glTF viewer is therefore made available to you on GitHub. It is a TypeScript application built on PlayCanvas PCUI front-end framework and, of course, the PlayCanvas Engine runtime.

These open source projects have been years in the making and would not have been possible without the amazing OSS community. So why not explore our various GitHub repositories and consider making some contributions of your own. We also appreciate feature requests and bug reports, so don’t be shy!


We hope you find the new and improved glTF viewer useful for your projects. Stay tuned for further updates to it in the coming months!

Improvements and changes to Shader Chunks - PlayCanvas Bytes

· One min read
Steven Yau
Partner Relations Manager

PlayCanvas Bytes is where we talk about upcoming work with PlayCanvas and related topics.

Today we have our tech lead, Donovan and our graphics engineer, Gustav who are here to talk about work they've done and planning to do with the Shader Chunk system

  • 00:00 Intro
  • 00:45 Why are we making these changes?
  • 06:19 Work on glTF extensions
  • 08:50 Versioning of Shader Chunks
  • 10:24 Process for communicating these changes in the Engine 1.55 release
  • 11:00 Who will be affected by these changes?
  • 11:30 Documentation of these changes and where to get help
  • 13:40 Expected new features from these changes
  • 17:15 How are we testing rendering changes?
  • 23:10 Outro

Let us know your feedback in the forums!

Upcoming UI changes to Dashboard and Editor - PlayCanvas Bytes

· One min read
Steven Yau
Partner Relations Manager

PlayCanvas Bytes is where we talk about upcoming work with PlayCanvas and related topics.

We are trialing a new format to better communicate some of the work that is going on with the PlayCanvas team.

Today we have our UX designer, Jasper who will take us through some exciting plans to the new project dashboard and Editor View!

  • 00:00 Intro
  • 00:30 New project creation flow/dashboard
  • 03:56 Changes to the Editor Viewport
  • 05:16 Launch button updates
  • 07:57 New 'Empty' inspector panel
  • 08:50 Making the back button visibility
  • 10:13 Outro

Let us know your feedback in the forums!

Clustered Lighting Open Beta - Have hundreds of dynamic lights in your scene!

· 2 min read
Steven Yau
Partner Relations Manager

Our team has been working on a new lighting system for a while now, and it has reached the stage where we're excited to share it with the community!

Pirron Pool

Pool Demo from Solar Games using Clustered Lighting

The new system leverages the clustered lighting rendering algorithm and represents a significant advancement over our current lighting approach. New benefits include:

  • Increasing the maximum omni and spot light count to 254.
  • Improved application performance with more omni and spot lights.
  • Quick enable/disable of omni and spot lights without expensive shader recompilation.

Some of our early adopters are already using it to enhance scenes dynamically with fireflies at night, gunfire muzzle flashes, and highlighting objects in the world.

We've reached a milestone where the feature is stable, and we invite you all to try it! We are eager to see how you will integrate it into your games and applications.

Full documentation is available detailing all the features and explaining the options. Although Editor integration is still in development, we've created an example project linked in the documentation. This project includes a script that simplifies enabling clustered lighting, which can be copied and pasted into your own projects.

We plan to make clustered lighting the default system in the midterm, with the option to use the current system, as the advantages are significant. In the longer term, we aim to phase out the current lighting system to reduce engine file size, fully transitioning to clustered lighting.

As always, we value your feedback and would love to hear your thoughts on using the clustered lighting in the forum thread here.

PlayCanvas Review of 2021

· 7 min read

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 glTF 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:

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.