基于WebGL的工程制图网络虚拟模型库的开发

李兴田， 张丽萍

(兰州交通大学土木工程学院，甘肃 兰州 730070)

基于WebGL的工程制图网络虚拟模型库的开发

李兴田， 张丽萍

(兰州交通大学土木工程学院，甘肃 兰州 730070)

以AutoCAD为建模工具，对工程制图中的组合体进行建模，通过分析其STL格式的导出文件，利用WebGL技术实现了模型数据文件的解析读取、着色器程序的编制和鼠标交互处理程序的添加，研究开发了运行于浏览器的工程制图模型库。该模型库模型丰富、交互友好，实现了服务器端一次部署，客户端随处浏览，方便了教师课堂教学，培养了学生的空间想象力，提高了学习效率，为虚拟模型库的研发提供了思路。

工程制图；模型库；WebGL

工程制图是工科专业学生必须掌握的一门专业基础课，对于培养学生的绘图读图、空间想象和工程设计能力至关重要。

由于工程制图的空间性和抽象性，其课程教、学方面都存在一定难度。课堂教学中，为了帮助学生读图，增强学生的空间想象力和形象思维能力，教师往往以板书勾绘轴测图、展示挂图和实体模型、甚至要求学生动手制作组合体模型等方式完成模型展示。板书勾绘虽然直接了当，但仅适合简单模型，复杂模型的绘制费时、费力，占用课堂时间过多，不利于课堂内容的讲授；挂图虽能表达较为丰富的模型信息，但是内容固定、量少不全、携带不方便；实体模型需要一定的存储空间，携带展示不方便，传递信息不足；学生动手制作费时、费力，一般不适合课堂教学。课后学习中，由于缺少课堂辅导教具，学生在组合体投影图的阅读中存在很多困难，严重影响了学习质量和效果。近些年，随着多媒体进入课堂，这些问题得到了一定程度的解决。但总体而言，大多数多媒体课件对模型的展示还差强人意，主要表现在静态、信息单一、无交互、无沉浸感等[1-2]。

为解决上述问题，广大工程制图教师在教学中对模型的展示方式和方法做了很多探索[3-4]，具有代表性的是 3D工程制图虚拟模型库[5-7]。由于技术发展的制约，这类模型库通常基于VRML或X3D技术，其场景、节点脚本的构建和编写繁琐冗长，而且脚本语言及媒体文件不能被浏览器直接解析显示，需要额外的浏览器插件，不仅对开发者的要求较高，而且程序扩展性受到限制，平台兼容性较差。

随着WebGL技术的诞生，上述问题得到了很好的解决。WebGL是免费授权的、跨平台的应用程序接口API，其将OpenGL ES 2.0作为在HTML网页内绘制3D图形的底层函数，并作为低级别文档对象模型的接口加以开放。WebGL使用OpenGL渲染语言GLSL ES，并与其他3D内容的上下层进行捆绑，最后通过Javascript编程接口，可以创建内容动态、交互友好的 Web应用，其技术架构如图 1所示。WebGL技术完美地解决了现有Web页面显示3D图形的问题[8-9]：①通过HTML脚本本身实现Web页面显示3D图形，无需任何浏览器插件支持；②利用统一、标准和跨平台的OpenGL接口和底层图形硬件加速功能实现图形渲染，具有良好的跨平台能力。

图1 WebGL技术架构

本文讨论如何通过WebGL技术，创建具有良好的兼容性、优秀的跨平台能力、交互机制完善、模型显示全面、部署简单、使用方便的工程制图模型库，从而方便教师教学，帮助学生学习，提高学生的空间想象力和读图能力，提高学习效率。

1 工程制图网络虚拟模型库的创建

1.1 总体设计

工程制图模型库的目的在于建立一个展示工程制图教学模型的虚拟环境，便于教师展示模型，也便于学生对模型进行交互操作和观察，从而培养和提高其空间思维能力。所以，工程制图模型库应该满足以下条件：

(1) 包括相对完善的组合体模型，如基本体截切和相贯、常见的组合体以及土建工程结构物(桥梁、隧道、涵洞和房屋建筑等)；

(2) 通过鼠标的动态交互操作，实现复杂模型的拆分和重组，方便对模型多角度、全方位的观察；

(3) 通过鼠标拣选，实时查询并显示结构构件的属性信息；

(4) 服务器端一次部署，实现 PC、平板和手机等各种终端的无安装浏览。

图2为工程制图模型库的总体设计图。其中上部为模型库的内容设计，包括基本体截切相贯、常见的组合体以及复杂的工程结构物；下部为软件系统架构，包括页面表现层、模型显示和交互以及模型信息显示。页面表现层利用 Lectora，通过鼠标拖拽的方式搭建页面框架并发布为HTML5、CSS3和JavaScript源代码文件，此方式具有页面框架搭建快速、页面结构扩展性良好、源代码便于添加改动等优点，保证了系统运行的稳定性；模型显示和交互中，通过JavaScript语言调用OpenGL ES和Three.js图形函数库，读入并解析外部模型数据文件，完成模型显示，同时通过对DIV元素绑定鼠标事件处理程序，实现模型的交互操作；模型信息显示中，通过引入和定制jQuery函数库，用弹出对话框的方式实时显示模型信息，利用dat-GUI函数库，添加了模型材质动态调整、客户区背景颜色实时更改、照相机复位和模型重组等控件，方便用户操作。

图2 工程制图模型库总体结构图

1.2 模型可视化方法

工程制图模型中，简单的组合体可通过JavaScript调用OpenGL ES进行底层绘制，但是对于复杂的组合体，程序编写效率低下，而且可能无法完成。为了方便建模和后期模型库的扩展，本文采用三维建模软件进行建模，最后将模型数据在网页上渲染显示，其流程如图 3所示。这种可视化方法包括 2个层面：①宏观上，首先对工程制图模型进行三维建模，然后将DWG或者其他格式的模型文件进行转换，统一到STL格式，作为网页外部调用文件，最后通过调用基于JavaScript的 WebGL执行文件，在客户端浏览器中完成渲染并显示模型。②程序编码层，首先对STL格式的外部调用文件进行规律命名，利用JavaScript读入并解析模型数据，同时计算模型包围盒尺寸和模型原始位置坐标，完成模型ID命名和编号，统一添加模型材质；接着获取渲染区所在层的尺寸并添加鼠标事件处理程序；最后结合HTML和CSS完成模型的显示和交互操作。

图3 模型导入方法流程图

1.2.1 STL文件解析

模型可视化中，首先是外部数据的读入和几何信息的提取。本文采用 AutoCAD建模，然后将模型导出为以ASCII格式存储的STL文件。这种格式的文件记录了描述三维模型的全部三角形面片数据，包括每个三角形的顶点坐标和法向量，可读性很强，易于程序编码读取和解析。图4所示为典型的铁路T型桥台三维模型及其导出的STL格式文件，第一行以关键字“solid”开始，后跟软件或文件名；其后数据区块均以关键字“facet...endfacet”区分，表达了其中一个三角形面片的法向量和顶点坐标；最后以关键字“endsolid”结束文件。STL文件中，所有三角形面片的顶点坐标均为正值，法向量向外，顶点数据逆时针排列。由STL格式文件特征可知，将STL文件做为外部数据进行解析时，只要针对每个面片进行处理。为了快速有效地获得面片的法向量和坐标数据，文中通过正则表达式匹配关键词，将法向量等浮点数以字符串的形式保存在数组中，进而运用JavaScript函数“parseFloat”完成解析，获得重要的面片浮点数据，程序关键代码如图4右下所示。

图4 T型桥台三维模型、STL文件及数据解析

1.2.2 可视化流程

获取了三角形面片的相关数据后，需要将这些数据传递给显卡进行计算，最终完成模型可视化，其流程如图5所示。JavaScript解析到三角形面片的顶点数据后，通过缓冲区对象将数据传递给显卡，调用顶点着色器完成图元装配以及光栅化，通过片元着色器将像素颜色写入颜色缓冲区，最终在浏览器中显示出来。这个过程中，可编程着色器起着非常重要的作用。

(1) 可编程着色器方法：也被简称为着色器，用GLSL ES语言完成着色器方法的编写。GLSL ES语言的语法与 C语言较为类似，包括对矢量和矩阵类型的支持和操作，能够访问矢量和矩阵元素的特殊分量名，支持许多内置的与计算机图形学相关的函数，能够实现更为逼真的视觉效果。

(2) 顶点着色器：用来描述顶点特性(如位置、颜色)的程序。通过顶点着色器可实现顶点坐标变换、平面法线变换和单位化、纹理坐标变换、模型视图矩阵和投影矩阵的计算、光照阴影计算等。

图5 模型可视化流程图

①顶点坐标转换。由于模型位置的变化、观察者视点位置和方向的改变以及可视范围的大小都会影响图形的显示结果，在图形显示之前，需要对模型的所有顶点进行各种变换。考虑到最复杂的情况，如果模型顺序出现平移、旋转和缩放，则模型矩阵的计算为

其中，Tx、Ty和Tz是模型沿坐标轴的移动分量；θ是绕 Z轴旋转的角度；Sx、Sy和Sz是沿坐标轴方向的缩放系数。

如果已知视点坐标、目标位置和上方向向量，可得到由一组正交基确定的观察坐标系，进一步确定的视图矩阵为

其中[X,Y,Z]是一组正交基，确定了观察坐标系，(ex,ey,ez)是视点坐标。

给定视角fovy、近裁剪面的高宽比aspect、远近裁剪面的位置f和n，就能确定四棱锥的可视空间，其投影矩阵为

考虑到模型位置的变化、视点位置和方向的改变、以及可视空间对图形显示的影响，则顶点坐标的转换公式为

②逐顶点计算颜色。如果考虑漫射光和环境光：

按照上述计算方法，利用WebGL内置函数，编写了顶点着色器，其代码如下。其中u_MvpMatrix为模型视图投影矩阵，利用式(1)～(4)进行计算，用该矩阵乘以顶点坐标，将转换后的顶点坐标传递给着色器内建变量gl_Position；接着归一化光线方向和三角形面片的法线方向，然后进行点积运算，得到两个方向之间夹角的余弦值；

最后利用式(5)～(7)完成模型光照计算。

(3) 片元着色器：进行逐片元处理过程的程序，包括光照处理、纹理计算、雾化和颜色汇总等，可将顶点着色器传递的颜色等数据插值计算，写入缓冲区进行显示。如果模型中没有考虑贴图，则片元着色器的代码相对简单，最主要的是下面一行代码

其作用是将顶点着色器计算所得的顶点颜色传递给片元着色器的内置变量，片元着色器进行内插计算并光栅化输出可视化图形。

1.2.3 模型交互操作

模型交互操作中，单击鼠标拾取成为关键环节。为了成功拾取模型，需要以下步骤：

步骤1. 注册鼠标事件。为了避免鼠标事件对信息窗口的影响(如滚动条)，鼠标交互操作应仅限于渲染窗口，所以对渲染窗口而非浏览器客户区注册鼠标事件至关重要；模型交互操作中，模型的高亮反馈能够增加交互的友好性，为此需要添加鼠标移动事件；当模型拣选时，程序需实时捕获鼠标按键事件而进行反馈。程序中注册了以下鼠标事件：

步骤2. 鼠标坐标归一化。当浏览器窗口的滚动条位置发生变化时，DIV元素相对于客户区的位置坐标也会发生相应变化，此时，射线选取中其起点坐标也随之变化，从而出现错位选取。为此，浏览器窗口滚动条滚动事件中需要及时获取DIV元素的当前位置，通过下式完成鼠标坐标归一化，完成模型拣选。

其中，Xclient、Yclient分别为鼠标在客户区中的位置；Xleft、Xright分别为DIV元素左、右边的当前位置；Ytop、Ybottom分别为DIV元素上、下边的当前位置。

步骤3. 鼠标事件处理程序。捕获到各种鼠标事件后，主要针对鼠标移动中的按键进行处理。射线拾取中，和射线相交的实体较多，程序中选择处理第一个相交的实体。对每一次鼠标按键事件，首先判断有无选中实体，如果选中了不同的实体，则将原来的实体颜色还原显示，将新选中的实体高亮显示并获取模型 ID，为后续交互准备必要的数据。下面为鼠标事件处理的部分代码：

var intersects = raycaster.intersectObjects( objects )

if ( intersects.length 〉 0 ) { // 有选中

if ( INTERSECTED != intersects[ 0 ].object ) { // 选中了不同的实体

if ( INTERSECTED ) { // 前一次选中的实体

... ... // 颜色还原

}

// 获取离鼠标最近的立体

INTERSECTED = intersects[ 0 ].object

... ... // 高亮显示、获取ID }

}

1.3 模型库实例及平台测试

本文以AutoCAD为建模工具，对工程制图中常见的组合体和较为复杂的工程结构物进行了建模，将模型导出为STL格式数据文件。通过分析STL数据文件格式，利用 JavaScript 语言编写了STL文件解析、模型可视化和鼠标事件处理程序，添加了导航和GUI模块，实现了运行于浏览器的工程制图模型库。如图6所示，上部为导航菜单，可以实现不同模型的选择显示；右侧窗口为模型显示区，用户可实现模型平移、拆分、组合和部件信息查询以及模型和窗口背景颜色的切换等操作；左侧窗口为信息显示区，当鼠标在右侧模型窗口中选中部件并按下鼠标中键时，实现部件信息的切换显示。

为实现系统平台测试，本文基于台式电脑，搭建了Windows7+ Apache HTTP Server 2.2服务器环境，配置了无线路由器，实现了局域网中有线网络PC端和无线网络手机移动端的系统测试。出于性能和平台兼容性的考虑，本文重点进行了手机移动端测试，其硬件环境为三星Note4，测试结果如图 7所示。测试结果显示：该系统能稳定运行于移动浏览器，可以实现页面的触摸交互操作，不但能显示结构物模型，而且在模型的平移、缩放和旋转等操作中取得了非常流畅的运行效果。

图6 工程制图模型库

图7 移动端模型库

2 小 结

本文研究开发了基于WebGL技术的工程制图模型库，该模型库包含丰富的制图模型，方便教师课堂教学和学生终端浏览；通过鼠标事件和材质切换，使模型拣选高亮显示，增加了模型拖拽拆分和组合功能，添加了模型信息查询和显示功能，具有交互友好、形象直观的特点；经过服务器端一次部署，可供PC、平板和手机移动端随处浏览，极大地拓展了传统课件使用上的时空限制；模型库有效地培养了学生的空间想象力，增强了趣味性，提高了学习效率，也为工程制图模型库的开发提供了思路。

[1] 孙小燕, 汪列隆. 三维虚拟模型库对机械制图教学的有效性研究[J]. 池州学院学报, 2015, 29(3): 152-153.

[2] 熊 巍, 刘 林, 陈锦昌. 现代工程制图课堂教学改革的探索与实践[J]. 图学学报, 2014, 35(2): 296-300.

[3] 张淑艳, 雷光明, 成 彬, 等. 三维 CAD辅助工程制图教学的方法[J]. 图学学报, 2014, 35(3): 464-468.

[4] 王炳达, 许 琪, 姚文亮. 工程制图虚拟模型库研究与设计[J]. 机电信息, 2014, (15): 140-141．

[5] 何 丽, 孙文磊, 朱 颖. Web三维模型共享平台在工程制图教学中的应用[J]. 机械工程与自动化, 2015, (4): 49-51.

[6] 缪 君, 储 珺, 张桂梅. 基于X3D的工程制图网络虚拟模型库开发[J]. 工程图学学报, 2011, 32(2): 122-126.

[7] 周海迎, 史冬敏, 汤蒂莲. 《工程制图》虚拟模型库的开发和应用[J]. 东华理工大学学报: 社会科学版, 2016, 35(1): 79-81.

[8] Parisi T. WebGL: up and running [M]. 北京: 人民邮电出版社, 2013: 1-14.

[9] Matsuda K, Lea R. WebGL编程指南[M]. 谢光磊, 译.北京: 电子工业出版社, 2014: 1-7.

Development of Web Virtual Model Library of Engineering Drawing Based on WebGL

Li Xingtian, Zhang Liping
(School of Civil Engineering, Lanzhou Jiaotong University, Lanzhou Gansu 730070, China)

The composite solids in Engineering Drawing are modelled by using AutoCAD. Based on the exported files in the STL format for the models and WebGL, the data files for the models are read and parsed, a shading program and an interactive processing program for mouse event are developed, and a web virtual model library of solids for engineering drawing, which can be run in browsers is established. The library has a large number of models and a friendly graphical user interface. When installed on a server, the library can be accessed on client terminals, which facilitates classroom teaching and is helpful to spatial imagination ability of students, improve their study efficiency and provide reference for the development of other virtual model library.

engineering drawing; model library; WebGL

TP 391

10.11996/JG.j.2095-302X.2016060836

A

2095-302X(2016)06-0836-06

2016-05-24；定稿日期：2016-06-30

兰州交通大学重点教改项目(JG2014Z03)

李兴田(1981-)，男，甘肃会宁人，讲师，硕士。主要研究方向为结构分析及土木工程计算机仿真。E-mail：lm_lxt@126.com