# Normal map issue with directional light from backside

**URL:** <https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871>\
**Category:** Questions\
**Tags:** textures, materials\
**Created:** [May 6, 2022, 8:25am UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871 "2022-05-06T08:25:25Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexander\_Kriger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexander_kriger/32/26137_2.png) [@Alexander\_Kriger](https://discourse.threejs.org/u/Alexander_Kriger)\
**Post date:** [May 6, 2022, 8:25am UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871/1 "2022-05-06T08:25:25Z")

</div>

Hey all!

I have an issue with the normal map in three.js. Maybe I am doing something wrong please, help me.

I have backed a normal map from the designer, and when I apply it to the material it works fine  
screenshot: [https://i.gyazo.com/83cd2d67a161b9087a8739f235714ea9.png](https://i.gyazo.com/83cd2d67a161b9087a8739f235714ea9.png)  
But when I add directional light (or spotLight) it causes an issue when light is shining from the back side: [https://i.gyazo.com/9327cab6c881773d2b0c9f56bd89579c.png](https://i.gyazo.com/9327cab6c881773d2b0c9f56bd89579c.png)

A small video on the test page [https://i.gyazo.com/029e325a521944d0e95de06b74b1d1d8.mp4](https://i.gyazo.com/029e325a521944d0e95de06b74b1d1d8.mp4)  
There is only one light - directional light looking on a plane from the top, but it goes through the plane and I can see white dots on the back side.  
Codepen here: [https://codepen.io/akriger/pen/MWQaQrr](https://codepen.io/akriger/pen/MWQaQrr)

What is the reason and how to fix it?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 6, 2022, 8:32am UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871/2 "2022-05-06T08:32:00Z")

</div>

Does your plane material have to be double sided?

---

<div class="post-metadata">

**Author:** ![Alexander\_Kriger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexander_kriger/32/26137_2.png) [@Alexander\_Kriger](https://discourse.threejs.org/u/Alexander_Kriger)\
**Post date:** [May 6, 2022, 8:56am UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871/3 "2022-05-06T08:56:44Z")

</div>

Hey!  
in codepen - yes, but I also have an issue with Single Front Sided material on the final mesh [https://i.gyazo.com/9508dee98bfca687bfe4754f73027088.mp4](https://i.gyazo.com/9508dee98bfca687bfe4754f73027088.mp4)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 6, 2022, 9:27am UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871/4 "2022-05-06T09:27:54Z")

</div>

Since you are using a flat plane (with no thickness), the glitch could be produced by floating point precision issues. Consider to use a box with a small depth instead.

However, you can’t use `BoxGeometry` since the material will be applied to all sides. You would have to assign six materials (one for each side) which is a bit clumsy.

It’s probably better to author a geometry in Blender, export it to glTF and then import it via `THREE.GLTFLoader`.

---

<div class="post-metadata">

**Author:** ![Alexander\_Kriger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexander_kriger/32/26137_2.png) [@Alexander\_Kriger](https://discourse.threejs.org/u/Alexander_Kriger)\
**Post date:** [May 6, 2022, 11:42am UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871/5 "2022-05-06T11:42:03Z")

</div>

I have found this issue first on gtlf mesh and then repeated it with the plane in codepen to isolate the issue - normal map + directional light.  
I have tried in three.js/editor - the same issue

Also - I have changed the geometry to Box Geometry and updated codepen in first message, the issue is the same [Screen capture - f011dc6ae1e9c933acb453fa08b979cc - Gyazo](https://gyazo.com/f011dc6ae1e9c933acb453fa08b979cc)

---

<div class="post-metadata">

**Author:** ![Alexander\_Kriger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexander_kriger/32/26137_2.png) [@Alexander\_Kriger](https://discourse.threejs.org/u/Alexander_Kriger)\
**Post date:** [May 11, 2022, 2:49am UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871/6 "2022-05-11T02:49:30Z")

</div>

Hey, @Mugen87, any thoughts? What shall I try?)

Hey, @donmccurdy, I have seen some answers on related topics, could you also take a look at this?

Short summary:  
normal map + directional light - works fine when light side, but has artefacts on opposite mesh side.  
Codepen here: [https://codepen.io/akriger/pen/MWQaQrr](https://codepen.io/akriger/pen/MWQaQrr)

I have tried with gltf model from blender and export tangents, but the issue doesn’t disappear

Thank you!

---

<div class="post-metadata">

**Author:** ![Alexander\_Kriger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexander_kriger/32/26137_2.png) [@Alexander\_Kriger](https://discourse.threejs.org/u/Alexander_Kriger)\
**Post date:** [May 13, 2022, 3:27pm UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871/7 "2022-05-13T15:27:48Z")

</div>

Hey everyone!

Please get your ideas on what I’m doing wrong with this normal map, because I have spent more than a week with this issue and have no ideas at all.

Some additional information:  
The model with this normal map was exported from Adobe Substance Painter with default values. I’m not sure, but maybe the normal map itself is incorrect. But how to fix it?  
Link to normal map: [https://cdn.gc.digital/cool/oc/kriger/test-canvas-02-15/normal-test.png](https://cdn.gc.digital/cool/oc/kriger/test-canvas-02-15/normal-test.png)

I will be happy to any ideas)  
Thank you!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 13, 2022, 3:54pm UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871/8 "2022-05-13T15:54:07Z")

</div>

I think it would be good to prepare a box with the mentioned normal map and then export it to glTF. In this way, you can easily compare the renderings with different engines. For example the first below viewer uses `three.js` the second one BabylonJS:

> **[glTF Viewer](https://gltf-viewer.donmccurdy.com/)**
>
> Drag-and-drop preview tool for glTF 2.0 3D models.

> **[Babylon.js Sandbox - View glTF, glb, obj and babylon files](https://sandbox.babylonjs.com/)**
>
> Viewer for glTF, glb, obj and babylon files powered by Babylon.js

If the glTF asset is rendered differently, it might be easier to find a potential issue in `three.js`.

Sidenote: glTF assets should be rendered almost consistently by different engines (assuming similar lighting setups).

---

<div class="post-metadata">

**Author:** ![Alexander\_Kriger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexander_kriger/32/26137_2.png) [@Alexander\_Kriger](https://discourse.threejs.org/u/Alexander_Kriger)\
**Post date:** [May 16, 2022, 5:50am UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871/9 "2022-05-16T05:50:33Z")

</div>

Hey, @Mugen87,

Thank you for your answer!  
I have tried to do some stuff.

1. Here is the blender file and exported the GLB file [ownCloud](https://drive.gocream.com/s/ZQgQz5I8Z7Q1bHD)
2. Here is how it looks in the blender with Evee engine  

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/d/1dc54d75f4a4f2139d70d725139b3dc51c369df5.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/d/1dc54d75f4a4f2139d70d725139b3dc51c369df5.mp4)
3. This is how it looks in Babylon:  

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/f/cff05a80617eabdff131f3551bcd5938944e0f36.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/f/cff05a80617eabdff131f3551bcd5938944e0f36.mp4)
4. Here is how it looks in three js editor  

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/1/c1860f40fab6184812206beb1c23d1add2582d7f.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/1/c1860f40fab6184812206beb1c23d1add2582d7f.mp4)
5. Here is how it look in gltf viewer by @donmccurdy  

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/7/c7a63688f5de74519e59962b03c909f87ce300cd.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/7/c7a63688f5de74519e59962b03c909f87ce300cd.mp4)

You are able to see the issue in all three js and in Babylon. But in the blender with Evee is fine.

In my opinion, the issue is normal map parse fragment shader, because it tries to show light on surfaces that are not in light. But I am not sure.

Any thoughts? 🙂

---

<div class="post-metadata">

**Author:** ![Alexander\_Kriger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexander_kriger/32/26137_2.png) [@Alexander\_Kriger](https://discourse.threejs.org/u/Alexander_Kriger)\
**Post date:** [May 18, 2022, 11:29am UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871/10 "2022-05-18T11:29:37Z")

</div>

Hey! @Mugen87, @donmccurdy  
I’m wondering if I can do something more to show issue?

In my opinion issue is with all normal maps with high intensity (with high depth).

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 18, 2022, 2:48pm UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871/11 "2022-05-18T14:48:55Z")

</div>

Sorry, I don’t know how to mitigate this issue…

---

<div class="post-metadata">

**Author:** ![gkjohnson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gkjohnson/32/2298_2.png) [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Post date:** [May 19, 2022, 2:34am UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871/12 "2022-05-19T02:34:31Z")

</div>

Have you tried enabling shadow casting?

---

<div class="post-metadata">

**Author:** ![Alexander\_Kriger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexander_kriger/32/26137_2.png) [@Alexander\_Kriger](https://discourse.threejs.org/u/Alexander_Kriger)\
**Post date:** [May 20, 2022, 12:19pm UTC](https://discourse.threejs.org/t/normal-map-issue-with-directional-light-from-backside/37871/13 "2022-05-20T12:19:22Z")

</div>

@gkjohnson You are a genius!

I have tried it before, but maybe I have done something wrong.  
I tried again in codepen here [https://codepen.io/akriger/pen/MWQaQrr](https://codepen.io/akriger/pen/MWQaQrr) a few minutes ago.

AND…!!! It works! I make the shadow camera special “far” parameter not complete. So the bottom corner has still artefacts. So casting shadows fixes this issue!  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/1/412c0a557e0179547d3715ef2ddc56fbfd804ac0.png)

Thank you!

@Mugen87 Thank you too, your advice helped me to understand the issue too.