《基于WebGL的城市三维场景可视究》由会员分享，可在线阅读，更多相关《基于WebGL的城市三维场景可视究（7页珍藏版）》请在金锄头文库上搜索。
1、 - 48 - http:/www.ivypub.org/cst 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, Chan
2、gsha Hunan410073, P.R. China #Email: 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
3、 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 effici
4、ency 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; Vis
5、ibility Culling 基于 WebGL 的城市三维场景可视化 研究 * 张帆，薛丹，李军，景宁 国防科技大学 电子科学与工程学院，湖南 长沙 410073 摘 要 ： 针对网络环境下 城市 三维 场景 的传输与可视化 需求 ， 采用适合网络 交换 和渲染的三维模型数据结构 glTF(gl Transmission Format)， 分析 了 基于 glTF组织 与 构建 三维场景的依据和 方法。 同时， 通过 异步加载、本地缓存、可见性剔除等 技术 ， 对场景数据进行高效调度 与绘制 。 依据 这些理论和技术 ， 设计 了 充分考虑可视化效率的 B/S 模式系统服务架构，并 基于 W
6、ebGL开发 了 城市三维场景可视化平台 ， 实验表明 平台 能 流畅地实现 城市三维场景 的绘制，可视化效果以及用户体验良好。 关键词 ： 三维场景可视 ； glTF； 异步加载 ； 可见性剔除 ； B/S模式 引言 Web3D 技术的出现为 3D 图形领域注入了新的活力，目前国内外 Web3D 的主流技术主要有 VRML、 X3D、Viewpoint、 Java3D、 Shockwave3D 等，其中又以 Java3D 结合 VRML 的组合方式为主 1。 WebGL 的发行打破了这一常规模式， 它是一套跨平台、开放、无插件的底层 3D 图形 JavaScript API2，受到了主流硬件
7、产品和浏览器软件的广泛支持，它的推出为 Web3D 应用的开发指明了新的方向 。 随着 Web3D 技 术的快速发展，各种 B/S 模式的三维场景浏览软件应运而生。 客户端只安装一个浏览器，做一些简单的交互操作，如移动、缩放、查询。而大部分数据以及 系统功能实现的核心部分 都 集中 在网络 服务器上 。然而，这些软件大多数不具备加载大量城市三维模型的能力，或在浏览显示时出现场景绘制严重迟滞现象 3。原因在于城市三维场景的数据量巨大，一个城市经常有几千甚至上万栋建筑物，而虚拟场景的绘制和渲染也需要大量的数据信息（纹理、灯光、坐标等）。用户需要很长时间来下载城市场景，这使得系统 内存无法一次调入整
8、个场景的模型数*基金资助 ： 受 国家高技术研究发展计划 (863 计划 )支持资助 （ No.2011AA120306,No.2011AA120305） - 49 - http:/www.ivypub.org/cst 据， GPU 也无法进行实时渲染。 因此，城市三维场景 Web 可视化最首要的问题，就是解决网络带宽造成的传输瓶颈。目前已有研究中主要有三种解决方案： 模型数据压缩、模型多尺度组织以及多线程异步处理。 陈静 4等人设计了基于点索引的三维模型几何数据结构，结合多尺度纹理表达，构建三维模型多尺度数据结构；谭青生 5等人提出了一种压缩算法对三维场景进行高效压缩，并采用多线程策略对场景
9、进行调度。 这些方法都在一定程度上缓解了带宽带来的传输瓶颈，然而其设计的模型数据格式不统一，不适合用户之间交互共享，也没有通用的接口对模型进行解析显示，在绘制场景之前浪费了大量时间。系统在运行之前还需要安 装各种插件，配置过程复杂，可移植性差。 针对上述问题，本文研究了适合城市三维场景 Web 可视化的体系架构、三维模型格式以及场景的组织和调度方法，并基于无插件、跨平台的 Web3D 图形库 WebGL 开发了城市三维场景可视化平台。 1 三维场景构建和可视化实现 针对上述网络大规模三维场景可视化存在的问题，本文设计了如图 1 充分考虑可视化效率的 B/S 模式系统服务架构。其中， 网络服务器
10、主要提供数据服务，存储着 glTF6格式的三维场景数据。客户端分为管理层和应用层，主要负责场景数据的调度和绘制 。场景渲染时，应用层首先向本地缓存请求场景数据，若本地缓存中没有则向服务器发出数据请求任务；然后，管理层采用异步加载技术对数据请求任务进行队列管理，并下载模型数据；最后，应用层采取可见性剔除策略对场景进行高效绘制。 下面分别从场景构建及组织、场景调度、场景绘制三个方面，阐述本文基于该系统服务架构实现城市三维场景可视化的技术路线。 浏 览 器数 据 服 务网 络 服 务 器网 络场 景 渲 染应 用 层管 理 层数 据 缓 存数 据 管 理队 列文 件 系 统模 型 转 换C i t
11、y E n g i n eg l T FC O L L A D A图 1 系统架构图 1.1 场景构建及组织 在网上浏览城 市三维场景时，三维建筑物模型数据是网络传输的主要数据内容之一，模型的数据结构会直接影响场景的数据量、网络传输方式和客户端的组织调度策略。因此，需要一种占用空间小、传输速度快、与图形接口良好对接的通用 3D 模型格式。 本文采用一种专门为 GL 接口设计的运行时 3D 资源格式 glTF，其结构如图 2，主要分为四个部分： JSON 文件 (.json)，主要存储了模型的节点层次、材质、相机、灯光等参数内容，是整个模型的核心；二进制文件 (.bin),用来存储模型的图形数据
12、，如 ： 顶点坐标、纹理坐标、索 - 50 - http:/www.ivypub.org/cst 引以及动画等数据内容；图像文 件 (PNG、 JPG 等 )，用于模型的纹理贴图。着色器文件 (.glsl)，如图形渲染需要的顶点着色器 (Vertex Shader)和片元着色器 (Fragment Shader)。 使用 glTF 构建三维场景主要有以下几点优势： (1) 合理的数据压缩，使用占用空间小的二进制文件 (.bin)和 JSON 文件存储模型数据； (2) 面向 Web 的 3D 模型格式，采用适合 Web 传输且方便 JS 解析的 JSON 格式来存储模型主要信息，同时仅使用 J
13、S 支持的图片格式作为纹理数据（ JPG、 PNG 等）； (3) 充分的渲染优化，模型中包含可以被 GL 接口直接应用 的 GLSL 着色器，同时使用二进制文件存储图形数据，方便快速创建数据缓冲区； (4) 与 GL 接口的良好对接，模型的属性参数可以方便地映射到 GL 接口的函数及函数参数。 . j s o n节 点 关 系. j p g , . p n g纹 理 图 片. b i n坐 标 和 索 引. g l s l着 色 器g l T F文 件图 2 glTF 结构 虽然 glTF 适用于 Web 可视化，但仍需对其进行合理的组织才能充分发挥其优势。本文采用 Google Earth
14、专有的 KML 文件对 glTF 模型进行高效组织， KML 文件记录了场景中所有模型的 ID、名称、经纬度位置、朝向、缩放比例和模型链接，其中模型链接采用统一资源定位符 URL（ Internet 上标准的资源地址）表示，即其在网络服务器上的存储位置。 本文构建城市场景的具体流程如图 3： (1) 使用专业的城市建模的软件 CityEngine (由 Esri 公司开发 )，以实际采集的城市数据为基础，制作大规模的城市三维场景，创建完成后以 KML 方式导出，场景模型均为 COLLADA 格式 ； (2) 通过基于 Python 语言编写的批转换程序 Modelconverter.py，将场
15、景中所有的 COLLADA 模型转换为glTF 格式，同样使用 KML 文件组织； (3) 按照 KML 文件的 场景数据存储位置描述，将场景数据上传到网络服务器。 C i t y E n g i n eK M L网 络服 务 器K M L( g l T F ）模 型 转 换（ C O L L A D A ) 图 3 场景构建流程 1.2 场景调度 本文使用数据缓存机制对上文构建的城市场景进行高效调度，按照图 1 的体系结构，应用层专门在客户端的电脑外存上建立了一个文件夹，用来存储已经下载过一次的模型数据。当客户端再次请求之前的模型时，就可以直接从本地硬盘中获取数据，而不需要重新从服务器下载。
16、这种以空间换时间的策略，减轻了网络压力，节省了部分时间。 在数据调度方面，本文还在管理层采取了异步加载策略。摒弃了以前整个场景下载结束后才进行渲染的同步加载技术，采用边下载边渲染的递 进式加载策略，使三维场景绘制、数据调度计算和数据请求等操作互不干扰、并行进行。这样大大缩减了用户的等待时间，提高了渲染效率。本文通过轻量级 JS 库 when.js 对数据请求任务进行队列管理，实现异步加载策略。其实现原理为：任务队列中的每个请求任务有三个可能状态： - 51 - http:/www.ivypub.org/cst pending， fulfilled， rejected。 pending 表示任务刚创建，正在等待响应； fulfilled 表示数据下载成功，等待渲染； rejected 表示任务下载失败。当任务状态变更为 fulfilled 或者 rejected 时，该数据请求任务都将 从队列中移除。其中，状态为 fu
