In recent years, the topic of the metaverse has been gaining traction in the news and events with the aim of expanding the way we experience life in the near future. However, what exactly is the metaverse? The term first appeared in Neal Stephenson's 1992 Cyberpunk novel "Snow Cash". The word stems from the Greek word "Meta,", which in Greek means "Beyond" and "Universe", resulting in the blending Meta+Verse, conveying the concept of "Beyond the Universe." Even so, there is no assertive consensus on what Metaverse is so far, which makes it difficult to explain. However, many users have already experienced at some point virtual reality software, such as the latest-generation games, or augmented reality software, such as photo filters and effects on social networks. Therefore, it is something that can currently be experienced, even though not easily describable.
The Metaverse is real, however, it is still under construction. Right now, infrastructures, patterns, and a lot of content are being created to advance technology adoption. Software developers play a vital role in this context in developing new libraries, frameworks, and content to provide a sustainable environment for technological persistence.
This article introduces the A-Frame framework, explaining what it is, and its benefits, without delving into a more technical discussion, but enlightening the explanation with some code samples. In short, A-Frame enables web content creators to build Virtual Reality and Augmented Reality without ever studying computer graphics and all the mathematics behind them, adding tridimensional interactions to their pages.
What is A-Frame?
A-Frame is a huge framework for building virtual realities, offering infinite possibilities, using mostly HTML, which turns it into an easy technology to start learning. Furthermore, it has a good architecture to compose and extend components, granting freedom to the content creators to reuse elements and create new ones. As the browser serves as the driving force behind the framework's operation, it amplifies the adoption of VR and AR by reaching a wide range of devices.
In a practical way, to build a 3D world environment, it is only a matter of importing A-Frame with the <script> tag and including the <a-scene> tag inside the <body> HTML code, and your code will be ready to build a VR scene. Between the <a-scene> tags, the framework will take care of all the issues related to managing a three-dimensional scene, interpreting all the HTML's markups, and abstracting all the computational graphic knowledge.
The example code below draws a cube inside the scene. Reading the code, it is easy to realize that all A-Frame interpretable markups have the “a-” in front of them, so that’s how it knows what to take into account. Another notable point is the code size. Only 5 lines are required to have a working scene.
<!DOCTYPE html>
< html lang="en">
<head>
< script src="https://aframe.io/releases/1.4.0/aframe.min.js"> < /script>
</head>
<body>
<a-scene>
< a-box color="grey" depth="2" height="2" width="2" position="0 2 -4" rotation="45 45 45"> < /a-box>
< a-sky color="green"> < /a-sky>
</a-scene>
</body>
< /html>
Result
Explaining the code:
- <a-scene>: This is to mark the place where the framework codes will be managed.
- <a-box>: A Tag to draw a cube. In the example, a cube of size 2, gray color and rotated by 45 degrees on all the 3 axes.
- <a-sky>: This tag controls the background color of the environment. In the example, the green color was used to contrast with the gray cube.
This way, it is pretty easy to build a 3D cube inside a web page using the browser. Anyone can write code like this to build their first VR experience with little effort. However, it is clear that drawing a cube is not enough to contribute to the Metaverse, it needs to offer much more.
What are the advantages of A-Frame?
- VR and AR in a simple way and with HTML declaration: Since HTML is an easy language to understand and teach, this makes the framework accessible to a large group of people who want to create new 3D content, including front-end developers, artists, designers, educators, etc.
- Entity-Component-System (ECS): A-Frame was built based on three.js, a JavaScript library that enables the creation of 3D content on the Web using WebGL. This allows developers to create, compose, and reuse components along the lines of ECS, an architectural pattern that simplifies components composition by inheritance and hierarchy in games and 3D environments. HTML is just a layer on top for easy creation, furthermore, programmers can code using JavaScript, DOM API, three.js, WebXR, and WebGL to further expand the possibilities.
- Support for most VR and AR devices: The framework supports most Virtual Reality and Augmented Reality devices on the market and their controls. Some examples include Oculus Quest, Vive, Windows Mixed Reality, Daydream, GearVR, Cardboard, desktops, and smartphones. As the technologies of glasses are still not so accessible, mobiles are a good alternative for testing applications. Nowadays phone browsers offer the option to choose between AR and VR when it identifies the use of a scene. In such cases, it is recommended to code in an online IDE, such as Glitch or Codepen, and use “deploy” to access the page regardless of the device.
- Performance: This could be a concern for developers who are reading this article. Despite running in the browser, A-Frame did a good job in this regard, since it was built with optimization in mind from the beginning. What makes it highly performant, despite utilizing the DOM to render objects, is its ability to minimize manipulation of the browser engine. Furthermore, it efficiently manages object updates in memory, resulting in minimal garbage and overhead.
- Visual Inspector: A-Frame has a Visual Inspector that simplifies scene adjustments, without having to change the attributes in the code and then check by building everything again. This tool resembles the browser's dev tools. To open it, just use the shortcut <ctrl>+<alt>+i.
- Lots of ready-to-use components: The framework provides components natively that make it easy to add elements to the scene, without the need for specific computer graphics knowledge. Some examples are lighting, camera control, raycaster, geometric objects, shadows, positional audio, control for a wide variety of devices, object materials, animation, 3D models importing, and texts. In addition to these, as it is easy to reuse components, adding a strong and active community, there are components for object and scene physics, movement, augmented reality, hand simulation, and much more.
Key Takeaways
The Metaverse, despite being a reality far from the public for various reasons, is a tangible technology in experiments and plausible to build with tools already accessible to content creators. In that spectrum, A-Frame comes to help, with a powerful set of components and endless possibilities for expansion and improvements, enabling web developers to create new user experiences, with little code and a small learning curve. Of course, much still needs to be done, but the seeds have already been planted for that to happen.
Acknowledgment
This piece was written by Breno Mattos de Paula, Software Developer at Encora. Thanks to Flávia Negrão and João Caleffi for reviews and insights.
About Encora
Fast-growing tech companies partner with Encora to outsource product development and drive growth. Contact us to learn more about our software engineering capabilities.
