地图可视化百度前端工程师教你如何在地图上

大家好,这里是《地图可视化》栏目第三期。前两期我们从产品应用视角为大家带来了:1.疫情之下,地图可视化能做什么?2.新冠疫情时空可视化平台本期我们邀请了百度地图前端工程师,从技术视角出发,教大家如何在地图上实现炫光可视化效果。在三维可视化中,尤其是海量大数据的地理三维可视化中,我们通常会遇到下面这些问题:1.数据量太大,重点不能很好地凸现出来;2.效果平淡,不够炫酷。为了解决上述问题,MapVGL提供了后处理效果。什么是后处理效果如果你熟悉3D可视化,你一定听说过后处理效果,或者后期处理,通常是指在渲染完整个场景得到屏幕图象后,再对这个图像进行一系列操作,从而实现各种屏幕的特效。通过这种技术,为可视化效果添加更多艺术效果,使炫酷感更上一层楼。简而言之,你可以理解为这是对可视化效果进行“滤镜加美颜”的操作。而接下来,我们就介绍一下Bloom这种后处理效果,Bloom又称“炫光”效果的制作过程。离屏渲染要实现后处理效果,首先得明白“离屏渲染”这个概念。通常来说,我们开发的可视化效果,在创建后都是直接渲染到屏幕上的;而离屏渲染则是通过建立一个或多个“帧缓冲”,将我们创建的可视化效果渲染为一个纹理,放到帧缓冲中,在帧缓冲中通过修改纹理数据实现对原图像的二次加工,即给原图“美颜”的操作。这里我们不对帧缓冲的实现过程过多展开,大家只要知道原理即可,有了帧缓冲和离屏渲染,我们就可以做一些简单的后处理效果了。后处理效果为了让你更好地理解后处理强大的美颜效果,我们先举一个最简单的后处理效果的例子,假如你创建了一个如下的3D场景:我们现在将这个渲染场景保存为纹理放到帧缓冲中,即可访问渲染画面输出的每个颜色,在片元着色器中将这些颜色反相并不是很难。我们将会从屏幕纹理中取颜色值,然后用1.0减去它,对它进行反相:voidmain(){FragColor=vec4(vec3(1.0-texture(Sampler2D,TexCoords)),1.0);}仅仅1行代码,就能将上面的场景的颜色变反相,很酷吧!炫光效果炫光效果用来突出表现很亮的颜色,因为传统的RGB只能表现0-范围的颜色,所以对于超出这个范围特别亮的颜色,会通过高光溢出的特效去表现,使我们感觉到物体真的有种明亮的感觉。炫光效果实现起来相对来说比较复杂,需要使用多个着色器和多个帧缓冲,来回切换渲染,但是原理并不复杂,接下来就详细说一下如何来制作炫酷的炫光效果。拿文章开头的飞线来举例,丑小鸭变成白天鹅只需要下面三步:1.提取亮色首先我们先拷贝一张原图待用,然后在另一个帧缓冲中把原图中亮度超过阈值的部分提取出来。可以看到,只有原图像的一部分被过滤出来。我们再把提取过亮色的图像传到下一个帧缓冲,进行接下来的操作。2.高斯模糊传统的高斯模糊算法是二次高斯模糊,即进行一次权重为10的模糊,我们需要进行10*10=次采样,而这个采样过程恰好也还挺消耗性能的。好在高斯方程可以允许我们把二维方程分解成2个一次方程,一个描述水平权重,另一个描述垂直权重。这样我们只需要增加一次帧缓冲绘制,就能实现两步高斯模糊,将采样次数降为10+10=20次,大大节省了性能。进行模糊后的图像如下:3.合并图像还记得我们在第一步中保存了一张原图吗?现在我们把上面模糊过的图像叠加到第一步中保存的原图上,就完成了我们的炫光效果。应用场景在地理时空大数据分析应用中,Bloom效果可以让大数据更直观呈现,帮助我们快速发现数据价值。那么,这些效果能具体应用到哪些工作场景呢?举个“栗子”:我们在分析人群迁徙时,Bloom效果可以更直观地表达人口流动时空特性;分析城市人口空间分布时,Bloom效果可以帮你快速发现人群聚客点;分析城市基础设施分布时,Bloom效果可以让你一眼就能发现商业聚集地等等。此外,Bloom效果也可被应用于大屏可视化产品中。(点击


转载请注明:http://www.aierlanlan.com/rzgz/7410.html