UE4 实现描边功能

作者: ommoonlight | 来源:发表于2018-06-07 16:59 被阅读96次

今天在油管上看到一个讲解描边的视频,总结一下实现思路。
(有VPN的小伙伴可以看原视频: https://www.youtube.com/watch?v=rL7VUeZzRyQ

实施思路:

  • 1,开启目标Mesh的 RenderCustomDepthPass ;在PP( PostProcess )中得到Mesh的蒙版1。
    2,将蒙版中代表目标形状的范围进行扩大得到另一个蒙版2。
    3,然后用蒙版1与蒙版2进行差值运算的到轮廓蒙版。
    4,添加轮廓颜色和宽度的修改功能;

  • 关于实施中的差值方式(建议看完全部实现再读)
    因为实现过程中是深度值减去深度阈值来获得蒙版,结果相当于对原有表示Mesh的范围进行了收缩(原因:深度阈值求蒙版的做法导致了背景域为有效选区(有效选区的概念,具象指白色范围或数字表示为大于0部分)故最终扩大的是背景域,因此如果我们想提取目标Mesh域便会发现它因背景域增大而缩小了),下文中的差值计算部分是【偏移后蒙版】的背景域增量减去【原始蒙版】;类似PS中通过内阴实现的描边效果。

具体过程

  • 编写PP材质前准备:
    1,在场景中放置一个PPV( PostProcessVolume ),并开启 PPVSettings 中的 Unbound ;
    2,创建一个材质文件
    设置 Material Domain 的模式为PP模式;
    设置 Blendable Location的模式为 Before Translucency(解决AA带来的抖动)
    3,创建该PP材质的实例,然后将材质实例添加到PPV的PostProcessMaterials的材质列队中;
    4,在场景中放置一个目标Mesh用作测试,找到Mesh对象的Rendering属性下的RenderCustomDepthPass选项,进行勾选(表示该对象的深度信息将同时计入自定义深度信息存储中以便我们在PP材质中获取);
  • 关键节点意义


    每像素点的UV坐标
    当前像素到屏幕空间缩放值(可以理解为【单位像素】对应屏【幕UV】中的单位长度)
    在自定义深度信息中的每像素单位的深度值
  • 阶段一得到基础蒙版(前景层)


    基础蒙版蓝图
    所得效果
  • 阶段二得到偏移蒙版(背景景层)


    向U轴移动一像素
    偏移操作共执行八次,分别向不同方向,并最终相加结合

-阶段三 蒙版进行差值计算


偏移扩张后的蒙版减去原始蒙版,得到差值域
差值域表现的描边效果
  • 阶段四 完成最终效果


    根据蒙版做画面绘制和描边绘制的线性插值
添加描边粗细参数

最终效果

最终效果(2.7M)

材质文件下载(UE4 4.17版本):
https://pan.baidu.com/s/1vr54McWs-sVPa7v3B2-9MA

相关文章

  • UE4 实现描边功能

    今天在油管上看到一个讲解描边的视频,总结一下实现思路。(有VPN的小伙伴可以看原视频: https://www.y...

  • Android TextView字体描边

    原文:链接地址 今天公司要求做一个字体描边功能,在网上搜到一个不错的,可以实现改变文字描边宽度和描边颜色,功能实现...

  • 通过富文本描边功能实现字体加粗效果

    通过富文本描边功能实现字体加粗效果 如果NSStrokeWidthAttributeName设置一个正值,则实现的...

  • CSS 文本描边效果

    text-shadow 实现文本描边 text-stroke 实现文本描边 text-stroke 是 ext-s...

  • ios开发文字内描边效果

    实现了外描边效果之后,产品问内描边好做吗,我说简单!简单个蛋! 因为苹果本身的描边效果,是双向描边,不是单侧的,见...

  • AE实现内描边和外描边

    AE并没有直接提供内描边和外描边选项,不过可以通过“位移路径”实现。 点击“图层”下方“内容”的“添加”按钮。 选...

  • 使用CommandBuffer实现描边效果

    使用CommandBuffer实现描边效果 1.什么是CommandBuffer2.C#脚本常用命令3.描边实现思...

  • 【iOS UI篇】Label描边+发光字

    本文介绍如何给Label实现酷炫的描边+外发光效果,虽然实现简单,但是网上资料却是很少。 绘制实现描边 继承Lab...

  • UE4 毛发渲染参考文章

    《UE4 头发制作流程》《ue4 4.24测试功能groom头发》《Digital Human UE4 TEST ...

  • ios 文字外描边效果

    设计提出文字描边效果,但是富文本自带的文字描边效果,是向文字内外同时描边 效果 所以需要自己实现,采用的方法是重写...

网友评论

    本文标题:UE4 实现描边功能

    本文链接:https://www.haomeiwen.com/subject/qqlisftx.html