How to import an Unreal scene in PlayCanvas?

  • Why import an Unreal scene in PlayCanvas?
  • How to import the meshes?
  • How to import the materials?
  • How to import the textures and map them to the materials?

This tutorial aims to provide steps on how to import an Unreal scene in PlayCanvas.

It assumes a minimal knowledge in using the PlayCanvas and Unreal editors.

Unreal to PlayCanvas

 

Why import an Unreal scene in PlayCanvas?

Unreal engine on its latest version 4 is a complete game engine that offers impressive graphics and effects, alongside many game related features. Many popular games are build with it and it offers a feature full editor for modellers, environmental artists and developers to create with.

What is the Unreal Engine?

The Unreal Engine is a game engine developed by Epic Games, first showcased in the 1998 first-person shooter game Unreal. Although primarily developed for first-person shooters, it has been successfully used in a variety of other genres, including stealth, fighting games, MMORPGs, and other RPGs. With its code written in C++, the Unreal Engine features a high degree of portability and is a tool used by many game developers today. It has won several awards, including the Guinness World Records award for "most successful video game engine."

Unreal Arc Vis

A secondary use of the Unreal Engine that is becoming dominant with architects is for creating real time architectural visualizations. Due to its impressive graphics and material system it can create stunning and realistic scenes.

So where PlayCanvas fits in this? To run Unreal builds a high end system is required together with a big download and installation on a local disk. On the contrary PlayCanvas can be deployed on a regular webpage and also programmed to load assets asynchronous, after the scene has already loaded.

PlayCanvas offers an impressive for a WebGL framework graphics pipeline. It uses a PBR approach to materials lighting as Unreal does.

Unreal PBR Materials

A large part of an Unreal scene can be transferred to PlayCanvas, to benefit of its awesome deployments features and HTML5 interactivity. That way the scene can be embedded in a regular website, communicate with it and enjoy of the traction the internet offers.

There isn't an automatic import/export feature that could work here. But it is a relatively easy process to manually transfer the content. By content we mean the following:

  • Meshes / Models
  • Materials
  • Textures

 

How to import the meshes?

All Unreal meshes are saved in its own format (.uasset) but the Unreal editor offers a very handy Bulk Export feature. It can be used to export any number of meshes and dump them as .FBX models in a folder.

Unreal engine bulk export

The exported .FBX models can be drag and dropped in PlayCanvas and automatically be converted to Model assets. Also all materials will be automatically created as placeholders. We will use them in a while to attach the textures in the right slots.

Now to properly place the models in the PlayCanvas scene you will need to be aware that Unreal uses the Z axis to represent the up vector. While PlayCanvas uses the Y axis. Also Unreal uses the left-hand rule for rotations while PlayCanvas uses the right-hand rule.

Having in mind this difference you will need to swap all transformation values using the following rules:

  • Location/Position, swap the Y/Z values.
  • Rotation, swap the Y/Z values and take the opposite sign for the Y value.
  • Scale, swap the Y/Z values.

Also in most Unreal scenes the default unit is 1cm, whereas in PlayCanvas is 1m. If that is the case with the scene that you are transferring then you will need to divide your values by 100 if you would like to make that change. This is optional.

Unreal transform coordiantes

 

PlayCanvas transform coordinates

 

How to import the materials?

When importing the models in PlayCanvas, materials will be automatically created for each model. If a material is used many times, by different models then several instances of this material will appear in the asset browser.

For example if the M_Bathdub material is used by several models, you will get several materials named like that in your asset browser. This will make it hard when trying to map the textures to that material as you will have to repeat this for each material copy.

A good preperation step here is to remove all materials and re-create them one after the other. You will have to map them manually to all of your models. This will take some effort but at the end you will have a nice and organised asset library that matches very closely your Unreal scene.

PlayCanvas materials

 

PlayCanvas materials

 

How to import the textures and map them to the materials?

In the same manner as the Unreal meshes you will need to Bulk Export from the Unreal Content Manager all your textures. The exporter will save them as .tga files, which is an uncompressed non-web friendly due to its file size format.

Unreal texture export

You will be better off converting those textures to a web friendly format like .jpg (lossy) or .png (loseless). After that you are ready to import them in PlayCanvas. It will be a good idea to switch off the automatic conversion to POT (power of two) when importing textures in the Asset Tasks panel. Because you will have to keep the textures as they were in Unreal to have them map perfectly the models.

PlayCanvas POT textures asset tasks

Now, you are almost finished. The last step to have your models ready for use and PBR rendering in PlayCanvas is to map your textures to the materials you created.

Here we will examine the most common maps/slots used in Unreal and their equivalent in PlayCanvas.

Base Color

The Unreal base color channel is the same with the PlayCanvas diffuse map channel. So map all your base color textures to the material's diffuse map channel.

Unreal diffusePlayCanvas diffuse

Normal

The Unreal normal channel is the same with the PlayCanvas normals map channel.

Unreal normalPlayCanvas normal

Metallic / Roughness / Ambient Occlusion

This maps are the ones that trigger the PBR pipeline. We examine them together because quite often in Unreal the textures for those channels are packed together in the same texture file. PlayCanvas allows you to select which color channel (r,g,b or a) is used each time so you can easily map them.

Here is their equivalent in PlayCanvas:

Metallic -> Metalness

Roughness -> Glossiness

Ambient Occlusion -> Ambient Occlusion

Unreal metallicPlayCanvas metallic

You might need to visually play with the values for Metalness and Glossiness in PlayCanvas to get the same visual result as in Unreal.

In the same manner you can map other channels used in your Unreal materials like Emissive and Opacity/Opacity Mask.

PlayCanvas scene
https://playcanv.as/b/Hfe4AZ19/ , A simple Unreal model rendered in PlayCanvas

 

Is that enough?

This is just a start! Unreal provides a nice post processes stack that enhances the final rendered image a lot.

PlayCanvas has just introduced a new Layers system that will allow new post processes effects to be build on top of it. That way the render quality can come closer and closer to the Unreal scene.

We feel that PlayCanvas complements Unreal and can be used to provide interactivity with Unreal scenes by deploying them in lightweight webpages.

If you find this tutorial useful support us on Patreon!

https://www.patreon.com/playingincanvas