Easy Virtual Reality with A-Frame - Clearly Innovative | Web and Mobile DevelopmentClearly Innovative | Web and Mobile Development
Blog page

Recently we hosted a meetup at Inclusive Innovation Incubator discussing the up-and-coming Virtual Reality (VR) Framework A-Frame. We started off by talking about the history of Virtual Reality and what A-Frame actually is. You can find the slides for the presentation here.
The project itself was hosted on Firebase. You can click this link to see the demo.

History of Graphics and VR in the Browser

A-frame is the next step forward in a long line of graphics library enhancements starting with OpenGL. OpenGL is an API standard that graphics hardware manufacturers integrate with their products to allow developers to create 3D animations. Because it offers direct control of the underlying graphics processing of the computer, for some time, OpenGL was only accessible through native programming languages, such as C and C++.

In 2006, 14 years after its release, OpenGL became managed by Khronos Group, a non-profit technology consortium that has since made huge leaps in development in OpenGL and other technologies, including the creation of WebGL. With WebGL, web browsers now have a standard API to interface with OpenGL using javascript. The most widely used library that utilizes WebGL is three.js. With 3D graphics now available through the web, and Virtual Reality taking over the tech conversation, it only makes sense that VR experiences would soon be easily constructed for websites.

A-Frame Arrives to Simplify The Process

There are a few frameworks available that make it really easy to plug a VR scene into your app, and A-Frame is one of the best so far. Developed by Mozilla, A-Frame lets you piece together a life-like (or fantasy-like) scene using just a few custom HTML elements.

aframe-code
aframe-result

All of the “entities” in your scene will be contained within the a-scene element. Any direct children to the a-scene element will use the global coordinate system to position items. You can then start to combine entities by nesting them within each other. Coordinates for nested items are relative to their parent element. To see this in action, check out the tutorial project we set up during the meetup: A-Frame Meetup

Aframe demo

 

Check Us Out

We regularly host meetups about the technology we like to use, so stop by our Meetup page or Eventbrite and sign up. If you’re interested in talking or hearing about a topic, let us know!

Meetup

The Washington DC Ionic Framework Meetup

Washington, DC
93 Members

This is a group for anyone interested in the Ionic Framework for web and mobile application development, including¬† PWAs or Progressive Web Apps… This includes related techn…

Next Meetup

Kick Back & Code

Thursday, Jul 26, 2018, 6:30 PM
6 Attending

Check out this Meetup Group →

 

Eventbrite

Blast From The Past

We have blog posts for other past meetups. Read them!

Getting Started with Unit Testing in Ionic 2+ Apps
NgRx State Management with Inclusive Innovation Incubator
The Washington Ionic Framework Meetup: Session 1 – State Management with MobX