WebGL-3D地图大俯仰角的雾化处理

原文连接

导语：除了画布宽高以外，3D地图的可视范围还受到俯仰角、旋转角度的影响。在大俯仰角状况下，为了下降瓦片加载和渲染的耗时，在地图远端不加载瓦片，瓦片边缘会变得很是突兀。因此须要对瓦片边缘进行雾化处理，实现渐隐效果，优化用户体验。

问题背景

地图的渲染原理请自行了解：Web地图呈现原理，其中重点了解地图数据以瓦片为单位进行加载和绘制这一点便可。在3D地图中，因为有俯仰角和水平旋转角的存在，墨卡托投影上的可视范围与可视窗口大小并不相同，会呈现一个梯形：

当俯仰角增大时，梯形上半部分会快速扩大，致使加载的瓦片过多而影响性能，因此须要对远端瓦片进行截断。而截断后边缘比较突兀，因此须要对边缘作雾化处理，优化体验，以下图。

解决方案

瓦片加载限制

注：下文涉及到3D世界中各坐标系统的相互转换，需提早了解OpenGL坐标系统，以及略懂线性代数，不然可能晕头转向不知所云（画图太麻烦了，见谅）。

在投影空间中地图的俯仰角变化所引发的可视范围的变化以下图左侧所示，45度时瓦片加载数量大约为0度时的1.5倍，而且随着俯仰角增大而快速上涨。为了减小瓦片加载数量，必须舍弃一部分瓦片。考虑到透视投影形成的近大远小，远端的瓦片被压缩后可分辨度很低，因此能够舍弃，即对可视空间的顶部进行裁切。

如何裁切，这里须要先介绍一下可视范围的计算方法。在不考虑裁切的状况下，可视区域的四个顶点均在地图平面（z_world=0平面）上，即顶点在世界空间内的坐标可表示为(x_world, y_world, 0, 1)，而后通过与视图投影矩阵相乘获得裁剪空间坐标，裁剪空间可简单映射到屏幕空间。因此可反推回去，经过屏幕空间的四个顶点，映射到裁剪空间坐标，与视图投影矩阵的逆矩阵相乘后可获得可视区域的四个顶点坐标。其中较难理解的是裁剪空间的z_clip值没法肯定，能够取-1和1两个值，逆变换后可获得两个世界坐标肯定一条直线，该线与z_world=0平面的交点即最终的顶点坐标。

因此若是要裁切，由上图所示，在世界空间内咱们切掉的是顶部梯形阴影部分，所对应到屏幕空间切掉的是顶部矩形阴影部分，那么咱们须要获得屏幕空间的一条水平裁切线，即图中的y值。假如以45度时的梯形上半高度为标准，经过简单的几何计算可得其为1.93185 * view.top，可近似为2 * view.top，那么可取世界坐标(0, 2 * view.top, 0, 1)做为裁切点，将其变换到屏幕空间(x_screen, y_screen)便可获得y值，记为fogEdge。以后再根据上文所述的逆变换，使用(0,y), (1,y), (0,1), (1,1)四个顶点反推可视区域的四个顶点。

至此咱们获得的俯仰角70度时的瓦片加载效果以下图：

雾化处理

雾化并不难理解，其本质上是一种颜色混合，将本色与雾色（为了适应个性化的地图样式咱们使用的雾色与大地颜色保持一致）进行混合。随着混合因子的变化实现渐变效果。可参考WebGL 雾，着色器代码以下所示：

gl_FragColor = originalColor * (1.0 - fogFactor) + fogColor * fogFactor;
复制代码

地图是分图层绘制的，若在每一个图层的着色器中实现雾化逻辑实在过于冗杂，因此后处理方式更为合理。所谓后处理，即在帧缓冲中绘制完毕后，将缓冲关联的纹理做为输入进行图像处理。为了让渐变效果更平滑，可使用smoothstep函数让雾化因子从0平滑过渡到1，以下图所示：

着色器代码为：

float fogFactor = 1. - smoothstep(fogEdge, fogEdge + fogRange, y_screen);
复制代码

至此咱们获得初步的雾化效果以下图：

可见边缘已被雾彻底遮盖了，可是顶部仍显空洞，能够加上一点蓝天的背景效果，可使用纹理也可使用纯色，仍然也须要一个渐变过程，雾化因子变化以下：

获得效果图以下：

根据深度进行雾化

注：如下内容涉及到深度测试，需提早了解OpenGL深度测试，不然可能晕头转向不知所云。

以上是直接根据纹理纵向坐标计算雾化因子，虽然效果已符合预期，但仍有不合理之处。好比楼块，若是楼块太高，就算其距离视点较近，其顶部仍然会被雾化，不符合天然认知。因此雾化因子应根据深度值进行计算。

深度纹理

通常来讲，帧缓冲区对象的深度关联对象为渲染缓冲区对象（renderbuffer object），而渲染缓冲区是没法传入着色器进行读取的，因此须要关联到一个纹理对象。要让纹理对象支持深度值的写入，须要使用一个扩展WEBGL_depth_text，这个扩展使纹理支持gl.DEPTH_COMPONENT格式，同时能支持gl.UNSIGNED_SHORT和gl.UNSIGNED_INT类型，相应代码以下：

// 开启深度纹理扩展
if (!gl.getExtension("WEBGL_depth_texture")) {
	console.error("depth textures not supported");
}

// 设置纹理大小
gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, width, height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null);
复制代码

在帧缓冲上绘制完毕后，将深度纹理传入着色器，将其可视化可获得下图（图中仅对须要雾化的部分读取了深度值进行展现）：

深度计算

如上图所示，虽然咱们可以获取到深度纹理，但这个深度纹理是不完善的，在没有楼块的地方是一片空白，说明深度值为1即没有写入深度。这是由于：(1) 为了不深度冲突，除了建筑物以外其余图层绘制时都关闭了深度测试，因此并无写入深度值；(2) 即便在其余图层上开启了深度测试，使用背景色的地面是没有绘制物的，仍然没有深度值。简单来讲，即目前没法获取到大地平面的深度值。

如何获取到大地平面的深度值？其实深度值是能够计算的，参考OpenGL 投影矩阵。不过并不须要知道它的具体公式，只须要了解到透视投影下深度值与观察空间中的1/z_view是成正比的，即depth = A * (1 / z_view) + B。另外一方面，咱们经过简单的几何计算能够获得：

由此可得大地平面在裁剪空间中的坐标的y值y_clip与深度值depth是成正比关系的，即depth = E * y_clip + F。那么就能够选择两个平面上的坐标点，好比点1(0, 0, 0, 1)和点2(0, 2 * view.top, 0, 1)，经过视图投影矩阵获得(0, 0, z_clip_1, 1)和(x_clip_2, y_clip_2, z_clip_2, 1)，再根据depth = (z_clip + 1) / 2获得depth_1和depth_2，两个方程联立求解便可获得E和F。

float getDepthFromY(float y_clip) {
	return min(mix(depth_1, depth_2, y_clip / y_clip_2), 1.);
}
复制代码

至此能够获得纹理上空白处的深度值了，结合从深度纹理中读取的数值，可视化以下：

雾化因子应相应修改成随深度变化：

获得最终的雾化效果以下图：

能够再看看此时的高楼效果：

动态效果参见附件视频。

问题总结

1. 不管是可视范围裁切仍是深度计算都须要熟练掌握3D的各个空间之间的相互变换关系，须要正反双向思惟能力
2. 雾化本质上是一种渐变的颜色混合，渐变的维度可自由把握
3. 透视投影下深度值与观察空间坐标的1/z成正比
4. 深度缓冲和模板缓冲通常是关联到renderbuffer对象，renderbuffer是没法传入着色器进行读取的，在这里使用了texture对象替代了renderbuffer用于存储深度值，在其余应用场景下也能够直接经过着色器绘制深度或模板到颜色缓冲上，提供更高的精度，也能实现更加自定义的功能