视差贴图相关理论介绍

粗略的视差效果：

本文就不陈述视差贴图相关描述了， 此处只记录说明一下两点

（1） 在求uv的偏移量的时候 ：在切线空间下的 viewDir.xy / viewDir.z ， 这里为什么要除以 .z

（2）以及直接使用上面链接中的“改进3”的 RayMarching （光线步进）实现精确的视差效果

（一）viewDir.xy / viewDir.z 的解释：

（1）求出BC: 最大的UV偏移值

AE, AG： 归一化后的 viewDir
AC的高度为：1
相似三角形： EF/ AF = BC / AC
即： viewDir.xy / viewDir.z = BC / 1

根据以上条件： BC = (viewDir.xy / View.z) * 1

因此 ，uv的偏移量 uvOffset = BC
uvOffset乘以很小的偏移系数，误差就会非常小。
（为防止.z太小，造成误差太大 通常： view.xy / (view.z + 0.42) ）

（2）精确的偏移值：BQ

人眼看到E点就被挡住了 B点的UV + BQ 才是 在Q点采样得到的高度 QE

（二）RayMatching 光线步进求相对精确的交点

Shader "Unlit/Parallax"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _ParallaxMap("Parallax",2D) = "white"{}
        _HeightScale("HeightScale",Range(0,0.1)) = 1
        _BumpMap("BumpMap",2D) = "Bump"{}
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            // make fog work
            #pragma multi_compile_fog

            #include "UnityCG.cginc"
        #define PARALLAX_RAYMARCHING_STEPS 150
        #define PARALLAX_RAYMARCHING_BINARY_SEARCH_STEPS 10
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
                float4 tangent : TANGENT;
                float3 normal : NORMAL;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 pos : SV_POSITION;
                float4 T2W0 : TEXCOORD1;
                float4 T2W1 : TEXCOORD2;
                float4 T2W2 : TEXCOORD3;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _ParallaxMap;
            float _HeightScale;
            
            sampler2D _BumpMap;           
            

            //  unity 的内置函数 
            //ParallaxOffset( )
            
            //-----------------RayMatching 封装的相关代码-----------------------------
            //  在函数中用到多次 tex2D采样 和 for循环，代价相对较大。。。。。。
            float GetParallaxHeight (float2 uv) {
                return tex2D(_ParallaxMap, uv).r ;
            }
float2 ParallaxRaymarching (float2 uv, float2 viewDir) {
    #if !defined(PARALLAX_RAYMARCHING_STEPS)
        #define PARALLAX_RAYMARCHING_STEPS 5
    #endif
    float2 uvOffset = 0;
    float stepSize = 1.0 / PARALLAX_RAYMARCHING_STEPS;
    float2 uvDelta = viewDir * stepSize;
    float stepHeight = 1;
    float surfaceHeight = GetParallaxHeight(uv);
    for (int i = 0; i < PARALLAX_RAYMARCHING_STEPS && stepHeight > surfaceHeight; ++i)
    {
        uvOffset -= uvDelta;
        stepHeight -= stepSize;
        surfaceHeight = GetParallaxHeight(uv + uvOffset);
    }
    #if !defined(PARALLAX_RAYMARCHING_BINARY_SEARCH_STEPS)
        #define PARALLAX_RAYMARCHING_BINARY_SEARCH_STEPS 2
    #endif
    for (int i = 0; i < PARALLAX_RAYMARCHING_BINARY_SEARCH_STEPS; i++) {
        uvDelta *= 0.5;
        stepSize *= 0.5;
        if (stepHeight < surfaceHeight) {
            uvOffset += uvDelta;
            stepHeight += stepSize;
        }else{
            uvOffset -= uvDelta;
            stepHeight -= stepSize;
        }
        surfaceHeight = GetParallaxHeight(uv + uvOffset);
    }
    return uvOffset;
}

float2 DoParallaxMap(float3 viewDir,float2 uv){

    viewDir = normalize(viewDir);
    viewDir.xy /=(viewDir.z + 0.41);
    viewDir.xy *= _HeightScale;
    uv += ParallaxRaymarching(uv.xy,viewDir.xy);
    return uv;
}
            
            //-----------------RayMatching end------------------------------
            
            


            v2f vert (appdata v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                float3 normal =UnityObjectToWorldNormal(v.normal);
                float3 tangent = UnityObjectToWorldDir(v.tangent);
                float3 binormal = cross(normal,tangent) * v.tangent.w;
                float3 worldPos = mul(unity_ObjectToWorld,v.vertex);
                o.T2W0 = float4(tangent.x,binormal.x,normal.x,worldPos.x);
                o.T2W1 = float4(tangent.y,binormal.y,normal.y,worldPos.y);
                o.T2W2 = float4(tangent.z,binormal.z,normal.z,worldPos.z);               
                return o;
            }


            //   初始通用版本
            fixed4 frag (v2f i) : SV_Target
            {
                
                float3 worldPos = float3(i.T2W0.w,i.T2W1.w,i.T2W2.w);
                float3 normal = UnpackNormal(tex2D(_BumpMap,i.uv));
                
                normal = float3(dot(i.T2W0.xyz,normal),dot(i.T2W1.xyz,normal),dot(i.T2W2.xyz,normal));
                
                float3 view_ws =normalize(UnityWorldSpaceViewDir(worldPos));
                float3 t = float3(i.T2W0.x,i.T2W1.x,i.T2W2.x);
                float3 b = float3(i.T2W0.y,i.T2W1.y,i.T2W2.y);
                float3 n = float3(i.T2W0.z,i.T2W1.z,i.T2W2.z);
                                
                float3 view_ts = float3(dot(t,view_ws),dot(b,view_ws),dot(n,view_ws));
                  在视差贴图中  R，G，B, 三个分量的值相等，所以随便用一个就好
                float height = tex2D(_ParallaxMap,i.uv).r;
                  float类型的 ，如 1.0f  ,  不要写成1，  不然会被当成int处理，舍弃小数，造成精度不准;
                /// 0.5分界线高度图 来达到上下各异的视差
               height -= 0.5f;                
                // 此处的  .xy / .z     是利用相似三角形，求出精确的 xy 的偏移量
                float2 offsetUV = height*( view_ts.xy/ (view_ts.z + 0.42)) * _HeightScale;
                i.uv += offsetUV;
                
                float4 col = tex2D(_MainTex,i.uv);
                
               return col;
             
            }
            
            
          
            ENDCG
        }
    }
}

在Unity Shader中用法线贴图和高度图来实现凹凸映射

1、凹凸映射概念

凹凸映射，在不改变顶点位置的前提下，修改模型表面的法线方向，为模型提供更多的细节。

2、凹凸映射的 2 种方法

• 高度纹理（Height Map）

使用一张高度纹理来模拟表面位移（Displacement），然后得到一个修改后的法线值。此方法也叫做高度映射（Height Mapping）。
颜色越浅，越向外凸；颜色越深，越向内凹。能明确表面的凹凸信息，缺点是计算复杂。

• 法线纹理（Normal Map）

使用一张法线纹理来直接存储表面法线。此方法也叫做法线映射（Normal Mapping）。用于存储表面的法线向量，法线向量的取值范围为 [ -1 , 1] 。但是像素分量的取值范围是 [ 0 , 1]，因此需要进行以下两个映射：

• 贴图属性

• UnpackNormal是unity内置的函数（在后面⑥定义片元着色器中会出现）。当我们把贴图纹理设置为Normal map类型时，该函数可以得到正确的法线方向。
  不仅如此，Unity还可以根据不同平台来调整Normal的细节，使用UnpackNormal函数针对不同压缩格式对法线纹理进行正确采样。（目前存在DXT1、DXT5、DXT5nm的格式，DXT3以及被弃用——Tech-Artists）
  可以在UnityCG.cginc之中找到UnpackNormal的具体定义：

inline fixed3 UnpackNormal(fixed4 packednormal)
{
#if defined(UNITY_NO_DXT5nm)
    return packednormal.xyz * 2 - 1;
#else
    return UnpackNormalmapRGorAG(packednormal);
#endif
}

代码中可以看到我们可爱的Unity并不能识别除了DXT5nm以外的贴图格式，因此翻阅官方文档然后直接Ctrl-F搜索DXT得到如下结果：

说明在unity之中可以有2个选择，包括XYZ和DXT5nm，且更改法线编码时，最好直接在Unity的项目设置中，而不是在CG Shader代码中，否则解码成本会增加。

• 根据下图可以看到，如果我们把类型设置为Normal map，将会出现Create from Grayscale的选项。这个选项的主要作用是可以将我们的先前讲到的 高度图 转换为 法线贴图，方便我们进行法线处理。
  不仅如此，Unity给予了我们两种滤波器：
  ①Sharp——使用Sobel滤波来生成法线
  ②Smooth

3、法线纹理的坐标空间

• 模型空间的法线纹理（Object-Space Normal Map）

对于先前的纹理映射和纹理贴图之中，我们可以直到，要在CG语言中实现相应效果，不可或缺的是纹理的坐标空间（是ObjectSpace还是WorldSpace？）。而对于法线纹理的坐标空间来说，有个直接点的想法是——将修改后的模型空间中的表面法线存储在一张纹理中。（这样一来就可以结合前面“纹理贴图”一样实现凹凸效果。代码部分会加以证明。）这种纹理被称为——模型空间的法线纹理（Object-Space Normal Map）。

• 模型顶点的切线空间（Tangent Space）

然而，实际上我们真正使用的是——模型顶点的切线空间（Tangent Space）。具体解释如下：
对于模型的每一个顶点，都有属于自己的切线空间，这个切线空间的原点就是顶点本身。
Z轴是顶点的法线方向 n
X轴是顶点的切线方向 t
Y轴是由顶点的切线和法线叉积而得

代码开始

在切线空间下计算

① 在Properties属性下添加Bump法线纹理的属性，以及用于控制凹凸程度的属性

Properties{
	_Color("Base Color",Color) = (1,1,1,1)
	_MainTex("Main Tex",2D) = "white" {}
	_BumpMap("Normal Map", 2D) = "bump"{}
	_BumpScale ("Bump Scale",Float) = 1.0
	_Specular("Specular",Color) = (1,1,1,1)
	_Gloss("Gloss",Range(8.0,256)) = 20
}

_BumpMap，默认值可以使用“Bump”——Unity内置法线纹理。
_BumpScale为0时，意味着该法线纹理不会起作用。

② 定义Tags

SubShader{
	Pass{
		Tags{"LightMode"="ForwardBase"}

• 声明顶点着色器和片元着色器 和 光照包含

#pragma vertex vert
#pragma pragment prag
#include "Lighting.cginc"

③ 为Properties中的属性定义类型

fixed4 _Color;
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _BumpMap;
float4 _BumpMap_ST;
float _BumpScale;
fixed4 _Specular;
float _Gloss;

根据上面的代码，可以看到，_BumpMap和普通纹理类似，同样也声明了一个_ST变量，这也正说明我们前面的理解是正确的——这样一来就可以结合前面“纹理贴图”一样实现凹凸效果。

④ 定义我们的a2v和v2f结构体

struct a2v {
	float4 vertex : POSITION;
	float3 normal : NORMAL;
	float4 tangent : TANGENT;
	float4 texcoord : TEXCOORD0;
};

struct v2f {
	float4 pos : SV_POSITION;
	float4 uv : TEXCOORD0;
	float3 lightDir : TEXCOORD1;
	float3 viewDir : TEXCOORD2;
};

这里的TANGENT就是我们所说的切线。Unity会像传送POSITION一样，把TANGENT所包含的每个顶点的切线方向填充到tangent之中，但是需要注意的是，和法线方向的normal不同，tangent的类型是float4，而非float3.是因为其额外多了一个tangent.w分量来决定切线空间的第三个坐标轴——副切线的方向性。

⑤ 定义顶点着色器

v2f vert(a2v v) {
	v2f o;
	o.pos = UnityObjectToClipPos(v.vertex);

	o.uv.xy = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
	o.uv.zw = v.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.zw;

	fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
	fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
	fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w;

	float3x3 worldToTangent = float3x3(worldTangent, worldBinormal, worldNormal);

	o.lightDir = mul(worldToTangent, WorldSpaceLightDir(v.vertex));
	o.viewDir = mul(worldToTangent, WorldSpaceViewDir(v.vertex));

	return o;
}

⑥ 定义片元着色器

fixed4 frag(v2f i) : SV_Target {
	fixed3 tangentLightDir = normalize(i.lightDir);
	fixed3 tangentViewDir = normalize(i.viewDir);
	
	fixed4 packedNormal = tex2D(_BumpMap, i.uv.zw);
	fixed3 tangentNormal;
	
	tangentNormal = UnpackNormal(packedNormal);
	tangentNormal.xy *= _BumpScale;
	tangentNormal.z = sqrt(1.0 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));
	
	fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;
	
	fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;
	
	fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(tangentNormal, tangentLightDir));
	
	fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);
	fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(max(0, dot(tangentNormal, halfDir)), _Gloss);
	
	return fixed4(ambient + diffuse + specular, 1.0);
}

⑦ 整体代码：

Shader "LeonShader/Shader_7_2_HeightMap"{
	Properties{
		_Color("Base Color",Color) = (1,1,1,1)
		_MainTex("Main Tex",2D) = "white" {}
		_BumpMap("Normal Map", 2D) = "bump"{}
		_BumpScale("Bump Scale",Float) = 1.0
		_Specular("Specular",Color) = (1,1,1,1)
		_Gloss("Gloss",Range(8.0,256)) = 20
	}
	SubShader{
		Pass {
			Tags { "LightMode" = "ForwardBase" }

			CGPROGRAM

			#pragma vertex vert
			#pragma fragment frag

			#include "Lighting.cginc"

			fixed4 _Color;
			sampler2D _MainTex;
			float4 _MainTex_ST;
			sampler2D _BumpMap;
			float4 _BumpMap_ST;
			float _BumpScale;
			fixed4 _Specular;
			float _Gloss;

			struct a2v {
				float4 vertex : POSITION;
				float3 normal : NORMAL;
				float4 tangent : TANGENT;
				float4 texcoord : TEXCOORD0;
			};

			struct v2f {
				float4 pos : SV_POSITION;
				float4 uv : TEXCOORD0;
				float3 lightDir: TEXCOORD1;
				float3 viewDir : TEXCOORD2;
			};


			v2f vert(a2v v) {
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);

				o.uv.xy = v.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw;
				o.uv.zw = v.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.zw;

				fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
				fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
				fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w;

				float3x3 worldToTangent = float3x3(worldTangent, worldBinormal, worldNormal);

				o.lightDir = mul(worldToTangent, WorldSpaceLightDir(v.vertex));
				o.viewDir = mul(worldToTangent, WorldSpaceViewDir(v.vertex));

				return o;
			}

			fixed4 frag(v2f i) : SV_Target {
				fixed3 tangentLightDir = normalize(i.lightDir);
				fixed3 tangentViewDir = normalize(i.viewDir);

				fixed4 packedNormal = tex2D(_BumpMap, i.uv.zw);
				fixed3 tangentNormal;

				tangentNormal = UnpackNormal(packedNormal);
				tangentNormal.xy *= _BumpScale;
				tangentNormal.z = sqrt(1.0 - saturate(dot(tangentNormal.xy, tangentNormal.xy)));

				fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb;

				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;

				fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(tangentNormal, tangentLightDir));

				fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);
				fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(max(0, dot(tangentNormal, halfDir)), _Gloss);

				return fixed4(ambient + diffuse + specular, 1.0);
			}

			ENDCG
		}
	}
	FallBack "Specular"
}

⑧效果图

在世界空间下计算

目录：Unity Shader - 知识点目录（先占位，后续持续更新）
原文：Heightmap
版本：2019.1

Heightmap

高度贴图（也称为视差映射）是一个类似于法线映射的概念，但是这种技术更复杂，因此性能也更昂贵。高度贴图通常与法线贴图一起使用，通常它们用于想给表面定义一个很大的凹凸效果使用。

当法线贴图纹理修改表面的光照时，视差高度贴图又进一步修改了，以达到一种表面的遮挡效果。离相机近的表面的凹凸很明显很多，而远离相机的话凹凸效果变小，有的似乎被遮挡在相机视野外。

这种效果，它可以产生一个非常令人信服的3D几何效果，表面的凹凸效果有些会相互遮挡住，看起来真的像是3D几何体，但真实的几何体没有任何修改，因为这仅仅是绘制一个表面的效果。

高度贴图正常应该是张灰度图，白色代表凸起的部分，黑色代表凹下的部分。下面就是Albedo贴图和高度贴图的匹配使用。

一张Albedo色彩贴图，和一张高度贴图匹配。

从左向右说明：

1. 岩石墙材质只设置了Albedo贴图，没有设置法线贴图和高度贴图。
2. 设置了法线贴图。修改了表面的光照，但岩石间没有相互遮挡效果。
3. 这个精致的效果是使用了法线贴图和高度贴图。岩石看起来就像是从表面凸起来似的，靠近相机的岩石看起来可以遮挡着后面的岩石。

通常灰度图在高度图中使用很适合，但在遮挡贴图使用也非常适合。了解Occlusion Maps（遮挡贴图）的信息，我们下节将讲到。