三维模型中的热点研究
作者：徐景周
一、概述
在主流的PC机上，支持三维模型漫游预览与内部热点选择。
二、三维图形库
市面上的三维图形库很多，基本分为Web端(WebGL)与非Web端(OpenGL/OpenGLES)、商用收费与免费开源两类。目前，主流的三维图形库大致如下所示。
- ArcGIS Engine（收费）
- U3D （收费）
- OverDrive（收费）
- Hightopo（收费）（http://www.hightopo.com/）
- Ossimplanet（开源）（http://trac.osgeo.org/ossim/wiki/OssimPlanet）
- Wings 3D（开源）（http://www.wings3d.com/）
- OGRE（开源）（https://github.com/OGRECave/ogre）
- Cesium（开源）（http://cesiumjs.org）
- OSG（开源）（https://github.com/openscenegraph/OpenSceneGraph）
- OPEN CASCADE（开源）（https://www.opencascade.com）
- Potree（开源）（http://potree.org/）
- SceneJS（开源）（http://scenejs.org）
- Three.js（开源）（https://threejs.org/）
- 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中最接近于三维漫游与热点切换的例子。加载速度很快，但清晰度太差，达不到业务需求。
示例：
- Hightopo
国内某公司出品，不透明收费，并且代码较难看懂。
示例：
- SceneJS
开源的JavaScript3D引擎，特别适合需要高精度细节的模型需求，比如工程学和医学上常用的高精度模型。缺少碰撞检测等功能。
示例：
http://scenejs.org/examples/index.html#scenegraph_firstExample
- Three.js
国内学习资料多，但加载速度慢、缺少碰撞检测等功能。
示例：
- BabylonJS
微软公司于2013年发布并开源。优点是功能较为全面，缺点是国内资料基本没有。
示例：
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://doc.babylonjs.com/generals/file_format_map_(.babylon)
编辑工具：
http://materialeditor.raananweber.com/
Shader在线查看(GLSL语言编写：Vertex Shader和Pixel Shader)：
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/起始的网址，都属于第三方提供，示例源码大多无法直接取得!
图一
4.9 源码下载
- BabylonJS源码
- Website源码
- Hand.js源码
4.10 重点示例
http://www.babylonjs.com/demos/sponza/
http://www.babylonjs.com/demos/mansion/
http://www.babylonjs.com/demos/distraction/
4.11 编码
可以直接Java Script编写；也可以通过微软提供的Type Script来编写，不过最终需通过node.js的gulp进行转换，生成Java Script。
五、业务
5.1 需求
实时从第三方平台读取相应数据，匹配更新三维模型中的各热点信息。
5.2 架构
图二
六、总结
同three.js类似，BabylonJS作为三维图形库与Web端游戏引擎，功能比较丰富、灵活、模型显示不失真，但同样学习难度大、周期长，需要进行大量深入的学习与研究。另外，在模型文件较大或较多时，浏览器打开时会等待较长时间。