shader反射水面_【博物纳新】水面涟漪反射效果开源库测评

【博物纳新】是UWA重磅推出的全新栏目&＃xff0c;旨在为开发者推荐新颖、易用、有趣的开源项目&＃xff0c;帮助大家在项目研发之余发现世界上的热门项目、前沿技术或者令人惊叹的视觉效果&＃xff0c;并探索将其应用到自己项目的可行性。很多时候&＃xff0c;我们并不知道自己想要什么&＃xff0c;直到某一天我们遇到了它。

大千世界&＃xff0c;无奇不有&＃xff01;更多精彩内容尽在开源库&＃xff1a;lab.uwa4d.com

导读

WaveProvider是一个组件和着色器库&＃xff0c;可以使用Unity轻松表达波形&＃xff0c;利用该组件可以实现受物理影响的水面动态涟漪效果&＃xff0c;

效果展示

实现原理

1. 添加用于绘制倒影图像的反射相机

考虑到主摄像机的位置可能会动态地改变&＃xff0c;所以反射摄像机也需要使用脚本控制使其动态移动到合适位置(与主相机相对水面对称)以绘制正确的反射图像。

2. 根据投影面编写一个水面投影反射的着色器

投影时&＃xff0c;需要统一投影侧的空间并确定投影面(项目中的这个投影面就是水面)。使用反射相机的变换矩阵变换&＃xff0c;并渲染每个对象。当使用主摄像机在水面上绘制对象时&＃xff0c;使用反射相机的变换矩阵来转换对象顶点。

下面的代码段是水面投影反射着色器的一部分&＃xff1a;

1 struct v2f

2 {

3 float2 uv : TEXCOORD0;

4 float4 vertex : SV_POSITION;

5 float4 ref : TEXCOORD1;

6 };

7

8 sampler2D _MainTex;

9 float4 _MainTex_ST;

10 sampler2D _RefTex; //反射绘制的纹理

11 float4x4 _RefVP; //反向VP矩阵输入

12 float4x4 _RefW; //反射对象的局部变换矩阵

13

14 v2f vert (appdata v)

15 {

16 v2f o;

17 o.vertex &＃61; UnityObjectToClipPos(v.vertex);

18 o.ref &＃61; mul(_RefVP, mul(_RefW, v.vertex));

19 o.uv &＃61; TRANSFORM_TEX(v.uv, _MainTex);

20 return o;

21 }

22

23 fixed4 frag (v2f i) : SV_Target

24 {

25 return tex2D(_RefTex, i.ref.xy / i.ref.w * 0.5 &＃43; 0.5);

26 }

其中_ RefTex是反射绘制的纹理&＃xff0c;_ RefVP是反向VP矩阵输入&＃xff0c;_RefW是反射对象的局部变换矩阵。顶点着色器使用_RefW将顶点转换为世界坐标&＃xff0c;再通过_RefVP将世界坐标转换为反射相机的投影空间&＃xff0c;片元着色器将其转换为普通坐标转换&＃43;纹理坐标&＃xff0c;并用于主摄像机渲染。

然后&＃xff0c;我们得到了如下效果&＃xff1a;

这样&＃xff0c;即使相机移动或反射物体移动&＃xff0c;旋转或缩放&＃xff0c;也可以在没有违和感的情况下显示正确的投影图像。

3. 在投影着色器的基础上编写一个根据法线扭曲的着色器

接下来&＃xff0c;我们添加扭曲投影的代码&＃xff0c;这里通过引用法线贴图的方式实现。

1float2 offset &＃61; bump * _BumpAmt * _RefTex_TexelSize.xy;

2i.ref.xy &＃61; offset * i.ref.z &＃43; i.ref.xy

其中_BumpAmt是可调节的影响系数&＃xff0c;_BumpAmt越大&＃xff0c;则涟漪越强烈&＃xff0c;但同时会影响到水面的反射效果&＃xff0c;因此建议将参数控制在300以下&＃xff0c;并按自己的需求进行调整。

_BumpAmt参数对效果的影响示意图

4. 根据脚的运动输入波动方程

利用波动方程&＃xff0c;使波浪的高度可以作为纹理。(此处不对波动方程进行详细介绍)

左边区域是波纹输入纹理的调试界面&＃xff0c;接下来&＃xff0c;将存储在此纹理中的波的高度(被视为高度图)解析为法线并扭曲反射纹理&＃xff0c;实际上&＃xff0c;当从高度图计算法线贴图时&＃xff0c;也可以直接求解偏导数&＃xff0c;从而输出正常值作为着色器的凹凸。感兴趣的朋友可以参考该作者的另一篇相关文章&＃xff1a;http://esprog.hatenablog.com/entry/2016/10/24/183733

同时根据角色脚的运动输入更改波动方程

作者在人物的脚点上附上了Collider组件和一个改造了InkPainter的CollisionPainter的脚本&＃xff0c;可以理解为在人物的脚点上各加了一个笔刷&＃xff0c;具体实现可以参考InkPainter插件里的Brush类。

PS&＃xff1a;InkPainter插件链接附在文末&＃xff0c;喜欢Splatoon的&＃xff0c;或者想实现类似Splatoon效果的朋友&＃xff0c;该插件可以提供不错的参考价值。

性能测试

使用UWA GOT Online对这个效果进行了性能测试。为了更真实地反映这个项目的渲染开销&＃xff0c;我们使用了非多线程渲染的版本。

同时准备了4个版本的场景作比较&＃xff1a;

版本A&＃xff1a;即原版&＃xff0c;3个角色加水面涟漪反射效果&＃xff1b;

版本B&＃xff1a;3个角色&＃xff0c;去除涟漪反射效果&＃xff0c;同时将地板Shader更换成简单的Diffuse&＃xff1b;

版本C&＃xff1a;9个角色加水面涟漪反射效果&＃xff1b;

版本D&＃xff1a;9个角色&＃xff0c;去除涟漪反射效果&＃xff0c;同时将地板Shader更换成简单的Diffuse。

测试4个版本的场景后&＃xff0c;通过UWA GOT Online解析数据&＃xff0c;最终得到对比数据如下&＃xff1a;

我们观察到&＃xff0c;有无涟漪反射的效果&＃xff0c;对场景的帧率有一定的影响&＃xff0c;但随着角色数量的上升&＃xff0c;场景帧率发生了明显的下降&＃xff0c;通过逻辑代码的分析我们发现开销主要集中在渲染模块上&＃xff0c;接下来我们具体看一下Camera.Render的耗时均值对比&＃xff1a;

下面我们以版本A为例具体看一下渲染耗时曲线&＃xff1a;

可以观察到渲染耗时在8ms左右波动&＃xff0c;其中不透明渲染在5ms左右&＃xff0c;半透明渲染在1ms左右。然后再来对比一下四个版本的不透明和半透明渲染的平均耗时&＃xff1a;

这里我们可以看到&＃xff0c;开启效果后&＃xff0c;不透明渲染和半透明渲染开销均有上升&＃xff0c;且影响较大&＃xff0c;开启效果会额外增加40%左右的渲染开销。

考虑到项目中的角色材质比较复杂&＃xff0c;会对测试结果造成一定影响&＃xff0c;对红米Note3这类低性能机型而言&＃xff0c;能跑到这个数据&＃xff0c;该效果的性能还是可以接受的&＃xff0c;但建议开发者在使用时控制反射场景的复杂度&＃xff0c;同时可以考虑优化水波反射的Shader以达到很好的优化效果。

注意事项

1)文章前两图素材来源于《LOST SPHEAR》&＃xff0c;图三来自推主オノッチ利用该组件制作出来的效果&＃xff0c;twitter链接&＃xff1a;https://twitter.com/onotchi_/status/958188421045866496(仅做效果参考&＃xff0c;并非项目内容)&＃xff1b;

2)该项目需要搭配InkPainter(nv1.2.1或更高版本)使用。

该项目来自UWA开源库&＃xff0c;您可以下载、收藏或评论Waveform Provider项目。开源库传送门&＃xff1a;https://lab.uwa4d.com/