Asset Requirements
This page describes the specifications for optimized 3D models.
Last updated
This page describes the specifications for optimized 3D models.
Last updated
WebGL operates with inherent performance and resource constraints, especially when targeting a wide variety of devices such as mobile and standalone VR. Therefore, it's crucial that you heavily optimize your assets to ensure a fluid experience for all users.
3D Assets are different from .vrms, and therefore require different considerations when creating them. If you are creating assets to use in your space in Unity the following guidelines will help you create assets that look good and work well in Mona.
To ensure that your assets work well in spaces and don't slow down the experience too much it is highly recommended to follow the guidelines below when creating your assets.
To put it simply however, you can use the following chart. Note how the polycount is in triangles, rather than polygons :
Less than 4MB in total
Less than 8MB
Less than 12MB
Less than 1,500 triangles
Less than 3,500 triangles
Less than 10,000 triangles
1 Mesh
1 Mesh
1-2 Meshes
1 Material
1 Material
1-2 Materials
512 x 512 total textures *
512 x 512 total textures *
512x512 individual textures *
*Note how the textures differ from Total and Individual. Total means that all your textures add up to the target textures. So instead of having a diffuse, normal, smoothness/Metallic, and emissive texture at 512x512, they would actually be 256x256 each to add up to a 512x512.
Individual would be 512x512 for each texture type. Textures play the largest part in file size so keeping these as low as possible is recommended.
Web browsers have a maximum memory allowance per tab, around 2GB, regardless of the device's power. In this memory space, we need to store our website's front end, the main virtual space, all the players and their avatars, as well as other elements.
Consequences of Overuse: Going over the recommended memory usage can lead to issues. More memory-heavy spaces will accommodate fewer users, making them feel less lively. Additionally, performance can suffer, causing lag, slow responses, or even crashes, which isn't ideal for an immersive virtual experience.
High polycounts can lead to performance issues, especially on lower-end devices or when many objects are present in a scene.
Make sure to note the difference between polygons and triangles as these can be different numbers. A simple summary is that triangles is double the number of polygons, but this does not take into consideration polygons made of 5 or more sides, also known as Ngons. This is why Triangles are used as a baseline.
As noted above there are recommended polycount guidelines for assets, but here are some example polycounts for different types of objects :
Small / Simple / Less important Objects (lamps, rocks, etc.): ≤ 500 triangles.
Medium sized / Intermediate Objects (large furniture, small structures): 500 - 3,500 triangles.
Large / Complex / Important Objects (large buildings, significant structures, hero assets): 3,500 - 10,000 triangles.
File Size Constraints: The file size primarily depends on object complexity and texture count. A single large asset can be up to 12MB. However, we encourage smaller assets which remain under 4MB unless its a particularly important asset.
Balancing the polycount to the size and importance of the asset is very important. The vase above would be a small asset. If it was important to the environment, you could use the left most example. If it was less important, you could use the middle example. If it was very far away and in the background you could use the right example.
Note how the small examples at the top right of the asset don't look very different. Even though the polycount is significantly different. If you are designing the asset to be used in engine such as Unity, you can use Level of Detail, or LODs. This utilises all three assets and displays each according to its distance from the camera. For more information on these, check out Optimizing your Space.
As textures take up the largest amount of filesize it is important to keep these as few and small as possible with the following as a rough guide.
Resolution : 512x512 pixels or lower per texture. Higher resolution is permissible in unique cases, but always consider its memory implications.
Count : Try to use as few textures as possible to reduce memory consumption.
When considering texture resolution for 3D objects, it's a balance between visual detail and memory consumption. Here's a way to visualize it:
1 texture at 1024x1024 consumes around the same memory as 4 textures at 512x512
1 texture at 2048x2048 consumes around the same memory as 4 textures at 1024x1024
or 16 textures of 512x512
Compression: Texture compression may shrink file sizes initially, but it doesn't reduce memory usage in Mona itself. In other words, smaller files doesn't necessarily mean less memory use or better performance in the space itself. Note that Mona does not support Crunch Compression.
Each additional material increases draw calls, which can slow down rendering. Aim to reduce and simplify when possible.
The simplest approach is to use one material per asset. If you have many assets though, this can be a lot of Draw calls.
Trim sheets and texture atlases are advisable in order to reduce the number of materials on assets.
Palette Texturing is a fantastic approach to creating an entire space with one material.
There are a number of aspects to consider when modeling your assets apart from just the total polycount such as sub-meshes, topology, UV Mapping and Backface Culling.
For objects comprised of several distinct meshes, consider merging them if it doesn't compromise their appearance or functionality. Reducing the number of meshes minimizes draw calls, enhancing performance.
Remove any unseen or unnecessary vertices, edges, and faces. The end user may not see them, but the camera will, so internal or overlapping faces should be removed to optimize performance.
Aim for clean and efficient UV maps to optimize texture usage. Familiarize yourself with techniques like Overlapping UVs, Trimsheets, Texture Atlasing, and Seamless Tiling textures. These approaches can significantly enhance the efficiency and visual fidelity of your assets.
As game engines render only one side of a polygon, ensure your models are built with this in mind. Unity does not render, or culls, the backfaces of polygons in objects by default, so make sure all your normals are correctly oriented.
In terms of 3D model supported shaders we support several variations of the Standard PBR shader (Standard Metallic, and Standard Specular).
Albedo Map : Determines the color of the material. It can include transparency if the texture has an alpha channel.
Metallic / Roughness Map : As .glb's use their own shader it is different from the Unity standard shader. The red channel defines which parts of your model are metallic. The green channel serves as the Roughness map.
Normal Map : Provides the illusion of surface detail (like bumps and dents) without adding extra polygons.
Height Map : Used for parallax mapping, giving additional depth illusion on the surface.
Occlusion Map : Defines areas of ambient occlusion, making crevices and corners look naturally shaded.
Emission Map : Specifies which parts of your model should glow.
It is possible to make custom Shaders in a Mona Space with the Unity Shader Graph which is included with Unity, or 3rd Party tools such as Amplify or Shader Forge.
If you are using Unity Store Shaders there may be issues with complex shaders as Mintable Files will break any dependencies on export. Be sure to test this by importing your Mintable Files into a new project to make sure there are no issues.
When creating 3D assets for our platform, it's crucial to balance detail and performance. While detailed assets are appealing, we need to ensure they run smoothly in WebGL. Beautiful assets don't look great at 5 frames per second.
If some details won't be noticeable, it's recommended to leave them out to save processing power.
Alpha textures, which add transparency to objects, should be used sparingly. Only apply them where necessary, like for glass or foliage, as they can impact performance considerably. If possible, use more performant versions of transparency. 'Cutout' is better than 'Fade' which is better than 'Transparency' on the material settings.
Optimize for Low-Spec Devices
Many users may access our platform on less powerful devices. Make sure your assets are optimized to work well on these devices, look at our minimum specs to run Mona.
