找回密码
 立即注册
查看: 557|回复: 0

Unity Shader 有反射折射的水波效果

[复制链接]
发表于 2021-4-14 08:56 | 显示全部楼层 |阅读模式
Unity Shader系列文章:Unity Shader目录-初级篇

Unity Shader系列文章:Unity Shader目录-中级篇

效果:


包含菲涅耳反射的水面波动效果。在左图中,视角方向和水面法线的夹角越大,反射效果越强。在右图中,视角方向和水面法线的夹角越大,折射效果越强


水面波纹材质纹理


噪声纹理


水波效果使用的噪声纹理。左图:噪声纹理的灰度图。右图:由左图生成的法线纹理(噪声纹理类型需设置为Normal map)

原理:


在模拟实时水面的过程中,使用噪声纹理。此时,噪声纹理会用作一个高度图,以不断修改水面的法线方向。为了模拟水不断流动的效果,使用和时间相关的变量来对噪声纹理进行采样,当得到法线信息后,再进行正常的反射+折射计算,得到最后的水面波动效果。

反射折射实现:
使用一张立方体纹理 (Cubemap) 作为环境纹理(创建环境映射的立方体纹理),模拟反射。为了模拟折射效果,使用GrabPass 来获取当前屏幕的渲染纹理,并使用切线空间下的法线方向对像素的屏幕坐标进行偏移,再使用该坐标对渲染纹理进行屏幕采样,从而模拟近似的折射效果。

混合反射和折射颜色,使用菲涅耳系数来动态决定混合系数,来计算
涅耳系数公式:

其中,分别对应了视角方向和法线方向。它们之间的夹角越小, fresnel 值越小,反射越弱,折射越强。

Shader代码:
// 水波效果Shader "Custom/WaterWave"{    Properties    {        _Color ("Color", Color) = (1, 1, 1, 1)        _MainTex ("Texture", 2D) = "white" { }// 水面波纹材质纹理        _WaveMap ("Wave Map", 2D) = "bump" { }// 法线纹理 (由噪声纹理生成)        _Cubemap ("Cube Map", Cube) = "_Skybox" { }// 模拟反射的立方体纹理        _WaveXSpeed ("Wave X Speed", Range(-0.1, 0.1)) = 0.001        _WaveYSpeed ("Wave Y Speed", Range(-0.1, 0.1)) = 0.001        _Distortion ("Distortion", Range(0, 100)) = 50 // 控制模拟折射时图像的扭曲程度    }    SubShader    {        // 渲染队列设为Transparent,确保此物体渲染时,其他所有不透明物体已经渲染了        Tags { "RenderType" = "Opaque" "Queue" = "Transparent" }        // 定义抓取图像的Pass,此Pass会将屏幕图像存入_RefractionTex纹理中        GrabPass        {            "_RefractionTex"        }        Pass        {            Tags { "LightMode" = "ForwardBase" }            CGPROGRAM            #include "UnityCG.cginc"            #include "Lighting.cginc"            #pragma multi_compile_fwdbase            #pragma vertex vert            #pragma fragment frag            fixed4 _Color;            sampler2D _MainTex;            // _MainTex纹理的缩放和偏移系数            float4 _MainTex_ST;            sampler2D _WaveMap;            // _WaveMap纹理的缩放和偏移系数            float4 _WaveMap_ST;            samplerCUBE _Cubemap;            fixed _WaveXSpeed;            fixed _WaveYSpeed;            float _Distortion;            sampler2D _RefractionTex;            // _RefractionTex的纹素大小,例如521x512大小的纹理,值约为0.001953,即1/512            float4 _RefractionTex_TexelSize;            // 应用传递给顶点着色器的数据            struct a2v            {                float4 vertex: POSITION; // 语义:顶点坐标                float3 normal: NORMAL; // 语义:法线                float4 tangent: TANGENT; // 语义:切线                float4 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 = mul(UNITY_MATRIX_MVP, v.vertex);                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, _WaveMap);                                // 将顶点坐标从模型空间变换到世界空间                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;                                // 计算该顶点对应的从切线空间变换到世界空间的变换矩阵,并把每一行存储在TtoW0,TtoW1,TtoW2的xyz分量中                // 这里使用的数学方法是,得到切线空间下的3个坐标轴(x副法线,y切线,z法线)在世界空间下的表示,再依次按列组成变换矩阵即可                // 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            {                // 取出存在w分量里,世界空间下顶点坐标                float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);                // 世界观察向量                fixed3 worldViewDir = normalize(UnityWorldSpaceViewDir(worldPos));                float2 speed = _Time.y * float2(_WaveXSpeed, _WaveYSpeed);                // 对法线纹理进行两次采样,模拟两层交叉的水面波动效果                // 若法线纹理Texture Type未设置成Normal map,                // 要从像素映射回法线,即[0, 1]转化到[-1, 1]                // bump.xy = ( tex2D(_BumpMap, i.uv.zw).xy * 2 - 1);                // 如果设置了Normal map类型,Unity会根据平台使用不同的压缩方法,                // _BumpMap.rbg值不是对应的切线空间的xyz值了,要用Unity内置函数UnpackNormal                fixed3 bump1 = UnpackNormal(tex2D(_WaveMap, i.uv.zw + speed)).rgb;                fixed3 bump2 = UnpackNormal(tex2D(_WaveMap, i.uv.zw - speed)).rgb;                // 相加并归一化,得到切线空间下的法线方向                fixed3 bump = normalize(bump1 + bump2);                float2 offset = bump.xy * _Distortion * _RefractionTex_TexelSize.xy;                // 把偏移量和屏幕坐标的z分量相乘,为了模拟深度越大,折射度越大的效果                // 若不需要此效果,可直接把偏移量叠加到屏幕坐标上                i.scrPos.xy = offset * i.scrPos.z + i.scrPos.xy;                // i.scrPos.xy / i.scrPos.w,对scrPos进行透视除法                fixed3 refrCol = tex2D(_RefractionTex, i.scrPos.xy / i.scrPos.w).rgb;                // 将法线从切线空间变换到世界空间                bump = normalize(half3(dot(i.TtoW0.xyz, bump), dot(i.TtoW1.xyz, bump), dot(i.TtoW2.xyz, bump)));                fixed4 texColor = tex2D(_MainTex, i.uv.xy + speed);                // 获得反射方向                fixed3 reflDir = reflect(-worldViewDir, bump);                // 对反射纹理采样,并和主纹理颜色相乘得到反射颜色                fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb * texColor.rgb * _Color.rgb;                // 计算菲尼尔系数,公式:fresnel = pow(1-max(0, v·n),4)                // 视角方向和法线方向之间的夹角越小,fresnel值越小,反射越弱,折射越强。                fixed fresnel = pow(1 - saturate(dot(worldViewDir, bump)), 4);                fixed3 finalColor = reflCol * fresnel + refrCol * (1 - fresnel);                                return fixed4(finalColor, 1);            }                        ENDCG        }    }    FallBack Off}

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Unity开发者联盟 ( 粤ICP备20003399号 )

GMT+8, 2024-11-15 04:39 , Processed in 0.090101 second(s), 26 queries .

Powered by Discuz! X3.5 Licensed

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表