基于WebGL的汽車3D展示系統(tǒng)的創(chuàng)建

李連民++翟陽(yáng)陽(yáng)

摘 要隨著瀏覽器變得強(qiáng)大，現(xiàn)在大部分的瀏覽器不僅可以創(chuàng)建二維圖形和應(yīng)用，可以充分利用GPU，創(chuàng)建漂亮的、高性能的三位應(yīng)用。本文就基于WebGl技術(shù)下進(jìn)行的汽車3D展示系統(tǒng)開(kāi)發(fā)的一些關(guān)鍵問(wèn)題進(jìn)行了闡述和說(shuō)明。

【關(guān)鍵詞】WebGL three.js 3D展示

在互聯(lián)網(wǎng)的各個(gè)領(lǐng)域中，發(fā)展和變化最快的就是Web應(yīng)用的發(fā)展。隨著人們對(duì)網(wǎng)頁(yè)體驗(yàn)的要求不斷提高，網(wǎng)頁(yè)正在逐漸地從傳統(tǒng)的二維平面網(wǎng)頁(yè)向交互式三維網(wǎng)頁(yè)發(fā)展。

普通的Web瀏覽器正日益成為能應(yīng)用豐富3D交互式程序的一個(gè)平臺(tái)。2014年10月，萬(wàn)維網(wǎng)聯(lián)盟完成了HTML5的標(biāo)準(zhǔn)制定。它通過(guò)JavaScript腳本實(shí)現(xiàn)Web交互式三維圖形制作程序的設(shè)計(jì)與實(shí)現(xiàn)，無(wú)需任何瀏覽器插件支持，它利用底層圖形硬件的加速功能功能的圖形渲染，是通過(guò)統(tǒng)一的、標(biāo)準(zhǔn)的、跨平臺(tái)的OpenGL ES2.0實(shí)現(xiàn)的。

1 基于WebGL的汽車3D展示系統(tǒng)的創(chuàng)建

1.1 本地庫(kù)

Three.js是一款WEBGL庫(kù)，它在處理瀏覽器3D效果方面表現(xiàn)優(yōu)異。通過(guò)它可以創(chuàng)建鏡頭，物體，光線，材質(zhì)等，還可以選擇渲染器：使用HTML5的Canvas來(lái)繪制場(chǎng)景，也可選擇使用WEBGL或是SVG來(lái)渲染。另外它還是開(kāi)源的。盡管Three.js有種種好處，但是需要耗費(fèi)大量時(shí)間研究實(shí)例，做逆向工程，搜尋具體的函數(shù)，偶爾還需要通過(guò)GitHub需求幫助。數(shù)據(jù)會(huì)通過(guò)HTML中的JavaScript接口進(jìn)行載入。

1.2 汽車模型的實(shí)現(xiàn)

汽車模型的實(shí)現(xiàn)就是把三維物體顯示出來(lái)的過(guò)程。通過(guò)3DMAX進(jìn)行模擬。調(diào)制完成后導(dǎo)出OBJ文件加載到Three.js中。全部轉(zhuǎn)成JS文件來(lái)處理。最后得到與真人最相似的汽車模型。

1.3 汽車紋理的實(shí)現(xiàn)

UV分解完成，將UV導(dǎo)出成一張線框圖，它定義了圖片上每個(gè)點(diǎn)的位置的信息，這些點(diǎn)與3D模型是互相聯(lián)系的，已決定表面紋理貼圖的位置。就好像虛擬的”創(chuàng)可貼”，UV就是將圖像上每一個(gè)點(diǎn)精確對(duì)應(yīng)到模型物體的表面，通過(guò)不斷的調(diào)試達(dá)到最仿真的紋理。

1.4 汽車的渲染和相機(jī)

在場(chǎng)景中調(diào)用每個(gè)照相機(jī)的渲染方法。當(dāng)在進(jìn)行渲染時(shí)，會(huì)調(diào)用每個(gè)組件的渲染放大。當(dāng)對(duì)MeshRender組件來(lái)進(jìn)行渲染時(shí)，想綁定材質(zhì)及著色器，然后在綁定網(wǎng)格對(duì)象，為了加速渲染，需要綁定對(duì)象，這意味著對(duì)兩個(gè)同樣材質(zhì)和網(wǎng)格的對(duì)象進(jìn)行渲染。相機(jī)是底層渲染的重要組件，每個(gè)相機(jī)都維護(hù)者一個(gè)layerMask屬性。將每個(gè)汽車對(duì)象與layerMask屬性相匹配，從而確定組件可渲染的。

2 基于WebGL的3D汽車展示系統(tǒng)的功能實(shí)現(xiàn)

2.1 汽車的選擇

首先創(chuàng)建汽車類型CARS，

頁(yè)面初次加載時(shí)用load（）方法loader.load（ CARS[ "veyron" ].url， function（ geometry ） { createScene（ geometry， "veyron" ） } ）；

點(diǎn)擊汽車庫(kù)的按鈕后會(huì)出現(xiàn)一個(gè)汽車類型列表，點(diǎn)擊任一個(gè)汽車類型通過(guò)調(diào)用switchCar（）方法來(lái)改變顯示的汽車

2.2 顏色的選擇

在創(chuàng)建汽車類型后給每個(gè)汽車類型加入相應(yīng)的一些顏色例如CARS["gallardo"].materials={body：[["Orange"，mlib[ "Orange" ] ]

]}；點(diǎn)擊顏色庫(kù)按鈕同樣會(huì)彈出顏色庫(kù)，不過(guò)不同的汽車類型都有其特有的顏色，若汽車改變，通過(guò)剛剛說(shuō)的在創(chuàng)建汽車類型的時(shí)候就加入的顏色綁定顏色庫(kù)里的顏色也會(huì)不同，在點(diǎn)擊任一顏色的時(shí)候通過(guò)調(diào)用attachButtonMaterials（）方法來(lái)變換汽車的顏色。

3 結(jié)束語(yǔ)

在現(xiàn)在的時(shí)代，人們對(duì)2D的視覺(jué)效果已經(jīng)開(kāi)始有了”膩”的滋味，從而對(duì)3D的效果充滿的期待。而WebGL和three.js技術(shù)的出現(xiàn)，使人們能夠輕而易取的在網(wǎng)頁(yè)上看到3D的效果，并且有一種身臨其景的感覺(jué)，而WebGL技術(shù)免去了開(kāi)發(fā)網(wǎng)頁(yè)專用渲染插件的麻煩，可被用于創(chuàng)建具有復(fù)雜3D結(jié)構(gòu)的網(wǎng)站頁(yè)面，實(shí)現(xiàn)3D效果。

參考文獻(xiàn)

[1]Tony parisi.HTML5與WebGL編程[M].北京：人民郵電出版社，2015.

[2]Jos Dirksen.Three.js開(kāi)發(fā)指南[M].北京：機(jī)械工業(yè)出版社，2015.

作者簡(jiǎn)介

李連民（1979-），男，現(xiàn)為河南科技大學(xué)軟件學(xué)院講師。研究方向?yàn)檐浖軜?gòu)、網(wǎng)絡(luò)安全。

翟陽(yáng)陽(yáng)（1996-），男，現(xiàn)為河南科技大學(xué)軟件學(xué)院本科生。研究方向?yàn)檐浖_(kāi)發(fā)。

作者單位

河南科技大學(xué)軟件學(xué)院 河南省洛陽(yáng)市 471003