Fresnel Shader or similar effect

Questions
23

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

1 Like
24

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

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

Vertex

  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

  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);
  }

i will take a look to lamina for others case

2 Likes
25

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.

26

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 and the corresponding shader chunks here

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:

#include <map_fragment>
#include <color_fragment>

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


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
27

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. F.e.

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.:

<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 5 years later:

1 Like
28

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