富鵬達(dá) 田崇 李明楊 鄭曉軍

大連交通大學(xué)機(jī)械工程學(xué)院工業(yè)工程系，中國(guó)·遼寧 大連 116028

1 引言

隨著主流瀏覽器對(duì)HTML5以及WebGL的全面支持，瀏覽器已成為展現(xiàn)復(fù)雜應(yīng)用和圖形的平臺(tái)，在瀏覽器端不僅可以創(chuàng)建二維應(yīng)用和圖像，而且也可以通過GPU渲染技術(shù)支持復(fù)雜3D應(yīng)用，目前瀏覽器借助GPU技術(shù)支持?jǐn)?shù)萬量級(jí)模型的實(shí)時(shí)渲染，基于Web的應(yīng)用系統(tǒng)成為當(dāng)今網(wǎng)絡(luò)技術(shù)重點(diǎn)研究方向[1]。

在過去的十年里，互聯(lián)網(wǎng)技術(shù)有了突飛猛進(jìn)的發(fā)展，逐漸走進(jìn)人們生活的各個(gè)角落，使人們的生活方式產(chǎn)生了巨大的改變。在互聯(lián)網(wǎng)的各個(gè)領(lǐng)域中，發(fā)展和變化最快的就是Web應(yīng)用，已經(jīng)成為當(dāng)今網(wǎng)絡(luò)技術(shù)的研究重點(diǎn)。隨著人們對(duì)網(wǎng)絡(luò)體驗(yàn)的要求越來越高，網(wǎng)絡(luò)也從傳統(tǒng)的二維向交互式三維進(jìn)化。

早期的技術(shù)并不成熟，如JavaApplet所實(shí)現(xiàn)的非常簡(jiǎn)單的Web交互三維圖形程序，不僅需要下載一個(gè)巨大的支持環(huán)境，而且畫面非常粗糙，性能也很差。

Web聯(lián)盟在2014年10月完成了HTML5的標(biāo)準(zhǔn)化，而HTML5的標(biāo)準(zhǔn)之一WebGL很好地解決了這兩個(gè)問題。WebGL不需要任何瀏覽器插件，通過JavaScript腳本進(jìn)行Web交互3D圖形制作程序的設(shè)計(jì)和實(shí)現(xiàn)。WebGL技術(shù)在現(xiàn)實(shí)生活中也有廣泛的應(yīng)用，如于潞等基于WebGl技術(shù)設(shè)計(jì)并實(shí)現(xiàn)了的網(wǎng)絡(luò)3D虛擬訓(xùn)練軟件；李福送等基于WebGL技術(shù)實(shí)現(xiàn)了機(jī)電產(chǎn)品3D在線交互展示。

利用WebGL技術(shù)構(gòu)建三維交互式平臺(tái)，加載三維模型，在網(wǎng)頁(yè)的三維場(chǎng)景中實(shí)現(xiàn)鼠標(biāo)鍵盤與模型的交互。目前，中國(guó)對(duì)WebGL和HTML5的研究還很少，這篇論文對(duì)后續(xù)的研究者有一定的意義。

2 相關(guān)技術(shù)介紹

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

圖1 WebGL中關(guān)鍵元素的連接關(guān)系

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

3 交互系統(tǒng)構(gòu)建

3.1 基本環(huán)境搭建

Three.js必須依靠網(wǎng)頁(yè)來發(fā)揮作用，所以系統(tǒng)就在基本的HTML結(jié)構(gòu)之上建立。主程序進(jìn)入HTML body中的script標(biāo)簽里面編寫。在將Three.js合并到基本結(jié)構(gòu)之后，需要進(jìn)行設(shè)置三維環(huán)境。主要設(shè)置內(nèi)容如下。

3.1.1 渲染器設(shè)置

WebGL技術(shù)標(biāo)準(zhǔn)免去了開發(fā)網(wǎng)頁(yè)專用渲染插件的麻煩，可被用于創(chuàng)建具有復(fù)雜3D結(jié)構(gòu)的網(wǎng)站頁(yè)面。其完美地解決了現(xiàn)有的Web交互式三維動(dòng)畫的兩個(gè)問題：

其一，它通過HTML腳本實(shí)現(xiàn)Web交互式三維動(dòng)畫的制作，無需任何瀏覽器插件支持。

其二，它利用底層的圖形硬件加速功能進(jìn)行的圖形渲染，是通過統(tǒng)一的、標(biāo)準(zhǔn)的、跨平臺(tái)的OpenGL接口實(shí)現(xiàn)的。因此，系統(tǒng)選擇了Three.js渲染效果較好的WebGL Renderer。

3.1.2 相機(jī)設(shè)置

透視相機(jī)和正交相機(jī)是Three.js提供的兩種相機(jī)類型[6]，此系統(tǒng)為了提供真實(shí)感，所以采用透視相機(jī)。

3.1.3 設(shè)置場(chǎng)景和光源

使用Three.Scene來設(shè)置三維場(chǎng)景。Three.js提供4個(gè)基本光源，即環(huán)境光、聚光燈、點(diǎn)光源、平行光。本系統(tǒng)中主要使用環(huán)境光、點(diǎn)光源和聚光燈，通過設(shè)置AmbientLight(),Three.Spotlight()和Three.DirectionalLight()來實(shí)現(xiàn)。

3.2 加載外部模型

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

為了將零件模型導(dǎo)入到Three.js中，引入材質(zhì)加載器mtlloader和模型加載器objloader。解析模型后，把MTL文件轉(zhuǎn)成Three.js里面的材質(zhì)(material)文件，實(shí)現(xiàn)過程與加載OBJ文件類似，使用正則表達(dá)式對(duì)MTL文件里面的文本信息進(jìn)行解析和處理，最終得到完整的material對(duì)象，得到的結(jié)果可以在網(wǎng)頁(yè)中渲染。

3.3 交互設(shè)計(jì)

在三維空間中所使用的交互操作通過鼠標(biāo)來實(shí)現(xiàn)，鼠標(biāo)的觸發(fā)事件需要通過事件偵聽，其核心代碼如下：

本系統(tǒng)的鼠標(biāo)功能是：鼠標(biāo)通過滾輪來實(shí)現(xiàn)對(duì)于視角的縮放(Zoom)，來實(shí)現(xiàn)對(duì)于零件的近距離觀看。通過按住鼠標(biāo)左鍵并移動(dòng)鼠標(biāo)來達(dá)到鏡頭的搖攝(Pan)，通過按住鼠標(biāo)右鍵并移動(dòng)鼠標(biāo)來達(dá)到鏡頭的移動(dòng)(Move)。

對(duì)于MouseMove、MouseDown、MouseUp、MouseWheel這四個(gè)事件編寫對(duì)應(yīng)觸發(fā)函數(shù)，其中MouseMove需要和MouseUp相配合，總體設(shè)計(jì)圖如圖2所示。

圖2 鼠標(biāo)交互設(shè)計(jì)

4 系統(tǒng)的設(shè)計(jì)

4.1 系統(tǒng)的功能設(shè)計(jì)

WebGL的交互操作培訓(xùn)系統(tǒng)包括三個(gè)功能模塊：基礎(chǔ)模塊、3D操作漫游模塊、教學(xué)模塊，如圖3所示。

圖3 系統(tǒng)功能模塊

4.1.1 基礎(chǔ)模塊

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

4.1.2 3D操作漫游模塊

用戶可以在PC端和移動(dòng)端分別通過鼠標(biāo)來完成對(duì)每個(gè)零件的移動(dòng)、旋轉(zhuǎn)、縮放、模型聚焦操作，從而滿足用戶全方位查看，給用戶帶來最接近真實(shí)的擺線針輪式減速器的裝配仿真，增加用戶的裝配經(jīng)驗(yàn)。

4.1.3 教學(xué)模塊

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

4.2 裝配的工序設(shè)計(jì)

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

圖4 減速器安裝工序卡片

4.3 安裝過程的設(shè)計(jì)與實(shí)現(xiàn)

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

圖5 減速器安裝前效果圖

利用Tween.js技術(shù)將零件模型添加動(dòng)畫效果，通過改變相關(guān)參數(shù)，達(dá)到安裝過程可視化的效果。通過拖動(dòng)鼠標(biāo)的方式達(dá)到3D演示效果，并有每一步的單獨(dú)演示動(dòng)畫，實(shí)現(xiàn)交互式教學(xué)的目的，如圖6所示為減速器安裝后的效果圖。

圖6 減速器安裝后效果圖

5 結(jié)語

論文以WebGL為基礎(chǔ)，設(shè)計(jì)并實(shí)現(xiàn)了擺線針輪減速器裝配交互操作培訓(xùn)系統(tǒng)。Web運(yùn)行HTML格式的零件模型和三維動(dòng)畫模型，瀏覽器可以對(duì)三維模型進(jìn)行平移、旋轉(zhuǎn)、縮放等一系列的操作，并且還可以在網(wǎng)頁(yè)上進(jìn)行渲染達(dá)到良好的效果。與此同時(shí)，這個(gè)平臺(tái)又具有很好交互特性，使用戶能達(dá)到很好的體驗(yàn)。WebGL也無需下載渲染插件，節(jié)省了開發(fā)和創(chuàng)建動(dòng)畫的時(shí)間。

在WebGL應(yīng)用的過程中，不僅能夠避免了插件應(yīng)用的麻煩，而且還可以降低網(wǎng)頁(yè)制作的困難度，提高3D網(wǎng)頁(yè)設(shè)計(jì)師的制作效率[7]。隨著HTML5的飛速發(fā)展，WebGL也將成為一個(gè)新的技術(shù)，在許多領(lǐng)域會(huì)有更多的應(yīng)用。