【游戏技术群】959392658  【游戏出海群】12067810
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2436

当前位置:游戏蛮牛 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 2764|回复: 36

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

[复制链接]  [移动端链接]
排名
1
昨日变化

7406

主题

7948

帖子

3万

积分

Rank: 16

UID
1231
好友
185
蛮牛币
9245
威望
30
注册时间
2013-7-29
在线时间
3779 小时
最后登录
2019-3-18

社区QQ达人活力之星原创精华达人突出贡献奖财富之证游戏蛮牛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 很给力!

查看全部评分


跟我念“站长妹纸萌萌哒!”我说站长,你说YO!爱你们么么哒~
回复

使用道具 举报

排名
3454
昨日变化
15

0

主题

54

帖子

729

积分

Rank: 11Rank: 11Rank: 11Rank: 11Rank: 11

UID
58011
好友
2
蛮牛币
789
威望
0
注册时间
2014-11-27
在线时间
245 小时
最后登录
2019-3-18
发表于 2018-12-14 16:48:37 | 显示全部楼层
赞,真是不错的

回复

使用道具 举报

8常驻蛮牛
5367/10000
排名
54
昨日变化

1

主题

539

帖子

5367

积分

Rank: 8Rank: 8

UID
13097
好友
1
蛮牛币
5482
威望
0
注册时间
2014-1-21
在线时间
1947 小时
最后登录
2019-3-19

活力之星

发表于 2018-12-14 17:12:45 | 显示全部楼层
效果很好

回复

使用道具 举报

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

0

主题

224

帖子

483

积分

Rank: 4

UID
220417
好友
0
蛮牛币
120
威望
0
注册时间
2017-5-3
在线时间
213 小时
最后登录
2019-3-6
发表于 2018-12-14 17:44:45 | 显示全部楼层
厉害,收藏了
[发帖际遇]: 面条大哥 捡了钱没交公 蛮牛币 降了 1 . 幸运榜 / 衰神榜

回复

使用道具 举报

7日久生情
2165/5000
排名
942
昨日变化
3

0

主题

410

帖子

2165

积分

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

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

回复

使用道具 举报

7日久生情
1831/5000
排名
1226
昨日变化
3

0

主题

205

帖子

1831

积分

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

UID
34048
好友
0
蛮牛币
587
威望
0
注册时间
2014-7-13
在线时间
664 小时
最后登录
2019-3-18
发表于 2018-12-14 19:48:09 | 显示全部楼层
收藏了!!

回复

使用道具 举报

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

0

主题

681

帖子

2195

积分

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

UID
135463
好友
0
蛮牛币
290
威望
0
注册时间
2016-1-23
在线时间
628 小时
最后登录
2019-3-19
发表于 2018-12-14 20:47:00 | 显示全部楼层
66666666666666666666666

回复 支持 反对

使用道具 举报

7日久生情
1793/5000
排名
1203
昨日变化
5

0

主题

514

帖子

1793

积分

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

UID
87577
好友
0
蛮牛币
6220
威望
0
注册时间
2015-3-31
在线时间
307 小时
最后登录
2019-3-19
发表于 2018-12-15 08:51:59 | 显示全部楼层
too good too strong!

回复 支持 反对

使用道具 举报

3偶尔光临
203/300
排名
12868
昨日变化
10

0

主题

63

帖子

203

积分

Rank: 3Rank: 3Rank: 3

UID
278108
好友
0
蛮牛币
21
威望
0
注册时间
2018-4-20
在线时间
70 小时
最后登录
2019-3-2
发表于 2018-12-15 09:49:06 | 显示全部楼层
666666666666666666666666666666

回复 支持 反对

使用道具 举报

3偶尔光临
284/300
排名
7411
昨日变化
5

7

主题

37

帖子

284

积分

Rank: 3Rank: 3Rank: 3

UID
160428
好友
0
蛮牛币
173
威望
0
注册时间
2016-8-3
在线时间
68 小时
最后登录
2019-2-17
发表于 2018-12-15 11:20:07 | 显示全部楼层
牛牛牛,真厉害,必须赞一个

回复 支持 反对

使用道具 举报

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

0

主题

47

帖子

3641

积分

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

UID
49596
好友
0
蛮牛币
8821
威望
0
注册时间
2014-10-17
在线时间
924 小时
最后登录
2019-3-19
QQ
发表于 2018-12-15 11:35:09 | 显示全部楼层
多谢分享了

回复

使用道具 举报

5熟悉之中
895/1000
排名
2535
昨日变化
10

0

主题

123

帖子

895

积分

Rank: 5Rank: 5

UID
276682
好友
0
蛮牛币
1773
威望
0
注册时间
2018-4-11
在线时间
204 小时
最后登录
2019-3-19
发表于 2018-12-15 11:51:41 | 显示全部楼层
效果很棒,受教了

回复

使用道具 举报

7日久生情
1524/5000
排名
3454
昨日变化
15

0

主题

886

帖子

1524

积分

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

UID
210390
好友
0
蛮牛币
1842
威望
0
注册时间
2017-3-7
在线时间
204 小时
最后登录
2019-3-19
发表于 2018-12-15 16:11:02 | 显示全部楼层

回复

使用道具 举报

7日久生情
1615/5000
排名
1849
昨日变化
1

2

主题

420

帖子

1615

积分

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

UID
213483
好友
0
蛮牛币
2647
威望
0
注册时间
2017-3-21
在线时间
473 小时
最后登录
2019-3-16
发表于 2018-12-15 20:09:50 | 显示全部楼层
赞!!!!!

回复

使用道具 举报

7日久生情
2640/5000
排名
2234
昨日变化
10

1

主题

1677

帖子

2640

积分

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

UID
119154
好友
0
蛮牛币
2717
威望
0
注册时间
2015-8-21
在线时间
334 小时
最后登录
2019-3-18
发表于 2018-12-15 20:42:12 | 显示全部楼层
谢谢楼主大大。

回复

使用道具 举报

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

本版积分规则

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