基于互聯網的快速3D戶外動畫創作展示平臺

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

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

基于互聯網的快速3D戶外動畫創作展示平臺

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

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

為實現快速的3D交互展示內容制作，利用WebGL圖像引擎設計了基于互聯網的快速3D內容展示創作平臺。互聯網創作平臺的主要3D功能包括多媒體內容導入和關聯、3D模型配置、3D動畫自動生成、畫筆地圖繪制等。互聯網創作平臺利用Web服務器和PHP，支持瘦客戶端的3D內容創作和HTML應用生成。經本項目聯合參與單位的實際應用，交互動畫設計師在沒有程序員參與的條件下能夠順利完成交互3D內容創作和3D動畫內容快速生成。本創作平臺為互聯網3D展覽展示提供了簡便的設計方案和新的設計模式。最后，在調整本創作平臺的部分功能后能夠滿足城市緊急救援方案3D交互推演和3D動畫生成、戰術方案3D交互推演和3D動畫生成、互聯網3D虛擬展館制作、室內外建筑展示內容制作。

網頁三維技術；虛擬現實；超文本標記語言；互聯網

“互聯網+”行動計劃擬在推動互聯網、物聯網與制造業融合。“互聯網+工業”是“信息共享+物理共享”，從而開創全新的共享經濟，帶動大眾創業和萬眾創新[1]。“互聯網+”也是未來工業4.0的核心內容之一，通過互聯網“智能化”和“個性化”的技術手段，使得個性化產品能夠實現用戶級模塊設計即大規模定制生產。

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

互聯網3D應用是未來各行業特別是仿真展示的必然發展趨勢[9-10]，本文針對當前的互聯網3D制作工具缺乏的現狀，設計了基于互聯網的快速3D內容展示創作平臺，集合多種展覽展示的應用，實現互聯網3D展示的基本創作功能。

1 3D內容創作展示平臺總體框架

本文利用HTML5和WebGL技術構架內容創作和展示平臺，使用的技術包括JS、H5、PHP、CSS，并利用服務器提供在線開發、調試和設計展示。3D內容創作展示平臺包含兩個設計頁面和后臺：設計和操作模塊；預覽和展示模塊；后臺應用生成模塊。設計師和用戶在一致的框架平臺上開展業務，僅使用ID號碼對設計師和最終用戶進行區分。本平臺亦稱為3D自媒體創作平臺，如圖1所示。

圖1 設計師和用戶框架

1.1 設計和操作模塊

設計操作模塊完成用戶創作過程的錄入，如圖2所示。其采用CCS框架，實現了窗簾式菜單功能。具體流程包括服務器PHP功能啟動、新應用名稱設置、3D模型序列導入、各模型平移和旋轉設定、運動比例設定、相機位姿保存、相機目標設定、目標模型的關聯圖像和視頻設定、飛行動畫啟動。

圖2 3D富媒體設計和操作流程

設計和操作模塊為人機交互界面，對應的是頁面的左邊欄，它提供菜單功能，提供3D設計任務的完成流程，所有實施的任務都在預覽和展示模塊內完成。

1.2 預覽和展示模塊

展覽展示中通常需要用到多達數十個模型來創作并合成應用場景。設計過程中對每次導入模型進行操作序列編號。Model[]為模型索引序列，Number是導入模型技術器。

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

Model[Number]=object;

地圖導入通過對平面的貼圖來展現。首先生成平面幾何體geometry，然后導入貼圖file，接著生成貼圖材質，包括顏色、貼圖坐標、透明度等參數，定義地圖平面三維坐標后添加幾何體geometry到場景scene中(見圖3)。

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

各模型導入后，需對它們設置三軸位移量和旋轉縮放量。通過設計操作模塊的按鈕來選擇待編輯的模型，根據設計師需要布置各參數并保存。各模型位姿保存后或單個模型保存后，即可通過設計操作模塊的按鈕來選擇待編輯的模型，對主體模型進行圖像、視頻、超鏈接、360圖像序列等富媒體元素的關聯(見圖4)。關聯方法為：

Files[Number]= Image;

Videos[Number]=Video;

Webs[Number]=Web;

Files360[Number]=FilesOne360。

圖4 3D模型位姿設定和富媒體關聯(截圖)

在用戶特定操作時能夠繪制關聯圖像、播放關聯視頻和360度序列幀圖像。

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

圖5 畫筆功能工作流程

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

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

動畫生成模塊的功能是連接各節點相機已保存的機位，對相機的XYZ位置和目標朝向進行插值計算，能夠在展示動畫播放時設定相機的運動軌跡。Camera.position為當前相機位置，LastCamera.position為上個節點的相機位置，LastHot.position為上一節點的觀察目標位置，對相機位置和觀察位置進行連續插值，實現飛行動畫的功能。

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

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

1.3 后臺應用生成模塊

當按下啟動后臺PHP功能的按鈕時，后臺程序開始執行，如圖7所示。首先獲取需保存的html5變量值，然后打開參考Ref文件并新建APP應用文件，接著把獲取的變量值替換到Ref文件中預定的位置并拷貝到Ref文件，完成后關閉Ref文件和APP文件，最后下載APP文件并開始用戶測試。

圖7 APP生成的流程

2 實驗和分析

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

3D影視節目需要制作動畫并渲染，其成片過程相對較長，而采用本文制作平臺，交互內容和動畫內容能夠完全統一，通過調整相機路徑和畫筆后能夠快速生成3D演示動畫。

以大型城市防災減災演習為例(見圖8)，在城市核心區域的3D建筑都已制作完畢的條件下，本平臺可直接導入建筑模型。本平臺最大支持1G模型和富媒體素材的導入。本實驗在IBM X1 Carbon超級本(i5；4G內存；2G顯存)上運行。

圖8 3D內容創作平臺試驗操作(截圖)

如表1所示，建筑3D模型大小接近百兆，面數超過百萬個，在導入后能夠滿足平均每秒48幀的實時渲染并保證流暢的用戶體驗。

表1 內容與渲染幀率的關系

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

3 小結

本文實現了基于互聯網的3D交互內容創作平臺，不論是內容設計師還是最終用戶都通過互聯網瘦客戶端來設計或瀏覽富媒體內容。本平臺在3D數據源保密的前提下提供了設計師和觀眾良好的用戶體驗。本創作平臺無需程序員參與設計普通設計師或大眾就能實現3D交互內容的自主創作，大大降低了交互內容開發或動畫生成的難度和周期。

互聯網+高端裝備制造是本文互聯網3D創作平臺的關鍵基因。在未來，本平臺除了在航天展示領域應用外將通過產業化在更多的民品領域中應用。上海車享網個性化汽車定制、上海榮欣裝潢客戶自助設計、上海電視臺緊急事件報道等單位都將成為本平臺的最有價值用戶。

[1] 王喜文.工業4.0、互聯網+、中國制造2025 中國制造業轉型升級的未來方向[J].國家治理，2015(23)：12-19.

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

[3] 70度產品營銷推廣專家[EB/OL].[2015-01-05].http://www.70c.com/.

[4] 謝嘉成.采掘運裝備虛擬裝配與仿真系統設計及關鍵技術研究[J].系統仿真學報，2015，27(4)：794-802.

[5] DVS3D虛擬設計協同工作平臺[EB/OL].[2014-12-12].http://www.gdi.com.cn/?p=135.

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

[7] 尚煒，寧汝新，劉檢華.復雜機電產品中的柔性線纜裝配過程仿真技術[J].計算機輔助設計與圖形學學報，2012，24(6)：822-831.

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

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

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

田 豐(1976— )，講師，主要研究領域為3D技術；

王 攀(1992— )，碩士生，主要研究領域為電視技術；

徐成杰(1987— )，工程師，主要研究領域為電視技術；

宋健朗(1963— )，研究員，主要研究領域為交互式裝備內容仿真；

孫旻杰(1985— )，工程師，主要研究領域為汽車維修。

責任編輯：許 盈

【本文獻信息】牛妍華，李婷婷，李博.有線電視網絡災備體系研究及方案建議[J].電視技術,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

上海市科委“科技創新行動計劃”高新技術領域項目(14511108200)

TP391.9

A

10.16280/j.videoe.2015.24.011

2015-09-15

【本文獻信息】田豐，王攀，徐成杰，等.基于互聯網的快速3D戶外動畫創作展示平臺[J].電視技術,2015，39(24).