Unreal Engine 4 —— Post Process Shader练手（HLSL）

original April 12, 2016 14:27:16

Label:
unreal engine /
HLSL /
PP

2357

Most of UE4's materials are connected through nodes, which is more efficient and more friendly to artists. But after using it for a long time, I will miss the green days of writing HLSL shader code (Note: This blog was originally written in October 2015, and those green years should refer to the time of FX composer). Fortunately, UE4 has a built-in Custom node, which can compile shader code, so I can't help but write a few post-production special effects, and write a blog to record it!

Edge Detection

It is necessary to explain some functions and parameters first: SceneTextureLookupthe function refers to selecting the Texture corresponding to the ID from the total SceneTexture, and sampling through the texture coordinates. The parameters are texture coordinates, Texture ID and whether there is a Filter. LMN refers to the vector composed of each color channel in the grayscale operation, which is convenient for direct point multiplication.

The materials are as follows:

Edge Detection

The node code is as follows:

int tIndex = 14; 
float t1 = dot(SceneTextureLookup (UV + float2(-1.0f / sW, -1.0f / sH),tIndex, false), LMN ); 
float t2 = dot(SceneTextureLookup (UV + float2(0 , - 1.0f / sH),tIndex, false), LMN ); 
float t3 = dot(SceneTextureLookup (UV + float2(1.0f / sW, -1.0f / sH),tIndex, false), LMN );
float m1 = dot(SceneTextureLookup (UV + float2(-1.0f / sW, 0),tIndex ,false), LMN); 
float b1 = dot(SceneTextureLookup (UV + float2(-1.0f / sW, 1.0f / sH),tIndex, false), LMN );
float b2 = dot(SceneTextureLookup (UV + float2(0 , 1.0f / sH),tIndex, false), LMN ); 
float b3 = dot(SceneTextureLookup (UV + float2(1.0f / sW, 1.0f / sH),tIndex, false), LMN ); 
float tot1 = t3 + b3 + ( 2 * m3) - t1 - (2 * m1 ) - b1; float tot2 = b1 + (2 * b2 ) + b3 - t1 - ( 2 * t2) - t3; 
float4 col; 
if ((( tot1 * tot1 ) + (tot2 * tot2 )) > 0.05 ) 
{
    col = float4 (0, 0,0 ,1); 
} 
else 
{
    col = float4 (1, 1,1 ,1); 
}
return col;

In fact, the principle is very simple, that is, the filtering in DIP...

The effect is as follows:
Edge_Detection_1

The original scene is as follows:
Original_Scene

To be honest, I actually like this style...

relief style

The shader of the relief effect is actually very simple. It is a Filter only about the upper left corner and the lower right corner. code show as below:

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

The effect is as follows:
Fudiao

Original scene:
OriginalScene2

ASCII Art

The code is referenced from shadertoy . To be honest, I didn't understand what the hell was this...

code show as below:

int tIndex = 14;
float2 uv  = UV .xy * ScreenResolution.xy ;
float3 col = SceneTextureLookup( floor(uv /8.0)* 8.0/ScreenResolution .xy, tIndex,false);
float gray = (col.r + col. b)/2.0;
float n =   65536.0;             // .c
if ( gray > 0.2) n = 65600.0 ;    // :
if ( gray > 0.3) n = 332772.0 ;   // *
if ( gray > 0.4) n = 15255086.0 ; // o
if ( gray > 0.5) n = 23385164.0 ; // &
if ( gray > 0.6) n = 15252014.0 ; // 8
if ( gray > 0.7) n = 13199452.0 ; // @
if ( gray > 0.8) n = 11512810.0 ; // #
float2 p = fmod (uv/ 4.0, 2.0) - 1.0 ;
p = floor (p* float2(4.0 , - 4.0) + 2.5 );
if ( clamp(p .x, 0.0 , 4.0 ) == p.x && clamp (p. y, 0.0, 4.0 ) == p.y) {
float c = fmod(n /exp2( p.x + 5.0*p .y), 2.0 );
if ( int(c ) == 1 ) col = col*1 ;
else col = col*0 ;
}
else col = col*0 ;
return float4(col, 1.0);

The effect is as follows:
Ascii Art

It's so cool...

——End of the whole article——