The goal of this making of is to present the workflow used to realize this project.
The 3D modeling of the robot remains relatively basic, the goal is not to obtain a mesh too complex to remain relatively light and fast to load. Most of the details will be done in painting to optimize the mesh and have a good compromise between details and performance on the model.
The project must be exportable for the web and readable on most devices available.
The workflow used will be Blender 3d for modeling, UV folding and GLTF export. The painting of the model will be done with Substance Painter and the export for the web with Babylon.js.
The basics of the project.
The goal is not to make a tutorial on 3D modeling in Blender we will highlight the key of the project.
The model is compose of two elements: the body and the wheel. These two elements will each have their own material which will be important later.
The scale of the model does not have much importance but it is advisable to remain coherent and not to have an oversized model, nor too small. Important thing to place your objects well in the center of your 3d universe and especially do not forget to reset the transformations to have position coordinates at [0,0,0], rotation [0,0,0] and a scale at [ 1,1,1].
For that select your model and do 'Shift + Ctrl + A' in blender.
Last important thing to emphasize for the modelization, the model being intended to be diffused in real time, you will have to find the good compromise to have a smoothed aspect on your model without overloading the mesh unnecessarily. You will also play with the smoothing groups or 'Mean Crease' to keep sharp edges! You can also cut your mesh with the Edge Split tool (Ctrl + E).
Important step not to neglect because it will largely determine the final quality of your model!
Indeed, depending on the type of project and the complexity of the model, several alternatives are available to you. Detail your 3d model with a lot of details and make a texture backing later on a low-poly model, use a material for each type of color and different materials ...
This choice is to be defined before you start the folding UV's and the creation of textures. To know that the sub-materials are perfectly managed in Babylon.js. So you can use multiple materials on a single 3d object. This method will allow you to have greater control over the final quality of your object by adjusting the size of your textures.
However, be careful not to overload your model with tetxures in 4k and a multitude of material because you will find yourself with a project with a huge number of MO and infinite loading times and your users will not wait!
For this example the choice was to use only two materials. One for the body and one for the wheel and textures with a resolution of 2048px. For more details on zooms, it would use a material in addition to the body for example ...
If you also used Substance Painter to paint your object have an particular attention to doing a UV unfolding clean because you have indeed a UV selection mode in Painter to create your masks that will depend on it!
Add details and color.
Once your model is finished and UV's are unfolded, you can export to Painter. Small feature the wheel of the robot that can be animated later we must be careful not to create textures of oclusion too quickly. The Backing of the body will be done in a traditional way against we will not use the body to back the wheel not to have the projection of the shadow above.
For the export you can do it in one part (body + wheel) in FBX or separately for this example it will not change much. Note that Painter will not make the difference between your mesh objects but it will use the name and the number of materials you have assigned to your objects.
Again the goal is not to make a tutorial Painter we will not go into details but let's see the key stages of the project (which can obviousness evolve depending on your project and especially its end use).
The project does not need to have texture in 4k so we create a new project in 2048px (which can be changed later) and will not use external files for the moment (you can however load your textures if you have them back in Blender).
Your project creates and your loaded template the first step is to back up your textures in the 'TextureSet Settings'. Once this step is done remember to replace your oclusion backer textures previously in Blender.
You should have in the 'TextureSet List' the name and the number of texture used for the project.
Now having only used one texture for the body will become problematic if we want to apply several different materials and colors to the model. This is where your UV unfolding is going to be important because we are going to create different layer groups for each area we want to paint.
At first we delimit the areas of our object and add the different bump details that have not been modeled in 3d.
Once this step is completed, we begin to position the color zones, adjust the influence of reflection, roughness and then continue to add the different elements of detail. Do not forget that painter substance allows you a very precise adjustment on the influence of your different layers.
Other images have also been prepared in parallel to serve as a buffer to paint the model:
Once you are satisfied with the result you will be able to export your textures.
To export your project you will need to recover BaseColor, Oclusion, Metalic, Roughness and Normal Map for each material. Several options are available to you.
For texture export Substance Painter offers you different configuration options depending on the destination of your project.
We will therefore create a specific configuration for the Gltf export. Nothing very complicated the only peculiarity is to generate a texture in PNG format with in the channel 'Red' the oclusion texture, in the 'Green' the roughness and in 'Blue' the metalic. (You can also do it by hand in photoshop for exemple...).
So now we have three textures exported by material.
Export the model from Blender.
To be able to directly export your model in Gltf format from Blender you will have to install the add-ons available on the KhronosGroupgithub and follow the instalation as indicated here.
Once this step is complete you must connect or import the gltF Metalic Roughness shader to blender. You will find it in the "glTF-Blender-Export-master \ pbr_node \ glTF2.blend" folder that you downloaded.
To connect it do File -> Link -> "glTF-Blender-Export-master \ pbr_node \ glTF2.blend" -> "NodeTree \" and finally select glTF Metalic Roughness.
You will find the documentation on this subject here.
You should now be able to replace your shader with the specific shader.
We will now be able to load the generated texures and connect them to the good channels of the gltf Metalic Roughness shader.
For the BaseColor nothing very complicated it must be connected to the BaseColor. Note that to optimize the loading weight you can convert your image to jpg, there will be a small loss of quality but a big gain in weight!
Then you need to connect the Oclusion_Roughness_Metalic texture to the MatalicRoughness and Occlusion tabs. The Normal on the Normal tab (you can also convert it to jpg, for you to test if there is not too much loss of quality). Noted that you can also add a texture for the emissive and play with the alpha of your texture to create transparency. You will find examples in the links above on the Github of KronosGroup.
Finally, you have to do the same thing for the wheel.
To optimize the output weight, the textures were reduced to 1024 * 1024px for the wheel. Its size being small compared to the body the result remains coherent.
It's up to you to adapt the format and weight of your textures according to your project to optimize the loading time once online.
Last point you can back a shadow on a map to reserve it in Babylon. Finally the body has been duplicated to keep only the part that serves as a visor to be able to apply a material glass directly in babylon.
You can now export your 3d to gltf (or glb in which everything will be compiled into one file). File -> Export -> gltf 2.0. In the options for this project we can leave everything by default. Note that our 3d models do not include any particular modifiers and that the scene is composed only of the body of the robot, its wheel, the visor and eventually the plane of the shadow. (If you have other items in your scene do not forget to select only your objects to export and check 'Export selected only').
Export everything in a folder dedicated to it will be reused later.
Create the babylon project and import the 3d model.
We will not re-write what has already been donehere.
We will create a file 'scene.js' and write our code in it (the name of the file does not matter) .You can also exit the css in a specific file.
To generate your Babylon file with the latest version of the framework and the Gltf extension included ici.
You have two option to tick: the version of babylon (already checked by default) and do not forget to check in loader gltf ( otherwise you will have to include it in addition to your html file).
You must have a babylon.custum.js file (which you can rename as you wish).Last note we will use 'hand.js' rather than 'pep.js' for the touch screen.
The scene.js file contains an initScene () function that is called in the html file. Again this is not the only way to proceed.
The position of the camera has been set to be centered on the robot (hence the interest of centering your objects at the origin of your Blender project).
You have to load a BABYLON.CubeTexture to generate all the reflections. You can create your own reflection textures as shown here.
We use the onMeshLoaded function of the loader BABYLON.SceneLoader.Append to apply the glass texture and the shadow. You will find more information on the loader here.
If you have reached this point you should be able to test your project by opening the index.html file in your browser.
Note that you can play with the material.environmentIntensity and material.cameraExposure settings of your meshes to refine the lighting. Do not neglect the environmental texture that has a strong influence on the lighting scene.
Show demo on-line here.
Contactez nous pour toutes questions ou renseignements complementaires.