周一至周五
9:00—22:00
    
      联系电话:400-037-0800

基于A―Frame的虚拟现实应用

杂志之家论文发表、写作服务和杂志订阅支持对公帐户付款!安全又可靠!


申明:本网站内容仅用于学术交流,如有侵犯您的权益,请及时告知我们,本站将立即删除有关内容。

 

  摘 要: 虚拟现实技术和移动互联网技术的迅速发展改变了人们的生活方式,但也存在开发难等问题。文章介绍了能够快速简单地构建虚拟场景并创建虚拟交互的A-Frame框架,并通过一个案例的开发过程分析了利用A-Frame构建虚拟现实应用的基本步骤。
中国论文网 /8/view-10688514.htm
  关键词: 虚拟现实; 虚拟交互; WebVR; A-Frame
  中图分类号:TP393 文献标志码:A 文章编号:1006-8228(2018)03-20-03
  A-Frame based virtual reality applications
  Wang Xuefan, Tian Yuan, Zhou Mi, Xia Dan
  (School of Educational Information Technology, Central China Normal University, Wuhan, Hubei 430079, China)
  Abstract: The rapid development of virtual reality technology and mobile Internet technology has changed people's life, but there are also some problems such as difficulty in development and so on. To solve these problems, A-Frame framework was proposed, which can quickly and simply build virtual scene and create virtual interaction. The basic steps to construct virtual reality scenes are analyzed through a case of development process.
  Key words: virtual reality; virtual interaction; WebVR; A-Frame
  0 引言
  虚拟现实(Augmented Reality,简称VR)是由计算机等设备模拟接近真实的虚拟场景,让用户在视觉听觉等感官上仿佛置身于真实世界[1-3]。虚拟现实系统强大的沉浸感,交互性和想象力使得VR技术前景广阔,发展迅速[4-6]。但是随之而来产生了诸多问题,比如VR内容不丰富、设备成本高、开发困难等,这些问题限制了VR技术的大众化[7]。而WebVR的出现让大众在浏览器上能轻松体验VR并进行分享,并且无需安装插件[8-10],如Beloola就是一个基于WebVR的社交平台,允许人们在同一个虚拟的空间上实时进行情感交流。所以WebVR成为虚拟现实行业中一颗明亮的新星。
  然而开发WebVR程序不是一件简单的事情,如果从WebGL等底层代码写起,很是费时费力。而A-Frame是一个基于WebVR的框架,使开发者事半功倍。华盛顿邮报、国际特赦组织、谷歌创新实验室等都是A-Frame的用户。虽然VR技术还在发展阶段,但效果已经非常酷炫,在未来互联网时代将呈现更大的价值。
  1 A-FRAME的优势与特点
  A-Frame是一个通过HTML创建虚拟现实体验的开源WebVR框架,可以方便快捷的创建虚拟场景中的模型对象并进行编辑、指定材质、设置灯光和�z像机、编辑动画和虚拟交互等,并且可以快速创建VR视口。A-Frame可以用来开发虚拟现实、增强现实等应用,轻松让用户犹如置身于奇幻之境。A-Frame开发简单、容易上手。对于熟悉WebVR或前端开发的研究者,能够快速通过超文本标记语言进行开发。对于从事三维建模的研究者或艺术家也可以快速创建交互场景。A-Frame的许多优良特性使这个框架易学易用。
  1.1 跨平台使用
  A-Frame不仅能在台式电脑和笔记本上使用,还可以在手机和平板电脑上运行,同时还支持许多虚拟现实输出设备, 如移动端头显暴风魔镜和小宅Z5等,又如VR头盔HTC Vive和OCulus Rift等。不同消费水平的用户可以在不同的设备上随时随地享受VR体验。
  1.2 可视化编辑界面和资源管理器
  A-Frame不仅能在台式电脑和笔记本上使用,还可以在手机和平板电脑上运行,同时还支持许多虚拟现实输出设备, 如移动端头显暴风魔镜和小宅Z5等、VR头盔HTC Vive和OCulus Rift等。不同消费水平的用户可以在不同的设备上随时随地享受VR体验。
  
  图1 可视化编辑器
  1.3 操作便捷,访问轻松
  A-Frame是基于HTML的框架,具有简易性、可扩展性、可移植性以及平台无关性。代码清晰易懂,用标签就能自动生成三维场景。A-Frame 和大多数开发WEB的库、框架和工具如React、Preact、Vue.js, Angular、d3.js、Ember.js和jQuery等兼容。熟悉WebGL各种类库或者计算机图形学的研究者能够更轻松的在A-Frame中创建三维物体和动画。开发者可以选择GitHub托管自己的代码,用GitHub帐号登录A-Frame即可进行在线开发、作品发布以及作品浏览和分享等操作。用户可以在浏览器上轻松地访问开发者的作品。
  1.4 实体-组件-系统结构
  A-Frame使用了实体-组件-系统架构,更易于构造VR场景。每一个实体都是一个对象,比如场景中的一个三维物体就是一个实体。一般来说,通过继承的方法构建实体容易出现类爆炸的问题,通过组合的方法构建实体很好的解决了这个问题。所以,实体就是多个组件的聚合,这种方式容易构建新的、更复杂的实体对象。   A-Frame提供了许多核心组件,如几何形状、模型、文本、海洋、山脉、材质、光照、阴影、动画、物理系统、粒子系统等。每个组件都可以设置属性值,通过改变组件属性和混合组件来定义实体的外观、行为和功能。系统对所有相关联的组件进行操作,为组件类提供管理和服务。在A-Frame中,系统就是整个场景,可以由许多实体组成。
  2 A-FRAME的的实现过程和应用
  2.1 开发概述
  在A-Frame项目中,三维虚拟场景默认摄像机的方向以x、y、z正交方式存在。以用户面对屏幕为标准,向左为x轴正方向,向上为y轴正方向,出屏幕方向为z轴正方向。每个实体有自身坐标系,在可视化编辑界面中选择实体就能看到叠加在该实体上的三条坐标轴,红色代表x轴,绿色代表y轴,蓝色代表z轴。该坐标轴指出了当前实体的坐标定向和变换中心,高亮的轴表示变换操作在该方向受到约束。
  A-Frame的距离单位是米,旋转单位是角度,在此基础上对物体进行平移缩放和旋转等操作,并且支持父子变换,即子代继承父代的变换,如在HTML中用标签
  代表一个父实体有两个子实体。
  通过HTML构建A-Frame项目,首先需要在head中引用所需的脚本文件,比如:
  
  接下来就可以在body中添加场景,在scene中添加实体。开发者可以把在虚拟场景中感受到的物体当做实体,比如摄像机、灯光、盒子等实体,分别用标签表示。为每个物体添加形状、材质、光照、动画等组件,设置属性和属性值,用标签表示。此外,因为A-Frame本质上就是HTML,因此,可以像普通Web开发一样使用JavaScript和 DOM API来控制其中的场景和实体。登录A-Frame社区可以查看使用指南和模型案例。
  2.2 构建一个简单的室内场景
  在建模软件中进行室内设计通常要经过建模、赋材质、打光、做动画效果等步骤,在A-Frame中构建场景也类似。拿到设计图纸之后,首先要用一些几何形状实体拼合成为基本的物体,如桌子,凳子、柜子等。A-Frame提供的几何形状有立方体、球、圆柱、圆环以及平面、圆片、三角面等。在可视化编辑器中或HTML中可以设置其形状和材质组件的属性,如位置大小、反面可见以及透明度等。如可以通过以下代码指定一个平面,设置位置大小等信息,构建一个窗帘实体:
  。
  图2中,茶几是用若干形状不同的立方体拼合而成,通常情况下,开发者会把同物体中的实体作为子代,这样,可以通过变换父实体来控制整个物体,效果如同3DsMAX中的成组。此外还允许导入资源管理器中的模型,可以上传并使用的模型格式有:glTF、OBJ、COLLADA等,这使建模更快捷精准,效果更美观。最终的模型效果如图2所示。
  
  图2 模型效果图
  建模完成之后,通过材质组件来给实体添加贴图和纹理来控制实体的颜色和质感,使场景更加逼真、舒适美观。材质组件常用的属性有颜色、贴图和法线贴图。颜色属性color的值为十六进制颜色码,分别对应RGB三通道的值,其作用是控制实体的表面颜色。贴图属性src的值为图片的URL,开发者把需要的图片上传到资源管理器后,可复制其地址信息,使用并设置贴图的重复次数,使图片犹如贴在物体表面一样。贴图及其颜色的效果会叠加显示,比如选取咖啡色的颜色值和贴木纹图案的显示效果要比只贴木纹图案视觉上颜色更深一些。法线贴图normalMap的使用和贴图相似,作用是控制实体的纹理效果,也就是视觉上的凹凸感,使得效果更逼真。如下代码是在上述窗帘的基础上设置了颜色、材质贴图等信息:
    height="4" rotation="0 -104.82 0" color=
  "#7BC8A4"geometry="height:5.66;width:0.8"
  material="color:#ffffff;normalMap:https://cdn.glitch.com/
  5.jpg?5;src:https://cdn.glitch.com/2.jpg? 7">
  打光使整个场景鲜活起来。在HTML中通过添加标签来添加灯光。给灯光实体添加光照组件,属性有光源类型、颜色、强度、衰减等。光源类型有全局光、半球光、点光、光斑。颜色为光线的颜色,和强度衰减值等共同控制光照效果,不同的光源类型还有不同的属性。遵循三点布光法就可以实现简单的室内照明效果。主光源为较强的方向光,顺光用来照亮室内产生物体阴影,辅助光为强度较小的方向光,测光使主光不能照的阴影区域柔和,背景光为强度较小的全局光,定义室内整体色彩基调,增加墙体等背景的亮度从而衬托室内家具。如下代码创建了一个具有位置、强度等信息的全局光线:
     ambient;castShadow:true">
  此外还可以添加装饰光如壁橱和台灯的光效。需要注意的是,完成后要给场景中的实体添加光线投射接受组件。
  基本的VR场景建立完成后可以添加交互控制。A-Frame的跨平台性允许鼠标、触摸、凝视、手柄等交互方式,就像人在现实世界中一样。可以参考A-Frame注册表中现有组件的常用操作示例来开发。如在室内场景创建一个基于凝视的交互,实现凝视目标时从当前视角移动到指定的视角。首先在屏幕中央标记一个圆形标志,代表当前视角,然后通过头部运动和视线变化改变当前视角,当标志在场景中指定实体上(如图三中央半透明圆圈)悬停(凝视)后,激活移动,视角从当前位置移动到指定实体所在位置处,即指定的视角,实现室内漫游的效果。如漫游客厅和餐厅,从图3a移动到图3b、从图3c移动到图3d,代码如下所示:
  
  
  
  图3 室内场景最终效果图
  为了强调某些实体,可以用animation组件为实体添加动画。通过设置起始值、时长、方向、循环、缓动等属性来控制实体的颜色、位置、大小等动效。把父子变换应用到A-Frame动画中能制作出更加复杂有趣的效果。在建好的室内场景中,开发者需要强调控制交互的实体,可以给这个实体添加缩放和透明度动效,创造闪烁视觉效果。简单室内场景最终效果如图3所示,点击右下方眼镜按钮可以切换到分屏模式,可在头戴设备上使用,观看三维全景效果。
  3 结束语
  A-Frame快捷的开发方式和灵活的扩展机制以及高效的场景性能使得人人都能VR,友好多样的交互方式带给用户酷炫的虚拟现实体验。随着人们对于A-Frame和相关技术的研究不断深入,基于A-Frame的应用也会越来越广泛。
  参考文献(References):
  [1] 张凤军,戴国忠,彭晓兰.虚拟现实的人机交互综述[J].中国科
  学:信息科学,2016.46(12):1711-1736
  [2] 周忠,周颐,肖江剑.虚拟现实增强技术综述[J].中国科学:信息
  科学,2015.45(2):157-180
  [3] 张毅.虚拟现实技术的发展现状与展望[J].电脑迷,2017.11:32
  [4] 刘德建,刘晓琳,张琰等.虚拟现实技术教育应用的潜力、进展
  与挑战[J].开放教育研究,2016.22(4):25-31
  [5] Nyaz Didehbani,Tandra Allen,Michelle Kandalaft, et a1.
  Virtual Reality Social Cognition Training for children with high functioning autism[J]. Computers in Human Behavior,2016.62:703-711
  [6] Alessandro Innocenti. Virtual reality experiments in
  economics[J]. Journal of Behavioral and Experimental Economics,2017.69:71-77
  [7] 曹煊.虚拟现实的技术瓶颈[J].科技导报,2016.34(15):
  94-103
  [8] 陈伟娜,陈锐浩.WebVR技术在短期商业会展中的应用研究[J].
  现代计算机(专业版),2017.21:59-64
  [9] 夏金瑶.基于WebGL的EAST可视化系统[D].中国科学技术
  大�W,2017.
  [10] 任艺.WEBVR和RIA技术在新媒体中的应用[J].硅谷,
  2013.5(2):263,258

转载请注明来源。原文地址:https://www.xzbu.com/8/view-10688514.htm


 
中国论文网—— 论文代发/ 行业知名品牌 电话:400-675-1600
中国互联网违法和不良信息举报中心| 网络110上海网警在线|关于我们|闽ICP备13016544号-6
【xzbu】郑重声明:本网站资源、信息来源于网络,完全免费共享,仅供学习和研究使用,版权和著作权归原作者所有,如有不愿意被转载的情况,请通知我们删除已转载的信息。
xzbu发布此信息目的在于传播更多信息,与本网站立场无关。xzbu不保证该信息(包括但不限于文字、数据及图表)准确性、真实性、完整性等。