【UE4_001】后期处理轮廓描边效果

最新推荐文章于 2024-07-01 17:11:35 发布
最新推荐文章于 2024-07-01 17:11:35 发布
阅读量3.7k 收藏 39
点赞数 4
文章标签： ue4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38126410/article/details/127425148
版权

简介

 

通过材质计算得到物体边缘，通过后期处理的方式对物体边缘进行描边显示

ue4 材质描边、外发光、轮廓线_哔哩哔哩_bilibili

Unreal Engine 4 卡通轮廓线（Toon Outlines）教程 之 后期处理法（Post Process Outlines）_开发游戏的老王的博客-CSDN博客

实现思路

首先创建一个材质，使用边缘检测的方法，利用场景中物体深度不连续性，得到场中物体边缘。

通过后期处理盒子来渲染轮廓线的效果。

通过控制物体的CustomDepth的开启与关闭动态的开启或关闭物体的轮廓线的显示。

后期处理材质

材质函数 MF_Kernal

边缘检测需要通过卷积计算实现，需要对视口逐像素进行卷积计算，将卷积核封装材质函数，通过材质函数获取中心像素以及上下左右的四个像素，作为卷积核进行运算。

材质函数命名为MF_Kernal，为函数添加五个output，分别对应中心像素，偏上像素，偏下像素，偏左像素，偏右像素。

 

添加FunctionInput节点，用于控制轮廓线的宽度，将输入值设置为Scalar，并设置一个浮点数作为默认输入值作为偏移量。

 

添加SceneTexelSize节点，获取屏幕的像素尺寸，例如1920*1080的屏幕，那么U方向上每个像素就占1/1920≈0.000521，V方向上每个像素占1/1080≈0.000926，那么SceneTexelSize的值就为（0.000521，0.000926）。

 

添加ScreenPosition获取ViewportUV，此处获取了Viewport内所有像素点的UV值，默认视口左上角为（0,0）右下角为（1,1），因此在U方向上加(+1)是向右移动，U方向上(-1)是向左移动，V方向上(+1)是向下移动，V方向上(-1)是向上移动。

 

创建两个float2，作为偏移的方向，(1,0)在U方向上偏移，(0,1)在V方向上偏移。

 

MF_Kernel总体蓝图

  • Float2(方向) * Input Width(偏移量) * SceneTexelSize(屏幕像素大小) = 像素向某个方向偏移的距离。
  • 像素向某个方向偏移的距离 + ViewportUV(视口UV) = 偏移后的视口UV值
  • 最终的五个输出项
    • Center = 视口UV值
    • Right   = 视口向右偏移一定宽度的UV值
    • Left     = 视口向左偏移一定宽度的UV值
    • Up       = 视口向上偏移一定宽度的UV值
    • Down  = 视口向下偏移一定宽度的UV值

 

M_Outline

创建材质，在details面板将材质作用域设置为PostProcess，材质的Blendable Location 设置为 Before Tonemapping

 

添加SceneTexture节点设置为Depth，选择SceneDepth对全部场景物件进行计算，选择CustomDepth仅计算开启CustomDepth的物件。将MF_Kernel中的得到五个veiwportUV分别输入到SceneTexture中获得每个像素点对应的深度值。

SceneDepth：获取场景中所有物件的深度值

CustomDepth：获取打开CustomDepth通道的物件的深度值

添加SceneTexture节点设置为PostProcessInput0，获取场景中物件的在场景照明中的颜色。

PostProcessInput0：提供HDR的场景颜色

PostProcessInput1：提供分离透明度（Alpha通道是Mask）

PostProcessInput2 ：低分辨分辨(Low Resolution)泛光输入

M_Outline总体蓝图

  • 添加一个标量（width），提升为参数，作为MF_Kernel的输入参数，用于控制轮廓线的偏移宽度。
  • 将MF_Kernel所得到的值，作为SceneTexture: CustomDepth的输入值，得到视口每一个像素的深度值。
  • 拉普拉斯边缘检测计算，中心值*4 减去上下左右四个像素的和，得到物体深度变化的而产生的边缘。使用clamp将值限制在0-1的范围内。
  • 将得到边缘值作为了Lerp的Alpha参数输入，在边缘的地方显示用户定义的颜色，在非边缘的地方显示场景本身颜色
  • 给颜色的输入值乘一个标量（Power）用来控制颜色的发光强度。

蓝图控制轮廓线

添加后期处理盒子

将刚刚创建的主材值，创建一个材质实例M_Outline_Inst，方便对于材质效果参数的调节。

在场景中添加一个后期处理盒子，在后期处理盒子Rendering Features -> Post Process Material新建一个材质插槽，将刚刚创建的材质实例添加到插槽中。

将后期处理盒子的应用范围设置为 Infinite Extent

 创建Actor蓝图

  • 控制蓝图逻辑

当按下X键时，开启全部物件轮廓线，当松开X键时，关闭全部物件轮廓线

  •  轮廓线开启效果
  •  轮廓线关闭效果

 

L_不正
关注
  • 4
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
UE4透视描边后处理材质
03-07
UE4透视描边后处理材质蓝图实现，包含边缘检测算法，还有模版判断，与原图合成。参考https://www.tomlooman.com/the-many-uses-of-custom-depth-in-unreal-4/
UE4 后期处理描边材质
05-04
UE4 后期处理描边材质，直接拷贝到资源管理器使用，可自由编辑色彩，描边范围
UE4_材质_材质节点_Fresnel
最新发布
Growthofnotes的博客
07-01 1490
菲涅尔（Fresnel）这一术语用于说明你看到的光线如何根据视角的变化以不同的强度反射。例如，你站在水池边，低头看脚下的水，你会发现水面的反射不是特别强烈。随着你抬起头，使你的视线与水池中的水面平行，你会开始发现水面越来越波光粼粼。水和玻璃都表现出很强的菲涅尔倾向，即视线垂直于表面时，它们看起来相对透明，视线未垂直于表面时，它们会反射更多光线。从正面看时，相框中的玻璃是透明的，从侧面看时，玻璃中的反光会更明显。在虚幻引擎中，菲涅尔（Fresnel） 材质表达式会根据表面法线与摄像机方向的点积来计算衰减。
UE4描边材质
08-08
可以自定义的描边 各种颜色选择粗细等
UE4 描边材质制作 学习笔记
qqQQqsadfj的博客
01-02 899
【代码】UE4 描边材质制作。
UE4描边材质，最多255种颜色
03-20
UE4描边材质，目前有4中颜色，可更改可增加至多255种。 .
UE4 描边材质
qq_43021038的博客
05-19 1218
描边材质
ue4描边
zhangxsv123的博客
10-19 870
效果图： 第一步，创建C++ Basic Code 第二步，定义键盘和鼠标输入的映射 第三步，修改 Rendering 中的 Custom Depth - Stencil Pass 第四步，找到GlobalPostProcessVolume [如果没有的话自行拖放一个PostProcessVolume组件] 将 unbound 勾选上 再修改 Blendables 为 PPI_OutlineColored 完整代...
UE4描边效果后期材质
04-29
后期处理体积是一个可以覆盖场景区域的3D盒子，它包含了各种后期处理效果的参数。你需要在该体积内部设置你的描边材质，并调整其影响范围。 接下来，我们将深入探讨如何创建描边材质： 1. **创建材质**：打开UE4...
Unity3D中shader 轮廓描边效果实现代码
08-31
Unity3D中shader轮廓描边效果实现代码 Unity3D中shader轮廓描边效果是指在 Unity3D 引擎中使用 shader 实现的描边效果，该效果可以使模型的轮廓变得更加明显，从而提高模型的可读性和美观性。本文将详细介绍 Unity...
UE5.2后处理材质显示武器外描边
10-23
适用人群：适用练习项目案例的小伙伴，想做一个射击游戏枪的描边效果，或者刀剑的描边效果 适用场景：UE其他版本请注意该文件的适用性，如果版本过低，UE5.2中的部分材质节点如果过低版本中没有，将会导致该材质不能...
UE4 描边材质 自定义深度通道
04-16
UE4 描边材质 ，使用自定义深度通道，通过后期体积添加材质。支持自定义颜色 Alpha大小。轮廓边界调整。轮廓厚度
UE4中高亮描边的两种材质实现方式.pdf
07-26
物体描边高亮是游戏中常见的操作，该文档包含了两类物体描边高亮的方法，都是通过用材质进行解决，效果图可看我之前发的博客。跟着操作就能实现，仅用于学习。
UE4卡通材质
09-04
https://blog.csdn.net/qq_36409711/article/details/82380528 ue4卡通效果
利用UE4后处理材质实现描边效果
绿洲守望者
05-24 5586
利用UE4后处理材质实现描边效果 方法一 方法二 方法一 后期处理材质连接节点如下： 原理分析： 获取场景法线向量后，通过其中一个做一点点UV偏移，是两个结果做差，颜色值越接近，插值越小，相反越大，而一般需要描边的位置就是向量相差较大的像素点，再用基础颜色加上这个差值就会出现描边效果。 方法二 后期处理材质连接节点如下： 原理分析： DDX和DDY分别是求该像素点与右侧，下侧像素点颜色插值的函数，像素点颜色值与其周围像素颜色值相差较大，说明是物体边界，因此只需要获取到相差的值，（要求绝对值，因为有.
【UE】材质描边、外发光、轮廓线
ChaoChao66666的博客
09-07 4425
【UE】材质描边、外发光、轮廓线
UE4 制作描边材质并进行后期效果延伸
qqQQqsadfj的博客
03-02 345
sphereMask内部为1，外部为0，所有外部就用场景颜色，内部用描边效果。上下左右都减一边产生描边。R的增大，且颜色变化。
UE5中实现后处理深度描边
UE4引擎技术分享
03-02 1500
后处理深度描边可以通过取得边缘深度变化大的区域进行描边，一方面可以用来做角色的等距内描边，避免了菲尼尔边缘光不整齐的问题，另一方面可以结合场景扫描等特效使用，达到更丰富的效果
UE4之物体描边
董国政的博客
12-18 7431
物体描边是无论游戏开发还是VR项目开发都经常会用到的一样东西 自己闲着没事研究了一下，其实也是非常简单的 本教程使用的是材质的方法，如果你又更好的方法，也不吝赐教 首先我们看一下效果图： 1，第一步下载我们需要用到的材质，这里我打包放到百度云了 请自行下载，如果链接失效，请联系我， 链接：https://pan.baidu.com/s/1eTfzCg6 密码：dqcx 这是一个U
ShaderMaterial怎么实现轮廓描边效果
06-07
要实现轮廓描边效果，可以使用ShaderMaterial来为目标物体添加一个轮廓材质。以下是一种实现轮廓描边效果的方式： 1. 首先，在着色器中使用Sobel算法来检测物体表面的边缘。 2. 根据Sobel算法的输出值来确定哪些像素属于物体表面的边缘。 3. 将边缘像素的颜色设置为轮廓材质的颜色，将非边缘像素的颜色设置为目标物体的颜色。 4. 将轮廓材质应用到目标物体上。 下面是一个简单的实现例子： ```glsl // 顶点着色器 varying vec3 vNormal; void main() { vNormal = normal; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } // 片元着色器 uniform vec3 outlineColor; varying vec3 vNormal; void main() { vec3 edge = vec3(1.0) - abs(vNormal); float edgeFactor = (edge.x + edge.y + edge.z) / 3.0; vec3 color = mix(outlineColor, vec3(1.0), edgeFactor); gl_FragColor = vec4(color, 1.0); } ``` 在这个着色器中，我们使用了一个Sobel算法来检测表面的边缘。我们计算了法线向量的绝对值，并将其与1.0相减，以获得一个表示边缘的向量。然后，我们将这个向量的平均值作为边缘因子来混合轮廓颜色和目标物体颜色。 在使用ShaderMaterial时，我们可以将这个着色器编译并将其应用到目标物体上。同时，我们还需要设置轮廓颜色和其他材质属性（如透明度、混合模式等）。 ```javascript const outlineMaterial = new THREE.ShaderMaterial({ uniforms: { outlineColor: { value: new THREE.Color(0x00ff00) }, }, vertexShader: vertexShader, fragmentShader: fragmentShader, }); const object = new THREE.Mesh(geometry, material); object.add(new THREE.Mesh(geometry, outlineMaterial)); ``` 这里我们将轮廓材质添加到了目标物体的子对象上，这样它就能够在目标物体周围形成一个轮廓。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值