Jump to content

A-Frame (virtual reality framework): Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
→References: remove an AFC template this article did not go through AFC review
Kodakev (talk | contribs)
33 edits
Added benefits
Line 19: Line 19:
== History ==
== History ==
A-Frame was developed within the Mozilla VR team during mid-to-late 2015. The Mozilla VR team pioneered the WebVR platform and spec,<ref>{{Cite journal|date=2016-10-24|title=WebVR|url=https://en.wikipedia.org/enwiki/w/index.php?title=WebVR&oldid=746033691|journal=Wikipedia|language=en}}</ref> but needed an easier way to create content. The original work behind A-Frame involved Diego Marcos, Josh Carpenter, Casey Yee, Chris Van Wiemeersch, and Kevin Ngo. A-Frame was created in order to allow web developers and designers to author 3D and VR experiences<ref>{{Cite news|url=http://www.roadtovr.com/mozilla-a-frame-webvr-virtual-reality-website-web-development/|title=Mozilla A-Frame: WebVR Starting With One Line of Code|last=Lang|first=Ben|date=2015-12-16|newspaper=Road to VR|language=en-US|access-date=2016-10-25}}</ref> with HTML without having to know WebGL<ref>{{Cite web|url=https://www.engadget.com/2015/12/17/mozilla-makes-it-easy-to-create-vr-websites-with-a-frame/|title=Mozilla makes it easy to create VR websites with 'A-Frame'|website=Engadget|access-date=2016-10-25}}</ref>. A-Frame's first public release was on December 18th, 2015<ref>{{Cite news|url=http://www.arvrmagazine.com/mozilla-releases-a-frame-webvr-framework/|title=Mozilla Releases A-Frame WebVR Framework|date=2015-12-18|newspaper=AR VR Magazine|language=en-US|access-date=2016-10-25}}</ref>. There are now over 75 contributors in total.<ref>{{Cite web|url=https://github.com/aframevr/aframe/graphs/contributors|title=aframevr/aframe|website=GitHub|access-date=2016-10-25}}</ref>
A-Frame was developed within the Mozilla VR team during mid-to-late 2015. The Mozilla VR team pioneered the WebVR platform and spec,<ref>{{Cite journal|date=2016-10-24|title=WebVR|url=https://en.wikipedia.org/enwiki/w/index.php?title=WebVR&oldid=746033691|journal=Wikipedia|language=en}}</ref> but needed an easier way to create content. The original work behind A-Frame involved Diego Marcos, Josh Carpenter, Casey Yee, Chris Van Wiemeersch, and Kevin Ngo. A-Frame was created in order to allow web developers and designers to author 3D and VR experiences<ref>{{Cite news|url=http://www.roadtovr.com/mozilla-a-frame-webvr-virtual-reality-website-web-development/|title=Mozilla A-Frame: WebVR Starting With One Line of Code|last=Lang|first=Ben|date=2015-12-16|newspaper=Road to VR|language=en-US|access-date=2016-10-25}}</ref> with HTML without having to know WebGL<ref>{{Cite web|url=https://www.engadget.com/2015/12/17/mozilla-makes-it-easy-to-create-vr-websites-with-a-frame/|title=Mozilla makes it easy to create VR websites with 'A-Frame'|website=Engadget|access-date=2016-10-25}}</ref>. A-Frame's first public release was on December 18th, 2015<ref>{{Cite news|url=http://www.arvrmagazine.com/mozilla-releases-a-frame-webvr-framework/|title=Mozilla Releases A-Frame WebVR Framework|date=2015-12-18|newspaper=AR VR Magazine|language=en-US|access-date=2016-10-25}}</ref>. There are now over 75 contributors in total.<ref>{{Cite web|url=https://github.com/aframevr/aframe/graphs/contributors|title=aframevr/aframe|website=GitHub|access-date=2016-10-25}}</ref>

== Benefits ==
* 3D and VR content authoring with HTML without build steps.<ref>{{Cite web|url=https://aframe.io/docs/0.3.0/introduction/|title=A-Frame|website=A-Frame|access-date=2016-10-25}}</ref>
* Setup of scene with one line of HTML (<code><a-scene></code>) to handle canvas renderer, render loop, lights, controls, WebVR setup.<ref>{{Cite web|url=https://aframe.io/docs/0.3.0/introduction/|title=A-Frame|website=A-Frame|access-date=2016-10-25}}</ref>
* Compatibility with most existing web libraries and frameworks ([[React (JavaScript library)]], [[AngularJS]], [[D3.js]], [[Vue.js]]).<ref>{{Cite web|url=https://github.com/aframevr/awesome-aframe#integration|title=aframevr/awesome-aframe|website=GitHub|access-date=2016-10-25}}</ref>
* [[Entity component system]] architecture that favors composition over inheritance to define complex 3D objects using reusable components.<ref>{{Cite journal|date=2016-10-02|title=Composition over inheritance|url=https://en.wikipedia.org/enwiki/w/index.php?title=Composition_over_inheritance&oldid=742164673|journal=Wikipedia|language=en}}</ref>
* Extensible entity-component plugin ecosystem.<ref>{{Cite web|url=https://aframe.io/aframe-registry/|title=A-Frame Registry|website=aframe.io|access-date=2016-10-25}}</ref>
* Visual inspector tool that can be invoked in the the browser from any live A-Frame scene.<ref>{{Cite web|url=https://github.com/aframevr/aframe-inspector|title=aframevr/aframe-inspector|website=GitHub|access-date=2016-10-25}}</ref>


== Usage ==
== Usage ==

Revision as of 18:56, 25 October 2016

A-Frame
Original author(s)Mozilla
Developer(s)A-Frame Authors
Initial releaseDecember 2015; 9 years ago (2015-12)
Stable release
0.3.2 / October 12, 2016; 8 years ago (2016-10-12)
Repository
Written inJavaScript
PlatformCross-platform
TypeJavaScript framework
LicenseMIT License
Websiteaframe.io

A-Frame is an open-source web framework for building virtual reality (VR) experiences.[1] It is primarily maintained by Mozilla and the WebVR community. It is an Entity component system framework for Three.js where developers can create 3D and WebVR scenes using HTML. HTML provides a familiar authoring tool for web developers and designers while incorporating a popular game development pattern used by engines such as Unity.

History

A-Frame was developed within the Mozilla VR team during mid-to-late 2015. The Mozilla VR team pioneered the WebVR platform and spec,[2] but needed an easier way to create content. The original work behind A-Frame involved Diego Marcos, Josh Carpenter, Casey Yee, Chris Van Wiemeersch, and Kevin Ngo. A-Frame was created in order to allow web developers and designers to author 3D and VR experiences[3] with HTML without having to know WebGL[4]. A-Frame's first public release was on December 18th, 2015[5]. There are now over 75 contributors in total.[6]

Benefits

  • 3D and VR content authoring with HTML without build steps.[7]
  • Setup of scene with one line of HTML (<a-scene>) to handle canvas renderer, render loop, lights, controls, WebVR setup.[8]
  • Compatibility with most existing web libraries and frameworks (React (JavaScript library), AngularJS, D3.js, Vue.js).[9]
  • Entity component system architecture that favors composition over inheritance to define complex 3D objects using reusable components.[10]
  • Extensible entity-component plugin ecosystem.[11]
  • Visual inspector tool that can be invoked in the the browser from any live A-Frame scene.[12]

Usage

An entire A-Frame scene can be contained within a HTML file by including a single JavaScript file.

<html>
  <head>
    <title>Hello, World!</title>
    <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Since A-Frame is based on an Entity component system pattern, under the hood, every object in a scene is an entity. Entities are general placeholder objects. Components are composable and reusable modules that can be plugged into entities in order to add appearance, behavior, and functionality. Components are written in JavaScript and can be made to do anything, and then expose a declarative API through HTML. Here is an example of including a couple of community components for particle systems and physics via external scripts, and then being used from HTML.

<script src="https://unpkg.com/aframe-particle-system-component/"></script>
<script src="https://unpkg.com/aframe-physics-system/"></script>

<a-entity
  geometry="primitive: box"
  material="color: red; metalness: 0.5"
  dynamic-body="mass: 5"
  light="type: point; intensity: 1.1"
  particle-system
></a-entity>

Selected Uses and Works

A-Frame is being used for a variety of applications and purposes. The following lists identify selected uses and works.

Community

All online IDEs support A-Frame as a result of being based on HTML. Documentation is available for the API[20]. Support for developers committing to the library is provided via GitHub issues, while support for developers building apps and web pages is provided via StackOverflow[21]. Real-time on-line support is provided using Slack (software)[22]. Most of the developers are also on Twitter.

References

  1. ^ "A-Frame". A-Frame. Retrieved 2016-10-25.
  2. ^ "WebVR". Wikipedia. 2016-10-24.
  3. ^ Lang, Ben (2015-12-16). "Mozilla A-Frame: WebVR Starting With One Line of Code". Road to VR. Retrieved 2016-10-25.
  4. ^ "Mozilla makes it easy to create VR websites with 'A-Frame'". Engadget. Retrieved 2016-10-25.
  5. ^ "Mozilla Releases A-Frame WebVR Framework". AR VR Magazine. 2015-12-18. Retrieved 2016-10-25.
  6. ^ "aframevr/aframe". GitHub. Retrieved 2016-10-25.
  7. ^ "A-Frame". A-Frame. Retrieved 2016-10-25.
  8. ^ "A-Frame". A-Frame. Retrieved 2016-10-25.
  9. ^ "aframevr/awesome-aframe". GitHub. Retrieved 2016-10-25.
  10. ^ "Composition over inheritance". Wikipedia. 2016-10-02.
  11. ^ "A-Frame Registry". aframe.io. Retrieved 2016-10-25.
  12. ^ "aframevr/aframe-inspector". GitHub. Retrieved 2016-10-25.
  13. ^ "Fear of the Sky". Fear of the Sky. Retrieved 2016-10-25.
  14. ^ "Mars: A virtual reality tour of the Red Planet". Washington Post. Retrieved 2016-10-25.
  15. ^ "iStaging LiveTour". vrviewer.istaging.co. Retrieved 2016-10-25.
  16. ^ "A-Painter: Paint in VR in Your Browser". Mozilla VR Blog. 2016-09-19. Retrieved 2016-10-25.
  17. ^ "shopifyvr". shopifyvr. Retrieved 2016-10-25.
  18. ^ "Stand At The Edge Of Geologic Time". NPR.org. Retrieved 2016-10-25.
  19. ^ "GuriVR". gurivr.com. Retrieved 2016-10-25.
  20. ^ "Redirecting..." aframe.io. Retrieved 2016-10-25. {{cite web}}: Cite uses generic title (help)
  21. ^ "Newest 'aframe' Questions". stackoverflow.com. Retrieved 2016-10-25.
  22. ^ Slack. "Slack". aframe.io. Retrieved 2016-10-25.
Retrieved from "https://en.wikipedia.org/enwiki/w/index.php?title=A-Frame_(virtual_reality_framework)&oldid=746177486"