A-Frame是什么?

1.开发WebXR应用的方式

目前开发WebXR应用,一般有三种方式:

  1. 使用封装好的第三方库
    对于没有 WebGL 基础的用户,学习和开发成本相对都比较高,因此市面上有一些在 WebGL 基础上封装的库,帮助我们快速上手开发 WebXR,例如 aframe、babylon.js、three.js 。
  2. WebGL + WebXR api
    使用 WebGL 加 WebXR api 开发的方式,相对来说是比较贴近于底层的,对于底层,特别是渲染模块我们可以做一些优化操作从而提升 XR 的性能和体验。通常采用的技术方案是:HTML5+ JavaScript + WebGL + WebVR API 。
    这种方法相对于A-Frame的优势在于可以将VR的支持方便地引入到我们自己的Web3D引擎中,同时对于底层,特别是渲染模块可以做更多优化操作从而提升VR运行时的性能与体验。
  3. 传统 3d 引擎 + emscripten
    传统的 3D 应用开发我们一般都会采用一些比较知名的 3D 引擎例如 unity、unreal 等,借助 emscripten,我们可以将 C 和 C++ 代码编译为 WebAssembly,从而实现 web 端的 XR。

2.A-Frame到底是什么?

是由WebVR的发起人 Mozilla VR团队所构建,是当下用来开发WebVR内容主流技术方案,现在由 aframe 在 Supermedium 中的联合创建者维护。MozVR团队开发A-Frame框架的目的是:让构建3D/VR场景变得更易更快,以吸引Web开发社区进入WebVR的生态。作为一个独立的开源项目,aframe 已经成长为最大的 VR 社区之一。

A-Frame是专门面向没有编程基础的普通用户来开发Web端VR内容。是一个用来构建虚拟现实(VR)应用的网页开发框架,它基于HTML和DOM,上手十分简单。但是 A-Frame不仅仅是一个3D场景渲染引擎或者一个标记语言,其核心思想是基于 Three.js 来提供一个声明式、可扩展以及组件化的编程结构。由于大多数 Web 都是建立在 HTML 之上的,因此大多数现有工具和库都可以使用 A-Frame,包括 React、Vue.js、Angular、d3.js 和 jQuery。通过该框架构建的VR场景能兼容智能手机、PC、 Oculus Rift和HTC Vive。

A-Frame的特点:
1.它是一个开源的框架;
2.搭建场景易用平台
如果想以较低的门槛体验一把WebVR开发,那么使用MozVR团队开发的A-Frame框架是最佳的选择。

3.A-Frame的优势与特点

  • 简单的 VR 制作
    只需要引入 <script> 标签 和 <a-scene>,aframe 将自动生成3D渲染的样板代码、VR相关设置和缺省的交互控制。不需要安装任何东西也无需编译构建。
  • A-Frame能减少冗余代码
    冗余复杂的代码成为了尝鲜者的障碍,A-Frame将复杂冗余的代码减至一行HTML代码,如创建场景则只需一个<a-scene> 标签。
  • 声明式 HTML
    aframe 通过 html 标签的方式,将大量的 3D 逻辑封装在内,容易阅读,理解和复制粘贴。
  • ECS 架构
    aframe 基于强大的 three.js框架, 同时提供声明式、组件化、可复用的实体组件结构。HTML只是冰山的一角,开发者可以自由的使用 JavaScript、DOM API,Three.js,WebVR,和 WebGL。
  • A-Frame是专为Web开发者设计的
    它基于 DOM,因此能像其他Web应用一样操作3D/VR内容。当然,也能结合box、d3、React等JavaScript 框架一起使用。
  • A-Frame让代码结构化
    Three.js代码通常是松散的,A-Frame在Three.js之上构建了一个声明式的实体组件系统(entity-component-system)。另外,组件能发布并分享出去,其他开发者能以 HTML的形式进行使用。
  • 跨平台
    A-Frame 能构建能兼容主流头显设备的 VR 应用程序,如HTC Vive, Rift, Daydream, GearVR,Pico, Oculus乃至在普通电脑和手机上运行。
  • 工具无关性
    由于是构建在 HTML 之上,所以 A-Frame 和大多数开发库、框架和工具如 react, vue,angular 等都能够兼容。
  • 可视化的检测工具
    aframe 提供一个便捷的内置3D可视化检测工具。打开任意的A-Frame场景,Mac 敲击 <control> + <option> + <i> 或者 windows 敲击 <ctrl> + <alt> + i 组合键,将切换到3D元素检测模式。
  • 丰富的组件
    aframe 内置了很丰富的组件,核心组件如几何模型(geometries),材料(materials),光线(lights),动画(animations),模式(models),光线投射(raycasters),阴影(shadows),定位音频(positional audio),文本(text),和 Vive / Touch / Daydream / GearVR / Cardboard 等控制。以及更多社区贡献的组件如:粒子系统(aframe-particle-system-component、物理系统(aframe-physics-system,多人模式(networked-aframe)、海洋(oceans)、山脉(mountain)、语音识别(aframe-speech-command-component)、运动捕捉(aframe-motion-capture)、瞬移(aframe-teleport-controls)、人手(aframe-super-hands-component)、以及增强现实(augmented-reality) 等等。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容

  • Why A-Frame? A-Frame was built by the Mozilla VR team to ...
    顶儿响叮当阅读 913评论 0 2
  • 【本文翻译自A-Frame官网,原文见扩展阅读】首先啊,为什么要叫概览2呢?因为概览一时没用markdown代码显...
    shaYanL阅读 1,248评论 0 1
  • 随着网络的发展,以及5G的出现,Web发展迅速,现在不仅仅只是展示一些二维的内容。 Web的先天优势就是用户只需要...
    洞悉ONE阅读 2,814评论 0 0
  • 沉浸式网络是通过网络部署的增强和虚拟现实体验的集合。这是即将到来的元节的一部分,您无需下载,并且可以在您需要改变现...
    iCloudEnd阅读 652评论 0 1
  • 是基于OpenGL的JavaScript API /库,允许Web浏览器在浏览器中渲染3D / 2D图形,而无需安...
    ayusong870阅读 14,125评论 0 8