如何通过GLSL在THREE.js中实现MeshNormalMaterial？

我想实现一个着色器，但我不知道如何将法线转换为颜色

在THREE.js中：

我的测试1：

varying vec3 vNormal;

void main(void) {
    vNormal = abs(normal);
    gl_Position = matrix_viewProjection * matrix_model * vec4(position, 1.0);
}

varying vec3 vNormal;

void main(void) {
    gl_FragColor = vec4(vNormal, 1.0);
}

我的测试2：

varying vec3 vNormal;

void main(void) {
    vNormal = normalize(normal) * 0.5 + 0.5;
    gl_Position = matrix_viewProjection * matrix_model * vec4(position, 1.0);
}

varying vec3 vNormal;

void main(void) {
    gl_FragColor = vec4(vNormal, 1.0);
}

这些只是测试，我找不到任何关于如何计算颜色的资源

有人能帮我吗

---

谢谢。

如果要在视图空间中查看法向量，则必须将法向量从模型空间变换到世界空间，并从世界空间变换到视图空间。这可以在一个步骤中完成，方法是使用

由于可变变量在从顶点着色器传递到片段着色器时会进行插值，因此根据其属性，应在片段着色器中进行颜色转换。注意，插值后，法向量必须再次标准化

varying vec3 vNormal;

void main(void)
{
    vec3 view_nv  = normalize(vNormal);
    vec3 nv_color = view_nv * 0.5 + 0.5; 
    gl_FragColor  = vec4(nv_color, 1.0);
}

由于法向量已归一化，其分量在[-1.0,1.0]范围内。如何将其表示为颜色取决于您。
如果使用

abs

值，则大小相同的正值和负值具有相同的颜色表示。颜色的强度随值的渐变而增加

使用公式

normal*0.5+0.5

强度从0增加到1

通常，x分量表示为红色，y分量表示为绿色，z分量表示为蓝色

颜色可以通过除以其组件的最大值来饱和：

varying vec3 vNormal;

void main(void)
{
    vec3 view_nv  = normalize(vNormal);
    vec3 nv_color = abs(view_nv); 
    nv_color     /= max(nv_color.x, max(nv_color.y, nv_color.z));
    gl_FragColor  = vec4(nv_color, 1.0);
}

varying vec3 vNormal;

void main(void)
{
    vec3 view_nv  = normalize(vNormal);
    vec3 nv_color = abs(view_nv); 
    nv_color     /= max(nv_color.x, max(nv_color.y, nv_color.z));
    gl_FragColor  = vec4(nv_color, 1.0);
}