UE5 制作方块边缘渐变边框效果

该效果基于之前做的(https://blog.csdn.net/grayrail/article/details/144546427)进行修改得到,思路也很简单:


1.打开实时预览

1.为了制作时每个细节调整方便,勾选Live Update中的三个选项,开启实时预览。

2.点开节点右上角的箭头,可查看实时预览效果。

2.提取边缘

3.先看下提取边缘的原理,对UV正数范围加偏移后,区间会变为0.1 - 1.1,将其减去1以提取大于1的部分,可提取右半边边缘。同样做法,对UV负数范围反向加偏移,提取左半边边缘。

4.对UV的X和Y都作用此操作,并通过Max节点合并内容。

5.最后归一化,使用Add节点进行最终合并。

因为横向和纵向都包含边角区域,因此合并后边角会格外突出。

6.除非是有这样的美术需求,正常情况下还需要减去边角区域的高亮,这里可以使用Min节点提取该区域,增加一定系数相减。

7.最终所有节点如下:


参考:https://www.bilibili.com/video/BV1mdoBYMERv

相关推荐
传奇开心果编程5 小时前
【现代声明式UI学与练】第4课 列表渲染与 key——如何高效渲染列表、key 的作用、列表重排时的状态保持
学习·flutter·react native·ui·swiftui·android jetpack
传奇开心果编程5 小时前
【Compose Multiplatform 跨端开发学与练】第5课 网络与数据层
android·网络·学习·ui·ios·kotlin·composer
yt004yt6 小时前
园区 VOC 绿岛集中治理项目,管网与监测系统设计要点
大数据·学习
一条破秋裤6 小时前
06_从设备读数据_字符设备read_write流程
学习
m4Rk_7 小时前
【论文阅读】Agent 记忆机制(92):EMPO²——让 Memory 从经验复用走向主动探索
论文阅读·人工智能·学习·开源·github
golang学习记7 小时前
VSCode AI完成任务的仪式感:撒礼花
ide·vscode·编辑器
欣欣之王来了8 小时前
前端开发学习路线图:2026年Vue方向最新版
前端·学习·架构·项目·vue3教程
wdfk_prog8 小时前
LWIP教程 00:从网线上的电信号到 lwIP——PHY、MAC、DMA 与 `netif` 的完整边界
运维·网络·笔记·学习·ip
m0_734172428 小时前
Python用zip配对前先检查长度
python·学习
乌暮8 小时前
拆解网页的底层逻辑:用费曼学习法讲透 HTML 与 CSS
前端·css·学习·html