基于WebGL的大型團體舞虛擬編排系統①

童基均,鄒永勝,余明權

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

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

基于WebGL的大型團體舞虛擬編排系統①

童基均1,鄒永勝1,余明權2

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

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

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

虛擬編排; Canvas; WebGL; V8 引擎優化

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

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

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

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

1 系統簡介

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

1.1 整體介紹

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

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

1.2 2D路徑輸入系統

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

圖1 虛擬編排系統整體框架圖

1.3 3D虛擬展示系統

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

1.4 系統模塊劃分

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

2 實現關鍵技術

2.1 2D繪制

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

圖2 系統各模塊的關系圖

圖3 2D 繪制的結構層次圖

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

算法描述:

2.2 2D動畫框架設計

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

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

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

此外采用基于事件的監聽機制來獲得動畫完成的通知,當一幀動畫完成后會往事件循環池中發送一個通知,下一幀動畫開始執行的時機也就是上一幀動畫完成.

算法描述:

2.3 3D模型克隆

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

本系統采用3DS MAX制作3D模型,在不影響整體舞臺、人物質量的情況下盡量減少整個模型文件的大小即采用較少3D模型的面數以及分段數. 同時在導出的時候,盡量減少無關、重復信息的出現,例如燈光、plane等信息.

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

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

本系統從多個角度完成對3D模型加載的優化,并取得了較好的效果.

2.4 3D動畫框架設計

這里采用多定時器同步技術來實現3D模型動畫的控制.

首先初始化中央調度定時器、位置定時器、動畫播放定時器、旋轉定時器、旋轉調整定時器. 各個定時器線程之間采取消息機制來實現數據的同步. 中央調度定時器主要負責統籌調度各個定時任務的執行時機,使得每個定時器在指定的時間序列、指定的誤差范圍內實現切換. 位置定時器主要負責整個場景內3D模型的位置切換,保證每個時間序列內每個模型都到達指定的位置. 動畫播放定時器是保證每個3D人物模型都能夠播放各自的指定動畫. 旋轉定時器則主要負責每個關鍵場景下人物模型的轉向,保證每個演員的角度都是正確的. 旋轉調整定時器負責在演員完成轉向后轉向的調整.

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

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

圖4 JavaScript事件丟棄

2.5 V8 engine的優化

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

盡管V8引擎擁有許多優秀的特性,但在編寫本系統時仍針對V8的一些特性進行優化. 例如保證初始化所有對象、同一方向初始化對象成員、避免為數組分配過大的內存等.

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

3 實驗結果

3.1 實驗環境

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

3.2 渲染結果

在上面的章節中,從數據的產生、數據的存儲、數據的傳輸、模型的渲染、素材的加載、代碼執行引擎的優化等角度對本系統做了一些優化. 接下來就來測試下這些優化所帶來的性能上的提高. 依次測試開啟以及關閉這些優化所帶來的加載素材時間以及幀率的差異.

從表1中看出,本系統內置的server擁有較好的性能,能夠大幅較少數據在傳輸過程中的消耗時間,極大的提高了人機交互的實時性.

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

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

表2 演員的數量對幀率影響

3.3 交互效果

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

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

圖5 虛擬編排系統

4 總結與展望

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

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

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

3紀慶革,潘志庚,李祥晨. 虛擬現實在體育仿真中的應用綜述. 計算機輔助設計與圖形學學報,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的三維紅色娘子軍動畫系統的設計與實現[碩士學位論文]. 廣州: 中山大學,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 的人臉模型定制系統. 系統仿真學報,2014,26(2): 382–388.

10崔濱. 海量數據實時三維交互式顯示關鍵技術研究[博士學位論文]. 上海: 上海大學,2010.

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

12劉旭. Chrome V8 引擎中的 JavaScript數組實現分析與性能優化. 計算機與現代化,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

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

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

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