What's wrong with my lighting?

Questions
,
1

Hi,

I have worked with ThreeJS in the past and now decided to try BabylonJS because I like the features much better, but I can’t get my lighting to work well.

Here I have an example of a lowpoly blender model that I imported into a scene with a directional and ambient light.

When I created it in three js it looked like the one on the left. I have now tried to recreate this in BabylonJS, and it turned out like the one on the right:

threebabylon
threebabylon2914×954 178 KB

ThreeJS code:

    let scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xffffff );
    
    
    let camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 500 );
        camera.position.set( -1, 0.5, 1 ).setLength( 15 );
        camera.lookAt( 0, 0, 0 );
    
    scene.add( camera );
    
    
    let light = new THREE.DirectionalLight( 0xfff9bc, 0.75 );
        light.position.set( 1, 2, 1 ).setLength( 10 );
    
    scene.add( light );
   
    
    let ambient = new THREE.AmbientLight( 0xaf7ede, 0.5 );
    
    scene.add( ambient );
    
    
    new THREE.GLTFLoader().load( "assets/blender/pillar.glb", ( model ) => {
        
        let gltf = model.scene.children[0];
        
        let material = new THREE.MeshPhongMaterial( { color: 0x2a2a2a, flatShading: true, shininess: 0, specular: 0x000000 } );
        
        let mesh = new THREE.Mesh( gltf.geometry, material );

        scene.add( mesh );
        
    } );

BabylonJS code:

    let scene = new BABYLON.Scene( render.engine );
        scene.clearColor = new BABYLON.Color3( 1, 1, 1 );
        scene.ambientColor = new BABYLON.Color3( 0.5, 0.5, 0.5 ); //ambient intensity?


    let camera = new BABYLON.ArcRotateCamera( "Camera", Math.PI / 4, (Math.PI / 8) * 3, 15, new BABYLON.Vector3( 0, 0, 0 ), scene );
        camera.fov = 50 * (Math.PI / 180);
    
    
    let light = new BABYLON.DirectionalLight( "DirectionalLight", new BABYLON.Vector3( -1, 2, 1 ).normalize().scale( -10 ), scene ); 
        light.diffuse = new BABYLON.Color3.FromHexString( "#fff9bc" );
        light.specular = new BABYLON.Color3( 0, 0, 0 );
        light.intensity = 0.75;
    

    BABYLON.SceneLoader.LoadAssetContainer( "assets/blender/", "pillar.glb", scene, function( container ) {
        
        let gltf = container.meshes[1];
        
            gltf.material = new BABYLON.StandardMaterial( "Material" );
            gltf.material.diffuseColor = new BABYLON.Color3.FromHexString("#2a2a2a");
            gltf.material.specularColor = new BABYLON.Color3( 0, 0, 0 );
            gltf.material.ambientColor = new BABYLON.Color3.FromHexString( "#af7ede" );

        scene.addMesh( gltf );
    });

(I also tried HemiLight for the ambient, but it also didn’t work. Also, BabylonJS doesn’t render the lowpoly mesh correctly (“flatShaded”), I tried convertToFlatShadedModel but that resulted in displaced vertecies.)

My question is, what did I do wrong? how can I make it look like the ThreeJS scene?

Thanks

2

ambient intensity is stronger in Babylon code than in Three (multiply by 0.5)

Can you share the Babylon PG ?

3

The PG: https://playground.babylonjs.com/#6PP5LT#1

Ah ok, so do I need to multiply the ambientColor of each material by 0.5? or can I work with the scene ambientColor? or can I set the ambient intensity somewhere? what would be the best value for the scene ambientColor?

Thanks for the help!

4

I can get something approaching here:

LowPoly GLTF Lighting | Babylon.js Playground (babylonjs.com)

2 Likes
5

Thanks, yes looks much better! I think I know where to go from here with the color values.

I have another question about the convertToFlatShadedMesh(), when I do that it comes out like this: https://playground.babylonjs.com/#6PP5LT#7

Is this a gltf issue?

6

The mesh doesn’t appear in Inspector. Any idea why @sebavan ?

7

I exported the same model to an obj, imported it and the convertToFlatShadedMesh() function works fine. With obj the mesh also appears in the inspector.
https://playground.babylonjs.com/#6PP5LT#9
(Btw, is it normal that I had to flip the x axis?)

It seems that the gltf import causes convertToFlatShadedMesh to malfunction.

8

The mesh that needs to be added is the root (meshes[0]):

LowPoly GLTF Lighting | Babylon.js Playground (babylonjs.com)

2 Likes
9

so all meshes from the container needs to be imported to be visible and workable (root and children):

https://playground.babylonjs.com/#6PP5LT#11

There is definitely a bug in the convertToFlatShaded function in babylon with this kind of meshes…

@Cedric would you mind having a look ?

1 Like
10

sure! It’s on my list now.

1 Like
11

You are the best !!!

2 Likes
13

Thanks to all for the help! Amazing community. Cant wait to see the convertToFlatShaded working with gltf models.

2 Likes
14

I’m getting an UInt8array here :

but the vertexBuffer type is set to VertexBuffer.FLOAT

Is there a way to cast the vertex buffer? @Evgeni_Popov @sebavan

15

Oh probably some vertex colors, the code should not assume the data are float only :frowning: I wonder if the type should be DataArray instead ?

16

stride is 3, so probably position only.

17

@bghgary might have an idea ?

18

Can you check what ‘kind’ is? The glb from What's wrong with my lighting? - #4 by Cedric has all float data.

19

image
image867×149 9.2 KB

20

any reason we could have hint for those in gltf ?