如何规避着色器渲染地面那块黑色

Question

着色器在渲染影子的时候。有一大片黑色，如图所示：

着色器代码为:

#version 300 es
// 从眼睛位置将场景渲染的片段着色器
precision lowp float;

uniform lowp sampler2DShadow s_shadowMap;
uniform sampler2D s_TextureMap;
uniform sampler2D c_TextureMap;
uniform int m_TextureUse;
in vec4 v_color;
in vec4 v_shadowCoord;
in vec2 v_texCoord;
in vec4 ambient;
in vec4 diffuse;
in vec4 specular;
layout(location = 0) out vec4 outColor;
#define EPSILON 0.00008;
float lookup (float x, float y)
{
    float pixelSize = 0.001;        // 1/500
    float z = v_shadowCoord.z;
   vec4 offset = vec4 (x * pixelSize * v_shadowCoord.w,
                        y * pixelSize * v_shadowCoord.w,
                        0.0,
                        0.0);
    return textureProj (s_shadowMap, v_shadowCoord + offset);
}

void main()
{
    float sum = 0.0;
    float x, y;
    for (x = -2.0; x <= 2.0; x += 2.0){
        for (y = -2.0; y <= 2.0; y += 2.0){
           sum += lookup (x, y);
        }
    }
    sum = 0.5+sum/18.0;
if(m_TextureUse==0){
     vec4 objectColor = texture(s_TextureMap, v_texCoord);
      outColor = (ambient + diffuse+specular)*objectColor*sum ;

  }else{
    vec4 objectColor = texture(s_TextureMap, v_texCoord);
      outColor =  (ambient + diffuse+specular )*objectColor*sum;
  }


}

#version 300 es

// 从眼睛位置将场景渲染的顶点着色器

// 从眼睛位置创建的MVP矩阵，结果记录在 gl_Position中
uniform mat4 u_mvpMatrix;
// 从光源位置创建的MVP矩阵，结果记录在 v_shadowCoord中
uniform mat4 u_mvpLightMatrix;
uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform vec3 viewPos;

layout(location = 0) in vec4 a_position;
layout(location = 1) in vec4 a_color;
layout(location = 2) in vec3 lightPosition;
layout(location = 3) in vec3 a_normal;
layout(location = 4) in vec2 a_texCoord;
const vec4 lightColor = vec4(1.0, 1.0, 1.0, 1.0);
out vec4 v_color;
// v_shadowCoord的结果和渲染到阴影贴图时的顶点位置结果相同
// 使用v_shadowCoord作为纹理坐标
out vec4 v_shadowCoord;
out vec2 v_texCoord;
out vec4 ambient;
out vec4 diffuse;
out vec4 specular;
void main()
{

    v_color = a_color;
    gl_Position = u_mvpMatrix * a_position;
    v_shadowCoord = u_mvpLightMatrix * a_position;

      float ambientStrength = 0.8;
      ambient = ambientStrength * lightColor;

     float diffuseStrength = 0.5;
     vec3 fragPos=vec3(modelMatrix * a_position);
     vec3 unitNormal = normalize(vec3(modelMatrix * vec4(a_normal, 1.0)));
     vec3 lightDir = normalize(lightPosition - fragPos);
     float diff = max(dot(unitNormal, lightDir), 0.0);
     diffuse = diffuseStrength * diff * lightColor;

    float specularStrength = 0.5;
    vec3 viewDir = normalize(viewPos - fragPos);
    vec3 reflectDir = reflect(-lightDir, unitNormal);
    float spec = pow(max(dot(unitNormal, reflectDir), 0.0), 16.0);
    specular = specularStrength * spec * lightColor;

    // 将坐标从齐次坐标 [-1,1] 变化到 [0,1]
    // transform from [-1,1] to [0,1];
    v_shadowCoord = v_shadowCoord * 0.5 + 0.5;
     v_texCoord = a_texCoord;
}

Answer 1

根据着色器代码，黑色可能是由于阴影贴图的采样导致的。您可以尝试以下方法来解决此问题：

检查阴影贴图是否正确渲染。如果阴影贴图未正确渲染，则可能导致黑色出现。您可以通过将阴影贴图显示为纹理来检查它是否正确渲染。

调整 lookup() 函数中的 pixelSize 值。pixelSize 值越小，采样的阴影贴图像素越多，阴影边缘会更加平滑，但是性能会受到影响。如果您的 pixelSize 值太小，则可能会导致黑色出现。您可以尝试逐步增加 pixelSize 的值，直到黑色消失。

检查着色器中的深度偏移设置。在着色器中，您可以设置深度偏移以解决深度冲突。如果您的深度偏移设置不正确，则可能导致黑色出现。您可以尝试在片段着色器中添加以下代码来设置深度偏移值：

vec2 texelSize = 1.0 / textureSize(s_shadowMap, 0);
float depth = texture(s_shadowMap, v_shadowCoord.xy).r;
float depthBias = 0.005;
float shadow = v_shadowCoord.z > depth + depthBias ? 1.0 : 0.0;

然后，将 sum 变量替换为 shadow 变量来计算阴影的总强度：

outColor = (ambient + diffuse + specular) * objectColor * shadow;

检查您的场景中的光源是否正确设置。如果光源没有正确设置，也可能导致黑色出现。您可以尝试调整光源的位置和方向，或者使用不同类型的光源来解决问题。
希望这些方法可以帮助您解决问题！