Hi, Can someone help me with this?

My imported gltf/glb model doesn’t look exactly the same like I have in the blender. I’m not able to understand why it is happening. Did I not export it correctly from blender? Did I need any specific configuration to add on three js?

Here is the Babylon playground link -

https://playground.babylonjs.com/#Y2A92N

This is the code sample that I tried locally -

import { Engine, Scene, SceneLoader, ArcRotateCamera, Tools, Vector3, HemisphericLight, 
    ShaderMaterial, Texture, Color3 } from "@babylonjs/core";
import '@babylonjs/inspector'
import "@babylonjs/core/Debug/debugLayer";
import '../../style.css';
let scene
const loadGLTF = () => {
    // new GLTFLoader().loadAsync()
    SceneLoader.Append('../../../src/assets/verge3d/', 'test continents6.glb', scene, (scene) => {
        // scene.createDefaultCameraOrLight(true, true, true);
        // scene.createDefaultXRExperienceAsync()
        // // scene.createDefaultEnvironment();
        // scene.createDefaultLight();
        // // scene.activeCamera.alpha += Math.PI;
        // // scene.lightsEnabled = false
        // scene.createDefaultEnvironment({
        //     createGround: false,
        //     createSkybox: false,     
        //     groundYBias: 0.01,   
        //     enableGroundMirror: true,            
        // });
        console.log('scene loaded', scene)
    }, () => {
        console.log('loading...')
    }, (error) => {
        console.log(error)
    '.glb')
    // SceneLoader.ImportMesh("", "../../../src/assets/verge3d/", 'final continents4.glb', scene, (meshes) => {
    //     console.log(meshes)
    // }, () => {
    //     console.log('loading...')
    // }, (scene, message) => {
    //     console.log(message)
    // }, '.glb')
const init = () => {
    try {
        const canvas = document.getElementById("babylonjs-container");
        canvas.style.width = "100%";
        canvas.style.height = "100%";
        const engine = new Engine(canvas, true);
        scene = new Scene(engine);
        scene.useRightHandedSystem = true;
        const camera = new ArcRotateCamera("camera", Tools.ToRadians(90), Tools.ToRadians(65), 10, Vector3.Zero(), scene);
        // This targets the camera to scene origin
        camera.setTarget(Vector3.Zero());
        // This attaches the camera to the canvas
        camera.attachControl(canvas, true);
        // scene.ambientColor = new Color3(1, 1, 1);
        // const light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
        // light.intensity = 0.7;
        // const shaderMaterial = new ShaderMaterial(
        //     "shader",
        //     scene,
        //     {
        //       vertex: "custom",
        //       fragment: "custom",
        //     },
        //     {
        //       attributes: ["position", "normal", "uv"],
        //       uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"],
        //     },
        // );
        // const mainTexture = new Texture("../../assets/verge3d/v3d_exported_image_image_0.jpeg", scene);
        // shaderMaterial.setTexture("textureSampler", mainTexture);
        loadGLTF()
        engine.runRenderLoop(() => {
            scene.render();
    } catch (error) {
        console.log('init error', error);
init()
That’s how it looks in babylon js -
image1918×924 76.5 KB
And that’s how it looks in a blender -
image1920×1025 86.4 KB
island layer -
image1917×975 241 KB
water layer -
image1918×985 225 KB
Am I missing any shading configuration in Babylon js? Or, the exported model missing any shading configurations. I’ve searched a lot but didn’t find any solutions. I’ve just started with Babylon js, didn’t know much. Please help me!!!
              
Lighting is tricky to get right.  In my translation oriented .babylon / JSON exporter for Blender I do a lot of process to get the best approximation.  Here is the spot light python section:
        self.light_type == SPOT_LIGHT:
            self.position = bpyLight.location
            self.direction = Light.get_direction(bpyLight.matrix_local)
            self.angle = bpyLight.data.spot_size
            self.exponent = bpyLight.data.spot_blend * 2
            self.range = bpyLight.data.cutoff_distance
            self.radius = bpyLight.data.shadow_soft_size
I am not sure what is captured from export into GLB interchange format, or how it used on import, but looks like a maybe some of these are not aligned.  Even with a direct translation, I did not get particularly close.
              
Hey, @sebavan Thanks for the response. In the playground example or even in my local code if comment out the createDefaultEnvironment still it doesn’t look the same. If you see in the local code example I’ve given, I’ve already commented on that and just logged the loaded scene.
Even in the playground after commenting createDefaultEnvironment, two of the lights are not visible. It’s gone.
What about the tone mapping and exposure of the light? Can we handle them manually in Babylon?

I think playing with the light exposure and tone mapping could be helpful. What do you suggest?
Please elaborate on this with any example. It’ll be really helpful. Thanks!!!
 Krishna_Vishwakarma:
Thanks for the response. In the playground example or even in my local code if comment out the createDefaultEnvironment still it doesn’t look the same.
Just removing the IBL in Babylon is not the solution as Blender is probably using a IBL for the rendering, so you should use the same one in Babylon.js if you want to get a similar display. Also, have you tested your .glb with another viewer (like https://gltf-viewer.donmccurdy.com/ or glTF Sample Viewer)?
 Krishna_Vishwakarma:
What about the tone mapping and exposure of the light?
You can manage this in the inspector, when clicking on “Scene”:
image309×1110 25.5 KB
              
Hey, @Evgeni_Popov
Just removing the IBL in Babylon is not the solution as Blender is probably using a IBL for the rendering, so you should use the same one in Babylon.js if you want to get a similar display.
By this you mean, I need to use createDefaultEnvironment using blenders’ IBL configuration, right?

If yes, then I don’t know how to check the blenders’ IBL setting. Is there any way we can see this on the blender?
Also, have you tested your .glb with another viewer (like https://gltf-viewer.donmccurdy.com/ or glTF Sample Viewer)?
Also, for this, yeah, I’ve tested my .glb with another viewer but there also my model is not similar to a blender.
On https://gltf-viewer.donmccurdy.com/, it appear like this
image1919×930 128 KB
An on https://github.khronos.org/glTF-Sample-Viewer-Release/
image1919×930 141 KB
Do you think that while exporting my model to glb/gltf, I’m missing any settings related to lights/mapping/exposure?
Also, I can now able to manage exposure and mapping using Babylon inspector, but don’t know how to update these settings programmatically in Babylon js. I tried enabling the tone mapping using these commands -
scene.imageProcessingConfiguration.toneMappingEnabled = true;
scene.imageProcessingConfiguration.toneMappingType = ImageProcessingConfiguration.TONEMAPPING_ACES
Still, no luck. I’m trying to find a solution like how I can give exposure value to my model/lights.
That’s the right code but you missed a “BABYLON.” prefix on the second line:
scene.imageProcessingConfiguration.toneMappingEnabled = true;
scene.imageProcessingConfiguration.toneMappingType = 
        BABYLON.ImageProcessingConfiguration.TONEMAPPING_ACES
              
No issues @Evgeni_Popov I’m also looking into the IBL setting on blender. I’ll post If I found any solution for that.
Oh, yeah, Actually, I’ve used npm package of Babylon and doing the import like this -
import { Engine, Scene, SceneLoader, ArcRotateCamera, Tools, Vector3, HemisphericLight, 
ShaderMaterial, Texture, Color3, ImageProcessingConfiguration,
Vector2, Path2, Curve3, SolidParticleSystem, PolygonMeshBuilder, CSG, StandardMaterial, Mesh
} from "@babylonjs/core";
So, there is no need to prefix “BABYLON.”, this code also works fine.
scene.imageProcessingConfiguration.toneMappingEnabled = true;
scene.imageProcessingConfiguration.toneMappingType = ImageProcessingConfiguration.TONEMAPPING_ACES
I’m just focusing on how can I set exposure values programmatically on Babylon js.
 Krishna_Vishwakarma:
I’m trying to find a solution like how I can give exposure value to my model/lights
I’m not sure if you are speaking about the image processing exposure property (scene.imageProcessingConfiguration.exposure), but we don’t have an exposure value for model/lights, it’s a global setting. Note, however, that you can set a different image processing object per material, so it’s possible to have different tone mapping/exposure/… at the material level.
              
Hey, @Evgeni_Popov @sebavan @JCPalmer guys, one more help with my use cases.
What I’m trying to achieve is something similar like google Maps does. Like, after certain level of zooming google maps shows the name of the cities. Again, after certain zoom level it shows the name of places.
In my model, I want after certain zoom level I want to show some text labels over the continents. Which will again show more texts on zooming again.
Also, after certain zoom level I want to load a building over the continents and on click of any building camera should move towards them and focus into that building.
Lazy loading the model something like dynamic asset loading.
Do you guys think I can achieve these use cases with Babylon js? Can we have any example related to that in Babylon js? Or what concept should I look into to achieve this with Babylon js?
It would be really helpful, if someone can help me with this. Thanks!
 Krishna_Vishwakarma:
Do you think, exporting the model without lights from the blender and setting up lights manually will help me?
I’m not sure, the lights you export from Blender should be exported correctly, you won’t get more control over the lights by creating them manually…
 Krishna_Vishwakarma:
What I’m trying to achieve is something similar like google Maps does.
You should look into this forum, I think we had several posts about this subject in the past.