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

扫一扫,访问微社区

开发者专栏

关注:2315

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

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

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

[士郎] Shader 后处理实现水墨风格渲染「Low Poly 」变「水墨画 」

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

6820

主题

7344

帖子

2万

积分

Rank: 16

UID
1231
好友
185
蛮牛币
7347
威望
30
注册时间
2013-7-29
在线时间
3508 小时
最后登录
2018-9-25

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

发表于 2018-4-13 11:02:02 | 显示全部楼层 |阅读模式

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

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

x
水墨风格渲染
这打算做一个中国古代背景的游戏,所以尝试做了水墨风格的渲染。
主要按以下四步来实现的效果:
  • 根据色调和饱和度调整饱和度
  • 对图像进行模糊
  • 水墨风格的物体边缘
  • 物体内画笔笔触的模拟
接下来我分别就这四步依次展开说明:
调整饱和度
这里我使用Post-Processing Stack 的Color Grading 来调节饱和度,通过使用Grading Curves来具体调节。根据色调和饱和度调整饱和度。强化部分国画中常用颜料的颜色部分的饱和度,少见颜料的颜色降低饱和度;饱和度高的强化,低的降低。这里我调节了Sat VS Sat和Hue VS Sat两种曲线,保留了部分色调在红色和绿色附近(也就是所谓的丹青)的饱和度,使其它颜色整体变灰;并使饱和的较高的部分区域的饱和度更高,其余部分有所降低,效果对比如下:
1.jpg
2.jpg
图像模糊
这里使用高斯模糊来实现,由于与之后的描边效果不冲突可以写在一个Pass里。我这里直接用Post-Processing Stack里的DOF(景深)效果,然后把焦距调到最小,让全屏都模糊。实际上的效果是几乎一样的。
3.jpg
水墨描边
由于上一步我们模糊了图像,所有这里不能直接用原图来进行边缘检测,我们通过_CameraDepthNormalsTexture,来获得法线图然后用法线图来进行边缘检测,这样我们不仅得到了模糊前图的边缘而且,不会讲阴影等几何上在一个平面上的颜色不连续的部分也识别为边缘。
采用Roberts边缘算子来检测,Roberts算子计算对角上的像素之间的差,模板比较简单,而且可以通过调整中心像素到角上的距离来控制描边的粗细。
4.jpg
具体代码如下:
[AppleScript] 纯文本查看 复制代码
float rgb2gray(fixed3 col){
    float gray = 0.2125 * col.r + 0.7154 * col.g + 0.0721 * col.b; 
    return gray;
}
fixed4 frag (v2f i) : SV_Target
{
    //......
    float2 texel = _MainTex_TexelSize.xy;
    //判断是否是边缘
    fixed3 col0 = tex2D(_CameraDepthNormalsTexture,i.uv+_EdgeWidth*texel*float2(1,1)).xyz;
    fixed3 col1 = tex2D(_CameraDepthNormalsTexture,i.uv+_EdgeWidth*texel*float2(1,-1)).xyz;
    fixed3 col2 = tex2D(_CameraDepthNormalsTexture,i.uv+_EdgeWidth*texel*float2(-1,1)).xyz;
    fixed3 col3 = tex2D(_CameraDepthNormalsTexture,i.uv+_EdgeWidth*texel*float2(-1,-1)).xyz;
    float edge = rgb2gray(pow(col0-col3,2)+pow(col1-col2,2));
    //.......
}

其中_EdgeWidth用来控制边缘粗细
理论上我们这样计算出来的edge是一个大于0小于1的很小的数,为了更好的视觉效果我们通过pow()函数来增大edge的值,相当于进行一个对数变换,在变换后部分非边缘的区域edge也会有个较大的值,我们可以再设定一个阈值来舍弃edge不够大的部分区域。
[AppleScript] 纯文本查看 复制代码
edge = pow(edge,0.2);
if(edge<_Sensitive)edge=0;
return fixed4(edge,edge,edge,1.0);


以下为_EdgeWidth为3时,不进行任何变换、进行对数变换、设置阈值为0.35时的到的边缘图 5.jpg 然后用edge的值来控制边缘与原图混合,可以设置具体的边缘颜色。
可以通过噪声图或噪声函数来给边缘制造水墨感。关于噪声的内容我就不具体说明了,我这里用了三维值噪声的分形叠加,为了是摄像机移动后同一个噪声纹理与模型相匹配,我通过深度值来获得像素世界坐标,再用世界坐标来生成噪声,这样噪声的样式就贴到模型上了,而不会像用屏幕坐标来采样时那样,移动屏幕会显得不自然。



[AppleScript] 纯文本查看 复制代码
if(edge<_Sensitive)edge=0;              
else{
    edge=noise;
}
fixed3 finalColor = (edge)*_EdgeColor.xyz+(1-edge)*col*(0.95+0.1*noise);
//非边缘部分也可以加上较小的噪声来模拟水墨在纸上扩散的质感
//因为noise在0~1的范围内所有使系数和的均值为1左右来保证画面不会更亮或更暗
return fixed4(finalColor,1.0);




6.jpg

模拟笔触
虽然通过模糊颜色上有一定的水墨扩散的感觉,通过描边可以区分模型的边缘,但图片还是有许多不自然的地方。比如颜色扩散太均匀不想“画”出来的,许多细小的边缘由于太小而形成了“噪点”。而且由于我使用的噪声是通过世界坐标得到的,部分很远的地方由于透视而显得噪声很乱。所以我们再进行一次滤波来消除这些问题,并模拟画笔的笔触。这里用了一种保留边缘的滤波,算法具体的名字我忘了,之前不记得哪里看到过。具体思路是用中心像素作为模板的四个角,然后分别计算中心在四个角时的整个区域的均值和方差,然后取方差最小的区域的均值输出。求知道这个滤波名字的大佬告知一下,我好查一查相关资料,这篇文章里实现的油画效果也是用简化后,只取两个角来计算的。我这里就直接用两个角的来算了
[AppleScript] 纯文本查看 复制代码
for (int j = -4; j <= 0; ++j)  
{  
    for (int k = -4; k <= 0; ++k)  
    {  
        c = tex2D(_MainTex, i.uv +texel*float2(k, j)).xyz;
        m0 += c;   
        s0 += c * c;  
    }  
}
for (int j = 0; j <= 4; ++j)  
{  
    for (int k = 0; k <= 4; ++k)  
    {  
        c = tex2D(_MainTex, i.uv +texel*float2(k, j)).xyz;
        m1 += c;   
        s1 += c * c;  
    }  
}
//取方差小的区域的颜色作为最终输出颜色  
float4 finalFragColor = 0.;  
float min_sigma2 = 1e+2;                   
m0 /= 25;  
s0 = abs(s0 / 25 - m0 * m0);  
float sigma2 = s0.r + s0.g + s0.b;  
if (sigma2 < min_sigma2)   
{  
    min_sigma2 = sigma2;  
    finalFragColor = float4(m0, 1.0);  
}                     
m1 /= 25  ;
s1 = abs(s1 / 25 - m1 * m1);    
sigma2 = s1.r + s1.g + s1.b;  
if (sigma2 < min_sigma2)   
{  
    min_sigma2 = sigma2;  
    finalFragColor = float4(m1, 1.0);  
}
return finalFragColor;

注意这里是对描边后的图像进行的操作,最终效果如下
7.jpg
可以调节最开始的滤波范围和描边粗细,边缘颜色等参数来调整效果
8.jpg
9.jpg
10.jpg
对比后处理前原效果
11.jpg


知乎@9级铁甲蛹




评分

参与人数 1鲜花 +5 收起 理由
泗阳该歇大锅 + 5 很给力!666666

查看全部评分

[发帖际遇]: 一个袋子砸在了 清风 头上,清风 赚了 1 蛮牛币. 幸运榜 / 衰神榜

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

使用道具 举报

7日久生情
1678/5000
排名
18913
昨日变化
2

12

主题

779

帖子

1678

积分

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

UID
158776
好友
2
蛮牛币
164
威望
0
注册时间
2016-7-26
在线时间
860 小时
最后登录
2018-9-25
发表于 2018-4-13 14:03:51 | 显示全部楼层
管理员牛逼6666666666666

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1042/1500
排名
2878
昨日变化
1

0

主题

262

帖子

1042

积分

Rank: 6Rank: 6Rank: 6

UID
119648
好友
3
蛮牛币
1499
威望
0
注册时间
2015-8-25
在线时间
306 小时
最后登录
2018-9-25
QQ
发表于 2018-4-13 14:16:24 | 显示全部楼层
6666666666666

回复

使用道具 举报

7日久生情
3244/5000
排名
2041
昨日变化

0

主题

2116

帖子

3244

积分

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

UID
219676
好友
1
蛮牛币
2424
威望
0
注册时间
2017-7-12
在线时间
496 小时
最后登录
2018-9-25

活力之星

发表于 2018-4-13 14:18:36 | 显示全部楼层
谢谢分享

回复

使用道具 举报

6蛮牛粉丝
1159/1500
排名
2400
昨日变化
9

0

主题

284

帖子

1159

积分

Rank: 6Rank: 6Rank: 6

UID
135463
好友
0
蛮牛币
194
威望
0
注册时间
2016-1-23
在线时间
321 小时
最后登录
2018-9-25
发表于 2018-4-13 14:56:36 | 显示全部楼层
gfyfgyfgyfgyfg
[发帖际遇]: 一个袋子砸在了 wasdml123 头上,wasdml123 赚了 1 蛮牛币. 幸运榜 / 衰神榜

回复

使用道具 举报

排名
21936
昨日变化
4

0

主题

9

帖子

36

积分

Rank: 1

UID
54712
好友
0
蛮牛币
29
威望
0
注册时间
2014-11-11
在线时间
7 小时
最后登录
2018-9-22
发表于 2018-4-13 15:07:23 | 显示全部楼层
学习了~很棒的效果~
[发帖际遇]: 一个袋子砸在了 ahttps 头上,ahttps 赚了 1 蛮牛币. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

4四处流浪
324/500

0

主题

85

帖子

324

积分

Rank: 4

UID
269736
好友
0
蛮牛币
141
威望
0
注册时间
2018-2-27
在线时间
240 小时
最后登录
2018-9-24
发表于 2018-4-13 16:42:26 | 显示全部楼层
nice!

回复

使用道具 举报

5熟悉之中
705/1000
排名
2820
昨日变化

0

主题

64

帖子

705

积分

Rank: 5Rank: 5

UID
1118
好友
0
蛮牛币
901
威望
0
注册时间
2013-7-22
在线时间
159 小时
最后登录
2018-9-12

社区QQ达人活力之星

发表于 2018-4-13 19:03:41 | 显示全部楼层
战略性mark,感谢dalao的shader干货分享~

回复 支持 反对

使用道具 举报

6蛮牛粉丝
1062/1500
排名
5767
昨日变化

1

主题

283

帖子

1062

积分

Rank: 6Rank: 6Rank: 6

UID
159858
好友
1
蛮牛币
596
威望
0
注册时间
2016-8-1
在线时间
556 小时
最后登录
2018-8-31
发表于 2018-4-13 20:49:15 | 显示全部楼层
你这是啥玩意啊。。艾玛。。。。挺好的

回复 支持 反对

使用道具 举报

5熟悉之中
790/1000
排名
3370
昨日变化

0

主题

93

帖子

790

积分

Rank: 5Rank: 5

UID
68740
好友
1
蛮牛币
1153
威望
0
注册时间
2015-1-15
在线时间
288 小时
最后登录
2018-9-25
发表于 2018-4-13 20:56:26 | 显示全部楼层
6666666666666666666666

回复 支持 反对

使用道具 举报

5熟悉之中
596/1000
排名
4950
昨日变化
2

0

主题

203

帖子

596

积分

Rank: 5Rank: 5

UID
214896
好友
0
蛮牛币
223
威望
0
注册时间
2017-3-28
在线时间
123 小时
最后登录
2018-9-21
发表于 2018-4-14 08:12:34 | 显示全部楼层
大神,请收下我的膝盖

回复 支持 反对

使用道具 举报

4四处流浪
353/500
排名
7215
昨日变化

5

主题

109

帖子

353

积分

Rank: 4

UID
164639
好友
1
蛮牛币
3184
威望
0
注册时间
2016-8-29
在线时间
95 小时
最后登录
2018-9-22
发表于 2018-4-14 08:47:23 | 显示全部楼层
特别厉害了

回复

使用道具 举报

7日久生情
1629/5000
排名
3058
昨日变化
1

3

主题

867

帖子

1629

积分

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

UID
246489
好友
1
蛮牛币
2703
威望
0
注册时间
2017-9-28
在线时间
311 小时
最后登录
2018-9-17

活力之星

发表于 2018-4-14 09:26:19 | 显示全部楼层
6666666666666666

回复 支持 反对

使用道具 举报

5熟悉之中
538/1000
排名
3893
昨日变化
1

0

主题

31

帖子

538

积分

Rank: 5Rank: 5

UID
525
好友
0
蛮牛币
994
威望
0
注册时间
2013-6-30
在线时间
155 小时
最后登录
2018-9-19

社区QQ达人

发表于 2018-4-14 11:17:06 | 显示全部楼层
666666666666
[发帖际遇]: gsakd878 在论坛发帖时没有注意,被小偷偷去了 2 蛮牛币. 幸运榜 / 衰神榜

回复

使用道具 举报

5熟悉之中
538/1000
排名
3893
昨日变化
1

0

主题

31

帖子

538

积分

Rank: 5Rank: 5

UID
525
好友
0
蛮牛币
994
威望
0
注册时间
2013-6-30
在线时间
155 小时
最后登录
2018-9-19

社区QQ达人

发表于 2018-4-14 11:18:15 | 显示全部楼层
666666666666

回复

使用道具 举报

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

本版积分规则

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