【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；

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

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

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

右键添加 “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);
#elsesum += SceneTextureLookup(pos * ScreenMult, TexIndex, false);
#endif
}return sum / 11.0;

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

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

完成！

参考资料

UE4 Tutorial: Radial Blur
For Mobile

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

【UE4】径向模糊 RadialBlur（PC and Mobile）相关推荐

zepto点击事件兼容pc和mobile
判断pc还是mobile,重写click事件 var CLICK='click'; (function browserRedirect() {var sUserAgent = navigator.us ...
h5使用@media适配pc和mobile
h5使用@media适配pc和mobile // 设置最小尺寸是 700 像素的样式 @media screen and (min-width: 700px) {// css } // 设置最小尺寸是 ...
ue4场景没阴影_UE4 Mobile使用动态阴影的一些小结
UE4在Mobile平台里,除了预先烘焙的静态阴影之外,对于动态物体一般使用两种阴影:调制阴影(Modulated Shadows)和级联阴影(Cascade Shadows,简称CSM). 调制阴影 ...
css pc和mobile,初识pc端和mobile端CSS适配利器—vw+rem+CSS locks
前言大概五月份的时候,我下定决心写自己的博客系统,于是断断续续花了近一个月的时间琢磨Nestjs,写完了接口部分.六月份因为工作的原因就搁置了,说来也惭愧,直到九月中旬,才将它拾起.半个月后,后台部 ...
Cloud for Customer UI checkbox控件在PC和mobile端的不同显示
This is made in my phone. 20170906的note: 我用自己的手机上的两个浏览器都能直接访问qxl. PC上能正常显示的OWL Table, 到了pad和phone上就没 ...
伪响应式开发（PC和Mobile分离）
screen.width 无论把浏览器缩小还是放大,screen.width的值都不会改变,但是IE9及以上浏览器才支持这个属性. @media screen 媒体查询的巨大缺陷: 切换页面布局的时候 ...
判断ip是内网还是外网, 判断请求来之pc还是mobile
判断内网ip function is_internal_id($ip_address){$get_ip_number = function($ip){$ip_segment = explode('.' ...
原声JS判断程序运行平台Pc OR Mobile
var userAgent = navigator.userAgent.toLowerCase(); if(!userAgent.match(".*(ip(hone|od)).*" ...
VUE优秀UI组件库（PC和Mobile）
引用: https://my.oschina.net/u/3219445/blog/1573155 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理 ...