在unity实现视差遮挡偏移(ParallaxOcclusionMapping)效果

光照效果相关文章目录
大家好，我是阿赵，之前介绍过法线贴图在Unlit类型shader里面的实现，这次来介绍一个效果更猛一点的。

Unity引擎实现视差偏移效果

一、效果介绍

我准备了一个Unity自带的面片

还有3张贴图

最后把面片做出了下面这种凹凸并且可以根据光线变化光影的效果：

这种技术就是ParallaxOcclusionMapping(视差遮挡偏移)

二、完整Shader

Shader "azhao/ParallaxOcclusionMapping"
{Properties{_baseMap("baseMap", 2D) = "white" {}_heightMap("heightMap", 2D) = "white" {}_normalMap("normalMap",2D) = "white" {}_pomScale("pomScale", Float) = 0_planeHeight("planeHeight", Float) = 0_minSamplesNum("minSampleNum",Float) = 8_maxSamplesNum("maxSampleNum",Float) = 8_tilling("tilling", Float) = 1_colPowVal("colPowVal", Float) = 1_colMulVal("colMulVal", Float) = 1_normalScale("normalScale", Range(-1 , 1)) = 0_specColor("SpecColor",Color) = (1,1,1,1)_shininess("shininess", Range(1 , 100)) = 1_specIntensity("specIntensity",Range(0,1)) = 1_ambientIntensity("ambientIntensity",Range(0,1)) = 1}SubShader{Tags { "RenderType"="Opaque" }LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float2 uv : TEXCOORD0;float3 normal:NORMAL;float4 tangent:TANGENT;};struct v2f{                float4 pos : SV_POSITION;float3 worldPos : TEXCOORD0;float3 worldNormal : TEXCOORD1;float3 worldTangent :TEXCOORD2;float3 worldBitangent : TEXCOORD3;};sampler2D _baseMap;float _tilling;sampler2D _heightMap;float _pomScale;float _planeHeight;float _minSamplesNum;float _maxSamplesNum;float4 _heightMap_ST;float _colMulVal;float _colPowVal;float _normalScale;float4 _specColor;float _shininess;float _specIntensity;sampler2D _normalMap;float _ambientIntensity;
//计算视差遮挡偏移后的采样UVinline float2 POM(sampler2D heightMap, float2 uvs, float2 dx, float2 dy, float3 normalWorld, float3 viewWorld, float3 viewDirTan, int minSamples, int maxSamples, float parallax, float refPlane){float3 result = 0;int stepIndex = 0;int numSteps = (int)lerp((float)maxSamples, (float)minSamples, saturate(dot(normalWorld, viewWorld)));float layerHeight = 1.0 / numSteps;float2 plane = parallax * (viewDirTan.xy / viewDirTan.z);uvs.xy += refPlane * plane;float2 deltaTex = -plane * layerHeight;float2 prevTexOffset = 0;float prevRayZ = 1.0f;float prevHeight = 0.0f;float2 currTexOffset = deltaTex;float currRayZ = 1.0f - layerHeight;float currHeight = 0.0f;float intersection = 0;float2 finalTexOffset = 0;while (stepIndex < numSteps + 1){currHeight = tex2Dgrad(heightMap, uvs + currTexOffset, dx, dy).r;if (currHeight > currRayZ){stepIndex = numSteps + 1;}else{stepIndex++;prevTexOffset = currTexOffset;prevRayZ = currRayZ;prevHeight = currHeight;currTexOffset += deltaTex;currRayZ -= layerHeight;}}int sectionSteps = 10;int sectionIndex = 0;float newZ = 0;float newHeight = 0;while (sectionIndex < sectionSteps){intersection = (prevHeight - prevRayZ) / (prevHeight - currHeight + currRayZ - prevRayZ);finalTexOffset = prevTexOffset + intersection * deltaTex;newZ = prevRayZ - intersection * layerHeight;newHeight = tex2Dgrad(heightMap, uvs + finalTexOffset, dx, dy).r;if (newHeight > newZ){currTexOffset = finalTexOffset;currHeight = newHeight;currRayZ = newZ;deltaTex = intersection * deltaTex;layerHeight = intersection * layerHeight;}else{prevTexOffset = finalTexOffset;prevHeight = newHeight;prevRayZ = newZ;deltaTex = (1 - intersection) * deltaTex;layerHeight = (1 - intersection) * layerHeight;}sectionIndex++;}return uvs.xy + finalTexOffset;}//简化版的转换法线并缩放的方法half3 UnpackScaleNormal(half4 packednormal, half bumpScale){half3 normal;//由于法线贴图代表的颜色是0到1，而法线向量的范围是-1到1//所以通过*2-1,把色值范围转换到-1到1normal = packednormal * 2 - 1;//对法线进行缩放normal.xy *= bumpScale;//向量标准化normal = normalize(normal);return normal;}//获取HalfLambert漫反射值float GetHalfLambertDiffuse(float3 worldPos, float3 worldNormal){float3 lightDir = UnityWorldSpaceLightDir(worldPos);float NDotL = saturate(dot(worldNormal, lightDir));float halfVal = NDotL * 0.5 + 0.5;return halfVal;}//获取BlinnPhong高光float GetBlinnPhongSpec(float3 worldPos, float3 worldNormal){float3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));float3 halfDir = normalize((viewDir + _WorldSpaceLightPos0.xyz));float specDir = max(dot(normalize(worldNormal), halfDir), 0);float specVal = pow(specDir, _shininess);return specVal;}v2f vert (appdata v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.worldPos = mul(unity_ObjectToWorld, v.vertex);o.worldNormal = UnityObjectToWorldNormal(v.normal);o.worldTangent = UnityObjectToWorldDir(v.tangent);float vertexTangentSign = v.tangent.w * unity_WorldTransformParams.w;o.worldBitangent = cross(o.worldNormal, o.worldTangent)*vertexTangentSign;return o;}half4 frag (v2f i) : SV_Target{//构建TBN矩阵float3 tanToWorld0 = float3(i.worldTangent.x, i.worldBitangent.x, i.worldNormal.x);float3 tanToWorld1 = float3(i.worldTangent.y, i.worldBitangent.y, i.worldNormal.y);float3 tanToWorld2 = float3(i.worldTangent.z, i.worldBitangent.z, i.worldNormal.z);float3 worldViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));float3 viewDir = tanToWorld0 * worldViewDir.x + tanToWorld1 * worldViewDir.y + tanToWorld2 * worldViewDir.z;viewDir = normalize(viewDir);float2 worldUV = POM(_heightMap, ((i.worldPos).xz * _tilling), ddx(((i.worldPos).xz * _tilling)), ddy(((i.worldPos).xz * _tilling)), i.worldNormal, worldViewDir, viewDir, _minSamplesNum, _maxSamplesNum, (_pomScale * 0.01), _planeHeight);//采样法线贴图的颜色half4 normalCol = tex2D(_normalMap, worldUV);//得到切线空间的法线方向half3 normalVal = UnpackScaleNormal(normalCol, _normalScale).rgb;//通过切线空间的法线方向和TBN矩阵，得出法线贴图代表的物体世界空间的法线方向float3 worldNormal = float3(dot(tanToWorld0, normalVal), dot(tanToWorld1, normalVal), dot(tanToWorld2, normalVal));//用法线贴图的世界空间法线，算漫反射half diffuseVal = GetHalfLambertDiffuse(i.worldPos, worldNormal);//用法线贴图的世界空间法线，算高光角度half3 specCol = _specColor * GetBlinnPhongSpec(i.worldPos, worldNormal)*_specIntensity;half3 baseRGB = tex2D(_baseMap, worldUV).rgb;baseRGB = pow(baseRGB* _colMulVal, _colPowVal);//最终颜色 = 环境色+漫反射颜色+高光颜色half3 finalCol = UNITY_LIGHTMODEL_AMBIENT * _ambientIntensity + baseRGB *diffuseVal + specCol;return half4(finalCol,1);}ENDCG}}
}

三、说明

1、最基础版本的视差偏移：

		half4 frag(v2f i) : SV_Target{//构建TBN矩阵float3 tanToWorld0 = float3(i.worldTangent.x, i.worldBitangent.x, i.worldNormal.x);float3 tanToWorld1 = float3(i.worldTangent.y, i.worldBitangent.y, i.worldNormal.y);float3 tanToWorld2 = float3(i.worldTangent.z, i.worldBitangent.z, i.worldNormal.z);float3 worldViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));float3 viewDir = tanToWorld0 * worldViewDir.x + tanToWorld1 * worldViewDir.y + tanToWorld2 * worldViewDir.z;float2 worldUV = (i.worldPos).xz * _tilling;float height = tex2D(_heightMap, worldUV).r;height = height*2-1;height *= _pomScale * 0.01;worldUV += viewDir.xy * height;half3 finalCol = tex2D(_baseMap, worldUV);return half4(finalCol,1);}

先看看这段简化版的shader着色器程序
首先说明的是，这里没用模型本身的UV坐标来采样高度图和颜色图，而是用了世界坐标的xz轴来模拟平铺在地面的UV，这样做的目的是当缩放地面的时候，上面的砖块大小不会发生变化。
然后要看的是，采样了一张高度图，然后取出了r通道的颜色，因为高度信息只需要一个通道就够了，所以实际的应用中，gba通道可以再放其他的遮罩图。
最后是重点，得到的height值是[0,1]范围的，所以我转换成[-1,1]范围，然后把原来算出来的世界UV，加上viewDir.xy*height，这个viewDir是切线空间下的观察方向。这里的目的是当某个地方的高度不是0的时候，其实那个点显示的颜色就不是正常UV采样的位置，而是应该根本高度偏移，同时偏移UV采样的坐标，显示另外一个位置的颜色。

视差偏移在没有多step采样时的表现

单纯是这样简单的操作一下UV，可以看到模型已经有一些变化效果了，不过这个时候由于只是采样了一次，而且只是单纯的线性偏移UV，效果还达不到遮挡的效果。所以想得到一个凹凸边缘比较的柔和的效果，必须是通过多次采样，每次偏移一点，采样多次之后再叠加起来的。

2、POM方法的简单介绍

在完整Shader里面，是通过一个POM函数来计算出实际视差遮挡偏移后的UV坐标的。
这个方法，其实我是从ASE的现成节点里面生成出来，并做了一些小修改的

这个方法里面的实现细节还是挺多的，比如他加入了一个基础平面的高度，可以调整偏移后的整个模型的高度。比如他可以传入采样的最大最小次数，来控制具体采样多少次，等。

3、完整光照模型的组合

这里又回到了老话题了，从完整代码里面，应该可以看到了很多熟悉的旧代码，比如简化版的转换法线并缩放的方法、获取HalfLambert漫反射值、获取BlinnPhong高光，这些方法都是之前多次讲过的了。
这里又把它们拿出来，无非就是，完整光照模型效果是通过环境光+漫反射+高光，这个是最基本的构成，所以到了实现效果的最后一步，基本上都会拿出来用，至于是不是用法线贴图来代替模型法线、用哪个漫反射模型或者高光模型，甚至是反射效果，这些都是可以自己选择的。这就像拼积木一样，根据自己的需要来增减或者替换组成的部件就好了。
由于我这里是真实的计算了光照模型，有法线有高光的，所以当光线变化的时候，模型上面的光影效果是会跟着变化的。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！