Tutorials regarding the open 3D webviewer and handling of .glb webfiles from within Blender
* General information about the viewer and Blender
* Short shader overview settings for .glb file export
* Basic file setup and naming for correct export to .glb viewer-format
* General export to a .glb file for the viewer
* Viewer hosting on webserver, folder structure, subset-files
* Basic user and model options in the viewer
General information
Viewer code
For the development of our viewer-code we used the script library from the free web rendering engine Babylon.js which can be found at: https://www.babylonjs.com/
Blender 3D software
We use the free and open-source 3D creation suite Blender : https://www.blender.org/download/ (currently we are using version 4.4.3)
We will not provide in-depth info about the many Blender settings and options, the internet has good tutorials for specific cases. We assume some basic knowledge regarding Node / Shader setup etc. We will show a default shader setup (with optional color / image map/normal map) together with the Principled BSDF node, for correct export to a .glb file. Our own open 3D anatomy model can also be used as a start for production and insight.
Short shader overview settings for .glb file export
glTF Binary (.glb) as export (and import) file format for web 3D
A single .glb file with all mesh data, image textures, and related information packed into a single binary file will be generated for use in the open 3D viewer.
Shader overview
Many material shader settings and options for .glb from Blender are explained in detail at: https://docs.blender.org/manual/en/latest/addons/import_export/scene_gltf2.html Below are just some pointers for basic setup and use.
Base Color
The .glb mesh base color is determined by looking for a Base Color input on a Principled BSDF node (see image below). If the input is unconnected, its default color (the color field next to the unconnected socket) is used as the Base Color for the .glb mesh material.
Image Texture
If an Image Texture node (image wrapping around object,see image below) is found to be connected to the Base Color input, that image will then be used instead as the final .glb mesh base color.
Normal Map
Normal maps are generated from high poly to low poly meshes through so-called baking into special texture image files. They provide fast/low-size calculated surface height/depth detail image textures for efficient low poly web model files like .glb. Detailed information about the complex topic of retopology (high -> low poly, mesh simplification using Blender tools, decimate modifier or external add-ons) and baking of final normal map textures is beyond the scope of this basic tutorial but can be found in detailed YouTube tutorials.
To use a generated/baked normal map image texture for a mesh in output .glb files, connect it through an image texture with its color output to a Normal Map node color input, and then connect the Normal Map normal output to the Principled BSDF node normal input (see image below). The Image Texture node for a normal map texture should have its Color Space property set to Non-Color. Also, the Normal Map node itself must remain on its default property of Tangent Space You can change the strength (amount of surface bumpiness).
Basic file setup and naming for correct export to .glb viewer-format
As mentioned before, keep in mind that a working .glb file in the viewer can also be re-imported and worked with in Blender again later!
Outliner Menu : Naming parent empties and object meshes
When you have a model ready in Blender, all objects for one group should be organized under their own parent empties (orange spoke icon). The parent empties will serve as menu names in the viewer from which structures can be chosen. If you want the viewer to clone left structures you will have to put related right-sided objects with a name ending in .r in their empty/parent whose name ends with _right (see picture below). The final exported .glb file should also start with overview_ in that case (like our own overview_demo.glb file). Normal objects / not to be cloned and their empties can have any other naming which will be used directly in the viewer menu.
Finalizing actions before exporting
To be sure that there are no wrong pivot points or transformations in objects, you should select all mesh objects in the viewport and choose Object - Set Origin - Origin to Geometry For transformation defaults choose Object - Apply - All Transforms (see pictures below).
General export to a .glb file for the viewer
Normally, select the 3D object(s) you want to export in Blender's 3D viewport, you can also export everything without selection. For export, go to File - Export - glTF 2.0
Most export option defaults are ok, but in the export panel check the following:
Include : Normally you export all objects, but when you have selected (sets of) objects you can choose option ‘Selected Objects’ here
Transform : Keep default
Data : Turn off Shape Keys option and Skinning option, further defaults are ok. Also check option Compression click its arrow and choose a reasonable compression level (check result in viewer). We use high levels ourselves (like 6 or 7). Under Mesh options Uvs and Normals should already be on/default.
Animation : Uncheck / disable
After naming and saving the final .glb file you can upload and check it online in the viewer. As mentioned earlier, if you want cloning in the viewer from right objects you need to arrange objects in the outliner menu with specially named empties (_right ending) and their right-sided objects (.r ending) and also rename or save the .glb export file to something which starts with overview_
Always check the final exported .glb model file online!