孙新佳，田宏哲，罗凯

(北京华能新锐控制技术有限公司，北京 102209)

0 引言

随着现代技术的发展，人们对交互式应用的要求也提升到一个新的层次。传统的工业组态应用软件大多提供二维的图形画面，通过添加位置移动、颜色变化等动画来传达设备的运行信息。但是这种图形只是单方面给用户呈现了系统设备的侧视图或者俯视图，并没有给用户反映整体的效果。随着技术的不断更新，有些软件可以展现三维模型，但是需要在客户端上安装插件才能实现，其中包括UNITY3D、TURNTOOL和QUEST3D等[1]。这样就带来了很大的局限性，其中就涉及到插件与系统环境、浏览器等的兼容性问题，影响系统的稳定性。

随着智能手机的大力发展，极大地推动了移动端和电脑端Web开发的兴起，越来越多的应用软件采用B/S架构，这样移动端和电脑端无需额外安装客户端软件，只要通过系统自带的浏览器就能够直接访问部署在服务器上的应用。Web3D技术也越来越多地引起大家的关注，其中WebGL(web graphics library)是一种3D绘图协议[2]，这种绘图技术标准允许把JavaScript与OpenGL结合起来[3-4]。WebGL可以为HTML5 Canvas提供硬件3D加速渲染。WebGL标准是免费开放的，相对于私有的Adobe Flash Player、微软Silverlight，WebGL具有极大的优势：通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件的支持；利用底层的图形硬件加速功能进行图形渲染，实现统一的、标准的、跨平台的OpenGL接口[5]。目前已有很多不错的WebGL开源框架，例如GLCE、SceneJS、CubicVR、THREE.js等[6]，其中THREE.js最受欢迎，它用简单直观的语法封装了WebGL常用的三维对象，代码中使用了很多调用图形引擎的高级技巧，极大地提高了性能[7-8]。由于其完全采用JavaScript语言，所以很容易与其他浏览器组件进行交互，带来很好的体验效果。现在很多行业应用了WebGL技术，如网页3D动画[9]、交互式三维地球模型[10]、人脸模型建立[11]等。python是一种简单的、解释型的、交互式的、可移植的、面向对象的超高级语言，具有非常清晰的语法特点并适用于多种操作系统，在国际上非常流行，得到越来越多的应用。在图像处理方面，python扩展了很多高级的编程工具包，为图像数据处理提供了强大的数值计算支持。

本文主要解决的问题是将俯视的煤场灰度图做空间拉伸，渲染成3D图形。主要以THREE.js框架为基础，构建一套煤场3D可视化系统，实现移动端或电脑端发送请求到三维图像渲染显示。具体实现前端请求发送，后端通过python程序处理二维图像并将图像信息存储于JSON文件，前端利用ajax[12]读取图像JSON数据构建点云数据后通过THREE.js进行3D渲染呈现煤场三维模型。

1 python处理图像

由于JavaScript不能直接对图像进行处理操作，而python是在图像处理方面有很强的实用性脚本语言，同时python语言有可移植性可以在绝大多数的平台上直接运行[13]。

本文的原始数据是一个安装在斗轮机上激光扫描仪生成的包含煤场空间信息的二维图片，图像中的明亮程度表示煤场的高度分布情况。在图像数据处理中，一般情况下采用矩阵来表示图像的数据信息，矩阵中的每一个元素代表图像对应像素点的RGB值。由于JavaScript不能直接对图像进行像素级的处理操作，所以在这里通过python脚本程序将所要访问的图像进行一定程度上的处理，并将图像的信息写入到JSON文件中。JSON是存储和交换文本信息的语法，类似于XML，但是比XML更小、更快、更容易解析，尤其对于图像这种几十万个数据而言，这种轻量级的文本传输格式不失为一种最佳的选择。

读取原始图像数据后转化为灰度图，灰度图中的数据代表这一点的明亮程度，在本文中的物理意义是煤场在这一点上的高度信息。图中包含很多的噪声，在三维重建中这种噪声会被放大，影响模型呈现效果，所以图像数据读取后在程序中再进行中值滤波处理。中值滤波是一种非线性平滑技术，将每一个像素点的灰度值设置为该点邻域窗口内的所有像素点灰度值的中值，这样在很大程度上消除图像中的冲击噪声[14]。

g(x，y)=med(f(x-k，y-l)，(k，l∈W))

(1)

式中：f(x，y)，g(x，y)分别为原始图像和处理后的图像的像素点；W为二维模板，通常采用3×3或5×5区域，也可以是不同形状。

如图1所示，图1(a)为原始图像(原始数据)，图1(b)为做滤波处理后的图像数据，通过对比可以发现做了平滑滤波之后，原始数据中不合理的噪声数据被清除，处理后的图像更加接近于现实情形。

图1 原始图像和平滑处理后的图像

对于以上图像，本文采用Tenengrad梯度函数对处理前后的图像进行光滑度分析。Tenengrad梯度函数采用Sobel算子分别提取水平和垂直方向的梯度值，基于Tenengrad梯度函数的图像光滑度定义如下：

D(f)=∑y∑x|G(x，y)|

(2)

G(x，y)形式如下：

(3)

Gx和Gy分别是像素点(x，y)处Sobel水平和垂直方向边缘检测算子的卷积，本文采用的Sobel算子模板如下：

x水平方向Sobel算子：

y垂直方向Sobel算子：

故原图x、y方向的卷积分别为：

Gx=Sx*A，Gy=Sy*A

(4)

式中：A表示原始灰度图像。通过基于Tenengrad梯度函数的图像光滑度公式可得图2和表1。

图2 滤波后图像的Tenengrad梯度图

图3 原图的Tenengrad梯度图

表1 光滑度对比表

通过图2、图3中图像梯度图的幅值，以及表1中的数值，可知经过滤波处理后的图片去除了大部分的噪声干扰，图像更加光滑，更符合现场情况。

经过滤波降噪处理后，通过python脚本按照表2格式将图像信息写入到JSON文件中。

表2 data.json文件数据结构表

表1中，height表示图像尺寸的长度，width表示图像尺寸的宽度；data存储图像矩阵的数据，从矩阵的第一行开始依次存储整个矩阵的数据，矩阵数据的坐标信息可以通过矩阵的height和width去计算，而不再单独存储数据在矩阵的坐标信息，选择这样的存储方式可以减少很大的数据传输量，使系统响应更快。

2 基于THREE.js构建几何体算法

众所周知，点动成线，线动成面，面动成体，一个面片都可以通过3个点确定的三角形或者4个点确定的四边形来构建，而由有限个这样的面片可以近似逼近任何一个面。在三维建模领域，建模的时候使用四边形是大家经常采用的方式，因为四边形比三角形更容易增强和平滑。但是对于渲染和游戏引擎来讲，使用三角形更加容易，因为任何一个形状都可以渲染成多个三角形。THREE.js提供函数THREE.Vector3()来确定空间坐标中的一点，将三维模型所有的点全部声明并实例化存储于数组vertices，函数THREE.Face3()用来使用vertices中的三个点来构建一个三角形，将vertices中所有的点按照所构建的模型需要进行组合，这样就完成了空间模型所有三角形的构建工作[15]。

二维数字图像可以通过二维数据矩阵来表示，如果图像为彩色图像，任何颜色都有红、绿、蓝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=(R+G+B)/3。为避免低速的浮点运算，在大多数的情况下采用整数算法，所以本文通过后端程序通过python脚本将彩色图像转化为灰度图，其图像数据矩阵如图4所示。

图4 图像数据矩阵示意图

图4表示一个图像数据矩阵，a、b、c、d点数据分别包含对应图像像素点在数据矩阵的坐标及亮度值，这3个数据即为对应像素点在空间的坐标，每个像素点在矩阵的位置坐标即为三维空间XOZ平面上的坐标，像素点的亮度值即为三维空间Y轴的坐标，这样通过获取图像数据矩阵可以确定图像中每一个像素点在控制XYZ轴的坐标。(a，b，c)、(a，d，c)或(a，b，d)、(b，d，c)分别表示2个三角形，这样遍历整个图像数据矩阵，那么整个图像就可以通过这样的三角形组合显示。算法步骤如下：

①获取图像高度和宽度，即height，width。

②构建空间数据点集vertices。

//遍历整个数据矩阵

for (i=0；i

for(j=0；j

{

x=i；

z=j；

y=arr[i，j]；

//构建空间数据点集

vertices.push(Vector3(x，y，z))

}

③构建空间三角面集faces。

//遍历整个数据矩阵

for(i=0；i

for(j=0；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(′data.json′，function(data){

height=data[″size″][0]；

width=data[″size″][1]；

for(var i=0；i<= height；i++){

arr[i]=new Array(i)；

for(var j=0；j<= width；j++){

arr[i][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 <= stacks；i ++) {

v = i；

for (j = 0；j <= slices；j ++) {

u = j；

p = func(u，v)；

verts.push(p)；

}

}

var a，b，c，d；

for (i = 0；i < stacks；i ++) {

for (j = 0；j < slices；j ++) {

a = i * sliceCount + j；

b = i * sliceCount + j + 1；

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

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

faces.push(new THREE.Face3(a，b，d))；

faces.push(new THREE.Face3(b，c，d))；

}

}

this.computeFaceNormals()；

this.computeVertexNormals()；

}；

function(u，v){

//构建空间点函数

x=u；

z=v；

y=arr[x][z]；

return new THREE.Vector3(x，y，z)；

}

通过上述算法，利用THREE.js框架渲染后的煤场如图5所示。

图5 煤场空间三维图像

图6是利用iconics Genesis64软件渲染的三维效果，将位图格式(.bmp)的图像导入到软件中，再设定其部分参数，软件获取图像像素点值大小自动做拉伸处理，最终渲染成三维效果。对比2幅图像，可以看出，iconics软件只是对图像做了空间的拉伸，并不具备消除图像中冲击噪声的功能，同时只支持电脑端访问；本文设计的系统通过后端python程序对图像做平滑处理后，能够将大部分图像噪声滤除掉，这样渲染出来的三维效果更加平滑，贴近现实，效果更好，同时支持移动端和电脑端无插件浏览。

图6 GENESIS64渲染煤场三维图像

4 结束语

本文设计了一套基于B/S架构利用二维图像重建三维场景的系统，主要应用于煤场三维重建领域。用户通过移动端和电脑端发送请求，系统后台程序自动处理所请求的煤场图像信息并转化为JSON数据推送到前端，前端不借助任何第三方插件自动渲染出煤场的三维模型。通过与其他软件对比，本文所设计的三维重建系统在项目中具有更好的渲染效果，能够清除图像中绝大部分的冲击噪声，并且具有很强的扩展性，可以与其他系统嵌套使用，对于煤场信息管理具有较强的便利性和实用性。