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

扫一扫,访问微社区

开发者专栏

关注:1907

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

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

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

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

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

43

主题

286

帖子

2938

积分

Rank: 9Rank: 9Rank: 9

UID
44527
好友
55
蛮牛币
2450
威望
0
注册时间
2014-9-12
在线时间
552 小时
最后登录
2017-10-18

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

发表于 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熟悉之中
526/1000
排名
4478
昨日变化
1

0

主题

102

帖子

526

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

7日久生情
4158/5000
排名
52
昨日变化

0

主题

273

帖子

4158

积分

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

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

回复

使用道具 举报

3偶尔光临
269/300
排名
6508
昨日变化
1

0

主题

25

帖子

269

积分

Rank: 3Rank: 3Rank: 3

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

回复

使用道具 举报

3偶尔光临
250/300
排名
7054
昨日变化
3

0

主题

42

帖子

250

积分

Rank: 3Rank: 3Rank: 3

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

回复 支持 反对

使用道具 举报

7日久生情
1657/5000
排名
598
昨日变化
2

0

主题

26

帖子

1657

积分

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

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

回复

使用道具 举报

5熟悉之中
619/1000
排名
2745
昨日变化

0

主题

53

帖子

619

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

3偶尔光临
181/300
排名
8598
昨日变化
94

2

主题

20

帖子

181

积分

Rank: 3Rank: 3Rank: 3

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

回复

使用道具 举报

8常驻蛮牛
5701/10000
排名
245
昨日变化

0

主题

2831

帖子

5701

积分

Rank: 8Rank: 8

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

回复 支持 反对

使用道具 举报

4四处流浪
433/500
排名
4506
昨日变化

0

主题

50

帖子

433

积分

Rank: 4

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

回复

使用道具 举报

排名
17344
昨日变化
5

0

主题

29

帖子

87

积分

Rank: 2Rank: 2

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

回复 支持 反对

使用道具 举报

7日久生情
2241/5000
排名
408
昨日变化

1

主题

135

帖子

2241

积分

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

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

回复 支持 反对

使用道具 举报

5熟悉之中
578/1000
排名
4885
昨日变化
1

0

主题

217

帖子

578

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

7日久生情
2803/5000
排名
119
昨日变化
1

0

主题

81

帖子

2803

积分

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

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

回复

使用道具 举报

3偶尔光临
292/300
排名
6642
昨日变化
76

0

主题

25

帖子

292

积分

Rank: 3Rank: 3Rank: 3

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

回复 支持 反对

使用道具 举报

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

本版积分规则

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