# Wrong Fresnel shading with ortho camera

**URL:** <https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988>\
**Category:** Bugs\
**Tags:** material\
**Created:** [July 7, 2022, 3:52pm UTC](https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988 "2022-07-07T15:52:02Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![7om](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/7om/32/11158_2.png) [@7om](https://forum.babylonjs.com/u/7om)\
**Post date:** [July 7, 2022, 3:52pm UTC](https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988/1 "2022-07-07T15:52:03Z")

</div>

I noticed a weird effect when I combine both an ortho camera with Fresnel shading:

> **[Babylon.js Playground](https://playground.babylonjs.com/#M2YD6F%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Rotate the camera to get the ball close to the edge and you will notice that the ball’s edge close to the viewport edge gets green again which I would not expect for correct Fresnel shading. Since it’s a ortho camera I would not expect any changes how the ball is rendered (except for its position of course).

I guess the wrong angle is used for calculating the Fresnel shading: instead of using the angle between camera and rendered point in 3D space, the plain camera orientation vector should be used, because in ortho mode you see each pixel in the 3D space from the same direction.

Thanks for looking into this issue!

---

<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:** [July 8, 2022, 3:22pm UTC](https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988/2 "2022-07-08T15:22:27Z")

</div>

Maybe @sebavan or @Evgeni_Popov would know?

---

<div class="post-metadata">

**Author:** ![7om](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/7om/32/11158_2.png) [@7om](https://forum.babylonjs.com/u/7om)\
**Post date:** [July 19, 2022, 1:41pm UTC](https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988/3 "2022-07-19T13:41:29Z")

</div>

Is there any way I can support fixing this? I’m happy to discuss the details.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [July 19, 2022, 3:12pm UTC](https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988/4 "2022-07-19T15:12:54Z")

</div>

Pinging @sebavan again as hes back

---

<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:** [July 19, 2022, 4:06pm UTC](https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988/5 "2022-07-19T16:06:11Z")

</div>

It is a currently know limitation of our materials, but the good thing is we could potentially rely on a material plugin to help with this.

@7om what kind of materials are you planning to use ? only StandardMaterial ?

---

<div class="post-metadata">

**Author:** ![7om](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/7om/32/11158_2.png) [@7om](https://forum.babylonjs.com/u/7om)\
**Post date:** [July 20, 2022, 7:25am UTC](https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988/6 "2022-07-20T07:25:44Z")

</div>

I’m just using StandardMaterial.

Some context: I’m using (emmisive) vertex colors to display a color-coded scalar. I disabled any lighting-related shading, because it would interfere with the color display. To give the user at least some hint about the actual geometry, I’m using the Fresnel rendering to darken the edges.

Hence, StandardMaterial, disableLighting, emmisive vertex colors, and Fresnel rendering on emmissive.

Thanks for your support!

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [July 20, 2022, 10:48am UTC](https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988/7 "2022-07-20T10:48:01Z")

</div>

> To give the user at least some hint about the actual geometry, I’m using the Fresnel rendering to darken the edges.

Hmmm this would be more of an alternative solution but have you considered using wireframe or edges rendering? 🤔

---

<div class="post-metadata">

**Author:** ![7om](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/7om/32/11158_2.png) [@7om](https://forum.babylonjs.com/u/7om)\
**Post date:** [July 20, 2022, 11:08am UTC](https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988/8 "2022-07-20T11:08:39Z")

</div>

The images should look similar to this (maybe even less shading, but that’s nice about the Fresnel shading, because I can tweak it w/o influencing other objects which get the normal rendering treat):

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/9/a98d1405315086da92d5d44208408603a019d35e.jpeg)

Wireframe or explicit edge rendering would be too intrusive, IMHO. But thanks for the input. 🙂

---

<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:** [July 20, 2022, 4:35pm UTC](https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988/9 "2022-07-20T16:35:48Z")

</div>

Something like this: [https://playground.babylonjs.com/#M2YD6F#2](https://playground.babylonjs.com/#M2YD6F#2) ???

---

<div class="post-metadata">

**Author:** ![7om](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/7om/32/11158_2.png) [@7om](https://forum.babylonjs.com/u/7om)\
**Post date:** [July 20, 2022, 8:40pm UTC](https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988/10 "2022-07-20T20:40:27Z")

</div>

@sebavan That looks perfect! Cheers! 🥳

---

<div class="post-metadata">

**Author:** ![7om](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/7om/32/11158_2.png) [@7om](https://forum.babylonjs.com/u/7om)\
**Post date:** [July 21, 2022, 7:48am UTC](https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988/11 "2022-07-21T07:48:37Z")

</div>

@sebavan Do you plan to include this as a fix for the ortho view or should I use your approach?

I could image that the wrong view direction vector is used in several places for ortho view.

---

<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:** [July 21, 2022, 4:21pm UTC](https://forum.babylonjs.com/t/wrong-fresnel-shading-with-ortho-camera/31988/12 "2022-07-21T16:21:52Z")

</div>

You should use this approach for now, and I ll see if I can make it in the framework but it would need to handle all the weird edge cases 🙂
