基于互联网的快速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).