A-Frame (virtual reality framework)

Last updated
A-Frame
Developer(s) Diego Marcos, Don McCurdy, Kevin Ngo
Initial releaseDecember 2015;8 years ago (2015-12)
Stable release
1.6.0 / May 23, 2024;5 months ago (2024-05-23) [1]
Repository
Written in JavaScript
Platform Cross-platform
Type JavaScript framework
License MIT License
Website aframe.io

A-Frame is an open-source web framework, written in JavaScript, for building virtual reality (VR) experiences. [2] It is maintained by developers from Supermedium (Diego Marcos, Kevin Ngo) and Google (Don McCurdy). A-Frame is an entity component system framework for Three.js where developers can create 3D and WebXR 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.

Contents

History

A-Frame was originally developed within the Mozilla VR team during mid-to-late 2015. [3] A-Frame was created in order to allow web developers and designers to author 3D and VR experiences [4] with HTML without having to know WebGL. [5] A-Frame's first public release was on December 16, 2015. [6] On December 16, 2019 A-Frame version 1.0.0 was released. [7]

Community

All online IDEs support A-Frame as a result of being based on HTML. Documentation is available for the API. [8] 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. [9] Real-time on-line support is provided via Slack. [10] Most of the developers are also on Twitter [ citation needed ].

Usage

Mozilla Hubs Chat room software uses A-Frame. [11]

Example

<html><head><scriptsrc="https://aframe.io/releases/1.3.0/aframe.min.js"></script></head><body><a-scene><a-boxposition="-1 0.5 -3"rotation="0 45 0"color="#4CC3D9"></a-box><a-sphereposition="0 1.25 -5"radius="1.25"color="#EF2D5E"></a-sphere><a-cylinderposition="1 0.75 -3"radius="0.5"height="1.5"color="#FFC65D"></a-cylinder><a-planeposition="0 0 -4"rotation="-90 0 0"width="4"height="4"color="#7BC8A4"></a-plane><a-skycolor="#ECECEC"></a-sky></a-scene></body></html>


See also

Related Research Articles

<span class="mw-page-title-main">JavaScript</span> High-level programming language

JavaScript, often abbreviated as JS, is a programming language and core technology of the Web, alongside HTML and CSS. 99% of websites use JavaScript on the client side for webpage behavior.

A browser engine is a core software component of every major web browser. The primary job of a browser engine is to transform HTML documents and other resources of a web page into an interactive visual representation on a user's device.

cairo (graphics) Vector graphics-based software library

Cairo is an open-source graphics library that provides a vector graphics-based, device-independent API for software developers. It provides primitives for two-dimensional drawing across a number of different backends. Cairo uses hardware acceleration when available.

JSDoc is a markup language used to annotate JavaScript source code files. Using comments containing JSDoc, programmers can add documentation describing the application programming interface of the code they're creating. This is then processed, by various tools, to produce documentation in accessible formats like HTML and Rich Text Format. The JSDoc specification is released under CC BY-SA 3.0, while its companion documentation generator and parser library is free software under the Apache License 2.0.

<span class="mw-page-title-main">WebGL</span> JavaScript bindings for OpenGL in web browsers

WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics, image processing, and effects in the HTML canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

<span class="mw-page-title-main">Node.js</span> JavaScript runtime environment

Node.js is a cross-platform, open-source JavaScript runtime environment that can run on Windows, Linux, Unix, macOS, and more. Node.js runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

Emscripten is an LLVM/Clang-based compiler that compiles C and C++ source code to WebAssembly, primarily for execution in web browsers.

<span class="mw-page-title-main">Brackets (text editor)</span> Editor for web development

Brackets is a source code editor with a primary focus on web development. Created by Adobe Inc., it is free and open-source software licensed under the MIT License, and is currently maintained on GitHub by open-source developers. It is written in JavaScript, HTML and CSS. Brackets is cross-platform, available for macOS, Windows, and most Linux distributions. The main purpose of Brackets is its live HTML, CSS and JavaScript editing functionality.

Mozilla is a free software community founded in 1998 by members of Netscape. The Mozilla community uses, develops, publishes and supports Mozilla products, thereby promoting exclusively free software and open standards, with only minor exceptions. The community is supported institutionally by the non-profit Mozilla Foundation and its tax-paying subsidiary, the Mozilla Corporation.

<span class="mw-page-title-main">PDF.js</span> PDF viewer in JavaScript included in Mozilla Firefox

PDF.js is a JavaScript library that renders Portable Document Format (PDF) files using the web standards-compliant HTML5 Canvas. The project is led by the Mozilla Corporation after Andreas Gal launched it in 2011.

asm.js is a subset of JavaScript designed to allow computer software written in languages such as C to be run as web applications while maintaining performance characteristics considerably better than standard JavaScript, which is the typical language used for such applications.

Web Components are a set of features that provide a standard component model for the web allowing for encapsulation and interoperability of individual HTML elements. Web Components are a popular approach when building microfrontends.

A headless browser is a web browser without a graphical user interface.

<span class="mw-page-title-main">WebAssembly</span> Cross-platform assembly language and bytecode designed for execution in web browsers

WebAssembly (Wasm) defines a portable binary-code format and a corresponding text format for executable programs as well as software interfaces for facilitating communication between such programs and their host environment.

WebXR Device API is a Web application programming interface (API) that describes support for accessing augmented reality and virtual reality devices, such as the HTC Vive, Oculus Rift, Meta Quest, Google Cardboard, HoloLens, Apple Vision Pro, Magic Leap or Open Source Virtual Reality (OSVR), in a web browser. The WebXR Device API and related APIs are standards defined by W3C groups, the Immersive Web Community Group and Immersive Web Working Group. While the Community Group works on the proposals in the incubation period, the Working Group defines the final web specifications to be implemented by the browsers.

<span class="mw-page-title-main">Electron (software framework)</span> Development framework built on Chromium

Electron is a free and open-source software framework developed and maintained by OpenJS Foundation. The framework is designed to create desktop applications using web technologies that are rendered using a version of the Chromium browser engine and a back end using the Node.js runtime environment. It also uses various APIs to enable functionality such as native integration with Node.js services and an inter-process communication module.

Angular is a TypeScript-based free and open-source single-page web application framework. It is developed by Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. The Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators. According to the Stack Overflow Developer Survey, Angular is one of the most commonly used web frameworks.

<span class="mw-page-title-main">Babylon.js</span> Real-time 3D rendering engine for JavaScript

Babylon.js is a JavaScript library and 3D engine for displaying real time 3D graphics in a web browser via HTML5. The source code is available on GitHub and distributed under the Apache License 2.0.

<span class="mw-page-title-main">Phaser (game framework)</span> Cross-platform JavaScript video game framework

Phaser is a 2D game framework used for making HTML5 games for desktop and mobile. It is free software developed by Photon Storm.

References

  1. ↑ "A-Frame". A-Frame. 19 June 2024. Retrieved 19 June 2024.
  2. ↑ "A-Frame". A-Frame. Retrieved 2016-10-25.
  3. ↑ "Introducing A-Frame: Building Blocks for WebVR". Mozilla VR Blog. 2015-12-16. Retrieved 2016-10-26.
  4. ↑ Lang, Ben (2015-12-16). "Mozilla A-Frame: WebVR Starting With One Line of Code". Road to VR. Retrieved 2016-10-25.
  5. ↑ "Mozilla makes it easy to create VR websites with 'A-Frame'". Engadget. 17 December 2015. Retrieved 2016-10-25.
  6. ↑ "Mozilla Releases A-Frame WebVR Framework". AR VR Magazine. 2015-12-18. Archived from the original on 2017-09-10. Retrieved 2016-10-25.
  7. ↑ "A-Frame v1.0.0 - WebXR Support, AR Mode". A-Frame. Retrieved 30 March 2020.
  8. ↑ "Introduction — A-Frame". aframe.io. Retrieved 2016-10-25.
  9. ↑ "Newest 'aframe' Questions". stackoverflow.com. Retrieved 2016-10-25.
  10. ↑ Slack. "Slack". aframe.io. Retrieved 2016-10-25.
  11. ↑ "mozilla/hubs". Mozilla. 29 March 2020. Retrieved 30 March 2020.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.