某些三角形上的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矩阵)：

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并不相同。

最有可能的原因是法线；假设几何体来自文件，则可能是未正确(一致地)加载法线，或者未正确指示建模工具生成平面着色法线。

这里有一个调试技巧：

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

这将只根据它们的法线对所有顶点进行着色，而不考虑材质颜色和照明。你会得到奇怪的颜色，但是如果你看到任何带有着色颜色的表面，这些三角形的法线都不一样。

(任何平面都应由具有相同法线的三角形组成；此外，这些法线应垂直于三角形的平面。)