在 ThreeJS 着色器上更改菲涅耳衰减

Question

我一直在我的 ThreeJS 项目中使用 this shader，只是我或多或少地逐字复制了代码，因为我不知道如何编写着色器函数。基本上，我想编辑菲涅耳效果的衰减率，以便它只是真正使用颜色的边缘，内部有轻微的发光

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

我试过更改此行中的数字 gl_FragColor.rgb += ( **1.0** - -min(dot(vEye, normalize(vNN) ), 0.0) ) * fresnelColor; 虽然这确实停止了菲涅耳的梯度，但它是一个硬停止，就好像它是在限制级别而不是梯度率。

我只需要帮助我如何才能使衰减不那么深入我的模型，这样只有边缘才有衰减

Answer 1

也许这会有所帮助：

      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;

`

在 ThreeJS 着色器上更改菲涅耳衰减

Changing fresnel falloff on ThreeJS shader

three.js

shader

fragment-shader

vertex-shader