Unity中实现类似纪念碑谷中地面的雾化效果

10 篇文章 1 订阅

看一下纪念碑谷中的这个效果:


想要实现一个这种地面的雾化效果,在网上找了很久,也没找到满意的解决方案,最后只能自己做一个了。

首先想到的就是shader,思路就是从y坐标=0开始往下的位置都使用雾的颜色,中间过度部分用原颜色和雾的颜色做一个插值即可。但是因为是整个游戏的效果,肯定不能只作用在某一个模型上,所以只能使用后期特效,后期特效的话就会有一个问题,如何获取像素点的世界坐标,于是我就搜索到了这篇文章:http://blog.csdn.net/zzxiang1985/article/details/59581376

思路就是通过深度贴图中的深度,进行一次与世界坐标投影到屏幕坐标相反的操作,即可得到原世界坐标,


获取世界坐标的shader代码如下:

            float4 GetWorldPositionFromDepthValue( float2 uv, float linearDepth )   
            {  
                
                float camPosZ = _ProjectionParams.y + (_ProjectionParams.z - _ProjectionParams.y) * linearDepth;  
  
                // unity_CameraProjection._m11 = near / t,其中t是视锥体near平面的高度的一半。  
                // 投影矩阵的推导见:http://www.songho.ca/opengl/gl_projectionmatrix.html。  
                // 这里求的height和width是坐标点所在的视锥体截面(与摄像机方向垂直)的高和宽,并且  
                // 假设相机投影区域的宽高比和屏幕一致。  
                float height = 2 * camPosZ / unity_CameraProjection._m11;  
                float width = _ScreenParams.x / _ScreenParams.y * height;  
  
                float camPosX = width * uv.x - width / 2;  
                float camPosY = height * uv.y - height / 2;  
                float4 camPos = float4(camPosX, camPosY, camPosZ, 1.0);  
                return mul(unity_CameraToWorld, camPos);  
            }  

            fixed4 GetWorldPos(float2 uv){
                float rawDepth =  SAMPLE_DEPTH_TEXTURE( _CameraDepthTexture, uv );  
                // 注意:经过投影变换之后的深度和相机空间里的z已经不是线性关系。所以要先将其转换为线性深度。  
                // 见:https://developer.nvidia.com/content/depth-precision-visualized  
                float linearDepth = Linear01Depth(rawDepth); 
                fixed4 worldpos = GetWorldPositionFromDepthValue( uv, linearDepth ); 
                return worldpos;
            }
GetWorldPos方法中取得线性深度,然后传入GetWorldPositionFromDepthValue方法中获取原世界坐标。

然后实现我们的fragment方法:

            float4 frag( v2f_img o ) : COLOR  
            {  
                //获取世界坐标
                fixed4 worldpos = GetWorldPos( o.uv); 

                fixed4 renderTex = tex2D(_MainTex, o.uv);  

                fixed y = worldpos.y;

                //上下变色
                fixed tmp = step(0,y); 
                fixed lp1 = - y / _ChangeDis;

                fixed lp = lp1 * (1-tmp) ;

                fixed4 c = _Color * (1-tmp);

                return lerp(renderTex ,c,min(lp,1)) ;
            } 
其中_ChangeDis为渐变的距离,y/_ChangeDis即实现的过度效果,大于1的部分直接取1,然后与原颜色进行一个插值运算。

因为这里我们需要获取深度贴图,所以我们还要设置一下摄像机的模式:

GetComponent<Camera>().depthTextureMode = DepthTextureMode.Depth;

最后来看看效果:



下面给出完整的shader代码

Shader "Custom/FotTest" {
    
	Properties {  
        _MainTex ("Base (RGB)", 2D) = "white" {}  
        _Color ("Ground Color", Color) = (1,0,1,1) //颜色
        _ChangeDis ("Change Dis", float) = 3.0 //渐变速度

    }
    SubShader {  
        Tags { "RenderType"="Opaque" }  
        LOD 200  
  
        Pass{  
            CGPROGRAM  
  
            #include "UnityCG.cginc"  
            #pragma vertex vert_img  
            #pragma fragment frag  

            uniform sampler2D _MainTex;  
            uniform fixed4 _Color;  
            uniform float _ChangeDis; 
            sampler2D _CameraDepthTexture;



            float4 GetWorldPositionFromDepthValue( float2 uv, float linearDepth )   
            {  
                
                float camPosZ = _ProjectionParams.y + (_ProjectionParams.z - _ProjectionParams.y) * linearDepth;  
  
                // unity_CameraProjection._m11 = near / t,其中t是视锥体near平面的高度的一半。  
                // 投影矩阵的推导见:http://www.songho.ca/opengl/gl_projectionmatrix.html。  
                // 这里求的height和width是坐标点所在的视锥体截面(与摄像机方向垂直)的高和宽,并且  
                // 假设相机投影区域的宽高比和屏幕一致。  
                float height = 2 * camPosZ / unity_CameraProjection._m11;  
                float width = _ScreenParams.x / _ScreenParams.y * height;  
  
                float camPosX = width * uv.x - width / 2;  
                float camPosY = height * uv.y - height / 2;  
                float4 camPos = float4(camPosX, camPosY, camPosZ, 1.0);  
                return mul(unity_CameraToWorld, camPos);  
            }  

            fixed4 GetWorldPos(float2 uv){
                float rawDepth =  SAMPLE_DEPTH_TEXTURE( _CameraDepthTexture, uv );  
                // 注意:经过投影变换之后的深度和相机空间里的z已经不是线性关系。所以要先将其转换为线性深度。  
                // 见:https://developer.nvidia.com/content/depth-precision-visualized  
                float linearDepth = Linear01Depth(rawDepth); 
                fixed4 worldpos = GetWorldPositionFromDepthValue( uv, linearDepth ); 
                return worldpos;
            }

            float4 frag( v2f_img o ) : COLOR  
            {  
                //获取世界坐标
                fixed4 worldpos = GetWorldPos( o.uv); 

                fixed4 renderTex = tex2D(_MainTex, o.uv);  

                fixed y = worldpos.y;

                //上下变色
                fixed tmp = step(0,y); 
                fixed lp1 = - y / _ChangeDis;

                fixed lp = lp1 * (1-tmp) ;

                fixed4 c = _Color * (1-tmp);

                return lerp(renderTex ,c,min(lp,1)) ;
            }  
            ENDCG  
        }  
    }   
}
摄像机脚本:

public class MainCamera : MonoBehaviour {

    public Material m;

    Camera mainCamera;

    public Color newColor;
    public float distance;


	// Use this for initialization
	void Start () {
        m.SetColor("_Color", newColor);
        m.SetFloat("_ChangeDis", distance);

        GetComponent<Camera>().depthTextureMode = DepthTextureMode.Depth;
	}
	
	// Update is called once per frame
	void Update () {
        
	}

    void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        Graphics.Blit(src, dest, m);
    }
}








  • 7
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值