UnrealEngine4:Post Process Shader練手（HLSL）

來(lái)源： 52vr | 責(zé)任編輯：傳說(shuō)的落葉 | 發(fā)布時(shí)間： 2019-06-18 09:02 | 瀏覽量：

UE4的材質(zhì)大多數(shù)都是通過(guò)節(jié)點(diǎn)連線的，使用節(jié)點(diǎn)連線效率更高，對(duì)藝術(shù)家也更友好。但是用久了之后也會(huì)懷念當(dāng)年寫(xiě)HLSL著色器代碼的青蔥歲月（注：這篇文章原本寫(xiě)于2015年10月，那段青蔥歲月應(yīng)該指的是倒騰FX composer的時(shí)光）。萬(wàn)幸UE4內(nèi)置了Custom節(jié)點(diǎn)，可以編譯著色器代碼，所以不禁手癢寫(xiě)了幾個(gè)后期特效，寫(xiě)篇文章記錄一下吧！

Edge Detection

先有必要解釋一下一些函數(shù)和參數(shù)：SceneTextureLookup函數(shù)指的是從總共的SceneTexture中選取對(duì)應(yīng)ID的Texture，并且通過(guò)紋理坐標(biāo)進(jìn)行采樣。參數(shù)分別為紋理坐標(biāo)，Texture的ID和是否有Filter。LMN指的是進(jìn)行g(shù)rayscale操作中各顏色通道組成的向量，方便直接點(diǎn)乘。

材質(zhì)如下：

節(jié)點(diǎn)代碼如下：

[代碼]：

					
									01
								
									int tIndex = 14;
							
									02
								
									float t1 = dot(SceneTextureLookup (UV + float2(-1.0f / sW, -1.0f / sH),tIndex, false), LMN );
							
									03
								
									float t2 = dot(SceneTextureLookup (UV + float2(0 , - 1.0f / sH),tIndex, false), LMN );
							
									04
								
									float t3 = dot(SceneTextureLookup (UV + float2(1.0f / sW, -1.0f / sH),tIndex, false), LMN );
							
									05
								
									float m1 = dot(SceneTextureLookup (UV + float2(-1.0f / sW, 0),tIndex ,false), LMN);
							
									06
								
									float b1 = dot(SceneTextureLookup (UV + float2(-1.0f / sW, 1.0f / sH),tIndex, false), LMN );
							
									07
								
									float b2 = dot(SceneTextureLookup (UV + float2(0 , 1.0f / sH),tIndex, false), LMN );
							
									08
								
									float b3 = dot(SceneTextureLookup (UV + float2(1.0f / sW, 1.0f / sH),tIndex, false), LMN );
							
									09
								
									float tot1 = t3 + b3 + ( 2 * m3) - t1 - (2 * m1 ) - b1; float tot2 = b1 + (2 * b2 ) + b3 - t1 - ( 2 * t2) - t3;
							
									10
								
									float4 col;
							
									11
								
									if ((( tot1 * tot1 ) + (tot2 * tot2 )) > 0.05 )
							
									12
								
									{
							
									13
								
									    col = float4 (0, 0,0 ,1);
							
									14
								
									}
							
									15
								
									else
							
									16
								
									{
							
									17
								
									    col = float4 (1, 1,1 ,1);
							
									18
								
									}
							
									19
								
									return col;

其實(shí)原理很簡(jiǎn)單，就是DIP中的濾波……

效果如下：

原場(chǎng)景如下：

說(shuō)實(shí)話，其實(shí)我挺喜歡這種風(fēng)格……

浮雕風(fēng)格

浮雕特效的shader其實(shí)特別簡(jiǎn)單，是一個(gè)只關(guān)于左上角和右下角的Filter。代碼如下：

[代碼]：

					
									1
								
									int tIndex = 14;
							
									2
								
									float4 s22 = SceneTextureLookup (UV, tIndex,false);
							
									3
								
									float4 s11 = SceneTextureLookup (UV + float2(-1.0f / sW, -1.0f / sH),tIndex, false);
							
									4
								
									float4 s33 = SceneTextureLookup (UV + float2(1.0f / sW, 1.0f / sH),tIndex, false);
							
									5
								
									s11.rgb = ( s11.r + s11. g + s11.b );
							
									6
								
									s22.rgb = ( s22.r + s22. g + s22.b ) * -0.5;
							
									7
								
									s33.rgb = ( s22.r + s22. g + s22.b ) * 0.2 ;
							
									8
								
									return ( s11 + s22 + s33);

效果如下：

原來(lái)場(chǎng)景：

ASCII Art

代碼參考自shadertoy，說(shuō)實(shí)話我也沒(méi)搞懂這是什么鬼……

代碼如下：

[代碼]：

					
									01
								
									int tIndex = 14;
							
									02
								
									float2 uv  = UV .xy * ScreenResolution.xy ;
							
									03
								
									float3 col = SceneTextureLookup( floor(uv /8.0)* 8.0/ScreenResolution .xy, tIndex,false);
							
									04
								
									float gray = (col.r + col. b)/2.0;
							
									05
								
									float n =   65536.0;             // .c
							
									06
								
									if ( gray > 0.2) n = 65600.0 ;    // :
							
									07
								
									if ( gray > 0.3) n = 332772.0 ;   // *
							
									08
								
									if ( gray > 0.4) n = 15255086.0 ; // o
							
									09
								
									if ( gray > 0.5) n = 23385164.0 ; // &
							
									10
								
									if ( gray > 0.6) n = 15252014.0 ; // 8
							
									11
								
									if ( gray > 0.7) n = 13199452.0 ; // @
							
									12
								
									if ( gray > 0.8) n = 11512810.0 ; // #
							
									13
								
									float2 p = fmod (uv/ 4.0, 2.0) - 1.0 ;
							
									14
								
									p = floor (p* float2(4.0 , - 4.0) + 2.5 );
							
									15
								
									if ( clamp(p .x, 0.0 , 4.0 ) == p.x && clamp (p. y, 0.0, 4.0 ) == p.y) {
							
									16
								
									float c = fmod(n /exp2( p.x + 5.0*p .y), 2.0 );
							
									17
								
									if ( int(c ) == 1 ) col = col*1 ;
							
									18
								
									else col = col*0 ;
							
									19
								
									}
							
									20
								
									else col = col*0 ;
							
									21
								
									return float4(col, 1.0);