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 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?