虚幻4屏幕后期处理之一: Post Process Shader-使用HLSL

发表于2017-01-26
评论1 2.3k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594
  虚幻4中的材质大多数都是通过蓝图连线的,使用蓝图连线效率更高,对美术人员也更友好。但是用久了之后也会怀念当年写HLSL着色器代码的青葱岁月。万幸虚幻4内置了Custom节点,可以编译着色器代码。

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


  节点代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;
其实原理很简单,就是DIP中的滤波……
效果如下: 

原场景如下: 


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

浮雕风格
  浮雕特效的shader其实特别简单,是一个只关于左上角和右下角的Filter。代码如下:
1
2
3
4
5
6
7
8
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);
效果如下: 


ASCII Art
  代码参考自shadertoy,说实话我也没搞懂这是什么鬼……
  代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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);
效果如下: 


有那么点酷炫啊……

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台