HLSL在UnrealEngine4的材质节点中的应用（马赛克效果案例）

先来看下最终效果，如下图

1、百度一个Shader算法，搜索关键字HLSL 滤镜，会有很多相关的文章介绍，我这里就找一个马赛克滤镜来做个示范。

我这里找到一个网友用HLSL写的http://www.cnblogs.com/lancidie/archive/2012/01/19/2326759.html，他的代码是这样的，下面我用两种方式把他的算法使用的UE4材质节点上。

2、根据HLSL翻译成UE4的材质节点

这是一段像素着色器的代码，定义了三个提供外部调节的参数，一个2d纹理（Texture0）和两个二维向量（TexSize和mosaicSize），我们可以在UE4材质而编辑器里创建三个

节点如图

首先Main函数，Main函数有一个float2的参数，这个是纹理坐标，对应于UE4的TexCoord节点，如图

进入Main函数第一句是两个float2的乘法运算，UE4乘法运算是Multiply节点，运算结果生成一个新的float2名称是intXY，这个HLSL代码是用float2的分量分别相乘，然后用分量相乘的两个结果组合成一个新的float2，如果直接按照这个代码连节点的话是这样连接（Mask的作用是分别得到分量），如图

但是这是不必要的，使用Multiply可以根据输入值，它底层就会根据每一个分量相乘输出一个新的值，所以可以这样连接，如图

这两种连接是相同的效果。

Main函数第二行，两个float2相除值取整形，再乘以一个float2，这里就不演示用分量做运算，UE4除法运算使用Divide节点，注意强制转换成整形在HLSL里使用floor函数（它的作用是返回小于等于输入值的最大整数。），在UE4材质中也有这个节点，如图

第三行是float2的除法运算，如图

最后是返回一个2D纹理，使用前面计算出来的纹理坐标（UVMosaic），在TextureSample上设置一张图片，设置TexSize的值为（512，512）这个值和纹理尺寸有关，如图

这样就大功告成了，读者可以尝试一下其他滤镜算法，网络上可以找到很多Photoshop滤镜的算法。

3、根据HLSL编写UE4的自定义节点

原理和就是上面解释的，只是把节点写成代码，这里我提供一个截图，鼓励愿意学习的人一定要亲手敲一遍这个代码，这是学习代码最基本的方法

这里只是展示了一个简单案例，掌握了这个可以使用很多Shader语言（HLSL/GLSL/CG，包括Unity的shaderLab等）算法翻译成UE4的材质节点。