【转载】UE4 还原 CRT 像素效果笔记

ShaderJoy
510 阅读2分钟

原文链接：UE4 还原 CRT 像素效果笔记

参考文章

#像素艺术# - 使用 UE4 还原 CRT 像素效果的思路及方法

效果分解

远看像素化，近看充满着像素点，画面不断抖动，有不断从上到下的刷新

图片像素化

首先 UV 0-1 区间是会和图像相对应的，图像的每个像素都会有相对应的 UV 区间

image.png

比如 512X512 的一张贴图，左上角第一个像素对应的 UV 区间是 0-0.00195（1/512）

image.png

所以像素化的方法只要我们将 UV 划分为若干个矩形区域，那么每个区域都会填充相同颜色

image.png

可以看到被划分了 16X16 个区域

image.png

这样像素化就完成了

image.png

像素点

image.png

利用 frac 节点将 UV 分成多个 0-1 不断重复地块

image.png

与像素化结果相结合

image.png

将以上功能进行打包成一个材质函数 MF_Pixel

image.png

方便重复利用

image.png

像素隔行错位

主要思路：准备两套 UV，一套 UV 不偏移，一套 UV 偏移一定距离，然后隔行进行切换

image.png

假设我们像素分辨率为 8，那么我们 UV 相乘之后会扩充到 0-8 区间，我们用 Mask 将 G 通道取出来会得到下图

image.png

再连接 Sine，你会发现了总行数会变成 16 行，这是 因为 UE4 中 Sine 节点输入 1 就代表输入 2Pi ，一个循环，所以我们 0-1 区间就变成了两行，一黑一白，原本 8 个区间，所以总行数变成 16 行。

image.png

这与我们的像素分辨率不符，所以我们必须除以 2 ，得到正确的行数 Mask 图

image.png

没有加上像素细节的效果

image.png

像素化效果切换

如果我们将视角拉的足够远，那么将会出现严重的摩尔纹

image.png

所以我们将使用 SphereMask 根据摄像机的距离进行像素化和像素素材的效果切换

image.png

色条，明度，抖动

色条主要混合了不同速度和比例的 UV，最终将输出 rgb 色条与原图进行 Multiply

明度也靠色条的 UV 与原图相加

抖动将混合了不同速度比例的 UV 与像素化 UV 直接 Add

最终效果

这 gif 录制好像有点问题，忽略红点就好了

GIF 2021-1-5 1-30-38.gif

avatar
文章
阅读
粉丝