Streak后处理效果开了个头，这段时间准备写一些后处理相关的内容，深度是后处理里面一个非常重要的点，我们需要将深度数据在不同空间进行转换然后比较计算。我之前对深度的理解也只是基本理解原理然后把后处理代码写出来了，但对很多知识点非常迷惑，特别是深度重建世界坐标那里，后续找到数学推导过程才最终解惑。

1.Babylon怎么获取深度

Babylon中的深度分为Linear深度和NoLinear深度，在讲Babylon怎么获取深度之前，我们先简单讲一下各个空间系。当我们绘制任意模型（后处理可以认为是绘制了一个占满屏幕的面片），我们先获取的Position数据（模型空间），这是一个相对于模型原点的空间系；通过乘以（左乘）world矩阵变换到世界空间，这是一个相对世界原点的坐标系；这是以再乘以view矩阵变换到观察空间,这个是相对于摄像机的空间系......依次向右计算变化，NDC的数据范围为-1到1，裁剪空间的范围为0-1。当我们获取一级的数据，可以通过向右计算变换得到下一级的数据，也可以依次向左乘以对应变换逆矩阵获取上一级数据。

1.1Linear深度

顾名思义，这种模式的深度数据是线性的，它的范围是0-1，它的值与片元离摄像机的距离等线性比例关系。通过查询Babylon源码，线性深度vDepthMetric是从gl_Position（投影空间数据）归一化生成的，其中depthValues.x的值为camera.minZ,depthValues.y的值为camera.minZ+camera.maxZ。在非反转深度的情况下，深度值越大，片元离摄像机距离越远。

    //Vertex
    gl_Position = viewProjection * worldPos;

    #ifdef USE_REVERSE_DEPTHBUFFER
        vDepthMetric = ((-gl_Position.z + depthValues.x) / (depthValues.y));
    #else
        vDepthMetric = ((gl_Position.z + depthValues.x) / (depthValues.y));
    #endif

    //Fragment
    #ifdef NONLINEARDEPTH
        #ifdef PACKED
            gl_FragColor = pack(gl_FragCoord.z);
        #else
            gl_FragColor = vec4(gl_FragCoord.z, 0.0, 0.0, 0.0);
        #endif
    #else
        #ifdef PACKED
            gl_FragColor = pack(vDepthMetric);
        #else
            gl_FragColor = vec4(vDepthMetric, 0.0, 0.0, 1.0);
        #endif
    #endif

1.2NoLinear深度

顾名思义，这种模式的深度数据是非线性的，它的范围是0-1，数据的分布呈现近密远疏的效果，绝大部分的数据会密集的堆在1的附近，当深度纹理是半浮点数时，离摄像机没多远开始，精度就会开始非常糟糕。通过上述代码可以看出，非线性深度数据来源于gl_FragCoord.z（裁剪空间数据），数据值越大，离摄像机距离越远。

1.3什么是pack

unpack情况下，使用R通道输出纹理，剩下三个通道的数据全部浪费，我们使用单通道纹理就可以避免GBA通道的浪费。但是有些情况下webgl不支持单通道纹理，unpack就会造成内/显存的浪费，pack将float转换成从低到高的4个byte，分别存在四个通道里面，就可以避免通道的浪费。需要注意的是，如果希望用pack存其它数据，该pack会将大于1的值归1，并不适用于储存大于1的数据。

vec4 pack(float depth)
{
    const vec4 bit_shift = vec4(255.0 * 255.0 * 255.0, 255.0 * 255.0, 255.0, 1.0);
    const vec4 bit_mask = vec4(0.0, 1.0 / 255.0, 1.0 / 255.0, 1.0 / 255.0);

    vec4 res = fract(depth * bit_shift);
    res -= res.xxyz * bit_mask;

    return res;
}

float unpack(vec4 color)
{
    const vec4 bit_shift = vec4(1.0 / (255.0 * 255.0 * 255.0), 1.0 / (255.0 * 255.0), 1.0 / 255.0, 1.0);
    return dot(color, bit_shift);
}

2.深度重建世界坐标

深度的常见用途之一是重建世界坐标然后做一些基于世界坐标的效果，例如空间扫光特效，后处理体积云，后处理贴花等。重建世界坐标的方法有很多，这里我使用一种方便配置计算的方法：NDC转换世界坐标，具体数学推导过程可以看链接的博客。在这种方法中，我们只需要筹备NDC空间的坐标，然后通过下列公式就可以计算出世界坐标。

    vec4 clip = invertProjectionView*ndc;
    vec3 worldPos = (clip/clip.w).xyz;

2.1 Linear

由1.1，Linear的Depth深度是归一化于投影空间，我们先得还原投影空间的z值，然后将其转换到NDC空间，NDC的x和y可以通过vUV来还原，这样我们就可以获得每个片元对应的NDC空间的坐标。PlayGround

    //还原Projection空间Z
    float zclip = d * (zmax + zmin) - zmin;
    //转换到NDC的Z
    float zndc = projection[2].z / (1.0 - projection[3].z / zclip);
    //右手坐标系中
    // float zndc = -projection[2].z / (1.0 + projection[3].z / zclip);
    //还原最终NDC
    vec4 ndc = vec4((vUV.x - 0.5) * 2.0,
            (vUV.y - 0.5) * 2.0,
            zndc,
            1.0);

2.2 NoLinear

由1.2，NoLinear的深度是从裁剪空间获取的，裁剪空间的范围是0到1，归一化的范围是-1到1，(需要注意的是，部分情况（Webgpu）NDC的Z的范围是0-1，使用IS_NDC_HALF_ZRANGE进行区分。)变换就比较简单。由图可见float16的时候精度就不已经支持世界坐标的重建：PlayGround，当设置为float32时，可以实现世界坐标的重建，但旋转摄像机的时候依旧会因为精度问题造成闪烁：PlayGround。

      float zndc = d;
      ......
            #ifdef IS_NDC_HALF_ZRANGE
            zndc,
            #else            
                (zndc - 0.5) * 2.0,
            #endif
            1.0);

float16精度

float32精度

3.基于深度的简单应用场景举例

3.1 水体岸边效果