UnrealEngine4:Post Process Shader练手（HLSL）

来源： 52vr | 责任编辑：传说的落叶 | 发布时间： 2019-06-18 09:02 | 浏览量：

UE4的材质大多数都是通过节点连线的，使用节点连线效率更高，对艺术家也更友好。但是用久了之后也会怀念当年写HLSL着色器代码的青葱岁月（注：这篇文章原本写于2015年10月，那段青葱岁月应该指的是倒腾FX composer的时光）。万幸UE4内置了Custom节点，可以编译着色器代码，所以不禁手痒写了几个后期特效，写篇文章记录一下吧！

Edge Detection

先有必要解释一下一些函数和参数：SceneTextureLookup函数指的是从总共的SceneTexture中选取对应ID的Texture，并且通过纹理坐标进行采样。参数分别为纹理坐标，Texture的ID和是否有Filter。LMN指的是进行grayscale操作中各颜色通道组成的向量，方便直接点乘。

材质如下：

节点代码如下：

[代码]：

					
									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;

其实原理很简单，就是DIP中的滤波……

效果如下：

原场景如下：

说实话，其实我挺喜欢这种风格……

浮雕风格

浮雕特效的shader其实特别简单，是一个只关于左上角和右下角的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);

效果如下：

原来场景：

ASCII Art

代码参考自shadertoy，说实话我也没搞懂这是什么鬼……

代码如下：

[代码]：

					
									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);