用WebGL实现桥梁管理系统中的3D功能

摘 要：提出了在桥梁管理系统软件中实现3D功能的重要性，介绍了一种在B-S架构的桥管系统软件中实现3D功能的技术：WebGL；展示并分析了用WebGL实现3D功能的网页的代码，并演示了在某桥管系统中所实现的3D功能。

关键词：WebGL ； 桥梁管理系统 ；3D；桥梁评定 ；B-S架构

中图分类号：TL372文献标识码： A

1 概述

桥梁受到结构耐久性、环境条件、使用条件等因素的影响，技术状况水平会随时间的增长不断下降，需要维修和加固的桥梁会越来越多。然而由于维修资金有限，管理部门需要先对所有桥梁的健康状况进行评价，根据评价结果对桥梁的维修顺序进行排序，这就要求管理部门能够准确的掌握桥梁的健康状况。目前很多桥梁管理部门投资开发桥梁管理系统软件，以期通过信息化的手段，更加全面及时地了解桥梁的技术状况，从而合理有效地安排桥梁维修计划。一个完整的桥管系统软件，除了记录桥梁的静态数据，还应记录桥梁的外业调查数据。通过桥梁外业调查数据的录入，桥管系统软件记录下桥梁构件的各种病害（破损、裂缝等），并按照相应的规范（《市政桥梁养护规范》或《公路桥梁技术状况评定标准》等）对桥梁技术状况进行评估。目前，桥管系统软件中外业数据的记录格式多种多样，但大部分都是基于文字描述和二维示意简图。对于桥梁这种复杂的结构物，病害的文字描述或二维示意简图往往很难做到准确和直观，如果桥管系统软件能够处理和展示桥梁的三维模型，并能将桥梁病害标注到三维模型上，那么管理者结合三维模型中桥梁构件的形状、尺寸、钢筋位置、病害位置等，就能够更加快速准确地掌握桥梁的健康状况。因此，在桥梁管理系统软件中实现3D功能是十分有用的。

计算机软件中3D功能的实现,实际上是在显示器的二维平面上画三维物体的过程，也叫做渲染，其中涉及到很多计算机三维图形学原理。经过前人的积累，已经有多套基于图形学原理的应用程序编程接口（API）被开发出来，可用于计算机从三维物体上产生二维图形的处理过程中，如顶点处理、图元组装、光栅化等。目前比较流行的3D 编程接口有OpenGL、Direct3D、Java3D等。

OpenGL是最早也是应用最广泛的3D编程接口，它是Open Graphics Library的缩写。OpenGL定义了跨编程语言、跨平台的应用程序编程接口（API）的规范，它可用于生成二维或三维图像，由近三百五十个不同的函数调用组成。OpenGL是个与硬件无关的软件接口，可以在不同的平台如Windows 95、Windows NT、Unix、Linux、MacOS、OS/2之间进行移植。因此，基于OpenGL的软件具有很好的移植性，可以获得非常广泛的应用。

另一种3D编程接口是仅用于Microsoft Windows上的Direct3D，它是DirectX的一部份，由于windows系统的流行，目前也广为各家显卡所支持。与OpenGL同为电脑绘图软件和电脑游戏最常使用的绘图编程接口之一。

Java3D是应用于Java平台的3D编程接口，它通过运行于OpenGL或Direct3D之上，实现跨平台的移植性。其它的编程接口还有VRML、X3D等。

以上介绍的是目前计算机软件实现3D功能最流行、使用最广的技术，但都主要用于实现桌面程序应用。随着互联网软硬件技术的迅猛发展，目前很多应用程序都采用B-S（浏览器-服务器）架构，桥管系统软件也不例外。在这种架构的应用程序中，用户的工作界面是通过web浏览器来承载的，客户端无需安装软件，减轻了客户端电脑的负荷，同时也降低了系统维护与升级的成本和工作量。由于使用统一的HTML(超文本标记语言)和JavaScript（脚本语言），这样的应用程序能很方便地做到跨平台使用，无论是在微软windows平台的IE上，或是苹果IOS平台的Safari上，甚至可以是使用安卓系统的手机浏览器上，程序都可以正常运行。B-S架构的应用程序实现了不同人员，从不同地点、不同平台，以不同的接入方式访问、操作和共享数据。

那么在B-S架构下，桥管系统软件如何在浏览器中实现3D功能呢？传统的解决方法是浏览器插件，这就意味着对于每种不同的操作系统和浏览器的组合，都需要开发特定版本的插件，对于手持设备上运行的比较特殊的操作系统或浏览器，开发起来就会更加复杂困难；其次，对于操作系统上的图形应用程序接口的调用，并不是遵循一个公开统一的标准。比如，在Windows平台上，是通过调用DirectX来实现，而在Mac OS X上则是调用AGL。所以，一种无需浏览器插件支持、通过统一的图形应用程序接口调用来实现Web交互式三维图形渲染的技术，就变得很有必要，而这正是WebGL技术的革命意义所在[1]。

2 WebGL介绍

WebGL是一项利用JavaScript API在浏览器中呈现3D电脑图形的技术，有别于过往需加装浏览器插件，通过WebGL的技术，只需要编写网页代码即可实现3D图像的展示[2]。WebGL基于OpenGL ES 2.0（嵌入式系统的三维图形库），OpenGL ES 2.0是桌面版本OpenGL 的一个子集，目前iPhone，iPad，Android手机和平板电脑都使用OpenGL ES来进行3D渲染[3]。Webgl1.0规范于2013年3月确定下来，目前在各大浏览器上都得到了很好的支持，包括：IE、Firefox、Safari、Chrome、Opera等。通过WebGL，开发人员就可以借助系统显卡来在浏览器里流畅地展示3D场景和模型。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。下面就是一段使用WebGL的网页的典型代码：

vargl , canvas , shaderProgram , vertexBuffer;

functionloadShader(type,shaderSource){……}

functionstartup() {

canvas=document.getElementById(“myGLCanvas”);

gl=canvas.getContext(“webgl”);

if(gl){

/////////////设置顶点着色器和片段着色器//////////////

……

//////////////////////////////////设置缓冲/////////////////////////////////

vertexBuffer=gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);

……

gl.clearColor(0.0 , 0.0 , 0.0 , 1.0);

gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);

gl.clear(gl.COLOR_BUFFER_BIT);

……

}

}

var _userid = '';var _siteid =2978;var _istoken = 1;var _model = 'Model02'; WebPageSpeed =297; UrchinTrack();

页面中元素是HTML5中才出现的一个新特性，WebGL正是通过元素来曝露编程接口的：

canvas=document.getElementById(“myGLCanvas”);

gl=canvas.getContext(“webgl”);

第一句获取到这个页面中唯一一个对象:myGLCanvas，第二句通过调用canvas对象的getContext()方法来获取WebGLRenderingContext对象。WebGLRenderingContext是调用所有WebGL API的接口。程序中对所有WebGL函数的调用都是通过这个对象，例如：

gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);（设置视口宽度、高度）

gl.clear(gl.COLOR_BUFFER_BIT);（清除颜色缓冲为指定颜色）

WebGL属于底层API，设计时考虑了性能和兼容性，同时遵循函数数量最少化、数据类型最少化的原则，因此原生的WebGL API，较难掌握，专业性强。所以，现在也出现了很多WebGL框架，如GLGE、SceneJS、ThreeJS等。这些框架对WebGL API进行了封装，构建了更高级，更友好的WebGL开发环境。

3 桥管系统3D功能演示

笔者在日前开发的一个桥管系统项目中，就是基于WebGL来实现系统3D功能的。在这套系统中，使用者通过浏览器，无论是台式机上的IE浏览器（IE11及以上）、Chrome浏览器，或者是iPad上的Safari浏览器，甚至是在Android系统的手机浏览器，都可以在网页中查看、控制桥梁的三维模型（任意旋转、缩放、选择），并可以将病害标注到各个桥梁构件上，同时还可以通过菜单控制每一个桥梁构件的显示方式（是否隐藏，是否显示钢筋），这样就使得桥梁检测人员在进行桥梁病害检查时，能够实时参考桥梁的设计结构，使得病害记录更加方便，病害分析更加正确，同时也会让桥梁管理部门对桥梁病害的理解更加清晰、准确：

图1win7下Chrome浏览器中系统的界面

如果通过手持设备（平板电脑或者手机）登录系统，用户就可以现场对桥梁构件进行拍照记录，并评价打分，这样能更加方便地获得桥梁的实际状况：

图2 iPad4上Safari浏览器中系统的界面

图3安卓系统手机浏览器上系统的界面

在程序中，当用户鼠标移动到桥梁构件上，整个构件会高亮显示，同时右侧出现桥梁构件的名称,如下图：

图4构件高亮选择功能

勾选系统界面右侧的“桥梁结构”树形菜单中的节点时，程序会对模型中相应的构件进行隐藏或显示：

图5桥梁构件显示隐藏功能

鼠标左键单击某个桥梁构件会在页面的左侧窗口出现该构件的技术状况评定界面，用户可在此根据公路规范或者市政规范对构件进行评价：

图6桥梁构件评价功能

用户鼠标右键单击桥梁构件后，构件的混凝土会透明化，并显示出构件内部的钢筋布置，如下图：

图7钢筋显示功能

系统允许检测人员将病害照片的位置标注到三维模型上，并配以相应的文字描述：

图8 缺损病害标注功能

系统还能让检测人员将桥梁构件的裂缝标注到三维模型上，使裂缝的位置、形态、走向一目了然：

图9 裂缝病害标注功能

检测人员可以参考构件的钢筋位置，对裂缝进行判断：

图10同时显示病害及钢筋位置

通过比对裂缝的走向和构件内钢筋的位置，现场检测人员对构件裂缝的认识会更加深刻，对裂缝性质的判断也会更加准确。

以上就是笔者日前开发的桥管系统软件中实现的部分3D功能。要记住，这一切都是在浏览器中完成的，无须安装任何额外程序和插件，并且可以在各种手持终端（掌上电脑或手机）上运行。

4结语

随着计算机技术的迅猛发展，其在桥梁管理信息化方面有着深入而广泛的应用，如何通过这些现代化的技术手段使桥梁管理更加便捷、更加高效，还有很多值得研究的地方。

参考文献：

[1]高博. WebGL描绘Web页面交互式三维动画渲染蓝图. 电脑报，2009年第40期F版

[2]维基百科 《WebGL》

[3](美)Tony Parisi .WebGL入门指南. 人民邮电出版社，2013.

Implementation 3D Function In Bridge Management

CHU Wei-wei，ZUO Ming，ZHOU Lin

(HangZhou Urban Construction Science Research Institute)

Abstract: The author propose the importance of realizing 3D function in bridge management system software, and introduces the technology of WebGL which can realize the 3D function in bridge management system software of Browser-Server architecture, the author also analyses the code of web page using WebGL and demonstrates the 3D function realized in a bridge management system software

Keywords: WebGL；bridge management system；three-dimensional；bridge assessment；Browser-Server architecture