This article is dedicated to 3D artists and designers who would like to create and customize a 3D Room optimized for Wonda in third party programs like Blender.

For a general overview of how to import a room in Wonda, please read this article.

About Rendering and format

Wonda is relying on Three.js, a JavaScript library used to create and display animated 3D graphics in the browser using WebGL. We support both glb and gltf formats.

General Recommendation

  • Max Poly count: 50k

  • Max different texture count: 10

  • Max Texture Resolution: 4K. For a better global resolution, split the mesh in multiple parts, each of them can have one distinct material with a 4K texture.

  • Material number: Reduce the number of materials to limit the number of draw calls (direct impact on performances).

  • Max file size: 20Mo

    Note: If you don't know how to edit your model to fit these values you can use third party tool such as RapidCompact.

Material in glTF

glTF shader in Wonda

The core material system in glTF supports a metal/rough PBR workflow with the following channels of information:

  • Base Color

  • Metallic

  • Roughness

  • Baked Ambient Occlusion

  • Normal Map

  • Emissive

Lightmaps and ambient occlusion require a second set of UVs (uv1) to be correctly interpreted by three.js.

Rendering Recommendations

  • To have the best rendering quality in Wonda, materials should be defined with KHR_materials_unlit extension which ensures the best performance and quality (lots of map supports)

  • If baking lightmap/ambient occlusion map is in a different map than the diffuse, you need to make them use a second set of UVs (a different than the diffuse)

Useful information about gltf/glb in Blender documentation: https://docs.blender.org/manual/en/2.80/addons/io_scene_gltf2.html


Did this answer your question?