编辑
问题原来是综合的，但是最重要的是我没有正确计算光照强度，因为我没有正确计算我的法线矩阵。从现在开始，此修复程序就已经留下我的记忆，但是我记得我没有进行转置逆运算，这在很大程度上解决了问题。
我花了一些时间解决这个问题，但我一生都无法解决。
我发现，当将多个光源应用于一个对象时，必须将最终的颜色值相加后再对其进行钳位，但是当灯光相互作用时，我仍然会感到奇怪的黑暗边缘。
这是我正在描述的屏幕截图：
前照灯朝向当前摄像机的方向，另一个光源位于场景的最左侧。大灯当前位于茶壶旋钮/手柄的右侧，并且您可以看到，正在进行一些非常奇怪的交互。
这是我的着色器源：
顶点着色器
attribute vec4 a_position;
attribute vec4 a_color;
attribute vec4 a_normals;
varying vec4 v_color_or_normal;
varying vec3 cam;
varying vec3 vert;
uniform mat4 u_xformMatrix;
uniform mat4 u_cameraMatrix;
void main() {
gl_Position = u_cameraMatrix * u_xformMatrix * a_position;
v_color_or_normal = a_color;
cam = vec3(u_cameraMatrix * u_xformMatrix * a_position);
vert = vec3(a_position);
}
片段着色器
precision mediump float;
varying vec4 v_color_or_normal;
varying vec3 cam; //modelview_mat*vertex
varying vec3 vert;//just the vertex
uniform int renderMode; //pass 0 when rendering the ground, 1 when rendering the teapot
uniform vec3 lookVec; //pass the vector representing the camera direction
uniform mat4 u_normalMatrix; //the normal matrix for calculating normals
//I'm using
//u_normalMatrix = modelMatrix.invert().transpose() (the transpose inverse)
uniform vec3 camCoords; //headlight origin
uniform vec3 worldLightCoords; //fixed light origin
void main() {
vec3 emissive = vec3(0.0, 0.0, 0.0); //my professor requires this. Not sure why.
vec3 ambient;
vec3 diffuse;
vec3 specular;
float shiny;
vec3 normal;
if(renderMode == 0) { //render the ground colors
ambient = vec3(v_color_or_normal - vec4(0.05, 0.3, 0.05, 0.0));
diffuse = vec3(0.05, 0.3, 0.05);
specular = vec3(0.22, 0.22, 0.22);
shiny = 4.0;
normal = vec3(normalize(u_normalMatrix * vec4(0.0, 1.0, 0.0, 1.0)));
}
if(renderMode == 1) { //render the teapot colors
//do stuff for teapot
ambient = vec3(0.105882, 0.58824, 0.113725);
normal = vec3(normalize(u_normalMatrix * v_color_or_normal));
diffuse = vec3(0.427451, 0.470588, 0.541176);
specular = vec3(0.22, 0.22, 0.22);
shiny = 9.0;
}
vec3 worldLightPos = worldLightCoords;
vec3 camLightPos = camCoords;
vec3 fixedLightDirection = normalize(worldLightPos - vert);
vec3 camLightDirection = normalize(lookVec - vec3(0,0,10.0));
//calculate diffuse/spec for fixed light source
float lambertianFix = max(dot(fixedLightDirection, normal), 0.0);
float specFix = 0.0;
if(lambertianFix > 0.0) {
vec3 R = reflect(-fixedLightDirection, normal);
vec3 viewDirection = normalize(-vert);
float specularAngle = max(dot(R, viewDirection), 0.0);
specFix = pow(specularAngle, shiny);
}
vec3 total_diffuse = lambertianFix*diffuse;
vec3 total_specular = specFix*specular;
//calculate diffuse/spec for headlight
float lambertianCam = max(dot(camLightDirection, normal), 0.0);
float specCam = 0.0;
if(lambertianCam > 0.0) {
vec3 R = reflect(-camLightDirection, normal);
vec3 viewDirection = normalize(-cam);
float specularAngle = max(dot(R, viewDirection), 0.0);
specCam = pow(specularAngle, shiny);
}
total_diffuse += lambertianCam*diffuse;
total_specular += specCam*specular;
//clamp values
total_diffuse = clamp(total_diffuse, 0.0, 1.0);
total_specular = clamp(total_specular, 0.0, 1.0);
//put it all together
gl_FragColor = vec4(emissive + ambient + total_diffuse + total_specular, 1.0);
}
任何帮助深表感谢。谢谢！
最佳答案
问题原来是综合的，但是最重要的是我没有正确计算光照强度，因为我没有正确计算我的法线矩阵。从现在开始，此修复程序就已经留下我的记忆，但是我记得我没有进行转置逆运算，这在很大程度上解决了问题。
所以...问题甚至不在我提供的代码中。我的错。
关于javascript - WebGL多个光源产生黑边，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22412292/