【游戏技术群】959392658  【游戏出海群】12067810
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2422

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

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

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

[士郎] 低多边形化风格——边缘检测、德洛内剖分及其他

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

7318

主题

7860

帖子

3万

积分

Rank: 16

UID
1231
好友
185
蛮牛币
8818
威望
30
注册时间
2013-7-29
在线时间
3742 小时
最后登录
2019-2-22

社区QQ达人活力之星原创精华达人突出贡献奖财富之证游戏蛮牛QQ群会员蛮牛妹VIP

发表于 2018-11-12 11:41:24 | 显示全部楼层 |阅读模式

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

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

x
最近看了这个如何使用JavaScript生成lowpoly风格图像?,了解到了德洛内三角形的相关知识,迅速让我想到是否可以将这些内容应用到我目前自学的项目中来。因此尝试学习了该课题,并考虑在自学的项目中将课题应用,以解决素材偏少的问题

以下是使用到的图片:
1.jpg


边缘检测
边缘检测使用到了《unity shader入门精要》[1]中提到的Sobel算子
   
[AppleScript] 纯文本查看 复制代码
 private float Sobel(int x, int y)
    {
        float Gx = 0;
        Gx += Luminance(x - 1, y - 1) * -1;
        Gx += Luminance(x - 1, y) * -2;
        Gx += Luminance(x - 1, y + 1) * -1;
        Gx += Luminance(x + 1, y - 1) * 1;
        Gx += Luminance(x + 1, y) * 2;
        Gx += Luminance(x + 1, y + 1) * 1;
        float Gy = 0;
        Gy += Luminance(x - 1, y - 1) * 1;
        Gy += Luminance(x, y - 1) * 2;
        Gy += Luminance(x + 1, y - 1) * 1; 
        Gy += Luminance(x - 1, y + 1) * -1;
        Gy += Luminance(x, y + 1) * -2;
        Gy += Luminance(x + 1, y + 1) * -1;
        return Mathf.Sqrt(Gx * Gx + Gy * Gy);//出于性能考虑可以用 Mathf.Abs(Gx) + Mathf.Abs(Gy);
    }

当然,处于不同的表现、性能、采样上的需求,也可以使用规模不等的其他算子计算卷积核结果。
设定门槛为1之后,图片变成了这样:


2.jpg



点的选取
点的选取分为两部分:边缘和背景。之所以要分为两部分选点,是要尽量避免边缘之间出现大块的空白,致使三角网出现交错锐利的形状。
以下是边缘采样门槛0.9f、背景采样率0.999f的分布图:


3.jpg


德洛内三角网
关于德洛内三角形,我参考并简化了mattatz[2]所使用的逐点插入法,其实最开始我参考的是[3]中的写法,但是经过我反复推算,在某些情况下有问题,在写完传统的逐点插入法然后再次阅读此文的时候,愕然发现文末已经有人评论:


大家注意下, 楼主提供的中文伪代码有一处问题: "对edge buffer进行去重" 表意不明. 经测试, 准确的做法应为, "将 edge buffer 中重复的 edge 全部去除(注意并非只是将重复的部分去掉, 而是将发生重复的 edge 全部去除, 即不仅去除重复的部分, 原本的 edge 也要去掉).


4.jpg

色彩
当我们拥有了从Vector2[]生成的诸多三角形,接下来的事情就是要将三角形实例化。由于我还没有写过软渲染器,所以对于如何渲染抗锯齿的图元目前还只停留在用蒙特卡洛方法大量采样的想法上。而一个图形动辄数百个三角形,十几万像素,如果每个像素都要这么做实在是太费时间,因此时间无多的我决定先将三角形导出成Mesh。



三角面片只使用顶点色着色,一个三角面片的颜色来源于其中点的颜色。


5.jpg

更多思考
由于时间关系,我只是草草对边缘检测和德洛内三角剖分进行了浅尝辄止的研究,本课题也仅停留在刚刚能用的地步,有巨大的改进空间。
第一,是将低面数化后的结果以图像的形式输出,这一块必然要用到光栅化的渲染管线知识,我计划之后参考


第二,是改进选点算法,可以看到,风格化后,原本均匀的树枝变得崎岖不平。目前我想到了两个方向,一,将图像尺寸压缩到原本的几分之一进行选点,保证点与点之间密度不至于过于离谱;二,取消背景选点,将图像简化成若干色阶,再做边缘检测,保证边缘附近的点不至于被背景选点所破坏形成的轮廓。
第三,使用更好的剖分算法,目前的插入算法中,对于每个新增的点都会遍历已生成的所有三角形,致使高点数下运算时间过长。
以下是Github地址,若有时间我会继续琢(mo)磨该课题





[1]《Unity Shader入门精要》参考文献


知乎@破晓



跟我念“站长妹纸萌萌哒!”我说站长,你说YO!爱你们么么哒~
回复

使用道具 举报

排名
25248
昨日变化
3

0

主题

48

帖子

73

积分

Rank: 2Rank: 2

UID
302397
好友
1
蛮牛币
75
威望
0
注册时间
2018-11-4
在线时间
9 小时
最后登录
2018-12-18
发表于 2018-11-12 12:10:18 | 显示全部楼层
边缘检测和德洛内三角剖分

回复 支持 反对

使用道具 举报

排名
31226
昨日变化
12

0

主题

20

帖子

32

积分

Rank: 1

UID
302421
好友
1
蛮牛币
93
威望
0
注册时间
2018-11-4
在线时间
2 小时
最后登录
2018-11-23
发表于 2018-11-12 15:49:09 | 显示全部楼层
边缘检测、德洛内剖

回复 支持 反对

使用道具 举报

7日久生情
1880/5000
排名
1961
昨日变化
3

30

主题

702

帖子

1880

积分

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

UID
214924
好友
3
蛮牛币
13981
威望
0
注册时间
2017-3-28
在线时间
458 小时
最后登录
2019-2-22

锦衣玉食

发表于 2018-11-13 09:06:13 | 显示全部楼层
学以致用最是牛

你以为你以为得就是你以为的
回复

使用道具 举报

排名
28743
昨日变化
8

0

主题

3

帖子

18

积分

Rank: 1

UID
224736
好友
0
蛮牛币
33
威望
0
注册时间
2017-6-2
在线时间
3 小时
最后登录
2018-12-24
发表于 2018-11-13 09:46:06 | 显示全部楼层
感觉很不错

回复

使用道具 举报

5熟悉之中
534/1000
排名
5882
昨日变化
40

1

主题

130

帖子

534

积分

Rank: 5Rank: 5

UID
229565
好友
0
蛮牛币
515
威望
0
注册时间
2017-6-30
在线时间
167 小时
最后登录
2019-2-21
发表于 2018-11-13 11:34:50 | 显示全部楼层
佩服

回复

使用道具 举报

7日久生情
2183/5000
排名
1619
昨日变化
3

0

主题

749

帖子

2183

积分

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

UID
148286
好友
0
蛮牛币
3771
威望
0
注册时间
2016-5-11
在线时间
646 小时
最后登录
2019-2-22
发表于 2018-11-13 16:06:49 | 显示全部楼层
[发帖际遇]: tzb1125 捡了钱没交公 蛮牛币 降了 3 . 幸运榜 / 衰神榜

回复

使用道具 举报

排名
34628
昨日变化
8

0

主题

17

帖子

32

积分

Rank: 1

UID
278420
好友
0
蛮牛币
6
威望
0
注册时间
2018-4-23
在线时间
7 小时
最后登录
2019-1-21
发表于 2018-11-13 22:03:05 | 显示全部楼层
感谢楼主的分享 学习 学习

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1017/1500
排名
2125
昨日变化
4

0

主题

68

帖子

1017

积分

Rank: 6Rank: 6Rank: 6

UID
65205
好友
0
蛮牛币
3640
威望
0
注册时间
2015-1-2
在线时间
303 小时
最后登录
2019-2-21
发表于 2018-11-14 11:46:34 | 显示全部楼层
跪拜大佬

回复

使用道具 举报

3偶尔光临
151/300
排名
15762
昨日变化
313

2

主题

65

帖子

151

积分

Rank: 3Rank: 3Rank: 3

UID
297575
好友
0
蛮牛币
480
威望
0
注册时间
2018-9-19
在线时间
38 小时
最后登录
2019-2-22
发表于 2018-11-15 22:11:27 | 显示全部楼层
擦,看着就有点牛逼,什么矢量卷积什么的听着就高端

回复 支持 反对

使用道具 举报

7日久生情
4403/5000
排名
1776
昨日变化
2

0

主题

3109

帖子

4403

积分

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

UID
185339
好友
1
蛮牛币
3364
威望
0
注册时间
2016-11-20
在线时间
554 小时
最后登录
2019-2-22
发表于 2018-11-19 09:06:50 | 显示全部楼层
{:93:}

回复

使用道具 举报

7日久生情
4403/5000
排名
1776
昨日变化
2

0

主题

3109

帖子

4403

积分

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

UID
185339
好友
1
蛮牛币
3364
威望
0
注册时间
2016-11-20
在线时间
554 小时
最后登录
2019-2-22
发表于 2018-11-19 09:13:01 | 显示全部楼层
{:93:}

回复

使用道具 举报

排名
17686
昨日变化
4

0

主题

29

帖子

98

积分

Rank: 2Rank: 2

UID
159377
好友
0
蛮牛币
20
威望
0
注册时间
2016-7-28
在线时间
33 小时
最后登录
2019-2-22
发表于 2018-11-19 09:49:32 | 显示全部楼层
图形学的东西一定要mark

回复 支持 反对

使用道具 举报

7日久生情
2433/5000
排名
793
昨日变化
1

1

主题

685

帖子

2433

积分

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

UID
56496
好友
0
蛮牛币
7470
威望
0
注册时间
2014-11-19
在线时间
549 小时
最后登录
2019-2-19
发表于 2018-11-23 10:17:05 | 显示全部楼层
有点厉害,谢谢分享!

回复 支持 反对

使用道具 举报

排名
47756
昨日变化
24

0

主题

6

帖子

19

积分

Rank: 1

UID
225658
好友
0
蛮牛币
56
威望
0
注册时间
2017-6-7
在线时间
9 小时
最后登录
2019-2-12
发表于 2018-11-25 22:02:22 | 显示全部楼层

谢谢分享,学习下

回复

使用道具 举报

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

本版积分规则

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