This article is dedicated to 3D artists and designers who would like to create and customise a 3D Room optimized for Wonda in third party programs like Blender.
(For a general overview of the process of importing a room in Wonda, please read this article)
About Rendering and format
Wonda is relying on three.js which is a JavaScript library used to create and display animated 3D computer graphics in the browser using WebGL. We support both glb and gltf formats.
General Recommendation
Format: .glb or .glTF
Max Poly count: 50k (decimate the model if needed. See how to do with Blender)
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: Each exported material will create a draw call in the runtime renderer. We want to reduce the number of material as much as possible
Max file size: 20Mo
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