Dear all,
I am trying to replicate the look of the material ball from unigine engine into babylon.js. The material ball appears as follows in the Unigine engine preview window.
However, it appears as follows in babylon.js
There are significant differences in the appearnces of the two models. The unigine output appears more metallic whereas Babylon/js output appears more plastic. I am using the default environment map (environment.dds). I think it might as well be due to the environment map used. What could be other possibilities for differing outputs? Is the default material that is assigned to the gltf file PBR or is it some other material type?
What I have done so far:
The original model that ships with unigine is an fbx file. I converted it to gltf format using the fbx2gltf converter. Then I load my gltf model using BABYLON.SceneLoader.Append function. The mesh loads fine. For textures, I load them separately and update their vScale to -1 because the textures appeared upside down. I also set the normalmap texture invertY to true.
//load all textures
const albedoTexture = new BABYLON.Texture("models/gltf/textures/material_ball_alb.png", scene);
const aoTexture = new BABYLON.Texture("models/gltf/textures/material_ball_a.png", scene);
const metalTexture = new BABYLON.Texture("models/gltf/textures/material_ball_sh.png", scene);
const normalTexture = new BABYLON.Texture("models/gltf/textures/material_ball_n.png", scene);
albedoTexture.vScale = -1;
aoTexture.vScale = -1;
metalTexture.vScale = -1;
normalTexture.vScale = -1;
normalTexture.invertY = true;
Next, I loop through all materials and assign my pbr textures to the appropriate fields in the material. Since the metallness and roughness are stored in red and green channels, I set the values of useMetalnesssFromMettalicTextureBlue to false and useRoughnesssFromMettalicTextureGreen to true.
var materials = scene.materials;
materials.forEach((m)=>
{
if(m.id !== "skyBox")
{
m.albedoTexture = albedoTexture;
m.ambientTexture = aoTexture;
m.bumpTexture = normalTexture;
m.metallicTexture = metalTexture;
m.invertNormalMapX = true;
m.invertNormalMapY = true;
m.useRoughnessFromMetallicTextureAlpha = false;
m.useMetallnessFromMetallicTextureBlue = false;
m.useRoughnessFromMetallicTextureGreen = true;
}
}
Why I could not provide a playground scene?
The model is not public and I dont own it therefore I cannot host it on any server.
