Unity shader實現(xiàn)移動端模擬深度水效果

更新時間：2020年05月09日 17:28:40 作者：OwenTA

這篇文章主要為大家詳細介紹了Unity shader實現(xiàn)移動端模擬深度水效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Unity shader實現(xiàn)移動端模擬深度水的具體代碼，供大家參考，具體內(nèi)容如下

描述：

在網(wǎng)上看到很多效果很好的水，比如根據(jù)水的深度，顏色有深淺變化，能讓水變得更真實，但是又會涉及到比較復雜的計算，在移動端上面還是有些吃力的。

最近研究了一下，想在移動端上面模擬這樣的效果：

1 水的深淺透明度變化

2 水的深淺顏色變化

3 水上的陰影模擬（大面積的水通過烘焙比較浪費烘焙圖）

根據(jù)上面的3點，可以通過一張黑白圖的rg通道來實現(xiàn)深淺以及陰影的模擬效果如下

如圖，淺色的偏綠，深色的偏藍，顏色可以手動調(diào)節(jié)，左邊為陰影位置

代碼如下：

Shader "Game_XXX/whater"
{
 Properties 
 {
 _WaterTex ("Normal Map (RGB), Foam (A)", 2D) = "white" {}
 _AlphaTex("AlphaTex", 2D) = "black" {}
 _shadowLight ("shadowLight",range(0,1)) = 0
 _Tiling ("Wave Scale", Range(0.00025, 0.007)) = 0.25
 _WaveSpeed("Wave Speed", Float) = 0.4
 _SpecularRatio ("Specular Ratio", Range(10,500)) = 200
 _outSideColor("outSideColor",Color) = (0,0,0,0)
 _outSideLight("outSideLight",Range(0,10))=1
 _inSideColor("inSideColor",Color) = (0,0,0,0)
 _inSideLight("intSideLight",Range(0,10))=1
 _Alpha("Alpha",Range(0,1)) = 1
 //模擬燈光顏色
 _LightColorSelf ("LightColorSelf",Color) = (1,1,1,1)
 //模擬燈光方向
 _LightDir ("LightDir",vector) = (0,1,0,0)
 //高光強度
 _specularLight("specularLight",range(0.1,2)) =1 
 }
 
 SubShader { 
 Tags {
 "Queue"="Transparent-200"
 "RenderType"="Transparent" 
 "IgnoreProjector" = "True"
 "LightMode" = "ForwardBase"
 }
 LOD 250
 Pass
 {
 
 ZWrite Off
 Blend SrcAlpha OneMinusSrcAlpha
 CGPROGRAM
 
 #pragma vertex Vert
 #pragma fragment Frag
 #include "UnityCG.cginc"
 
 float _Tiling;
 float _WaveSpeed;
 float _SpecularRatio;
 sampler2D _WaterTex;
 sampler2D _AlphaTex;
 float4 _LightColorSelf;
 float4 _LightDir;
 float4 _outSideColor;
 float _outSideLight;
 float4 _inSideColor;
 float _inSideLight;
 float _shadowLight;
 float _specularLight;
 float _Alpha;
 
 struct v2f
 {
 float4 position : POSITION;
 float3 worldView : TEXCOORD0;
 float3 tilingAndOffset:TEXCOORD2;
 float3x3 tangentTransform:TEXCOORD4; 
 float2 alphaUV :TEXCOORD7;
 
 };
 
 
 
 v2f Vert(appdata_full v)
 {
 v2f o;
 float4 worldPos = mul(unity_ObjectToWorld, v.vertex);
 //視向量（世界空間）
 o.worldView = -normalize(worldPos - _WorldSpaceCameraPos);
 o.position = UnityObjectToClipPos(v.vertex);
 //uv動畫
 o.tilingAndOffset.z =frac( _Time.x * _WaveSpeed);//frac :返回標量或矢量的小數(shù)
 o.tilingAndOffset.xy = worldPos.xz*_Tiling;
 o.alphaUV = v.texcoord;
 //求世界法線三件套 
 float3 normal =normalize( UnityObjectToWorldNormal(v.normal)); 
    float3 tangentDir = normalize( mul( unity_ObjectToWorld, float4( v.tangent.xyz, 0.0 ) ).xyz );//切線空間轉(zhuǎn)化為世界空間 
    float3 bitangentDir = normalize(cross(normal, tangentDir) * v.tangent.w);//切線 法線 計算副切線 
 
 o.tangentTransform = float3x3( tangentDir, bitangentDir, normal); 
 return o;
 }
 
 float4 Frag(v2f i):COLOR
 {
 
  
 
  //法線采樣
  fixed3 BumpMap01 = UnpackNormal(tex2D(_WaterTex,i.tilingAndOffset.xy + i.tilingAndOffset.z ));
  fixed3 BumpMap02 = UnpackNormal(tex2D(_WaterTex,i.tilingAndOffset.xy*1.1 - i.tilingAndOffset.z));
  //兩張法線相混合
  //fixed3 N1 =saturate( normalize(mul( BumpMap01.rgb, i.tangentTransform )));
  //fixed3 N2 =saturate( normalize(mul( BumpMap02.rgb, i.tangentTransform )));
  //fixed3 worldNormal = N1 - float3(N2.x,0,N2.z);
 
  fixed3 N1 = normalize(mul( BumpMap01.rgb, i.tangentTransform ));
  fixed3 N2 = normalize(mul( BumpMap02.rgb, i.tangentTransform ));
  fixed3 worldNormal = N1*0.5 +N2*0.5;
 
 
 
 
  float LdotN = dot(worldNormal, _LightDir.xyz); //_LightDir為模擬燈光
 
 
  //高光 
  float dotSpecular = dot(worldNormal, normalize( i.worldView+_LightDir.xyz));
  fixed3 specularReflection = pow(saturate(dotSpecular), _SpecularRatio)*_specularLight;
 
 
  //通道貼圖采樣
  fixed4 alphaTex = tex2D (_AlphaTex,i.alphaUV);
  //模擬燈光的顏色 * 漫反射系數(shù)= 基礎水的顏色
  fixed4 col =_LightColorSelf*2 * saturate (LdotN) ;
  //用alpha貼圖的r通道來模擬水的深淺的顏色，白色為深色，黑色為淺色 ，同時乘以想要的顏色
  col.rgb = col.rgb * alphaTex.r *_inSideColor * _inSideLight + col.rgb * (1-alphaTex.r) * _outSideColor *_outSideLight + specularReflection;
 
  //控制透明度，根據(jù)alpha的r通道 來控制深淺的透明度，深色的透明度小 淺色的透明度大
  col.a = _Alpha * alphaTex.r;
 
  //手動繪制陰影 用alpha貼圖的g通道 跟col相乘 來模擬陰影 
  alphaTex.g = saturate(alphaTex.g + _shadowLight);
  col.rgb *= alphaTex.g;
  return col;
 }
  ENDCG 
  } 
 }
 
 FallBack "Diffuse"
}