田 豐，王 攀，徐成杰，宋健朗，孫旻杰

(1.上海大學(xué) 影視藝術(shù)技術(shù)學(xué)院 影視工程系，上海 200072；2. 上海航天技術(shù)研究院 上海航天信息研究所，上海 201109；3. 上汽集團(tuán)上海安吉斯巴魯汽車銷售服務(wù)有限公司，上海 200333)

基于互聯(lián)網(wǎng)的快速3D戶外動(dòng)畫創(chuàng)作展示平臺(tái)

田 豐1，王 攀1，徐成杰2，宋健朗2，孫旻杰3

(1.上海大學(xué) 影視藝術(shù)技術(shù)學(xué)院 影視工程系，上海 200072；2. 上海航天技術(shù)研究院 上海航天信息研究所，上海 201109；3. 上汽集團(tuán)上海安吉斯巴魯汽車銷售服務(wù)有限公司，上海 200333)

為實(shí)現(xiàn)快速的3D交互展示內(nèi)容制作，利用WebGL圖像引擎設(shè)計(jì)了基于互聯(lián)網(wǎng)的快速3D內(nèi)容展示創(chuàng)作平臺(tái)?；ヂ?lián)網(wǎng)創(chuàng)作平臺(tái)的主要3D功能包括多媒體內(nèi)容導(dǎo)入和關(guān)聯(lián)、3D模型配置、3D動(dòng)畫自動(dòng)生成、畫筆地圖繪制等?；ヂ?lián)網(wǎng)創(chuàng)作平臺(tái)利用Web服務(wù)器和PHP，支持瘦客戶端的3D內(nèi)容創(chuàng)作和HTML應(yīng)用生成。經(jīng)本項(xiàng)目聯(lián)合參與單位的實(shí)際應(yīng)用，交互動(dòng)畫設(shè)計(jì)師在沒(méi)有程序員參與的條件下能夠順利完成交互3D內(nèi)容創(chuàng)作和3D動(dòng)畫內(nèi)容快速生成。本創(chuàng)作平臺(tái)為互聯(lián)網(wǎng)3D展覽展示提供了簡(jiǎn)便的設(shè)計(jì)方案和新的設(shè)計(jì)模式。最后，在調(diào)整本創(chuàng)作平臺(tái)的部分功能后能夠滿足城市緊急救援方案3D交互推演和3D動(dòng)畫生成、戰(zhàn)術(shù)方案3D交互推演和3D動(dòng)畫生成、互聯(lián)網(wǎng)3D虛擬展館制作、室內(nèi)外建筑展示內(nèi)容制作。

網(wǎng)頁(yè)三維技術(shù)；虛擬現(xiàn)實(shí)；超文本標(biāo)記語(yǔ)言；互聯(lián)網(wǎng)

“互聯(lián)網(wǎng)+”行動(dòng)計(jì)劃擬在推動(dòng)互聯(lián)網(wǎng)、物聯(lián)網(wǎng)與制造業(yè)融合?！盎ヂ?lián)網(wǎng)+工業(yè)”是“信息共享+物理共享”，從而開創(chuàng)全新的共享經(jīng)濟(jì)，帶動(dòng)大眾創(chuàng)業(yè)和萬(wàn)眾創(chuàng)新[1]?！盎ヂ?lián)網(wǎng)+”也是未來(lái)工業(yè)4.0的核心內(nèi)容之一，通過(guò)互聯(lián)網(wǎng)“智能化”和“個(gè)性化”的技術(shù)手段，使得個(gè)性化產(chǎn)品能夠?qū)崿F(xiàn)用戶級(jí)模塊設(shè)計(jì)即大規(guī)模定制生產(chǎn)。

隨著HTML5和WebGL的快速發(fā)展，互聯(lián)網(wǎng)3D技術(shù)將大量應(yīng)用于更多領(lǐng)域，但是3D網(wǎng)頁(yè)設(shè)計(jì)與平面網(wǎng)頁(yè)設(shè)計(jì)有較大不同，它將牽涉到更專業(yè)的圖形和更復(fù)雜的腳本技術(shù)。數(shù)年前，F(xiàn)rontPage、Dreamweaver等網(wǎng)頁(yè)制作軟件是主流網(wǎng)站建設(shè)工具。隨著移動(dòng)互聯(lián)網(wǎng)的高速發(fā)展和自媒體創(chuàng)作的潮流，更多的網(wǎng)頁(yè)通過(guò)簡(jiǎn)易的網(wǎng)絡(luò)創(chuàng)作模板或APP進(jìn)行設(shè)計(jì)。在國(guó)內(nèi)，除了模板類主頁(yè)網(wǎng)站，針對(duì)平面內(nèi)容的個(gè)性化展示已有多家企業(yè)參與研制并推出產(chǎn)品。上海意派Epub360推出基于HTML5的交互設(shè)計(jì)平臺(tái)[2]，北京智云時(shí)代科技有限公司(70度)推出設(shè)計(jì)APP[3]，在無(wú)需程序員參與的前提下，他們都能設(shè)計(jì)出精美的2D交互網(wǎng)頁(yè)。3D圖形技術(shù)已廣泛應(yīng)用于汽車內(nèi)飾用戶自主設(shè)計(jì)展示、室內(nèi)裝修用戶自主設(shè)計(jì)展示、數(shù)字工廠仿真設(shè)計(jì)展示、城市緊急事件救援沙盤仿真、戰(zhàn)術(shù)方案交互推演。然而，交互內(nèi)容設(shè)計(jì)仍普遍使用游戲引擎，而視頻內(nèi)容普遍使用本地3D制作軟件，制作的交互內(nèi)容較難部署于網(wǎng)站[4-5]。國(guó)內(nèi)外，互聯(lián)網(wǎng)3D技術(shù)仍只有局部應(yīng)用，面對(duì)大量的互聯(lián)網(wǎng)3D展示和交互推演業(yè)務(wù)，并沒(méi)有簡(jiǎn)單的線上創(chuàng)作工具可用[6-8]。

互聯(lián)網(wǎng)3D應(yīng)用是未來(lái)各行業(yè)特別是仿真展示的必然發(fā)展趨勢(shì)[9-10]，本文針對(duì)當(dāng)前的互聯(lián)網(wǎng)3D制作工具缺乏的現(xiàn)狀，設(shè)計(jì)了基于互聯(lián)網(wǎng)的快速3D內(nèi)容展示創(chuàng)作平臺(tái)，集合多種展覽展示的應(yīng)用，實(shí)現(xiàn)互聯(lián)網(wǎng)3D展示的基本創(chuàng)作功能。

1 3D內(nèi)容創(chuàng)作展示平臺(tái)總體框架

本文利用HTML5和WebGL技術(shù)構(gòu)架內(nèi)容創(chuàng)作和展示平臺(tái)，使用的技術(shù)包括JS、H5、PHP、CSS，并利用服務(wù)器提供在線開發(fā)、調(diào)試和設(shè)計(jì)展示。3D內(nèi)容創(chuàng)作展示平臺(tái)包含兩個(gè)設(shè)計(jì)頁(yè)面和后臺(tái)：設(shè)計(jì)和操作模塊；預(yù)覽和展示模塊；后臺(tái)應(yīng)用生成模塊。設(shè)計(jì)師和用戶在一致的框架平臺(tái)上開展業(yè)務(wù)，僅使用ID號(hào)碼對(duì)設(shè)計(jì)師和最終用戶進(jìn)行區(qū)分。本平臺(tái)亦稱為3D自媒體創(chuàng)作平臺(tái)，如圖1所示。

圖1 設(shè)計(jì)師和用戶框架

1.1 設(shè)計(jì)和操作模塊

設(shè)計(jì)操作模塊完成用戶創(chuàng)作過(guò)程的錄入，如圖2所示。其采用CCS框架，實(shí)現(xiàn)了窗簾式菜單功能。具體流程包括服務(wù)器PHP功能啟動(dòng)、新應(yīng)用名稱設(shè)置、3D模型序列導(dǎo)入、各模型平移和旋轉(zhuǎn)設(shè)定、運(yùn)動(dòng)比例設(shè)定、相機(jī)位姿保存、相機(jī)目標(biāo)設(shè)定、目標(biāo)模型的關(guān)聯(lián)圖像和視頻設(shè)定、飛行動(dòng)畫啟動(dòng)。

圖2 3D富媒體設(shè)計(jì)和操作流程

設(shè)計(jì)和操作模塊為人機(jī)交互界面，對(duì)應(yīng)的是頁(yè)面的左邊欄，它提供菜單功能，提供3D設(shè)計(jì)任務(wù)的完成流程，所有實(shí)施的任務(wù)都在預(yù)覽和展示模塊內(nèi)完成。

1.2 預(yù)覽和展示模塊

展覽展示中通常需要用到多達(dá)數(shù)十個(gè)模型來(lái)創(chuàng)作并合成應(yīng)用場(chǎng)景。設(shè)計(jì)過(guò)程中對(duì)每次導(dǎo)入模型進(jìn)行操作序列編號(hào)。Model[]為模型索引序列，Number是導(dǎo)入模型技術(shù)器。

loader.load( 'obj/'+file, 'obj/'+file.substr(0, file.length-4)+'.mtl', onLoad, onProgress );

Model[Number]=object;

地圖導(dǎo)入通過(guò)對(duì)平面的貼圖來(lái)展現(xiàn)。首先生成平面幾何體geometry，然后導(dǎo)入貼圖file，接著生成貼圖材質(zhì)，包括顏色、貼圖坐標(biāo)、透明度等參數(shù)，定義地圖平面三維坐標(biāo)后添加幾何體geometry到場(chǎng)景scene中(見圖3)。

圖3 3D模型序列導(dǎo)入(截圖)

各模型導(dǎo)入后，需對(duì)它們?cè)O(shè)置三軸位移量和旋轉(zhuǎn)縮放量。通過(guò)設(shè)計(jì)操作模塊的按鈕來(lái)選擇待編輯的模型，根據(jù)設(shè)計(jì)師需要布置各參數(shù)并保存。各模型位姿保存后或單個(gè)模型保存后，即可通過(guò)設(shè)計(jì)操作模塊的按鈕來(lái)選擇待編輯的模型，對(duì)主體模型進(jìn)行圖像、視頻、超鏈接、360圖像序列等富媒體元素的關(guān)聯(lián)(見圖4)。關(guān)聯(lián)方法為：

Files[Number]= Image;

Videos[Number]=Video;

Webs[Number]=Web;

Files360[Number]=FilesOne360。

圖4 3D模型位姿設(shè)定和富媒體關(guān)聯(lián)(截圖)

在用戶特定操作時(shí)能夠繪制關(guān)聯(lián)圖像、播放關(guān)聯(lián)視頻和360度序列幀圖像。

設(shè)計(jì)和操作模塊具有標(biāo)準(zhǔn)RGB顏色選取子模塊，通過(guò)此模塊的24位顏色傳遞和材質(zhì)貼圖選定，預(yù)覽和展示模塊能夠根據(jù)選定的顏色、材質(zhì)、貼圖來(lái)生成新材質(zhì)，此功能為設(shè)計(jì)師編輯場(chǎng)景色彩和材質(zhì)提供了便利。3D模型導(dǎo)入、位姿編輯、富媒體掛載、材質(zhì)顏色編輯后已基本滿足互聯(lián)網(wǎng)3D內(nèi)容展示的功能，能夠生產(chǎn)的內(nèi)容包括3D室內(nèi)裝潢交互展示、室外建筑交互展示、虛擬博物館展示、各類產(chǎn)品銷售展示等功能。針對(duì)城市緊急救援方案3D交互推演和3D動(dòng)畫生成、戰(zhàn)術(shù)方案3D交互推演和3D動(dòng)畫生成等功能，本文設(shè)計(jì)了地圖交互繪制功能。交互繪制功能便于用戶任務(wù)組交流和討論，同時(shí)利用3D展示功能快速?zèng)Q策預(yù)定方案。畫筆功能工作流程如圖5所示。

圖5 畫筆功能工作流程

地圖畫筆繪制結(jié)果如圖6所示，能夠繪制任意線條圖形。

圖6 地圖畫筆繪制(截圖)

動(dòng)畫生成模塊的功能是連接各節(jié)點(diǎn)相機(jī)已保存的機(jī)位，對(duì)相機(jī)的XYZ位置和目標(biāo)朝向進(jìn)行插值計(jì)算，能夠在展示動(dòng)畫播放時(shí)設(shè)定相機(jī)的運(yùn)動(dòng)軌跡。Camera.position為當(dāng)前相機(jī)位置，LastCamera.position為上個(gè)節(jié)點(diǎn)的相機(jī)位置，LastHot.position為上一節(jié)點(diǎn)的觀察目標(biāo)位置，對(duì)相機(jī)位置和觀察位置進(jìn)行連續(xù)插值，實(shí)現(xiàn)飛行動(dòng)畫的功能。

Camera.position=LastCamera.position+(NextCamera.position-LastCamera.position)/Step;

Camera.lootAt(LastHot.position+(NextHot.position-LastHot.position)/Step);

1.3 后臺(tái)應(yīng)用生成模塊

當(dāng)按下啟動(dòng)后臺(tái)PHP功能的按鈕時(shí)，后臺(tái)程序開始執(zhí)行，如圖7所示。首先獲取需保存的html5變量值，然后打開參考Ref文件并新建APP應(yīng)用文件，接著把獲取的變量值替換到Ref文件中預(yù)定的位置并拷貝到Ref文件，完成后關(guān)閉Ref文件和APP文件，最后下載APP文件并開始用戶測(cè)試。

圖7 APP生成的流程

2 實(shí)驗(yàn)和分析

多數(shù)傳統(tǒng)行業(yè)不設(shè)立IT研發(fā)部門，互聯(lián)網(wǎng)開發(fā)和展示軟件開發(fā)都將外包給小型IT企業(yè)。交互3D展覽展示作為有效的商業(yè)廣告手段已獲得了廣大用戶的認(rèn)可。多數(shù)用戶要制作交互3D展示和仿真必須依托專業(yè)多媒體IT制作公司。而用戶的富媒體素材多是企業(yè)內(nèi)部材料，屬于核心資產(chǎn)，原始3D設(shè)計(jì)數(shù)據(jù)不便外發(fā)，這是目前交互3D內(nèi)容沒(méi)有大范圍普及的主要原因。

3D影視節(jié)目需要制作動(dòng)畫并渲染，其成片過(guò)程相對(duì)較長(zhǎng)，而采用本文制作平臺(tái)，交互內(nèi)容和動(dòng)畫內(nèi)容能夠完全統(tǒng)一，通過(guò)調(diào)整相機(jī)路徑和畫筆后能夠快速生成3D演示動(dòng)畫。

以大型城市防災(zāi)減災(zāi)演習(xí)為例(見圖8)，在城市核心區(qū)域的3D建筑都已制作完畢的條件下，本平臺(tái)可直接導(dǎo)入建筑模型。本平臺(tái)最大支持1G模型和富媒體素材的導(dǎo)入。本實(shí)驗(yàn)在IBM X1 Carbon超級(jí)本(i5；4G內(nèi)存；2G顯存)上運(yùn)行。

圖8 3D內(nèi)容創(chuàng)作平臺(tái)試驗(yàn)操作(截圖)

如表1所示，建筑3D模型大小接近百兆，面數(shù)超過(guò)百萬(wàn)個(gè)，在導(dǎo)入后能夠滿足平均每秒48幀的實(shí)時(shí)渲染并保證流暢的用戶體驗(yàn)。

表1 內(nèi)容與渲染幀率的關(guān)系

文件大小/Mbyte頂點(diǎn)數(shù)/104面數(shù)/104幀率/(f·s-1)48355659～6050316358～60876811038～58

3 小結(jié)

本文實(shí)現(xiàn)了基于互聯(lián)網(wǎng)的3D交互內(nèi)容創(chuàng)作平臺(tái)，不論是內(nèi)容設(shè)計(jì)師還是最終用戶都通過(guò)互聯(lián)網(wǎng)瘦客戶端來(lái)設(shè)計(jì)或?yàn)g覽富媒體內(nèi)容。本平臺(tái)在3D數(shù)據(jù)源保密的前提下提供了設(shè)計(jì)師和觀眾良好的用戶體驗(yàn)。本創(chuàng)作平臺(tái)無(wú)需程序員參與設(shè)計(jì)普通設(shè)計(jì)師或大眾就能實(shí)現(xiàn)3D交互內(nèi)容的自主創(chuàng)作，大大降低了交互內(nèi)容開發(fā)或動(dòng)畫生成的難度和周期。

互聯(lián)網(wǎng)+高端裝備制造是本文互聯(lián)網(wǎng)3D創(chuàng)作平臺(tái)的關(guān)鍵基因。在未來(lái)，本平臺(tái)除了在航天展示領(lǐng)域應(yīng)用外將通過(guò)產(chǎn)業(yè)化在更多的民品領(lǐng)域中應(yīng)用。上海車享網(wǎng)個(gè)性化汽車定制、上海榮欣裝潢客戶自助設(shè)計(jì)、上海電視臺(tái)緊急事件報(bào)道等單位都將成為本平臺(tái)的最有價(jià)值用戶。

[1] 王喜文.工業(yè)4.0、互聯(lián)網(wǎng)+、中國(guó)制造2025 中國(guó)制造業(yè)轉(zhuǎn)型升級(jí)的未來(lái)方向[J].國(guó)家治理，2015(23)：12-19.

[2] Epub360意派H5交互設(shè)計(jì)利器[EB/OL].[2015-01-05].http://www.epub360.com/.

[3] 70度產(chǎn)品營(yíng)銷推廣專家[EB/OL].[2015-01-05].http://www.70c.com/.

[4] 謝嘉成.采掘運(yùn)裝備虛擬裝配與仿真系統(tǒng)設(shè)計(jì)及關(guān)鍵技術(shù)研究[J].系統(tǒng)仿真學(xué)報(bào)，2015，27(4)：794-802.

[5] DVS3D虛擬設(shè)計(jì)協(xié)同工作平臺(tái)[EB/OL].[2014-12-12].http://www.gdi.com.cn/?p=135.

[6] 談敦銘，趙罡.面向裝配的飛行器超大模型實(shí)時(shí)可視化技術(shù)[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，2012，24(5)：590-596.

[7] 尚煒，寧汝新，劉檢華.復(fù)雜機(jī)電產(chǎn)品中的柔性線纜裝配過(guò)程仿真技術(shù)[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，2012，24(6)：822-831.

[8] 朱麗萍，趙罡. 面向裝配的飛行器超大模型實(shí)時(shí)可視化技術(shù)[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，2013，25(3)：425-432.

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

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

田 豐(1976— )，講師，主要研究領(lǐng)域?yàn)?D技術(shù)；

王 攀(1992— )，碩士生，主要研究領(lǐng)域?yàn)殡娨暭夹g(shù)；

徐成杰(1987— )，工程師，主要研究領(lǐng)域?yàn)殡娨暭夹g(shù)；

宋健朗(1963— )，研究員，主要研究領(lǐng)域?yàn)榻换ナ窖b備內(nèi)容仿真；

孫旻杰(1985— )，工程師，主要研究領(lǐng)域?yàn)槠嚲S修。

責(zé)任編輯：許 盈

【本文獻(xiàn)信息】牛妍華，李婷婷，李博.有線電視網(wǎng)絡(luò)災(zāi)備體系研究及方案建議[J].電視技術(shù),2015，39(24).

Rapid 3D Design and Exhibition Tools Based on Internet

TIAN Feng1, WANG Pan1, XU Chengjie2, SONG Jianlang2, SUN Minjie3

(1.InstituteofFilm&TVArtsandTechnology，ShanghaiUniversity，Shanghai200072,China；2.ShanghaiAcademyofSpaceflightTechnology，Shanghai201109,China；3.SAICMotorCorporation，Shanghai200333,China)

To achieve fast 3D interactive display creation, 3D display platform is designed by using WebGL graphics engine based on Internet. The main 3D features of online creation include multimedia content for import and relevance, 3D model configuration, 3D animation automatic generation, brushes mapping and etc. By using Web server and PHP，the Internet platform supports 3D content creation and HTML generation. Through the actual application by joint participation units of the project, interactive animation designers without programmer can complete the interactive 3D content creation successfully and generate 3D animations quickly. The platform provides a simple design and a new design patterns for Internet 3D exhibition. Finally, some features of this platform are adjusted to meet 3D interactive deduction of city emergency rescue plan and tactical program and 3D animation generation, 3D interactive deduction of tactical plan and 3D animation generation, Internet 3D virtual pavilion production, indoor and outdoor display content production.

Web3D; virtual reality; HTML; Internet

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

TP391.9

A

10.16280/j.videoe.2015.24.011

2015-09-15

【本文獻(xiàn)信息】田豐，王攀，徐成杰，等.基于互聯(lián)網(wǎng)的快速3D戶外動(dòng)畫創(chuàng)作展示平臺(tái)[J].電視技術(shù),2015，39(24).