Shader 玻璃效果

GrabPass

使用 GrabPass 获取屏幕图像并绘制在一张纹理中,以便我们在后续的Pass中访问它

在这里插入图片描述
采样这张纹理并显示到UI上,左下角是采样结果
需要注意的是渲染队列设置成透明队列(即"Queue"=“Transparent”)。保证当渲染该物体时,所有的不透明物体都已经被绘制在屏幕上,从而获取正确的屏幕图像。

Shader "MyCustom/GrabPass"
{
    Properties {}
    
    SubShader
    {
        Tags { "RenderType"="Opaque" "Queue" = "Transparent" }
        LOD 100
        
        GrabPass 
        { 
            "_GrabTexture"
        }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv     : TEXCOORD0;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float2 uv  : TEXCOORD0;
            };

            sampler2D _GrabTexture;

            v2f vert (appdata v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                float2 uv = i.uv;
                uv.y = 1 - uv.y;
                fixed3 color = tex2D(_GrabTexture, uv);
                return fixed4(color, 1);
            }
            ENDCG
        }
    }
}

玻璃效果

步骤:

  1. 用GrabPass抓取屏幕,获取玻璃后面的屏幕图像
  2. 用一张法线纹理来修改模型的法线信息,用reflect函数获取反射光线采样Cubemap
  3. 模拟折射时,对切线空间下的法线进行偏移,再对GrabPass获取的屏幕图像进行采样来模拟近似的折射效果

在这里插入图片描述

完整的shader

Shader "MyCustom/Glass" 
{
	Properties 
	{
		_MainTex ("[玻璃的材质纹理]Main Tex", 2D) = "white" {}
		_BumpMap ("[玻璃的法线纹理]Normal Map", 2D) = "bump" {}
		_Cubemap ("[环境纹理]Environment Cubemap", Cube) = "_Skybox" {}
		_Distortion ("[折射时图像的扭曲程度]Distortion", Range(0, 500)) = 10
		// 当_RefractAmount值为0时,只包含反射效果,当值为1时,该玻璃只包括折射效果
		_RefractAmount ("[折射程度]Refract Amount", Range(0.0, 1.0)) = 0.7
	}
	
	SubShader 
	{
		Tags { "Queue"="Transparent" "RenderType"="Opaque" }

		GrabPass { "_RefractionTex" }
		
		Pass 
		{		
			CGPROGRAM
			
			#pragma vertex vert
			#pragma fragment frag
			
			#include "UnityCG.cginc"
			
			sampler2D _MainTex;
			float4 _MainTex_ST;
			sampler2D _BumpMap;
			float4 _BumpMap_ST;
			samplerCUBE _Cubemap;
			float _Distortion;
			fixed _RefractAmount;
			sampler2D _RefractionTex;
			float4 _RefractionTex_TexelSize;
			
			struct a2v
			{
				float4 vertex   : POSITION;
				float3 normal   : NORMAL;
				float4 tangent  : TANGENT;
				float2 texcoord : TEXCOORD0;
			};
			
			struct v2f
			{
				float4 pos    : SV_POSITION;
				float4 scrPos : TEXCOORD0;
				float4 uv     : TEXCOORD1;
				float4 TtoW0  : TEXCOORD2;
			    float4 TtoW1  : TEXCOORD3;
			    float4 TtoW2  : TEXCOORD4;
			};
			
			v2f vert (a2v v)
			{
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);
				o.scrPos = ComputeGrabScreenPos(o.pos);
				
				o.uv.xy = TRANSFORM_TEX(v.texcoord, _MainTex);
				o.uv.zw = TRANSFORM_TEX(v.texcoord, _BumpMap);
				
				float3 worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;
				fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
				fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
				fixed3 worldBinormal = cross(worldNormal, worldTangent) * v.tangent.w;

				// 从切线空间到世界空间的变换矩阵
				o.TtoW0 = float4(worldTangent.x, worldBinormal.x, worldNormal.x, worldPos.x);
				o.TtoW1 = float4(worldTangent.y, worldBinormal.y, worldNormal.y, worldPos.y);
				o.TtoW2 = float4(worldTangent.z, worldBinormal.z, worldNormal.z, worldPos.z);
				
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT;
				fixed4 albedo = tex2D(_MainTex, i.uv.xy);
				
				float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
				fixed3 worldViewDir = normalize(UnityWorldSpaceViewDir(worldPos));
				
				// 获取切线空间中的法线
				fixed3 tangentNormal = UnpackNormal(tex2D(_BumpMap, i.uv.zw));
				// 将法线转换为世界空间
				float3 worldNormal = normalize(half3(dot(i.TtoW0.xyz, tangentNormal), dot(i.TtoW1.xyz, tangentNormal), dot(i.TtoW2.xyz, tangentNormal)));

				// 反射
				fixed3 reflectDir = reflect(-worldViewDir, worldNormal);
				fixed3 reflectCol = texCUBE(_Cubemap, reflectDir).rgb * albedo.rgb;
				
				// 对切线空间下的法线进行偏移,因为该空间下的法线可以反映顶点局部空间下的法线方向
				float2 offset = tangentNormal.xy * _Distortion * _RefractionTex_TexelSize.xy;
				// i.scrPos.z是深度
				i.scrPos.xy = offset * i.scrPos.z + i.scrPos.xy;

				// 折射,采样抓屏贴图,对scrPos透视除法得到真正的屏幕坐标
				fixed3 refractCol = tex2D(_RefractionTex, i.scrPos.xy/i.scrPos.w).rgb;
				
				fixed3 finalColor = reflectCol * (1 - _RefractAmount) + refractCol * _RefractAmount;
				finalColor += ambient;
				
				return fixed4(finalColor, 1);
			}
			
			ENDCG
		}
	}
	FallBack "Diffuse"
}

在这里插入图片描述
参数设置

参考

《Shader 入门精要》

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值