济南国画网站济南网站建设公司,网站建设资料需要公司提交的吗,在线做分析图的网站,做网站在手机端预览乱码了the best of blur1. 法线贴图理论1.1 什么是法线贴图一般的贴图中存储的是表面颜色值(RGBA)#xff0c;而法线贴图存放的则是法线信息(xyzw)#xff0c;假设某顶点处的 uv 坐标为 (u,v), 那么在法线贴图 (u,v)处纹素的值表示该顶点的“法线”方向。通常法线贴图中存储的并不是…the best of blur1. 法线贴图理论1.1 什么是法线贴图一般的贴图中存储的是表面颜色值(RGBA)而法线贴图存放的则是法线信息(xyzw)假设某顶点处的 uv 坐标为 (u,v), 那么在法线贴图 (u,v)处纹素的值表示该顶点的“法线”方向。通常法线贴图中存储的并不是这个顶点的真实法线信息。1.2 法线贴图的作用想象一下如果我们想要表现一个凹凸不平的模型表面(想象一个橙子的表面)有哪些办法呢直接把模型做成凹凸不平。这种方法最理想效果也最好。但是模型需要太多顶点了例如橙子表面的一个“坑”需要增加额外的若干个顶点。做一个一定精度的平滑模型(例如把橙子做成一个球体模型)把表面的”坑“或”凸点“信息也就是某一点的”海拔“记录下来渲染的时候根据这些信息动态生成顶点信息得到凹凸不平的模型。不用说这种方法需要单独的存储空间来记录凹凸信息而且顶点动态生成将会非常消耗。和第二种方法一样做一个平滑模型同样记录表面的“海拔”渲染时不是动态生成顶点而是根据“海拔”信息反推顶点的法线信息通过光照效果来表现表面的”凹凸“。这种方法在计算光照时需要先进行表面法线的计算比较消耗。同样做一个光滑模型不是记录表面的凹凸信息本身而是记录”假定的凹凸情形下的法线信息“渲染时根据“有偏差”的法线信息来进行光照计算使得渲染出来的画面看起来凹凸不平。上面第三种方法称为基于“高度纹理”的凹凸表现。而第四种方法就是基于“法线纹理”的凹凸表现。注意高度贴图和法线贴图用来表现“凹凸”在模型轮廓的边缘会穿帮。比如你可以用这两种方法使一个平滑的橙子模型表面看起来凹凸不平但是在橙子的边缘总是平滑的。1.3 法线贴图纹素取值范围通常贴图纹素用来表示 RGBA那么每个分量的取值范围是[0,1]而法线的每个分量取值范围为[-1,1]所以用贴图纹素表示一个法线时需要针对每一个分量做映射pixel (normal 1) / 2;在针对法线贴图采样后进行逆运算normal 2 * pixel - 1;得到实际的法线分量值。1.4 法线贴图基于什么坐标系法线贴图储存了表面法线而法线是一个方向那么这个方向是基于什么坐标系通常跟随顶点数据一起传输到 顶点着色器中的法线由 NORMAL 语义指定是基于模型坐标系的。所以我们可以将法线在模型坐标中的值存储到法线贴图中得到模型空间的法线贴图而在实际制作中应用更多的是顶点切线空间的法线贴图。对于每个顶点以顶点自身作为原点顶点切线方向为x轴法线方向为z轴切线和法线方向叉乘得到 y 轴(副法线方向)得到这个顶点的 切线坐标空间基于这个空间的法线记录下来得到 顶点切线空间的法线贴图。左模型空间的法线贴图 右切线空间的法线贴图模型空间法线贴图的优点(1)实现简单直观(2)更平滑的缝合和边界处的表现。切线空间法线贴图的优点(1)可重用记录的是“相对法线信息”而模型空间的法线贴图记录的是“绝对法线信息”。(2)可以做 UV 动画来实现凹凸移动效果。(3)可压缩。z分量永远是正方向可以只存储xy分量。1.5 为什么切线空间的法线贴图看起来都是偏蓝色的切线空间的法线贴图保存的是基于顶点的切线空间中的法线数值而在顶点的切线空间中真实法线的反向永远是(0,0,1)经过上述的计算公式得到法线贴图中存储的值为 (0.5,0.5, 1)偏蓝色。而修改后的法线通常也是 z 值最大因为你不太可能有90度以上的法线修改整体还是偏蓝。通常使用顶点切线空间的法线贴图而顶点空间中的修改后的法线值z分量最大换算成颜色就是 b 分量最大所以法线贴图通常看起来偏蓝色。2. 如何在 Shader 中应用法线贴图我们使用在切线空间下的法线贴图先上完整 shader 代码然后逐步分析代码如下Shader Shader_Examples/04_NormalTexture_TangentSpace{Properties{_MainTex (Texture, 2D) white {}_SpecularColor (SpecularColor, Color) (1,1,1,1)_Gloss (Gloss, Range(8, 256)) 20_BumpTex (BumpTex, 2D) bump {}_BumpScale (BumpScale, Float) 1.0}SubShader{Tags { RenderTypeOpaque LightMode ForwardBase }Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include UnityCG.cginc#include Lighting.cgincsampler2D _MainTex;float4 _MainTex_ST;fixed4 _SpecularColor;float _BumpScale;sampler2D _BumpTex;float4 _BumpTex_ST;float _Gloss;struct appdata{float4 vertex : POSITION;float2 uv : TEXCOORD0;float4 tangent : TANGENT;float3 normal : NORMAL;};struct v2f{float2 uv : TEXCOORD0;float4 vertex : SV_POSITION;float3 lightDir : TEXCOORD1;float3 viewDir : TEXCOORD2;};v2f vert (appdata v){v2f o;o.vertex UnityObjectToClipPos(v.vertex);// 模型空间副法线fixed3 binormal cross(normalize(v.normal), normalize(v.tangent.xyz)) * v.tangent.w;float3x3 rotation float3x3(v.tangent.xyz, binormal, v.normal);float3 lightDir ObjSpaceLightDir(v.vertex);float3 viewDir ObjSpaceViewDir(v.vertex);o.lightDir mul(rotation, lightDir);o.viewDir mul(rotation, viewDir);o.uv v.uv;return o;}fixed4 frag (v2f i) : SV_Target{float3 lightDir normalize(i.lightDir);float3 viewDir normalize(i.viewDir);float3 halfDir normalize(lightDir viewDir);float4 packedNormal tex2D(_BumpTex, i.uv);float3 tangentNormal UnpackNormal(packedNormal);tangentNormal.xy * _BumpScale;tangentNormal.z sqrt(1.0 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));fixed3 albedo tex2D(_MainTex, i.uv).rgb;fixed3 diffuse _LightColor0.rgb * albedo.rgb * saturate(dot(tangentNormal, lightDir));fixed3 ambient UNITY_LIGHTMODEL_AMBIENT.rgb * albedo;fixed3 specular _SpecularColor * _LightColor0 * pow(saturate(dot(halfDir, tangentNormal)), _Gloss);return fixed4(diffuse ambient specular, 1.0);}ENDCG}}}渲染效果如图法线贴图效果2.1 shader 属性与对应的变量Properties{_MainTex (Texture, 2D) white {}_SpecularColor (SpecularColor, Color) (1,1,1,1)_Gloss (Gloss, Range(8, 256)) 20_BumpTex (BumpTex, 2D) bump {}_BumpScale (BumpScale, Float) 1.0}漫反射纹理 _MainTex, 高光颜色 _SpecularColor 和高光系数 _Gloss 没什么好说的新增的纹理 _BumpTex 为法线贴图默认值为 unity 内置法线贴图 bump_BumpScale 用来控制表面的“凹凸”程度后面会分析它是怎么起作用的。对应的变量声明:sampler2D _MainTex;float4 _MainTex_ST;fixed4 _SpecularColor;float _BumpScale;sampler2D _BumpTex;float4 _BumpTex_ST;float _Gloss;2.2 着色器输入结构struct appdata{float4 vertex : POSITION;float2 uv : TEXCOORD0;float4 tangent : TANGENT;float3 normal : NORMAL;};struct v2f{float2 uv : TEXCOORD0;float4 vertex : SV_POSITION;float3 lightDir : TEXCOORD1;float3 viewDir : TEXCOORD2;};语义TANGENT指定的切线是一个 float4 类型的变量而语义NORMAL指定的法线是 float3 类型因为 TANGENT 的z分量需要用来确定 副法线 的方向下一个段落会介绍如何计算副法线因为使用了顶点切线空间下的法线贴图我们需要把所有的光照计算都变换到顶点切线空间下在顶点着色器中将光线方向lightDir和视线方向viewDir变换到顶点切线空间再输入到片元着色器中。因为我们这里没有涉及到纹理的 ST 变化所以 _MainTex 和 _BumpTex 功用纹理坐标v2f 中并没有定义法线因为我们这里使用的是发现贴图中的法线而不直接使用顶点法线了2.3 顶点着色器v2f vert (appdata v){v2f o;o.vertex UnityObjectToClipPos(v.vertex);// 模型空间副法线fixed3 binormal cross(normalize(v.normal), normalize(v.tangent.xyz)) * v.tangent.w;// 模型空间到顶点切线空间的变换矩阵float3x3 rotation float3x3(v.tangent.xyz, binormal, v.normal);// 光线方向和视线防线变换到顶点切线空间float3 lightDir ObjSpaceLightDir(v.vertex);float3 viewDir ObjSpaceViewDir(v.vertex);o.lightDir mul(rotation, lightDir);o.viewDir mul(rotation, viewDir);o.uv v.uv;return o;}顶点的法线顶点所在的所有平面的法线加权平均得到顶点法线顶点的切线我们都知道顶点切线与顶点法线垂直、但与顶点法线垂直的方向有很多哪一条是顶点切线呢约定俗成 切线最终规定为顶点 uv 坐标中的 u 方向可以参考文末的参考文章1。顶点的副法线由法线和切线叉乘得到方向性由顶点切线的z分量确定。如何计算模型空间到顶点切线空间的变换矩阵参考我的推导过程模型空间到顶点切线空间变换矩阵的推导。结论就是将模型空间下的切线、副法线、法线按行排列得到变换矩阵。在顶点着色器中将光线方向和视线方向变换到顶点的切线空间并传递给片元着色器。2.4 片元着色器fixed4 frag (v2f i) : SV_Target{float3 lightDir normalize(i.lightDir);float3 viewDir normalize(i.viewDir);float3 halfDir normalize(lightDir viewDir);float4 packedNormal tex2D(_BumpTex, i.uv);float3 tangentNormal UnpackNormal(packedNormal);tangentNormal.xy * _BumpScale;tangentNormal.z sqrt(1.0 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));fixed3 albedo tex2D(_MainTex, i.uv).rgb;fixed3 diffuse _LightColor0.rgb * albedo.rgb * saturate(dot(tangentNormal, lightDir));fixed3 ambient UNITY_LIGHTMODEL_AMBIENT.rgb * albedo;fixed3 specular _SpecularColor * _LightColor0 * pow(saturate(dot(halfDir, tangentNormal)), _Gloss);return fixed4(diffuse ambient specular, 1.0);}如何从法线贴图中得到法线tex2D采样 _BumpTex 得到该点的法线像素值需要计算出对应的xyz值因我们已经在 Unity 编辑器中将 _BumpTex 设置为 Normal Map 所以内置方法 UnpackNormal 已经执行了这个计算albedo,diffuse,ambient,specular 的计算不用多说了_BumpScale 的作用用来控制“凹凸程度”当 _BumpScale 为0时表示该点的顶点法线和法线贴图中采样出的法线重合说明该点没有“凹凸”_BumpScale 绝对值越大表示该点的顶点法线和贴图中的法线偏差越远说明“凹凸感”越明显。下面5个胶囊体的 _BumpScale 取值分别为 2/1/0/-1/-2不同的_BumpScale凹凸效果3. Unity中的法线贴图类型设置在上面的片元着色器中我们从法线贴图中采样出纹素后使用了 Unity 内置函数 UnpackNormal 来计算最终的法线值。只有正确的设置图片的类型为 Normal Map 时使用这个内置函数才能得到正确结果在 Unity 中的设置面板如下法线贴图设置Create from Grayscale 表示是否“高度图”生成的纹理贴图。当我们在贴图中记录的是相对高度(黑色表示更低白色表示更高)时除了要设置类型为“Normal Map”之外还要勾选这个选项这个贴图就会被当成纹理贴图使用了。勾选了 Create from Grayscale 之后有两个选项bumpness表示凹凸程度filtering 决定了如何生成纹理贴图smooth 表示生成的法线过渡比较平滑而sharp 则表示法线过渡比较锋利。
