童基均,鄒永勝,余明權(quán)

1(浙江理工大學(xué) 信息學(xué)院,杭州 310018)

2(浙江理工大學(xué) 體育教研部,杭州 310018)

基于WebGL的大型團(tuán)體舞虛擬編排系統(tǒng)①

童基均1,鄒永勝1,余明權(quán)2

1(浙江理工大學(xué) 信息學(xué)院,杭州 310018)

2(浙江理工大學(xué) 體育教研部,杭州 310018)

隨著中國演藝市場規(guī)模的不斷發(fā)展,演出市場的演出場次和觀眾人數(shù)不斷增加,對演出排練的質(zhì)量要求逐漸提高. 開發(fā)一個虛擬編排系統(tǒng)具有重要的價值和意義. 本文研究開發(fā)一個適用于中大規(guī)模演出的虛擬編排系統(tǒng),通過對基于WebGL的虛擬編排系統(tǒng)關(guān)鍵技術(shù)的研究,提出了模型文件壓縮、預(yù)加載、內(nèi)嵌server、優(yōu)化v8引擎等方法,使得大規(guī)模虛擬排練系統(tǒng)得以流暢的運行,同時利用WebGL技術(shù)實現(xiàn)三維模型的創(chuàng)建、渲染,使得用戶能夠直接在本系統(tǒng)中完成大型排練的所有過程,具有良好的應(yīng)用前景.

虛擬編排; Canvas; WebGL; V8 引擎優(yōu)化

團(tuán)體操是一種體育和藝術(shù)高度結(jié)合、以體操動作為主的群眾性體育表演項目[1]. 它由幾十人、幾百人以至成千上萬人,在大的場(館)中通過以體操為主體的各色各樣的體育、文藝形式和隊形變化、圖案造型,配以音樂、道具、服裝,以至背景、場景(舞臺)和燈光等藝術(shù)裝飾所構(gòu)成的體育藝術(shù)性的集體表演項目[2].團(tuán)體操設(shè)計和排練是一件非常煩瑣、耗時的工作. 虛擬現(xiàn)實技術(shù)在體育仿真中具有很好的應(yīng)用前景[3],將虛擬人群仿真技術(shù)應(yīng)用于團(tuán)體操設(shè)計和演練,可以提高設(shè)計和排練質(zhì)量,提高設(shè)計人員和排練人員的工作效率. 團(tuán)體操編排和演練仿真涉及到大量的虛擬人群運動、動作及隊列編排,其關(guān)鍵技術(shù)為大規(guī)模場景的實時繪制、人物的建模、路徑輸入等.

目前關(guān)于虛擬人群仿真[4,5]主要是通過一些軟件或者插件來制作,比如美國的Vital Idea公司的Crowd;Discreet 3D Max 的插件 Crowdit; Avid 的 SoftImage Behavior. 但是這些軟件均有一些不足,無法串聯(lián)整個團(tuán)體舞的編排過程,僅僅能完成其中的一個步驟. 因此本文從編排的數(shù)據(jù)輸入出發(fā),串聯(lián)了整個虛擬編排的過程,極大地提高整個編排的效率.

WebGL[6](Web graphics library)是專門為 Web 設(shè)計的底層圖形編程API,將瀏覽器和GPU緊密的聯(lián)系在了一起. 這樣開發(fā)人員即可借助GPU在瀏覽器里更流暢地展示3D場景和模型,創(chuàng)建復(fù)雜的3D展示系統(tǒng).

針對虛擬排練用戶群體數(shù)量大、排練路徑數(shù)據(jù)多、實時響應(yīng)性要求高的需求,目前國內(nèi)關(guān)于WebGL相關(guān)的產(chǎn)品較少,資源相對匱乏. 本文采用WebGL將傳統(tǒng)的大型排練與計算機(jī)相結(jié)合[7],極大地提高了排練的效率,它能將演員的走位效果實時的展現(xiàn)出來,更加方便導(dǎo)演及時調(diào)整演員的走位信息,使得導(dǎo)演能夠充分發(fā)揮自己的想象力,對于自己的編排有一個直觀的認(rèn)識,具有很好的研究意義和應(yīng)用前景.

1 系統(tǒng)簡介

本系統(tǒng)主要主要借助HTML5[8]中的Canvas元素,主要分為2D路徑輸入系統(tǒng)以及3D虛擬展示系統(tǒng).2D路徑輸入系統(tǒng)主要職責(zé)就是收集所有演員在所有幀的數(shù)據(jù),然后導(dǎo)出至指定格式的文件,將文件傳遞到3D平臺,3D平臺會自動生成對應(yīng)的3D模型以及動畫,此外用戶還可以修改表演場景的舞臺、天空、特效、以及音樂.

1.1 整體介紹

系統(tǒng)會根據(jù)用戶輸入的配置信息自動生成2D舞臺,隨后導(dǎo)演就可以放置關(guān)鍵幀上所有的演員,當(dāng)所有關(guān)鍵幀的數(shù)據(jù)全部輸入完畢后,即可形成2D平臺的動畫. 此外,用戶如果不滿意當(dāng)前設(shè)計方案,可以重新開始設(shè)計路線.

關(guān)鍵用戶數(shù)據(jù)生成后,3D平臺根據(jù)這些數(shù)據(jù)完成3D人物模型的建模,生成路徑動畫. 此外用戶還能夠添加上燈光、煙霧、地面、天空、音樂等控制,增強用戶對自己設(shè)計方案的感官認(rèn)識. 圖1為虛擬編排系統(tǒng)總體框圖.

1.2 2D路徑輸入系統(tǒng)

本子系統(tǒng)主要負(fù)責(zé)收集導(dǎo)演的靈感,采用技術(shù)為HTML5 中 Canvas元素的 2D context. 系統(tǒng)采用棋盤的方式模擬表演的場景,采用帶顏色的正方形方格來模擬模型人物. 當(dāng)用戶輸入場景的寬度、高度、人物的個數(shù)等基本信息后,本子系統(tǒng)會動態(tài)生成一張網(wǎng)格,然后用戶就可以在此背景上進(jìn)行布局,此外本系統(tǒng)還擁有較好的錯誤提示,當(dāng)用戶放置的人數(shù)超過預(yù)設(shè)人數(shù)或者是在移動人物位置過程中產(chǎn)生重疊,會提示用戶輸入有誤請重新調(diào)整.

圖1 虛擬編排系統(tǒng)整體框架圖

1.3 3D虛擬展示系統(tǒng)

本系統(tǒng)負(fù)責(zé)將前面的2D平臺數(shù)據(jù)轉(zhuǎn)化為3D人物模型,并進(jìn)行3D動畫展示. 采用的技術(shù)是HTML5中Canvas元素的3D context-WebGL. 每次只繪制一次人物模型,然后再從此基礎(chǔ)上克隆出指定數(shù)量的人物模型,同時在加載過程中采用懶加載技術(shù),這樣有效的提高了整體的加載效率. 對于燈光、地面、天空、音樂等非核心部件的加載則采用按需加載,只有在用戶打開相應(yīng)的開關(guān)時才會去加載相應(yīng)的素材. 這種處理邏輯能夠有效的將原本比較大的模型素材分解為一個個小步驟,有效的提高了系統(tǒng)整體運行的流暢性.

1.4 系統(tǒng)模塊劃分

本系統(tǒng)主要分為如下模塊: 2D場景繪制、2D人物繪制、2D事件處理模塊、2D動畫生成、2D錯誤提示、2D數(shù)據(jù)導(dǎo)出、3D模型加載、3D數(shù)據(jù)導(dǎo)入、3D模型克隆、3D事件處理模塊[9]、3D定時器同步、3D背景音樂控制. 各個模塊之間相互獨立,但是又保持一定的聯(lián)系性. 系統(tǒng)各模塊的的關(guān)系圖如圖2所示.

2 實現(xiàn)關(guān)鍵技術(shù)

2.1 2D繪制

2D繪制主要分為表演舞臺繪制、動畫背景繪制以及人物模型繪制. 整個2D場景繪制采用分層思想.整體的繪制分為 stage、layer、group、shape. 整個2D場景有且僅有一個stage,其下可以有若干layer,每個layer下可以有若干個layer或者是若干個group,每個group下又可以包含若干個group或者是shape. 這種繪制思想極大地提高了場景繪制的可伸縮性、可擴(kuò)展性,有效的提高了整個系統(tǒng)的穩(wěn)定性. 圖3所示為2D繪制的結(jié)構(gòu)層次圖.

圖2 系統(tǒng)各模塊的關(guān)系圖

圖3 2D 繪制的結(jié)構(gòu)層次圖

由于表演場景的大小不固定,所以這里增加了一個收集場景配置信息(場景大小以及演員人數(shù))的頁面. 在獲取數(shù)據(jù)后,即可根據(jù)此參數(shù)動態(tài)的繪制背景.背景的繪制全部集中在背景層,它是由一條條水平線以及豎直線組成的網(wǎng)格. 每條線段是由起點、線長、線寬、線條顏色組成,人物繪制采用一個正方形格子代表每一個演員,每一個演員都是一個類,里面封裝了一些常用的信息,比如演員的坐標(biāo)、演員的id、演員的背景等. 繪制的時候?qū)⒚總€演員當(dāng)作一個group,然后往此group中添加一個指定顏色的正方形格子以及該演員的id,兩者組合代表了一個有效的演員. 在放置的時候,需要判斷此處是否已經(jīng)存在演員,然后才將演員group添加到演員layer上.

算法描述:

2.2 2D動畫框架設(shè)計

本系統(tǒng)采用的是線性動畫,首先在動畫層上繪制出所有的演員,在用戶點擊開始動畫之后將所有的演員添加到動畫層上,同時將之前在演員層的所有演員清空.

動畫的設(shè)計主要有兩個關(guān)鍵點: 一是如何設(shè)計一幀動畫,二是如何監(jiān)聽一幀動畫完成. 這里采用線性動畫以及異步事件監(jiān)聽機(jī)制來解決這兩個問題.

線性動畫實現(xiàn)的關(guān)鍵就是設(shè)計一個關(guān)鍵的動畫類,去區(qū)分以及實現(xiàn)所有演員的動畫. 因此必須把所有的動畫操作全部封裝到一個類中,該類中含有動畫的所有方法以及屬性,這樣保證了在初始化每個演員實例的同時保存了該實例自己的所有狀態(tài).

此外采用基于事件的監(jiān)聽機(jī)制來獲得動畫完成的通知,當(dāng)一幀動畫完成后會往事件循環(huán)池中發(fā)送一個通知,下一幀動畫開始執(zhí)行的時機(jī)也就是上一幀動畫完成.

算法描述:

2.3 3D模型克隆

由于一個人物三維模型的數(shù)據(jù)量較大[10],內(nèi)部包含的信息有Mesh、Skeleton、Material、Animation Frame等,瀏覽器加載一個人物模型的速度取決于加載的網(wǎng)速,在加載的過程中可能會出現(xiàn)很多種情況,例如,加載到一半的時候中斷了,亦或是成功加載但是加載速度過慢、消耗時間過長. 本文從數(shù)據(jù)源、數(shù)據(jù)傳輸、數(shù)據(jù)加載、模型轉(zhuǎn)換多個方向?qū)@種不友善的用戶交互體驗進(jìn)行優(yōu)化,有效的調(diào)度模型數(shù)據(jù),提高渲染效率,保證人機(jī)交互的實時性.

本系統(tǒng)采用3DS MAX制作3D模型,在不影響整體舞臺、人物質(zhì)量的情況下盡量減少整個模型文件的大小即采用較少3D模型的面數(shù)以及分段數(shù). 同時在導(dǎo)出的時候,盡量減少無關(guān)、重復(fù)信息的出現(xiàn),例如燈光、plane等信息.

對于數(shù)據(jù)傳輸過程的優(yōu)化可以從數(shù)據(jù)的請求、傳輸、響應(yīng)三個階段考慮. 在數(shù)據(jù)請求方面采用AJAX(Asynchronous Javascript and XML)技術(shù)來完成數(shù)據(jù)的請求,它以異步的方式發(fā)送請求,而不會阻塞住整個界面的渲染. 在數(shù)據(jù)傳輸方面,為了徹底解決整個模型的加載受限于公網(wǎng)速度的問題,采用的方案是在整個系統(tǒng)中內(nèi)嵌一個小型的服務(wù)器,其主要功能就是轉(zhuǎn)發(fā)文件. 這樣就將模型文件的傳輸由外部公網(wǎng)轉(zhuǎn)化為了系統(tǒng)內(nèi)部的局域網(wǎng).

由于一個普通的人物模型文件依據(jù)人物細(xì)節(jié)的多少普遍在數(shù)十兆以上,這給整個系統(tǒng)帶來了很大的不確定性. 采用的解決方案是預(yù)加載技術(shù),即優(yōu)先加載一些數(shù)據(jù)量小的基礎(chǔ)場景提供給用戶進(jìn)行交互,然后在不阻塞主線程渲染UI的前提下,加載主模型數(shù)據(jù)文件,這樣就在用戶不知情的情況下為用戶加載了關(guān)鍵資源,有效的提高了人機(jī)交互的實時性.

本系統(tǒng)從多個角度完成對3D模型加載的優(yōu)化,并取得了較好的效果.

2.4 3D動畫框架設(shè)計

這里采用多定時器同步技術(shù)來實現(xiàn)3D模型動畫的控制.

首先初始化中央調(diào)度定時器、位置定時器、動畫播放定時器、旋轉(zhuǎn)定時器、旋轉(zhuǎn)調(diào)整定時器. 各個定時器線程之間采取消息機(jī)制來實現(xiàn)數(shù)據(jù)的同步. 中央調(diào)度定時器主要負(fù)責(zé)統(tǒng)籌調(diào)度各個定時任務(wù)的執(zhí)行時機(jī),使得每個定時器在指定的時間序列、指定的誤差范圍內(nèi)實現(xiàn)切換. 位置定時器主要負(fù)責(zé)整個場景內(nèi)3D模型的位置切換,保證每個時間序列內(nèi)每個模型都到達(dá)指定的位置. 動畫播放定時器是保證每個3D人物模型都能夠播放各自的指定動畫. 旋轉(zhuǎn)定時器則主要負(fù)責(zé)每個關(guān)鍵場景下人物模型的轉(zhuǎn)向,保證每個演員的角度都是正確的. 旋轉(zhuǎn)調(diào)整定時器負(fù)責(zé)在演員完成轉(zhuǎn)向后轉(zhuǎn)向的調(diào)整.

這其中最主要的就是如何保證整個時間線流轉(zhuǎn)的精準(zhǔn)性. JavaScript原生的事件機(jī)制可能會拋棄同一事件源的多次觸發(fā)事件中的一個或多個. 如圖4所示.

因此一個高效的中央調(diào)度定時器來掌控整個時間線的調(diào)度是十分必要的. 中央定時器的事件粒度設(shè)置為最大容忍誤差,當(dāng)優(yōu)先級高的事件到達(dá)后,哪怕當(dāng)前事件處理程序未執(zhí)行完也會被中央調(diào)度定時器強制切換到另外一個事件處理函數(shù)執(zhí)行一會,然后再返回繼續(xù)執(zhí)行.這種機(jī)制的存在保證了不會有事件會被丟棄,優(yōu)先級高的能夠得到執(zhí)行,優(yōu)先級低的也能在一定的時間范圍內(nèi)得到執(zhí)行,極大地提高了整個系統(tǒng)的人機(jī)交互的實時性.

圖4 JavaScript事件丟棄

2.5 V8 engine的優(yōu)化

V8[11]是一個由Google開發(fā)的開源JavaScript引擎,被用于 Google Chrome中. V8在運行之前將 JavaScript編譯成了機(jī)器碼,而非解釋執(zhí)行的字節(jié)碼,這樣能更進(jìn)一步的提升性能. 此外,V8還使用了如內(nèi)聯(lián)緩存(inline caching)等方法來提高性能. 在這些優(yōu)秀的特性支持下,JavaScript程序的編譯速度速度媲美二進(jìn)制.

盡管V8引擎擁有許多優(yōu)秀的特性,但在編寫本系統(tǒng)時仍針對V8的一些特性進(jìn)行優(yōu)化. 例如保證初始化所有對象、同一方向初始化對象成員、避免為數(shù)組分配過大的內(nèi)存等.

整個系統(tǒng)的編寫的過程中,從編譯器的層面,嘗試優(yōu)化代碼,并取得了良好的效果,整個系統(tǒng)在人機(jī)交互的實時性方面有了較大的提高.

3 實驗結(jié)果

3.1 實驗環(huán)境

本實驗采用的操作系統(tǒng)是Windows 7; CPU為Intel?Core? i7-2670QM 處理器,主頻 2.2 GHZ,內(nèi)存 8 G,顯卡 Intel?HD Graphics 1 G; 瀏覽器為 Chrome 56; 網(wǎng)絡(luò)帶寬為4M,實際下載速度為512 Kbps.

3.2 渲染結(jié)果

在上面的章節(jié)中,從數(shù)據(jù)的產(chǎn)生、數(shù)據(jù)的存儲、數(shù)據(jù)的傳輸、模型的渲染、素材的加載、代碼執(zhí)行引擎的優(yōu)化等角度對本系統(tǒng)做了一些優(yōu)化. 接下來就來測試下這些優(yōu)化所帶來的性能上的提高. 依次測試開啟以及關(guān)閉這些優(yōu)化所帶來的加載素材時間以及幀率的差異.

從表1中看出,本系統(tǒng)內(nèi)置的server擁有較好的性能,能夠大幅較少數(shù)據(jù)在傳輸過程中的消耗時間,極大的提高了人機(jī)交互的實時性.

從表2中可以看出,本系統(tǒng)采用的模型克隆技術(shù)對于大型團(tuán)體舞這種表演規(guī)模具有較好的實用價值,能夠有效的減少對于物理機(jī)器內(nèi)存的依賴,有利于提高整體運行的穩(wěn)定性. 開啟模型的克隆有效的提高幀率以及減少了內(nèi)存的消耗,對于內(nèi)存以及幀率都有著較好的支持(這里認(rèn)為最低的接受標(biāo)準(zhǔn)為12 fps).

表1 加載相同模型帶來的加載時間差異

表2 演員的數(shù)量對幀率影響

3.3 交互效果

在用戶完成2D平臺的數(shù)據(jù)輸入后,單擊開始動畫,查看2D平臺下自己編排的隊形的展示效果,如圖5(a),如果滿意,即可點查看3D平臺下的效果展示.接著3D平臺會調(diào)用前面導(dǎo)出的數(shù)據(jù),自動生成模型以及加載場景庫. 與此同時還可以使用‘空格’鍵控制音樂的播放; ‘n’鍵切換 歌曲; ‘g’鍵切換地面場景,如圖5(b); ‘f’鍵切換煙霧,如圖5(c); ‘l’鍵切換燈光效果,如圖5(d); ‘上下左右’方向鍵或單擊鼠標(biāo)拖動場景,即可完成對視角的切換; 滑動鼠標(biāo)滾輪放大、縮小場景.

特別的,為了更加逼真的模擬真實的人物,同時還支持了物理碰撞以及重力效果,使得系統(tǒng)整體的使用效果較好.

圖5 虛擬編排系統(tǒng)

4 總結(jié)與展望

本文主要講述了針對于大型團(tuán)體舞排練的研究與實現(xiàn),從2D角度以及3D角度分別提出、設(shè)計了相應(yīng)的技術(shù)方案,該方案能夠較為完美的從多角度展示導(dǎo)演的設(shè)計靈感,極大的還原設(shè)計效果. 在整個設(shè)計過程中,從輸入到處理到輸出,分別提出了相應(yīng)的優(yōu)化方案,使得整個系統(tǒng)使用起來十分流暢,極大的提高了導(dǎo)演在設(shè)計時的效率. 但是現(xiàn)階段整個編排系統(tǒng)還不是那么完善,還有很多值得優(yōu)化的地方,比如如何減少內(nèi)存的占用、如何讓GPU更多的參與整個繪制的過程等. 相信隨著后續(xù)算法、技術(shù)上的不斷優(yōu)化,整個系統(tǒng)會變得更加的完美.

1鞏凌. 計算機(jī)輔助團(tuán)體操隊形圖設(shè)計的初步研究. 北京體育師范學(xué)院學(xué)報,1993,5(1): 59–62.

2黃寬柔. 我國團(tuán)體操的發(fā)展與展望. 體育科學(xué)學(xué)會學(xué)報(體育科學(xué)),1994,14(1): 29–32.

3紀(jì)慶革,潘志庚,李祥晨. 虛擬現(xiàn)實在體育仿真中的應(yīng)用綜述. 計算機(jī)輔助設(shè)計與圖形學(xué)學(xué)報,2003,15(11): 1333–1338. [doi: 10.3321/j.issn:1003-9775.2003.11.001]

4Murakami Y,Ishida T,Kawasoe T,et al. Scenario description for multi-agent simulation. Proc. of the 2nd International Joint Conference on Autonomous Agents and Multiagent Systems. Melbourne,Australia. 2003. 369–376.

5Tecchia F,Loscos C,Chrysanthou Y. Visualizing crowds in real-time. Computer Graphics Forum,2002,21(4): 753–765.[doi: 10.1111/cgf.2002.21.issue-4]

6Marrin C. WebGL specification. Khronos WebGL Working Group. https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html. [2011].

7黎瑞成. 基于WEBGL和HTML5的三維紅色娘子軍動畫系統(tǒng)的設(shè)計與實現(xiàn)[碩士學(xué)位論文]. 廣州: 中山大學(xué),2015.

8HTML 5: A vocabulary and associated APIS for HTML and XHTML. W3C Working Draft. https://www.w3.org/TR/2012/WD-html5-20120329/. [2012-03-29/2012-07-30].

9陳滔滔,江曉宇,溫佩賢,等. 基于 Web3D 的人臉模型定制系統(tǒng). 系統(tǒng)仿真學(xué)報,2014,26(2): 382–388.

10崔濱. 海量數(shù)據(jù)實時三維交互式顯示關(guān)鍵技術(shù)研究[博士學(xué)位論文]. 上海: 上海大學(xué),2010.

11Seth Thompson. Introduction,1 revision. https:/github./com/v8/v8/wiki/Introduction. [2015-11-26].

12劉旭. Chrome V8 引擎中的 JavaScript數(shù)組實現(xiàn)分析與性能優(yōu)化. 計算機(jī)與現(xiàn)代化,2014,(10): 66–70. [doi: 10.3969/j.issn.1006-2475.2014.10.016]

Virtual Choreography System of Group Dancing Based on WebGL

TONG Ji-Jun1,ZOU Yong-Sheng1,YU Ming-Quan2

1(School of Informatics,Zhejiang Sci-Tech University,Hangzhou 310018,China)
2(Department of Physical Education and Teaching,Zhejiang Sci-Tech University,Hangzhou 310018,China)

With the booming of performing arts in China,which is obviously embodied in the increasing number of performances and audiences,and the requirement of performance quality is increasing. Therefore,a virtual choreography system becomes particularly important with great value and significance. This paper aims to explore and develop a virtual choreography system for medium-scale and large-scale performances. By doing research on the key technology of the virtual choreography system based on WebGL,we put forward a series of methods including file compression,preloading,embedded server and v8 engine optimization,which can help assure the smooth operation of the system.Meanwhile,we adopt WebGL to achieve the creation and rendering of three-dimensional models so that users can directly complete the whole process of large-scale rehearsals in the system. It has great prospect.

virtual choreography; Canvas; WebGL; V8 engine optimization

童基均,鄒永勝,余明權(quán).基于 WebGL 的大型團(tuán)體舞虛擬編排系統(tǒng).計算機(jī)系統(tǒng)應(yīng)用,2017,26(12):78–83. http://www.c-s-a.org.cn/1003-3254/6116.html

浙江省重點研發(fā)計劃(2015C03023)

2017-03-13; 修改時間: 2017-04-05; 采用時間: 2017-04-13