Scientific Journal of Earth Science March 2015, Volume 5, Issue 1, PP.5-11
Visualization of Building Model in 3D WebGIS based on Bounding Sphere and Distance Tianyang Yi1#, Luo Chen2, Jun Li3 School of Electronic Science and Engineering, National University of Defence Technology, Changsha 410073, China #
Email: 13611386825@163.com
Abstract To solve the Non-adaptive of traditional theories and techniques in loading and display 3D building models for WebGIS based on Browser/Server mode, this paper provide a new strategy which according to the bounding sphere of model and the distance between the camera and model. The following experiment results prove that with this strategy massive 3D models can be rendered effectively and smoothly. Keywords: 3D Visualization; WebGIS; B/S Mode; WebGL
基于模型包围球及视点距离的三维 WebGIS 建筑 模型加载策略* 易天洋 1，陈荦 2，李军 3 国防科学技术大学 电子科学与工程学院，湖南 长沙 410073 要：针对传统大规模三维建筑模型加载方法不适用于 B/S 架构下网络 GIS 三位模型展现的问题，研究并提出一种基
摘
于模型包围球大小及其与视点距离的模型加载策略，实现大规模三维建筑模型的层次化递进加载。实验结果表明，该策 略能有效解决 B/S 架构下的大规模三维建筑模型加载时出现的帧率下降及响应延迟问题。 关键词：三维可视化；网络地理信息系统；浏览器/服务器模式；WebGL
引言 地理信息系统 (Geographic Information System) 是一种特定的十分重要的空间信息系统，它能提供对地 理数据的存储、显示与分析功能，对国家及社会更高效地利用地球空间与改造自然提供巨大的帮助[1]。随着 信息化时代科技的发展，GIS 已进入百姓日常生活，在个人的住房选址、出行交通等领域开始扮演愈发重要 的角色。随着三维技术的迅猛发展，人们已不再满足于传统二维平面 GIS，而追求更加直观的地理信息三维 表达。三维 WebGIS 的优势在于能够真实地反映现实世界，通过网络实现了人们在电脑或移动载体上真实观 察地球的愿望。但是到目前为止，三维 WebGIS 的发展依然存在诸多问题没有比较完善的解决，例如，当面 对海量三维数据时，加载速度会比较缓慢。当数据比较分散的时候，不能很好的集中管理发布数据供用户使 用。当数据格式种类繁多的时候，不能很好的在同一平台显示多种数据格式[2]。鉴于此，本文探索了一种针 对 3D 建筑模型加载时的策略，以解决在模型加载过程中存在的网络延迟与渲染卡顿的问题。
1 相关核心技术 进入 Web2.0 时代，网络的普及与高效，人们已能随时随地使用移动终端利用 GIS 系统进行决策，而与 *基金资助：国家 863 项目 (2015AA120101)。 -5http://www.j-es.org
传统 C/S 架构下 GIS 数据管理和可视化的研究与实践相比，地理信息数据在 B/S 架构下的三维可视化研究相 对滞后。受制于 Web3D 技术的瓶颈，用以实现三维 WebGIS 场景的传统的 Web3D 技术，包括 Flash (Flex)、 Java3D、X3D 等技术，都需要加载组件或者预先安装客户端（或插件），而且具有显示效果不佳、兼容性差 等缺陷。WebGL 作为新一代 Web3D 图形标准，具有不需要组件加载、渲染效果好、兼容性好等优点，因而 具有极其广阔的探索空间[3]。基于此，本文选用 WebGL 构建实验所需的 B/S 架构下的网络环境。
1.1 WebGL WebGL 诞生于 2010 年，是由科纳斯组织 (KhronosGroup) 开发和维护的一种基于 JavaScript 的免费的， 跨平台的应用程序接口 API[4] 。它的前身是 OpenGLES2.0，其使用 OpenGL 的着色语言 GLSL，可以为 HTML5Canvas 提供硬件加速渲染，其最重要的优势在于用户不需要下载任何插件即可进行三维图形渲染及 GPU 硬件加速；其作为一项开放的 web 标准，已被主流硬件产品和各大浏览器软件广泛支持，任何兼容的 浏览器中均能使用（如 FireFox、GoogleChrome、Opera、AppleMacOSSafari 等） ，包括 Google、AMD、NVIDIA 等大公司已成为此标准工作组的成员。
1.2 GlTF (GLTransmissionFormat) GlTF 是同由开发 WebGL 的科纳斯组织 (KhronosGroup) 开发的一种专门面向 GL 系列接口 (OpenGL, OpenGL ES, WebGL) 的 3D 资源格式，它很好地连接了目前使用最宽泛的 COLLADA 模型交换格式与 GL 系 列 API。其优点在于，相对于其他 3D 模型格式，空间占用小、传输速度快，与 GL 系列 API 对接更加良好 [5]
。 GlTF 的主要结构分为四个部分： (1) GlTF 文件 (.gltf)，实际上是一个 JSON 文件，存储模型主要信息，包括节点层次、相机、材质、光
源、纹理地址等参数，是整个 GlTF 文件的接入口； (2) 二进制文件 (.bin)，用来存储各坐标信息（顶点、索引、纹理等）； (3) 着色器文件 (.glsl)，分为顶点着色器 (Vertex Shader) 和片元着色器 (Fragment Shader) 两个部分，分 别用于模型渲染管线对应的着色阶段； (4) 图像文件夹，主要存放模型所需的全部纹理贴图，常见格式有 PNG、JPG 等。
2 数据预处理与存储组织 2.1 模型数据转换 目前 3D 模型建模并无统一组织规范，不同领域所用的建模工具亦不相同，常见的建模软件有 3DsMAX、 Maya、Rhino、GoogleSketchUp 等。3D 建筑模型在 GIS 中的应用方式不同于其它领域，其特点在于无过高精 细程度要求而主要追求整体大规模可视化效果。因此，作者尝试转换目前主流建筑外观粗建模领域所使用的 Google 公司推出的三维制图软件 SketchUp 的文件格式，并对数据进行了预处理（如图 1 所示） ，使之先行转 换成 3D 模型主流传输格式 COLLADA[6]，之后通过由科纳斯组织所公布的 COLLADA-GlTF 模型转换工具与 Python 批处理相结合，大量转换所需数据，并将之上传至服务器端，实验表明转换效果理想（如图 2 所示）。 批量处理 程序
SketchUp
模型导出
COLLADA 模型
模型转换
图 1 预处理流程 -6http://www.j-es.org
GlTF 模型
数据库
图 2 由 SU 格式转换的北京部分建筑模型
2.2 模型组织方式 3D 模型在 GIS 中的应用方式不同于其它地理信息，该数据类型主要用于提升客户可视化体验，只有当 相机距离模型一定范围内才有加载意义。因而在大规模 3D 模型（特别是城市建筑模型）组织上有其独特之 处，将城市中建筑模型依照地理瓦片进行存储[7]，待相机漫游到所需观察城市区域上空并离地面一定高度内 时再予以加载，既符合 3D 模型的使用方式又避免过大数量模型同时加载造成的本地计算资源与存储空间的 浪费。
3 基于模型包围球与视点距离的加载策略 传统 GIS 通常是在本地平台或 C/S 网络架构下（如 GoogleEarth）进行 3D 模型加载，客户端的强大计算 功能允许进行大规模 3D 模型的一次性加载与全部显示。但在 B/S 架构下，浏览器无论是从其计算还是渲染 功能都远远逊于传统的客户端[8]，一次性整体加载往往会造成帧率下降严重，出现长时间的卡顿甚至于浏览 器的崩溃，因而，对大规模 3D 模型加载必须进行策略优化。传统的建筑模型加载策略往往是以模型所在区 域的二维底图的 LOD 层级作为加载三维模型的判断标准，并不能有效地利用三维建筑模型自身的空间信息， 以致出现建筑模型群整体突变剔除，高矮建筑模型“一视同仁”的现象，用户体验效果并不十分理想。因此， 本文提出了一种基于模型包围球与距视点距离为标准的城市建筑模型加载策略。 基于模型包围球与视点距离的模型加载策略，其思想在于模仿人眼观察自然规律；在具体相机方位下， 用建筑模型的包围球大小代表建筑尺寸以定义过小目标，用模型与相机的距离以定义过远目标；并运用异步 加载的方法进行前端资源配置，从而达到模型的合理加载及检测剔除（如图 3 所示）。
3.1 相关术语 (1) 最大可见范围：即在相机所处方位所能看到的最远距离，一般由系统或用户根据本机性能定义； (2) 最小物体比例：即在相机所处闻之上所能看到建筑的最小比例，定义方式如 0.01 为一百米范围内能 看清一米的物体（建筑） ； (3) 最大资源同时下载上限：即允许网络同时下载模型资源的最大个数，目的是防止网络拥堵。
3.2 模型加载流程 (1) 预先设定或由用户定义所需参数，包括最大可见范围、最小物体比例及最大同时模型资源下载上限 三项。 (2) 从数据库中查找所加载区域中所有模型的基本信息，包括：模型资源实际存放位置，模型所在方位 （经度、纬度） ，分别建立队列，将方位作为初始位点信息与模型其它信息一起压入队列。 (3) 建立判断数队列，将最大可见范围乘以最小物体比例作为每一个模型加载的初始判断数重复加入判 断队列。 -7http://www.j-es.org
(4) 设定事件捕获，当捕获到改变相机方位的操作时触发模型更新判断程序。 (5) 当相机方位及此方位下模型已全部更新完成，暂停更新程序。
初始化
程序开始 程序开始
模型基本信息 模型基本信息 （资源地址、 （资源地址、 方位） 方位）
数据库 数据库
捕捉相机方位改变
初始队列 初始队列
初始判断数 初始判断数
模型出列 模型出列
计算允许的 计算允许的 最小建筑尺寸 最小建筑尺寸
模型是否已请 模型是否已请 求 求
开始下载资源 开始下载资源 未超过
判断数大于最 判断数大于最 小建筑尺寸 小建筑尺寸
是
否
资源同时下载 资源同时下载 上限 上限
是
是 资源是否已在 资源是否已在 本地 本地
建立下载事件监听 建立下载事件监听
模型是否已加 模型是否已加 载 载
否
移除模型 移除模型
是
否
否
加载模型 加载模型
下载完成
模型基本信息及其 模型基本信息及其 判断数入列 判断数入列
超过
否 计算包围球直径及 计算包围球直径及 圆心位置 圆心位置
更新模型参数
遍历模型队列 是 否
重新判断是否 重新判断是否 应当删除模型 应当删除模型
所有模型是否 所有模型是否 已无状态更新 已无状态更新 程序结束 程序结束
是
图 3 策略流程图
3.3 模型更新判断处理 模型更新判断处理是在主程序执行后由每一次相机方位改变而重新触发，其步骤如下： (1) 判断此程序是否正在运行，以防止由短时多个捕获造成的程序并发重复执行，以减轻前端计算压力。 (2) 建立循环，每次从模型及判断数队列中将一个模型的基本数据以及其所对应的判断数出队。 (3) 计算出队模型位点与相机所在位置的距离，并将所得结果与用户设定的最小物体比例进行相乘，得 出的结果作为此视点方位状态下所允许的最小建筑尺寸进行记录。 (4) 比较判断数与最小建筑尺寸的大小关系以及判断模型是否已请求或加载。如判断数大于最小建筑尺 寸，则进入下一步；如判断数小于最小建筑尺寸并已加载，则移除此模型，并将取出的所有信息重新进入队 列，跳出此次循环；其余情况，取出的所有信息直接重新进入队列，跳出此次循环。 (5) 判断其是否已下载模型全部资源至本地，如是，将模型直接进行加载，并将模型基本信息及判断数 -8http://www.j-es.org
各自入队列，然后跳出本次循环；否则，进入下一步。 (6) 判断此时模型资源下载数量是否超过最大资源同时下载上限，如是，将模型及判断数各自入列，然 后重新运行模型更新程序；否则，开始下载此模型资源，并更新模型资源下载数量，并对此模型资源下载建 立事件监听，在下载完成后模型开始渲染的第一帧之前触发如下步骤：计算包围球直径及圆心位置，分别作 为新的判断数与模型位点信息；重新比较模型此时判断数与此时相机方位下的最小建筑尺寸，判断是否应予 移除；将模型信息及更新后的判断数、位点信息入列、更新模型资源下载数量，然后跳出本次循环。 (7) 循环遍历区域内所有模型至无任何状态更新。
4 实验结果及分析 为验证本文提出的加载策略，实验使用美国费城部分繁华地区（实际面积 2.12 平方公里）共计 412 个建 筑模型（原始数据为 COLLADA 格式 (.dae)/格式转换后共 2285 个文件对象/82.8MB）进行实验。
4.1 实验环境及预设条件 (1) 硬件环境：Inteli5-45703.2GHzCPU，8GBDDR3 内存，NVIDIA GeForce GTX750 2G RAM 显卡； (2) 软件环境：Chrome 浏览器，Tomcat 服务器，Fraps 帧率检测软件； (3) 实验预设条件：无最大同时模型资源下载上限；帧率检测时段为指令发出后 1500ms。
4.2 实验结果 不同参数下程序执行后帧率统计如表 1： 表 1 帧率统计表 最大范围/最小物体比例
帧数
最小帧率
最大帧率
平均帧率
渲染完成
整体同时加载
26
0
14
1.733
否
3000M/0.02
457
0
55
30.467
是
3000M/0.05
550
0
60
36.667
是
5000M/0.02
398
0
47
26.533
是
5000M/0.05
485
0
53
32.333
是
用户体验： 整体同时加载时，浏览器一直处于延迟严重的状态，至程序执行 1500ms 时，依然未能完成模型全部渲 染，大量模型处于无纹理状态，底图未完成加载，无法进行相机漫游（如图 4 所示）；使用策略后，加载时 出现短暂（约 0.5s）卡顿，之后运行基本流畅，至程序执行 1500ms 时，模型已全部加载完成（如图 5 所示）， 剔除效果平滑稳定，用户体验良好。
图 4 未使用策略 1500ms 时效果（未完成加载） -9http://www.j-es.org
a 整体效果
b 近观效果
图 5 使用策略 1500ms 时效果（完成加载）
4.3 实验分析 通过实验可以看出，该策略较好地解决了模型大规模加载时网络传输请求瞬时过量所造成的网络拥堵及 同时绘制所带来的渲染延迟； 该方法抛弃了传统的“资源请求——资源下载——模型显示”的线性加载流程，成功将资源下载与模型 显示步骤分离，更加合理地运用计算机网络与计算绘制功能； 本方法在无模型尺寸先验信息的前提下，通过在程序运行过程中逐步更新各模型的判断标准与参数的手 段而达到更加合理的剔除与再加载。这种对模型先验条件要求低的自适应过程更加适宜目前无统一标准的三 维模型加载。
5 结论 本文在分析基于 B/S 架构下三维模型加载特点与 WebGIS 实际需要，提出了一种基于模型包围球与视点 距离的模型加载策略，该策略在绘制与剔除的过程中更加符合人类观察规律，通过引入最大可见范围及最小 物体比例模仿了人眼对过远及过小物体无法看清的真实现状，从而使模型显示更加快速，剔除过渡更加平缓， 带来了较好的用户体验。 在下一步的研究中，还需解决由于采取全模型遍历的方式所带来的执行过程中重复判断与计算以及在未 知软硬件环境下参数自主调整的问题。
REFERENCES [1] JunWang, WeiZhou, Tian Peng,et al. The application of 3D basic city GIS in urban planning[J].Geotechnical Investigation & Surveying, 2010,38 (11):56-61 [2] Wei Wei. The realization of 3D WebGIS[D].Beijing:ChinaUniversity of Geosciences,2013 [3] LI-Ping ZHU, Hong-Qi LI, Meng-Meng DU ,et al. Implementation of WebGL-based 3D WebGIS scene[J].Computer Engineering and Design,2014,35(10): 3645-3650 [4] Lei F, Chaoliang W, Chuanrong L, et al. A Research for 3D WebGIS based on WebGL[C]. Computer Science and Network Technology (ICCSNT). Harbin,China, 2011.2-4 [5] Fabrice Robinet. glTF-the runtime asset format for WebGL, OpenGL ES, and OpenGL [DB/OL]. America: Fabrice Robinet, 2014. [6] HU Jun-Qiang.Application of collada model translation based on muliti-software[J].2011,12(1):118-120 [7] Zhi-Yong Luo, Xiao-Dong Li. High Performance Tile Map Service Based on Database Storage Scheme[J].Geography and Geo Information Science,2013,29(3):49-52 [8] WeiJiang, Xiao-YongChen, XinLiu. New method about real-time visualization of massive 3D-models in digital earth.[J]. Computer Application.2013,33(z1):2-3 - 10 http://www.j-es.org
【作者简介】 1
易天洋（1991-） ，男，汉，硕士研究生
在读，研究方向：三维可视化。
2
陈荦（1973-） ，男，汉，博士学位，教授，硕士生导师。
3
李军（1973-） ，男，汉，博士学位，教授，硕士生导师。
Email: 13611386825@163.com
- 11 http://www.j-es.org