【UE5】一种老派的假反射做法,可以用于移动端,或对反射的速度、清晰度有需求的地方

没想到大家这篇文章呼声还挺高

这篇文章是对它的详细实现,建议在阅读本篇之前,先浏览一下前面的文章,以便更好地理解和掌握内容。

这种老派的假反射技术,适合用于移动端或对反射效果的速度和清晰度有较高要求的场合。该技术通过一些简单的技巧,能够在性能有限的设备上,实现类似反射的视觉效果,而不需要高昂的计算成本。此外相比于屏幕空间反射,这种方法能够提供更加清晰且无延迟的反射效果。

在开始前,还有一些说明:

在这篇文章中,我们首先创建了一个BP_FakeReflection。如果您不需要大规模放置反射物体,可以选择手动摆放,并跳过BP_FakeReflection这一节内容。

教程中使用了一个平面模型,并以"大屏幕倒影"作为示例(这是最常见的需求)。然而,在实际应用中,这种方法并不限于平面表面。您甚至可以使用模型来实现倒影效果。一些移动端项目和VR项目的角色倒影,通常是通过将角色模型翻转并放置在地面下方来实现的。例如下图中人物的反射效果:


BP_FakeReflection

创建一个蓝图BP_FakeReflection,它的功能很简单,就是自动摆放面片。

添加两个Plane,地面上面片为PlaneU,地下为PlaneD

实现也很简单,我们看一下:

  1. 这个默认的Plane模型是向上的,这里对其进行了旋转。
  2. 因为有旋转,缩放也需要调整,这样面片才能匹配Actor的缩放
  3. 下方的Plane要垂直对称(旋转以后Y对应Z轴)
  4. 向下发射了500cm的射线检测地面
  5. 将反射设置到以地平线为轴对称的高度

制作材质 M_FakeReflection

贴图

随便截了一张图,修改一下作为贴图。关键在于确保这张图片的尺寸是2的幂,例如512x512、1024x1024或2048x2048等,我们后续需要使用生成的Mip。

制作屏幕材质

新建材质M_FakeReflection

首先勾选使用材质属性:

将其设置给PlaneU

MI_FakeReflection_Screen

创建实例材质MI_FakeReflection_Screen,他就是用于上半部分PlaneU的普通材质

将材质属性重载

MI_FakeReflection_Screen_Reflection

再以MI_FakeReflection_Screen为父,创建实例MI_FakeReflection_Screen_Reflection,像名字一样,它是地下反射PlaneD的材质。

将其材质属性重载为半透明 无光照,并设置给PlaneD

同时要禁用深度测试,忘截图了

地下反射材质制作

MI_FakeReflection_Screen_Reflection 是这篇教程的核心,现在我们要开始制作它了

回到M_FakeReflection,首先修改材质属性为半透明 无光照

实现法线

  1. 这一步,本质是在计算"干净的反射向量"与"场景反射向量"的不同,取XY限制为纹理坐标,加到TexCoord:

  2. 增加一个SwitchReflection,用于切换地上地下两种实现,然后将其连接:

  3. 加入一个倍数,负责从艺术的角度控制强度:

  4. 最后,将亮度调整移动到了最后,使 PlaneU·, PlaneD可以同步调整亮度

  5. MI_FakeReflection_Screen_Reflection 勾选:

法线Fix

法线部分还没结束,还有一些细节需要修复,首先看看效果:

可以从下面这张截图看到,反射出现两个问题:

  1. 贴图扭曲后重复

  2. 反射扭曲受限于模型

解决:缩放贴图,使其小于模型,并使用UV绘制蒙版,只保留UV的0-1区间

MI_FakeReflection_Screen需要修改重载为已遮罩

实现粗糙度

Mip此时派上用场,从GBuffer里拿粗糙度,应用进Mip

实现反射衰减

随着反射路径长度增加,光线会进行衰减,粗糙度也会产生对应的变化

最终效果




可以看到,这是一篇很浅显的文章,主要是为了介绍一种思路。

在这思路的基础上,有很多效果都可以实现,也可以衍生出很多Shader玩法。

相关推荐
心怀梦想的咸鱼3 小时前
UE5 第一人称射击项目学习(二)
学习·ue5
暮志未晚Webgl3 小时前
109. UE5 GAS RPG 实现检查点的存档功能
android·java·ue5
心怀梦想的咸鱼3 小时前
UE5 第一人称射击项目学习(完结)
学习·ue5
小春熙子11 小时前
Unity图形学之着色器之间传递参数
unity·游戏引擎·技术美术·着色器
优雅永不过时·11 小时前
three.js实现地球 外部扫描的着色器
前端·javascript·webgl·three.js·着色器
暮志未晚Webgl1 天前
110. UE5 GAS RPG 实现玩家角色数据存档
java·前端·ue5
踏实探索2 天前
OpenLayers教程12_WebGL自定义着色器:实现高级渲染效果
前端·arcgis·vue·webgl·着色器
Zhichao_972 天前
【UE5】Slider控件样式
ue5
流行易逝2 天前
23.UE5删除存档
ue5
心怀梦想的咸鱼2 天前
UE5 第一人称射击项目学习(三)
学习·ue5