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 defines materials using a common set of parameters that are based on widely used material representations from Physically-Based Rendering (PBR). More info: https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#materials
glTF define a material extension KHR_materials_unlit which is used for shadeless material (not affected by light). More info: https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_unlit
glTF shader in Wonda
In all quality, KHR_materials_unlit are parsed as basic material. To check supported map: https://threejs.org/docs/#api/en/materials/MeshBasicMaterial
In desktop, standard materials are parsed as standard material. To check supported map: https://threejs.org/docs/#api/en/materials/MeshStandardMaterial
In VR/mobile, standard materials are parsed as mobile material. Supported maps are the ambient occlusion map, the emissive map and the diffuse map.
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
Constraints related to Three.js
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