在三维可视化中,尤其是海量大数据的地理三维可视化中,我们通常会遇到下面这些问题:
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制作三维地理数据效果。
免费使用地址:MapVGL。