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

童基均,鄒永勝,余明權(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)

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

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

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

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

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

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

1 系統(tǒng)簡(jiǎn)介

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

1.1 整體介紹

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

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

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

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

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

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

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

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

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

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

2.1 2D繪制

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

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

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

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

算法描述:

2.2 2D動(dòng)畫框架設(shè)計(jì)

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

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

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

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

算法描述:

2.3 3D模型克隆

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

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

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

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

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

2.4 3D動(dòng)畫框架設(shè)計(jì)

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

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

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

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

圖4 JavaScript事件丟棄

2.5 V8 engine的優(yōu)化

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

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

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

3 實(shí)驗(yàn)結(jié)果

3.1 實(shí)驗(yàn)環(huán)境

本實(shí)驗(yà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,實(shí)際下載速度為512 Kbps.

3.2 渲染結(jié)果

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

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

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

表1 加載相同模型帶來的加載時(shí)間差異

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

3.3 交互效果

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

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

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

4 總結(jié)與展望

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

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

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

3紀(jì)慶革,潘志庚,李祥晨. 虛擬現(xiàn)實(shí)在體育仿真中的應(yīng)用綜述. 計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào),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的三維紅色娘子軍動(dòng)畫系統(tǒng)的設(shè)計(jì)與實(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é)報(bào),2014,26(2): 382–388.

10崔濱. 海量數(shù)據(jù)實(shí)時(shí)三維交互式顯示關(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ù)組實(shí)現(xiàn)分析與性能優(yōu)化. 計(jì)算機(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ì)算機(jī)系統(tǒng)應(yīng)用,2017,26(12):78–83. http://www.c-s-a.org.cn/1003-3254/6116.html

浙江省重點(diǎn)研發(fā)計(jì)劃(2015C03023)

2017-03-13; 修改時(shí)間: 2017-04-05; 采用時(shí)間: 2017-04-13