基于WebGL的工程制圖網絡虛擬模型庫的開發(fā)

李興田， 張麗萍

(蘭州交通大學土木工程學院，甘肅 蘭州 730070)

基于WebGL的工程制圖網絡虛擬模型庫的開發(fā)

李興田， 張麗萍

(蘭州交通大學土木工程學院，甘肅 蘭州 730070)

以AutoCAD為建模工具，對工程制圖中的組合體進行建模，通過分析其STL格式的導出文件，利用WebGL技術實現了模型數據文件的解析讀取、著色器程序的編制和鼠標交互處理程序的添加，研究開發(fā)了運行于瀏覽器的工程制圖模型庫。該模型庫模型豐富、交互友好，實現了服務器端一次部署，客戶端隨處瀏覽，方便了教師課堂教學，培養(yǎng)了學生的空間想象力，提高了學習效率，為虛擬模型庫的研發(fā)提供了思路。

工程制圖；模型庫；WebGL

工程制圖是工科專業(yè)學生必須掌握的一門專業(yè)基礎課，對于培養(yǎng)學生的繪圖讀圖、空間想象和工程設計能力至關重要。

由于工程制圖的空間性和抽象性，其課程教、學方面都存在一定難度。課堂教學中，為了幫助學生讀圖，增強學生的空間想象力和形象思維能力，教師往往以板書勾繪軸測圖、展示掛圖和實體模型、甚至要求學生動手制作組合體模型等方式完成模型展示。板書勾繪雖然直接了當，但僅適合簡單模型，復雜模型的繪制費時、費力，占用課堂時間過多，不利于課堂內容的講授；掛圖雖能表達較為豐富的模型信息，但是內容固定、量少不全、攜帶不方便；實體模型需要一定的存儲空間，攜帶展示不方便，傳遞信息不足；學生動手制作費時、費力，一般不適合課堂教學。課后學習中，由于缺少課堂輔導教具，學生在組合體投影圖的閱讀中存在很多困難，嚴重影響了學習質量和效果。近些年，隨著多媒體進入課堂，這些問題得到了一定程度的解決。但總體而言，大多數多媒體課件對模型的展示還差強人意，主要表現在靜態(tài)、信息單一、無交互、無沉浸感等[1-2]。

為解決上述問題，廣大工程制圖教師在教學中對模型的展示方式和方法做了很多探索[3-4]，具有代表性的是 3D工程制圖虛擬模型庫[5-7]。由于技術發(fā)展的制約，這類模型庫通常基于VRML或X3D技術，其場景、節(jié)點腳本的構建和編寫繁瑣冗長，而且腳本語言及媒體文件不能被瀏覽器直接解析顯示，需要額外的瀏覽器插件，不僅對開發(fā)者的要求較高，而且程序擴展性受到限制，平臺兼容性較差。

隨著WebGL技術的誕生，上述問題得到了很好的解決。WebGL是免費授權的、跨平臺的應用程序接口API，其將OpenGL ES 2.0作為在HTML網頁內繪制3D圖形的底層函數，并作為低級別文檔對象模型的接口加以開放。WebGL使用OpenGL渲染語言GLSL ES，并與其他3D內容的上下層進行捆綁，最后通過Javascript編程接口，可以創(chuàng)建內容動態(tài)、交互友好的 Web應用，其技術架構如圖 1所示。WebGL技術完美地解決了現有Web頁面顯示3D圖形的問題[8-9]：①通過HTML腳本本身實現Web頁面顯示3D圖形，無需任何瀏覽器插件支持；②利用統(tǒng)一、標準和跨平臺的OpenGL接口和底層圖形硬件加速功能實現圖形渲染，具有良好的跨平臺能力。

圖1 WebGL技術架構

本文討論如何通過WebGL技術，創(chuàng)建具有良好的兼容性、優(yōu)秀的跨平臺能力、交互機制完善、模型顯示全面、部署簡單、使用方便的工程制圖模型庫，從而方便教師教學，幫助學生學習，提高學生的空間想象力和讀圖能力，提高學習效率。

1 工程制圖網絡虛擬模型庫的創(chuàng)建

1.1 總體設計

工程制圖模型庫的目的在于建立一個展示工程制圖教學模型的虛擬環(huán)境，便于教師展示模型，也便于學生對模型進行交互操作和觀察，從而培養(yǎng)和提高其空間思維能力。所以，工程制圖模型庫應該滿足以下條件：

(1) 包括相對完善的組合體模型，如基本體截切和相貫、常見的組合體以及土建工程結構物(橋梁、隧道、涵洞和房屋建筑等)；

(2) 通過鼠標的動態(tài)交互操作，實現復雜模型的拆分和重組，方便對模型多角度、全方位的觀察；

(3) 通過鼠標揀選，實時查詢并顯示結構構件的屬性信息；

(4) 服務器端一次部署，實現 PC、平板和手機等各種終端的無安裝瀏覽。

圖2為工程制圖模型庫的總體設計圖。其中上部為模型庫的內容設計，包括基本體截切相貫、常見的組合體以及復雜的工程結構物；下部為軟件系統(tǒng)架構，包括頁面表現層、模型顯示和交互以及模型信息顯示。頁面表現層利用 Lectora，通過鼠標拖拽的方式搭建頁面框架并發(fā)布為HTML5、CSS3和JavaScript源代碼文件，此方式具有頁面框架搭建快速、頁面結構擴展性良好、源代碼便于添加改動等優(yōu)點，保證了系統(tǒng)運行的穩(wěn)定性；模型顯示和交互中，通過JavaScript語言調用OpenGL ES和Three.js圖形函數庫，讀入并解析外部模型數據文件，完成模型顯示，同時通過對DIV元素綁定鼠標事件處理程序，實現模型的交互操作；模型信息顯示中，通過引入和定制jQuery函數庫，用彈出對話框的方式實時顯示模型信息，利用dat-GUI函數庫，添加了模型材質動態(tài)調整、客戶區(qū)背景顏色實時更改、照相機復位和模型重組等控件，方便用戶操作。

圖2 工程制圖模型庫總體結構圖

1.2 模型可視化方法

工程制圖模型中，簡單的組合體可通過JavaScript調用OpenGL ES進行底層繪制，但是對于復雜的組合體，程序編寫效率低下，而且可能無法完成。為了方便建模和后期模型庫的擴展，本文采用三維建模軟件進行建模，最后將模型數據在網頁上渲染顯示，其流程如圖 3所示。這種可視化方法包括 2個層面：①宏觀上，首先對工程制圖模型進行三維建模，然后將DWG或者其他格式的模型文件進行轉換，統(tǒng)一到STL格式，作為網頁外部調用文件，最后通過調用基于JavaScript的 WebGL執(zhí)行文件，在客戶端瀏覽器中完成渲染并顯示模型。②程序編碼層，首先對STL格式的外部調用文件進行規(guī)律命名，利用JavaScript讀入并解析模型數據，同時計算模型包圍盒尺寸和模型原始位置坐標，完成模型ID命名和編號，統(tǒng)一添加模型材質；接著獲取渲染區(qū)所在層的尺寸并添加鼠標事件處理程序；最后結合HTML和CSS完成模型的顯示和交互操作。

圖3 模型導入方法流程圖

1.2.1 STL文件解析

模型可視化中，首先是外部數據的讀入和幾何信息的提取。本文采用 AutoCAD建模，然后將模型導出為以ASCII格式存儲的STL文件。這種格式的文件記錄了描述三維模型的全部三角形面片數據，包括每個三角形的頂點坐標和法向量，可讀性很強，易于程序編碼讀取和解析。圖4所示為典型的鐵路T型橋臺三維模型及其導出的STL格式文件，第一行以關鍵字“solid”開始，后跟軟件或文件名；其后數據區(qū)塊均以關鍵字“facet...endfacet”區(qū)分，表達了其中一個三角形面片的法向量和頂點坐標；最后以關鍵字“endsolid”結束文件。STL文件中，所有三角形面片的頂點坐標均為正值，法向量向外，頂點數據逆時針排列。由STL格式文件特征可知，將STL文件做為外部數據進行解析時，只要針對每個面片進行處理。為了快速有效地獲得面片的法向量和坐標數據，文中通過正則表達式匹配關鍵詞，將法向量等浮點數以字符串的形式保存在數組中，進而運用JavaScript函數“parseFloat”完成解析，獲得重要的面片浮點數據，程序關鍵代碼如圖4右下所示。

圖4 T型橋臺三維模型、STL文件及數據解析

1.2.2 可視化流程

獲取了三角形面片的相關數據后，需要將這些數據傳遞給顯卡進行計算，最終完成模型可視化，其流程如圖5所示。JavaScript解析到三角形面片的頂點數據后，通過緩沖區(qū)對象將數據傳遞給顯卡，調用頂點著色器完成圖元裝配以及光柵化，通過片元著色器將像素顏色寫入顏色緩沖區(qū)，最終在瀏覽器中顯示出來。這個過程中，可編程著色器起著非常重要的作用。

(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，就能確定四棱錐的可視空間，其投影矩陣為

考慮到模型位置的變化、視點位置和方向的改變、以及可視空間對圖形顯示的影響，則頂點坐標的轉換公式為

②逐頂點計算顏色。如果考慮漫射光和環(huán)境光：

按照上述計算方法，利用WebGL內置函數，編寫了頂點著色器，其代碼如下。其中u_MvpMatrix為模型視圖投影矩陣，利用式(1)～(4)進行計算，用該矩陣乘以頂點坐標，將轉換后的頂點坐標傳遞給著色器內建變量gl_Position；接著歸一化光線方向和三角形面片的法線方向，然后進行點積運算，得到兩個方向之間夾角的余弦值；

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

(3) 片元著色器：進行逐片元處理過程的程序，包括光照處理、紋理計算、霧化和顏色匯總等，可將頂點著色器傳遞的顏色等數據插值計算，寫入緩沖區(qū)進行顯示。如果模型中沒有考慮貼圖，則片元著色器的代碼相對簡單，最主要的是下面一行代碼

其作用是將頂點著色器計算所得的頂點顏色傳遞給片元著色器的內置變量，片元著色器進行內插計算并光柵化輸出可視化圖形。

1.2.3 模型交互操作

模型交互操作中，單擊鼠標拾取成為關鍵環(huán)節(jié)。為了成功拾取模型，需要以下步驟：

步驟1. 注冊鼠標事件。為了避免鼠標事件對信息窗口的影響(如滾動條)，鼠標交互操作應僅限于渲染窗口，所以對渲染窗口而非瀏覽器客戶區(qū)注冊鼠標事件至關重要；模型交互操作中，模型的高亮反饋能夠增加交互的友好性，為此需要添加鼠標移動事件；當模型揀選時，程序需實時捕獲鼠標按鍵事件而進行反饋。程序中注冊了以下鼠標事件：

步驟2. 鼠標坐標歸一化。當瀏覽器窗口的滾動條位置發(fā)生變化時，DIV元素相對于客戶區(qū)的位置坐標也會發(fā)生相應變化，此時，射線選取中其起點坐標也隨之變化，從而出現錯位選取。為此，瀏覽器窗口滾動條滾動事件中需要及時獲取DIV元素的當前位置，通過下式完成鼠標坐標歸一化，完成模型揀選。

其中，Xclient、Yclient分別為鼠標在客戶區(qū)中的位置；Xleft、Xright分別為DIV元素左、右邊的當前位置；Ytop、Ybottom分別為DIV元素上、下邊的當前位置。

步驟3. 鼠標事件處理程序。捕獲到各種鼠標事件后，主要針對鼠標移動中的按鍵進行處理。射線拾取中，和射線相交的實體較多，程序中選擇處理第一個相交的實體。對每一次鼠標按鍵事件，首先判斷有無選中實體，如果選中了不同的實體，則將原來的實體顏色還原顯示，將新選中的實體高亮顯示并獲取模型 ID，為后續(xù)交互準備必要的數據。下面為鼠標事件處理的部分代碼：

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所示，上部為導航菜單，可以實現不同模型的選擇顯示；右側窗口為模型顯示區(qū)，用戶可實現模型平移、拆分、組合和部件信息查詢以及模型和窗口背景顏色的切換等操作；左側窗口為信息顯示區(qū)，當鼠標在右側模型窗口中選中部件并按下鼠標中鍵時，實現部件信息的切換顯示。

為實現系統(tǒng)平臺測試，本文基于臺式電腦，搭建了Windows7+ Apache HTTP Server 2.2服務器環(huán)境，配置了無線路由器，實現了局域網中有線網絡PC端和無線網絡手機移動端的系統(tǒng)測試。出于性能和平臺兼容性的考慮，本文重點進行了手機移動端測試，其硬件環(huán)境為三星Note4，測試結果如圖 7所示。測試結果顯示：該系統(tǒng)能穩(wěn)定運行于移動瀏覽器，可以實現頁面的觸摸交互操作，不但能顯示結構物模型，而且在模型的平移、縮放和旋轉等操作中取得了非常流暢的運行效果。

圖6 工程制圖模型庫

圖7 移動端模型庫

2 小 結

本文研究開發(fā)了基于WebGL技術的工程制圖模型庫，該模型庫包含豐富的制圖模型，方便教師課堂教學和學生終端瀏覽；通過鼠標事件和材質切換，使模型揀選高亮顯示，增加了模型拖拽拆分和組合功能，添加了模型信息查詢和顯示功能，具有交互友好、形象直觀的特點；經過服務器端一次部署，可供PC、平板和手機移動端隨處瀏覽，極大地拓展了傳統(tǒng)課件使用上的時空限制；模型庫有效地培養(yǎng)了學生的空間想象力，增強了趣味性，提高了學習效率，也為工程制圖模型庫的開發(fā)提供了思路。

[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的工程制圖網絡虛擬模型庫開發(fā)[J]. 工程圖學學報, 2011, 32(2): 122-126.

[7] 周海迎, 史冬敏, 湯蒂蓮. 《工程制圖》虛擬模型庫的開發(fā)和應用[J]. 東華理工大學學報: 社會科學版, 2016, 35(1): 79-81.

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

[9] Matsuda K, Lea R. WebGL編程指南[M]. 謝光磊, 譯.北京: 電子工業(yè)出版社, 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