Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit af035d5

Browse files
committed
修订文章 《高品质后处理:十种故障艺术(Glitch Art)算法的总结与实现》
修订文章 《高品质后处理:十种故障艺术(Glitch Art)算法的总结与实现》
1 parent 3549bd6 commit af035d5

File tree

2 files changed

+29
-16
lines changed
  • Content/高品质后处理:十种故障艺术(Glitch Art)算法的总结与实现

2 files changed

+29
-16
lines changed

‎Content/高品质后处理:十种故障艺术(Glitch Art)算法的总结与实现/README.md

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040

4141
<br>
4242

43-
# 关于XPL: Unity引擎的高品质后处理库
43+
# 关于XPL: Unity引擎的高品质后处理库
4444

4545

4646
另外,本文涉及的十种故障艺术(Glitch Art)后处理的实现源码,都收录于本人开源的后处理算法库XPL中。
@@ -51,7 +51,7 @@ X-PostProcessing Libray,简称XPL,是本人开发的Unity引擎下的高品
5151

5252
![](media/debda36941aa6564c6b8b8b38ef9d318.jpg)
5353

54-
截止本文发表,目前已以开源的形式放出了17种图像模糊后处理算法、10种像素化型后处理算法、9种边缘检测型后处理算法、17种故障艺术型后处理算法。而随着后续更多内容的公开,X-PostProcessing
54+
截止本文发表,目前已以开源的形式放出了17种图像模糊型后处理算法、10种像素化型后处理算法、9种边缘检测型后处理算法、17种故障艺术型后处理算法。而随着后续更多内容的公开,X-PostProcessing
5555
Libray将成型为一个具有100+种后处理特效的高品质后处理开源算法库。
5656

5757
<br>
@@ -85,7 +85,7 @@ Libray将成型为一个具有100+种后处理特效的高品质后处理开源
8585

8686
图 《看门狗2》中的故障艺术表现形式 @ Ubisoft
8787

88-
这里也放一段包含各种故障艺术(Glitch Art)元素的《赛博朋克2077》 2019 E3展预告片段:
88+
这里也放一段包含多种故障艺术(Glitch Art)元素的《赛博朋克2077》 2019 E3展预告片段:
8989

9090
【《赛博朋克2077》 2019 E3展预告片段】 <https://www.youtube.com/watch?v=qIcTM8WXFjk>
9191

@@ -168,7 +168,7 @@ RGB颜色分离故障(RGB Split Glitch),实现算法的主要要点在于
168168

169169
![](media/97fa0c1b7f14497c48ae9574e7d7ea8f.gif)
170170

171-
详细实现源码可见:
171+
此版本的实现源码可见:
172172

173173
<https://github.com/QianMo/X-PostProcessing-Library/tree/master/Assets/X-PostProcessing/Effects/GlitchRGBSplitV2>
174174

@@ -222,7 +222,7 @@ Split后处理特效,以满足不同情形下RGB颜色抖动风格的需要。
222222

223223
half2 block = randomNoise(floor(i.texcoord * _BlockSize));
224224

225-
这句代码可以生成随机强度的均匀Block图块:
225+
基于这句代码可以生成随机强度的均匀Block图块:
226226

227227
![](media/a0ff7e1c447a3416e1466f75b1ca0a9b.gif)
228228

@@ -252,7 +252,7 @@ half displaceNoise = pow(block.x, 8.0) * pow(block.x, 3.0);
252252
![](media/d6248833de3a7111dbca499cdc955df9.gif)
253253

254254

255-
以上基础错位图块故障(Image Block Glitch)实现的完整源代码可见:
255+
以上基础版本的错位图块故障(Image Block Glitch)实现的完整源代码可见:
256256

257257
<https://github.com/QianMo/X-PostProcessing-Library/tree/master/Assets/X-PostProcessing/Effects/GlitchImageBlockV3>
258258

@@ -294,7 +294,7 @@ half displaceNoise = pow(block.x, 8.0) * pow(block.x, 3.0);
294294
}
295295

296296

297-
最终表现如下:
297+
对应的渲染表现如下:
298298

299299
![](media/ce0f22d2a51d470b499b27bb3da10d3a.gif)
300300

@@ -390,16 +390,20 @@ float uv_randomTrunc = 6.0 * trunc(_TimeX, 24.0 * uv_trunc);
390390
blockLine_random = sign(blockLine_random) * saturate((abs(blockLine_random) - _Amount) / (0.4));
391391
blockLine_random = lerp(0, blockLine_random, _Offset);
392392

393+
可以得到如下的渲染表现:
393394

394395
![](media/1689ba7c27383f6db417dd35b764cdf3.gif)
395396

397+
396398
接着,通过随机梯度的非等宽线条,去抖动uv采样生成源色调的blockLine Glitch:
397399

398400
// 生成源色调的blockLine Glitch
399401
float2 uv_blockLine = uv;
400402
uv_blockLine = saturate(uv_blockLine + float2(0.1 * blockLine_random, 0));
401403
float4 blockLineColor = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, abs(uv_blockLine));
402404

405+
对应的渲染表现如下:
406+
403407

404408
![](media/4d170f6ed0453120c2f5b3a3b7b4c1a2.gif)
405409

@@ -424,7 +428,7 @@ float uv_randomTrunc = 6.0 * trunc(_TimeX, 24.0 * uv_trunc);
424428

425429
![](media/4b96ce25c89d300d3bb7245bd8af2eec.gif)
426430

427-
当然还可以将上述渲染效果与原始场景图进行插值混合,得到不同强度的渲染表现。
431+
当然,也可以将上述渲染效果与原始场景图进行插值混合,得到不同强度的渲染表现。
428432

429433
XPL中实现的错位线条故障(Line Block Glitch)后处理,有7个可供定制调节的参数:
430434

@@ -522,6 +526,10 @@ XPL中实现的错位线条故障(Line Block Glitch)后处理,有7个可
522526

523527
![](media/f6645202c3717b8609086b3e92a3a750.gif)
524528

529+
也可以从竖直方向进行uv的抖动:
530+
![](media/39.1.gif)
531+
532+
525533
扫描线抖动故障(Scan Line Jitter Glitch)完整的实现源代码可见:
526534

527535
<https://github.com/QianMo/X-PostProcessing-Library/tree/master/Assets/X-PostProcessing/Effects/GlitchScanLineJitter>
@@ -651,7 +659,6 @@ Noise最终的渲染表现:
651659
# 八、屏幕跳跃故障(Screen Jump Glitch)
652660

653661

654-
![](media/33fb0f93f870af94fac2e0f944202d54.gif)
655662

656663
屏幕跳跃故障(Screen Jump Glitch)的算法原理在于取经过时间校正后的uv数值的小数部分,并于原始uv插值,得到均匀梯度式扰动屏幕空间uv,再用此uv进行采样即可得到跳动画面的表现。核心实现Shader代码如下:
657664

@@ -684,9 +691,9 @@ Noise最终的渲染表现:
684691

685692
![](media/496be98975fbb3dfda2acb0ed5e0e15b.gif)
686693

687-
屏幕跳跃故障(Screen Jump Glitch)详细的实现源码可见:
694+
屏幕跳跃故障(Screen Jump Glitch)完整的实现源码可见:
688695

689-
<https://github.com/QianMo/X-PostProcessing-Library/tree/master/Assets/X-PostProcessing/Effects/GlitchScreenShake>
696+
<https://github.com/QianMo/X-PostProcessing-Library/tree/master/Assets/X-PostProcessing/Effects/GlitchScreenJump>
690697

691698
<br>
692699

@@ -731,6 +738,12 @@ Noise最终的渲染表现:
731738
![](media/d287de98424bf1b8de486bf69ad697a4.gif)
732739

733740

741+
742+
屏幕抖动故障(Screen Shake Glitch)完整的实现源码可见:
743+
744+
<https://github.com/QianMo/X-PostProcessing-Library/tree/master/Assets/X-PostProcessing/Effects/GlitchScreenShake>
745+
746+
734747
<br>
735748

736749
# 十、波动抖动故障(Wave Jitter Glitch)
@@ -794,7 +807,7 @@ OK,回到我们的波动抖动故障(Wave Jitter Glitch)后处理中来。
794807
strength = 0.5 + 0.5 *cos(_Time.y * _Frequency);
795808
#endif
796809
797-
// --------------------------------Prepare UV----------------------------
810+
// Prepare UV
798811
float uv_y = i.texcoord.y * _Resolution.y;
799812
float noise_wave_1 = snoise(float2(uv_y * 0.01, _Time.y * _Speed * 20)) * (strength * _Amount * 32.0);
800813
float noise_wave_2 = snoise(float2(uv_y * 0.02, _Time.y * _Speed * 10)) * (strength * _Amount * 4.0);
@@ -803,11 +816,11 @@ OK,回到我们的波动抖动故障(Wave Jitter Glitch)后处理中来。
803816

804817
float rgbSplit_uv_x = (_RGBSplit * 50 + (20.0 * strength + 1.0)) * noise_wave_x / _Resolution.x;
805818

806-
// -------------------------------Sample RGB Color------------------------------
807-
float4 colorG = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, float2(uv_x, i.texcoord.y));
808-
float4 colorRB = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, float2(uv_x + rgbSplit_uv_x, i.texcoord.y));
819+
// Sample RGB Color
820+
half4 colorG = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, float2(uv_x, i.texcoord.y));
821+
half4 colorRB = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, float2(uv_x + rgbSplit_uv_x, i.texcoord.y));
809822
810-
return float4(colorRB.r, colorG.g, colorRB.b, colorRB.a + colorG.a);
823+
return half4(colorRB.r, colorG.g, colorRB.b, colorRB.a + colorG.a);
811824
}
812825

813826
得到的渲染表现如下:
5.16 MB
Loading[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /