# What's wrong with my lighting?

**URL:** <https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404>\
**Category:** Questions\
**Tags:** lighting, material\
**Created:** [October 8, 2021, 8:10am UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404 "2021-10-08T08:10:43Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![CodeCycle](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codecycle/32/19068_2.png) [@CodeCycle](https://forum.babylonjs.com/u/CodeCycle)\
**Post date:** [October 8, 2021, 8:10am UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/1 "2021-10-08T08:10:43Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/7/57f7c06f1918e6455cba472e16ea35dcd167be98.png)

ThreeJS code:

```auto
    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:

```auto
    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

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [October 8, 2021, 9:22am UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/2 "2021-10-08T09:22:01Z")

</div>

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

Can you share the Babylon PG ?

---

<div class="post-metadata">

**Author:** ![CodeCycle](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codecycle/32/19068_2.png) [@CodeCycle](https://forum.babylonjs.com/u/CodeCycle)\
**Post date:** [October 8, 2021, 9:42am UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/3 "2021-10-08T09:42:13Z")

</div>

The PG: [https://playground.babylonjs.com/#6PP5LT#1](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!

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [October 8, 2021, 10:00am UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/4 "2021-10-08T10:00:17Z")

</div>

I can get something approaching here:

[LowPoly GLTF Lighting | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#6PP5LT#2)

---

<div class="post-metadata">

**Author:** ![CodeCycle](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codecycle/32/19068_2.png) [@CodeCycle](https://forum.babylonjs.com/u/CodeCycle)\
**Post date:** [October 8, 2021, 10:10am UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/5 "2021-10-08T10:10:09Z")

</div>

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](https://playground.babylonjs.com/#6PP5LT#7)

Is this a gltf issue?

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [October 8, 2021, 10:17am UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/6 "2021-10-08T10:17:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CodeCycle](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codecycle/32/19068_2.png) [@CodeCycle](https://forum.babylonjs.com/u/CodeCycle)\
**Post date:** [October 8, 2021, 11:39am UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/7 "2021-10-08T11:39:12Z")

</div>

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](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.**

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [October 8, 2021, 12:19pm UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/8 "2021-10-08T12:19:28Z")

</div>

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

[LowPoly GLTF Lighting | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#6PP5LT#10)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 8, 2021, 2:46pm UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/9 "2021-10-08T14:46:42Z")

</div>

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

[https://playground.babylonjs.com/#6PP5LT#11](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 ?

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [October 8, 2021, 2:47pm UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/10 "2021-10-08T14:47:32Z")

</div>

sure! It’s on my list now.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 8, 2021, 2:59pm UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/11 "2021-10-08T14:59:26Z")

</div>

You are the best !!!

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 8, 2021, 3:13pm UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/12 "2021-10-08T15:13:20Z")

</div>



---

<div class="post-metadata">

**Author:** ![CodeCycle](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codecycle/32/19068_2.png) [@CodeCycle](https://forum.babylonjs.com/u/CodeCycle)\
**Post date:** [October 8, 2021, 3:43pm UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/13 "2021-10-08T15:43:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [October 11, 2021, 9:33am UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/14 "2021-10-11T09:33:35Z")

</div>

I’m getting an UInt8array here :

> <https://github.com/BabylonJS/Babylon.js/blob/434a071e5552198b1848c13d6a926c5d7ebb556c/src/Meshes/mesh.ts#L2905>

but the vertexBuffer type is set to `VertexBuffer.FLOAT`

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

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 11, 2021, 11:00am UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/15 "2021-10-11T11:00:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [October 11, 2021, 11:08am UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/16 "2021-10-11T11:08:14Z")

</div>

stride is 3, so probably position only.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 11, 2021, 11:13am UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/17 "2021-10-11T11:13:32Z")

</div>

@bghgary might have an idea ?

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [October 11, 2021, 4:53pm UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/18 "2021-10-11T16:53:52Z")

</div>

Can you check what ‘kind’ is? The glb from [What's wrong with my lighting? - #4 by Cedric](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/4) has all float data.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 11, 2021, 5:08pm UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/19 "2021-10-11T17:08:52Z")

</div>

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/3/d35641766b7a3764a3552bbcf35308e24572a7e8.png)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 11, 2021, 5:09pm UTC](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404/20 "2021-10-11T17:09:15Z")

</div>

any reason we could have hint for those in gltf ?

[Next page](https://forum.babylonjs.com/t/whats-wrong-with-my-lighting/24404.md?page=2)