GeoHey地图:我们是如何绘制三维建筑的

今天,GeoHey地图添加了三维效果的建筑,用户通过在地图DIY中新建地图便可使用。下面是几个截图:



为了实现三维的效果,我们采用了伪三维的绘制方法,即实际上我们绘制的是一个个二维的面,通过控制建筑立面绘制的顺序来达到三维的效果。

在计算机图形学里有一个画家算法,它说的是头脑简单的画家在作画的时候总是先绘制距离较远的场景,然后再绘制距离较近的场景,这样近的场景会覆盖远的场景,从而还原现实生活中的可见性问题。

在绘制建筑的时候,我们也采用了这个思想。首先我们在绘制前对所有的建筑进行最大Y坐标的降序排序(在电脑屏幕上,Y坐标越大,越靠近屏幕顶端,你是不是觉得屏幕顶端的物体离你远,屏幕低端的物体离你近呢?),然后一一进行绘制;在绘制某个建筑的时候,首先根据建筑的高度构造出建筑的各个立面,然后还是对立面进行排序,再依次绘制。最后绘制出来的场景感觉就像是立体的了。

当然,使用这种方式绘制在一些情况下会产生不自然的现象,要解决这些现象只能采取对多边形切割的方式绘制。在目前,我们觉得这种方式是有效且高效的。