【问题标题】:Normal mapping gone horribly wrong法线贴图大错特错
【发布时间】:2025-03-28 06:45:01
【问题描述】:

我尝试在我的 opengl 应用程序中实现法线映射,但无法正常工作。

This 是漫反射贴图(我添加了棕色),this 是法线贴图。

为了获得切线和双切线(在其他地方称为副法线?)向量,我为网格中的每个三角形运行此函数:

void getTangent(const glm::vec3 &v0, const glm::vec3 &v1, const glm::vec3 &v2,
const glm::vec2 &uv0, const glm::vec2 &uv1, const glm::vec2 &uv2,
std::vector<glm::vec3> &vTangents, std::vector<glm::vec3> &vBiangents)
{
    // Edges of the triangle : postion delta
    glm::vec3 deltaPos1 = v1-v0;
    glm::vec3 deltaPos2 = v2-v0;

    // UV delta
    glm::vec2 deltaUV1 = uv1-uv0;
    glm::vec2 deltaUV2 = uv2-uv0;

    float r = 1.0f / (deltaUV1.x * deltaUV2.y - deltaUV1.y * deltaUV2.x);
    glm::vec3 tangent = (deltaPos1 * deltaUV2.y   - deltaPos2 * deltaUV1.y)*r;
    glm::vec3 bitangent = (deltaPos2 * deltaUV1.x   - deltaPos1 * deltaUV2.x)*r;

    for(int i = 0; i < 3; i++) {
        vTangents.push_back(tangent);
        vBiangents.push_back(bitangent);
    }
}

之后,我调用 glBufferData 将顶点、法线、uvs、切线和双切线上传到 GPU。 顶点着色器:

#version 430

uniform mat4 ProjectionMatrix;
uniform mat4 CameraMatrix;
uniform mat4 ModelMatrix;

in vec3 vertex;
in vec3 normal;
in vec2 uv;
in vec3 tangent;
in vec3 bitangent;

out vec2 fsCoords;
out vec3 fsVertex;
out mat3 TBNMatrix;

void main()
{
    gl_Position = ProjectionMatrix * CameraMatrix * ModelMatrix * vec4(vertex, 1.0);

    fsCoords = uv;
    fsVertex = vertex;

    TBNMatrix = mat3(tangent, bitangent, normal);
}

片段着色器:

#version 430

uniform sampler2D diffuseMap;
uniform sampler2D normalMap;
uniform mat4 ModelMatrix;
uniform vec3 CameraPosition;

uniform struct Light {
    float ambient;
    vec3 position;
} light;
uniform float shininess;

in vec2 fsCoords;
in vec3 fsVertex;
in mat3 TBNMatrix;

out vec4 color;

void main()
{
    //base color
    const vec3 brownColor = vec3(153.0 / 255.0, 102.0 / 255.0, 51.0 / 255.0);
    color = vec4(brownColor * (texture(diffuseMap, fsCoords).rgb + 0.25), 1.0);//add a fixed base color (0.25), because its dark as hell

    //general vars
    vec3 normal = texture(normalMap, fsCoords).rgb * 2.0 - 1.0;
    vec3 surfacePos = vec3(ModelMatrix * vec4(fsVertex, 1.0));
    vec3 surfaceToLight = normalize(TBNMatrix * (light.position - surfacePos)); //unit vector
    vec3 eyePos = TBNMatrix * CameraPosition;

    //diffuse
    float diffuse = max(0.0, dot(normal, surfaceToLight));

    //specular
    float specular;
    vec3 incidentVector = -surfaceToLight; //unit
    vec3 reflectionVector = reflect(incidentVector, normal); //unit vector
    vec3 surfaceToCamera = normalize(eyePos - surfacePos); //unit vector
    float cosAngle = max(0.0, dot(surfaceToCamera, reflectionVector));
    if(diffuse > 0.0)
        specular = pow(cosAngle, shininess);

    //add lighting to the fragment color (no attenuation for now)
    color.rgb *= light.ambient;
    color.rgb += diffuse + specular;
}

我得到的图像完全不正确。 (光定位在相机上)

我在这里做错了什么?

【问题讨论】:

  • 我的赌注是片段着色器中的颜色设置/混合... 1. 你设置的输出颜色不止一次(如果我没记错的话,是在一些有大问题的 gfx 驱动程序上) 2.您正在添加 colorintensities 而不是 color*intensity 但我可能会忽略一些事情。 3. 首先尝试普通/凹凸着色(忽略环境、反射、镜面反射...),然后如果可行,则一个接一个地添加其余部分...始终检查着色器编译日志
  • 关于3,你的意思是我应该只使用漫反射照明吗?另外如何检查着色器编译日志?我的编译器不熟悉 glsl,但只熟悉 c++。
  • 是的,您应该只设置一次颜色变量,并且对于具有以下内容的初学者:color.rgb=browncolor.rgb*fabs(dot(surface_normal,light_direction)); 还添加了与我的着色器类似的答案,这些着色器的功能类似于您想要实现的目标。如果你不检查日志,那么你很容易错过一些东西,比如优化的 i/o 变量、语法错误等......

标签: c++ opengl glsl glm-math lighting


【解决方案1】:

我赌的是片段着色器中的颜色设置/混合...

  1. 您不止一次设置输出颜色

    如果我没记错的话,一些 gfx 驱动程序会出现大问题,例如行后的所有内容

    color = vec4(brownColor * (texture(diffuseMap, fsCoords).rgb + 0.25), 1.0);//add a fixed base color (0.25), because its dark as hell
    

    可以被驱动删除...

  2. 您正在添加 colorintensities 而不是 color*intensity

    但我可能会忽略一些事情。

  3. 首先尝试普通/凹凸阴影

    忽略环境、反射、镜面反射...如果有效,则一一添加其余部分。始终检查着色器的编译日志

懒得进一步分析你的代码,所以我是这样做的:

左边尺寸是用固定函数渲染的太空船物体(类似于ZXS Elite的蝰蛇)。右侧相同(对象的旋转略有不同),GLSL 着色器 就位,这个法线/凹凸贴图

[顶点]

//------------------------------------------------------------------
#version 420 core
//------------------------------------------------------------------
// texture units:
// 0 - texture0 map 2D rgba
// 1 - texture1 map 2D rgba
// 2 - normal map 2D xyz
// 3 - specular map 2D i
// 4 - light map 2D rgb rgb
// 5 - enviroment/skybox cube map 3D rgb

uniform mat4x4 tm_l2g;
uniform mat4x4 tm_l2g_dir;
uniform mat4x4 tm_g2s;

uniform mat4x4 tm_l2s_per;
uniform mat4x4 tm_per;

layout(location=0) in vec3 pos;
layout(location=1) in vec4 col;
layout(location=2) in vec2 txr;
layout(location=3) in vec3 tan;
layout(location=4) in vec3 bin;
layout(location=5) in vec3 nor;

out smooth vec3 pixel_pos;
out smooth vec4 pixel_col;
out smooth vec2 pixel_txr;
//out flat   mat3 pixel_TBN;
out smooth mat3 pixel_TBN;
//------------------------------------------------------------------
void main(void)
    {
    vec4 p;
    p.xyz=pos;
    p.w=1.0;
    p=tm_l2g*p;
    pixel_pos=p.xyz;
    p=tm_g2s*p;
    gl_Position=p;
    pixel_col=col;
    pixel_txr=txr;
    p.xyz=tan.xyz; p.w=1.0; pixel_TBN[0]=normalize((tm_l2g_dir*p).xyz);
    p.xyz=bin.xyz; p.w=1.0; pixel_TBN[1]=normalize((tm_l2g_dir*p).xyz);
    p.xyz=nor.xyz; p.w=1.0; pixel_TBN[2]=normalize((tm_l2g_dir*p).xyz);
    }
//------------------------------------------------------------------

[片段]

//------------------------------------------------------------------
#version 420 core
//------------------------------------------------------------------
in smooth vec3 pixel_pos;
in smooth vec4 pixel_col;
in smooth vec2 pixel_txr;
//in flat   mat3 pixel_TBN;
in smooth mat3 pixel_TBN;

uniform sampler2D   txr_texture0;
uniform sampler2D   txr_texture1;
uniform sampler2D   txr_normal;
uniform sampler2D   txr_specular;
uniform sampler2D   txr_light;
uniform samplerCube txr_skybox;

const int _lights=3;
uniform vec3 light_col0=vec3(0.1,0.1,0.1);
uniform vec3 light_dir[_lights]=         // direction to local star in ellipsoid space
    {
    vec3(0.0,0.0,+1.0),
    vec3(0.0,0.0,+1.0),
    vec3(0.0,0.0,+1.0),
    };
uniform vec3 light_col[_lights]=         // local star color * visual intensity
    {
    vec3(1.0,0.0,0.0),
    vec3(0.0,1.0,0.0),
    vec3(0.0,0.0,1.0),
    };

out layout(location=0) vec4 frag_col;

const vec4 v05=vec4(0.5,0.5,0.5,0.5);
const bool _blend=false;
const bool _reflect=true;
//------------------------------------------------------------------
void main(void)
    {
    float a=0.0,b,li;
    vec4 col,blend0,blend1,specul,skybox;
    vec3 normal;
    col=(texture2D(txr_normal,pixel_txr.st)-v05)*2.0;       // normal/bump maping
//  normal=pixel_TBN*col.xyz;
    normal=pixel_TBN[0];
    blend0=texture(txr_texture0,pixel_txr.st);
    blend1=texture(txr_texture1,pixel_txr.st);
    specul=texture(txr_specular,pixel_txr.st);
    skybox=texture(txr_skybox,normal);

    if (_blend)
        {
        a=blend1.a;
        blend0*=1.0-a;
        blend1*=a;
        blend0+=blend1;
        blend0.a=a;
        }

    col.xyz=light_col0; col.a=0.0; li=0.0;                          // normal shading (aj s bump mapingom)
    for (int i=0;i<_lights;i++)
            {
            b=dot(light_dir[i],normal.xyz);
            if (b<0.0) b=0.0;
//          b*=specul.r;
            li+=b;
            col.xyz+=light_col[i]*b;
            }
    col*=blend0;
    if (li<=0.1)
        {
        blend0=texture2D(txr_light,pixel_txr.st);
        blend0*=1.0-a;
        blend0.a=a;
        col+=blend0;
        }
    if (_reflect) col+=skybox*specul.r;
        col*=pixel_col;
    if (col.r<0.0) col.r=0.0;
    if (col.g<0.0) col.g=0.0;
    if (col.b<0.0) col.b=0.0;
    a=0.0;
    if (a<col.r) a=col.r;
    if (a<col.g) a=col.g;
    if (a<col.b) a=col.b;
    if (a>1.0)
        {
        a=1.0/a;
        col.r*=a;
        col.g*=a;
        col.b*=a;
        }
    frag_col=col;
    }
//------------------------------------------------------------------

这些源代码有点陈旧,并且针对特定应用混合了不同的东西

所以只提取你需要的东西。如果您对变量名称感到困惑,请评论我...

  • tm_代表变换矩阵
  • l2g 代表局部坐标系到全局坐标系的变换
  • dir 表示变换只改变方向(偏移量为 0,0,0)
  • g2s 代表全局到屏幕...
  • per 是透视变换...

GLSL 编译日志

您必须在编译着色器(而不是应用程序!!!)后以编程方式获取其内容。我通过为每个着色器、我使用的程序调用函数 glGetShaderInfoLog 来做到这一点......

[备注]

一些驱动程序会优化“未使用”的变量。正如您在图像中看到的那样,txr_texture1 未找到,即使片段着色器在代码中包含它,但此应用程序中未使用混合,因此驱动程序自行删除了它...

着色器日志可以显示很多信息(语法错误、警告...)

很少有 GLSL IDE 可以让着色器变得简单,但我更喜欢我自己的,因为我可以直接在其中使用目标应用程序代码。我的看起来像这样:

每个 txt 窗口都是一个着色器源(顶点,片段,...),右下角是剪贴板,左上角是上次编译后的着色器日志,左下角是预览。我设法像 Borland 风格的 IDE 一样对其进行编码(还有键和语法突出显示)我看到的其他 IDE 看起来相似(不同颜色的粗略:))无论如何,如果你想玩着色器下载这样的应用程序或自己做会有很大帮助...

TBN 创建也可能存在问题

您应该通过在每个顶点位置绘制彩色线条来直观地检查 TBN 向量(切线、副法线、法线)是否对应于对象表面。只是为了确定......这样的事情:

【讨论】:

  • @Pilpel 很好地完成编辑检查答案,如果您需要进一步的帮助,请给我评论...
  • 感谢您的回复,没有太多时间来分析您的代码(它也不是很可读),但我会尽快。只是想让你知道..
  • 如何得到“tm_l2g_dir”矩阵?
  • @Nolesh 与tm_l2g 相同(如旧GL 中的ModelView),但原点设置为(0,0,0),您也可以使用原始tm_l2g,但在这种情况下,您需要设置@987654341 @ 表示任何转换后的向量,所以 p.xyz=tan.xyz; p.w=0.0; pixel_TBN[0]=normalize((tm_l2g*p).xyz); ...
【解决方案2】:

我会努力让你的代码正常工作。你试过移动相机吗?

我在任何地方都看不到您使用变换、视图和模型矩阵对 TBNMatrix 进行了变换。您是否尝试过使用 vec3 normal = TBNMatrix[2]; 原始法线? (片段着色器)

以下内容可能会有所帮助。在顶点着色器中,您有:

uniform mat4 ProjectionMatrix;
uniform mat4 CameraMatrix;
uniform mat4 ModelMatrix;

但是,这里只应使用这 3 个矩阵:

uniform mat4 PCM;
uniform mat4 MIT;         //could be mat3
uniform mat4 ModelMatrix; //could be mat3

在 CPU 上计算这些矩阵的乘积会更有效(并且产生相同的结果,因为矩阵乘法是关联的)。那么这个乘积,PCM可以用来计算新的位置,每个顶点一个乘法:

gl_Position = PCM * vec4(vertex, 1.0);

MITModelMatrix 的逆转置,你必须在 CPU 上计算它。这可以用来转换法线:

vec4 tang = ModelMatrix*vec4(tangent,0);
vec4 bita= ModelMatrix*vec4(bitangent,0);
vec4 norm= PCMIT*vec4(tangent,0);   
TBNMatrix = mat3(normalize(tang.xyz), normalize(bita.xyz), normalize(normal.xyz));

我不确定切线和副切线会发生什么,但这样法线将保持垂直于它们。很容易证明。在这里,我使用 a° b 作为 a 和 b 向量的标量积。所以让n是一些法线,a是表面上的一些向量(例如{bi}切线,三角形的边缘),让A是任何变换。那么:

0 = a n = A^(-1) A a° n = A a° A^(-T) n = 0

我使用了等式 A x ° y = x ° A^T y。因此,如果a垂直于n,那么A a 垂直于A^(-T) n,所以我们必须用矩阵的逆转置对其进行变换。 但是,法线的长度应该是 1,所以在转换之后,它应该被归一化。

您也可以通过这样做获得垂直法线:

vec3 normal = normalize(cross(tangent, bitangent));

其中 cross(a,b) 是计算 a 和 b 的叉积的函数,witch 总是垂直于 a 和 b。

对不起我的英语:)

【讨论】: