综合效果

经过各元素叠加和程序的审美调参后的综合效果
交互的水波与边缘浪花的合并需要优化一下

反射

两种方案：

cubeMap
以水面对称设一个摄像机

cubeMap

实现：反射探针生成CubeMap
特性：
● 对于近处的反射会有明显的错位
● 适用于对清晰度要求不高，性能要求高的情况

设置反射摄像机

原理：在平面对称镜头摄像机的位置，建一个反射摄像机，渲染反射贴图。shader用屏幕坐标对反射贴图采样即可得到镜像

反射贴图：

//---------- 反射 ---------float3 worldPos = float3(i.TtoW0.w, i.TtoW1.w, i.TtoW2.w);
fixed3 viewDir = normalize(UnityWorldSpaceViewDir(worldPos));float3 tangentNormal = fixed3(0,0,1);//bump;//
//return fixed4(bump, 1);//看法线
fixed3 worldNormal = normalize(half3(dot(i.TtoW0.xyz, tangentNormal), dot(i.TtoW1.xyz, tangentNormal), dot(i.TtoW2.xyz, tangentNormal)));//------ cubeMap
// fixed4 texColor = tex2D(_MainTex, i.uv.xy + speed);
// fixed3 reflDir = reflect(-viewDir, worldNormal);
// fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb ;// * _Color.rgb;//------ 对称相机
float2 screenUV = i.scrPos.xy/i.scrPos.w - worldNormal.xz * _ReflDistortion*_Reflection_TexelSize.xy;
fixed4 texColor = tex2D(_MainTex, i.uv.xy + speed);
fixed3 reflCol = tex2D(_Reflection, screenUV).rgb  * _Color.rgb;//* texColor.rgbreturn fixed4(reflCol, 1);

折射

参考《入门精要》的实现：GrabPass获得水后图像，采样噪音纹理得到offset，然后转移到tangent空间做偏移，达到随机扭曲的效果

菲涅尔效应

水的F_0 为0.02

 fixed fresnel = pow(1 - saturate(dot(viewDir, worldNormal)), 4);// 水F0 ~= 0fixed3 reColor = reflCol * fresnel + refrCol * (1 - fresnel);

深浅

利用深度图、视线深度来实现

浪花/泡沫

利用深度差计算一个浪花强度：相当于提取出边缘
利用浪花强度来采样坡度贴图：

可以得到

3. 再叠加浪花纹理：

得到

4. 最终浪花效果：

//---------- 浪花 ---------float intensityFactor = 1 - saturate(deltaDepth / _FoamStrength);    half3 foamGradient = 1 - tex2D(_FoamGradient, float2(intensityFactor - _Time.y*0.2, 0) + bump.xy * 0.15);float2 foamDistortUV = bump.xy * 0.2;half3 foamTex = tex2D(_Foam, i.foamUV + foamDistortUV).rgb;fixed4 foamColor = fixed4(foamGradient * intensityFactor * foamTex, 1);

波浪

多种方案：

随时间扰动噪音法线贴图
flowmap 参考之前的文章
Gerstner参考此文
FFT参考此文
…

可交互

参考该项目

主要分为三个Shader：生成波浪Shader、传输波浪Shader、渲染波浪Shader；
三张纹理图：传递波浪高度贴图、生成波浪高度贴图、前一帧高度贴图
一个摄像机脚本：记录点击位置，传给生成波浪Shader
以传递波浪高度贴图作为载体，每次渲染先叠加生成波浪Shader生成的波浪高度贴图，再叠加利用前一帧高度贴图在传输波浪Shader算出的衰减高度（衰减参考波的传递公式），得到最终波浪高度贴图
在渲染波浪Shader中，采样波浪高度贴图，对顶点进行偏移；对片元插值波浪颜色

渲染Shader
顶点部分：

...
float4 localPos = v.vertex;
float2 waveUv = v.texcoord.xy;
float4 waveTransmit = tex2Dlod(_WaveResult, float4(waveUv, 0, 0));
float waveHeight = DecodeFloatRGBA(waveTransmit);localPos.y += waveHeight * _WaveScale;
float3 worldPos = mul(unity_ObjectToWorld, localPos);o.vertex = mul(UNITY_MATRIX_VP, float4(worldPos, 1));
...

片元部分：

...
float4 waveTransmit = tex2Dlod(_WaveResult, float4(i.uv.xy, 0, 0));
float waveHeight = DecodeFloatRGBA(waveTransmit) * _WaveScale;
return lerp(finalCol, _WaveColor, waveHeight);

TODO

水下3D

3D贴图？

焦散

用焦散法线噪音贴图来模拟？

散射

辉光

项目地址

参考资料

《Unity Shader入门精要》
https://blog.csdn.net/ZanDatsu/article/details/107865706
http://blog.sina.com.cn/s/blog_89d90b7c0102vgk1.html
https://github.com/dreamfairy/interactivity-waterplane
https://blog.csdn.net/LeoHiJack/article/details/78329543
https://www.youtube.com/watch?v=zD6GV6bZenM

Unity Shader 水多种元素的实现（反射、折射、菲涅尔、深浅、浪花/泡沫、水波、可交互）相关推荐

Unity shader Note :高级纹理(CubeMap反射折射菲涅尔,Rendermap镜子玻璃,程序纹理)
1.Cubemap–反射折射使用脚本来创建Cubemap ①通过Camera.RenderToCubemap 把任意位置观察到的场景图制作成一张Cubemap之中 ②脚本使用自定义编译窗体的命令 – ...
Unity Shader：实现菲涅尔+色散效果的环境映射以及相关原理解析
文章目录 1,色散在光学中的原理 2,反射的数学计算方法以及用它实现环境映射 3,折射的原理以及色散的实现 4,菲涅尔效果 5,拥有菲涅尔与色散效果的环境映射 1,色散在光学中的原理复色光 --现实 ...
Unity Shader：实现菲涅尔+色散效果以及相关原理解析
1,色散在光学中的原理 2,反射的原理以及环境映射的实现 3,折射的原理以及色散的实现 4,菲涅尔效果 5,将菲涅尔与色散效果增加到环境映射中 1,色散在光学中的原理复色光 --现实生活中 ...
shader 反射水面_UnityShader-菲涅尔反射（Fresnel Reflection）
菲涅耳公式(或菲涅耳方程),由奥古斯丁·让·菲涅耳导出.用来描述光在不同折射率的介质之间的行为.由公式推导出的光的反射称之为"菲涅尔反射".菲涅尔公式是光学中的重要公式,用它能解释 ...
unity shader 菲涅尔效果
老样子,还是先上效果图: 菲涅尔效果的原理大家可以自己去百度看看,网上有很多,这里就不多说了,我们直接看如何实现这个效果实现思路: 1.求得视角方向,法线方向(世界空间下) 2.根据菲涅尔效果的公式 ...
Physics CG：菲涅尔（fresnel）反射
这一篇是物理学CG的开篇,其实我多开了一个分类也是心理无奈的,自身水平有限,而很多物理图形学知识积累太少,有些甚至根本没学过.然而高级图形学知识中,或者说高级图形着色效果中,很大一部分是基于" ...
Shader学习21——基于菲涅尔透明的扫描线
看到人家这样的一个效果,于是想自己也复制一个 Mar-26-2021 17-16-26.gif 想了一下思路,应该是菲涅尔的做的一个透明效果(单纯的菲涅尔透明可以看这篇),再去做了一个线的效果,线应该 ...
Chango的数学Shader世界（七）水波模拟-透明水面，菲涅尔(Fresnel)效应
目的: 解析,改进,批评一个国外免费透明水面Shader,进一步了解Shader背后的物理原理. 参考: 菲涅尔反射分析: 我将原水面Shader一再简化,从中抽取最主要的部分,忽略细枝末节,并改掉 ...
Unity Shader知识点（三）高光反射Shader
前言此文及专栏系是以Shader入门精要为基础整理的Unity Shader学习笔记,尽量以初学者视角还原(其实半年前我就是初学者),错误还需指正. 本篇是实操部分的第三个Shader,即高光反射S ...

Unity Shader 水多种元素的实现（反射、折射、菲涅尔、深浅、浪花/泡沫、水波、可交互）