Three.js - MatCap 的简单尝试

关于MatCap

MatCap（Material Capture 材质捕获）是对材质的近似，对于没有UV贴图的模型非常有效。

MatCap（它只是一个规则的位图）定义了每个法线方向的曲面颜色，这极大地有助于显示模型中的细节。

原始的MatCap在左侧，生成的着色表面在右侧。

Shader

• Vertex Shader

顶点着色器用来将模型顶点的法向量转化为视点坐标系下的法向量，并获得该法线中的xy分量

varying vec2 Point;

void main()
{
    vec3 vNormal = ( mat3( modelViewMatrix ) * normal );
    vNormal = normalize(vNormal);
	
	// vNormal 的 x, y分量
    Point.x = vNormal.x * 0.5 + 0.5;
    Point.y = vNormal.y * 0.5 + 0.5;
    
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

}

• Fragment Shader

获取对应坐标下的MatCap的颜色值。

uniform sampler2D Matcap;      // Matcap纹理

varying vec2 Point;

void main(void){

    // texture2D()获取颜色值
    vec4 color = texture2D(Matcap, Point);

	// 改片元的颜色值为对应坐标下的MatCap的颜色值
    gl_FragColor = color;
}

效果图

函数封装如下

function createMatCapMaterial(texture) {
    let vertexShader = `
        varying vec2 Point;

        void main()
        {
            vUv = uv;
            vec3 vNormal = ( mat3( modelViewMatrix ) * normal );
            vNormal = normalize(vNormal);

            Point.x = vNormal.x * 0.5 + 0.5;
            Point.y = vNormal.y * 0.5 + 0.5;
            
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

        }
    `;

    let fragmentShader = `
        uniform sampler2D Matcap;      // Matcap纹理

        varying vec2 Point;

        void main(void){

            // texture2D()获取颜色值
            vec4 color = texture2D(Matcap, Point);

            gl_FragColor = color;
        }
    `;

    let Material = new THREE.ShaderMaterial({
        uniforms: {
            Matcap: { value: texture },
        },
        vertexShader,
        fragmentShader
    });

    return Material;
}