找回密码
 注册帐号

扫一扫,访问微社区

士郎 手机上也能做出美丽的海面效果(波光+渐变+实时倒影)

38
回复
3775
查看
[ 复制链接 ]
排名
1
昨日变化

7836

主题

8394

帖子

3万

积分

Rank: 16

UID
1231
好友
186
蛮牛币
11039
威望
30
注册时间
2013-7-29
在线时间
4019 小时
最后登录
2019-6-17

活力之星原创精华达人突出贡献奖财富之证游戏蛮牛QQ群会员蛮牛妹VIP

2018-12-14 16:21:46 显示全部楼层 阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

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

x
我们的项目为了还原漫画中海滩度假胜地的场景,想要做出一个美丽的海岛风景,那么随之而来的一个大问题就是如何把海面做的漂亮,如何在限制诸多的移动平台上把海的效果做好。网上可以找到很多做海面效果的文章,很多游戏里也都实现了水面的效果,然而很多情况是,手机上的水面效果都不尽如人意,有些比较像水银,有些的层次感不够明显。本文将介绍一下我们项目中是如何努力在移动平台上实现一个较为逼真柔美的海面效果的。

首先上两张整体效果的截图。可以看出海水会根据地势的深浅渐变颜色,水面也有粼粼波光与近树远山的倒影。接下来的部分,将会针对各个效果分别介绍。。
1.jpg
纵览效果



2.jpg

游戏视角



先从生成水面的第一个步骤开始入手。


第一步,生成水面的面片。
3.jpg

图片为实验工程,不代表游戏中的效果
4.jpg

上图工程生成的水片





一张完整的mesh 是如何决定哪里有水,哪里是高地需要透明,根据不同高度又有颜色变化的呢? ——————顶点色存储高度信息。

项目初期,以及网上很多例子的实现方法,是计算深度(depth map)。


虽然实现出来的效果很美好,但可惜的是,由于移动端上精度不足,无法正确计算相机到物体的准确depth值,导致计算的海水效果错误。所以精细的海面效果无法用这个方法在手机上出现。因此。需要找到一个不借助depth map来计算的方法。

最后,我们利用了刚刚提到的顶点色。

在mesh中,顶点信息有顶点色,RGBA,如果mesh的顶点色并没有其他用处的话,完全可以利用起来,存储一些其他的信息,就比如说存高度信息。其实也可以把预处理的高度信息存在贴图中,但是存在一个已有的,且没有被合理利用的通道中,更简单高效。



在前期准备的阶段,计算水面与地的高度,并存在mesh中的工具是MeshSaverEditor.cs。在运行时,右键点击Tile的mesh组件,有一个“Save Mesh As Color...”选项,可存下一个带有高度信息的mesh。再将生成的mesh赋给自己,就可以利用这上的信息了。


工具的核心原理是利用射线测量水面到地表的距离,再将距离数据转化到mesh顶点的颜色通道中。


上述步骤在确定调整好水片位置后,无需再次生成,也不会占用真机运行时的效率,所以非常高效。

第二步,产生波光。
1.1.gif

水面的波光效果
能有波光粼粼的感觉,主要是有一个normal texture。
实现的主要代码:
[AppleScript] 纯文本查看 复制代码
half3 normalInTan = UnpackScaleNormalDIY(tex2D(_BumpMap, i.bumpCoords.xy)+ tex2D(_BumpMap, i.bumpCoords.zw), 1.0f);  
//纹理坐标的前两个值+ 纹理坐标的后两个值  

第三步,水面的层次感。
5.jpg

为了更好的看到水本身的层次感,去掉了倒影

核心代码:
[AppleScript] 纯文本查看 复制代码
===>       baseColor = baseColor - edgeBlendFactors.x*0.3 + (spec * 
_SpecularColor)/(edgeBlendFactors.x+1) ;
===>       baseColor.a = _Transparency * edgeBlendFactors.x* saturate(0.5 + refl2Refr * 1.0)*2;  

(这里面有一些参数,纯属我个人的经验值,在调整颜色变化的时候,尝试出来的。)

这个效果的实现,是以第一步存下来的深度信息为基础的。主要是通过edgeBlendFactors.x来控制,深浅变化的一个量。我在特别靠近岸边的地方加了加了一圈白,其实是模拟了真实海岸的感觉。
6.jpg

参数截图
单纯调整edgeBlendFactors.x 会造成整体上的改变,深浅的渐变区域被拉的很长,不够真实;岸边过于透明,会有穿帮露出下面的鱼。所以每一点调整都需要很多相应的配套改变才能出现合理的效果。


游戏里把海面做的特别好的,可以参考非常有名的《神秘海域4》,下面这张是游戏里的截图,可以看到很多海面效果的特点,比如浅海深海的不同颜色,海岸线的处理,波涛的起伏。显然,我们的效果距离这个还有很大的差距,不过希望大家之后可以在手机上作出超过《神海》的美丽大海。

7.jpg

《神秘海域4》游戏视频截图





其实在cs存高度信息的阶段,我分了一下段,在不同的高度范围之间的颜色是不连续的,这一处理是想模仿《神4》里浅滩是浅蓝带白,深海是深蓝这个特点,中间有一个明显的分界线。

第四步,实时倒影。
8.jpg

游戏截图

首先通过PlanarReflectioon.cs控制拍摄需要映照的物体,以及参数。
Reflection Mask中可以选择layers,选中了的layer就可以映在水面上。
要注意,不能选择映照本身layer。
ClipPlaneOffset 可以调整倒影的偏移。
生成的texture会赋给shader的InternalReflection这个变量。





在处理倒影的时候,也出现了一些小问题。
有些倒影到了屏幕边缘会被拉伸变形严重,所以调整了一下系数,从10改到1倍,这个问题就可以规避掉了。
代码如下:


[AppleScript] 纯文本查看 复制代码
half4 distortOffset = half4(worldNormal.xz * REALTIME_DISTORTION * 1.0, 0.0, 0.0);  

另外一个问题是当拉伸没那么明显后,就发现倒影会一直延伸到陆地上。解决的方法依旧靠顶点色传过来的这个高度参数,越浅的地方,反射越小。
代码如下:
[AppleScript] 纯文本查看 复制代码
refl2Refr = refl2Refr * edgeBlendFactors.x; 



到这里,这一关卡的海面效果实现就全部介绍完了,最后的完成效果就如同最开始的两张图片
就如同上面对比《神海》,我们的海面效果距离完美还有很远,有很多地方可以提高,效率上也一定有很多地方可以优化,最后附上核心代码的下载,希望大家可以一起讨论。欢迎指出实现上的不足,和可以提高的地方。

链接: https://pan.baidu.com/s/1nwUCwHF 密码: bapb(这是依赖文件)


在做这个场景的期间,看了很多海的照片,甚至晚上去后海,都注意着灯光下的水面波纹,才发现,原来以前有很多很美的细节都没怎么注意过,果然做场景效果,还是要多观察生活才能做的出来。
知乎@Luisa Z


点评

手机上也能做出美丽的海面效果  发表于 2018-12-17 05:47
参与人数 8鲜花 +29 收起 理由
喜庆哥呵呵 + 1 赞一个!
霍莉雪特 + 5 很给力!
雨泥 + 5 赞一个!
123qqq + 2
洛神同学 + 5 很给力!
晨丶半 + 4 赞一个!
我是谁aa + 2 赞一个!
老男孩 + 5 很给力!

查看全部评分总评分 : 鲜花 +29

回复

使用道具 举报

5熟悉之中
740/1000
排名
3457
昨日变化

0

主题

55

帖子

740

积分

Rank: 5Rank: 5

UID
58011
好友
2
蛮牛币
750
威望
0
注册时间
2014-11-27
在线时间
253 小时
最后登录
2019-4-16
2018-12-14 16:48:37 显示全部楼层
赞,真是不错的
回复

使用道具 举报

8常驻蛮牛
5516/10000
排名
53
昨日变化

1

主题

553

帖子

5516

积分

Rank: 8Rank: 8

UID
13097
好友
1
蛮牛币
5388
威望
0
注册时间
2014-1-21
在线时间
2076 小时
最后登录
2019-6-17

活力之星

2018-12-14 17:12:45 显示全部楼层
效果很好
回复

使用道具 举报

4四处流浪
483/500
排名
15908
昨日变化

0

主题

224

帖子

483

积分

Rank: 4

UID
220417
好友
0
蛮牛币
120
威望
0
注册时间
2017-5-3
在线时间
213 小时
最后登录
2019-3-6
2018-12-14 17:44:45 显示全部楼层
厉害,收藏了
回复

使用道具 举报

7日久生情
2195/5000
排名
944
昨日变化

0

主题

415

帖子

2195

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
78535
好友
6
蛮牛币
2163
威望
0
注册时间
2015-3-10
在线时间
674 小时
最后登录
2019-6-14
2018-12-14 18:14:24 显示全部楼层
多谢分享了
回复

使用道具 举报

7日久生情
1926/5000
排名
1219
昨日变化

0

主题

214

帖子

1926

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
34048
好友
0
蛮牛币
548
威望
0
注册时间
2014-7-13
在线时间
744 小时
最后登录
2019-6-17
2018-12-14 19:48:09 显示全部楼层
收藏了!!
回复

使用道具 举报

7日久生情
2288/5000
排名
1393
昨日变化

0

主题

709

帖子

2288

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
135463
好友
0
蛮牛币
35
威望
0
注册时间
2016-1-23
在线时间
689 小时
最后登录
2019-6-18
2018-12-14 20:47:00 显示全部楼层
66666666666666666666666
回复 支持 反对

使用道具 举报

7日久生情
1873/5000
排名
1192
昨日变化

0

主题

549

帖子

1873

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
87577
好友
0
蛮牛币
6988
威望
0
注册时间
2015-3-31
在线时间
346 小时
最后登录
2019-6-17
2018-12-15 08:51:59 显示全部楼层
too good too strong!
回复 支持 反对

使用道具 举报

3偶尔光临
224/300
排名
12882
昨日变化

0

主题

69

帖子

224

积分

Rank: 3Rank: 3Rank: 3

UID
278108
好友
0
蛮牛币
2
威望
0
注册时间
2018-4-20
在线时间
85 小时
最后登录
2019-5-1
2018-12-15 09:49:06 显示全部楼层
666666666666666666666666666666
回复 支持 反对

使用道具 举报

4四处流浪
300/500
排名
7416
昨日变化

9

主题

46

帖子

300

积分

Rank: 4

UID
160428
好友
0
蛮牛币
87
威望
0
注册时间
2016-8-3
在线时间
73 小时
最后登录
2019-6-7
2018-12-15 11:20:07 显示全部楼层
牛牛牛,真厉害,必须赞一个
回复 支持 反对

使用道具 举报

7日久生情
3684/5000
排名
78
昨日变化

0

主题

47

帖子

3684

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
49596
好友
0
蛮牛币
9124
威望
0
注册时间
2014-10-17
在线时间
963 小时
最后登录
2019-6-17
QQ
2018-12-15 11:35:09 显示全部楼层
多谢分享了
回复

使用道具 举报

5熟悉之中
981/1000
排名
2502
昨日变化

0

主题

138

帖子

981

积分

Rank: 5Rank: 5

UID
276682
好友
0
蛮牛币
2019
威望
0
注册时间
2018-4-11
在线时间
269 小时
最后登录
2019-6-15
2018-12-15 11:51:41 显示全部楼层
效果很棒,受教了
回复

使用道具 举报

7日久生情
1535/5000
排名
3443
昨日变化

0

主题

895

帖子

1535

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
210390
好友
0
蛮牛币
1835
威望
0
注册时间
2017-3-7
在线时间
206 小时
最后登录
2019-5-23
2018-12-15 16:11:02 显示全部楼层
回复

使用道具 举报

7日久生情
1678/5000
排名
1851
昨日变化

2

主题

433

帖子

1678

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
213483
好友
0
蛮牛币
2502
威望
0
注册时间
2017-3-21
在线时间
521 小时
最后登录
2019-6-14
2018-12-15 20:09:50 显示全部楼层
赞!!!!!
回复

使用道具 举报

7日久生情
2808/5000
排名
2230
昨日变化

1

主题

1809

帖子

2808

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
119154
好友
0
蛮牛币
3029
威望
0
注册时间
2015-8-21
在线时间
368 小时
最后登录
2019-6-18
2018-12-15 20:42:12 显示全部楼层
谢谢楼主大大。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则