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

扫一扫,访问微社区

开发者专栏

关注:1963

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

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

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

[李剑英] 剑英陪你玩转图形学 (四)流光效果

  [复制链接]  [移动端链接]
抢楼 抢楼 本帖为抢楼帖,欢迎抢楼! 
排名
10211
昨日变化
2

34

主题

182

帖子

1235

积分

Rank: 9Rank: 9Rank: 9

UID
18367
好友
45
蛮牛币
1994
威望
0
注册时间
2014-3-20
在线时间
124 小时
最后登录
2017-6-24

认证开发者

发表于 2015-10-27 09:25:51 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 lights 于 2014-10-27 13:24 编辑

很多同学对shader的了解简直令人发指,不得不承认我之前的文章很失败,没有达到指引效果。
经过我深深的反思,本系列设定起点还是太高,仅仅着眼于本质不能让很多同学收获学习图形学的实效。
我已经反省过了,让这个系列更贴近初学者,你跟随着这篇东西去一步步操作,就能得到一些实际可用的Shader。
还是使用Unity作为测试工具,因为用他的人的确很多。
在这个小白丛生的圈子里说到图形学,大部分人都告诉你shader,我对此早已吐槽无力。
也只好放弃、随他去吧。该说的话之前的系列已经讲的很多,现在就从一个常用效果说起。
先介绍一个蛮常用的效果
流光效果
从画法的角度看,流光效果的成本很低,一张流光图,一张过滤图,一个渲染遍,即可实现效果。

但是效果很令人印象深刻。
001.png        002.png

流光效果可用于2D或者3D

用于3D的比如角色盔甲上流动的光斑

003.png


用于2D的例子比如在按钮上弄个飘过的亮光

004.gif


比如炉石的卡牌
005.gif

这些都是流光效果。其中炉石的卡牌流光效果比较复杂,多层、带过滤、多种流动形式。
其实两张图的shader,我们在《剑英陪你玩转图形学二》中已经展示了几个。而流光,关键在于流动。
在开始写一个简单的流光效果之前,我们先普及一些shader的知识


这是一个新建的shader,我只是添加了一些注释
006.png

接下去,我们要在此基础上,一步步修改加上流光的效果。这里我们使用 surfaceshadersurfaceshaderunity的一个特别设计。
他是pixelshader的一部分,准确的说,前半部分。
Surfaceshader自动生成一个传统的vertexshaderpixelshader,根据你所指定的光照模型。
因为大部分的shader并不干涉光照模型,而只是在像素阶段做一些叠加、混合什么的。
Surfaceshader巧妙的让你可以只关心这一部分,学习的时候,只关注一部分,恰恰是个优点。

随便准备两张图片,一张底图,一张流光图

007.png     008.png 这里顺便给出一个快速制作流光图的ps操作方法。看图就懂。
其中logo01是底图,无所谓用什么东西,最好选择一张比较暗的图,我们准备采用加法让他变亮,暗一点效果更明显。
我们想使用flow图的alpha通道,flow图延x方向运动,循环往复。至少要让flow图的一个半边全黑,因为加法全黑等于没加。
当使用这半边时完全不加亮

009.png

Flow贴图的设置这里要特别说明三个地方
1.      Alpha from Grayscale 从图片的灰度生成alpha通道,直接制作alpha通道不直观,灰度图很直观。
这个选项就是让你用一张直观的灰度图生成通道。
你可以不用这个选项,而是自己提供一个有alpha通道的图片
2.      wrap Mode当uv超出0 1 范围是的取值方法,我们需要让这张图循环往复,就是利用wrap mode repeat来实现的。
必须使用这个选项
3.      Format,因为这张图我们只需要一个通道,而且不适合压缩,没有比Alpha8更适合的存储格式了
可选,只是为了节省内存容量


然后流光Shader 新手拈来,有注释的部分是在空shader基础上增加的
010.png

稍微解释一下原理,

把一张贴图的四个顶点的uv连成一个红框,是这样的。

011.png

把每个顶点的uv.x/2 是这样的
012.png
uv.x 再加上同一个值是这样的
013.png

我们就是要用加上的这个值,对这个红框做动画

效果如下
014.png

015.png

拖动shader下面的拉杆就可以看到循环效果,用一个脚本去驱动这个参数做动画,就有流光效果了。
然后让我们做一点改变,动画这个东西不用脚本也能做。

因为shaderlab里面有默认参数_Time.y  他等于Time.timeSinceLevelLoad

016.png
经过Step02的修改,这个材质可以自动的动起来,不需要代码驱动。
然后我们可以再改一点点,让他变成透明的

017.png
也可以改成不受光影响的
018.png

019、.png

然后,最后的一步,让我们引入过滤的概念。

加入一张过滤图,和流光图一样设置
020.png

让只在这张图白色部分叠加流光

Shader如下
021.png

022.png

对比效果如图,前排无过滤,后排有过滤
可以在线看效果http://lightszero.github.io/shader_01/shader_01.html
项目源代码在这里https://github.com/lightszero/BlockFun/tree/master/unity/shader_btw
这里的流光效果仅仅适用于2D,接下来我们要建立一个更适合3D物体的流光效果。
大家也看到了,上面的球体流光效果一塌糊涂,那么用于3D的流光效果有什么不同呢,我们慢慢往下说。
2D的流光效果(或者说简单面片,uv均匀分布)直接用UV扰动即可,而3D模型的UV很多情况下分布的一塌糊涂,尤其是接近球体的模型
从uv这个角度考虑会进入一个死胡同,流光是一种反射,一种环境反射。那么自然是适合用一张cubemap,用法线去采样了。
这样做自然没有问题,用cubemap当然没问题,或者可以用更加节省的方式,极坐标贴图。
Cubemap是用六张贴图围成一个盒子,极坐标贴图是只用一个圆形贴图。
可是,流光效果只是简单的光亮,使用平面贴图还是环境贴图其实没有什么区别

我们只需要他按照法线分布,产生一种在模型表面移动的效果

001.png 准备一张自循环贴图
023.png



024.png

效果如下
025.png

用于复杂的模型时效果更好

最后给3D流光加上过滤功能的shader我就不提供了,大家自己研究一下吧。





unity光流动;炉石 unity;unity怎么流动一次;炉石传说 unity;unity 炉石传说

评分

参与人数 11鲜花 +25 收起 理由
wsy_double + 1 赞一个!
y876265603 + 5 赞一个!
连山归藏 + 1 赞一个!
tiantangzuo + 1 很给力!
shicheju1991 + 1 赞一个!
黑翼∮天使 + 5 很给力!
lht398312363 + 2 李总又施法了!
niqqnet + 2 赞一个!
wangxiaoxiao + 1 亮了shader就更好
admin + 1 非常好!
单车夜行者 + 5 很给力!

查看全部评分


回复

使用道具 举报

5熟悉之中
574/1000
排名
3386
昨日变化
4

5

主题

138

帖子

574

积分

Rank: 5Rank: 5

UID
35794
好友
3
蛮牛币
1292
威望
0
注册时间
2014-7-23
在线时间
109 小时
最后登录
2017-10-13
发表于 2015-10-27 09:33:58 | 显示全部楼层
感谢老师,会一直支持您,给我们这些新手带来知识!再次感谢

回复

使用道具 举报

排名
2827
昨日变化
2

0

主题

134

帖子

729

积分

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

UID
25672
好友
1
蛮牛币
2386
威望
0
注册时间
2014-5-19
在线时间
187 小时
最后登录
2017-1-11
发表于 2015-10-27 09:34:52 | 显示全部楼层
这个厉害的。。。必须赞起啊

回复

使用道具 举报

5熟悉之中
670/1000
排名
4507
昨日变化

12

主题

250

帖子

670

积分

Rank: 5Rank: 5

UID
27738
好友
3
蛮牛币
720
威望
0
注册时间
2014-6-2
在线时间
154 小时
最后登录
2017-10-30
发表于 2015-10-27 09:56:13 | 显示全部楼层
大神带我飞啊!灰啊飞啊

回复

使用道具 举报

排名
6146
昨日变化
1

0

主题

53

帖子

260

积分

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

UID
44262
好友
0
蛮牛币
214
威望
0
注册时间
2014-9-10
在线时间
40 小时
最后登录
2015-8-22
发表于 2015-10-27 09:59:29 | 显示全部楼层
太棒了,学习到啦太棒了,学习到啦太棒了,学习到啦太棒了,学习到啦

回复

使用道具 举报

6蛮牛粉丝
1235/1500
排名
656
昨日变化
4

0

主题

20

帖子

1235

积分

Rank: 6Rank: 6Rank: 6

UID
46745
好友
0
蛮牛币
7414
威望
0
注册时间
2014-9-26
在线时间
109 小时
最后登录
2017-11-19
发表于 2015-10-27 10:00:19 | 显示全部楼层

说好的视频呢?????

回复

使用道具 举报

5熟悉之中
900/1000
排名
2275
昨日变化

0

主题

180

帖子

900

积分

Rank: 5Rank: 5

UID
24721
好友
0
蛮牛币
1143
威望
0
注册时间
2014-5-12
在线时间
222 小时
最后登录
2016-4-8
QQ
发表于 2015-10-27 10:07:35 | 显示全部楼层
很好很强大,大神多多发帖啊

回复

使用道具 举报

排名
1900
昨日变化
1

12

主题

308

帖子

1175

积分

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

UID
6178
好友
6
蛮牛币
3749
威望
0
注册时间
2013-10-22
在线时间
227 小时
最后登录
2017-11-8

VIP社区QQ达人

发表于 2015-10-27 10:34:18 | 显示全部楼层
项目源码在哪里????

回复

使用道具 举报

7日久生情
3073/5000
排名
161
昨日变化

3

主题

482

帖子

3073

积分

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

UID
32341
好友
2
蛮牛币
8081
威望
0
注册时间
2014-7-3
在线时间
732 小时
最后登录
2017-4-9
发表于 2015-10-27 10:38:20 | 显示全部楼层
又酷又炫的功能,感谢分享,学习了

回复

使用道具 举报

5熟悉之中
850/1000
排名
1875
昨日变化
2

0

主题

110

帖子

850

积分

Rank: 5Rank: 5

UID
14002
好友
0
蛮牛币
991
威望
0
注册时间
2014-2-10
在线时间
154 小时
最后登录
2017-11-14
发表于 2015-10-27 10:51:36 | 显示全部楼层
楼主太强大了,太赞了

回复

使用道具 举报

3偶尔光临
241/300
排名
7905
昨日变化
4

1

主题

47

帖子

241

积分

Rank: 3Rank: 3Rank: 3

UID
27966
好友
13
蛮牛币
1115
威望
0
注册时间
2014-6-3
在线时间
75 小时
最后登录
2016-9-27

VIP

发表于 2015-10-27 12:29:40 | 显示全部楼层
本帖最后由 i92076 于 2014-10-27 12:33 编辑

看帖必回有木有,干货区还不让水,嗯,教程出到四真的不容易啊希望继续

回复

使用道具 举报

5熟悉之中
620/1000
排名
3249
昨日变化

0

主题

104

帖子

620

积分

Rank: 5Rank: 5

UID
15238
好友
0
蛮牛币
936
威望
0
注册时间
2014-2-22
在线时间
159 小时
最后登录
2017-11-12
发表于 2015-10-27 12:37:32 | 显示全部楼层
剑英这个方法不能调流光的颜色、角度、大小,速率~呵呵

也给我很好的思路,对流光pic进行采样,在项目上流光效果表现上很灵活:可以是水纹,可以圈圈,不错,顶起~

回复

使用道具 举报

排名
10211
昨日变化
2

34

主题

182

帖子

1235

积分

Rank: 9Rank: 9Rank: 9

UID
18367
好友
45
蛮牛币
1994
威望
0
注册时间
2014-3-20
在线时间
124 小时
最后登录
2017-6-24

认证开发者

 楼主| 发表于 2015-10-27 13:22:28 | 显示全部楼层
ChallenKing 发表于 2014-10-27 10:34
项目源码在哪里????

https://github.com/lightszero/BlockFun/tree/master/unity/shader_btw
sorry,发漏了

回复

使用道具 举报

排名
10211
昨日变化
2

34

主题

182

帖子

1235

积分

Rank: 9Rank: 9Rank: 9

UID
18367
好友
45
蛮牛币
1994
威望
0
注册时间
2014-3-20
在线时间
124 小时
最后登录
2017-6-24

认证开发者

 楼主| 发表于 2015-10-27 13:22:30 | 显示全部楼层
ChallenKing 发表于 2014-10-27 10:34
项目源码在哪里????

https://github.com/lightszero/BlockFun/tree/master/unity/shader_btw
sorry,发漏了

回复

使用道具 举报

排名
10211
昨日变化
2

34

主题

182

帖子

1235

积分

Rank: 9Rank: 9Rank: 9

UID
18367
好友
45
蛮牛币
1994
威望
0
注册时间
2014-3-20
在线时间
124 小时
最后登录
2017-6-24

认证开发者

 楼主| 发表于 2015-10-27 13:22:33 | 显示全部楼层
ChallenKing 发表于 2014-10-27 10:34
项目源码在哪里????

https://github.com/lightszero/BlockFun/tree/master/unity/shader_btw
sorry,发漏了

回复

使用道具 举报

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

本版积分规则

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