Search code examples
three.jsshaderfragment-shadervertex-shader

Changing fresnel falloff on ThreeJS shader


I've been making use of this shader inside of my ThreeJS project, except I've more or less copied the code verbatim because I have no idea how to write a shader function. Basically I want to edit the rate of falloff on the fresnel effect so that it's only really the edges that are using the colour with a slight glow coming inside

var material = THREE.extendMaterial(THREE.MeshStandardMaterial, {
      // Will be prepended to vertex and fragment code

      header: 'varying vec3 vNN; varying vec3 vEye;',
      fragmentHeader: 'uniform vec3 fresnelColor;',

      // Insert code lines by hinting at a existing
      vertex: {
        // Inserts the line after #include <fog_vertex>
        '#include <fog_vertex>': `


          mat4 LM = modelMatrix;
          LM[2][3] = 0.0;
          LM[3][0] = 0.0;
          LM[3][1] = 0.0;
          LM[3][2] = 0.0;

          vec4 GN = LM * vec4(objectNormal.xyz, 1.0);
          vNN = normalize(GN.xyz);
          vEye = normalize(GN.xyz-cameraPosition);`
      },
      fragment: {
        'gl_FragColor = vec4( outgoingLight, diffuseColor.a );' : 
        `gl_FragColor.rgb +=  ( 1.0 - -min(dot(vEye, normalize(vNN) ), 0.0) ) * fresnelColor;`
      },
      // Uniforms (will be applied to existing or added)
      uniforms: {
        diffuse: new THREE.Color( 'black' ),
        fresnelColor: new THREE.Color( 'blue' )
      }
    });

I've tried changing the number in this line gl_FragColor.rgb += ( **1.0** - -min(dot(vEye, normalize(vNN) ), 0.0) ) * fresnelColor; and whilst that did stop the gradient of the fresnel, it was a hard stop, as though it was limiting levels instead of the rate of gradient.

I just need help with how I can make the fall off not as far into my models so that it's only really the edges that have it


Solution

  • Maybe this will help:

          fragment: {
            'gl_FragColor = vec4( outgoingLight, diffuseColor.a );' : `
    
    float m = ( 1.0 - -min(dot(vEye, normalize(vNN)), 0.0) );
    m = pow(m, 8.); // the greater the second parameter, the thinner effect you get
    gl_FragColor.rgb +=  m * fresnelColor;
    
    `