zoukankan      html  css  js  c++  java
  • 如何为物体加上轮廓效果

    本文参考自教程,加上自己的一点心得体会。教程里的做法是使用了Unity的Post Processing Stack,这里并没有使用,而是用的自己写的脚本,调用OnRenderImage实现后处理。

    首先,为什么要用后处理的方式去实现轮廓效果呢?这里,效果的实现依赖于对屏幕空间中相邻的若干点进行采样,获得深度或者法线信息。而如果用常规的方式去实现,frag里只能拿到物体的screenPos,然后通过tex2Dproj去采样,拿不到相邻点信息的。

    那么,在frag里需要做哪些事情呢?我们定义的轮廓基于以下事实:如果相邻的若干点采样出的值差异过大,那么此处就存在轮廓。这里我们使用深度值和法线来作为衡量标准。我们定义_Scale作为相邻像素的距离,_Scale越大,距离越远。相关代码如下:

    float halfScaleFloor = floor(0.5 * _Scale);
    float halfScaleCeil = ceil(0.5 * _Scale);
    float2 bottomLeftUV = i.uv - _MainTex_TexelSize.xy * halfScaleFloor;
    float2 topRightUV = i.uv + _MainTex_TexelSize.xy * halfScaleCeil;
    float2 bottomRightUV = i.uv + _MainTex_TexelSize.xy * float2(halfScaleCeil, -halfScaleFloor);
    float2 topLeftUV = i.uv + _MainTex_TexelSize.xy * float2(-halfScaleFloor, halfScaleCeil);
    

    可以发现,当_Scale为奇数(2k+1)时,halfScaleFloor的值为(k)halfScaleCeil的值为(k+1);当_Scale为偶数(2k)时,halfScaleFloorhalfScaleCeil的值均为(k)。这样可以保证,采样像素永远位于四个相邻像素的中心,而且,两个距离最远的相邻像素的距离一定为halfScaleFloor + halfScaleCeil = _Scale

    然后,我们采样这四个相邻像素的深度值,计算对角的深度差:

    float edgeDepth = sqrt(pow(depth0 - depth1, 2) + pow(depth2 - depth3, 2)) * 100;
    return edgeDepth;
    

    这里,乘以100是因为采样的深度值都在0~1之间,差值会比较小。效果如下:

    从图中可以看到,有一些物体的平面仍然被绘制出来,呈现深灰区域,为了将其抹去,我们可以给edgeDepth设定一个阈值,高于阈值才会保留:

    但是这样又有一个问题,就是一些本来是轮廓的地方也被抹去了。考虑到用一个阈值不太准确,因为离相机越近的物体,深度值越小,越远的物体,深度值越大,而深度值的分布又是不均匀的,这就存在一种情况,就是距离相同的两个物体,离相机越远,实际深度的差值越小(如下图)。因此,有必要将物体本身的深度值考虑进来,即阈值与物体本身的深度值有关,深度越大,阈值越大:

    float depthThresold = _DepthThresold * depth0;
    edgeDepth = edgeDepth > depthThresold ? 1 : 0;
    

    改进后的效果如下:

    但现在好像又有些矫枉过正,cube的顶面和侧面被当作轮廓绘制出来,楼梯的一部分轮廓被抹去了。这时就需要借助法线了。通过对四个相邻点采样法线,按照深度值类似的方式进行处理,取差值的max:

    现在就剩下一些平面被当作轮廓绘制了,为了解决这个问题,需要引入视线向量。当视线向量与平面法线的夹角越小时,深度的阈值越低;反之,夹角越大,阈值越高。这样就可以避免剩下一些几乎与视线齐平的平面被当作轮廓绘制。最终的深度阈值是如下的形式:

    float depthThresold = _DepthThresold * depth0 * nDotL;
    

    我们对nDotL进行了调制:

    float nDotL = 1 - viewDir * viewNormal;
    nDotL = saturate((nDotL - _NDotLThresold) / (1 - _NDotLThresold)) * _NDotLScale + _NDotLOffset;
    

    其中,_NDotLOffset是一个初始值,保证最终nDotL的最小值。saturate((nDotL - _NDotLThresold) / (1 - _NDotLThresold))是用来限制nDotL 的生效范围,只有大于等于_NDotLThresold阈值的才会生效,并重新映射到([0,1])范围内。_NDotLScale是用来控制nDotL影响幅度的值。

    最后,把物体自身的颜色与轮廓进行混合:

  • 相关阅读:
    第五章:javascript:队列
    第四章:javascript: 栈
    第三章:javascript: 列表
    第二章:javascript: 数组
    第一章:javascript: 数据结构与算法
    第十三章 动画引擎
    第十二章:异步处理
    第十一章:事件系统
    第十章:属性模块
    第九章:样式模块
  • 原文地址:https://www.cnblogs.com/back-to-the-past/p/12845771.html
Copyright © 2011-2022 走看看