使用OpenGL/GLSL实现法线贴图

Question

我正在学习GLSL，尝试实现一些光照和贴图技巧。我正在使用ShaderDesigner工具进行工作。在编写法线贴图后，我发现我的模型照明看起来不真实。以下是我的代码和一些图片。如果可能，请告诉我问题出在哪里。

顶点着色器(Vertex Shader)

#define MAX_LIGHTS 1

struct LightProps
{
    vec3 direction[MAX_LIGHTS];
};

attribute vec3 tangent;
attribute vec3 bitangent;

varying LightProps lights;

void main()
{
    vec3 N = normalize(gl_NormalMatrix*gl_Normal);
    vec3 T = normalize(gl_NormalMatrix*tangent);
    vec3 B = normalize(gl_NormalMatrix*bitangent);

    mat3 TBNMatrix = mat3(T,B,N);

    vec4 vertex = gl_ModelViewMatrix*gl_Vertex;
    for(int i = 0; i < MAX_LIGHTS; i++)
    {
        vec4 lightPos = gl_LightSource[i].position;
        lights.direction[i] = vec3(lightPos.w > 0 ? lightPos-vertex : lightPos);
        lights.direction[i] *= TBNMatrix;
    }

    gl_TexCoord[0] = gl_MultiTexCoord0;
    gl_Position = gl_ModelViewProjectionMatrix*gl_Vertex;
} 

片元着色器

#define MAX_LIGHTS 1
struct LightProps
{
    vec3 direction[MAX_LIGHTS];
};

uniform sampler2D textureUnit;
uniform sampler2D normalTextureUnit;
uniform vec4 TexColor;

varying LightProps lights;

void main()
{
    vec3 N = normalize(texture2D(normalTextureUnit,gl_TexCoord[0].st).rgb*2.0-1.0);

    vec4 color = vec4(0,0,0,0);
    for(int i = 0; i < MAX_LIGHTS; i++)
    {
        vec3 L = lights.direction[i];
        float dist = length(L);
        L = normalize(L);

        float NdotL = max(dot(N,L),0.0);

        if(NdotL > 0)
        {
            float att = 1.0;
            if(gl_LightSource[i].position.w > 0)
            {
                att = 1.0/ (gl_LightSource[i].constantAttenuation +
                gl_LightSource[i].linearAttenuation * dist +
                gl_LightSource[i].quadraticAttenuation * dist * dist);
            }
            
            vec4 ambient = gl_FrontLightProduct[i].ambient;
            vec4 diffuse = clamp(att*NdotL*gl_FrontLightProduct[i].diffuse,0,1);
        
            color += att*(ambient+diffuse);
        }
    }

    vec4 textureColor = texture2D(textureUnit, vec2(gl_TexCoord[0]));
    gl_FragColor = TexColor*textureColor + gl_FrontLightModelProduct.sceneColor + color;
}

我将TexColor设置为(0.3,0.3,0.3,1.0)并拍了照片:

截图

  

当我把相机和灯光转向左边时，有一点点的光照，但是当我转向右边时，平面完全被照亮。我认为这里有些问题，因为在没有法线贴图的情况下，平面从两侧看起来都是一样的。以下是法线纹理。提前感谢。

法线贴图:

  

- haksist

---

我认为这些法线对于每个片段都是相同的，我只需要将这些法线转换到世界空间，然后乘以光方向来获得漫反射强度。 - haksist

不，如果法线存储在对象空间中，那么这将起作用，但实际上它们并不是。这些法线位于切线空间中，你可以通过主导颜色为蓝色来确定这一点。你有两个选择：1. 将所有的光照方向向量转换为切线空间或 2. 将法线贴图从切线空间反向转换回视图空间。这两种方法都需要构建一个TBN矩阵。 - Andon M. Coleman

我尝试了您建议的解决方案，这是结果http://i1300.photobucket.com/albums/ag94/haksist/Screenshot_zpsintwk2uv.png。这是真的吗？ - haksist

那看起来差不多正确，不知道光源具体在哪里很难说。颜色有些淡，但这已经是你原始截图的情况了。 - Andon M. Coleman

我改进了我的解决方案并更新了问题，你可以看一下。 - haksist

Answer 1

该法线贴图是在切线空间中的，但您将其视为物体空间。

除了法线之外，每个顶点需要一个副切向量和/或切线向量，以形成基础来执行进入和退出切线空间的变换。这个矩阵通常简称为TBN。

这里有两个选择：

1. 将所有光照方向向量转换为切线空间

   • 适用于前向渲染，可以在顶点着色器中完成

2. 将法线贴图从切线空间转换回视图空间

   • 由延迟渲染要求，在片段着色器中必须完成

这两个选项都需要构建TBN矩阵，如果您的切线空间基础是正交的（建模软件如Assimp可以配置为自动完成此操作），则可以转置TBN矩阵以执行任一操作。

您正在实现前向渲染，因此应采用解决方案＃1。

---

以下是解决方案＃1所需步骤的概述。通常，您会在顶点着色器中计算光照方向向量以获得更好的性能。

将光照向量转换为切线空间的顶点着色器：

attribute vec3 tangent;
attribute vec3 bitangent;

varying vec3 N;
varying vec3 V;
varying vec3 E;

varying vec3 T;
varying vec3 B;

void main()
{
    N = normalize(gl_NormalMatrix*gl_Normal);
    V = vec3(gl_ModelViewMatrix*gl_Vertex);
    E = normalize(-V);

    T = normalize(gl_NormalMatrix*tangent);
    B = normalize(gl_NormalMatrix*bitangent);

    gl_TexCoord[0] = gl_MultiTexCoord0;
    gl_Position = gl_ModelViewProjectionMatrix*gl_Vertex;
}

片段着色器将光照向量转换为切空间:

varying vec3 N;
varying vec3 V;
varying vec3 E;

varying vec3 B;
varying vec3 T;

uniform sampler2D textureUnit;
uniform sampler2D normalTextureUnit;
uniform vec4 TexColor;

#define MAX_LIGHTS 1

void main()
{
    // Construct Tangent Space Basis
    mat3 TBN = mat3 (T, B, N);

    vec3 normal = normalize (texture2D(normalTextureUnit,gl_TexCoord[0].st).xyz*2.0 - 1.0);

    vec4 color = vec4(0,0,0,0);
    for(int i = 0; i < MAX_LIGHTS; i++)
    {
        vec4 lightPos = gl_LightSource[i].position;
        vec3 L = lightPos.w > 0 ? lightPos.xyz - V : lightPos;

        L *= TBN; // Transform into tangent-space

        float dist = length(L);
        L = normalize(L);

        float NdotL = max(dot(L,N),0.0);
        if(NdotL > 0)
        {
            float att = 1.0;
            if(lightPos.w > 0)
            {
                att = 1.0/ (gl_LightSource[i].constantAttenuation +
                gl_LightSource[i].linearAttenuation * dist +
                gl_LightSource[i].quadraticAttenuation * dist * dist);
            }

            vec4 diffuse =  clamp(att*NdotL*gl_FrontLightProduct[i].diffuse,0,1);
            color += att*gl_FrontLightProduct[i].ambient + diffuse;
        }
    }

    vec4 textureColor = texture2D(textureUnit, vec2(gl_TexCoord[0]));
    gl_FragColor = TexColor*textureColor + gl_FrontLightModelProduct.sceneColor + color;
}

这里有一个教程（链接），它将填补你的空白并解释如何计算切线和副法线。

- Andon M. Coleman

---

lightPos.w是什么，我该如何获取它？ - Nolesh