在前文中我尽可能地把我所理解Normal Map原理总结了一下，本续篇将从实践部分继续开始，各位看官尽情拍砖。——ZwqXin.com
上篇见：[shader复习与深入：Normal Map(法线贴图)Ⅰ]
1. 怎样获得顶点的TBN
其实我觉得这个是实践部分最麻烦的地方。OpenGL提供了诸如glNormal、normal-vbo之类的接口设置顶点的法线，然后在shader中以gl_Normal等方式取得顶点法线数据，但是没有提供切线和副法线的。当然两者只要其一就足够了（另一者可通过叉乘和左/右手定则获得）。因为要把TBN导入shader，干脆就设置attribute变量，记录每个顶点的切线。切线一般就是相邻顶点的差向量了（其实这有时候是非常繁重的工作）。
如果是通常的3DS模型的话，顶点法线是共顶点的面的面法线的加权，这样法线就不一定垂直于某个面，即与切线不垂直。但只要它们还是近似垂直的，上篇提及的Gram-Schmidt 算法应该可以处理。或者在shader中，把法线与切线叉乘出副法线，再用法线与副法线叉乘得新的切线，也能确保两两垂直。这样之前的TBN矩阵的转置矩阵就能直接作为其逆矩阵，完成向量从模型坐标系往切线空间坐标系的变换了。
问题不只这样。对于一些模型，共享顶点的三角面片面法线差角太大，这时候计算出的该顶点法线和切线就可能带来麻烦。在橙书（OpenGL Shading Language）中，谈及了切线必须是一致的（consistently），面片相邻的顶点切线不应该差距太大。但若相邻面片夹角太大，得到的该顶点法线就可能与“共享该顶点的面片”上的其他顶点的法线差异很大，从而切线也会相差很大，直接导致光向量等在这两顶点的切线空间差异很大，插值的各个针对像素的光向量方向差异很大，与像素法线点乘的cos也会差异得很明显（而现实中一般的凹凸面漫反射光线不会有太大方向差异）。解决方法是把该出了问题的顶点拆成两个（原地拷贝，3DS模型就不用了- -），一个面片用一个，其法线只受所属的面片的面法线决定（这样最后会形成突出的边缘，但夹角大的面片之间实际上就应该会是有这样的效果吧）。
另一个问题，我们向shader传入顶点法线切线，希望副法线由两者叉乘得出。但既然叉乘就有个方向问题（结果可以有两个方向，AXB与BXA是不一样的，我以前弄shadow volume就曾被它这种特性作弄过）。AXB改成BXA实际上会导致凹凸感反向，原来凹的变凸了，原来凸的变凹了（要仔细比对，不然会有首因效应）。一般就用N X T吧，因为基本上都是这个顺序的，结果也符合原Normal Map。
2. GLSL 1.2 Shader实现代码
没什么好说的，就是前面算法翻译成GLSL。
Vertex Shader：
// vertex shader
uniform vec3 lightpos; //传入光源的模型坐标吧
uniform vec4 eyepos;
varying vec3 lightdir;
varying vec3 halfvec;
varying vec3 norm;
varying vec3 eyedir;
attribute vec3 rm_Tangent;
void main(void)
{
vec4 pos = gl_ModelViewMatrix * gl_Vertex;
pos = pos / pos.w;
//把光源和眼睛从模型空间转换到视图空间
vec4 vlightPos = (gl_ModelViewMatrix * vec4(lightpos, 1.0));
vec4 veyePos = (gl_ModelViewMatrix * eyepos);
lightdir = normalize(vlightPos.xyz - pos.xyz);
vec3 eyedir = normalize(veyePos.xyz - pos.xyz);
//模型空间下的TBN
norm = normalize(gl_NormalMatrix * gl_Normal);
vec3 vtangent = normalize(gl_NormalMatrix * rm_Tangent);
vec3 vbinormal = cross(norm,vtangent);
//将光源向量和视线向量转换到TBN切线空间
lightdir.x = dot(vtangent, lightdir);
lightdir.y = dot(vbinormal, lightdir);
lightdir.z = dot(norm , lightdir);
lightdir = normalize(lightdir);
eyedir.x = dot(vtangent, eyedir);
eyedir.y = dot(vbinormal, eyedir);
eyedir.z = dot(norm , eyedir);
eyedir = normalize(eyedir);
halfvec = normalize(lightdir + eyedir);
gl_FrontColor = gl_Color;
gl_TexCoord[0] = gl_MultiTexCoord0;
gl_Position = ftransform();
}
// vertex shaderuniform vec3 lightpos; //传入光源的模型坐标吧uniform vec4 eyepos;varying vec3 lightdir;varying vec3 halfvec;varying vec3 norm;varying vec3 eyedir;attribute vec3 rm_Tangent;void main(void){ vec4 pos = gl_ModelViewMatrix * gl_Vertex; pos = pos / pos.w; //把光源和眼睛从模型空间转换到视图空间 vec4 vlightPos = (gl_ModelViewMatrix * vec4(lightpos, 1.0)); vec4 veyePos = (gl_ModelViewMatrix * eyepos); lightdir = normalize(vlightPos.xyz - pos.xyz); vec3 eyedir = normalize(veyePos.xyz - pos.xyz); //模型空间下的TBN norm = normalize(gl_NormalMatrix * gl_Normal); vec3 vtangent = normalize(gl_NormalMatrix * rm_Tangent); vec3 vbinormal = cross(norm,vtangent); //将光源向量和视线向量转换到TBN切线空间 lightdir.x = dot(vtangent, lightdir); lightdir.y = dot(vbinormal, lightdir); lightdir.z = dot(norm , lightdir); lightdir = normalize(lightdir); eyedir.x = dot(vtangent, eyedir); eyedir.y = dot(vbinormal, eyedir); eyedir.z = dot(norm , eyedir); eyedir = normalize(eyedir); halfvec = normalize(lightdir + eyedir); gl_FrontColor = gl_Color; gl_TexCoord[0] = gl_MultiTexCoord0; gl_Position = ftransform();}
传入的lightPos，eyePos，gl_Vertex，gl_Normal，rm_Tangent是其模型坐标系下的坐标、向量，乘以ModelView矩阵（法线切线乘以ModelView矩阵的转置逆矩阵）到了视图空间（vlightPos，veyePos，pos，norm, vtangent）；在视图空间它们已经有了“世界”的概念了，因此可以平等地相互影响（在各自封闭的模型空间是享受不了的），可以作各种点乘叉乘加减乘除计算。
注意，lightPos，eyePos虽说是在其各自模型坐标系下定义的，但不对它们弄什么平移旋转缩放操作的话，其模型矩阵就是一单位阵，此时其“世界坐标 == 模型坐标”。所以这时我可以当它是在世界空间定义的坐标（实际上一般我们都会在世界空间定义这两个点）。（注意，前提是不对它们做模型变换。）
从以上量得到光源向量、视线向量后（它们在视图空间），N、T叉乘得B（注意它们现在都在视图空间），通过TBN矩阵逆矩阵把两向量变换到当前顶点的切线空间，交给光栅去插值。
对以上有不理解的朋友，可能是没看上篇：[shader复习与深入：Normal Map(法线贴图)Ⅰ]
fragment shader：
//fragment shader
uniform float shiness;
uniform vec4 ambient, diffuse, specular;
uniform sampler2D bumptex;
uniform sampler2D basetex;
float amb = 0.2;
float diff = 0.2;
float spec = 0.6;
varying vec3 lightdir;
varying vec3 halfvec;
varying vec3 norm;
varying vec3 eyedir;
void main(void)
{
vec3 vlightdir = normalize(lightdir);
vec3 veyedir = normalize(eyedir);
vec3 vnorm = normalize(norm);
vec3 vhalfvec = normalize(halfvec);
vec4 baseCol = texture2D(basetex, gl_TexCoord[0].xy);
//Normal Map里的像素normal定义于该像素的切线空间
vec3 tbnnorm = texture2D(bumptex, gl_TexCoord[0].xy).xyz;
tbnnorm = normalize((tbnnorm - vec3(0.5))* 2.0);
float diffusefract = max( dot(lightdir,tbnnorm) , 0.0);
float specularfract = max( dot(vhalfvec,tbnnorm) , 0.0);
if(specularfract > 0.0){
specularfract = pow(specularfract, shiness);
}
gl_FragColor = vec4(amb * ambient.xyz * baseCol.xyz
+ diff * diffuse.xyz * diffusefract * baseCol.xyz
+ spec * specular.xyz * specularfract ,1.0);
}
//fragment shaderuniform float shiness;uniform vec4 ambient, diffuse, specular;uniform sampler2D bumptex;uniform sampler2D basetex;float amb = 0.2;float diff = 0.2;float spec = 0.6;varying vec3 lightdir;varying vec3 halfvec;varying vec3 norm;varying vec3 eyedir;void main(void){ vec3 vlightdir = normalize(lightdir); vec3 veyedir = normalize(eyedir); vec3 vnorm = normalize(norm); vec3 vhalfvec = normalize(halfvec); vec4 baseCol = texture2D(basetex, gl_TexCoord[0].xy); //Normal Map里的像素normal定义于该像素的切线空间 vec3 tbnnorm = texture2D(bumptex, gl_TexCoord[0].xy).xyz; tbnnorm = normalize((tbnnorm - vec3(0.5))* 2.0); float diffusefract = max( dot(lightdir,tbnnorm) , 0.0); float specularfract = max( dot(vhalfvec,tbnnorm) , 0.0); if(specularfract > 0.0){ specularfract = pow(specularfract, shiness); } gl_FragColor = vec4(amb * ambient.xyz * baseCol.xyz + diff * diffuse.xyz * diffusefract * baseCol.xyz + spec * specular.xyz * specularfract ,1.0);}
注意把normal map里的normal由(0,1)映射回(-1,1)。baseCol得到的是基底纹理的像素颜色。其余部分就是per pixel lighting的东西了。[Shader快速复习：Per Pixel Lighting(逐像素光照)]
(上为底纹理和法线纹理，下为它们与某破壁模型合作的效果，纹理from planetpixelemporium.com)
(我想是游戏最常用的用途：砖墙。我想是最常用的NormalMap,from NEHE)
(自己把墙壁BaseMap放入Photoshop的normalMapFilter里弄的NormalMap，呃.....)
本文来源于ZwqXin http://www.zwqxin.com/ , 转载请注明
原文地址：http://www.zwqxin.com/archives/shaderglsl/review-normal-map-bump-map-2.html