Unity实现地图扫描效果

简介

游戏中许多地方会需要用到扫描效果，比如无人深空中的扫描，手雷扔出去前的预判范围，死亡搁浅等等，笔者在扫描的基础上作了一定个人发挥，使扫描支持自定义贴图，最终效果如下：

unity 地图扫描效果 scan shaderhttps://www.zhihu.com/video/1248720342061064192

同时再附上相关游戏的图示：

基础概念

诚然，我们可以非常直接的使用单独物体并附上相关shader，在vertex阶段计算顶点位置，在frag阶段计算距离中心点位置的距离并显示相对应的颜色即可。但往往扫描这件事情是对整个地图进行的，中间扫描到的物体不能完全保证就是使用扫描材质，而且如果是大量物体，还会导致大量的多余计算。

换一种方式，我们使用屏幕后处理，只处理要显示的像素，那就可以省下大量的性能

那么怎样才能获取到对应的位置信息呢，这就可以利用到摄像机的深度贴图

关于深度图部分，建议优先阅读文章神奇的深度图：复杂的效果，不复杂的原理，同时这里参考了Shaders Case Study – No Man's Sky: Topographic Scanner视频中的实现，以上图片也是部分截取，视频对深度图以及效果的实现都有详细介绍，推荐观看。

了解完毕深度相关的知识后，我们可以利用以下相关代码来测试深度值的获取：

//cs部分
//保存深度图
scanCam.depthTextureMode |= DepthTextureMode.Depth;

//shader frag部分
//获取摄像机的深度图取样其深度值
float depth = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i.uv_depth);
//将深度归一化
float linearDepth = Linear01Depth(depth);
//转换为黑白色输出
return fixed4(linearDepth,linearDepth,linearDepth,linearDepth);

放下对比图：

我们可以非常明显的看到，越往远处颜色越亮，也就代表深度值越接近1，像素点的距离也就越远，因此只要在frag阶段对比扫描深度和像素深度就可以非常快速的实现以相机为中心的扫描，核心代码如下

fixed4 frag (v2f i) : SV_Target
{
    fixed4 col = tex2D(_MainTex, i.uv);

    //计算深度
    float depth = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i.uv_depth);
    float linearDepth = Linear01Depth(depth);

    //通过像素深度是否在扫描的一定范围
    if(linearDepth<_ScanDepth&&linearDepth>_ScanDepth-_ScanWidth/_CamFar&&linearDepth<1)
    {
        //做一个渐变效果
        fixed scanPercent = 1 - (_ScanDepth-linearDepth)/(_ScanWidth/_CamFar);
        return lerp(col,fixed4(1,1,0,1),scanPercent);
    }

    return col;
}

效果如下：

实际上做到这里，如果是做基于摄像机的扫描，我们的工作已经基本完成了，但是要实现类似死亡搁浅或全境封锁中的效果，我们还需要介绍怎么获取屏幕像素坐标以及像素法线。

获取屏幕像素的世界坐标

由于我们使用的是屏幕后处理，不能直接获取到屏幕坐标，需要使用一些trick。这里参考了Unity Shader笔记（三）在片段着色器中获取世界坐标，文章讲的非常清晰，这里不多赘述，简单总结归纳如下：

使用矩阵方式，我们可以得到像素的屏幕坐标以及深度坐标，使用相机的投影逆矩阵就可以计算出像素位置，这个方法适用性较好，但在需要在frag阶段做矩阵计算，效率较低。
由于屏幕后处理的特殊性，最终渲染阶段就是一个quad平面，而且是非常规整的矩形，其vert阶段实际只计算4次，可以在这一阶段把相机原平面相对于相机的坐标位置保存，到了frag阶段就会自动做插值，得到自相机到远平面的像素点的向量，用这个向量加上相机自身的世界坐标就能够得到像素的坐标，但需要注意相机是正交还是透视。

为了实现效率，我们使用透视相机加上第二种方案实现。

有了屏幕像素的世界坐标，我们就可以非常方便的计算除了相机之外其他点的对应距离，此时就能实现全境封锁中的手雷效果：

使用屏幕法线信息

此时的你觉得效果还是不够炫酷，想要给扫描做出点花样，加点花纹之类的，这时候就需要我们的法线图登场。

法线图，顾名思义就是记录了当前屏幕各个像素法线信息的图像，我们这时候需要将相机的depthTextureMode设置为DepthNormals模式，shader部分如下：

sampler2D _CameraDepthNormalsTexture;

fixed4 frag (v2f i) : SV_Target
{
    float tempDepth;
    half3 normal;  
    //从法线深度图中获取对应的值
    DecodeDepthNormal(tex2D(_CameraDepthNormalsTexture, i.uv), tempDepth, normal);  
    //让法线由屏幕坐标转化为世界坐标
    normal = mul( (float3x3)_CamToWorld, normal);  
    //对法线方向取绝对值
    return fixed4(abs( normal),1);
}

我们可以得到如下效果：