某些三角形上的 WebGL 阴影/照明太暗 [英] WebGL shading/lighting too dark on some triangles

问题描述

我有一个光照问题，其中一些三角形似乎表现出较差的着色伪影，其中着色在整个多边形(例如墙)的整个表面上不平滑.也就是说，构成多边形的每个三角形的阴影似乎都比相邻的三角形略深或浅.

I have a lighting problem in which some triangles seem to exhibit poor shading artifacts in which the shading isn't smooth across the overall surface of the entire polygon (a wall, for instance). That is, each triangle that makes up the polygon seems to be shading slightly darker or lighter than it's neighbor.

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

I am trying to achieve a simple directional lighting. Here is what it looks like:

这里是顶点着色器代码:

Here is what the vertex shader code:

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

这里是片段着色器代码:

And here is the fragment shader code:

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

问题是带有窗户的墙表现出各种条纹，其中单个三角形看起来比其他三角形更暗.我无法控制我得到的几何图形，但我相信三角形定义正常，法线也是如此.

The problem is that the wall with the windows exhibits various banding where individual triangles appear darker than others. I can't control the geometry I'm getting, but I do believe the triangles are defined ok, as are the normals.

uPMatrix 是投影矩阵，uMVMatrix 是模型视图矩阵，uNMatrix 是法线矩阵.下面是普通矩阵的创建方式(gl-matrix):

uPMatrix is the projection matrix, uMVMatrix is the model view matrix, and uNMatrix is the normal matrix. Here is how the normal matrix is created (gl-matrix):

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

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

任何想法我可能做错了什么，或者如何使整个墙壁平滑着色?

Any ideas what I might be doing wrong, or how I can make the entire wall smoothly shaded?

推荐答案

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 依赖于两个属性，因此以下之一必须为真:

In order for a triangle to have some variation in color over its surface, there must be some varying input (well, or gl_FragCoord, but that's a while other thing) that is actually varying. Since your two varyings vNormal and vColor depend on two attributes, one of the following must be true:

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

• aVertexMaterialColor is not the same for all three vertices.
• aVertexNormal is not the same for all three vertices.

很可能是法线；假设您的几何体来自一个文件，要么您没有正确(一致地)加载法线，要么您没有正确指示建模工具生成平面着色法线.

Most likely, it is the normals; assuming your geometry comes from a file, either you have not loaded the normals correctly (consistently), or you did not properly instruct the modeling tool to generate flat-shading normals.

这是一个调试技巧:

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

这将根据它们的法线为所有顶点着色，不考虑材质颜色和照明.你会得到古怪的颜色，但如果你看到任何带有阴影颜色的表面，这些三角形的法线并不完全相同.

This will colorize all your vertices just according to their normals, disregarding material colors and lighting. You'll get wacky colors, but if you see any surfaces with shaded colors, those triangles have normals which are not all the same.

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

(Any flat surface should be made of triangles with identical normals; furthermore, those normals should be perpendicular to the plane of the triangle.)

这篇关于某些三角形上的 WebGL 阴影/照明太暗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！