Unity Shader-Phong光照模型与Specular

﹏ヽ暗。殇╰゛Y 2022-07-14 07:25 183阅读 0赞

## 简介 ##

学完了[兰伯特光照模型][Link 1]，再来学习一个更加高级一点的光照模型-Phong光照模型。光除了漫反射，还有镜面反射。一些金属类型的材质，往往表现出一种高光效果，用兰伯特模型是模拟不出来的，所以就有了Phong模型。Phong模型主要有三部分构成，第一部分是上一篇中介绍了的Diffuse，也就是漫反射，第二部分是环境光，在非全局光照的情况下，我们一般是通过一个环境光来模拟物体的间接照明，这个值在shader中可以通过一个宏来直接获取，而第三部分Specular，也就是高光部分的计算，是一种模拟镜面反射的效果，也是本篇文章重点介绍的内容。

在现实世界中，粗糙的物体一般会是漫反射，而光滑的物体呈现得较多的就是镜面反射，最明显的现象就是光线照射的反射方向有一个亮斑。再来复习一下镜面反射的概念：当平行入射的光线射到这个反射面时，仍会平行地向一个方向反射出来，这种反射就属于镜面反射，其反射波的方向与反射平面的法线夹角（反射角），与入射波方向与该反射平面法线的夹角（入射角）相等，且入射波、反射波，及平面法线同处于一个平面内。反射光的亮度不仅与光线的入射角有关，还与观察者视线和物体表面之间的角度有关。镜面反射通常会造成物体表面上的“闪烁”和“高光”现象，镜面反射的强度也与物体的材质有关，无光泽的木材很少会有镜面反射发生，而高光泽的金属则会有大量镜面反射。

## Phong光照模型 ##

Phong光照模型中主要的部分就是对高光的计算，首先来看下面这张图片：

![Center][]

理想情况下，光源射出的光线，通过镜面反射，正好在反射光方向观察，观察者可以接受到的反射光最多，那么观察者与反射方向之间的夹角就决定了能够观察到高光的多少。夹角越大，高光越小，夹角越小，高光越大。而另一个影响高光大小的因素是表面的光滑程度，表面越光滑，高光越强，表面月粗糙，高光越弱。L代表光源方向，N代表顶点法线方向，V代表观察者方向，R代表反射光方向。首先需要计算反射光的方向R，反射光方向R可以通过入射光方向和法向量求出，R + L = 2dot(N,L)N，进而推出R = 2dot(N,L)N - L。关于R计算的推导，可以看下面这张图：

![Center 1][]

不过在cg中，我们不用这么麻烦，cg为我们提供了一个计算反射光方向的函数reflect函数，我们只需要传入入射光方向（光源方向的反方向）和表面法线方向，就可以计算得出反射光的方向。然后，我们通过dot（R,V）就可以得到反射光方向和观察者方向之间的夹角余弦值了。下面给出冯氏反射模型公式：

**I(spcular) = I \* k \* pow(max(0,dot(R,V)), gloss)** ，其中I为入射光颜色向量，k为镜面反射系数，gloss为光滑程度。

通过上面的公式，我们可以看出，镜面反射强度跟反射向量与观察向量的余弦值呈指数关系，指数为gloss，该系数反映了物体表面的光滑程度，该值越大，表示物体越光滑，反射光越集中，当偏离反射方向时，光线衰减程度越大，只有当视线方向与反射光方向非常接近时才能看到高光现象，镜面反射光形成的光斑较亮并且较小；该值越小，表示物体越粗糙，反射光越分散，可以观察到光斑的区域越广，光斑大并且强度较弱。

## Phong光照模型在Unity中的实现 ##

下面看一下冯氏光照模型在Unity中的实现，由于有高光，为了更好的效果，我们将主要的计算放到了fragment shader中进行。不多说，上代码：

Shader "ApcShader/SpecularPerPixel"
    {
    	//属性
    	Properties
    	{
    		_Diffuse("Diffuse", Color) = (1,1,1,1)
    		_Specular("Specular", Color) = (1,1,1,1)
    		_Gloss("Gloss", Range(1.0, 255)) = 20
    	}
    
    	//子着色器	
    	SubShader
    	{
    		Pass
    		{
    			//定义Tags
    			Tags{ "LightingMode" = "ForwardBase" }
    
    			CGPROGRAM
    			//引入头文件
    			#include "Lighting.cginc"
    
    			//定义函数
    			#pragma vertex vert
    			#pragma fragment frag
    
    			fixed4 _Diffuse;
    			fixed4 _Specular;
    			float _Gloss;
    
    			//定义结构体：应用阶段到vertex shader阶段的数据
    			struct a2v
    			{
    				float4 vertex : POSITION;
    				float3 normal : NORMAL;
    			};
    
    			//定义结构体：vertex shader阶段输出的内容
    			struct v2f
    			{
    				float4 pos : SV_POSITION;
    				float3 worldNormal : NORMAL;
    				float3 worldPos : TEXCOORD1;
    			};
    
    			//顶点shader
    			v2f vert(a2v v)
    			{
    				v2f o;
    				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
    				//法线转化到世界空间
    				o.worldNormal = normalize(mul(v.normal, (float3x3)_World2Object));
    				//顶点位置转化到世界空间
    				o.worldPos = mul(_Object2World, v.vertex).xyz;
    				return o;
    			}
    
    			//片元shader
    			fixed4 frag(v2f i) : SV_Target
    			{
    				//环境光
    				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * _Diffuse;
    				//归一化光方向
    				fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
    				//再次归一化worldNorml
    				fixed3 worldNormal = normalize(i.worldNormal);
    				//diffuse
    				fixed3 diffuse = _LightColor0.rgb * _Diffuse.rgb * saturate(dot(worldNormal, worldLight));
    				//计算反射方向R,worldLight表示光源方向（指向光源），入射光线方向为-worldLight，通过reflect函数（入射方向，法线方向）获得反射方向
    				fixed3 reflectDir = normalize(reflect(-worldLight, worldNormal));
    				//计算该像素对应位置（顶点计算过后传给像素经过插值后）的观察向量V，相机坐标-像素位置
    				fixed3 viewDir = normalize(_WorldSpaceCameraPos.xyz - i.worldPos.xyz);
    				//计算高光值，高光值与反射光方向与观察方向的夹角有关，夹角为dot（R,V），最后根据反射系数计算的反射值为pow（dot（R,V），Gloss）
    				fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(max(0.0,dot(reflectDir, viewDir)), _Gloss);
    				//冯氏模型：Diffuse + Ambient +　Specular
    				fixed3 color = diffuse + ambient + specular;
    				return fixed4(color, 1.0);
    			}
    			ENDCG
    		}
    	}
    
    	//前面的Shader失效的话，使用默认的Diffuse
    	FallBack "Diffuse"
    }

我们找一个球球，使用我们的shader看一下效果：

![Center 2][]

调整观察的方向以及光滑程度，可以看见亮斑是随着观察的方向改变而变化的：

![Center 3][]

## Blinn-Phong光照模型 ##

Phong光照模型能够很好地表现高光效果，不过Blinn-Phong光照的缺点就是计算量较大，所以，在1977年，Jim Blinn对Phong光照进行了改进，称之为Blinn-Phong光照模型。

关于Blinn-Phong和Phong光照模型的对比，可以参照这张图片：

![Center 4][]

Blinn-Phong光照引入了一个概念，半角向量，用H表示。半角向量计算简单，通过将光源方向L和视线方向V相加后归一化即可得到半角向量。Phong光照是比较反射方向R和视线方向V之间的夹角，而Blinn-Phong改为比较半角向量H和法线方向N之间的夹角。半角向量的计算复杂程度要比计算反射光线简单得多，所以Blinn-Phong的性能要高得多，效果比Phong光照相差不多，所以OpenGL中固定管线的光照模型就是Blinn-Phong光照模型。

BlinnPhong光照模型如下：

**I(spcular) = I \* k \* pow(max(0,dot(N,H)), gloss)** ，其中I为入射光颜色向量，k为镜面反射系数，gloss为光滑程度。

## Blinn-Phong光照在Unity中的实现 ##

Shader "ApcShader/BlinnPhongPerPixel"
    {
    	//属性
    	Properties
    	{
    		_Diffuse("Diffuse", Color) = (1,1,1,1)
    		_Specular("Specular", Color) = (1,1,1,1)
    		_Gloss("Gloss", Range(1.0, 256)) = 20
    	}
    
    	//子着色器	
    	SubShader
    	{
    		Pass
    		{
    			//定义Tags
    			Tags{ "LightingMode" = "ForwardBase" }
    
    			CGPROGRAM
    			//引入头文件
    			#include "Lighting.cginc"
    
    			//定义函数
    			#pragma vertex vert
    			#pragma fragment frag
    
    			//定义Properties中的变量
    			fixed4 _Diffuse;
    			fixed4 _Specular;
    			float _Gloss;
    
    			//定义结构体：应用阶段到vertex shader阶段的数据
    			struct a2v
    			{
    				float4 vertex : POSITION;
    				float3 normal : NORMAL;
    			};
    
    			//定义结构体：vertex shader阶段输出的内容
    			struct v2f
    			{
    				float4 pos : SV_POSITION;
    				float3 worldNormal : NORMAL;
    				float3 worldPos : TEXCOORD1;
    			};
    
    			//顶点shader
    			v2f vert(a2v v)
    			{
    				v2f o;
    				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
    				//法线转化到世界空间
    				o.worldNormal = normalize(mul(v.normal, (float3x3)_World2Object));
    				//顶点位置转化到世界空间 
    				o.worldPos = mul(_Object2World, v.vertex).xyz;
    				return o;
    			}
    
    			//片元shader
    			fixed4 frag(v2f i) : SV_Target
    			{
    				//环境光
    				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * _Diffuse;
    				//世界空间下光线方向
    				fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
    				//需要再次normalize
    				fixed3 worldNormal = normalize(i.worldNormal);
    				//计算Diffuse
    				fixed3 diffuse = _LightColor0.rgb * _Diffuse.rgb * saturate(dot(worldNormal, worldLight));
    				//计算视线方向（相机位置-像素对应位置）
    				fixed3 viewDir = normalize(_WorldSpaceCameraPos.xyz - i.worldPos.xyz);
    				//计算半角向量（光线方向 + 视线方向，结果归一化）
    				fixed3 halfDir = normalize(worldLight + viewDir);
    				//计算Specular（Blinn-Phong计算的是）
    				fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(saturate(dot(halfDir, worldNormal)), _Gloss);
    				//结果为diffuse + ambient + specular
    				fixed3 color = diffuse + ambient + specular;
    				return fixed4(color, 1.0);
    			}
    				ENDCG
    		}
    	}
    	//前面的Shader失效的话，使用默认的Diffuse
    	FallBack "Diffuse"
    }

我们再放一个球，使用Blinn-Phong光照，与Phong光照模型进行对比：

![Center 5][]

换个角度再看一下：

![Center 6][]

## 带纹理的Phong光照Shader ##

只有两个没有纹理的球，是说明不了问题的，下面来看一下带有纹理的Phong光照Shader。首先，我们要思考一个问题，如果我们要使用Specular类型的Shader，那么这个物体一般是金属类型的，这样，这个物体就会呈现金属特有的高光属性。然而，实际上完全是金属的物体并不是很多，现实世界中漫反射和镜面反射是共存的，拿一把刀来说，刀身是金属，刀柄是木头，那么，只有刀身适合这种类型的shader。可能我们最简单的想法是把刀拆成两个部分，刀身用的是Specular，刀柄用Diffuse；但是这种做法很麻烦，而且一个物体通过了两个drall call才能渲染出来。所以，聪明的前辈们总是能想到好的办法，次时代类型游戏中最简单的一种贴图就诞生了---高光贴图（通道）。

所谓高光贴图，或者说成高光通道，就是通过在制作贴图时，把图片的高光信息存储在一个灰度图或者直接存储在贴图的通道内，如果不需要Alpha Test的话，可以直接把高光通道放在Diffuse贴图的Alpha通道。而我们在shader中计算时，通过采样，就可以获得这个贴图中每个像素对应的位置是否是有高光的。这样，在Fragment Shader中可以直接通过这个Mask值乘以高光从而通过一个材质渲染出同一个模型上的不同质地。比如在通道内，0表示无高光，1（255）表示高光最强，那么，不需要高光的地方我们就可以在制作这张图的时候给0，需要高光的，刷上颜色，颜色越接近白色，高光越强。

知道了原理之后，我们就可以找一个人物模型贴图，然后在PhotoShop中给RGB格式的贴图增加一个通道，作为高光通道，然后把需要高光的部分抠出来，其他部分置为黑色

![Center 7][]

好吧，作为一个程序员，一直想说，我.......的美工，实在不怎么样。不管图扣得再怎么差，原理没错就好。下面上shader：

Shader "ApcShader/BlinnPhongWithTex"
    {
    	//属性
    	Properties
    	{
    		_Diffuse("Diffuse", Color) = (1,1,1,1)
    		_Specular("Specular", Color) = (1,1,1,1)
    		_SpecularScale("SpecularScale", Range(0.0, 5.0)) = 1.0
    		_Gloss("Gloss", Range(0.0, 1)) = 20
    		_MainTex("RGBSpecular", 2D) = "white"{}
    	}
    
    	//子着色器	
    	SubShader
    	{
    		Pass
    		{
    			//定义Tags
    			Tags{ "LightingMode" = "ForwardBase" }
    
    			CGPROGRAM
    			//引入头文件
    			#include "Lighting.cginc"
    
    			//定义函数
    			#pragma vertex vert
    			#pragma fragment frag
    
    			//定义Properties中的变量
    			fixed4 _Diffuse;
    			fixed4 _Specular;
    			float _Gloss;
    			float _SpecularScale;
    			sampler2D _MainTex;
    			float4 _MainTex_ST;
    
    			//定义结构体：应用阶段到vertex shader阶段的数据
    			struct a2v
    			{
    				float4 vertex : POSITION;
    				float3 normal : NORMAL;
    				float4 texcoord : TEXCOORD0;
    			};
    
    			//定义结构体：vertex shader阶段输出的内容
    			struct v2f
    			{
    				float4 pos : SV_POSITION;
    				float3 worldNormal : NORMAL;
    				float3 worldPos : TEXCOORD0;
    				float2 uv : TEXCOORD1;
    			};
    
    			//顶点shader
    			v2f vert(a2v v)
    			{
    				v2f o;
    				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
    				//法线转化到世界空间
    				o.worldNormal = normalize(mul(v.normal, (float3x3)_World2Object));
    				//顶点位置转化到世界空间 
    				o.worldPos = mul(_Object2World, v.vertex).xyz;
    				//转化uv
    				o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
    				return o;
    			}
    
    			//片元shader
    			fixed4 frag(v2f i) : SV_Target
    			{
    				//环境光
    				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;
    				//世界空间下光线方向
    				fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
    				//需要再次normalize
    				fixed3 worldNormal = normalize(i.worldNormal);
    				//计算Diffuse
    				fixed3 diffuse = _LightColor0.rgb * (dot(worldNormal, worldLight) * 0.5 + 0.5);
    				//计算视线方向（相机位置-像素对应位置）
    				fixed3 viewDir = normalize(_WorldSpaceCameraPos.xyz - i.worldPos.xyz);
    				//计算半角向量（光线方向 + 视线方向，结果归一化）
    				fixed3 halfDir = normalize(worldLight + viewDir);
    				//计算Specular（Blinn-Phong计算的是）
    				fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(saturate(dot(halfDir, worldNormal)), _Gloss);
    				//纹理采样
    				fixed4 tex = tex2D(_MainTex, i.uv);
    				//纹理中rgb为正常颜色，a为一个高光的mask图，非高光部分a值为0，高光部分根据a的值控制高光强弱
    				fixed3 color = (diffuse  + ambient + specular * tex.a * _SpecularScale) * tex.rgb;
    				return fixed4(color, 1.0);
    			}
    				ENDCG
    		}
    	}
    	//前面的Shader失效的话，使用默认的Diffuse
    	FallBack "Diffuse"
    }

看一下最终效果，左侧为使用了高光的效果，右侧为普通diffuse的效果，可以看出，使用了高光贴图，我们只有上面的刀才表现出了高光，其他部分仍然是正常的。

![Center 8][]

高光有个很搭配的后处理，就是 [Bloom效果（全屏泛光）][Bloom]，也是我很喜欢的效果之一。虚幻四的Bloom效果非常好，带有金属的效果加上泛光，让人特别舒服，我们在Unity中用一个简单的Bloom效果，让金属效果更好。

![Center 9][]

最后来一张动图，Specular的主要特点就在于当观察者与对象角度有变化时，也就是V向量和R向量之间的角度有变化时，高光效果会有变化，所以只有动起来，才能真正看出Specular与Diffuse的不同。

![Center 10][]

## Shader的优化 ##

一般情况下，fragment shader是性能的瓶颈，所以优化Shader的重要思路之一就是减少逐像素计算，将计算挪到vertex shader部分，然后通过vertex shader向fragment shader中传递参数。正常情况下，一个物体在屏幕上，逐顶点计算的量级要远远小于物体在屏幕上逐像素计算的量（当然如果物体离相机特别远，光栅化之后在屏幕上只占了很小的一部分时，有可能有反过来的情况，但是有LOD之类的技术的话，远了之后，更换为低模，也会降低顶点数，所以还是逐像素计算的比较可怕，尤其是分辨率大了之后）。当然，我们也不能把所有计算都放在vertex shader中，上一篇文章中说过，如果将高光计算放在vertex shader中，效果很差，下面就来看一下，效果有多差：

![Center 11][]

为什么会有这样的结果呢，主要是顶点计算的结果是通过顶点传递好的颜色进行高洛德着色，只是一个颜色的插值。而放在像素着色阶段，是通过顶点传递过来的参数，并且传递到像素阶段时经过了插值计算得到的信息，逐像素计算光照效果得到最终结果。更加详细的解释可以参照 [上一篇文章][Link 1]。2001年左右第三代modern GPU开始支持vertex shader，而在2003年左右，NVIDIA的GeForce FX和ATI Radeon 9700开始，GPU才开始支持fragment shader，也就是说fragment更先进，可以得到更好的效果。所以，我们只是将一些不会影响效果的计算放在vertex shader中即可。

上面的blinn-phong shader中，我们在fragment shader中计算了世界空间下的ViewDir，我们可以把这个计算移到vertex shader中进行：

//blinn-phong shader
    //puppet_master
    //2016.12.11
    Shader "ApcShader/BlinnPhongPerPixel"
    {
    	//属性
    	Properties
    	{
    		_Diffuse("Diffuse", Color) = (1,1,1,1)
    		_Specular("Specular", Color) = (1,1,1,1)
    		_Gloss("Gloss", Range(1.0, 256)) = 20
    	}
    
    	//子着色器	
    	SubShader
    	{
    		Pass
    		{
    			//定义Tags
    			Tags{ "LightingMode" = "ForwardBase" }
    
    			CGPROGRAM
    			//引入头文件
    			#include "Lighting.cginc"
    
    			//定义函数
    			#pragma vertex vert
    			#pragma fragment frag
    
    			//定义Properties中的变量
    			fixed4 _Diffuse;
    			fixed4 _Specular;
    			float _Gloss;
    
    			//定义结构体：应用阶段到vertex shader阶段的数据
    			struct a2v
    			{
    				float4 vertex : POSITION;
    				float3 normal : NORMAL;
    			};
    
    			//定义结构体：vertex shader阶段输出的内容
    			struct v2f
    			{
    				float4 pos : SV_POSITION;
    				float3 worldNormal : NORMAL;
    				float3 viewDir : TEXCOORD1;
    			};
    
    			//顶点shader
    			v2f vert(a2v v)
    			{
    				v2f o;
    				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
    				//法线转化到世界空间
    				o.worldNormal = normalize(mul(v.normal, (float3x3)_World2Object));
    				//顶点位置转化到世界空间 
    				float3 worldPos = mul(_Object2World, v.vertex).xyz;
    				//计算视线方向（相机位置 - 像素对应位置）
    				o.viewDir = _WorldSpaceCameraPos - worldPos;
    				return o;
    			}
    
    			//片元shader
    			fixed4 frag(v2f i) : SV_Target
    			{
    				//环境光
    				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * _Diffuse;
    				//世界空间下光线方向
    				fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
    				//需要再次normalize
    				fixed3 worldNormal = normalize(i.worldNormal);
    				//计算Diffuse
    				fixed3 diffuse = _LightColor0.rgb * _Diffuse.rgb * saturate(dot(worldNormal, worldLight));
    				//normalize
    				fixed3 viewDir = normalize(i.viewDir);
    				//计算半角向量（光线方向 + 视线方向，结果归一化）
    				fixed3 halfDir = normalize(worldLight + viewDir);
    				//计算Specular（Blinn-Phong计算的是）
    				fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(saturate(dot(halfDir, worldNormal)), _Gloss);
    				//结果为diffuse + ambient + specular
    				fixed3 color = diffuse + ambient + specular;
    				return fixed4(color, 1.0);
    			}
    				ENDCG
    		}
    	}
    	//前面的Shader失效的话，使用默认的Diffuse
    	FallBack "Diffuse"
    }

在优化前后，没有特别明显的变化：

![Center 12][]

[Link 1]: http://blog.csdn.net/puppet_master/article/details/53074789
[Center]: /images/20220714/c4c77f044ee24cb49ce326a725b791d6.png
[Center 1]: /images/20220714/9f8346c262134b77bc12eb9008b8bc34.png
[Center 2]: /images/20220714/2a6220493e0745349aedfedf04f64d9b.png
[Center 3]: /images/20220714/f2c2ef9f49fb43a88be559d8a3fddd61.png
[Center 4]: /images/20220714/bc5aa2b47b0e4a2f82557617707d8cab.png
[Center 5]: /images/20220714/359b0738c20c4da590b60edc14b7530a.png
[Center 6]: /images/20220714/4f57a17d546b44278ac3814daa436f6f.png
[Center 7]: /images/20220714/812a976ee60e40c38bbe032dfd781e3f.png
[Center 8]: /images/20220714/bdead1f20ef1466a87987efada49948f.png
[Bloom]: http://blog.csdn.net/puppet_master/article/details/52889050
[Center 9]: /images/20220714/c3a1befb302542ff9134b27bf74119dd.png
[Center 10]: /images/20220714/ba64dad53afa4e6eaf9ca942fdf33f6e.png
[Center 11]: /images/20220714/d0971154dcd84a188dc8769b4add838b.png
[Center 12]: /images/20220714/b9917c131d6c41308f6c1ee58840d5d4.png