Optimization

The page outlines the general optimization and design recommendations for all creators publishing on VIVERSE, regardless of which platform they are publishing from.

---

Playanvas is a visual development platform for creating interactive 3D web content. Both the tools and web apps you create with them PlayCanvas is a visual development platform for creating interactive 3D web content. Both the tools and web apps you create with them are powered by HTML5. The platform is entirely cloud-based, thus no install are further required- you are able to access your work on any device from a supported web browser.

We strongly recommend taking a look at the PlayCanvas User Manual before getting started so you’ll have an idea about how to use PlayCanvas when you decide to jump in and start making games. Playcanvas Manual

VIVERSE Create uses PlayCanvas editor to create all the virtual worlds and environments you see in VIVERSE Create. This guide describes how to create a project and configure settings so you can start constructing your first scene.

Creating A Playcanvas Project

1

Create New Project

Before you can start using PlayCanvas, you’ll need to create an account. After creating an account, go to your profile page and click the PROJECTS tab. Then click NEW in the upper right.

2

Naming Project

Enter a name for your project. The description is optional and can be filled in later. Click CREATE.

3

Click Edit Button

Now that you’ve started a project, you can dive right into the editor – just click the EDITOR button.

3D Asset Guide

1

Model

Make sure models are game-ready by optimizing them for real-time rendering. Use a reasonable topology that minimizes polygon count. Small details such as text, bevels, and screws can be rendered using textures.

2

UV

Models need to contain two sets of UVs: UV1 for textures, and UV2 for lightmaps. Most 3D modeling software can make decent lightmaps. You can also use the PlayCanvas editor to generate lightmaps. See the Lightmapping topic in the PlayCanvas User Manual for details.

3

Material

PlayCanvas uses the PBR with advanced shading to make sure rendering is as realistic as possible. Single objects can contain multiple materials, but performance should be prioritized (for example, by reducing draw calls). *See the Physical Material topic in the PlayCanvas User Manual for details.

4

Texture

High texture counts can overload the GPU. Try and keep the texture resolution at a reasonable size. Image resolution can’t be higher than 2048x2048, for the best texture quality, use JPGs, PNGs, or TGAs. Try storing RMA textures in different channels to reduce texture count (for example, RGB: R – Ambient Occlusion; G – Roughness; B – Metallic).

5

Lighting

Real-time lighting drastically reduces performance (each new real-time light source results in two draw calls). Try using just one real-time light source to produce shadows for characters and dynamic objects. Use lightmaps for static objects. *Additional HDRI cubemaps are required for reflective objects.

6

Collision

Make sure to use low-poly models as collision meshes for your scenes. Don’t use original high poly models as collision meshes. Also make sure the low-poly models are individual solid meshes. Don’t join and intersect multiple meshes.

7

Export

Name and group your models, then export them (preferably in GLB format). Make sure all textures and animations are packed, and then import them into PlayCanvas.

Recommended Parameter

The assets you create directly influence the look and the performance of your project. Recommended performance and asset resource parameters are listed below.

Overall Performance

FPS (frame rate)	60 or higher
Draw Call	Below 150
VRAM	Less than 400mb
System RAM	less than 500mb

Asset resource

Polycount	Below 30,000 for each model
Texture format	PNG/JPG/TGA
Texture resolution	Up to 1024 x 1024
Materials	PBR shading; maximum material count: 50
Rig bone count	Below 60 (including leaf bones and non-weighted bones)
Bones per vertex	4 bones maximum
Size of each file	60mb maximum

Importing Assets

1

Create Folder

Go to ASSETS and create folders to import your assets into.

2

Import Model

Import your models. PlayCanvas will automatically extract textures, animation data, and other elements from GLB and FBX files and create folders for them.

3

Import Cubemap

Import your cubemaps. Go to Settings, search for RENDERING, then add the cubemap to the Skybox field.

4

Configure Collision

Configure collision settings. Add your low-poly collision models to the scene, click ADD COMPONENT, and then add two physics components: Collision and Rigid Body. For the Collision component, set Type to Mesh, add the intended low-poly model to Render Asset, and then turn off RENDER. Built-in non-mesh type collisions can also be used for models with simple shapes.

Built-in non-mesh type collisions can also be used for models with simple shapes.

5

Configure Model Settings

If the model is a static object in the scene, select Static for the Render component. If the models share the same material and mesh, use Batch Group to reduce the number of draw calls. *See the Batching topic in the PlayCanvas User Manual for details.

See the Batching topic in the PlayCanvas User Manual for details.

6

Configure Material Settings

Set Shading to Physical and place each texture in the correct channel.

7

Configure Texture Settings

Click the image to open the properties panel, then select BASIS in the compression properties window. Click COMPRESS BASIS to complete texture compression. The maximum resolution for textures is 1024 X 1024.

8

Configure Lighting Settings

Add a directional light for characters and dynamic objects, and then in the light properties window, select Static and Cast Shadows. If you bake lightmaps in Playcanvas, remember to disable all baked light, except directional light. If you don’t disable baked light, the scene may crash.

9

Inspect Performance

Turn on the performance monitoring tools (Profiler, Debug, Mini stats, etc.) under the Launch button to check things like draw-calls, VRAM, and FPS. This way, can check whether the scene is overloaded or what’s causing a scene to crash. Make sure all performance data is aligned with the suggested stats.

10

Private Project

Go back to project page and set the project to PRIVATE to prevent any data leakage. Under the TEAM heading, you can authorize other accounts to view or edit projects for better collaboration