Designer Guideline

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, so there's nothing to install - you can 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

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.

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

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

3D Asset Guide

1. Models – 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. Materials – 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. Textures – 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. Collisions – Make sure to use low-poly models as collision meshes for your scenes. Don’t use original highpoly 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.

3D Asset Guide

Recommended parameters

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

Performance

Asset resources

Importing Assets

1. Go to ASSETS and create folders to import your assets into.
2. 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 your cubemaps. Go to Settings, search for RENDERING, then add the cubemap to the Skybox field.
4. Set the player spawn point. Create an Entity, rename it to “spawn-point”, then add “spawnpoint” as a tag in the Tags field.
5. 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.
6. 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.

7. Configure material settings. Set Shading to Physical and place each texture in the correct channel.
8. 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.

9. 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.

10. Check 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.
11. Save the project. 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.

    All project data is stored on the PlayCanvas cloud server.