王 攀，田 豐

(上海大學 影視藝術(shù)技術(shù)學院，上海 200072)

基于WebGL的全景交互內(nèi)容創(chuàng)作平臺

王 攀，田 豐

(上海大學 影視藝術(shù)技術(shù)學院，上海 200072)

研制了一種基于瀏覽器的全景交互內(nèi)容創(chuàng)作平臺。創(chuàng)作平臺采用WebGL作為圖像引擎，用WampServer(Windows Apache MySQL PHP)作為集成開發(fā)環(huán)境，利用JavaScript和HTML5語言對全景圖像進行交互操作和控制，平臺生成的應用能夠?qū)θ皥D像進行實時渲染并實現(xiàn)了熱點交互設(shè)計功能。實驗證明，該創(chuàng)作平臺和生成的應用能夠在支持WebGL瀏覽器的PC和移動客戶端上運行。

WebGL；HTML5；動畫創(chuàng)作；Web服務器；交互設(shè)計

隨著Web技術(shù)的高速發(fā)展，Web2.0時代的網(wǎng)絡互動與現(xiàn)實生活緊密相連，特別是伴隨著3G、4G手機等移動互聯(lián)網(wǎng)終端的迅速普及，Web2.0更加注重用戶的交互功能。WebGL是一種3D繪圖標準，它定義了一套API，能夠允許在網(wǎng)頁中使用，實際上它是基于OpenGL ES 2.0的3D圖形API，同時能夠結(jié)合Javascript語言，這種API能夠通過HTML5的canvas標簽來使用，從而能夠?qū)崿F(xiàn)3D渲染的功能。WebGL是HTML5提供的新特征的一部分，通過HTML5的canvas元素來展現(xiàn)。

目前，3D建模和動畫軟件很多，例如Maya、3DMax等，但是這些軟件不能滿足客戶對于3D模型實時交互控制的功能，于是本文提出了一種全景交互內(nèi)容創(chuàng)作平臺，實現(xiàn)對動畫模型的平移、旋轉(zhuǎn)、移動、渲染等一些基本的操作，同時與Unity相比，該軟件基于網(wǎng)絡操作，能夠?qū)⒉僮鹘Y(jié)果保存上傳到服務器端，用戶可通過手機或者計算機登錄服務器訪問對應的數(shù)據(jù)，不僅能夠預覽操作過程達到訓練目的，同時可以直接對3D交互動畫進行操作。網(wǎng)頁上的實時渲染不需要安裝插件，實現(xiàn)用戶和動畫模型的深度交互[1]。

1 全景創(chuàng)作平臺的總體框架

利用Web的3D技術(shù)和HTML5中新增的WebGL功能搭建本文平臺，因此在搭建的過程中需要搭建一個服務器網(wǎng)站，圖1為所需的服務器端的技術(shù)。該操作平臺前端采用JavaScript語言、WebGL圖形函數(shù)庫和HTML5+CSS語言結(jié)合編寫，服務器后端采用WampServer(Windows Apache MySQL PHP集成安裝環(huán)境)軟件。其中客戶端和服務器端的處理過程[2]如圖2所示。該系統(tǒng)采用了一種服務器端的集成環(huán)境，從而為服務器的配置節(jié)省很多時間。

圖1 服務器與客戶端的連接關(guān)系

圖2 系統(tǒng)總體結(jié)構(gòu)

為了能使3D動畫很好地展示在平臺上，必須選用支持WebGL的瀏覽器(火狐、谷歌和高版本的IE瀏覽器等)，可以使用手機移動設(shè)備或者計算機打開。用瀏覽器打開時需要正確配置。進行操作的整體過程如下：用戶將已經(jīng)編寫好的HTML文件命名為index，并將與之相關(guān)的一些調(diào)用文件拷貝到服務器根目錄里，客戶端通過訪問服務器IP地址來直接訪問HTML文件，并進行瀏覽和操作，創(chuàng)作者將操作以XML的格式保存到服務器端，用戶則可以通過訪問保存的XML來觀看創(chuàng)作的過程并且可以進行操作，同時能夠給出相應的回應，可以將全景圖像通過網(wǎng)頁載入進行訪問。

2 全景交互平臺模型的建立

2.1 動畫引擎Tween.js動畫創(chuàng)建

為了產(chǎn)生動畫效果，通常采用移動相機或者移動物體來產(chǎn)生。本文采用的是和three.js緊密結(jié)合的動畫引擎Tween.js，首先加載引擎js文件，然后需要對該引擎進行初始化，通過構(gòu)建一個Tween對象。接著構(gòu)建一個渲染函數(shù)去更新這個對象，通過TWEEN.update()可以讓動畫動起來。

2.2 3D場景貼圖[3]

本文采用HTML中的canvs作為紋理，它和圖片有很大的差別，主要是通過瀏覽器中的繪圖API來進行繪制，因此它具有很大的想象空間，可以根據(jù)自己的創(chuàng)作想象出更加獨特的效果。圖3是紋理的創(chuàng)建過程[4]。

圖3 紋理創(chuàng)建過程

將canvas中編寫繪制圖像的代碼，然后THREE.Texture函數(shù)將接收到canvas紋理，通過代碼texture = new THREE.Texture(canvas)，再將紋理傳遞給材質(zhì)，最后通過構(gòu)造THRER.Mesh將幾何體和材質(zhì)融合在一起，。它主要包含了幾何體和材質(zhì)兩個參數(shù)，完成了這幾部就可以順利運行代碼了[5]。

2.3 3D模型的加載

在編寫程序之前，首先需要學會看3D模型，模型文件通常保存為.vtk格式，找到這個文件通過模型查看器觀看，然后將模型導入three.js中，如圖4所示[6]。首先將模型文件保存到服務器上，接著瀏覽器將文件下載到本地，通過js解析這個模型文件，通過Mesh函數(shù)生成需要的網(wǎng)格模型，從而在場景中顯示[7]。

圖4 模型的加載

2.4 3D場景中用戶交互

通過前面的設(shè)置之后已經(jīng)成功構(gòu)建了3D動畫對象和移動攝像機的場景，但是這些不能滿足用戶的交互功能，因此需要一些應用程序進行與用戶的交互，這是需要利用Three.js 等高層次的 WebGL 庫中添加攝像頭位置的3D用戶控制，然后通過OrbitControls.js API來支持鼠標交互，它的原理主要是移動攝像機的位置將鼠標和3D場景的位置保持一致，將3D場景的相機進行參數(shù)化的過程如下：

Controls=new THREE.OrbitControls(camere);

controls.addEventListener(‘change’,updteControls);

OrbitControls change回調(diào)updateControls() 函數(shù)，從而能夠調(diào)用渲染器的渲染函數(shù)來更新場景。

3 平臺中后端的設(shè)計

3.1 服務器端的構(gòu)建

本文采用的是WampServer軟件來搭建服務器環(huán)境，它是一種在Window下的Apache、PHP和MySQL的服務器軟件，它最大優(yōu)點就是將Apache Web服務器、PHP解釋器以及MySQL數(shù)據(jù)庫整合在一起，在配置環(huán)境上非常簡單，只需要鼠標點擊就可以了。支持PHP擴展、Apache的mod_rewrit，同時具有一鍵啟動、重啟、停止所有服務，一鍵切換到離線狀態(tài)等。

根據(jù)圖5可知，動畫創(chuàng)作者在瀏覽器中進行動畫的創(chuàng)作，通過點擊瀏覽器中的操作按鈕觸發(fā)PHP請求，并將創(chuàng)作過內(nèi)容和過程保存到服務器端，當其他用戶需要對動畫創(chuàng)作的過程進行預覽，就需要執(zhí)行一個PHP請求，為了觸發(fā)PHP請求,需要用戶在瀏覽器網(wǎng)址輸入要訪問的PHP頁面文件名并將請求傳送到Apache服務器，Apache服務器對這個請求進行分析和判斷，如果該請求滿足條件則服務器就讀取客戶端需要訪問的PHP應用程序，服務器通過調(diào)用PHP解析器將其解釋為HTML文件，再將HTML代碼發(fā)送到客戶端瀏覽器中，瀏覽器對該HTML代碼進行解釋執(zhí)行，用戶就能看到創(chuàng)作者保存的內(nèi)容。

圖5 系統(tǒng)工作原理圖

3.2 數(shù)據(jù)讀取模塊

由于模型文件往往比較大，在數(shù)據(jù)讀取的過程中可能需要很長時間，因此本文在數(shù)據(jù)的讀取采用的是Ajax技術(shù)，它能夠使JavaSript跟服務器進行數(shù)據(jù)交換，并且不需要重新載入網(wǎng)頁，然后通過XMLHttpRequest就能很好地讀取所需要展現(xiàn)的全景圖[8]。

3.3 全景創(chuàng)作平臺的實現(xiàn)

使用一臺安裝Windows操作系統(tǒng)的計算機作為服務器端，安裝好WampServer軟件來配置好服務器環(huán)境，將編寫好的index.HTML文件以及相關(guān)的外部調(diào)用文件拷貝到WampServer軟件的安裝目錄中的www/根目錄下，將服務器端的IP地址作為訪問地址，可以用手機客戶端和筆記本共同訪問，但必須保證客戶端和作為服務器端的計算機在同一個局域網(wǎng)上，本文采用的是用一個無線路由分別連接服務器端和客戶端。圖6是在計算機客戶端顯示的結(jié)果。通過點擊畫面的位置能夠達到對全景圖的操作和控制，比如點擊左邊的選擇文件按鈕，能夠直接從服務器端下載全景圖或者3D模型，并將其顯示在瀏覽器上，通過鼠標能夠?qū)崿F(xiàn)對全景圖的360°的展示，其他用戶通過訪問該用戶可以訪問該操作過程。

圖6 360°全景展示(截圖)

3.4 交互功能展示

在全景交互創(chuàng)作平臺中，可以隨時對所展示的全景圖或動畫創(chuàng)造熱點，如圖7圓點所示，該熱點能夠?qū)崿F(xiàn)對展示的內(nèi)容進行詳細說明，并觸發(fā)一些事件，例如播放一些相關(guān)視頻和產(chǎn)生超連接，用戶可以在該平臺上進行基于全景圖的展示內(nèi)容創(chuàng)作。

圖7 Web端的交互實現(xiàn)(截圖)

4 結(jié)論和展望

本文基于WebGL搭建了一種全景交互內(nèi)容的創(chuàng)作平臺，實現(xiàn)了在瀏覽器中對全景圖和3D動畫模型進行渲染處理等一系列的操作，充分展現(xiàn)了HTML中的WebGL在瀏覽器中進行三維繪圖的強大功能，通過瀏覽器，不僅可以創(chuàng)作簡單的三維模型，還能對其進行平移、旋轉(zhuǎn)、縮放等一系列基礎(chǔ)的操作，同時還能直接在網(wǎng)頁上進行渲染。同時該平臺又具有很好的交互特性，使用戶能夠達到很好的體驗。WebGL也不需要安裝渲染插件，因此給動畫的開發(fā)和創(chuàng)作節(jié)約了不少時間。

隨著HTML5的快速發(fā)展，WebGL也將作為一種新的技術(shù)被應用在很多領(lǐng)域，但是并不是所有的瀏覽器都能夠很好地支持WebGL，而且它對顯卡的要求比較高，有些移動設(shè)備在瀏覽的過程中并不是那么流暢，因此還需要人們對這些技術(shù)更好地改進，相信在將來WebGL必將是趨勢所在。

[1] 周陽，佘江峰，唐一鳴. 基于WebGL的三維數(shù)字水利展示系統(tǒng)研究[J].測繪與空間地理信息，2014，37(3)：44-48.

[2] YANAKA K，IIZUKA T. Display method for online bookstore emulating real bookstore by WebGL[J]. Journal of Electronic Science and Technology of China，2014(1)：59-63.

[3] 朱麗萍，李洪奇，杜萌萌，等.基于WebGL的三維 WebGIS 場景實現(xiàn)[J].計算機工程與設(shè)計，2014，35(10):3645-3650.

[4] 張玲.基于WebGL技術(shù)和Oak3D 引擎的交互式三維地球模型研究[J].軟件導刊，2014，13(2)：153-155.

[5] DEMIN A，YUAN D A I. 基于HTML5與WebGL的機器人3D環(huán)境下的運動學仿真[J]. 東北大學學報：自然科學版，2014，35(4)：564-567.

[6] 方強. 基于 WebGL的3D圖形引擎研究與實現(xiàn)[D].合肥：安徽大學，2013.

[7] 方路平，李國鵬，洪文杰，等. 基于WebGL的醫(yī)學圖像三維可視化研究[J].計算機系統(tǒng)應用，2013(9)：25-30.

[8] 譚文文，丁世勇，李桂英. 基于webGL和HTML5的網(wǎng)頁3D 動畫的設(shè)計與實現(xiàn)[J].電腦知識與技術(shù)：學術(shù)交流，2011，7(10)：6981-6983.

責任編輯：許 盈

Creation Platform of Panoramic Interactive Content Based on WebGL

WANG Pan, TIAN Feng

(SchoolofFilmandTVArt&Technology,ShanghaiUniversity，Shanghai200072,China)

In this paper， a creation platform of interactive content in a browser is developed. WebGL is used as graphics engine on the platform. WampServer (Windows Apache, MySQL, PHP) is an integrated development environment. JavaScript and HTML language are used to operate interactively panoramic image in real time. This platform can carry on the real-time rendering of panoramic image and realize good interactive function about hot points. Experiments have proved that this platform and the generated application can run in the computer and mobile client with the browsers supporting WebGL.

WebGL; HTML5; animation; Web service; interactive design

上海市科委“科技創(chuàng)新行動計劃”高新技術(shù)領(lǐng)域項目(14511108202)

TP393

A

10.16280/j.videoe.2015.19.017

2015-04-09

【本文獻信息】王攀，田豐.基于WebGL的全景交互內(nèi)容創(chuàng)作平臺[J].電視技術(shù),2015，39(19).