地图可视化 | 百度前端工程师教你如何在地图上实现炫光可视化效果

大家好，这里是《地图可视化》栏目第三期。前两期我们从产品应用视角为大家带来了：

本期我们邀请了百度地图前端工程师，从技术视角出发，教大家如何在地图上实现炫光可视化效果。

在三维可视化中，尤其是海量大数据的地理三维可视化中，我们通常会遇到下面这些问题：
1.     数据量太大，重点不能很好地凸现出来；2.     效果平淡，不够炫酷。为了解决上述问题，MapVGL提供了后处理效果。

什么是后处理效果

如果你熟悉3D可视化，你一定听说过后处理效果，或者后期处理，通常是指在渲染完整个场景得到屏幕图象后，再对这个图像进行一系列操作，从而实现各种屏幕的特效。通过这种技术，为可视化效果添加更多艺术效果，使炫酷感更上一层楼。简而言之，你可以理解为这是对可视化效果进行“滤镜加美颜”的操作。

而接下来，我们就介绍一下Bloom这种后处理效果，Bloom又称“炫光”效果的制作过程。

离屏渲染

要实现后处理效果，首先得明白“离屏渲染”这个概念。通常来说，我们开发的可视化效果，在创建后都是直接渲染到屏幕上的；而离屏渲染则是通过建立一个或多个“帧缓冲”，将我们创建的可视化效果渲染为一个纹理，放到帧缓冲中，在帧缓冲中通过修改纹理数据实现对原图像的二次加工，即给原图“美颜”的操作。这里我们不对帧缓冲的实现过程过多展开，大家只要知道原理即可，有了帧缓冲和离屏渲染，我们就可以做一些简单的后处理效果了。

后处理效果

为了让你更好地理解后处理强大的美颜效果，我们先举一个最简单的后处理效果的例子，假如你创建了一个如下的3D场景：

我们现在将这个渲染场景保存为纹理放到帧缓冲中，即可访问渲染画面输出的每个颜色，在片元着色器中将这些颜色反相并不是很难。我们将会从屏幕纹理中取颜色值，然后用1.0减去它，对它进行反相：

void main(){

    FragColor =vec4(vec3(1.0-texture(Sampler2D, TexCoords)),1.0);

}

仅仅1行代码，就能将上面的场景的颜色变反相，很酷吧！

炫光效果

炫光效果用来突出表现很亮的颜色，因为传统的 RGB 只能表现0 - 255范围的颜色，所以对于超出这个范围特别亮的颜色，会通过高光溢出的特效去表现，使我们感觉到物体真的有种明亮的感觉。

炫光效果实现起来相对来说比较复杂，需要使用多个着色器和多个帧缓冲，来回切换渲染，但是原理并不复杂，接下来就详细说一下如何来制作炫酷的炫光效果。拿文章开头的飞线来举例，丑小鸭变成白天鹅只需要下面三步：
1.     提取亮色

首先我们先拷贝一张原图待用，然后在另一个帧缓冲中把原图中亮度超过阈值的部分提取出来。

可以看到，只有原图像的一部分被过滤出来。我们再把提取过亮色的图像传到下一个帧缓冲，进行接下来的操作。2.     高斯模糊

传统的高斯模糊算法是二次高斯模糊，即进行一次权重为10的模糊，我们需要进行10*10=100次采样，而这个采样过程恰好也还挺消耗性能的。好在高斯方程可以允许我们把二维方程分解成2个一次方程，一个描述水平权重，另一个描述垂直权重。这样我们只需要增加一次帧缓冲绘制，就能实现两步高斯模糊，将采样次数降为10+10=20次，大大节省了性能。进行模糊后的图像如下：

3.     合并图像

还记得我们在第一步中保存了一张原图吗？现在我们把上面模糊过的图像叠加到第一步中保存的原图上，就完成了我们的炫光效果。

应用场景

在地理时空大数据分析应用中，Bloom效果可以让大数据更直观呈现，帮助我们快速发现数据价值。那么，这些效果能具体应用到哪些工作场景呢？

举个“栗子”：我们在分析人群迁徙时，Bloom效果可以更直观地表达人口流动时空特性；分析城市人口空间分布时，Bloom效果可以帮你快速发现人群聚客点；分析城市基础设施分布时，Bloom效果可以让你一眼就能发现商业聚集地等等。

此外，Bloom效果也可被应用于大屏可视化产品中。（点击查看更多大屏效果）

◆ ◆ ◆  ◆ ◆

看完百度前端工程师对Bloom可视化效果实现的介绍，你是不是已经迫不及待想要操作自己的炫光地图了？不着急，为了解决海量大数据的三维地理数据展示问题，我们不久前已经推出了可视化库MapVGL——一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。不管你是GIS工作者还是开发者，都可以运用MapVGL制作三维地理数据效果。（点击下方阅读原文查看详情）

往期推荐：