三维模型中的热点研究

                                  三维模型中的热点研究

                                                                               作者:徐景周

一、概述

        在主流的PC机上,支持三维模型漫游预览与内部热点选择。

 

二、三维图形库

        市面上的三维图形库很多,基本分为Web端(WebGL)与非Web端(OpenGL/OpenGLES)、商用收费与免费开源两类。目前,主流的三维图形库大致如下所示。

  1. ArcGIS Engine(收费)
  2. U3D (收费)
  3. OverDrive(收费)
  4. Hightopo(收费)(http://www.hightopo.com/)
  5. Ossimplanet(开源)(http://trac.osgeo.org/ossim/wiki/OssimPlanet)
  6. Wings 3D(开源)(http://www.wings3d.com/)
  7. OGRE(开源)(https://github.com/OGRECave/ogre) 
  8. Cesium(开源)(http://cesiumjs.org)
  9. OSG(开源)(https://github.com/openscenegraph/OpenSceneGraph)
  10. OPEN CASCADE(开源)(https://www.opencascade.com)
  11. Potree(开源)(http://potree.org/)
  12. SceneJS(开源)(http://scenejs.org)
  13. Three.js(开源)(https://threejs.org/)
  14. BabylonJS(开源)(http://www.babylonjs.com/)

 

三、技术选型

3.1.   非Web端三维图形库

        数量多、性能好、API丰富。因为属于Native APP范畴,所以缺点是不能一次编码,跨平台运行,需针对不同平台单独集成编码。

3.2.   Web端三维图形库

        伴随HTML 5诞生,故目前可用库较少、在浏览器内运行也导致性能略差、功能与移动设备支持的三维标准OpenGL ES类似,都是从OpenGL剪裁而来。最大的优点是跨平台性,即一次编码,可四处运行(只要浏览器支持WebGL标准)。

3.3.   分析

        根据业务需求,优先考虑Web端三维开发。可选的范围在Potree、Hightopo、Three.js和BabylonJS之间。

  • Potree

研究了Potree中最接近于三维漫游与热点切换的例子。加载速度很快,但清晰度太差,达不到业务需求。

示例:

http://potree.org/demo/potree_1.5/examples/annotations.html

  • Hightopo

国内某公司出品,不透明收费,并且代码较难看懂。

示例:

http://www.hightopo.com/demo/building/index.html

http://www.hightopo.com/demo/media/index.html

  • SceneJS

开源的JavaScript3D引擎,特别适合需要高精度细节的模型需求,比如工程学和医学上常用的高精度模型。缺少碰撞检测等功能。

示例:

http://scenejs.org/examples/index.html#scenegraph_firstExample

  • Three.js

国内学习资料多,但加载速度慢、缺少碰撞检测等功能。

示例:

https://threejs.org/examples

  • BabylonJS

微软公司于2013年发布并开源。优点是功能较为全面,缺点是国内资料基本没有。

示例:

http://www.babylonjs.com/

3.4.   选型

        在此抛开商用收费三维库以及模型清晰度不够的Potree库外,剩下的在SceneJS、Three.js和BabylonJS中进行选择。由于三者在着眼点上的不同,所以略有差异。经过初步研究与判定后,优先选取BabylonJS为本次基础开发的三维图形库。

 

四、BabylonJS

下面将针对BabylonJS,重点进行描述。

4.1    导入格式

导入三维模型的格式除了自己的.babylon文件外,还支持其它三种格式:obj、stl、glTF。

4.2    导出插件

BabylonJS提供了一些插件,可以在3dMax、Blender、FBX、Maya等软件内安装其插件后,对创建的模型导出成.babylon模型文件。

下载地址:

https://github.com/BabylonJS/Babylon.js/tree/master/Exporters

4.3    .babylon模型文件

.babylon模型预览,可以通过官方提供的沙盒地址,通过拖放.babylon文件进行查看。经过测试,发现个别.babylon模型仍难以打开。

模型预览:

http://sandbox.babylonjs.com/

格式解析:

https://github.com/h53d/babylonjs-doc-cn/blob/master/target/generals/General/File_Format_Map_(.babylon).md

http://doc.babylonjs.com/generals/file_format_map_(.babylon)

编辑工具:

http://materialeditor.raananweber.com/

Shader在线查看(GLSL语言编写:Vertex Shader和Pixel Shader):

http://cyos.babylonjs.com/

4.4    浏览器支持

对目前主流的IE11以上、Chrome和FireFox都支持,本人已在Chrome v 57.0.2970.0和Microsoft EdgeHTML 14.14393测试通过。

4.5    速度

同Three.js类似,加载大模型时速度较慢。需提供正在载入信息提示,尽可能提高用户体验。不过Babylon为了尽可能的提高加载速度,提供了工具可以将.babylon文件转换成几个文件,缓式加载以提高显示速度。

工具:

http://doc.babylonjs.com/tutorials/using_the_incremental_loading_system

4.6    潜在问题

同Three.js类似,Firefox浏览器在本地同时打开多个较大模型时,会提示浏览器性能不足问题。另外,模型在100M以上时可能存在无法加载的现象。

4.7    运行环境

运行Web端应用,需先在本地搭建应用服务器环境。例如:Apache、Tomcat、JBoss等。

4.8    Web展示效果

如图一所示。

备注:官方网站提供的示例中,点击后所有非http://www.babylonjs.com/起始的网址,都属于第三方提供,示例源码大多无法直接取得!

三维模型中的热点研究_第1张图片

                                                         图一

 

4.9    源码下载

 

  • BabylonJS源码

https://github.com/BabylonJS/Babylon.js

  • Website源码

https://github.com/BabylonJS/Website

  • Hand.js源码

http://handjs.codeplex.com/

4.10  重点示例

http://www.babylonjs.com/demos/sponza/

http://www.babylonjs.com/demos/mansion/

http://www.babylonjs.com/demos/distraction/

http://www.babylonjs.com/demos/actions/

http://www.babylonjs.com/demos/train/

4.11  编码

可以直接Java Script编写;也可以通过微软提供的Type Script来编写,不过最终需通过node.js的gulp进行转换,生成Java Script。

 

 

五、业务

5.1    需求

        实时从第三方平台读取相应数据,匹配更新三维模型中的各热点信息。

5.2    架构

三维模型中的热点研究_第2张图片

                                                                                                  图二

 

六、总结

        同three.js类似,BabylonJS作为三维图形库与Web端游戏引擎,功能比较丰富、灵活、模型显示不失真,但同样学习难度大、周期长,需要进行大量深入的学习与研究。另外,在模型文件较大或较多时,浏览器打开时会等待较长时间。

 

 

 

你可能感兴趣的:(三维模型中的热点研究)