背景

最近关注了比较多的独立游戏，比如《eastward》，《the last night》和《迷雾侦探》的美术风格一下子吸引了我。经过一些资料的翻阅，发现实现它的美术效果其中很重要的一点就是 法线贴图。

原理

法线图： 基于原始图生成的。这是因为它把图片的法线向量转成了rgp通道。而面向我们的一般是z轴，所以颜色偏蓝。

//下面是两者的互相转换公式
Color.rgb = Normal.xyz / 2.0 + 0.5;
Normal.xyz = Color.rgb * 2.0 - 1.0

渲染步骤

将生成的法线和原图分别贴到材质球上面。接下来就是需要写一些shader了。至于怎么写，其实有很多教程。这里主要说明下基本的渲染步骤：

N = normalize(Normal.xyz)
L = normalize(LightDir.xyz)
Diffuse = LightColor * max(dot(N, L), 0.0)
Ambient = AmbientColor * AmbientIntensity
Attenuation = 1.0 / (ConstantAtt + (LinearAtt * Distance) + (QuadraticAtt * Distance * Distance)) 
Intensity = Ambient + Diffuse * Attenuation
FinalColor = DiffuseColor.rgb * Intensity.rgb

法线贴图

这里比较有意思的一点是：这里的序列帧都可以获得该shader效果。

添加阴影效果

前景虽然看起来不错，但是有一个问题就是没有阴影

阴影效果

参考

ShaderLesson6
《迷雾侦探》美术制作过程—光影篇