UE5后期处理VHS过滤器-着色器图形基础【上】
Game艺视界原创文章原创 14031 0
实名

通过了实名认证的内容创造者

发布于 2023-4-28 15:18:00

您需要 登录 才可以下载或查看,没有账号?注册

x
本期笔记内容我们将创建一个后期处理着色器来模仿其中一些视频伪影我们新建后期处理材质
02ed711f4fc3f77d55c98c9fdaa2b6e7.png
我需要对我的场景纹理进行采样,搜索并添加场景纹理节点连入主材质,只是对场景本身进行采样;场景纹理节点,后期处理输入0
667466b816e5a7d447eafbf7fcf3abbc.png

回到场景添加我们后处理材质



接下来我们做的时颜色分级,因此我们需要将我们的颜色保持原样它位于 rgb 颜色空间中我们需要将其转换为 y iq颜色空间 ,我们需要做一个 矩阵相乘,所以我要添加一个变换 3x3 矩阵节点,我们现在要将颜色连接到要变换的向量中据我所知,这里的虚幻材质编辑器不支持只给它一个矩阵的能力 直接我们必须创建我们的矩阵给它三个 vect3s 一个 x y 和 z


这些是组成矩阵的三个向量这允许我们从 rgb 转换为 yiq,其中 y是我们场景的亮度 然后 i 和 q是一个二维网格,我们可以使用这些值查找并找到色度或颜色开发这种色彩空间的原因是因为黑白电视最先出现所以他们希望在添加彩色电视时能够继续播放与黑白电视兼容的信号 因此是这种颜色的第一个组成部分空间是亮度

所以一旦我从 rgb 转换为 yiq我现在可以做的是,如果我添加一个组件蒙版 ,然后抓取组件蒙版的第一个组件


并将其连接起来如果我们看一下我们的预览现在你可以看到我已经将我的场景从彩色转换为黑白


然后其他两个分量是色度或颜色的色调场景,现在我在这个色彩空间中我能做的就是调整亮度和色度以匹配或模拟vhs 磁带的特性我要接受这个我要把它乘以 一个向量然后我也将向它添加一个向量转回rgb空间以便我们可以传递最终值,再次使用我的转换 3x3 矩阵


创建我们的向量,这些向量表示我们将对 yiq 颜色空间对我们的数据进行的调整,从1些开始此处的空白信息我们将乘以1 并添加 0



修改参数,现在你可以看到我的场景稍微有点着色了偏蓝就是这样 当我调整我的向量三的这后两个值时发生它正在调整场景的色度以匹配可能代表 vhs 对场景所做的配置文件



回到rgb 来调整颜色 我们要去创建一些扫描线我们这样做的原因是当您在电视机上播放 vhs 数据时大多数电视机是交错的这意味着当它们渲染屏幕时它们只渲染每隔一行 然后在下一帧 他们会在相反的帧上渲染他们没有创建的线条 所以会有这种交错效果屏幕在上帧和下帧之间来回跳动
我们需要创建一个过滤器或创建一个蒙版而不是屏幕上的每一行都是黑白的,然后我们可以使用该蒙版屏幕的视图大小在这种情况下我们将使用视图大小的垂直值,因此我们需要添加另一个组件掩码我们将选择视图大小的 g通道或 y 通道 因为我们只关心多高我们需要的另一件事是,我们的纹理坐标,在这种情况下我们的纹理坐标表示屏幕上的坐标我们将再次屏蔽纹理坐标的 y 分量,我们在垂直位置垂直 然后我们将这两个相乘我们将添加一个地板节点它将我们的值四舍五入到最接近的整数。然后我们将在这里使用一个值为2的fmod节点这将使我们在这里的值为2


我们可以在这里获取我们的纹理坐标,如果我给我们的纹理坐标添加时间现在我可以移动这些扫描线以便它们具有动画效果


我们需要对场景进行两次采样,我们需要将它乘以我们色谱的前半部分或我们将用于我们得到的颜色有点淡蓝色,我们将这种颜色乘以我们的第一个场景样本,我们需要取这个颜色的反面并将它乘以我们的第二个样本所以如果我从那里连接那个颜色并添加一减现在你可以看到我的着色器。我需要将我的第二个场景样本乘以颜色的补色,然后一旦我将这两个场景样本乘以这些颜色我就可以将结果重新加在一起


现在这些只是使用我们的常规屏幕坐标进行采样但是什么 我能做的就是把它们在水平方向上稍微偏移几个像素它会偏移这些颜色值 我们想要获得一个像素的大小在这种情况下,我将采用水平轴或只是红色我正在查看屏幕的宽度我将采用倒数其中通过将 1 除以我的值,因此这将给我一个像素的大小所以现在如果我将它插入一个附加节点并只是将零附加到它的高度,我可以将这个像素宽度添加到我的纹理坐标现在我在这里的第一个值偏移一个像素我想要做的是将第一个偏移一个像素 然后另一个我想在相反的方向偏移 所以我将它乘以 负一个然后也将它添加到我的纹理坐标中


我在这里添加一个乘法假设我们希望它们偏移 5 个像素,我的场景的红色部分向左移动 我的场景的蓝色部分向右移动它们每个移动五个像素


我要在这里添加一个值 我可以 使用这个值来控制宽度 而不是直接将它插入到乘法中


扫线掩码来控制如何样本正在工作,所以我要做的就是添加另一个乘法带到5这里


扫描线效果:
它被切割成单独的小像素其中一些像素向左偏移 其中一些像素向左偏移,因为我现在在这里使用此扫描线蒙版正如我所说



我可以让这个面具更有趣一点,如果我将时间添加到我用来生成该扫描线蒙版的纹理坐标上 我可以使该蒙版更有趣所以我 将其插入 我们将保存它,它们有点摇晃以模仿您在交错电视上





本节课节点



阶段效果:


视频版

好!本期笔记分享就到这里,我们下期见!
微信公众号:Game艺视界
使用道具 <
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表