Transcript
Page 1: WebGL的机载激光雷达点云数据可视化xuebao.hnust.edu.cn/DownLoad/20132241522216359927.pdf · 中图分类号:P237.3 文献 标识码 ... 就需要进行点云的三维可视化

第27卷 第4期2012年  12月

   湖南科技大学学报(自然科学版)

JournalofHunanUniversityofScience&Technology(NaturalScienceEdition) Vol.27No.4Dec. 2012

基于 WebGL的机载激光雷达点云数据可视化 ①

曾繤

(武汉大学 遥感信息工程学院,湖北 武汉430079)

摘 要:提出了一种基于网络图形库WebGL,在网络浏览器中对大规模机载激光雷达点云数据进行交互式三维可视化的方法.该方法以平均分布四叉树进行数据组织,基于视点对四叉树进行快速视锥体裁切实现点云渐进绘制.在此基础上开发了原型演示系统.实验证明该系统能为用户在网络浏览器中提供很好的机载激光雷达点云数据的交互式三维可视化体验.

关键词:点云;交互式可视化;基于网络的图形库;机载激光雷达

中图分类号:P237.3   文献标识码:A   文章编号:1672-9102(2012)04-0060-05

  机载激光雷达(AirborneLightDetectionAndRanging-机载 LiDAR)系统是一种集激光雷达、测姿定位系统(POS系统)以及控制系统为一体的新型航空传感设备,能直接高精效获取地表点的三维

坐标,并带有一定的被观测目标的垂直结构信息以

及强度信息.近年来随着机载激光雷达技术的飞速进步,机载LiDAR以其精度高、数据信息丰富、适应性强等特点,正在成为数字高程模型最主要的获取

手段之一,在城市测量、电力线路勘测设计、公路铁

路勘测、露天矿和垃圾堆放场、森林管理、海岸线的

保护、地质灾害监测等行业得到广泛应用[1-2].不同于传统的航空摄影测量,机载激光雷达系

统直接获取的原始点云数据是一组三维空间内离散

分布的点,要进一步对其进行数据分析和结果检验

就需要进行点云的三维可视化.而传统的网络地理信息系统(WebGIS)是针对二维的栅格和矢量数据开发的.如何在网络环境中有效地发布激光雷达点云数据在地理信息系统高度网络化的今天仍然没有

得到较好的解决.新的WebGL(基于网络的图形库)规范[3]的出

现为互联网浏览器带来无插件3D硬件图形加速.该技术的出现使得三维地理信息数据无需插件直接

在网络浏览器中的可视化成为可能,立即引起了

WebGIS领域的广泛关注.2011年10月 GoogleMap率先启用了 MapsGL功能.MapsGL采用了 WebGL技术,无需安装 GoogleEarth插件就可以在浏览器中实现类3D的卫星地图界面,以增强 Google地图的体验[4].ArcGIS等其他各大地理信息系统开发商也纷纷跟进,在今年将对WebGL的支持纳入到新的开发路线图[5].

在点云数据处理领域,基于WebGL的点云数据可视化迅速成为了新的研究热点.开源三维点云处理库 PointCloudLibrary[6],加拿大 Arius3D公司的Pointstream[7],OpenWebGlobe项目[8]以及德国海德

堡大学地理学院的 GIScienceGroup研究组[9]都迅

速提出了自己的基于 WebGL的点云数据浏览窗口研究方案,并已经开发出了原型.但这些研究主要是针对地面激光扫描点云数据.而目前国内对这方面的研究尚属空白.

本文在简要介绍 WebGL技术的相关知识基础

06

收稿日期:2012-09-12基金项目:国家高技术研究发展计划("863"计划)(2006AA12Z101;2009AA12Z107)通信作者:曾繤(1982-),男,湖北武汉人,博士研究生,主要从事LiDAR数据分析处理研究.E-mail:zengxun@126.com

Page 2: WebGL的机载激光雷达点云数据可视化xuebao.hnust.edu.cn/DownLoad/20132241522216359927.pdf · 中图分类号:P237.3 文献 标识码 ... 就需要进行点云的三维可视化

上,分析了机载激光雷达点云数据网络可视化需要

解决的难题并给出了技术方案,结合WebGL技术的特点提出了一种以平均分布四叉树进行数据组织,

基于视点进行快速视锥体裁切的点云渐进绘制方

法,并在此基础上开发了原型演示系统.实验证明该系统能为用户在网络浏览器中提供很好的机载激光

雷达点云数据的交互式三维可视化体验.

1 WebGL

WebGL是一套跨平台,开放免费的底层三维图形JavaScriptAPI,允许开发者在浏览器中直接嵌入支持硬件加速的互动3D图形.WebGLAPI是基于OpenGLES2.0的,是 OpenGLES2.0的子集.WebGL可以为 HTML5Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化.作为一项开放的 web标准,WebGL是由KhronosGroup开发的,受到业界主流硬件产品和浏览器软件提供商的广泛支持,包括

Google,Apple,NVIDIA等公司和组织都是其中的成员,即这一标准的制定者和积极倡导者.FireFox,GoogleChrome,Opera和 AppleMacOSSafari等浏览器产品已提供对WebGL的支持.[3]

WebGL完美地解决了现有的 Web交互式三维动画的2个问题:第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件支持;第二,它利用底层的图形硬件加速功能进行的

图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的,所以WebGL可以运行于许多不同的硬件设备之上,例如桌面电脑、智能手机、平板电脑和

智能电视.因为是被设计成直接工作在底层显卡端的,所

以WebGL比目前其他的典型的 web技术都要更加复杂.这也正是它为什么能够如此迅速的完成大量的计算,并实现复杂的实时3D渲染的原因.因此,很多第三方的 WebGL中间件(Three.js,SceneJS,Processing.js等)被开发出来,帮助不熟悉 OpenGL着色语言(OpenGL'sshadinglanguage,GLSL)的使用者完成一些复杂的操作,减轻三维网络应用的开发

负担.然而,这些 WebGL中间件中的大多数都是针对纹理网格(texturedmeshes)开发的,对于点云数据的可视化并不适用.

XBPointStream[10]是一个专门针对点云数据开

发的开源WebGL图形引擎.它提供了点云数据基于WebGL的网络可视化所需要的基础框架,大大简化了基于WebGL的点云数据可视化应用的开发流程.因此,本文选择在其基础上进行基于WebGL的机载激光雷达点云数据可视化的开发.

2 研究方案

机载激光雷达获取的点云数据数据量很大,单

个分块的数据量通常达到几百MB甚至几个GB.要在网络浏览器中对数据量如此巨大的点云进行可视

化显示,就必须解决以下2个问题:1)点云数据的大小往往超过了计算机内存和

图形处理器显存的容量.2)将整个点云文件下载到本地计算机往往需

要几分钟甚至更长的时间,这在网络环境中是不可

容忍的.交互式可视化显示和操作环境中几秒钟的延迟都是用户无法容忍的.

当前大规模点云数据可视化的主流解决方法是

使用多层次细节模型(level-of-detail,LOD)与内外存调度(out-of-core)的点云数据绘制技术[11-12].但这并不适用于本文所需要解决的问题.因为WebGL是一组 JavaScriptAPI,基于 WebGL的网络应用也使用JavaScript开发并运行在浏览器中.而这些算法往往数据结构复杂、CPU计算密度大并不适用于基于 JavaScript的 WebGL开发.因此本文采用了一种数据结构简单,算法易于实现的以平均

分布四叉树进行数据组织,基于视点进行快速视锥

体裁切的点云渐进绘制方法.该方法试图从两方面出发解决上述2个难题:1)数据预处理:对需要网络发布的点云数据采

取四叉树空间划分的数据组织,将原始点云数据进

行分块存储.2)绘制机制:在浏览器端采用视点相关的点云

渐进绘制方法,只下载和绘制与当前视点相关的数

据块,而不是一次性装载整个点云的数据.

3 基于四叉树的机载激光雷达点云数据组织

  点云数据的可视化数据组织多采用八叉树或其变种的组织形式[13-14].但是这些可视化应用所针对的主要是近景激光扫描或近景摄影测量所得到的点

云数据.而机载激光雷达所获取的点云数据与之相比具有以下特点:

16

Page 3: WebGL的机载激光雷达点云数据可视化xuebao.hnust.edu.cn/DownLoad/20132241522216359927.pdf · 中图分类号:P237.3 文献 标识码 ... 就需要进行点云的三维可视化

1)机载激光雷达获取的点云数据往往覆盖一片很大的区域,在平面坐标方向(x轴,y轴)分布很广,而在高程坐标方向(z轴)的分布与前者相比通常很小.因此在使用八叉树对机载激光雷达数据进行空间划分数据组织时,会在 z轴方向产生大量空节点,既浪费了存储空间也降低了绘制效率.2)另一方面,对于机载激光雷达点云的可视化

渲染通常采用鸟瞰,飞掠(fly-by)视角.在这种视角下,基于四叉树的空间划分就可以有效地进行视

场剪裁.因此,本文采用黄先锋等人[15]提出的均匀分布

四叉树点云数据组织.传统的四叉树结构,将所有的点都存储在叶子节点中,中间节点仅存储指向子节

点的指针.均匀分布四叉树,首先将点云空间按照四叉树模型进行细化,依次将点云均匀地布置在每一

个节点上.绘制时,可以通过视场范围快速地进行数据裁切.由于点云数据紧凑地组织在一起,所以可以使用内存映射的方式将数据快速传给显卡的图形处

理单元(GPU)进行渲染.

4 点云数据预处理

点云数据预处理程序从原始点云文件中读取点

云数据,然后构建点云的平均分布四叉树,将四叉树

中每个节点中包含的所有点存储到一个单独的文件

中;同时生成该点云数据的元数据文件,元数据文件

包含该点云数据格式,数据文件存储目录,空间覆盖

范围,总点数,个子节点文件名和包含点的个数等描

述信息.在构建平均分布四叉树时,本文采用文献[15]中将原始点云文件的分段的方法自上而下递归构建四叉树,流程如下:

1)直接将文件分成100000段或者更多段.2)从原始点云中随机读取某段中的一个点,从

第一层开始计算.3)计算落在该层的某个节点编码,如果该节点

上点云个数已经达到上限 maxNumNodePoints,则从下一层开始计算,继续执行2).4)根据编码将该点存储到该节点对应的数据

块文件中.maxNumNodePoints对于点云的绘制效果有很

大的影响.maxNumNodePoints过大时,数据分块过大,在绘制时由于每块节点数据的传输延迟会出现

卡顿的情况.maxNumNodePoints过小时,四叉树的层次太大,加重了视锥体裁切运算和数据输入线程

的负担.

5 基于视点的点云渐进绘制

文献[6-9]中的点云可视化方法都是将一次性静态地载入整个点云,无法实现大规模点云的可

视化.本文采取一种基于视点的点云渐进绘制机制.可视化应用启动时只装载四叉树根节点的数

据,后续的文件输入由一个背景线程进行处理以免

影响用户对三维点云的交互操作.在每一帧绘制开始时,根据当前的视锥体和投影参数对四叉树进行

裁切.对于落入视锥体范围的四叉树节点将其对应的数据块文件按照四叉树中从上到下的顺序加入

XBPointStream的点云渲染队列,对视锥体以外的节点则将其从队列中删除.由于每个节点数据文件都很小,因此不会由于数据传输造成点云的绘制的停

顿.点云均匀分布在四叉树上,XBPointStream对于输入的点云渲染队列是按照四叉树从上到下的顺序

进行渐进逐层加密绘制.当用户进行平移,缩放,旋转等互操作时,只需要根据视锥体裁切四叉树的结

果,加入或删除对应的节点数据块.这种绘制方法只需要根据视场变化处理相关的部分数据,避免了一

次性装载全部点云数据带来的系统和网络负担,能

较好地实现大规模点云数据的实时绘制.在某些极端情况下,例如初始视场覆盖整个点

云数据时,视锥体裁切的结果会包含所有的四叉树

节点.主流显示器的分辨率为 1920×1080,包含2073600个像素.当点云绘制程序读入的点的个数大于绘制空间的像素数时,就意味着多个点会被同

一像素覆盖.因此,本文在由上至下逐级加密绘制点云时,计算四叉树每一层的节点包围矩形 AABB在绘图空间的投影大小,如果投影大小小于一个像素,

就停止继续向下读入四叉树节点的点云数据.

6 演示系统与实验结果

在上述思想的基础上,本文开发了一个基于

WebGL的机载激光雷达点云数据网络可视化原型演示系统(如图1所示).系统包括点云数据预处理程序和基于WebGL的点云数据可视化Web应用两个组成部分.数据预处理程序读取常见的 Las格式的LiDAR数据,将四叉树构建完成后每个节点的点保存到单独的数据分块文件中,然后上传到网络服

务器或云端存储.用户使用支持WebGL技术的浏览器通过访问基于 WebGL开发的页面获取点云数据

26

Page 4: WebGL的机载激光雷达点云数据可视化xuebao.hnust.edu.cn/DownLoad/20132241522216359927.pdf · 中图分类号:P237.3 文献 标识码 ... 就需要进行点云的三维可视化

的交互式可视化体验.点云数据可视化Web应用由四个部分组成.Pointload.js负责进行基于视点的四叉树裁切并将点云数据块队列发送给数据解析器,

由其解析成 XBPointStream所需的数据格式.XBPointStream中间件负责将传入的点云数据绘制到Web页面,并在用户通过Web页面发出交互操作请求时 进 行 响 应 将 新 的 视 锥 体 参 数 发 送 给

pointload.js.

图1 基于WebGL的机载激光雷达点云数据网络可视化技术流程图

Fig.1WebGLbasedLiDARpointcloudvisualizationworkflow

实验硬件环境为:Inteli524102.3GHzCPU,4GBDDR3内存,NVIDIAGT550m显卡;软件环境为Firefox15.0.1浏览器.对一个包含8811489个点的机载激光雷达点云进行绘制时(如图2所示),当使用全部载入点云数据策略时,绘制速度仅为10帧左右;而采取本文提出的方法时,绘制速度可以达

到53帧/s,完全能够满足交互式可视化的需要.在实际对点云进行交互式操作(平移,缩放,旋转)时

也没有出现任何延迟和卡顿现象.

7 结论

本文通过以平均分布四叉树进行数据组织,视

点相关的快速视锥体剪裁点云渐进绘制方法,实现

了基于WebGL的机载激光雷达点云数据可视化.传统的LiDAR点云数据发布机制,需要用户根据航测工程名称,数据空间覆盖范围等元数据信息在网络

数据集中查找下载所需的点云原始数据,然后在本

地使用专业的 LiDAR数据处理软件进行可视化及

图2 演示系统绘制效果Fig.2Visualizatoneffectofdemostrationsystem

后续数据处理和分析.而本文提出的基于WebGL的机载激光雷达点云数据可视化技术使得用户无须使

用昂贵的专业软件仅使用网络浏览器就可以在线实

时的浏览LiDAR点云数据,为将来开发机载激光雷达点云数据网络发布处理平台奠定了一定的基础.下一步我们将把三维量测,点编辑(选取,删除,更

改等)功能集成到基于 WebGL的网络可视化窗口中,并以此为基础开展机载激光雷达点云数据处理

云计算研究.

参考文献:

[1]刘经南,张小红.激光扫描测高技术的发展与现状[J].武汉大

学学报(信息科学版),2003,28(2):132-137.

LiuJN,ZhangXH.Progressofairbornelaserscanningaltimetry

[J].GeomaticsandInformationScienceofWuhanUniversity,

2003,28(2):132-137.

[2]ShanJ,TothCK.Topographiclaserrangingandscanning:

principlesandprocessing[M].Florence:CRCPressInc-Taylor

&FrancisLtd,2008.

[3]KhronosGroup.WebGLspecification[EB/OL].(2011-2-10)

[2012-8-31].https://www.khronos.org/registry/webgl/

specs/1.0/.

[4]GoogleInc.MapsGL[EB/OL].(2011-10)[2012-8-31].

http://support.google.com/maps/bin/answer.py?hl=zh-

Hans&answer=1630790.

[5]AndreasU.Sharing3Durbandesignwithstakeholdersandthe

36

Page 5: WebGL的机载激光雷达点云数据可视化xuebao.hnust.edu.cn/DownLoad/20132241522216359927.pdf · 中图分类号:P237.3 文献 标识码 ... 就需要进行点云的三维可视化

publicusingWebGL[EB/OL].(2012-7-25)[2012-8-31].

http://labs.esri.com/presentations/sharing_urban_design_

webgl.pdf.

[6]KalogirosP.WebGLplugins-streamingpointclouddatatothe

browser[EB/OL].(2012-5-30)[2012-8-31].http://

www.pointclouds.org/blog/gsoc12/pkalogiros/index.php.

[7]PointstreamInc.Pointstream[EB/OL].(2012-6-30)[2012-8

-31].http://www.arius3d.com/pointstream/.

[8]LoeschB,ChristenM,NebikerS.OpenWebGlobe!

Anopen

sourceSDKforcreatinglarge-scalevirtualglobesonaWebGL

basis[C]//InternationalArchivesofthePhotogrammetry,Remote

SensingandSpatialInformationSciences,2012.

[9]AuerMG.WebGLinGIScience[CP/OL].(2012-1-26)[2012

-8-31].http://webgl.uni-hd.de/.

[10]SalgaA.XB_PointStream[EB/OL].(2011-11-21)[2012-8

-31].http://zenit.senecac.on.ca/wiki/index.php/XB_

PointStream.

[11]KovacB,alikB.VisualizationofLIDARdatasetsusingpoint-

basedrenderingtechnique[J].Computers&Geosciences,2010,

36(11):1443-1450.

[12]KreylosO,BawdenGW,KelloggLH.Immersivevisualization

andanalysisofLiDAR data[C]//Proceedingsofthe4th

InternationalSymposium onAdvancesin VisualComputing.

Springer,2008.

[13]WimmerM,ScheiblauerC.Instantpoints[C]//Proceedings

Symposium on Point-Based Graphics2006. Eurographics

Association,2006.

[14]BillenMI,KreylosO,HamannB,etal,Ageoscienceperspective

onimmersive3Dgriddeddatavisualization[J].Computers&

Geosciences,2008,34(9):1056-1072.

[15]黄先锋,陶闯,江万寿,等.机载激光雷达点云数据的实时渲

染[J].武汉大学学报(信息科学版),2005,30(11):975

-978.

HuangXF,TaoC,JiangW S,etal.Real-timerenderlarge

amountofLIDAR pointcloudsData[J]. Geomaticsand

InformationScienceofWuhanUniversity,2005,30(11):975

-978.

WebGLbasedLiDARpointcloudsvisualization

ZENGXun(SchoolofRemoteSensingInformationEngineering,WuhanUniversity,Wuhan430079,China)

Abstract:AmethodwasproposedtointeractivelyvisualizelargeamountofLiDARpointcloudsinawebbrowser,basedonWebGL.Inordertovisualizethemasspointclouds,aquardtreewasbuiltwithpointcloudsevenlydistributedtonodesofeverylayerfromtoptodown,andaview-dependentfastviewingfrustumcullingforprogressiverenderingalsowereproposed.Ademonstrationsystemwasimplementtoprovethemethodproposed.Theexperimentprovethedemonstrationsystemprovideeffectiveinteractivevisualizationuserexperience.

Keywords:pointcloud;interactivevisualization;WebGL;LiDAR

46


Recommended