Three.js MeshStandardMaterial菲涅尔实现

前面两篇分别讲了Three.js的源码结构和Shader改写方法，本篇做一个基于Standard材质的菲涅尔。
如未读过前两篇的建议先读一下：
Three.js Shader源码结构https://www.jianshu.com/p/8de8a94ac1a9
Three.js Shader改写https://www.jianshu.com/p/5944e10d70cf

仅打开一盏平行光时最终效果如下，可以看到在原有兰伯特的基础上增加了由外向内的菲涅尔效果：

菲涅尔改写

1.改写前准备

参考前面两篇，我们的目标是改写StandardMaterial，所以我们要找到StandardMaterial的源码。打开Three.js的源码，我们发现如下两行定义了StandardMaterial的vertexShader和fragmentShader。

standard: {
 
        uniforms: mergeUniforms([
...略
        ]),
 
        vertexShader: ShaderChunk.meshphysical_vert,
        fragmentShader: ShaderChunk.meshphysical_frag
 
    },

顺藤摸瓜找到meshphysical_frag指向的是fragment$5：

meshphysical_vert: vertex$5,
    meshphysical_frag: fragment$5,

而fragment$5最后用到的include是：

#include <dithering_fragment>

所以我们要在最后修改颜色的话，就得replace这句话。下面这段代码就实现了一个球的菲涅尔，至于菲涅尔的算法1-NdotV这里就不赘述了。

const geometry1 = new THREE.SphereGeometry(0.2, 32, 16);
            const material1 = new THREE.MeshStandardMaterial({ color: 0xffffff });
            const sphere1 = new THREE.Mesh(geometry1, material1);
            scene.add(sphere1);
            sphere1.position.y = 0.5;
 
            let uniforms = {
                rimColor: { value: new THREE.Color(0xff00ff) },
                rimPower: { value: 0.6 },
            }
            sphere1.material.onBeforeCompile = function (shader) {
                shader.uniforms.rimColor = uniforms.rimColor;
                shader.uniforms.rimPower = uniforms.rimPower;
 
                shader.fragmentShader = /* glsl */`
                    uniform vec3 rimColor;
                    uniform float rimPower;
                        ${shader.fragmentShader.replace(
                    '#include <dithering_fragment>',
                    '#include <dithering_fragment>\n\tfloat dotNV = 1.0-saturate( dot( normal, geometry.viewDir ) );\n\tgl_FragColor.rgb += rimPower*dotNV*rimColor;'
                )}
                `;
            };

加载的模型的材质改写也很简单，遍历所有子物体，如果isMesh则执行.material.onBeforeCompile。