# Fresnel Shader or similar effect

**URL:** <https://discourse.threejs.org/t/fresnel-shader-or-similar-effect/9997>\
**Category:** Questions\
**Tags:** shaders\
**Created:** [October 2, 2019, 9:04am UTC](https://discourse.threejs.org/t/fresnel-shader-or-similar-effect/9997 "2019-10-02T09:04:17Z")\
**Posts on this page:** 6\
**Page:** 2

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 6, 2022, 9:00pm UTC](https://discourse.threejs.org/t/fresnel-shader-or-similar-effect/9997/23 "2022-03-06T21:00:09Z")

</div>

there a layer based library for threejs now called lamina [GitHub - pmndrs/lamina: 🍰 An extensible, layer based shader material for ThreeJS](https://github.com/pmndrs/lamina) very similar to spline. it has a fresnel layer.

---

<div class="post-metadata">

**Author:** ![LagenceCree](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lagencecree/32/24762_2.png) [@LagenceCree](https://discourse.threejs.org/u/LagenceCree)\
**Post date:** [March 6, 2022, 9:26pm UTC](https://discourse.threejs.org/t/fresnel-shader-or-similar-effect/9997/24 "2022-03-06T21:26:44Z")

</div>

so cool @drcmda !  
i was searching a solution closed to the metal  
anyway exploring lamina shaders give me the solution to reproduce via shadermaterial 🙂  
many thanks !

here is “raw” solution it if it can help community

**Vertex**

```javascript
  varying vec3 vPositionW;
  varying vec3 vNormalW;
  void main() {
    vPositionW = normalize(vec3(modelViewMatrix * vec4(position, 1.0)).xyz);
    vNormalW = normalize(normalMatrix * normal);
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }

```

**Fragment**

```javascript
  varying vec3 vPositionW;
  varying vec3 vNormalW;
  void main() {   
    float fresnelTerm = ( 1.0 - -min(dot(vPositionW, normalize(vNormalW) ), 0.0) );    
    gl_FragColor = vec4(1.0,0.0,0.0,1.0) * vec4(fresnelTerm);
  }

```

https://codepen.io/LAGENCECREE/embed/preview/f92789102726c6b281913291b5361294?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=f92789102726c6b281913291b5361294

i will take a look to lamina for others case

---

<div class="post-metadata">

**Author:** ![marcel\_pi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marcel_pi/32/14271_2.png) [@marcel\_pi](https://discourse.threejs.org/u/marcel_pi)\
**Post date:** [April 26, 2022, 3:26pm UTC](https://discourse.threejs.org/t/fresnel-shader-or-similar-effect/9997/25 "2022-04-26T15:26:10Z")

</div>

Is there any way to apply this to a Phong or Physical Material? Maybe extend them? Or do I have to write them from scratch?

I’m still trying to wrap my head around this.

---

<div class="post-metadata">

**Author:** ![Arthur](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arthur/32/22954_2.png) [@Arthur](https://discourse.threejs.org/u/Arthur)\
**Post date:** [April 26, 2022, 6:30pm UTC](https://discourse.threejs.org/t/fresnel-shader-or-similar-effect/9997/26 "2022-04-26T18:30:51Z")

</div>

Yes you can apply this to an existing material.

You’ll need to figure out where to inject the fragment shader code - it should happen before the lighting / fog calculations are applied.

You’ll find existing materials defined [here](https://github.com/mrdoob/three.js/tree/dev/src/renderers/shaders/ShaderLib) and the corresponding shader chunks [here](https://github.com/mrdoob/three.js/tree/dev/src/renderers/shaders/ShaderChunk)

When THREE.js compiles the materials, it goes through the shader code and everytime it sees something that looks like `#include <some_shader_chunk>` it will replace that bit with the corresponding shader chunk.

If we take MeshPhongMaterial as an example, first we decide where we want the fresnel calculations to happen.  
A good point would be after the material’s map and/or color have been applied - this means you can use the fresnel stuff as an effect on top the existing look of your material, and any lighting calculations would then happen on top of that.

A read through the material will show you this would happen here:

```javascript
#include <map_fragment>
#include <color_fragment>

```

So you would inject the fragment shader code the following way:

```javascript

material.onBeforeCompile = shader =>{
  shader.fragmentShader = shader.fragmentShader.replace(
    '#include <color_fragment>',
    'relevant code here'
  )
}

```

Don’t forget to repeat the same process for:

- stuff above the main() function in the vertex shader
- stuff inside the main() function in the vertex shader
- stuff above the main() function in the fragment shader

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [January 19, 2023, 6:16am UTC](https://discourse.threejs.org/t/fresnel-shader-or-similar-effect/9997/27 "2023-01-19T06:16:43Z")

</div>

Would be great if all of you use versioned URLs in your examples. None of the above demos work anymore because they are using unversioned URLs from [threejs.org](http://threejs.org). F.e.

```javascript
https://threejs.org/examples/js/controls/OrbitControls.js

```

Let’s strive to make demos that always work for people who land here in the future by using versions in all URLs, f.e.:

```javascript
<script src="https://unpkg.com/three@0.124.0/examples/js/controls/OrbitControls.js"></script>

```

Here’s an example of a pen that still works from 2017 (if it is broken, let me know, it means the CDN went down which is _much_ less likely to happen than a breaking change from a library update):

[https://codepen.io/trusktr/pen/OzMGJK](https://codepen.io/trusktr/pen/OzMGJK)

---

<div class="post-metadata">

**Author:** ![Stanislav-Sobolev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stanislav-sobolev/32/52032_2.png) [@Stanislav-Sobolev](https://discourse.threejs.org/u/Stanislav-Sobolev)\
**Post date:** [October 11, 2024, 12:32pm UTC](https://discourse.threejs.org/t/fresnel-shader-or-similar-effect/9997/28 "2024-10-11T12:32:41Z")

</div>

Hi everyone!  
Anyone knows is it possible to use this approach with Fresnel shader in post-processing as a Pass?

[Previous page](https://discourse.threejs.org/t/fresnel-shader-or-similar-effect/9997.md?page=1)