【UE4】径向模糊 RadialBlur(PC and Mobile)

效果示例

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

【UE4】径向模糊 RadialBlur(PC and Mobile)_第1张图片

实现方法

  首先需要在 UE4 中创建一个 MaterialUE4 中的材质都是创建一个 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”;
【UE4】径向模糊 RadialBlur(PC and Mobile)_第2张图片
  1. 右键搜索并添加 “SceneTexture” Node,并将它的 “Scene Texture Id” 修改为 “PostProcessInput0”
  2. 从它的 “Color” 输出拖出一个 “ComponentMask” Node,并将其 RGB 三个选项都勾选上;
【UE4】径向模糊 RadialBlur(PC and Mobile)_第3张图片
  1. 右键添加 “ScreenPosition” Node,并将其 “ViewPortUV” 输出连接到 “SceneTexture:PostProcessInput0”“UVs” 输入;
  2. 右键添加 “LinearInterpolate” Node(或者按住 “L” 键,鼠标左键点击屏幕,即可快速添加;右键搜索 “Lerp” 也可以);
  3. 右键添加 “RadialGradientExponential” Node,和 “ScreenAlignedUVs” Node,将其 “X 100%, Y 100%” 输出连接到 “RadialGradientExponential”“UVs(V2)”
  4. 右键添加 “ScalarParameter” Node(或者按住 “S” 键,鼠标左键点击屏幕,即可快速添加),命名为 “BlurRadius”,将 “DefalutValue” 设为 1,连接到 “Radius(S)”
  5. 再次添加 “ScalarParameter” Node,命名为 “Density”DefalutValue 设为 4,拖出 “OneMinus” Node(也可以直接搜 “1-”),并连接到 “Density(S)”
  6. “RadialGradientExponential” 的输出连接到 “Lerp”“Alpha”
【UE4】径向模糊 RadialBlur(PC and Mobile)_第4张图片
  1. 右键添加 “Custom” Node,它的 “Details” 中,“Code” 是渲染代码(HLSLHigh 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;
  1. “Description” 改为 “Radial Blur”,在 “Input” 中添加 “BlurDist”"ScreenUV ",对应 Code 中的变量;
  2. “ScreenPosition”UV 连接到 “Radial Blur”UV
  3. 添加 “ScalarParameter”,命名为 “Blur”DefalutValue 设为 1,连接到 “BlurDist”
  4. "RadialBlur" 的输出连接到 “Lerp”“B”“Mask(R G B)” 的输出连接到 “Lerp”“A”,就可以看到径向模糊的效果了!!!
【UE4】径向模糊 RadialBlur(PC and Mobile)_第5张图片
  1. 到这里 Material 就创建好了,“Apply”“Save”、关闭;
  2. “Content Browser” 中,右键刚刚创建的 “M_PP_RadialBlur”,选择 “Create Material Instance”,命名为 “MI_PP_RadialBlur”(即 Material Instance);
  3. 打开,可以看到 “Parameter Group” 中有三个我们设计的变量可以调整,效果就和文章开头的 GIF 效果一样,Save,关闭;
  4. 在场景的 “World Outliner” 中搜索 “PostProcessVolume”,在 “Details” 中搜索 “Post Process Materials” 并添加一个 “Asset Reference” 并选择刚刚创建的 “MI_PP_RadialBlur”(注意是 Instance!),可以看到场景已经变成模糊的样子了,点击 Play 效果如下所示;
【UE4】径向模糊 RadialBlur(PC and Mobile)_第6张图片
  1. 完成!

参考资料

  1. UE4 Tutorial: Radial Blur
  2. For Mobile

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

你可能感兴趣的:(Unreal,Engine,Radial,Blur,径向模糊,UE4)