A-Frame WebVR试玩报告
什么叫真?你怎样给真下定义,如果你说真就是你能感觉到的东西,你能闻到的气味,你能尝到的味道,那么这个真只是你大脑作出反应的电子信号。 —— 《黑客帝国》
关于VR技术
VR即Virtual Reality虚拟现实,大白话来讲,就是利用电脑创造一个全新的虚拟世界,通过欺骗你的感官(目前更多是视觉上),让你置身于一个与现实相似又完全虚拟的世界中,这就像是在《黑客帝国》中,主人公尼奥对这个看似真实的世界产生怀疑,在崔妮蒂的帮助下,最终与墨菲斯见面,并吃下了象征真相的红色药丸,在矩阵醒来后的尼奥发现,原来他一直生活在矩阵所创造的虚拟世界中。
一分钟VR简史
《Pygmalion’s Spectacles》(《皮格马利翁的眼镜》)
虚拟现实这个概念最早来自于Stanley G. Weinbaum在1935年发表的科幻小说《皮格马利翁的眼镜》,被认为是探讨虚拟现实的第一部科幻作品,简短的故事中详细的描述了包括嗅觉、触觉和全息眼镜为基础的虚拟现实系统。
Sensorama
VR的雏形,要追溯到1962年被称为虚拟现实之父Morton Heilig发明的Sensorama,它的外观就像是一个笨重的街机盒子。
Morton Heilig发明Sensorama的初衷是为了打造未来的电影,在当时那个年代拍摄3D电影并不容易,Morton Heilig为了配合拍摄,又发明了3D摄像机和投影仪,为Sensorama拍摄了五部短片,以直升机、卡丁车、自行车和摩托车等骑行体验为主,Sensorama播放在布鲁克林骑摩托车的短片时能够提供真实的3D影像,感受行车时的颠簸,周围环境的立体声、迎面吹来的风和气味,这在当时大部分人都还在使用黑白电视的时代,是多么令人震撼的,遗憾的是该项目未能获得资金的支持,因此Sensorama的研发工作止步不前,最终回看历史,其实它更像是现代的4D电影。
The Sword of Damocles(达摩克利斯之剑)
1968年,Ivan Edward Sutherland和他的学生Bob Sproull在麻省理工学院的林肯实验室创造了第一个虚拟现实及增强现实头戴式显示器系统,第一个显示应用是悬浮在空中的一个立方体,这款头戴显示器因为要跟踪用户的视线,需要通过机械臂移动,因此设备非常笨重,只能挂在天花板上减轻重量使用,被戏称为“达摩克利斯之剑”。
Sega VR(世嘉VR)
1991年世嘉宣布了Sega VR,定价为200美元,从1991年到1994年,世嘉就在起VR设备上不断宣传,并且在1993年的夏季CES展会上提供VR的试玩,就在大家万分期待之时,1994年世嘉表示停止该项目,给出的理由是虚拟现实效果过于逼真,同时佩戴耳机的用户有可能移动和伤害到自己,当然明白人都知道这是个借口,花了如此大力气的投入和探索最终却放弃了,原因或许是因为SEGA VR的游戏和软件太少了,在夏季CES展会上也只是公布了屈指可数的4款游戏:《Nuclear Rush》、《Iron Hammer》、《Matrix Runner》、《Outlaw Racing》。
Virtual Boy
1995年,任天堂发布了Virtual Boy,Virtual Boy采用二极管和视差技术创造出游戏的3D效果,是任天堂在N64上市之前用来取代Game Boy的32位便携游戏机,由设计Game Boy的横井军平主导,最终发售22个游戏,全球销量77万台,造成其失败的原因很大程度是因为Virtual Boy只能提供红黑两色的游戏画面,760克的重量需要支架支撑,玩家只能卷缩身体坐着玩,并且玩家在过程中会有强烈的眩晕感。
Oculus Rift
VR这个词在近两年火热起来也正是因为Oculus Rift,92年生的Palmer Freeman Luckey对任何事物皆有好奇其心的人,喜欢收藏各类VR设备,并且是Meat to be seen技术论坛的版主,Palmer对市面上VR的低对比度、高延迟和低视野感到失望,他希望制作一个能跟踪玩家头部转动的360度全景,并以极低的延迟显示画面的VR头戴设备。
同样作为Meat to be seen技术论坛成员之一的FPS之父卡约翰·卡马克,看到此项目非常感兴趣,要求给予一台原型机,并对《DOOM3》进行VR适配,在2012年E3展出此设备,获得了E3最佳外设奖,一时间获得各大媒体的关注,随后在Kickstarter发起众筹,短时间内就获得超过9500人支持,总资金达243万美金。
在2014年7月,Oculus Rift被Facebook以20亿美元收购后,各个厂家似乎又看到另一片蓝海,大量的涌入这个市场,HTC的HTC Vive,索尼的PlayStation VR,各类的手机VR等等。
关于A-Frame
历史讲完回到正题,Mozilla认为目前的WebVR发展太困难了,为了使其更加快速、方便、愉快的打造3D/VR场景,2015年12月16日Mozilla旗下的MozVR团队,在经过长时间的试验,并且从一些3D/VR工具(例如:JanusVR、GLAM、SceneVR)中汲取经验,公布了JavaScript开源框架A-Frame。
A-Frame使用Web开发者熟悉的HTML标签来创建WebVR场景,使得非WebGL开发者无需学习强大而又复杂的WebGL API来创建VR场景,降低了初学者学习的门槛,并且A-Frame一个最大的优势在于跨平台性,目前版本已迭代到v0.3.0,支持VR头戴设备Oculus Rift和HTC Vive以及非VR设备的PC端和Mobile端(可开启VR模式,利用Google Cardboard、Gear VR等设备观看)。
简单概括A-Frame特点如下:
- 结合three.js和WebGL的力量
- 通过自定义标签创建WebVR,标签具有可读性
- 具有跨平台性,支持PC端、Mobile端以及头戴设备Oculus Rift和HTC Vive
- 减少开发成本,降低初学者与牛人之间学习曲线
- 底层模块化和可扩展性
A-Frame功能
A-Frame为开发者提供了许多的功能模块,例如在官网Docs里Primitives提供了基础的几何形状(盒子、球面、圆柱、平面等)、可导入3D建模工具制作或从网上下载的Collada模型、定义背景的天空、定义用户从哪个角度观看场景的相机、动画、光影、全景视频等功能,通过标签开发者就可以轻松的创建WebVR场景,更多功能可以到官网查看。
A-Frame实例
这里以官网的一个例子作为基础讲讲怎么使用A-Frame。
1、创建场景
12345678910111213 |
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="aframe-v0.3.0.js"></script> </head> <body> <a-scene> </a-scene> </body></html> |
<a-scene>
是一个全局的根对象,所有实体都存在于这个场景中,<a-scene>
处理了所有three.js和WebVR boilerplate需要做的事:
- 创建画布,渲染器以及渲染循环
- 默认的相机和光影
- 创建WebVR Polyfill,VREffect
- 添加用户界面进入VR,调用WebVR API
2、创建天空
123456 |
<a-scene> <a-assets> <img id="lake" src="lake.jpg"> </a-assets> <a-sky src="#lake"></a-sky></a-scene> |
<a-sky>
允许为场景设置纯色背景或是一张360度全景图片,<a-assets>
则是预加载WebVR页面所需的资源。
点击查看DEMO
3、创建相机
12345 |
<a-scene> <a-entity position="0 0 3.8"> <a-camera></a-camera> </a-entity></a-scene> |
<a-camera>
定义了用户从哪个角度观看场景,改变<a-camera>
的position
需要将其置于<a-entity>
中,直接在<a-camera>
设置不会生效。
4、创建球面、立方体、圆柱、平面
12345678910 |
<a-scene> <!-- 球面 --> <a-sphere position="0 1.25 -1" radius="1.25" color="#ef2d5e"></a-sphere> <!-- 立方体 --> <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depath="1" color="#4cc3d9"></a-box> <!-- 圆柱 --> <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#ffc65d"></a-cylinder> <!-- 平面 --> <a-plane rotation="-90 0 0" width="4" height="4" color="#7bc8a4"></a-plane></a-scene> |
position
定位实体x、y、z轴的位置rotation
调整实体x、y、z轴的旋转角度color
改变实体的颜色depth
景深width
、height
设置实体的宽高radius
圆角半径- 数值是以“米”为单位
点击查看DEMO
5、添加动画
1234567891011121314 |
<a-scene> <a-sphere position="0 1.25 -1" radius="1.25" color="#ef2d5e"> <!-- 缩放 --> <a-animation attribute="scale" from="1 1 1" to="1.2 1.2 1.2" repeat="indefinite" direction="alternate" dur="2000"></a-animation> </a-sphere> <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depath="1" color="#4cc3d9"> <!-- 旋转 --> <a-animation attribute="rotation" from="0 45 0" to="0 360 0" repeat="indefinite" direction="alternate"></a-animation> </a-box> <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#ffc65d"> <!-- 改变高度 --> <a-animation attribute="height" from="1.5" to="0" repeat="indefinite" direction="alternate"></a-animation> </a-cylinder></a-scene> |
需要为某个实体添加动画则将<a-animation>
置于标签之内,这里我给球scale
缩放,立方体rotation
360度Y轴旋转,圆柱改变height
,并且无限次轮流反向播放动画。
attribute
定义要执行的动画属性from
动画的起始to
动画的结束repeat
定义了要循环的次数,可以是一个数字或indefinite表示无限循环dur
动画的时长direction
动画轮流反向播放
A-Frame的动画属性与CSS3 animation非常相似,还有填充模式fill
、延时delay
、速度曲线easing
等等。
点击查看DEMO
6、创建光标
通过给相机增加一个光标cursor
,让我们可以通过点击和注视与实体互动。
1234567891011 |
<a-scene> <a-box cursor-listener position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depath="1" color="#4cc3d9"> <a-animation attribute="rotation" from="0 45 0" to="0 360 0" repeat="indefinite" direction="alternate"></a-animation> </a-box> <a-entity position="0 0 3.8"> <a-camera> <!-- 创建光标 --> <a-cursor color="#000"></a-cursor> </a-camera> </a-entity></a-scene> |
1234567891011 |
// 添加光标监听器AFRAME.registerComponent("cursor-listener", { init: function() { var COLORS = ["#6c8cbf", "#e4f0ff", "#6c70e1"]; // 点击随机改变立方体颜色 this.el.addEventListener("click", function() { var randomIndex = Math.floor(Math.random() * COLORS.length); this.setAttribute("color", COLORS[randomIndex]); }); }}); |
点击查看DEMO
A-Frame社区
一个框架是否能持续发展,很大程度看社区的活跃状态,A-Frame目前在Github上已经超过3500个star,Mozilla鼓励开发者们加入1400人的A-Frame Slack聊天组,并在社区中分享自己的作品,在A-Frame Twitter里,每周都会精选出优秀的A-Frame作品供开发者们参考学习。
在A-Frame的Github Roadmap后续的版本更新线路图中表明,后续除了常规的升级外还将推出教程(制作更多的学习资源、文章、指南、录屏)帮助初学者更好学习。
A-Frame资源
- 可视化在线编辑器
360全景图素材
- flickr
- 500px
3D模型免费素材
- Clara.io
- 3D Warehouse
- Archive 3D
- Turbosquid
资源集
- awesome-aframe
参考资料:
- http://en.wikipedia.org/wiki/Virtual_reality
- https://en.wikipedia.org/wiki/Sensorama
- https://en.wikipedia.org/wiki/Sega_VR
- https://en.wikipedia.org/wiki/Virtual_Boy
- https://en.wikipedia.org/wiki/Oculus_Rift
- http://aframe.io/
- https://github.com/aframevr/aframe
- https://twitter.com/aframevr
A-Frame WebVR试玩报告相关推荐
- WinUI 3 试玩报告
1. 什么是 WinUI 3# 在微软 Build 2020 开发者大会上,WinUI 团队宣布可公开预览的 WinUI 3 Preview 1,它让开发人员可以在 Win32 中使用 WinUI.W ...
- 创新虎仔音箱试玩报告
本文来自: www.mycreative.com.cn 伴随着2010年的脚步,我们送走了牛年迎来了虎年.创新发布了这样一款虎仔音箱非常应情应景."两只老虎,两只老虎,叫的响,唱的欢,嘴巴翘 ...
- ps4数据库和html,PS4《原神》试玩:争议之外,究竟学到了哪些东西?
由于众所周知的原因,在2019年Chinajoy索尼展台上出展的<原神>在亮相之前就积累了极大的关注度--尽管这其中争议的声音占了所有评论中的绝大多数,大部分玩家都将矛头指向了游戏画风和建 ...
- 应用、游戏和品牌的新营销方式-试玩广告
一.什么是"试玩广告"? 试玩广告是部署为广告格式的迷你游戏和教程.它们提供应用程序提供的预览.游戏和非游戏应用程序都采用可玩广告来提高用户获取 (UA). 与传统广告格式不同,试 ...
- 网页大作业——街机游戏拳皇(KOF)系列的介绍及试玩。
网页制作报告 网站的主题说明 本网站主题是街机游戏拳皇(KOF)系列的介绍及试玩. 网站的总体规划与网站的结构框图 网站共分为:主页.人物介绍.公司介绍.系列介绍.游戏试玩五个部分.框图如下 网站设计 ...
- 在线试玩,在体感游戏中打败泰森,这位小哥破解了任天堂「拳无虚发」
视学算法报道 编辑:张倩.陈萍 加入体感控制,这位小哥破解了原版任天堂的拳击格斗游戏「拳无虚发」. 在经典红白机上玩拳击游戏是很多人的童年回忆,其中就包括任天堂 1987 年发布的拳击格斗游戏--「P ...
- 华人团队用Transformer做风格迁移,速度快、可试玩,网友却不买账
视学算法报道 编辑:杜伟 利用神经网络进行风格迁移是一项非常常见的任务,方法也很多,比如基于优化和基于 RL 的方法.最近,来自百度 VIS 团队的研究者提出了一种基于 Transformer 的风格 ...
- 清华唐杰团队造了个“中文AI设计师”,效果比Dall·E好,可在线试玩
点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达 晓查 发自 凹非寺 量子位 报道 | 公众号 QbitAI 要说20 ...
- 码农也来玩奥运开幕式“超级变变变”!相机动捕,实时转换赛事图标,项目开源可试玩...
来源:大数据文摘本文约2600字,建议阅读5分钟 来为奥运"花样"加油. 大家都有在看奥运会吗? 7月23日,东京时间晚上8点,延期一年的东京奥运会终于开幕,本应座无虚席可容纳6. ...
最新文章
- ES6函数第二篇:剩余参数与展开运算符的练习
- hdu 1251 统计难题(求前缀出现了多少次)
- java 同步 lock_关于java:同步是否像Lock.lock()一样驻留并发线程?
- Python使用reduce()函数计算多个集合的并集与交集
- 桌面 NAS 是什么
- Linux服务器之间传输文件 scp命令
- Xcode5打包静态库
- R+工业级GBDT︱微软开源 的LightGBM(R包已经开放)
- 1.2Android系统移植的主要工作
- java.util.LinkedHashMap cannot be cast to
- linux vim 安装失败,ubuntu安装vim失败怎么办
- Google Earth Engine(GEE)基于哨兵数据计算植被覆盖度—以宁夏为例
- Spring源码编译问题--xml-apis:xml-apis引入
- Laravel项目+Google验证器
- 一键制作所有微信好友头像墙照
- 程序员面试系列(2)非计算机专业程序员
- 网易邮箱出现 FA_INVALID_SESSION
- javascript中的正则表达式语法
- Chrome桌面提醒功能
- 情感分析ASTE三元组提取的BIO标注