Exported glb/gltf model doesn't look similar like I have in blender

[Krishna_Vishwakarma]

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 -

And that’s how it looks in a blender -

island layer -

water layer -

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

[JCPalmer]

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.

[sebavan]

Using createDefaultEnvironment you are defaulting to a special IBL which might not be the same as the one in Blender so your lighting will be fully different.

[Krishna_Vishwakarma]

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

[Evgeni_Popov]

@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”:

[Krishna_Vishwakarma]

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

An on https://github.khronos.org/glTF-Sample-Viewer-Release/

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.

[Evgeni_Popov]

Unfortunately I can’t help you with Blender, I don’t know anything of it. Someone will probably be able to help here.

@Krishna_Vishwakarma

I tried enabling the tone mapping using these commands -

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

[Krishna_Vishwakarma]

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.

[Evgeni_Popov]

@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.

[Krishna_Vishwakarma]

I was able to set the exposure for image processing, still thanks for mentioning that. Do you think, exporting the model without lights from the blender and setting up lights manually will help me?

[Krishna_Vishwakarma]

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!

[Evgeni_Popov]

@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.

[Krishna_Vishwakarma]

Sure, @Evgeni_Popov, I’ll dig into the forum and try to find out. Thank you