传统的三维建筑模型，如3D MAX或SketchUp构造的模型并不能直接用于WebGL下进行显示，因此需要根据传统数据的特点，并且分析WebGL下所支持的数据标准，建立一个有效的三维建筑物模型的转换流程，将传统建模平台下的三维建筑物模型转换成WebGL所支持的数据类型^[1-3]。

WebGL能够克服客户端浏览器插件安装以及插件兼容性的缺憾，实现跨平台、无插件地进行Web3D的渲染与交互，因而具有更加广阔的应用前景^[4]。WebGL不仅能够调用客户端的资源进行运算，很大程度上缓解服务的压力，还能调用客户端的GPU进行渲染硬件加速，使得三维场景浏览更加流畅，用户的体验感强^[5-8]。而且WebGL标准具有极强的跨平台性和标准化特性，开发人员可以高效率地进行软件开发，降低软件的维护成本和难度^[9-12]。

本文利用WebGL技术，构建基于WebGL标准的三维建筑物模型，并研究实现了三维建筑物模型的数据压缩和多层次细节分级，设计了一个有效的建筑物模型调度算法。

1 WebGL下三维建筑物模型的构建及调度 1.1 模型几何数据简化

边折叠算法的基本思想是在减少两个面和两个顶点的同时，产生一个新的顶点，以此减少模型的细节信息^{[13, 14]}。如图 1所示，折叠边UV减少U和V两顶点并生成了新的顶点V′，V′上下方向两个边在同一条直线上，从而减少了两个面。

而半边折叠的思想则是在此基础上做了一些改进，同样是去掉了两个面，但是并没有产生新的点，只是去掉了一个点，如图 2所示，折叠边UV将U顶点移动到了V顶点，所有与U相关的信息都被V顶点代替，每次半折叠简化操作都会从原有格网中删除一个顶点和两个面，这样一直迭代进行半边折叠操作，直到生成符合标准的简化模型。

利用半边折叠算法对模型进行格网简化时，折叠边的选择是影响最后简化效果的关键，选择合理的折叠边能使得简化之后的模型在几何视觉上的影响变小。

研究三维建筑物模型的几何特征发现，在建筑物模型格网中，如果将那些在一个平面上或者接近于一个平面的三角面用新的三角面来表示，那么在几何视觉上的影响可以达到要求。因此，本文将用边长与“最大夹角”乘积作为折叠边的代价，公式为：

$ \begin{array}{l} \cos \mathit{t}(U, V) = \left| {\;\left| {U - V} \right|\;} \right| \times {\max _{\mathit{\boldsymbol{F}} \in {\mathit{\boldsymbol{T}}_u}}}\\ \left\{ {{{\min }_{\mathit{\boldsymbol{N}} \in {\mathit{\boldsymbol{T}}_{uv}}}}\left\{ {\left( {1 - {\mathit{\boldsymbol{F}}_{{\rm{normal }}}} \times {\mathit{\boldsymbol{N}}_{{\rm{normal }}}}} \right)/2} \right\}} \right\} \end{array} $

(1)

式中，U和V是这条折叠边的两个顶点; U是半边折叠算法中将要删除的点；T_u是所有包含顶点U的所有三角面的集合；T_uv是同时包含U顶点和V顶点的三角面的集合，也就是这条折叠边UV两边的三角面；F和N分别为对应三角面的法向量。

1.2 模型简化算法实现

半边折叠模型的几何数据简化流程如下：

首先，读入三维建筑物的数据建立格网数据和相应的拓扑关系，然后计算每个点所对应的待折叠边的折叠代价值，根据这点代价值的大小由小到大进行排序，折叠代价值越小说明这条边对这个三维建筑物模型格网的几何视觉影响越小；然后对最小折叠代价值的点的待折叠边进行半边折叠操作；半边折叠操作之后，局部拓扑关系会发生改变，因而要对发生变化的部分进行拓扑关系的重建，然后再进行折叠代价值的计算和排序，重复以上半边折叠操作，直到满足模型简化标准为止。

1.3 模型数据的快速调度方法

建筑物模型的调度能在可接受的时间间隔内获取指定区域内的建筑物模型数据^[15-20]。具体实现过程如下：

1) 获取屏幕范围内的网格编码。根据建筑物中心所在位置，将所有建筑物模型划分为若干网格并进行编码，通过获取屏幕范围内的经纬度计算出屏幕范围内所有的网格编码。

2) 获取这些网格中所有建筑物模型的位置信息。建筑物模型都存储在数据库中，先去客户端的缓存中读取这些建筑物模型的位置信息，如果在客户端缓存中没有搜索到某些建筑物模型的位置信息，则需要根据建筑物模型的编号向数据库服务器发送查询请求。

3) 获取屏幕范围内的建筑物模型数据。根据步骤2)得到网格中建筑物的位置信息之后，需要对这些建筑物模型进行判断。

4) 由近到远显示建筑物模型。

5) 设置模型的LoD(levels of detail)层级。通过步骤4)中的排序，可以根据建筑物中心到视点的距离进行划分，给每一个模型制定一个LoD层级。

6) 下载模型数据。通过步骤3)确定了视域范围内要显示的模型，步骤5)确定了每个要显示的模型的LoD层级，获取LoD层级相应的建筑物模型数据，并将这些数据缓存到客户端。

7) 渲染三维建筑物模型。按照步骤4)中模型的排序由近到远渲染模型。

2 WebGL三维场景建立及发布 2.1 影像数据金字塔的生成

确定数据的组织方式和明确数据的空间参考系统后，要对影像数据进行瓦面切割，具体步骤如下：

1) 计算影像数据所覆盖的范围。

2) 根据影像的分辨率设定影像切片的LoD层数。

3) 在确定了LoD层数之后，就可以创建金字塔数据的文件夹，根据层级给每一个层级创建一个文件夹，同时生成一个金字塔模型的结构文件。

4) 采用多线程的方式将所有的影像数据进行切片，得到区域范围内全部影像数据的最底层瓦片数据，节省运算时间。

5) 对生成的瓦片数据进行重采样，运算过程中发现，越往上层，数据运算量越小，这一特性与数据金字塔的数据量是一致的。

通过以上5个步骤得到影像数据的金字塔数据。影像数据的瓦片数据为256像素×256像素的png格式的文件。

2.2 WebGL三维场景的实现

当用户通过浏览器访问三维场景网站时，服务器将数据传送到浏览器，浏览器调用终端计算机的资源进行渲染，将三维场景展现给用户。

城市三维场景包含3种数据：数字正射影像数据(digital orthophoto map, DOM)、数字高程数据(digital elevation model, DEM)和建筑物模型数据。

首先在HTML页面中添加一个Canvas元素，然后在页面加载代码中调用这个元素，分别将DOM数据和DEM数据添加进去。然后实现建筑物模型的动态加载，当视点和视域发生改变时，根据调度算法将相应LoD层级视域范围内的模型添加进来，即给页面添加一个监听事件，获取视点的参数，视点参数发生变化时，就调用建筑物模型的调度算法，获取相应LoD层级的建筑物模型的ID，将相应的建筑物模型添加到场景中。

进行城市三维场景漫游时，对三维场景的渲染速度有一定的要求，不能出现卡顿，通常用每秒渲染帧数(FPS)来判断，通常渲染速度达到10 FPS以上，浏览器不会有很明显的卡顿。本文对不同视点高度、不同数量模型和不同精细程度的模型进行了统计，分别计算每秒渲染的帧数，统计结果如表 1所示。

由表 1可知，当视点高度为4 000 m时，三维场景的每秒渲染帧数最低，为18.75 FPS，这是因为渲染的模型数量太多数据量较大；视点下降到1 000 m时，LoD层级为中级的模型数据比4 000 m时的粗糙模型上升了一个层级，但是由于视域范围内的建筑物模型减少了，FPS反而上升到25.62，比4 000 m高度的渲染帧数高；随着视点高度越来越低，建筑物模型的LoD层级越来越细，模型的数量也在减少，而三维场景渲染的帧数维持在20~30之间。最后通过视角倾斜，使得视域范围内出现不同级别的建筑物模型，而此时的每秒渲染帧数没有很大的变化。由此可以看出本文所实现的三维场景在加载不同LoD层级的建筑物模型时，都能维持在一个较为理想的渲染效果(20 FPS左右)。

3 结束语

本文通过研究WebGL下三维建筑物模型渲染的方法，解决了WebGL下三维建筑物模型的组织与管理问题。设计并实现了基于WebGL的三维城市展示系统。首先，利用半边折叠的网格简化方法来简化三维建筑物模型；其次，设计了三维建筑物模型的调度算法。实验证明，这个调度算法能有效控制三维场景中建筑物模型的数据量，提高浏览三维场景的流畅程度。