【UE4】径向模糊 RadialBlur（PC and Mobile）

效果示例

  图片为百度上找的 径向模糊 的示例图（网游中常见的轻功，向前飞的时候，屏幕会变得模糊，给玩家一种 冲刺加速 的感觉，这种模糊是从屏幕中心，沿着一圈圈同心圆向外传递的，这就是径向模糊 Rdial Blur）。

实现方法

  首先需要在 UE4 中创建一个 Material（UE4 中的材质都是创建一个 Material，然后用的时候用这个材质创建 Instance，这样调整 Instance 不会修改原始 Material吗，就像类的实例化，然后分别调整每个实例。）。
  创建 Material 可以参考官方文档：Creating and using Material Instances，或者参考本文文末参考资料中的第一个视频。

说明

• 本文使用的是 UE 4.25.1，但是参考资料基本都是 4.1x 所以应该都适用
• 本文使用的是 UE4 自带的 Third Person Template

具体步骤

• 注：本文使用的是 UE4 自带的 Third Person Template；

1. 首先在 UE4 Content Browser 中的合适文件夹中，右键创建一个 Material，命名为 “M_PP_RadialBlur”（即 Material PostProcess），打开；
2. 目前图中只有一个节点（Result Node），名为刚刚命名的 “M_PP_RadialBlur”，在它的 “Material” 中将 “Material Domain” 修改为 “Post Process”，这时图中的 Result Node 只有一个 input 可以用了，是 “Emissive Color”；

3. 右键搜索并添加 “SceneTexture” Node，并将它的 “Scene Texture Id” 修改为 “PostProcessInput0”；
4. 从它的 “Color” 输出拖出一个 “ComponentMask” Node，并将其 RGB 三个选项都勾选上；

5. 右键添加 “ScreenPosition” Node，并将其 “ViewPortUV” 输出连接到 “SceneTexture:PostProcessInput0” 的 “UVs” 输入；
6. 右键添加 “LinearInterpolate” Node（或者按住 “L” 键，鼠标左键点击屏幕，即可快速添加；右键搜索 “Lerp” 也可以）；
7. 右键添加 “RadialGradientExponential” Node，和 “ScreenAlignedUVs” Node，将其 “X 100%, Y 100%” 输出连接到 “RadialGradientExponential” 的 “UVs(V2)”；
8. 右键添加 “ScalarParameter” Node（或者按住 “S” 键，鼠标左键点击屏幕，即可快速添加），命名为 “BlurRadius”，将 “DefalutValue” 设为 1，连接到 “Radius(S)”；
9. 再次添加 “ScalarParameter” Node，命名为 “Density”，DefalutValue 设为 4，拖出 “OneMinus” Node（也可以直接搜 “1-”），并连接到 “Density(S)”；
10. 将 “RadialGradientExponential” 的输出连接到 “Lerp” 的 “Alpha”；

11. 右键添加 “Custom” Node，它的 “Details” 中，“Code” 是渲染代码（HLSL，High Level Shading Language）的位置，默认只有一个 “1”，复制如下代码到 Code 中；

const float2 ScreenMult = View.ViewSizeAndInvSize.xy * View.BufferSizeAndInvSize.zw;

const int TexIndex = 14;
const float Samples[11] = {-0.08,-0.05,-0.03,-0.02,-0.01,0,0.01,0.02,0.03,0.05,0.08};

float2 dir = float2(0.5,0.5) - ScreenUV;
float4 sum = float4(0.0, 0.0, 0.0, 0.0);
for(int i = 0; i<11; i++)
{
    float2 pos = ScreenUV + dir * Samples[i] * BlurDist;
    pos = clamp(pos, float2(0.0,0.0), float2(1.0, 1.0));
#if (ES2_PROFILE || ES3_1_PROFILE || MOBILE_EMULATION)
    sum += MobileSceneTextureLookup(Parameters, TexIndex, pos * ScreenMult);
#else
    sum += SceneTextureLookup(pos * ScreenMult, TexIndex, false);
#endif
}

return sum / 11.0;

12. 将 “Description” 改为 “Radial Blur”，在 “Input” 中添加 “BlurDist”、"ScreenUV "，对应 Code 中的变量；
13. 将 “ScreenPosition” 的 UV 连接到 “Radial Blur” 的 UV；
14. 添加 “ScalarParameter”，命名为 “Blur”，DefalutValue 设为 1，连接到 “BlurDist”；
15. "RadialBlur" 的输出连接到 “Lerp” 的 “B”，“Mask(R G B)” 的输出连接到 “Lerp” 的 “A”，就可以看到径向模糊的效果了！！！

16. 到这里 Material 就创建好了，“Apply”、“Save”、关闭；
17. 在 “Content Browser” 中，右键刚刚创建的 “M_PP_RadialBlur”，选择 “Create Material Instance”，命名为 “MI_PP_RadialBlur”（即 Material Instance）；
18. 打开，可以看到 “Parameter Group” 中有三个我们设计的变量可以调整，效果就和文章开头的 GIF 效果一样，Save，关闭；
19. 在场景的 “World Outliner” 中搜索 “PostProcessVolume”，在 “Details” 中搜索 “Post Process Materials” 并添加一个 “Asset Reference” 并选择刚刚创建的 “MI_PP_RadialBlur”（注意是 Instance！），可以看到场景已经变成模糊的样子了，点击 Play 效果如下所示；

21. 完成！

参考资料

1. UE4 Tutorial: Radial Blur
2. For Mobile

  第一个资料对材质进行创建和配置，但是会出现 SceneTextureLookup 无法在 ES3.1 上使用的问题，所以添加了宏，在手机上使用 MobileSceneTextureLookup。第一个右键看一下就知道了。