UE4_Ben_图形52_水下效果处理

学习笔记,不喜勿喷,欢迎指正,侵权立删!祝愿生活越来越好!

在这个后期处理的效果中,我们可以看到有很多不同的,这里有浓雾,波纹扭曲,镜头扭曲和边缘模糊,在第49集我向你展示了如何制作涟漪,在第50集里我向你展示了如何制作扭曲效果,屏幕遮罩51集,展示了如何制作模糊滤镜,然后向边缘偏移,本教程将向你展示如何把他们集中在一起。并且还要再加2个:如何制作深度雾和镜头变形。

复习回顾:

上几集学习的内容如下:

屏幕扭曲:

正方形边缘遮罩:

边缘蒙版圆角:

中心小图案蒙版:

我们需要把他们都组装起来。

一、创建水下深度雾效果

首先要做的就是创建深度雾,在这之前,我们需要场景深度节点SceneDepth。我把它连接到后期处理材质的Emissive Color引脚上。

运行效果,一片白色,如下图:

原因是虚幻引擎的单位是以厘米为单位的。测量的是从相机到场景中物体的距离distance from the camera to the objects in the scene,以厘米为单位。0到1厘米是从黑到白,这就是为什么整个屏幕你看到的所有东西都是一片白的原因,因为所有的距离都大于1cm。

3、我们需要添加一些控制,来控制与摄像机的距离,我们想要的效果开始的位置,0到2米的位置没有深度雾,雾会从2米之后的位置开始飘进来。

4、另一个我们需要去做的是,除以一个值,控制最大深度或者所在区域,我们会有完全的雾,我们除以700,因为我想要的是7m的距离是完全不透明和起雾的效果。

5、我们需要添加纹理坐标,我们基于全屏纹理坐标对场景深度进行采样

我们连接一下,

来看下效果:

现在调整我们的深度,以便在摄像机附近我们得到一个0值黑色,然后我们在7m远的地方得到一个明亮颜色。这就是白值的位置所以雾的最大值。

6、我们还需要做几件事,首先,我们需要调整我们的衰减,我们用一个power节点,然后添加一个常数0.5,它会调整曲率,现在的雾是相对线性的,

运行效果如下,它会让更多的雾离镜头更近:

将衰减曲线离相机更近的距离。

7、我们现在来混合场景颜色和雾颜色,为了达到这个效果,我们使用SceneTexture:postprocessinput0,

你可以看到设置了PostProcessInput0,这是场景的颜色。我们让它和雾的颜色做一个调整,所以我们在场景颜色和水颜色之间进行过渡

注意要是场景颜色和4维向量之间进行混合,否则报错,运行效果如下:

看看我们的场景,我们就有了深度雾。你也可以做的花哨一些,让深水的颜色和浅水的颜色不一样,当你看向光源的时候,你可以让它变成不同的颜色,为了简单起见我们用这个颜色做雾。

二、创建透镜变形效果

我们需要的另一个效果是透镜变形。想让人觉得他是水下环境通过遮罩来扭曲我们的视野。我们来扭曲屏幕:

1、我们首先获取屏幕坐标,现在这个坐标从左上角的0,0开始,我们需要将坐标缩放的中心居中,所以我们需要减去一个值(0.5,0.5),这就得到了我们需要的uv坐标。

然后乘以一个值,这是在缩放他们,这儿乘以一个小于1的值,就把要显示的物体放大了。这样就扭曲了,

我们需要把坐标移回来,然后我们从中心开始缩放,所以需要把(0.5,0.5)加回去。我们把它带入场景颜色,观察运行效果。

我们把uv带入场景,看看运行效果

放大了屏幕,就像你有一个变焦镜头。使用双倍的缩放,效果很酷!这正是我们想要的,我们想要在中间放大。

以上是我们从中间开始使用的坐标,我们要混合中间坐标,我们不需要把边缘放大,我们这样做,我们用线性插值来混和最初的坐标和中间放大的坐标,我们需要一个蒙版,我们从上节课讲的这里面进行截取使用。

我们来截取下面这部分;

这部分运行效果如下所示:

因为后面是衰减和翻转,不需要了。我们让它作为线性插值的alpha引脚输入。

这意味着中间使用缩放的uv,边缘使用正常的uv。连接到场景颜色,我们得到效果如下:

中间放大2倍,周边不变。物体越靠近边缘放大倍数越小。这种扭曲效果不是很好。不用2倍放大,我要调整这个值,由0.5改成0.7.

我们仍可以看到屏幕扭曲效果,没有那么严重了。

三、创建屏幕扭曲效果

需要做的事情是Screen Wraping效果,其实我们只需要uv坐标进行轻微无规则的偏移就实现了扭曲效果,

但是我们还得需要它们能动,这样就需要加入时间,但是动的方向我们最好还是混合一下,这样就没有规律可循,更真实了,这就是我们扭曲屏幕的原理。以下是我们的制作步骤:

1、我们对后期处理体积添加下面这个材质,显示范围更改为无限范围(未限定),

运行效果如下图:

通过这种方式我们可以调整色调。

2、我们引入纹理坐标texture coordinates,后期处理着色器纹理坐标是屏幕,我们还得需要对纹理进行采样TextureSample,我们使用扭曲纹理distortion texture,我们还需要引入时间time节点,因为我们要为纹理做动画,我们让时间乘以一个2维向量(0.1,0.03),现在我们将我们获得的值并将它们添加到我们的纹理中,纹理采样来使用这个uv,如下图:

我们连接一下,来预览效果:

采样纹理向左边进行运动,并稍微向上移动。移动的幅度比较大。

我们把采样的结果乘以0.03一个较小的值,这样运动的幅度比较小,然后加到我们最终的纹理坐标uv中去,如下图:

这样我们可以使用这些坐标来采样我们的场景纹理Scene texture,连接如下图:

运行效果如下图:

场景在轻微的扭曲。扭曲的原因是每一个正常的uv坐标都进行了稍微的移动,这样取得的场景颜色就不是原来的地方颜色,就像移动了位置一样,就进行了扭曲,我们再让随时间变化就可以了。现在的效果是有点重复,只是向一个方向滚动,我们随时间的变化我们可以再混合一点:

运行效果如下:

这样动态的屏幕扭曲效果就无规律可循了。在两个不同的轴上以不同的速度滚动的非常好的组合。我们得到了一个非常有趣的后期处理失真效果。

但细心的观众会发现:

边缘的地方发生了拉伸,为什么会出现这种现象呢?是因为屏幕扭曲的方向是向上和向左的,所以在我们右侧和底部看到它,后期处理要求不存在的像素,不在屏幕上的像素,所以它可以做的最好的事情就是沿靠近的边缘复制现有的像素,这样就会产生拉伸。

我们来看看材质,看看从材质中我们能否弄清楚发生了什么?我们看下这两个纹理采样节点上,然后使用它们的红色通道和绿色通道,每个纹理采样节点得到的范围是0-1之间,我们让它们加到一起,那么范围就变成了0-2,我们接着做的是把它们加到我们的纹理坐标中,这就是造成偏移的原因,这个偏移向左移动,这是个从0-2的范围,我们真正想要的是从-1—1的范围,只要减去1就可。节点修改如下:

运行效果如下:

实际上上面说的问题很好理解,我们可以看看下面这个材质以及效果图就明白了,材质如下:

运行效果图如下:

当我们uv采样的是,u为0.2——1.2,v为0.2——1.2,这样1到1.2的部分,因为超出了屏幕的范围,只能用靠近部分的颜色进行复制填充。

实际上问题虽然解决了,但是我们仍然会有一点拉伸,这样的话,我们就得学会制作各种各样的选区。

四、方形蒙版、方形圆角蒙版

1、方形蒙版square mask的制作

添加纹理坐标节点texture coordinate,然后将纹理坐标texture coordinate乘以它们自身的倒数,自身的倒数实际上就是反向OneMinus,uv原本是0-1,用1减之后,就变成1-0了。它们相乘相当于ps中的正片叠底,暗的更暗,因为暗的乘以一个数会让它变得更小。

看下效果:

这样uv的数值区间就变为从0到比较小的值,这样区间太小了,所以我们修改下,让范围扩大之后,由于我们uv不能大于1,所以我们需要钳制在0-1的范围内,然后再相乘,这样扩大范围的这个值能够用来控制边缘过渡区间范围。如下连接:

运行效果:

如果你还是不明白,我相信你看看下面这个连接和运行效果图就明白了:

理解了之后,我们继续来看,我们现在需要把uv分开,我们只需要要componentmask节点就可以。我们来单独看看获取u和v之后长啥样:

再来看看v:

细心的观众会发现,v方向上上下边缘是黑色的,u方向上左右边缘是黑色的,这样我们要是让它们相乘,它们得到的结果肯定是边缘是黑色的。我们连接下看看对不对:

very good!

这个黑色的边框确实有点窄了,如果你想看宽的,你只要把50这个值降到5就可以。

当然这个值越小就越靠近屏幕中间,为2时:

所以值越小越靠近屏幕中间。现在我有了边缘黑色,就可以使用这个选区了,嘿嘿。例如我可以用它来控制发生了多少偏移,屏幕扭曲的时候不让边缘扭曲,我们下图是屏幕扭曲:

其中的一个数值0.03是控制扭曲的程度,我们可以让这个值变成一个图,边缘不扭曲,中间扭曲0.03,怎么办呢?是不是我们直接用边缘黑色的蒙版乘以它就可以了,太酷了!

我们运行看看效果,为了能够得到夸张的效果,我们把50设为5看看:

边缘很大一部分没有扭曲效果了,太酷了!知识的魅力!

2、方形圆角蒙版的制作

有了上面的方形蒙版了,如果我们想让方形的边缘更圆一点,应该怎么办好?如何制作一个圆形的圆形的全屏遮罩,这个与方形的非常相似,但有一些细微的差异,让我们来制作吧,

我们将从我们的uv坐标开始,我们将添加一个乘法,我们将我们的uv坐标乘以我们的uv坐标的倒数,

接下来我们将拆分我们的各个通道,所以我要添加一个component mask,我需要一个用于红色,一个用于绿色,我们将它们相乘:

然后再让它的自身相乘,我这样做的原因是因为这要比把它提高到2的幂要开销小,但这是获得更多对比度的另一种方法。当您对形状的纹理进行采样时,为什么要使用所有这些数学节点来制作你想要的那种围绕屏幕边缘的帧蒙版,答案是图形硬件可以比它采样纹理快很多,因此只做一点数学实际上更有效。除了进行纹理查找之外,我需要做的下一件事是在这里添加另一个乘法节点,在这种情况下,我们将把它乘以一个非常大的数字,我将把它乘以80000,因为前面的乘法已让蒙版变暗了很多,所以现在我要通过乘以80000来使其变量。

我们在后面添加一个钳制,确保在0-1的范围内,好的,这就是我们的圆形蒙版,它与我们的方形蒙版非常相似。它看起来有点像阴极射线管,是那些旧的电脑显示器或电视机的一种,你可以使用这个常数值80000来控制形状,所以我将它减少到10000左右,数字越小遮罩越接近中心,要是到500,就会得到一个非常小的圆圈,如下图,它会非常缓慢地淡出到边缘。所以这个数字越高,我们就越靠近边缘,我们获得了漂亮的圆形边缘。

我们可以使用边缘的圆形遮罩或者方形遮罩来作为扭曲的遮罩效果,我们可以用这些遮罩做一些事情。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/23238.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pcb实验六-元件设计

目录 一,绘制28管脚PLCC封装ATF750C-10JC元件 二,绘制变压器原理图符号,并生成各种库文件输出报表 1,绘制变压器原理图 2,添加封装 3,输出报表文件 三,绘制音乐集成芯片及LCD元件 1&…

Apache漏洞复现:【CVE-2021-42013】【CVE_2021_41773】【CVE-2017-15715】

声明 严禁读者利用本文介绍知识点对网站进行非法操作 , 本文仅用于技术交流和学习 , 如果您利用文章中介绍的知识对他人造成损失 , 后果由您自行承担 , 如果您不能同意该约定 , 请您务必不要阅读该文章 , 感谢您的配合 ! 远程代码执行 CVE-2021-42013 描述 Apache HTTP Ser…

R语言数据探索和分析21-中国GDP及其影响因素多元线性回归分析

一、研究背景和意义 GDP 是宏观经济中最受关注的经济统计数字,目前我国国内生产总值年均增长率均明显高于同期美、日等发达经济体和巴 西、俄罗斯、南非、印度等其他金砖国家,成为世界经济增长的主力军,GDP 的增长对一个国家有着十分重要的意…

kettle学习总结(7)

书接上回&#xff0c;该章节主要是数据同步&#xff0c;脚本如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <transformation><info><name>sync_sp-dev</name><description /><extended_description /…

Git 完整操作之记录

目录 一 . Git 基本操作流程及示例代码 1. 初始化 Git 仓库 2. 克隆远程仓库 3. 检查当前状态 4. 添加文件到暂存区 5. 提交更改 6. 查看提交历史 7. 创建分支 8. 切换分支 9. 合并分支 10. 推送更改到远程仓库 11. 拉取远程仓库的更改 12. 回滚到上一个版本 二…

mysql中事务的简介

大家好。我们在日常开发过程中肯定都或多或少的用到过事务&#xff0c;而且在面试时&#xff0c;数据库的事务也是必问内容之一。今天我们就来说说mysql的事务。 为了方便我们下面内容的讲解&#xff0c;我们也先建立一个讲事务必用的表–account表&#xff0c;并在表中插入两…

基于centos7打包当前环境的系统为iso镜像文件

1. 准备工作 1.下载安装mondo 切换到root用户&#xff0c;进入yum下载库 # cd /etc/yum.repos.d # wget ftp://ftp.mondorescue.org/centos/7/x86_64/mondorescue.repo 打开文件mondorescue.repo&#xff0c;修改gpgcheck属性为0&#xff0c;指定mondorescue.repo安装 # 安…

【Python数据挖掘实战案例】机器学习LightGBM算法原理、特点、应用---基于鸢尾花iris数据集分类实战

一、引言 1、简要介绍数据挖掘的重要性和应用 在数字化时代&#xff0c;数据已经成为企业和社会决策的重要依据。数据挖掘作为一门交叉学科&#xff0c;结合了统计学、机器学习、数据库技术和可视化等多个领域的知识&#xff0c;旨在从海量数据中提取有价值的信息&#xff0c…

生命在于学习——Python人工智能原理(3.2)

三、深度学习 &#xff08;二&#xff09;人工神经网络 人工神经网络是模仿人类大脑神经系统工作原理所创建的数学模型&#xff0c;有并行的分布处理能力、高容错性和自我学习等特征。 1、感知器 感知器由Frank Roseblatt于1957年提出&#xff0c;是一种广泛使用的线性分类…

RPC框架原理(一)

RPC框架原理 网络和IO的关系&#xff0c;IO&#xff08;input和output&#xff09;面向的是谁&#xff1f;OSI 7层参考模型&#xff0c;TCP/IP协议为什么会出现一个会话层三次握手socket心跳keep alive四次挥手 网络IO&#xff08;IO模型&#xff09; IO框架底层 学习顺序&…

GaussDB技术解读——GaussDB架构介绍(一)

目录 1 GaussDB 关键架构目标 2 GaussDB分布式架构 2.1 GaussDB 分布式关键技术架构 3 数据计算路由层&#xff08;Coordinator&#xff09;关键技术方案 3.1 分布式优化器 3.2 分布式执行框架 GaussDB是华为自主创新研发的关系型数据库&#xff0c;基于华为在数据库领域…

api接口模块封装

1&#xff1a;前端封装接口 前端请求的统一封装也是为了方便前端项目的请求维护起来更加方便&#xff0c;将页面中的请求封装到js文件中&#xff0c;不同的页面需要用到相同的请求可以直接进行复用。 第一步创建一个api文件夹和js文件 第二步&#xff1a;在文件中导入axios&am…

为什么投资气膜网球馆是明智之选—轻空间

在现代体育产业快速发展的背景下&#xff0c;投资体育场馆成为许多投资者关注的焦点。其中&#xff0c;气膜网球馆以其独特的优势和广泛的市场需求&#xff0c;逐渐成为投资者的热门选择。那么&#xff0c;为什么投资气膜网球馆是一个明智之选呢&#xff1f; 1. 建设周期短&…

SpringBoot+Vue幼儿园管理系统(前后端分离)

技术栈 JavaSpringBootMavenMyBatisMySQLVueElement-UI 系统角色 教师用户管理员 功能截图

JAVA小案例-输出100-150中能被3整除的数,每5个换行

JAVA小案例-输出100-150中能被3整除的数&#xff0c;每5个换行 代码如下&#xff1a; public class Continue {/*** continue练习&#xff0c;输出100-150中能被3整除的数&#xff0c;每5个换行* param args*/public static void main(String[] args) {int count 0;//计数器…

【全开源】数据大屏系统源码(ThinkPHP+FastAdmin)

&#x1f4c8;数据大屏系统&#xff1a;可视化数据的魅力舞台&#x1f5a5; 基于ThinkPHPFastAdmin开发的数据大屏&#xff0c;可视化义拖拽快速制作数据大屏/科技大屏&#xff0c; 内置30组件、获取实时数据、使用简单易上手&#xff0c;轻松实现图形数据统计等。​ 一、引言…

docker安装mysql8.0教程

文章目录 ①&#xff1a;环境准备②&#xff1a;docker安装③&#xff1a;mysql8.0.36安装④&#xff1a;mysql8.0.36容器启动 ①&#xff1a;环境准备 如果你的云主机已经有下面的这些基础软件包请忽略 假设新拿到一台机器&#xff0c;为了以后使用命令方便&#xff0c;先安…

03--nginx架构实战

前言&#xff1a;这应该是nginx梳理的最后一章&#xff0c;写一些关于网站架构和网站上线的知识内容&#xff0c;主要是感觉到运维并不是单一方向的行业&#xff0c;这一章概念会有一些广泛&#xff0c;但是非常重要&#xff0c;都是这几年工作中遇到的情况&#xff0c;整理一下…

【设计模式】JAVA Design Patterns——Private Class Data(私有类数据设计模式)

&#x1f50d;目的 私有类数据设计模式试图通过限制属性的可见性来减少属性的暴露。 通过将它们封装在单个Data对象中&#xff0c;可以减少类属性的数量。 &#x1f50d;解释 真实世界例子 想象一下你在为家人做晚餐炖汤。你想阻止家庭成员在你烹饪时偷偷品尝菜品&#xff0c;否…

C#WPF数字大屏项目实战08--生产量/良品统计

1、区域划分 生产量/良品统计这部分位于第二列的第二行 2、livechart拆线图 定义折线图,如下: <lvc:CartesianChart> <lvc:CartesianChart.Series> <!--设置Series的类型为 Line 类型, 该类型提供了一些折线图的实现--> <lvc:LineSeries/>…