如果要查看视图空间中的法线向量,则必须将法线向量从模型空间变换到世界空间,再从世界空间变换到视图空间。这可以通过将法线向量变换为一步完成normalMatrix https://threejs.org/docs/#api/renderers/webgl/WebGLProgram.
varying vec3 vNormal;
void main(void)
{
vNormal = normalMatrix * normalize(normal);
gl_Position = matrix_viewProjection * matrix_model * vec4(position, 1.0);
}
由于变化变量在从顶点着色器传递到片段着色器时会进行插值,因此根据其重心坐标 https://en.wikipedia.org/wiki/Barycentric_coordinate_system,颜色的转换应该在片段着色器中完成。注意,插值后法向量必须再次归一化
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);
}