游戏蛮牛学习群(纯技术交流,不闲聊):159852603
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2288

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

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

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

[慕容小匹夫] 小随笔:写一个基于几何生成方法的描边效果

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

54

主题

297

帖子

3080

积分

Rank: 9Rank: 9Rank: 9

UID
44527
好友
61
蛮牛币
2621
威望
0
注册时间
2014-9-12
在线时间
578 小时
最后登录
2018-8-16

专栏作家活力之星认证开发者

发表于 2017-9-15 08:12:34 | 显示全部楼层 |阅读模式

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

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

x
0x00 前言
进入金秋九月之后,周末参加的社区活动反而多了起来。因此不像之前一样有富余的时间来写一些长文了,在考虑写点什么的时候突然想到了上一篇文章《利用GPU实现翻页效果》中利用shader实现了一个有趣的翻书的效果。那么这篇文章不妨也来效仿一下写一个shader来实现某种效果,只不过篇幅上可能更短、效果更简单,当然写作的时间也更碎片化了,所以《小随笔》似乎是一个不错的标题。
0x01 先来点理论知识
本文要实现的内容是一个很常见的描边效果。
(本文的模型来自:RTS Mini Legion Lich)
实现的思路来自《Real Time Rendering》的相关章节,即基于几何生成方法的描边。相关的理论内容已经有不少文章都提到过,这里简单概况一下就是在绘制模型时用两个pass,第一遍正常绘制模型;第二遍绘制则要将模型正面剔除——正面剔除的原因在下面的演示中我会告诉各位原因——接着在vs中修改顶点位置,将顶点沿着法线方向膨胀一定距离,然后在fs中将模型用纯色输出即可。

(图片来自:【翻译】西川善司「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密,前篇(2))
0x02 再来点实际操作
好了,现在就让我们来实现这个效果吧。
首先我们显然总共需要两个pass,但是我们先实现一个pass,将模型正常的绘制出来。
   
[AppleScript] 纯文本查看 复制代码
// 第一个pass用来渲染正常的模型
    Pass
    {
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag

        #include "UnityCG.cginc"

        struct appdata
        {
            float4 vertex : POSITION;
            float2 uv : TEXCOORD0;
        };

        struct v2f
        {
            float2 uv : TEXCOORD0;
            float4 vertex : SV_POSITION;
        };

        sampler2D _MainTex;
        float4 _MainTex_ST;

        v2f vert (appdata v)
        {
            v2f o;
            o.vertex = UnityObjectToClipPos(v.vertex);
            o.uv = TRANSFORM_TEX(v.uv, _MainTex);
            return o;
        }

        fixed4 frag (v2f i) : SV_Target
        {
            fixed4 col = tex2D(_MainTex, i.uv);
            return col;
        }
        ENDCG
经过这次绘制,屏幕上出现了正常的模型。
OK,下面第二个pass要来了。
由于这次我们需要使用法线信息,所以我们可以直接使用Unity内建的appdata_base作为vs的输入,它包含了顶点的法线信息。而由于这次vs和fs之间并没有数据的传递,因此vs只需要输出位置到SV_POSITION,而fs只需要输出纯色到SV_Target即可。
[AppleScript] 纯文本查看 复制代码
       float4 vert(appdata_base v) : SV_POSITION
        {
            ...
        }

        fixed4 frag() : SV_Target {
            return _OutlineColor;
        }
除此之外,在vs中我们不能直接使用在model空间的法线信息,因此还要将顶点的法线信息从model空间转换到clip空间。
[AppleScript] 纯文本查看 复制代码
            float3 normal = mul((float3x3) UNITY_MATRIX_MVP, v.normal);
然后将顶点沿着法线方向膨胀一定距离:
[AppleScript] 纯文本查看 复制代码
            pos.xy += _OutlineFactor * normal.xy;
嗯。现在的效果有点赞了。
最后再来看看为什么要打开正面剔除,如果没有正面剔除我们将看到的是一个颜色错误的模型。
就像下面这样:
好了,到此一个常见而又简单的效果就实现了。
demo地址:
游客,如果您要查看本帖隐藏内容请回复
祝各位早安~
-EOF-
最后打个广告,欢迎支持我的书《Unity 3D脚本编程》
https://item.jd.com/12035114.html


本帖被以下淘专辑推荐:


回复

使用道具 举报

5熟悉之中
546/1000
排名
5145
昨日变化
1

0

主题

103

帖子

546

积分

Rank: 5Rank: 5

UID
99868
好友
0
蛮牛币
121
威望
0
注册时间
2015-5-13
在线时间
189 小时
最后登录
2018-7-2
发表于 2017-9-15 09:40:23 | 显示全部楼层
谢谢分享,厉害!

回复

使用道具 举报

7日久生情
4969/5000
排名
53
昨日变化
1

0

主题

302

帖子

4969

积分

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

UID
14133
好友
0
蛮牛币
5521
威望
0
注册时间
2014-2-12
在线时间
1979 小时
最后登录
2018-8-20
发表于 2017-9-15 09:49:51 | 显示全部楼层
是个好的资源。

回复

使用道具 举报

5熟悉之中
757/1000
排名
3390
昨日变化
17

1

主题

41

帖子

757

积分

Rank: 5Rank: 5

UID
227495
好友
0
蛮牛币
1149
威望
0
注册时间
2017-6-19
在线时间
315 小时
最后登录
2018-8-20
发表于 2017-9-15 10:12:46 | 显示全部楼层
谢谢分享
[发帖际遇]: 一个袋子砸在了 我是一只鲨鱼 头上,我是一只鲨鱼 赚了 1 蛮牛币. 幸运榜 / 衰神榜

回复

使用道具 举报

5熟悉之中
573/1000
排名
4025
昨日变化
23

1

主题

63

帖子

573

积分

Rank: 5Rank: 5

UID
159593
好友
0
蛮牛币
1030
威望
0
注册时间
2016-7-30
在线时间
177 小时
最后登录
2018-8-20
发表于 2017-9-15 10:17:04 | 显示全部楼层
厉害了  好好学习一下
[发帖际遇]: 那谁你别跑呀 在论坛发帖时没有注意,被小偷偷去了 2 蛮牛币. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

7日久生情
2187/5000
排名
446
昨日变化
2

0

主题

33

帖子

2187

积分

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

UID
19658
好友
0
蛮牛币
4817
威望
0
注册时间
2014-3-31
在线时间
676 小时
最后登录
2018-8-20
发表于 2017-9-15 10:29:07 | 显示全部楼层
谢谢分享

回复

使用道具 举报

5熟悉之中
957/1000
排名
1919
昨日变化

0

主题

72

帖子

957

积分

Rank: 5Rank: 5

UID
124544
好友
0
蛮牛币
2015
威望
0
注册时间
2015-10-4
在线时间
237 小时
最后登录
2018-7-6
发表于 2017-9-15 10:31:09 | 显示全部楼层
谢谢分享

回复

使用道具 举报

3偶尔光临
228/300
排名
8371
昨日变化
1

2

主题

22

帖子

228

积分

Rank: 3Rank: 3Rank: 3

UID
159585
好友
0
蛮牛币
183
威望
0
注册时间
2016-7-30
在线时间
74 小时
最后登录
2017-12-1
发表于 2017-9-15 10:32:23 | 显示全部楼层
感谢分享

回复

使用道具 举报

8常驻蛮牛
7418/10000
排名
225
昨日变化
1

0

主题

3860

帖子

7418

积分

Rank: 8Rank: 8

UID
3215
好友
0
蛮牛币
293
威望
0
注册时间
2013-9-4
在线时间
1626 小时
最后登录
2018-8-20
发表于 2017-9-15 10:33:45 | 显示全部楼层
ddddddddddddddddddddddd
[发帖际遇]: 一个袋子砸在了 zhaoXH 头上,zhaoXH 赚了 1 蛮牛币. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

4四处流浪
498/500
排名
4720
昨日变化
2

1

主题

64

帖子

498

积分

Rank: 4

UID
23872
好友
0
蛮牛币
1069
威望
0
注册时间
2014-5-5
在线时间
153 小时
最后登录
2018-7-16
QQ
发表于 2017-9-15 10:39:17 | 显示全部楼层
感谢分享,学习

回复

使用道具 举报

2初来乍到
117/150
排名
18696
昨日变化
5

0

主题

36

帖子

117

积分

Rank: 2Rank: 2

UID
209237
好友
0
蛮牛币
233
威望
0
注册时间
2017-3-1
在线时间
53 小时
最后登录
2018-4-28
发表于 2017-9-15 10:44:28 | 显示全部楼层
楼主大人好棒,感谢

回复 支持 反对

使用道具 举报

7日久生情
2579/5000
排名
404
昨日变化

1

主题

146

帖子

2579

积分

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

UID
80392
好友
0
蛮牛币
1211
威望
0
注册时间
2015-3-16
在线时间
870 小时
最后登录
2018-8-2
发表于 2017-9-15 11:00:13 | 显示全部楼层
貌似很不错的东西

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1016/1500
排名
3316
昨日变化
2

1

主题

371

帖子

1016

积分

Rank: 6Rank: 6Rank: 6

UID
122160
好友
1
蛮牛币
1669
威望
0
注册时间
2015-9-10
在线时间
236 小时
最后登录
2018-8-1
发表于 2017-9-15 11:03:25 | 显示全部楼层
感谢分享

回复

使用道具 举报

7日久生情
3481/5000
排名
94
昨日变化

3

主题

110

帖子

3481

积分

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

UID
23497
好友
7
蛮牛币
7005
威望
0
注册时间
2014-4-30
在线时间
992 小时
最后登录
2018-8-20
发表于 2017-9-15 11:25:58 | 显示全部楼层
谢谢分享!!!!!!

回复

使用道具 举报

6蛮牛粉丝
1213/1500
排名
1661
昨日变化
1

0

主题

63

帖子

1213

积分

Rank: 6Rank: 6Rank: 6

UID
236626
好友
1
蛮牛币
2417
威望
0
注册时间
2017-8-9
在线时间
428 小时
最后登录
2018-8-17
发表于 2017-9-15 11:35:54 | 显示全部楼层
喔喔喔喔 Thank You~

回复 支持 反对

使用道具 举报

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

本版积分规则

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