首页 热点资讯 义务教育 高等教育 出国留学 考研考公
您的当前位置:首页正文

一种AR互动大屏开发中的透明视频播放技术

2021-08-05 来源:化拓教育网
第34卷第5期 2017年 10月 贵州大学学报(自然科学版) Journal of Guizhou University(Natural Sciences) Vo1.34 No.5 0ct.2017 文章编号1000-5269(2017)05-0088—05 一种AR互动大屏开发中的 透明视频播放技术 魏三强 (1.宿州职业技术学院计算机信息系,安徽宿州234101;2.中国矿业大学信息与控制工程学院,江苏徐州221116) 摘 要:为了更好地实现AR互动大屏开发中透明视频的播放,提出在Unity 3D中实现透明视频 的播放技术:首先使用AE软件制作带Alpha通道的视频,接着使用c#语言编写可播放透明视频 的Shader,最后在Unity 3D中开启摄像头实现互动大屏的视频播放。测试结果表明:既能够看到 透明视频中的真实世界,又能够看到虚拟的影像,从而实现了AR大屏互动。 关键词:AR互动大屏;透明视频;After Effects;Unity 3D;C#脚本 中图分类号:TP391 文献标识码:B 互动大屏是AR(“Augmented Reality”的缩写, 1 技术基础 1.1 AR技术简介 即增强现实)中较为常见的应用方式。它能够吸引 广大消费者的眼球,增加人气。利用人机互动而参 AR是一种实时计算摄像机影像的位置和角度 并加上相应图像的技术,该技术的目标是在屏幕上 把虚拟世界嵌套在现实世界中并进行互动 』。AR 技术在工业中的应用实例已有不少,当前主要用于 大型机械的制造和维修。另外,AR技术在教 育 ]、游戏 ]、医疗、军事、博物馆 、房产、景 区 等多个领域的应用同样很多。 1.2 AR互动大屏的原理与应用 与其中,在趣味体验之余还能够分享互动 J,它是 商家促销活动中的一种良好的营销策略和营销手 段。在AR互动大屏的开发过程中,时常会用到透 明视频的播放。例如,在某商场里的合适位置安放 一块大屏幕,平时看上去很像一面普通的镜子,而 实际上该大屏幕背后的主机连接了摄像头,屏幕上 显示的只是摄像头拍摄到的画面,当人靠近屏幕或 者摄像头捕捉到人的图像和动作时,就能够生成虚 拟的人物,如美女或帅哥明星。对于观众来说,当 AR互动大屏是运用AR技术,通过计算机生 成一种逼真的视觉、听觉、力、触和动等感觉的虚拟 他看向屏幕的时候,会以为明星真的出现在自己身 旁,但实际上这只是一个“美丽的错觉”而已。这 也正是AR互动大屏开发中的透明视频的播放魅 力所在0 。目前,国内外学者们针对AR互动大屏 开发中的透明视频的实现技术而展开的专项学术 环境,再利用各种传感设备让用户“沉浸于”该环 境中,实现用户和环境的自然交互(一种AR互动 大屏的体验视频网址:http://unity.jb51.net/case/ y0uxizhanshi/901.htm1)。AR互动大屏广泛应用于 主题产品销售、游戏互动、人和动物互动(如图1所 示)、特定人物互动合影、角色代入和品牌产品试穿 体验等活动中¨9 J。 1.3 After Effects和Unity 3D软件 研究甚少。鉴于此,本文为了更好地实现AR互动 大屏开发中透明视频的播放,拟探讨如何使用Af. ter Effects、Unity 3D等软件及c#语言编程实现透 明视频的播放技术。 收稿日期:2017—06-12 After Effects(简称AE)是一款视频合成与特效 制作软件。从高端的影视,到大众的多媒体、网络 基金项目:国家自然科学基金资助项目(61572036);安徽省高校省级自然科学基金重点项目(K.12016A781) 作者简介:魏三强(1980一),男,副教授,博士研究生,研究方向:云计算、动漫制作技术、VR与AR技术等,Email:weiwei19801983@163.tom 通讯作者:魏三强,Email:weiwei19801983@163.corn. 筇5期 魏三强:一种AI{ f 动大屏7F发巾的透fJiJ视频播放技术 ・89- 图1 AR互动大屏应用实例 动画等领域都有大量的应用。AE的工作流程主要 分为六个步骤:(1)导入和组织素材;(2)创建合 成;(3)在合成中放置叠加素材层或创建视觉元素 层;(4)修改图层属性和为其制作动画;(5)添加效 果并修改效果属性;(6)渲染和1导 ” Unity 3D是一款让玩家可以怏捷地创建例如 维游戏、实时三维动嘶的游戏开发工具,它足一 款 业游戏引擎,如图2所示 当前,Unity 31)已 成为VR/AR项目歼发的主流引擎“。L]|1ity 3D 主要支持的可用作编写游戏脚本代码的 足C# 和JavaScript(本文以c#语言编写脚本) . 豳■圈 图2 iftv 31)游戏引擎 2 一种透明视频播放技术的实现 AR 动大屏【f1透明视频播放技术的实现t-.要 包括 个步骤:使j{j AE软件制作带Alpha通道的 视频、使用c#编写|,J-播放透明视频的着色器(Sha— )、开启摄像头并实现互动大屏的视频播放 。 2.1 使用AE软件制作带Alpha通道的视频 为了更好地实现透明视频的播放,将视频素材 分为左右两个部分,左边为正常的视频,右边只有 该视频的黑白剪影(如图3所示,“飞舞的蝴蝶”视 频素材)。图中左边的视频会根据右边的剪影进行 透明度的}殳置,最终 示的视频内 只有左边的蝴 蝶 案 图3视频素材 使J{j AE软件制作带Alpha通道的视频的主要 步骤足:(1)在After Effects CC 20l7中新建合成组 (命名为“ 舞的蝴蝶”,像素宽高比240px: 320px),导人一 舞的蝴蝶”视频素材并拖进合成 面,进行素材大小的调整,}【:嘞面居中显示;(2) 复制… 舞的蝴蝶”合成,命名为“ 舞的蝴蝶Al— pha”;(3) 合成中创建一个n色的『占】态层,并拖 至视频素材 层的下面,选择Alpha模式为Alpha Matte“ 舞的蝴蝶”.mov;(4)新建合成组,像素宽 高比480px:320px,目的是将视频宽度放大为原视 频的两倍;(5)将之前的“飞舞的蝴蝶”合成拖至新 “合成”If1,按P键将位置移动为120;再将之前的 “飞舞的蝴蝶Alpha”合成拖至新“合成”中¨ ,按P 键移动为360;(6)将视频渲染输出。 2.2使用cI}编写可播放透明视频的Shader 本小 的主要内容是使jfj C#编写一个Sha— der,用于将2.1小节中的视频按照需要的方式进行 透明度(Alpha)处理。在Unity 3D软件巾新建c# 脚本,命 为PlayMovie并写入如下代码 : public M()vie Fexture testmovie: void Start() testmovie.Play(); Iestmovie.1oop true; f 在Unily 3D场景中新建一个 片(Plane),更 名为movie,将PlayMovie脚本拖L去,同时在Mov— ie Fexture处将视频素材拖上去。接着创建一个 Shader,将其命名为movieshader,再将Shader中原 来的代码鄙删除,然后再写入如下代码 : ShaI1er“ClJstom/shaderMovie” 贵州大学学报(自然科学版) 第34卷 { Properties { } Tags{“Queue”=“Transparent”“Render— rrype”=“Transparent”} CGPROGRAM #pragma surface surf NoLighting alpha ifxed4 LightingN0Lighting(SurfaceOutput P, ifxed3 lightDir,fixed atten){ ifxed4 C; q.rgb=p.Albedo; q.a=p.Alpha; return q; } struct Input { float2 uv—MainTex; }; sampler2DMainTex; —void surf(Input IN,inout SurfaceOutput t) { t.Emission:tex2D(一MainTex, IN.uV—MainTex).rgb: if(IN.uv—MainTex.X>=0.5) { t.Alpha=0: } else { t.Alpha=tex2D(一MainTex, lfoat2(IN.UV—MainTex.X+0.5,IN.uv—MainTex.Y)). rgb; } } ENDCG } } 显示屏从左到右依次是数字0和1,以上代码 的功能是将画面分割为两半,然后再改变各自的透 明通道(Alpha)的值。接着创建一个材质球,命名 为movie,将shadermovie赋给材质球movie,然后把 材质球拖给面片Plane。再将视频拖给材质球,并 调整到合适属性。若视频有声音,则为其添加 AudioSource的组件,并把.ogv格式下的audio文件 拖至AudioClip。最后,点击运行以测试效果,能够 看到最终游戏界面上显示的图像只有蝴蝶的图案, 实现了预期的透明效果 ,如图4所示。 图4透明效果 2.3开启摄像头实现互动大屏的视频播放 直接在Unity 3D中开启摄像头。新建一个脚 本OutCamera,核心代码如下 : using UnityEngine; using System.Collections; using System.Threading; using UnityEngine.UI; public class OutCamera:MonoBehaviour { public RawImage image; public WebCamTexture webTex; public string deviceName; void Start() { StartCoroutine(“CallCamera”); } private void Update() { if(webTex!=nul1) { image.texture webTex; } } private IEnumerator CallCamera() { yield return Application.Request— UserAuthorization(UserAuthorization.WebCam); 第5期 魏三强:一利一AR互动火屏 发}l1的透明视频橘放技术 if f Application.HasUserAuthorization public void 0nStopButt0nClick() { (UserAuth0rizati【)n.WebCam)) { testmovie.Stop(); WebCamDevice[] elm ices= WehCamTexture.devices: devieeName=devices[0].name; webTex new WebCamTexture 在脚本添加完成之后,接着为每个按钮指定点 击事件,使每个按钮点击时调用正确的方法。完成 之后,运行测试。测试结果表明:既能够看到透明 (deviceName,Screen.width,Screen.height,20); webTex.Play(); 视频中的真实世界,又能够看到虚拟的影像,这样 就实现了大屏互动 :,如图5所示。 } } 接着创建一个Rawlmage以及Play、Pause、Stop 三个按钮,把Rawlmage调整为全屏显示,并将这i 个按钮调整至合适的位置。再将OutCamera脚本 拖给一个空物体,将RawImage赋值给Image变量, 其它两个变量不需要赋值,在运行时脚本能够自动 调用外部摄像机。在Hierarchy层级面板中,将 Canvas的Render Mode属性设置为Screen Space— Camera,将Render Camera设置为Main Camera,并 将Main Camera的投影方式(Projection)设置为正 交投影(Orthographic)。然后调整之前做好的mov— 图5测试效果图 ie至合适的位置。 打开之前的PlayMovie脚本,修改其巾的代码 如下 幢 : using UnityEngine; 3 结语 近年来,国内的AR互动大屏开发技术取得了 著的进步。但是,与国外的AR互动大屏相比, using System.Collections; public('lass PlayMovie:MonoBehaviour 国内的AR互动大屏在内容层面:精细化不够,震 撼力不足;在创意层面:创意不足,形式单一,不够 丰富;在策划层面:准备不充分,不能让顾客达到预 期的体验效果。这都需要AR互动大屏开发者努 力做出更有创造性的、质量更高的互动大屏内容, 以期能为消费者带来全新的互动体验。 { publ ic MovieTexture testmovie; void Stmt() { testmovie.1oop true; } public void OnPlayButt0nClick() { 参考文献: [1]林一,陈靖,刘越,等.基于心智模型的虚拟现实与增强现实混 合式移动导览系统的用户体验没计[J].计算机学报,2015,38 testmovie.Play(); } (2):408—422. [2]ARinChina.1 内AR 动大屏缺什么[EB/OL].[2015一t1—27]. https://baijia.baidu.conVs'?old—id:246489. Imblic void OnPauseButt(mClick( ) { 3]1三涌天,陈靖,程德文.增强现实技术导论[M].北京:科学出版 H:,2015:3,8.24-27. testmovie.Pause(); { [4 J蔡苏. 沛文.杨阳,等.增强现实(Al1)技术的教育应用综述 [J].远程教育杂志,2016(5):27—40. ・92・ 贵州大学学报(自然科学版) 第34卷 [5]王同聚.虚拟和增强现实(VR/AR)技术在教学中的应用与前景 展望[J].数字教育,2017,3(1):1—10. [6]陈向东,万悦.增强现实教育游戏的开发与应用一以“泡泡星 球”为例[J].中国电化教育,2017(3):24-30. com/Projects/hddp.htm1. [1O]古城,喇平.After Effects CC实例教程[M].北京:人民邮电出版 社.2015:1-5. [11]黄静.虚拟现实技术及其实践教程[M].北京:机械工业出版 社.2016:191—199. [7]余日季,蔡敏,蒋帅.基于移动终端和AR技术的博物馆文化教 育体验系统的设计与应用研究[J].中国电化教育,2017(3):3l 一[12]张克发,赵兴,谢有龙,等.AR与VR开发实战[M].北京:机械 工业出版社.2016:2,57—67. 35. [8]魏三强,王兵.AR技术在非物质文化遗产及文化旅游业中的应 [13]吴珊丹,鲁晓波。闫凤.城市建筑物三维可视化逼真度优化设 计仿真[J].计算机仿真,2017,34(1):388—391. 用[J].江汉大学学报:自然科学版,2016,44(4):364—368. [9]广州壹传诚文化传播有限公司.AR互动大屏:一个hig}I翻天 的营销工具![EB/OL].[2017—06—12].http://www.ycc333. (责任编辑:王先桃) A Transparent Video Player Technology in the Development of AR Interactive Large Screen WEI Sanqiang ・ (1.Department of Computer and Information,Suzhou Vocational and Technological College,Suzhou 234101,China; 2.School of Information and Contml Ensineefing.China University of Mining and Technology,Xuzhou 221 1 16,China) Abstract:In order to realize the transparent video playback of AR interactive large screen development,the transparent video playback technology was proposed in Unity 3D.Firstly,AE software was used to make videos with Alpha channels and secondly the C#language was used to write shader that can play transparent video.Last— ly,the camera was turned on in Unity 3D and the video was played on the interactive screen.The test results show that the real world and virtual images in transparent video could be seen.so the AR screen interaction iS a— chieved. Key words:AR interactive large screen;transparent video;after effects;Unity 3D;C#script 

因篇幅问题不能全部显示,请点此查看更多更全内容