基于WebGL的擺線針輪減速器裝配交互操作培訓系統

富鵬達 田崇 李明楊 鄭曉軍

大連交通大學機械工程學院工業工程系，中國·遼寧 大連 116028

1 引言

隨著主流瀏覽器對HTML5以及WebGL的全面支持，瀏覽器已成為展現復雜應用和圖形的平臺，在瀏覽器端不僅可以創建二維應用和圖像，而且也可以通過GPU渲染技術支持復雜3D應用，目前瀏覽器借助GPU技術支持數萬量級模型的實時渲染，基于Web的應用系統成為當今網絡技術重點研究方向[1]。

在過去的十年里，互聯網技術有了突飛猛進的發展，逐漸走進人們生活的各個角落，使人們的生活方式產生了巨大的改變。在互聯網的各個領域中，發展和變化最快的就是Web應用，已經成為當今網絡技術的研究重點。隨著人們對網絡體驗的要求越來越高，網絡也從傳統的二維向交互式三維進化。

早期的技術并不成熟，如JavaApplet所實現的非常簡單的Web交互三維圖形程序，不僅需要下載一個巨大的支持環境，而且畫面非常粗糙，性能也很差。

Web聯盟在2014年10月完成了HTML5的標準化，而HTML5的標準之一WebGL很好地解決了這兩個問題。WebGL不需要任何瀏覽器插件，通過JavaScript腳本進行Web交互3D圖形制作程序的設計和實現。WebGL技術在現實生活中也有廣泛的應用，如于潞等基于WebGl技術設計并實現了的網絡3D虛擬訓練軟件；李福送等基于WebGL技術實現了機電產品3D在線交互展示。

利用WebGL技術構建三維交互式平臺，加載三維模型，在網頁的三維場景中實現鼠標鍵盤與模型的交互。目前，中國對WebGL和HTML5的研究還很少，這篇論文對后續的研究者有一定的意義。

2 相關技術介紹

WebGL是基于OpenGL ES 2.0的一種新的API[2]，在瀏覽器中與Web頁面的其他元素可以無縫連接；WebGL具有跨平臺的特性，可以運行在從手機、平板到家用電腦的任何主流操作系統當中[3]。WebGL運行時有其主要的內部元素之間的關系，如圖1所示。

圖1 WebGL中關鍵元素的連接關系

如圖1所示，瀏覽器打開包含JavaScript程序和Canvas元素的網頁，然后獲取3D上下文環境(3D context)對象，它可用于在Canvas元素上繪制3D的場景接口，也可以將OpenGL ES 2.0連接到瀏覽器，其中，Canvas是引入到HTML5中的一個新元素，該元素能夠在頁面指定的位置實時渲染2D和3D圖像。開發者不僅能在Canvas上使用HTML5 Canvas API，顯示各種形狀、呈現文本而且還可以顯示單個圖像，自己調整畫布顏色、顏色透明度和填充顏色，這些操作通過JavaScript程序實現。直接基于WebGL開發交互式3D Web應用程序也有難度，需要非常了解3D設計、Open-GL和WebGL原始API，而且實現時也容易出錯。為了解決這些問題，開發人員創建了許多基于WebGL的程序開源框架，從而使其他開發人員更容易開發類似的程序。目前，流行的WebGL框架有很多，如Three.js、PhiloGL、Babylon.js、Scenejs等。每個框架都有自己的特殊之處。Three.js是一個輕量級的用于在瀏覽器中創建3D計算機圖形圖像應用程序的JavaScript庫[4]。論文選用Three.js來開發系統，主要原因是Three.js是目前應用最廣泛的WebGL框架，其文檔資料也是最豐富的，而且完全采用JavaScript編寫而成，非常適用于三維網頁的開發[5]。

3 交互系統構建

3.1 基本環境搭建

Three.js必須依靠網頁來發揮作用，所以系統就在基本的HTML結構之上建立。主程序進入HTML body中的script標簽里面編寫。在將Three.js合并到基本結構之后，需要進行設置三維環境。主要設置內容如下。

3.1.1 渲染器設置

WebGL技術標準免去了開發網頁專用渲染插件的麻煩，可被用于創建具有復雜3D結構的網站頁面。其完美地解決了現有的Web交互式三維動畫的兩個問題：

其一，它通過HTML腳本實現Web交互式三維動畫的制作，無需任何瀏覽器插件支持。

其二，它利用底層的圖形硬件加速功能進行的圖形渲染，是通過統一的、標準的、跨平臺的OpenGL接口實現的。因此，系統選擇了Three.js渲染效果較好的WebGL Renderer。

3.1.2 相機設置

透視相機和正交相機是Three.js提供的兩種相機類型[6]，此系統為了提供真實感，所以采用透視相機。

3.1.3 設置場景和光源

使用Three.Scene來設置三維場景。Three.js提供4個基本光源，即環境光、聚光燈、點光源、平行光。本系統中主要使用環境光、點光源和聚光燈，通過設置AmbientLight(),Three.Spotlight()和Three.DirectionalLight()來實現。

3.2 加載外部模型

三維模型是由四邊形面或三角形面組成的網格模型。在Three.js中網格模型用Three.Mesh來表示，Three.Mesh的構造函數是：Three.Mesh=function（geometry.material）。其中，第1個參數geometry是一個Three.geometry類型的對象，包含了模型頂點之間的連接關系；第2個參數Material對模型的材質進行定義，光照、紋理對Mesh的作用效果會被材質影響。本系統顯示的3D模型事先用3ds Max做好，然后導出為OBJ格式文件，導出時還會附帶導出MTL格式的材質文件。

為了將零件模型導入到Three.js中，引入材質加載器mtlloader和模型加載器objloader。解析模型后，把MTL文件轉成Three.js里面的材質(material)文件，實現過程與加載OBJ文件類似，使用正則表達式對MTL文件里面的文本信息進行解析和處理，最終得到完整的material對象，得到的結果可以在網頁中渲染。

3.3 交互設計

在三維空間中所使用的交互操作通過鼠標來實現，鼠標的觸發事件需要通過事件偵聽，其核心代碼如下：

本系統的鼠標功能是：鼠標通過滾輪來實現對于視角的縮放(Zoom)，來實現對于零件的近距離觀看。通過按住鼠標左鍵并移動鼠標來達到鏡頭的搖攝(Pan)，通過按住鼠標右鍵并移動鼠標來達到鏡頭的移動(Move)。

對于MouseMove、MouseDown、MouseUp、MouseWheel這四個事件編寫對應觸發函數，其中MouseMove需要和MouseUp相配合，總體設計圖如圖2所示。

圖2 鼠標交互設計

4 系統的設計

4.1 系統的功能設計

WebGL的交互操作培訓系統包括三個功能模塊：基礎模塊、3D操作漫游模塊、教學模塊，如圖3所示。

圖3 系統功能模塊

4.1.1 基礎模塊

用戶可以查看擺線針輪式減速器的基本屬性信息、關于擺線針輪式減速器的功能介紹、安裝擺線針輪減速器使用工具介紹以及通過交互操作培訓系統所能夠達到的目的及意義。

4.1.2 3D操作漫游模塊

用戶可以在PC端和移動端分別通過鼠標來完成對每個零件的移動、旋轉、縮放、模型聚焦操作，從而滿足用戶全方位查看，給用戶帶來最接近真實的擺線針輪式減速器的裝配仿真，增加用戶的裝配經驗。

4.1.3 教學模塊

運用裝配過程卡片來呈現每一步的裝配，并告知每一步的裝配注意事項，操作所需要的輔助工具。

4.2 裝配的工序設計

按照擺線針輪式減速器的安裝過程分為準備、清洗和裝配三個部分。準備過程是將零件配齊；清洗過程需要將待安裝零件表面擦凈；裝配過程較為復雜，需嚴格按照工序卡片的要求進行裝配，且每一張工藝卡片都配有相應的動畫演示，便于使工人更容易理解安裝過程，如圖4所示。

圖4 減速器安裝工序卡片

4.3 安裝過程的設計與實現

首先使用3ds Max建模軟件進行建模并導出，然后通過WebStorm編輯器利用Three.js導入到瀏覽器中，通過改變模型參數達到預計效果圖如圖5所示。

圖5 減速器安裝前效果圖

利用Tween.js技術將零件模型添加動畫效果，通過改變相關參數，達到安裝過程可視化的效果。通過拖動鼠標的方式達到3D演示效果，并有每一步的單獨演示動畫，實現交互式教學的目的，如圖6所示為減速器安裝后的效果圖。

圖6 減速器安裝后效果圖

5 結語

論文以WebGL為基礎，設計并實現了擺線針輪減速器裝配交互操作培訓系統。Web運行HTML格式的零件模型和三維動畫模型，瀏覽器可以對三維模型進行平移、旋轉、縮放等一系列的操作，并且還可以在網頁上進行渲染達到良好的效果。與此同時，這個平臺又具有很好交互特性，使用戶能達到很好的體驗。WebGL也無需下載渲染插件，節省了開發和創建動畫的時間。

在WebGL應用的過程中，不僅能夠避免了插件應用的麻煩，而且還可以降低網頁制作的困難度，提高3D網頁設計師的制作效率[7]。隨著HTML5的飛速發展，WebGL也將成為一個新的技術，在許多領域會有更多的應用。