基于webgl技术的三维煤场重建系统

基于C/S架构或借助第三方插件实现，对于系统的稳定性和实用性带来较大的影响。针对这一不足之处，设计了

一套B/S架构二维图像重建三维场景的系统应用于煤场三维可视化，并实现移动端、电脑端无插件浏览。后端程

序利用python脚本对图像进行处理操作，前端通过JavaScript获取数据和渲染模型。实验表明，本文设计的三维

煤场系统具有较好的实用性。关键词：可视化；虚拟；三维重建；滤波；图像处理doi：10. 3969/j. issn. 1000-3177. 2020. 01. 010中图分类号:TP391.41

文献标志码：A 文章编号：1000-3177(2020)167-0082-053D Reconstruction System for Coal Yard Based on WebGLSUN Xinjia.TIAN Hongzhe.LUO Kai{Beijing Huaneng Xinrui Control Technology Co. ,Ltd. tBeijing 102209 f China')Abstract: It is always an important part of research contents for three dimensional reconstruction based on two-dimensional

picture. But most research is based on C/S architecture or third-party plug-in component which has a bad effect on stability and

practicability of system. To solve this problem,this paper designs a three dimensional visual system based on B/S architecture

for two dimensional coal-yard picture・ Mobil and computer terminal can browse three dimensional coal yard without any third- party plug-in components. Python program reads pictures and converts it to JSON file after processing. JavaScript gets data

from JSON file and renders models. Experimental results show that the system designed by this paper can get better results.Key words: visualization ； virtual ； three dimensional reconstruction ； filter ； image processing0引言随着现代技术的发展，人们对交互式应用的要

求也提升到一个新的层次。传统的工业组态应用软

随着智能手机的大力发展，极大地推动了移动

端和电脑端Web开发的兴起,越来越多的应用软件

采用B/S架构,这样移动端和电脑端无需额外安装

客户端软件，只要通过系统自带的浏览器就能够直

件大多提供二维的图形画面，通过添加位置移动、颜 色变化等动画来传达设备的运行信息。但是这种图

接访问部署在服务器上的应用。Web3D技术也越

来越多地引起大家的关注，其中WebGL (web

形只是单方面给用户呈现了系统设备的侧视图或者

俯视图，并没有给用户反映整体的效果。随着技术

graphics library)是一种3D绘图协议⑵，这种绘图

技术标准允许把JavaScript与OpenGL结合起 来。WebGL可以为HTML5 Canvas提供硬件

的不断更新,有些软件可以展现三维模型，但是需要 在客户端上安装插件才能实现，其中包括UNITY3D,

3D加速渲染。WebGL标准是免费开放的，相对于

私有的 Adobe Flash Player、微软 Silverlight,

TURNTOOL和QUEST3D等巾。这样就带来了 很大的局限性，其中就涉及到插件与系统环境、浏览

器等的兼容性问题,影响系统的稳定性。WebGL具有极大的优势：通过HTML脚本本身实

现Web交互式三维动画的制作，无需任何浏览器插

收稿日期：2018-11-02 修灯日期：2018-12-30作者简介:孙新佳(1990—),男，硕士研究生，主要研究方向为计算机视觉、智能化控制、数据处理。E-mail: sxinj ia@ 163. com82引用格式:孙新佳，田宏哲，罗凯.基于WebGL技术的三维煤场重建系统［J］.遥感信息，2020,35(1):82-86件的支持;利用底层的图形硬件加速功能进行图形 渲染，实现统一的、标准的、跨平台的OpenGL接

口灼。目前已有很多不错的WebGL开源框架，例 如 GLCE, SceneJS、CubicVR, THREE, js 等⑷，其

中THREE, js最受欢迎，它用简单直观的语法封装 T WebGL常用的三维对象，代码中使用了很多调

用图形引擎的高级技巧，极大地提高了性能⑺旳。由

于其完全采用JavaScript语言，所以很容易与其他

浏览器组件进行交互，带来很好的体验效果。现在

很多行业应用了 WebGL技术，如网页3D动画⑷、

交互式三维地球模型口°〕、人脸模型建立E等。

python是一种简单的、解释型的、交互式的、可移植 的、面向对象的超高级语言，具有非常清晰的语法特

点并适用于多种操作系统，在国际上非常流行，得到 越来越多的应用。在图像处理方面，python扩展了

很多高级的编程工具包，为图像数据处理提供了强

大的数值计算支持。本文主要解决的问题是将俯视的煤场灰度图做

空间拉伸,渲染成3D图形。主要以THREE, js框

架为基础,构建一套煤场3D可视化系统，实现移动

端或电脑端发送请求到三维图像渲染显示。具体实

现前端请求发送，后端通过python程序处理二维图 像并将图像信息存储于JSON文件，前端利用

ajaxci2］读取图像JSON数据构建点云数据后通过 THREE, js进行3D渲染呈现煤场三维模型。1 python处理图像由于JavaScript不能直接对图像进行处理操

作，而python是在图像处理方面有很强的实用性脚

本语言，同时python语言有可移植性可以在绝大多 数的平台上直接运行本文的原始数据是一个安装在斗轮机上激光扫 描仪生成的包含煤场空间信息的二维图片，图像中 的明亮程度表示煤场的高度分布情况。在图像数据

处理中，一般情况下采用矩阵来表示图像的数据信

息，矩阵中的每一个元素代表图像对应像素点的

RGB值。由于JavaScript不能直接对图像进行像素

级的处理操作，所以在这里通过python脚本程序将 所要访问的图像进行一定程度上的处理，并将图像的

信息写入到JSON文件中。JSON是存储和交换文本

信息的语法,类似于XML,但是比XML更小、更快、 更容易解析，尤其对于图像这种几十万个数据而言,

这种轻量级的文本传输格式不失为一种最佳的选择。读取原始图像数据后转化为灰度图，灰度图中 的数据代表这一点的明亮程度，在本文中的物理意

义是煤场在这一点上的高度信息。图中包含很多的

噪声，在三维重建中这种噪声会被放大，影响模型呈

现效果，所以图像数据读取后在程序中再进行中值

滤波处理。中值滤波是一种非线性平滑技术，将每

一个像素点的灰度值设置为该点邻域窗口内的所有 像素点灰度值的中值，这样在很大程度上消除图像

中的冲击噪声g(z,y) =med(/(z—2) ,O,2GW)) (1) 式中：/Q,y),gQ,y)分别为原始图像和处理后的

图像的像素点；W为二维模板，通常采用3X3或

5X5区域,也可以是不同形状。如图1所示，图1(a)为原始图像(原始数据)， 图1(b)为做滤波处理后的图像数据，通过对比可以

发现做了平滑滤波之后，原始数据中不合理的噪声 数据被清除，处理后的图像更加接近于现实情形。(a)原始图像 (b)处理后图像图1原始图像和平滑处理后的图像对于以上图像，本文采用Tenengrad梯度函数

对处理前后的图像进行光滑度分析。Tenengrad梯

度函数采用Sobel算子分别提取水平和垂直方向的

梯度值，基于Tenengrad梯度函数的图像光滑度定 义如下：D(Q=

(2)Ga,y)形式如下：G(j：,y) =

(x,y)+ Gy (x,y)

(3)Gz和Gy分别是像素点(z,y)处Sobel水平和

垂直方向边缘检测算子的卷积，本文采用的Sobel

算子模板如下：z水平方向Sobel算子：-1 0 1~Sx = 一 2

0

2-1 0 1_丿垂直方向Sobel算子：83遥感信息2020年］期-1 2 1 -

Sy = 0 0 0-1 -2 -1.故原图工、了方向的卷积分别为：Gx = Sx * A,Gy = S” * A (4)式中:A表示原始灰度图像。通过基于Tenengrad

梯度函数的图像光滑度公式可得图2和表1。0图3原图的Tenengrad梯度图

表1光滑度对比表类别原图滤波后基于Tenengrad梯度的光滑度2 8 081. 282 132 360. 00通过图2、图3中图像梯度图的幅值，以及表1

中的数值，可知经过滤波处理后的图片去除了大部 分的噪声干扰，图像更加光滑，更符合现场情况。经过滤波降噪处理后，通过python脚本按照 表2格式将图像信息写入到JSON文件中。表2 data.json文件数据结构表数据名称注释width图像宽度height图像高度data图像像素点数据，由上到下，由左到右表1中,height表示图像尺寸的长度,width表示

图像尺寸的宽度;data存储图像矩阵的数据，从矩阵的

84第一行开始依次存储整个矩阵的数据,矩阵数据的坐

标信息可以通过矩阵的height和width去计算，而不再

单独存储数据在矩阵的坐标信息，选择这样的存储方

式可以减少很大的数据传输量，使系统响应更快。2基于THREE, js构建几何体算法众所周知，点动成线，线动成面，面动成体，一个

面片都可以通过3个点确定的三角形或者4个点确

定的四边形来构建，而由有限个这样的面片可以近 似逼近任何一个面。在三维建模领域，建模的时候

使用四边形是大家经常采用的方式，因为四边形比

三角形更容易增强和平滑。但是对于渲染和游戏引 擎来讲，使用三角形更加容易，因为任何一个形状都

可以渲染成多个三角形。THREE, js提供函数 THREE. Vector3()来确定空间坐标中的一点，将三

维模型所有的点全部声明并实例化存储于数组

vertices,函数 THREE. Face3 ()用来使用 vertices

中的三个点来构建一个三角形，将vertices中所有

的点按照所构建的模型需要进行组合，这样就完成

了空间模型所有三角形的构建工作〔如。二维数字图像可以通过二维数据矩阵来表示，

如果图像为彩色图像，任何颜色都有红、绿、蓝3种

颜色组成，那么矩阵的每个元素的颜色值为RGB

(R,G,B)。所谓灰度图像，即每个矩阵元素为RGB

(R,G,B),且R = G = B = Gray,其值的大小表示图

像的亮度信息。由RGB色转灰度色有3种算法:①浮

点算法:Gray=R * 0. 3+G* 0. 59+B * 0.11。②整数

算法:Gray=(R * 299+G* 587+B * 114+500)/1 000。

③平均法:Gray=CR + G+B)/3。为避免低速的浮

点运算，在大多数的情况下采用整数算法，所以本文 通过后端程序通过python脚本将彩色图像转化为

灰度图，其图像数据矩阵如图4所示。图4表示一个图像数据矩阵,a、b、c、d点数据

分别包含对应图像像素点在数据矩阵的坐标及亮度

值，这3个数据即为对应像素点在空间的坐标，每个

引用格式:孙新佳，田宏哲，罗凯.基于WebGL技术的三维煤场重建系统[J].遥感信息,2020,35(1):82-86像素点在矩阵的位置坐标即为三维空间XOZ平面

上的坐标，像素点的亮度值即为三维空间Y轴的坐 标，这样通过获取图像数据矩阵可以确定图像中每

一个像素点在控制xyz轴的坐标。或、(b,d,c)分别表示2个三角形，这样 遍历整个图像数据矩阵，那么整个图像就可以通过

这样的三角形组合显示。算法步骤如下：① 获取图像高度和宽度，即height,widtho② 构建空间数据点集verticeso〃遍历整个数据矩阵for (i = 0；ifor(j = 0 ； j{x=i；z=j;y=arr[i,j]；//构建空间数据点集

vertices. push(Vector3(x,y,z))}③ 构建空间三角面集faceso〃遍历整个数据矩阵for(i =0；iVheight-l；i+ + ){for(j =0；jVwidth-l ；j + + ) {a = i * width+j ；b = i * width+j +1 ；

c= (i+1) * width+j+ 1 ；

d= (i+1) * width+j ；

faces. push(Face3(a,b,c));faces. push(Face3(a,d?c))；}}3三维重建首先通过python脚本读取原始二维图像，并做 灰度化处理，再对灰度图像做中值滤波处理,清除图

像中的冲击噪声，处理之后将灰度图的宽度、高度及 亮度值信息按照表2格式写入到data, json文件中。

对于JSON文件.JavaScript可以对其直接进

行解读，将JSON保存的图像数据信息全部读取到

变量中存储，代码如下：var arr=new Array()；var width ；var height；$ . ajaxSettings. async = false；$ . get (Mata. jsonz ‘function (data) {height = data^size^] [0];width =data[\"size\"] 口]；for (var i = 0 ；iV= height；i-p + ) {arr[订= new Array (i)；for (var j = O；jV= width；j + + ) {

arrEi] [j] = data data\"] [j + i *

(width+1)]]；}}} /json')；这里，二维数组arr存储的即为图像矩阵的数

据。所要注意的是ajax的请求为同步，即$.

ajaxSettings. async = false,否则会影响模型的加载。读取数据后，接下是构建空间散点和三角形，算 法如下：function (func, slices, stacks) {

THREE. Geometry, call (this)；

this, type = ’ParametricGeometry'； this, parameters = {func： func,slices： slices, stacks： stacks}；var verts = this. vertices ；var faces = this・ faces；var i,j,p；var u,v；var stackCount = stacks + 1 ；var sliceCount = slices + 1 ；for (i = 0；i V= stacks+ + ) {v = i；for (j = 0；j V= slices；] + + ) {u = j;p = func(u, v)； verts, push(p)；}}var a,b,c,d；for (i = 0；i V stacks；i + + ) {for (j = 0；j V slices；] + + ) {

a = i * s丘ceCount + j ；

b = i * sliceCount + j + 1 ；

c = (i + 1) * sliceCount + j + 1； d = (i + 1) * sliceCount + j ；

faces. push (new THREE. Face3(a,85遥感信息b, d))；2020年]期做拉伸处理，最终渲染成三维效果。对比2幅图像，

faces, push (new THREE. Face3(b,可以看出,iconics软件只是对图像做了空间的拉

c, d))；伸，并不具备消除图像中冲击噪声的功能，同时只支

}}持电脑端访问;本文设计的系统通过后端python程

序对图像做平滑处理后,能够将大部分图像噪声滤除

掉,这样渲染出来的三维效果更加平滑，贴近现实，效 果更好，同时支持移动端和电脑端无插件浏览。this. computeFaceNormalsO ；this, computeVertexNormals ()；};function(u, v) {〃构建空间点函数x=u；Z= V；y=arr[x][z]；return new THREE. Vector3(x,y,z)；图6 GENESIS這染煤场三维图像}通过上述算法,利用THREE, js框架渲染后的4结束语本文设计了一套基于B/S架构利用二维图像 重建三维场景的系统，主要应用于煤场三维重建领

煤场如图5所示。域。用户通过移动端和电脑端发送请求，系统后台 程序自动处理所请求的煤场图像信息并转化为

JSON数据推送到前端，前端不借助任何第三方插

件自动渲染出煤场的三维模型。通过与其他软件对

图5煤场空间三维图像比，本文所设计的三维重建系统在项目中具有更好

图6是利用iconics Genesis软件渲染的三维

效果，将位图格式(.bmp)的图像导入到软件中，再

的渲染效果，能够清除图像中绝大部分的冲击噪声， 并且具有很强的扩展性,可以与其他系统嵌套使用， 对于煤场信息管理具有较强的便利性和实用性。设定其部分参数，软件获取图像像素点值大小自动参考文献

CH王敏，张昆.基于THREE. JS和GoogleMapAPI的网页交互可视化技术：以等角航线为例[J].测绘与空间地理信息,

2015(7):158-161.[2] 刘训房.基于BIM和WEB的隧道动态施工监测信息系统研究[D].大连:大连海事大学,2017.[3] 任宏康，祝若鑫,李风光，等.基于Three, js的真实三维地形可视化设计与实现口].测绘与空间地理信息,2015(10),

51-54.[4] ZENG X. WebGL based LiDAR point clouds visualization]〕]. Journal of Hunan University of Science & Technology,

2012(4):60-.[5] 刘爱华，韩勇，张小垒，等.基于WebGL技术的网络三维可视化研究与实现[J].地理空间信息,2012(5) ,79-81.[6] 汪升华，唐国纯.基于HTML5的三维思维导图软件开发技术研究[J].软件工程,2017,20(10)=4-7.[7] 顿儒源.基于WebGL的织物三维展示系统[D].杭州：浙江大学,2016.[8] 方强.基于WebGL的3D图形引擎研究与实现[D].合肥:安徽大学,2013.[9] 荣艳冬.基于WebGL的3D技术在网页中的运用[J].信息安全与技术,2015,6(8):90-92.[10] 张玲.基于WebGL技术和Oak3D引擎的交互式三维地球模型研究[J].软件导刊,2014(2):153-155.[11] 陈滔滔，江晓宇,温佩贤，等.基于Web3D的人脸模型定制系统[J].系统仿真学报,2014,26(2):382-38&[12] 杨俊峰，黎建辉,杨风雷.深层网站Ajax页面数据采集研究综述[J].计算机应用研究,2013,30(6)=1606-1610.[13] 张若愚.Python科学计算[M].北京:清华大学出版社,2016.[14] SONKA M,HLAVAC V,BOYLE R. Image processing,analysis,and machine vision]M]. Chapman & Hall Computing, 1993.[15] JOSDIRKSEN. Three, js 开发指南:the JavaScript 3D library for WebGL[M],北京：机械工业出版社，2015.86