某些三角形上的WebGL着色/照明太暗

Question

我遇到了一个光照问题，其中一些三角形似乎表现出不良的阴影瑕疵，其中阴影在整个多边形的整个表面（例如墙壁）上并不平滑。也就是说，构成多边形的每个三角形看起来都比它的邻居更浅或更浅。

我正在尝试实现简单的定向照明。这是它的样子：

以下是顶点着色器代码：

gl_Position  = uPMatrix * uMVMatrix * vec4(aVertexPosition.xyz, 1.0);    
vNormal = vec3(uNMatrix * vec4(aVertexNormal.xyz, 1.0));
vColor  = aVertexMaterialColor;

以下是片段着色器代码：

vec3  light   = normalize(vec3( 0.5,  0.2,  1.0));
float amount  = max(dot(vNormal, light),  0.0);
vec4 finalColor = vColor; 
finalColor.rgb *= amount;

问题在于带有窗户的墙壁呈现出各种各样的条带，其中各个三角形看起来比其他三角形更暗。我无法控制我得到的几何体，但我确实认为三角形定义正常，正常情况也是如此。

uPMatrix是投影矩阵，uMVMatrix是模型视图矩阵，uNMatrix是常规矩阵。以下是如何创建普通矩阵（gl-matrix）：

var mvMatrix = this.getModelViewMatrix();
var nMatrix  = this.nMatrix;

mat4.copy(nMatrix, mvMatrix);
mat4.invert(nMatrix, nMatrix);
mat4.transpose(nMatrix, nMatrix);

任何想法我可能做错了什么，或者我如何能够使整个墙壁平滑阴影？

Answer 1

gl_Position  = uPMatrix * uMVMatrix * vec4(aVertexPosition.xyz, 1.0);    
vNormal = vec3(uNMatrix * vec4(aVertexNormal.xyz, 1.0));
vColor  = aVertexMaterialColor;

vec3  light   = normalize(vec3( 0.5,  0.2,  1.0));
float amount  = max(dot(vNormal, light),  0.0);
vec4 finalColor = vColor; 
finalColor.rgb *= amount;

为了使三角形在其表面上有一些颜色变化，必须是一些变化的输入（好，或gl_FragCoord，但这是一段时间的其他事情）实际上是变化由于您的两个变体vNormal和vColor取决于两个属性，因此必须满足以下条件之一：

• aVertexMaterialColor对于所有三个顶点都不相同。
• aVertexNormal对于所有三个顶点都不相同。

最有可能的是，这是正常的;假设您的几何体来自文件，或者您没有正确加载法线（一致），或者您没有正确地指示建模工具生成平面着色法线。

这是一个调试技巧：

finalColor.rgb = vNormal * 0.5 + vec3(0.5);

这将根据法线将所有顶点着色，忽略材质颜色和光照。你会得到古怪的颜色，但是如果你看到带有阴影颜色的任何表面，那些三角形的法线就不一样了。

（任何平面应由具有相同法线的三角形组成;此外，这些法线应垂直于三角形的平面。）