Adaptive Web 3D Visualization Method for Diverse Terminals
-
摘要: 随着移动互联网的快速发展，三维GIS （geographic information system）应用的用户终端设备类型日趋多样化，现有单一的网络可视化方法难以适应多样化终端需求.针对上述问题，本文首先设计了基于B/S （browser/server）模式的自适应三维可视化架构，然后重点探讨三维数据的多样化组织、自适应四叉树组织与动态索引构建、三维场景自适应调度等关键技术，最后基于WebGL技术构建原型系统并进行案例实验.实验结果表明：桌面端设备笔记本电脑的可视化渲染帧率最终稳定在40 帧/s左右；移动端设备平板电脑、智能手机的可视化渲染帧率最终稳定在20 帧/s左右；不同类型终端上进行网络可视化均能保证较高的可视化帧率及效果，证明了本文提出方法的有效性与可行性.Abstract: With the rapid development of mobile Internet, terminals of 3D GIS (geographic information system) applications have become more and more diverse. The current web visualization methods can hardly meet the requirements of diverse terminals. To solve this problem, an adaptive visualization architecture based on the B/S (browser/server) model was designed. Then some key technologies were explored, such as the diverse organization of 3D data, adaptive quad-tree organization, construction of dynamic index and adaptive scheduling of 3D scene. Finally, a prototype system was developed on the basis of WebGL. The experimental results show that the rendering frame rate of the laptop computer is eventually stable at more than 40 frame per seconds, that of the smartphone and tablet computer is eventually stable at more than 20 frame per seconds, and web visualization on diverse terminals can be ensured with high visual efficiency and effects, thus demonstrating the effectiveness of the proposed method.
-
Key words:
- diverse terminal /
- adaptive visualization /
- 3D Web GIS /
- diverse data organization /
- adaptive scheduling
-
图 1 面向多样化终端的自适应三维可视化B/S架构
Figure 1. Adaptive 3D visualization based on B/S structure for diverse terminals
图 4 多样化终端上自适应可视化实时渲染帧率
Figure 4. Real-time rendering frame rate of adaptive visualization on diverse terminals
图 5 笔记本电脑与平板电脑上自适应网络三维可视化效果
Figure 5. 3D scenes of adaptive Web 3D visualization on laptop computer and tablet computer
图 7 安卓手机上自适应网络三维可视化效果
Figure 7. 3D scenes of adaptive Web 3D visualization on Android smart phone
表 1 空间索引属性
Table 1. Properties of spatial index
属性 属性含义说明 BoundingVolume 当前节点的包围盒空间范围 GeometricError 当前节点渲染时的几何误差 Children 当前节点的子节点集合 Content 当前节点包含的三维模型内容 
下载: 导出CSV
表 2 实验终端设备硬件配置
Table 2. Hardware configuration of experimental terminals
设备类型 屏幕尺寸/（× 2.54 cm） 操作系统 CPU GPU 运行内存/GB 笔记本电脑 15.6 Windows10 Intel Core i7/2.6 GHZ NVIDA Geforce960M 16 平板电脑 7.9 iOS 9 苹果A8/1.5 GHZ Power VR SGX544 2 苹果手机 4.7 iOS10.3 苹果A9/1.8 GHZ Power VR GT7600 2 安卓手机 5.2 Android6.0 Kirin955/1.8 GHZ Mali-T880 3
下载: 导出CSV
表 3 各LOD层次模型纹理分辨率及DOM、DEM分辨率
Table 3. Resolutions of LODs models，DOM and DEM
终端 DOM DEM LOD0 LOD1 LOD2 LOD3 LOD4 LOD5 桌面 256 × 256 64 × 64 256 × 256 128 × 128 64 × 64 空白纹理 移动 128 × 128 64 × 64 256 × 256 128 × 128 64 × 64 32 × 32 16 × 16 空白纹理
下载: 导出CSV
表 4 各LOD层次模型几何误差阈值
Table 4. Geometric error thresholds of LODs models
设备类型 LOD0 LOD1 LOD2 LOD3 LOD4 LOD5 笔记本电脑 150 75 50 37.5 平板电脑 90 45 30 22.5 18 智能手机 60 30 20 15 12
下载: 导出CSV
表 5 三维场景中各LOD层次模型及DOM、DEM初始数据量、数据比例
Table 5. Initial data amount and data amount proportion，of LODs models，DOM and DEM in 3D scene
设备类型 网络环境 总数据量/MB 数据量/MB，数据比例/% LOD0 LOD1 LOD2 LOD3 LOD4 LOD5 DOM+DEM 笔记本电脑 有线网络 47.43 16.39 , 12.66 , 7.37 , 2.78 , 8.22 , 34.55 26.69 15.54 5.86 17.36 WIFI网络 47.39 16.39 , 12.66 , 7.37 , 2.78 , 8.18 , 34.58 26.71 15.55 5.87 17.29 平板电脑 WIFI网络 18.17 2.79 , 2.68 , 4.27 , 3.09 , 0.86 , 4.48 , 15.35 14.75 23.5 17.01 4.73 24.66 苹果手机 WIFI网络 16.03 2.52 , 2.43 , 3.67 , 2.43 , 0.82 , 4.16 , 15.72 15.16 22.89 15.16 5.12 25.95 4G网络 15.87 2.48 , 2.42 , 3.63 , 2.43 , 0.8 , 4.11 , 15.59 15.23 22.89 15.33 5.05 25.91 安卓手机 WIFI网络 15.28 2.34 , 2.44 , 3.27 , 2.49 , 0.9 , 3.85 , 15.32 15.97 21.37 16.29 5.88 25.17 4G网络 14.91 2.28 , 2.33 , 3.28 , 2.43 , 0.8 , 3.79 , 15.28 15.61 22.04 16.3 5.36 25.41
下载: 导出CSV
表 6 三维场景中各LOD层次模型及DOM、DEM数据量、数据比例、响应时间
Table 6. Data amount，data amount proportion and response time of LODs models，DOM and DEM in 3D scene
设备类型 网络环境 总数据量/MB 响应时间/s 数据量/MB，数据比例/% LOD0 LOD1 LOD2 LOD3 LOD4 LOD5 DOM+DEM 笔记本电脑 有线网络 46.96 11.14 14.15， 11.3， 9.64， 3.59， 8.28， 30.13 24.06 20.53 7.64 17.64 WIFI网络 46.44 17.72 13.07， 11.02， 9.22， 4.88， 8.25， 28.14 23.73 19.85 10.51 17.76 平板电脑 WIFI网络 17.44 31.68 1.88， 2.3， 4.61， 2.92， 1.17， 4.56， 10.77 13.19 26.44 16.74 6.71 26.15 苹果手机 WIFI网络 15.68 22.96 1.95， 1.99， 3.15， 2.88， 1.37， 4.34， 12.43 12.69 20.09 18.37 8.74 27.68 4G网络 15.73 24.36 1.88， 2.02， 3.33， 2.88， 1.36， 4.25， 11.98 12.82 21.21 18.29 8.64 27.06 安卓手机 WIFI网络 14.92 26.25 1.53， 1.96， 3.17， 2.73， 1.35， 4.18， 10.26 13.11 21.23 18.32 9.06 28.02 4G网络 14.58 27.48 1.45， 1.91， 3.32， 2.61， 1.30， 4.00， 9.93 13.08 22.77 17.87 8.89 27.46
下载: 导出CSV
-
何正伟,吴华意,陈静. 基于Internet的大规模城市建筑三维场景可视化研究[J]. 系统仿真学报,2009,21(10): 2965-2970.HE Zhengwei, WU Huayi, CHEN Jing. Research on browsing large scale 3D scene of city buildings over internet[J]. Journal of System Simulation, 2009, 21(10): 2965-2970. ZHANG Z, FANG J, JING R. Interactive visualisation of 3D city models based on adaptive streaming of 3D-GIS data[C]//International Conference on Information Assurance and Security. [S.l.]: IEEE, 2009: 417-420 LIU Mingwei, ZHU Jun, ZHU Qing, et al. Optimization of simulation and visualization analysis of dam-failure flood disaster for diverse computing systems[J]. International Journal of Geographical Information Science, 2017, 31: 1-16. 朱军,尹灵芝,曹振宇,等. 时空过程网络可视化模拟与分析服务——以溃坝洪水为例[J]. 地球信息科学学报,2015,17(2): 215-221.ZHU Jun, YIN Lingzhi, CAO Zhenyu, et al. Network simulation and visual analysis of spatiotemporal process:a case study of dam-break flood routing[J]. Journal of Geo-information Science, 2015, 17(2): 215-221. TRUJILLO A, SUÁREZ J P, CALLE M D L, et al. Glob3 mobile: an open source framework for designing virtual globes on ios and android mobile devices[C]// Progress and New Trends in 3D Geoinformation Sciences. Berlin: Springer, 2013: 211-229 NOGUERA J M, BARRANCO M J, SEGURA R J, et al. A mobile 3D-GIS hybrid recommender system for tourism[J]. Information Sciences, 2012, 215(18): 37-52. NOGUERA J M, SEGURA R J, OGÁYAR C J, et al. Navigating large terrains using commodity mobile devices[J]. Computers & Geosciences, 2011, 37(9): 1218-1233. SUÁREZ J P, TRUJILLO A, SANTANA J M, et al. An efficient terrain level of detail implementation for mobile devices and performance study[J]. Computers Environment & Urban Systems, 2015, 52: 21-33. CHATURVEDI K, YAO Z, KOLBE T H. Web-based exploration of and interaction with large and deeply structured semantic 3D city models using html5 and WebGL[C]//Wissenschaftlich-Technische Jahrestagung der DGPF und Workshop on Laser Scanning Applications. [S.l.]: DGPF, 2015: 296-306 DEVAUX A, BRÉDIF M, PAPARODITIS N. A Web-based 3D mapping application using WebGL allowing interaction with images, point clouds and models[C]//International Conference on Advances in Geographic Information Systems. [S.l.]: ACM, 2012: 586-588 SCHILLING A, BOLLING J, NAGEL C. Using glTF for streaming CityGML 3D city models[C]//InternationalConference on Web3d Technology. [S.l.]: ACM, 2016: 109-116 王锋,潘德吉,王俊. 城市三维模型海量数据动态组织调度方法[J]. 中国科学院大学学报,2015,32(3): 409-415.WANG Feng, PAN Deji, WANG Jun. Dynamic dispatching and organization of massive data of urban 3D model[J]. Journal of University of Chinese Academy of Sciences, 2015, 32(3): 409-415. JIANG S, YANG B, SUN X. Multi-resolution representation of 3D complex building models with features preservation[C]//International Conference on Geoinformatics. [S.l.]: IEEE, 2011: 1-5 朱庆,陈兴旺,丁雨淋,等. 视觉感知驱动的三维城市场景数据组织与调度方法[J]. 西南交通大学学报,2017,52(5): 869-876. doi: 10.3969/j.issn.0258-2724.2017.05.005ZHU Qing, CHEN Xingwang, DING Yulin, et al. Organization and scheduling method of 3D urban scene data driven by visual perception[J]. Journal of Southwest Jiaotong University, 2017, 52(5): 869-876. doi: 10.3969/j.issn.0258-2724.2017.05.005 期刊类型引用(6)
1. 杨林川，朱庆. 建成环境对老年人出行行为影响的空间异质性. 西南交通大学学报. 2023(03): 696-703 . 
本站查看2. 李光华，谢凤祥，罗涛. 基于GIS的流域梯级电站综合信息处理关键技术研究. 电子设计工程. 2023(20): 154-158 . 
百度学术3. 董广智，由佳，王战. 自适应网络结构断边重连方法设计与实现. 计算机仿真. 2022(08): 427-431 . 百度学术4. 康万杰，潘有顺. 光纤网络中云计算资源联合最优分配方法. 激光与红外. 2022(11): 1689-1694 . 百度学术5. 朱军，吴思豪，张昀昊，黄华平，郭煜坤，陈逸东，李维炼. 大规模道路交通数据网络轻量化可视化方法. 西南交通大学学报. 2021(05): 905-912 . 本站查看6. 周萌. 基于WebGL技术的三维自动化可视系统设计. 制造业自动化. 2021(10): 75-78 . 百度学术其他类型引用(6)
-
下载:
百度学术
点击查看大图
计量
- 文章访问数: 568
- HTML全文浏览量: 286
- PDF下载量: 12
- 被引次数: 12