3D Assets - Export Guidelines

We collected some general guidelines for your custom 3D assets - please take notice before creating/uploading your model, to ensure optimal results.

Recommended workflow

As of today, Aryel only supports glb and glTF. Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load.

Public-domain glTF files are available on sites like Sketchfab, or various tools include glTF export; if you're unsure which platform to use we suggest starting with Blender, by the Blender Foundation.

Also, here you can find a helpful GlTF Blender Manual, if you need some support creating your 3D models on Blender - please notice we're not affiliated with this platform.

👉 Supported Maps
For best results, the accepted texture maps are as follows:

• Base Color (which may include "baked" Ambient Occlusion, i.e. not rendered in real time)

• Metallic

• Roughness

• Normal Map

• Emissive

👉 Not Supported Maps

• Ambient Occlusion (not real-time, must be overlaid manually on Base Color)

• Tessellation

• Height Map

👉 Best practice

• Pay attention to backface culling for materials where only one face is visible, because there is the risk that it is invisible if seen from "behind" (i.e. in the wrong direction with respect to the normals of the asset).

• Ensure that model normals face outward, to avoid normal mapping and backface culling problems that cause distortion or reduced visibility of the model in 3D space.

• It is recommended not to exceed the following size of the different Image Textures 1024x1024 px

• As for the Normal Map texture, the recommended size is 512x512 px.

• Multiple animations must be grouped in a single NLA Track (otherwise a single "track" is prioritized over the others)

• The poly count does not exceed 35k tris (or performance will suffer)

• The combined file size does not exceed 40MB

• The pivot point is at the base of the model

• The forward vector of the object is along Z-axis

• If the 3D model is displayed with incorrect materials (e.g. metal) put the flag on "Tangents" in the geometry panel during export. (only on Blender)

👉 Supported animations

• Keyframe (translation, rotation, scale)

• Shape Keys

• Armatures/Skinning

• Assets like Particles etc. are not supported.

Troubleshooting

If your 3D model it's distorted, miscolored, or missing entirely, start with these troubleshooting steps:

1. Check the JavaScript console for errors, and make sure you've used an onError callback when calling .load() to log the result.

2. View the model in another application. For glTF, drag-and-drop viewers are available for three.js and babylon.js. If the model appears correctly in one or more applications, file a bug against three.js. If the model cannot be shown in any application, we strongly encourage filing a bug with the application used to create the model.

3. Try scaling the model up or down by a factor of 1000. Many models are scaled differently, and large models may not appear if the camera is inside the model.

4. Try to add and position a light source. The model may be hidden in the dark.

5. Look for failed texture requests in the network tab, like C:\\Path\To\Model\texture.jpg. Use paths relative to your model instead, such as images/texture.jpg — this may require editing the model file in a text editor.

👉 If you're looking for a custom solution for a special project, we can provide the help you need - get in touch to discover more.