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

【问题标题】：How to implement MeshNormalMaterial in THREE.js by GLSL?如何通过 GLSL 在 THREE.js 中实现 MeshNormalMaterial？
【发布时间】：2018-05-22 11:08:51
【问题描述】：

我想实现像MeshNormalMaterial 这样的着色器，但我不知道如何将法线转换为颜色。

在三个.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);
}

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

谁能帮帮我？

谢谢。

【问题讨论】：

标签： three.js glsl webgl shader normals

【解决方案1】：

如果你想在视图空间中看到法线向量，你必须将法线向量从模型空间转换到世界空间，从世界空间转换到视图空间。这可以通过使用normalMatrix 转换法线向量一步完成。

varying vec3 vNormal;

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

由于可变变量在从顶点着色器传递到片段着色器时被插值，根据其Barycentric coordinates，应在片段着色器中完成对颜色的转换。注意，插值后法线向量必须再次归一化

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

【讨论】：