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

扫一扫,访问微社区

开发者专栏

关注:2174

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

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

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

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

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

46

主题

289

帖子

2969

积分

Rank: 9Rank: 9Rank: 9

UID
44527
好友
55
蛮牛币
2485
威望
0
注册时间
2014-9-12
在线时间
555 小时
最后登录
2018-3-28

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

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

0

主题

103

帖子

536

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

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

0

主题

295

帖子

4681

积分

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

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

回复

使用道具 举报

5熟悉之中
564/1000
排名
4064
昨日变化

0

主题

33

帖子

564

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

5熟悉之中
556/1000
排名
3919
昨日变化
21

1

主题

62

帖子

556

积分

Rank: 5Rank: 5

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

回复 支持 反对

使用道具 举报

7日久生情
1933/5000
排名
536
昨日变化
3

0

主题

31

帖子

1933

积分

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

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

回复

使用道具 举报

5熟悉之中
929/1000
排名
1879
昨日变化
2

0

主题

70

帖子

929

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

3偶尔光临
228/300
排名
7936
昨日变化
5

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常驻蛮牛
7065/10000
排名
215
昨日变化

0

主题

3687

帖子

7065

积分

Rank: 8Rank: 8

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

回复 支持 反对

使用道具 举报

4四处流浪
461/500
排名
4803
昨日变化
5

1

主题

58

帖子

461

积分

Rank: 4

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

回复

使用道具 举报

2初来乍到
116/150
排名
17868
昨日变化
21

0

主题

36

帖子

116

积分

Rank: 2Rank: 2

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

回复 支持 反对

使用道具 举报

7日久生情
2418/5000
排名
400
昨日变化
2

1

主题

138

帖子

2418

积分

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

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

回复 支持 反对

使用道具 举报

5熟悉之中
961/1000
排名
3415
昨日变化
4

1

主题

367

帖子

961

积分

Rank: 5Rank: 5

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

回复

使用道具 举报

7日久生情
3192/5000
排名
102
昨日变化
1

2

主题

97

帖子

3192

积分

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

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

回复

使用道具 举报

5熟悉之中
879/1000
排名
2481
昨日变化
9

0

主题

56

帖子

879

积分

Rank: 5Rank: 5

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

回复 支持 反对

使用道具 举报

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

本版积分规则

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