Visualization of city 3d scene based on webgl

Transactions on Computer Science and Technology June 2014, Volume 3, Issue 2, PP.48-54

Visualization of City 3D Scene Based on WebGL Fan Zhang #, Dan Xue, Jun Li, Ning Jing College of Electronic Science and Engineering, National University of Defense Technology, Changsha Hunan410073, P.R. China #

Email: zf455287552@126.com

Abstract For the requirements of transmission and visualization of city 3D scene under network environment, a new 3D model data structure suitable for web exchange and rendering called glTF (gl Transmission Format) was adopted in this paper, the method and basis to build and organize 3D scene were analysed. Meanwhile, the scene data was efficiently managed and drew by using asynchronous loading, local cache, and visibility culling techniques. According to these theories and techniques, a B/S mode system architecture with full consideration of visual efficiency was proposed, then a city 3D scene visualization platform based on WebGL was developed. Experiment results show that platform can smoothly render the city 3D scene; visual effect and user experience are good.

Keywords: 3D Scene Visualization; gl Transformission Format; Asynchronous Loading; Visibility Culling

基于 WebGL 的城市三维场景可视化研究* 张帆，薛丹，李军，景宁 国防科技大学 电子科学与工程学院，湖南 长沙 410073 摘 要：针对网络环境下城市三维场景的传输与可视化需求，采用适合网络交换和渲染的三维模型数据结构 glTF(gl Transmission Format)，分析了基于 glTF 组织与构建三维场景的依据和方法。同时，通过异步加载、本地缓存、可见性剔 除等技术，对场景数据进行高效调度与绘制。依据这些理论和技术，设计了充分考虑可视化效率的 B/S 模式系统服务架 构，并基于 WebGL 开发了城市三维场景可视化平台，实验表明平台能流畅地实现城市三维场景的绘制，可视化效果以及 用户体验良好。 关键词：三维场景可视；glTF；异步加载；可见性剔除；B/S 模式

引言 Web3D 技术的出现为 3D 图形领域注入了新的活力， 目前国内外 Web3D 的主流技术主要有 VRML、X3D、 Viewpoint、Java3D、 Shockwave3D 等，其中又以 Java3D 结合 VRML 的组合方式为主[1]。WebGL 的发行打 破了这一常规模式，它是一套跨平台、开放、无插件的底层 3D 图形 JavaScript API[2]，受到了主流硬件产品 和浏览器软件的广泛支持，它的推出为 Web3D 应用的开发指明了新的方向。随着 Web3D 技术的快速发展， 各种 B/S 模式的三维场景浏览软件应运而生。客户端只安装一个浏览器，做一些简单的交互操作，如移动、 缩放、查询。而大部分数据以及系统功能实现的核心部分都集中在网络服务器上。然而，这些软件大多数不 具备加载大量城市三维模型的能力，或在浏览显示时出现场景绘制严重迟滞现象[3]。原因在于城市三维场景 的数据量巨大，一个城市经常有几千甚至上万栋建筑物，而虚拟场景的绘制和渲染也需要大量的数据信息（纹 理、灯光、坐标等） 。用户需要很长时间来下载城市场景，这使得系统内存无法一次调入整个场景的模型数 *

基金资助：受国家高技术研究发展计划(863 计划)支持资助（No.2011AA120306,No.2011AA120305） - 48 http://www.ivypub.org/cst

据，GPU 也无法进行实时渲染。因此，城市三维场景 Web 可视化最首要的问题，就是解决网络带宽造成的 传输瓶颈。目前已有研究中主要有三种解决方案：模型数据压缩、模型多尺度组织以及多线程异步处理。陈 静[4]等人设计了基于点索引的三维模型几何数据结构，结合多尺度纹理表达，构建三维模型多尺度数据结构； 谭青生[5]等人提出了一种压缩算法对三维场景进行高效压缩，并采用多线程策略对场景进行调度。这些方法 都在一定程度上缓解了带宽带来的传输瓶颈，然而其设计的模型数据格式不统一，不适合用户之间交互共享， 也没有通用的接口对模型进行解析显示，在绘制场景之前浪费了大量时间。系统在运行之前还需要安装各种 插件，配置过程复杂，可移植性差。 针对上述问题，本文研究了适合城市三维场景 Web 可视化的体系架构、三维模型格式以及场景的组织和 调度方法，并基于无插件、跨平台的 Web3D 图形库 WebGL 开发了城市三维场景可视化平台。

1 三维场景构建和可视化实现 针对上述网络大规模三维场景可视化存在的问题，本文设计了如图 1 充分考虑可视化效率的 B/S 模式系 统服务架构。其中，网络服务器主要提供数据服务，存储着 glTF[6]格式的三维场景数据。客户端分为管理层 和应用层，主要负责场景数据的调度和绘制。场景渲染时，应用层首先向本地缓存请求场景数据，若本地缓 存中没有则向服务器发出数据请求任务；然后，管理层采用异步加载技术对数据请求任务进行队列管理，并 下载模型数据；最后，应用层采取可见性剔除策略对场景进行高效绘制。下面分别从场景构建及组织、场景 调度、场景绘制三个方面，阐述本文基于该系统服务架构实现城市三维场景可视化的技术路线。 浏览器 场景渲染 应用层 数据缓存

管理层

数据管理 队列

网络 网络服务器 数据服务 文件系统

glTF 模型转换

COLLADA

CityEngine

图 1 系统架构图

1.1 场景构建及组织 在网上浏览城市三维场景时，三维建筑物模型数据是网络传输的主要数据内容之一，模型的数据结构会 直接影响场景的数据量、网络传输方式和客户端的组织调度策略。因此，需要一种占用空间小、传输速度快、 与图形接口良好对接的通用 3D 模型格式。本文采用一种专门为 GL 接口设计的运行时 3D 资源格式 glTF， 其结构如图 2，主要分为四个部分：①JSON 文件(.json)，主要存储了模型的节点层次、材质、相机、灯光等 参数内容，是整个模型的核心；②二进制文件(.bin),用来存储模型的图形数据，如：顶点坐标、纹理坐标、索 - 49 http://www.ivypub.org/cst

引以及动画等数据内容；③图像文件(PNG、JPG 等)，用于模型的纹理贴图。④着色器文件(.glsl)，如图形渲 染需要的顶点着色器(Vertex Shader)和片元着色器(Fragment Shader)。 使用 glTF 构建三维场景主要有以下几点优势： (1) 合理的数据压缩，使用占用空间小的二进制文件(.bin)和 JSON 文件存储模型数据； (2) 面向 Web 的 3D 模型格式，采用适合 Web 传输且方便 JS 解析的 JSON 格式来存储模型主要信息， 同时仅使用 JS 支持的图片格式作为纹理数据（JPG、PNG 等）； (3) 充分的渲染优化，模型中包含可以被 GL 接口直接应用的 GLSL 着色器，同时使用二进制文件存储 图形数据，方便快速创建数据缓冲区； (4) 与 GL 接口的良好对接，模型的属性参数可以方便地映射到 GL 接口的函数及函数参数。

.json 节点关系

.bin 坐标和索引

.jpg,.png 纹理图片

.glsl 着色器

glTF 文件

图 2 glTF 结构

虽然 glTF 适用于 Web 可视化，但仍需对其进行合理的组织才能充分发挥其优势。本文采用 Google Earth 专有的 KML 文件对 glTF 模型进行高效组织，KML 文件记录了场景中所有模型的 ID、名称、经纬度位置、 朝向、缩放比例和模型链接，其中模型链接采用统一资源定位符 URL（Internet 上标准的资源地址）表示， 即其在网络服务器上的存储位置。 本文构建城市场景的具体流程如图 3： (1) 使用专业的城市建模的软件 CityEngine (由 Esri 公司开发)，以实际采集的城市数据为基础，制作大 规模的城市三维场景，创建完成后以 KML 方式导出，场景模型均为 COLLADA 格式； (2) 通过基于 Python 语言编写的批转换程序 Modelconverter.py，将场景中所有的 COLLADA 模型转换为 glTF 格式，同样使用 KML 文件组织； (3) 按照 KML 文件的场景数据存储位置描述，将场景数据上传到网络服务器。

CityEngine

KML （COLLADA)

模型转换

KML (glTF）

网络 服务器

图 3 场景构建流程

1.2 场景调度 本文使用数据缓存机制对上文构建的城市场景进行高效调度，按照图 1 的体系结构，应用层专门在客户 端的电脑外存上建立了一个文件夹，用来存储已经下载过一次的模型数据。当客户端再次请求之前的模型时， 就可以直接从本地硬盘中获取数据，而不需要重新从服务器下载。这种以空间换时间的策略，减轻了网络压 力，节省了部分时间。 在数据调度方面，本文还在管理层采取了异步加载策略。摒弃了以前整个场景下载结束后才进行渲染的 同步加载技术，采用边下载边渲染的递进式加载策略，使三维场景绘制、数据调度计算和数据请求等操作互 不干扰、并行进行。这样大大缩减了用户的等待时间，提高了渲染效率。本文通过轻量级 JS 库 when.js 对数 据请求任务进行队列管理，实现异步加载策略。其实现原理为：任务队列中的每个请求任务有三个可能状态： - 50 http://www.ivypub.org/cst

pending，fulfilled，rejected。pending 表示任务刚创建，正在等待响应；fulfilled 表示数据下载成功，等待渲 染；rejected 表示任务下载失败。当任务状态变更为 fulfilled 或者 rejected 时，该数据请求任务都将从队列中 移除。其中，状态为 fulfilled 时，管理层会立刻将下载的场景数据放入渲染队列中等待渲染。 采取了上述的高效调度策略后，客户端场景数据请求过程的伪代码描述如下： 获取当前的视点范围并创建渲染队列 render； 创建数据请求任务队列 request； 向服务器请求并下载场景数据描述文件 KML； while(遍历 KML 文件中的所有模型){ 获取模型 i 的描述信息； if(模型 i 在视点范围内){ if(本地缓存中存在模型 i 数据){ 直接从缓存读取模型 i； } else if(缓存中不存在模型 i 数据){ 创建模型请求任务 task[i]； 令 task[i].flag = pending； 把 task[i]插入 reuquest； 向服务器请求模型 i，等待响应； 当 task[i].flag = fulfilled 时 { 任务成功； 从 request 中移除 task[i]； 将模型 i 插入 render 渲染队列； 返回； } 当 task[i].flag = rejected 时 { 任务失败； 从 request 移除 task[i]； 返回； } } } 遍历所有模型后清空 request 和 render 队列；

1.3 场景绘制 使用高效场景调度策略将数据下载到客户端后，本文采取了图 4 的视景体剔除(View Frustum Culling)和 遮挡剔除(Occlusion Culling)两种可见性剔除术[7]。用以降低场景的复杂程度和图形流水线的负担，从而提高 渲染效率。 视景体剔除是为了剔除未在视景体内的数据对象，而只将落入视景体空间内的数据对象调入到内存中, 该方法直接依赖于当前系统返回的观察参数，上一节场景调度流程的第 2-4 步应用的正是这一思想。而遮挡 - 51 http://www.ivypub.org/cst

剔除是对视景体剔除得到的地物集合，根据地物间的遮挡关系做进一步的删减，使加载的地物对象范围进一步 缩小。由于在观看场景时地物间的遮挡现象比较突出，使得落入视景体的地物中很大一部分在当前的观察位置 上实际是不可见的，这些地物的数据便不需要调入内存进行绘制。本文采用薛萌[8]提出的地平线遮挡剔除算法， 先对当前的视域范围内所有的场景进行点投影生成地平曲线；然后根据该曲线对场景数据进行遮挡判断，在地 平线后面并且比地平线要低的地物就会被裁减掉；最后将遮挡剔除后的场景数据送入渲染管道进行渲染。 视景体剔除

遮挡剔除 可见

视景体 不可见面

可见面

图 4 可见性剔除

因此，三维场景数据必须经过图 5 的流程，才会被场景渲染接口实时获取并绘制。具体步骤如下： (1) 按照上节的步骤请求场景数据，采用视景体剔除技术只下载当前视野范围内的场景数据并加入渲染 队列； (2) 客户端根据当前场景的视点参数，以及地物的几何形状和地物之间的位置关系，对渲染队列中的场 景数据进行遮挡剔除； (3) 将被遮挡的模型数据剔除出内存，而剩余可见的数据传到 GPU 渲染管道中； (4) 客户端根据 KML 文件中的参数描述，对场景进行绘制。 场景 数据

视景体剔除 是 加入渲 染队列

否 结束

遮挡判断 是

否

被遮挡 的部分

未遮挡 的部分

从内存 中剔除

绘制

图 5 场景渲染流程

2 实验 为了证明本文基于 glTF 场景构建方法的优势，本文按照图 3 的流程创建了美国费城部分城区的三维场景 数据（共 1120 个模型） 。通过 Modelconverter 转换前场景数据占用磁盘空间大小为 130.2Mb，而转换为 glTF 格式后减少为 58.5Mb，这表明基于 glTF 的场景数据占用空间小，压缩比高。 - 52 http://www.ivypub.org/cst

同时，为了验证本文场景组织和调度方法的有效性以及系统设计的可行性，本文基于 WebGL 开发了三 维场景可视化平台，并使用该平台对本文采用的场景调度和可见性剔除方法与普通方法（即不使用本文的任 何调度和剔除策略）的三维场景可视化效果进行了性能对比实验。实验数据为上文构建的美国费城部分城区 的三维场景；硬件环境为：Intel i5-3210 2.5GHz CPU, 4GB DDR3 内存，NVIDIA GT 635M 2G RAM 显卡；软 件环境为：Chrome 浏览器，Tomcat 服务器。实验结果见表 1，结果表明：使用本文方法开发的可视化平台， 首次运行传输响应时间小于 3s，平均响应时间小于 1s，场景浏览平均帧率为 36 帧/s，平台漫游速度快，画面 流畅，用户体验好，可视化效果明显优于普通方法，图 6 是对费城部分城区的三维场景建模效果图。 表 1 性能对比表 方法 普通方法 本文方法

响应时间 首次响应时间/s 平均响应时间/s 6 6 3 1

最小帧率/fps 10 16

(a) 美国费城部分城区建模效果图

系统帧率 最大帧率/fps 35 48

平均帧率/fps 19 36

(b) 建筑物细节效果图

图 6 美国费城三维城市场景

3 结论 本文在分析 Web 三维场景数据的传输及可视化特点的基础上，采用一种适合 Web 交换和渲染的新型三 维模型结构 glTF，提出了基于该模型的三维场景组织和构建方法，设计了充分考虑可视化效率的系统服务架 构。实践证明本文设计的系统服务框架，能够缓解带宽压力，可视化效果良好。在下一步的研究中，还需考 虑超大规模以及海量三维场景数据的高效可视化策略。计划对场景数据进行瓦片分割，并且对模型进行简化 生成 LOD 模型，创建瓦片金字塔，以进一步提高可视化效率。

REFERENCES [1]

Macedonia M. 3D for the Web[J]. Computer Graphics and Applications, IEEE. 2013, 33(5): 1-2.

[2]

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.

[3]

Jiang Wei, Chen Xiao-Yong, Liu Xin. New method about real-time visualization of massive 3D-models in digital earth.[J].

Computer Application.2013,33(z1):2-3

[4]

Chen Jing, Xu Jia, Li Mo. Muti-scale data organization of models in network environment[J].Science of Surveying and Mapping.

2011,36(6):1-4.

[5]

Tan Qing-Sheng, Zhou Zhe, Wu Bo. A browser-based 3D scene construction method[P]. CN103021023A. 2013-04-03:2-4.

[6]

Fabrice Robinet. glTF-the runtime asset format for WebGL, OpenGL ES, and OpenGL [DB/OL]. America: Fabrice Robinet, 2014. https://github.com/KhronosGroup/glTF/blob/master/specification/README.md.

[7]

Zhai Wei. Data Obtaining, Organization and Dynamic I/O for Large-Scale Scene Visualization in 3D GIS[D]. Dalian University - 53 http://www.ivypub.org/cst

of Technology, 2003.

[8]

Xue Meng. Design and research of terrain system based on OGRE[D]. Fudan University,2009

【作者简介】 1

张帆（1990） ，男，汉，硕士，学生

2

薛丹（1983），男，汉，博士，学生，主要研究方向为三维

研究方向为三维可视化，学习经历：

可视化。

2008-2012 年 就读于武汉大学测绘学

3

院；2012 年 9 月至今就读于国防科技术

与地理信息空间信息集成。Email: junli@nudt.edu.cn

大学。

4

Email: zf455287552@126.com

处理与信息系统。Email: jingning@nudt.edu.cn

李军（1973），男，汉，博士，教授，主要研究方向为遥感

景宁（1963），男，汉，博士，教授，主要研究方向为信息

- 54 http://www.ivypub.org/cst