基于无插件化的三维室内点云可视化系统
2019-10-08刘梦莹安康
刘梦莹 安康
摘 要： 科技的不断进步推动着测绘技术的不断发展， 传统的测量技术已经不能满足大众对于建筑的直观感受。三维激光扫描技术以其获取数据速度快、精准度高、数据信息量大、实用性强等特点逐渐成为测绘领域中的重要测绘技术[1]。本文详细介绍了三维室內点云漫游系统的开发框架和核心技术。分析三维点云数据在采集过程中所遇到的问题和处理方法。同时引用potree.js将武汉大学实验室部分的室内三维点云为例，结合THREE.JS、MapBox、HTML5等技术进行室内点云漫游的构建，实现了室内点云无插件化漫游、测量等交互。
关键词： 室内漫游;HTML5;三维点云
中图分类号： P237 文献标识码： A DOI：10.3969/j.issn.1003-6970.2019.05.039
本文著录格式：刘梦莹，安康. 基于无插件化的三维室内点云可视化系统[J]. 软件，2019，40（5）：200206
【Abstract】： The continuous advancement of science and technology has promoted the continuous development of surveying and mapping technology. The traditional measurement technology can no longer satisfy the public's intuitive feeling of architecture. The 3D laser scanning technology has become an important mapping technology in the field of surveying and mapping because of its fast data acquisition， high precision， large amount of data information and strong practicability [1]. This paper introduces in detail the development framework and core technology of 3D indoor point cloud roaming system. Analyze the problems and processing methods encountered in the acquisition process of 3D point cloud data. At the same time， we refer to potree.js as an example of the indoor 3D point cloud in the laboratory part of Wuhan University. Combining THREE.JS， MapBox， HTML5 and other technologies to construct indoor point cloud roaming， realizing the interaction of indoor point cloud without plug-in roaming and measurement.
【Key words】： Indoor roaming; HTML5; 3D point cloud
0 引言
近年来，城市数字化工作在国内各线城市中开展，在对城市的三维空间信息的采样获取过程中，逐渐实践和总结出了多种快速有效的手段[2]。作为一种新型测量手段，三维激光扫描技术使得快速大量获取空间点位信息成为可能，并以其非接触、快速、连续获得目标物信息的特性，迅速成为了现今获取三维空间信息的重要方法，被广泛应用于古建筑保护、特大异性结构变形监测以及城市测量等方面。扫描获取的待处理点云数据是后续数据分析、生成格网模型及进行三维可视化展示的基础，因此，寻求一种远程、交互良好、无插件的网络点云可视化工具对于快速获取和评价点云数据质量及点云处理进度规划具有重要意义。
1 核心技术路线
HTML5是基于HTML、HTML4之后，由万维网联盟发布的网络开发语言。目前HTML5框架已经适用与市场上常见的浏览器包括360快速浏览器、IE浏览器、Chrome（谷歌浏览器）、Firefox（火狐浏览器）、Safari、Opera 等[4]。HTML5语言具有易学性、跨平台性、可扩展性等特点，适合新手快速学习并开发相关页面。本文通过
整体的div框架如图1所示。
1.2 Potree.js和Three.js
Potree.js是基于三维引擎WebGL进行开发的一套激光点云浏览、处理、可视化的开源库。Potree.js是由奥地利维也纳理工大学的Harvest4D项目贡献。它的优势在于可以进行点云数据的转换，比如常见的ply，laz等等。
调用Camera.fov（）;可以改变视野的大小，在三维点云中的效果就是放大或者缩短距离某一个方向的距离。
1.3 Mapbox的使用
伴随着互联网技术的发展，人们对位置服务的需求日趋增长。近年来网络地图模式成为人们出行的必备。国内常用的网络地图有百度地图、高德地图、腾讯地图、天地图等等。但是这些地图提供出的API比较受限制，同时缩放级别zoom比较小，不符合缩略图的要求。Mapbox提供的地图是OSM的，它是一个开源免费的地图，同时缩放级别比较高，满足缩略图的需求。OSM地图加载方式很简单，在Mapbox注册一个账号，拿到秘钥就可以加载一副直接地图。当然想实现其他的一些功能，需要调用API来完成。
本文中用到的API有
button_right_map = new mapboxgl.Map（{
container： 'Map_Navigation'，
style： 'mapbox：//styles/ mapbox/streets-v9'，
center： [114.354847195187， 30.5294068646091]，
zoom： 19
}）; //显示地图
new mapboxgl.Marker（）;//添加标记
Mapmarker.remove（）;//清除标记
2 技术路线
2.1 三维点云数据处理
激光扫描仪在室内扫描数据，扫描数据的原理是计算发射和接收信号的时间，计算位置，根据发射角，从而得到扫描位置的位置坐标。在采集数据的过程中，由于透明材质或者吸收能力强反射能力弱的材质，比如玻璃或者透明的挡板都会影响激光雷达数据的采集。最后得到的点云数据有两种错误类型的数据：（1）离散点，这些点发散在主体点云附近，或者远离主体点云，这些点是由于激光没有完全发生造成能量波的损失，从而得到了错误的数据。（2）噪声点，这些测量的噪声信号受到测量物体的形状，物体的材料，光线或者其他环境因素的影响。这些测量误差统称为噪声点[5]。
点云数据中存在噪声点和离散点会影响点云数据的应用，比如点云和图像的融合，点云特征面、特征线的提取等等。由于噪声的存在，会影响图像分割的效果[6]。因此，在使用点云之前首先将点云的离散点和噪声点进行去除。去除离散点，首先进行离散点的检测，常用的检测算法是k-邻域距离搜索，通过计算每个点到附近点的一个距离的标准差和方差，根据点云的密度设置一定的阈值，进行多次调参得到合理的去除离散点的阈值，从而很好地剔除离散点[7]。常用的噪声点剔除方法是根据邻近点的几何特征，根据几何特征属性进行识别噪声点。
本文通过PCL库，调用PCL点云滤波函数和相关的API，通过多次调参进行点云数据处理。数据处理的流程如图4所示。
2.2 三维点云可视化
单线激光雷达每秒可以扫描10800个点，本文中用到的是两个单线雷达，通过一段时间的扫描，获取的点云数据量是庞大的。目前点云加载缓慢、可视化效果差是制约激光雷达发展的瓶颈之一。庞大的点云数据量只有建立了一种拓扑关系和数据组织结构，通过检索的方式加载子节点、叶节点，通过子节点和叶节点不断地加载父节点，达到一种异步加载点云的效果。
目前建立三维点云数据结构比较成熟的算法有八叉树、四叉树、KR树等等，本文中用到的是八叉树算法。室内三维激光扫描仪在室内扫描之后，得到的点云数据往往有很多不规则的物体，比如沙发、被子、椅子等等，获取的每个点都具有（x，y，z）三维信息，信息量庞大。八叉树数据结构模型对于体状目标物数据的管理具有独到的优势[8]。比较以上算法，八叉树可以更高效率地将点云数据进行结构化，建立相关的检索和索引方式。
2.3 局部坐标转WGS84坐标
局部坐标系（Local Coordinate），是坐标系以物体的中心为坐标原点，同时物体的旋转、平移等操作都是围绕局部坐标系进行的，这时，当物体模型进行旋转或平移等操作时，局部坐标系也执行相应的旋转或平移操作[9]。
WGS84：World Geodetic System 1984，是为GPS全球定位系统使用而建立的坐标系统。
本篇文章采用的是椭球参数为：a=6378137，b= 6356752.314245179， ，具体的转换过程和思路框架如图5所示。
具体每一步对应的坐标转换公式，首先将局部坐标已知点的WGS84坐标（Lon，Lat，H）转换为空间直角坐标，具体公式如公式1：
公式1. WGS84转空间直角坐标公式如下：
Ref_X = （N+H）*cos（Lon）*cos（Lat）
Ref_Y = （N+H）*cos（Lon）*sin（Lat）
Ref_Z = [N*（1- ）+H]*sin（Lon）
室内点云和路径点有一个坐标（x，y，z）有相对应的WGS84坐标（Lon，Lat，H），将（x，y，z）转换为ENU公用的城市局部坐标[10]，转换公式如公式2 所示：
公式2. 局部坐标系转旋转Angle之后的ENU坐标：
公式3. ENU坐标转WGS84空间直角坐标
dx = -sin（Lon）*X0-sin（Lat）*cos（Lon）*Y0+cos（Lat）* cos（lon） * Z0;
dy = cos（Lon）*X0-sin（Lon）*Y0+cos（Lat）* sin（lon） * Z0;
dz = cos（Lat） * Y0 +sin（Lat） * Z0;
公式4. 轉换后的空间直角坐标跟（Ref_X，Ref_Y，Ref_Z）坐标相差一个偏移量，将（dx，dy，dz）转换到（Ref_X，Ref_Y，Ref_Z）对应的空间直角坐标
Cover_X = Ref_X + dx;
Cover_Y = Ref_Y + dy;
Cover_Z = Ref_Z + dz;
得到相对坐标系下坐标（x，y，z）与之对应的空间直角坐标系，因此通过空间之间坐标可以反算求出与之对应的WGS84坐标，这样相对坐标就转换为WGS84坐标，具体公式如公式5所示：
公式5. 空间之间坐标转换为WGS84坐标，公式如下：
计算所需要的参数：
a = 6378137;
b = 6356752.314245179
）
2.4 三维室内点云漫游的构建
构建一个室内三维点云漫游系统需要以下必须的构件：基于HTML的场景容器、Three.js 提供场景（scene）、相机（camera）、渲染（render）、鼠标监听事件。
基于上述的技术路线和方法，构建三维室内点云漫游系统。主要框架是基于HTML5提供的标签
和。Body下包含三个容器，有工具搜索容器、OSM地图容器、场景渲染容器。head主要添加系统中所用到的js库，主要的库有Three.js和Potree.js以及其他一些常用的js库。系统中用到的一些api和函数都是基于head所引用的js。工具容器的作用是对点云场景进行一些功能操作，包括鼠标右键调用点云测量功能以及对点云一些属性的控制，有点云大小（size）、点云透明度（opciaty）、点云渲染方式等等一些功能。OSM地图容器包含地图的点击事件以及点云漫游路径点的加载。场景容器主要用来渲染三维室内点云，加载各种渲染的效果，同时加载漫游的路径点，通过点击路径点可以进行漫游。总体的框架如图6所示。2.4.1 加载三维点云
场景加载三维点云的数据是通过室内移动扫描仪器获得的，将点云数据进行预处理，处理的方法和算法在点云处理小节有详细的介绍。本文主要将处理之后的点云数据通过Potree-contoner进行转换成很多bin文件，这些bin文件之间通过八叉树建立了索引关系和子父级关系。通过调用potree.load（）加载点云文件，由于点云文件比较大，同时加载所
有点云数据，耗时长且对电脑的内存占用量大。该系统的方法是通过加载每个节点的父级数据，进行初步地加载，同时识别相机的视角方向和位置，从而进行局部加载点云数据，不至于大数据点云造成系统崩溃。
2.4.2 漫游浏览效果设计
通过调用Three.js中PerspectiveCamera达到人眼看世界的视觉效果。PerspectiveCamera有位置属性、视场角属性，获取路径点的位置信息，将位置信息赋予相机位置属性达到在点云中漫游浏览的视觉效果。Js函数中有监听鼠标左右键点击以及鼠标滑轮正反滑动事件，通过监听鼠标滑轮滑动事件panocontainer.addEventListener（'wheel'，_fn_onDocu-mentMouseWheel）;达到场景缩放的效果，具体的做法是通过var delta = Math.max（-1， Math.min（1， （e.wheelDelta || -e.detail）））;var camerawheel_fov = Math.max（10， Math.min（100， camerafov - （5 * delta）））;将所算的滑轮值赋给相机视场角，改变相机视场角。
2.4.3 点云渲染
采集的原始点云数据具有x，y，z信息和r，g，b值，渲染的点云是假彩色。选用不同的功能选项可以用不同的渲染方法进行渲染得到不同的点云视觉效果。高度渲染是根据点云Z的值渲染点云，根据不同的高度赋予不同的颜色，可以从整体看出高差信息。选用纯色渲染，调用HTML的
2.4.4 点云测量
三维点云点之间的相对位置比较准确，通过鼠标获取旋转的三维点的坐标值可以进行测量两点间的水平距离和高差值，更好地利用点云数据。为了增强用户的使用体验，将距离测量、高度测量、面积测量等一些测量功能通过右键菜单选项进行调用。
2.4.5 OSM地图加载和位置点显示
OSM地图是开源地图数集，注册Mapbox之后得到密钥即可以使用。通过在OSM地图上粗略地获取点云数据集的地图经纬度，在加载地图时直接显示。通过第二节描述的相对坐标和wgs84坐标相互转换，将漫游路径点的相对位置通过转换公式转换为wgs84坐标，每次点击路径点之后，重新调用
new mapboxgl.Marker（el）
.setLngLat（coordinates）
.addTo（button_right_map）;
}
}）;将标记点重新赋新的位置數据。
3 应用实例
本文所用的数据是实验室的室内三维点云数据，选用subline Text3 作为代码编辑器，结合Three.js、Mapbox以及Potree.js搭建三维可视化平台。所构建的可视化软件主要包括点云局部加载和渲染、缩略图、点云测量、点云模块控制。首先通过Potree-contoner将可视化的点云进行八叉树分割，每个文件夹里都有分割出来的bin文件，将分割的很多bin文件当成已知数据进行加载，如图7所示。
通过Potree.loadPointcloud（）;加载点云数据，通过上文综述的构建方法搭建web前端，构建的三维可视化浏览器可以支持常用的浏览器，包括Firefox、360快速浏览器、chrome，IE浏览器。加载的点云效果如图8所示。
同时有一些辅助的功能，可以右键进行点云距离测量、高度测量、面积测量等一些功能。
（1）距离测量，调用Three.js的碰撞事件，获取鼠标碰撞点云的坐标值，进行距离测量、高度测量、面积测量。
（2）还有一些渲染点云的功能以及对点云材质属性进行设置，比如点云的大小、点云的透明度，点云渲染的形状。
（3）漫游位置的缩略图，红色的标记点就是此刻漫游的位置，浅蓝色的点的位置是相机可以到达的路径点，这些点都可以进行漫游，如图13所示。
4 结束语
本文介绍了一种基于potree.js和Three.js的无插件化的三维室内点云浏览软件。通过Potree-contoner将处理之后的点云数据进行分割，这样可以解决大数据集的点云加载卡顿问题。同时该软件也有很多的不足之处，因为研究的时间有限，需要进一步研究的问题有以下几点：
（1）目前只有测量点云的一个功能，没有太多功能提供给用户使用，实用性较低。
（2）后期可以引入兴趣点这一概念，增加点云浏览的可检索性。
（3）mapbox的缩略图没有添加室内点云的平面图，位置标记不明确，后期考虑加上平面图，增加可读性。
参考文献
[1] 杨书哲. 基于三维激光扫描技术的校园可视化[J]. 资源信息与工程， 2017（06）： 140-141.
[2] 王磊， 郭清菊， 姜晗. 基于改进的八叉树索引与分层渲染的海量激光点云可视化技术[J]. 软件， 2016， 37（3）： 114- 117.
[3] 王连杰， 韦群. 三维云图仿真系统设计与实现[J]. 软件， 2018， 39（5）： 151-155.
[4] 叶梦轩， 危双丰， 张冬梅. 基于 HTML5 和 WebGL 的三维点云可视化方法[J]. 工程勘察， 2017（1）： 40-44.
[5] 薛萍， 姚娟， 邹学洲， 王宏民. 基于法矢修正的点云数据去噪平滑算法[J]. 哈尔滨理工大学学报， 2018， 23（05）： 86-91.
[6] 李慧霞， 高梓豪. 室内智能移动机器人规则物体识别与抓取[J]. 软件， 2016， 37（02）： 89-92.
[7] 曹妍， 陈伟， 徐森. 图像去噪方法研究与仿真[J]. 软件， 2015， 36（4）： 33-36.
[8] 徐旭东， 李泽. 三维激光点云数据的可视化研究[J]. 计算机科学， 2016， 43（S1）： 175-178.
[9] 张克敏. 基于虚拟现实的机器人仿真研究[D]. 重庆： 重庆大学， 2012.
[10] 朱玲， 于颖， 张宝泉， 等. 小车寻迹过程的虚拟实现[J]. 软件， 2015， 36（7）： 5-9.
