Porting Unreal Scenes to the Browser with PlayCanvas – Developer Spotlight with Leonidas Maliokas

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 Leonidas Maliokas, a freelance web and games developer for Solar Games.

He will show us how Solar Games ported a metaverse experience from Unreal to PlayCanvas in the video presentation below. Specific areas covered are:

  • Converting scenes and assets from Unreal to PlayCanvas
  • Runtime and load-time optimization
  • Lighting and post processing
  • Multiplayer with Colyseus
  • Ready Player Me avatar integration
  • Spatial-aware audio chat with Agora

Presentation Slides

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

Hey, I’m Leonidas from Solar Games (formerly known as Pirron 1)! I’ve been working with interactive 3D websites since 2012. I used to work as a civil engineer before turning my hobby and passion for gamedev into a full time job using PlayCanvas.

Together with doing PlayCanvas contracts of all sorts, like product configurators, games and promotional sites, I’ve been researching how to extend the PlayCanvas engine and editor. Adding open world terrains, special effects and easy to use networked controllers to match features normally found in native only game engines, led to founding Solar Games.

We offer Uranus Tools for PlayCanvas, a collection of plug and play scripts to supercharge your PlayCanvas creation pipeline. You can find out more about our company’s services at https://solargames.io.

We are also working on Aritelia, a procedurally generated open world social MMO in PlayCanvas. This is still in development but you can already give it a try with the pre-alpha tech demonstration that was released last year.

Why did you choose PlayCanvas? 

It was actually an easy choice for us: by reviewing the mainstream WebGL libraries and platforms, PlayCanvas did stand out for:

  • Offering an integrated editor and publishing solution. Even after all these years, the ability to easily share projects and builds and collaborate with your colleagues in real-time is something unique to PlayCanvas.
  • The PlayCanvas team is very productive and professional in the way it moves the platform forward.
  • The open source PlayCanvas engine provides a very effective and easy to use API.

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

The main challenge was the lack of certain features and tools. For example things that you’d take for granted in a native game engine like a terrain system, post effects, automatic instancing and level of detail were missing.

The good news was that even before the PlayCanvas Editor API was officially released, it has always been possible to extend the PlayCanvas Editor. We were able to write our own editor extensions and quickly make them productive in our development pipeline.

Other developers and companies became interested in our extensions and we started offering them in our company’s asset store.

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

Several concepts like rendering, resource loading, game logic and state management are quite similar. But there are some unique concepts when it comes to web-based experiences that can be challenging. 

In particular, download times, different display sizes and pixel ratios, a broad spectrum of device specs, and also platform and browser compatibility.

Taking into account these factors is mandatory when building a high-quality HTML5 experience.

What are the team’s favorite features of PlayCanvas?

Our 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. Seiously, not only HTML5 devs but also native game devs should give PlayCanvas a try. It’s a great tool to quickly be productive!

Other than that:

  • Asset pipelines like enabling texture compression.
  • The engine API and the constant addition of new features by the PlayCanvas team.
  • The community – many greetings to everybody!

What is on the feature wishlist for PlayCanvas this year? 

  • Having the PlayCanvas WebGPU renderer available to play with.
  • Full support of the new node based shader editor.
  • Asset variants for specific platforms e.g. serve smaller textures on mobile.

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

It’s definitely an exciting time for developers and companies working with HTML5 content. Both the technology has moved forward with standards and frameworks being more robust and powerful than ever, and the devices capable of running HTML5 experiences are very capable.

The metaverse is already leveraging HTML5 to deploy worlds and experiences across traditional web2 and newer web3 websites.

Pixel streaming is the only valid contender when it comes to what HTML5 can offer. I would definitely welcome a feature where pixel streaming is a viable option since it’s a great concept. But right now I don’t see this happening soon.

There are so many opportunities around HTML5 and I see a very positive future for everyone involved.

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

Thank you for this opportunity to showcase our work!

Useful links:

Stay tuned for more Developer Spotlights in the future!

Web AR Experiences – Developer Spotlight with Animech

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

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.

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

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.

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:

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:

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!