开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:1587

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

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

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

[winning11jc] 冰块渲染

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

9

主题

23

帖子

360

积分

Rank: 9Rank: 9Rank: 9

UID
164607
好友
3
蛮牛币
522
威望
0
注册时间
2016-8-28
在线时间
226 小时
最后登录
2017-3-1

专栏作家

发表于 2016-11-8 18:10:35 | 显示全部楼层 |阅读模式

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

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

x


这次需要在场景中增加一个冰雕的模型,没有找到现成合适能用的,所以只能新写一个了,在制作效果之前首先要理清思路。

首先我参考了 [Real-Time Approximations to Subsurface Scattering][link1],这篇 [GPU Gem][link2] 的文章介绍了一种近似次表面散射的方法,其中使用了 Wrap-Diffuse 来避免暗部过黑的问题,使用实时渲染的一张 Depth-Map 来判定物体的厚度,从而控制光的穿透程度。

我们要实现的效果和文章中介绍的有一定的相似,但又不是完全一样,最大的不同是文章中使用厚度来决定光线穿透物体的程度,而一块纯净的冰块并不是这样的,它的光学属性有点像玻璃,光折射进入内部再折射出去,在这过程中光有轻微的折射但是完全穿透,几乎不存在厚度越大衰减越大的效果。而冰块的边缘部分由于凹凸不平、密度也不像中心部分那么紧致,光会随机折射,最终表现为环境光和次表面散射的混合。冰表面的另一个现象是由于融化形成的水在光的照射下,如果角度合适会正好反射到眼中,看到一点一点的闪光。

根据以上这些的分析,思路就渐渐清晰了。

[link1]: http://http.developer.nvidia.com/GPUGems/gpugems_ch16.html

[link2]: http://developer.nvidia.com/object/gpu_gems_home.html

根据上文中分析渲染出来的效果
1.gif
2.jpg


从图中可以看出,最外层的一层蓝绿色为直接折射/反射的环境;中间层蓝色为近似的次表面散射(由于环境光照更多的是蓝色);中间部分(头部、两肩)光大部分直接穿透冰块,可以清晰的看到冰块背面的物体;随机的闪烁点为融化的水造成的。

以上是总体的介绍,下面说说实现上的一些细节:

如果完全按照 [Real-Time Approximations to Subsurface Scattering][link1] 中的实现方式,光的穿透方式并不是我们想要的,所以在此基础上进行了改进。我们使用了一张 Thickness-Map 配合 NdotV 的方式来决定光的穿透程度。对这两个进行融合,最终得到光的穿透程度。

Thickness-Map。黑色表示穿透强,白色表示穿透弱,这是一张随机的 Perlin-Noise。
3.png

NdotV 就是法线和视线的点乘。白色表示穿透强,黑色表示穿透弱。
4.jpg


冰面的闪烁参考的是 [Winter Shader](https://www.assetstore.unity3d.com/en/#!/content/13927) 这个插件中的实现方式。改进之处在于,我将渲染步骤移动到了 PostEffect 部分,这样经过 PostEffect 的处理,就避免的闪烁点很明显的像素化问题。

以上就是所有用到的知识点,着色器代码就不贴在这里了,因为还很初级其中有很多 hack 的地方并不方便解释,是不断调整后的经验值。但是所有问题都已经在上文中说清楚了。最后说明下,上文中描述的冰块的这种光学特性只是为了渲染而假设出来的,并不符合物理特性,如果想要了解正确的物理属性应该查看专业的文献。



回复

使用道具 举报

4四处流浪
360/500
排名
5330
昨日变化
33

1

主题

50

帖子

360

积分

Rank: 4

UID
121885
好友
0
蛮牛币
349
威望
0
注册时间
2015-9-9
在线时间
148 小时
最后登录
2017-3-1
QQ
发表于 2016-11-9 09:44:21 | 显示全部楼层
如果能放源码就爱死你了~

回复 支持 1 反对 0

使用道具 举报

5熟悉之中
983/1000
排名
1367
昨日变化
4

1

主题

94

帖子

983

积分

Rank: 5Rank: 5

UID
88485
好友
0
蛮牛币
2188
威望
0
注册时间
2015-4-1
在线时间
260 小时
最后登录
2017-2-28
发表于 2016-11-9 10:13:21 | 显示全部楼层
除了颜色太蓝,但冰块感觉很好

回复 支持 反对

使用道具 举报

5熟悉之中
530/1000
排名
4557
昨日变化
74

0

主题

106

帖子

530

积分

Rank: 5Rank: 5

UID
34048
好友
0
蛮牛币
691
威望
0
注册时间
2014-7-13
在线时间
226 小时
最后登录
2017-3-1
发表于 2016-11-9 10:16:47 | 显示全部楼层
左央 发表于 2016-11-9 09:44
如果能放源码就爱死你了~

+1                                          tongqiu

回复 支持 反对

使用道具 举报

排名
1208
昨日变化
6

5

主题

319

帖子

1294

积分

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

UID
35634
好友
5
蛮牛币
1788
威望
0
注册时间
2014-7-22
在线时间
294 小时
最后登录
2017-1-19
QQ
发表于 2016-11-9 11:46:27 | 显示全部楼层
关键这个人头用的我瘆得慌

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1195/1500
排名
801
昨日变化
3

1

主题

35

帖子

1195

积分

Rank: 6Rank: 6Rank: 6

UID
100193
好友
1
蛮牛币
2850
威望
0
注册时间
2015-5-14
在线时间
293 小时
最后登录
2017-3-1
发表于 2016-11-9 12:50:33 | 显示全部楼层
还是不懂,到时候再细细研究

回复 支持 反对

使用道具 举报

5熟悉之中
767/1000
排名
2628
昨日变化
23

3

主题

216

帖子

767

积分

Rank: 5Rank: 5

UID
48148
好友
1
蛮牛币
1435
威望
0
注册时间
2014-10-9
在线时间
184 小时
最后登录
2017-3-1
发表于 2016-11-10 08:19:32 | 显示全部楼层
厉害了我的个

回复

使用道具 举报

7日久生情
1743/5000
排名
581
昨日变化
3

1

主题

373

帖子

1743

积分

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

UID
27356
好友
1
蛮牛币
2554
威望
0
注册时间
2014-5-30
在线时间
359 小时
最后登录
2017-3-1
发表于 2016-11-10 09:46:49 | 显示全部楼层
我只是想知道你这个着色器支持 移动平台吗?

前几年有个国外的 着色器“套装”(就是带绿色骷髅的那个)里面金属、宝石、陶瓷、冰块。。。效果都很漂亮
可惜不更新了、也对移动平台支持的很糟糕。
[发帖际遇]: 一个袋子砸在了 tf107 头上,tf107 赚了 1 蛮牛币. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

排名
12798
昨日变化
17

9

主题

23

帖子

360

积分

Rank: 9Rank: 9Rank: 9

UID
164607
好友
3
蛮牛币
522
威望
0
注册时间
2016-8-28
在线时间
226 小时
最后登录
2017-3-1

专栏作家

 楼主| 发表于 2016-11-10 12:28:48 | 显示全部楼层
tf107 发表于 2016-11-10 09:46
我只是想知道你这个着色器支持 移动平台吗?

前几年有个国外的 着色器“套装”(就是带绿色骷髅的那个)里 ...

可以的。
你说的那个插件叫什么名字?学习下。

回复 支持 反对

使用道具 举报

2初来乍到
131/150
排名
9863
昨日变化
15

4

主题

20

帖子

131

积分

Rank: 2Rank: 2

UID
168518
好友
0
蛮牛币
168
威望
0
注册时间
2016-9-14
在线时间
47 小时
最后登录
2016-12-28
发表于 2016-11-10 16:46:49 | 显示全部楼层
我是来学学大神用剩下的
[发帖际遇]: 焱枫 发帖时在路边捡到 1 蛮牛币,偷偷放进了口袋. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

5熟悉之中
673/1000
排名
2439
昨日变化
7

0

主题

54

帖子

673

积分

Rank: 5Rank: 5

UID
32590
好友
0
蛮牛币
594
威望
0
注册时间
2014-7-5
在线时间
229 小时
最后登录
2017-2-28
发表于 2016-11-10 20:50:47 | 显示全部楼层
Depth-Map是从光源处渲染的?

回复 支持 反对

使用道具 举报

排名
12798
昨日变化
17

9

主题

23

帖子

360

积分

Rank: 9Rank: 9Rank: 9

UID
164607
好友
3
蛮牛币
522
威望
0
注册时间
2016-8-28
在线时间
226 小时
最后登录
2017-3-1

专栏作家

 楼主| 发表于 2016-11-11 07:25:46 | 显示全部楼层
Crow 发表于 2016-11-10 20:50
Depth-Map是从光源处渲染的?

那篇文章中确实是从光源出渲染,但是我并没有那么做,主要是渲染一张 RenderTexture 会增加渲染压力,所以使用其他方法近似。

回复 支持 反对

使用道具 举报

7日久生情
1743/5000
排名
581
昨日变化
3

1

主题

373

帖子

1743

积分

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

UID
27356
好友
1
蛮牛币
2554
威望
0
注册时间
2014-5-30
在线时间
359 小时
最后登录
2017-3-1
发表于 2016-11-11 09:41:52 | 显示全部楼层
winning11jc 发表于 2016-11-10 12:28
可以的。
你说的那个插件叫什么名字?学习下。

名字记不清了。但是“外包装”的图片很明显
就是白色背景+金属立体的文字+个金属小机器娃娃...好像还有骷髅。。。

回复 支持 反对

使用道具 举报

4四处流浪
316/500
排名
6603
昨日变化
115

2

主题

81

帖子

316

积分

Rank: 4

UID
182321
好友
0
蛮牛币
308
威望
0
注册时间
2016-11-9
在线时间
113 小时
最后登录
2017-3-1
发表于 2016-11-11 09:44:17 | 显示全部楼层
奶一口,让楼主永远保持满血状态。

回复 支持 反对

使用道具 举报

5熟悉之中
673/1000
排名
2439
昨日变化
7

0

主题

54

帖子

673

积分

Rank: 5Rank: 5

UID
32590
好友
0
蛮牛币
594
威望
0
注册时间
2014-7-5
在线时间
229 小时
最后登录
2017-2-28
发表于 2016-11-11 10:20:43 | 显示全部楼层
winning11jc 发表于 2016-11-11 07:25
那篇文章中确实是从光源出渲染,但是我并没有那么做,主要是渲染一张 RenderTexture 会增加渲染压力,所 ...

我看错了,以为你也渲染了一张深度图
这效果很棒,那个“近似的次表面散射”有什么可以参考的吗?

回复 支持 反对

使用道具 举报

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

本版积分规则

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