A-Frame: The Next Step in VR

Background Story - So Why A-Frame?

Where I work, which is the Teaching, Learning and Technology Lab at Stony Brook University's Library, I team up with others to help create projects for others and implement and improve already existing software used by many facilities across campus. We often do web-based software. Sometimes when there is time to spare, we experiment with Virtual Reality and Kinect. One day, one of my co-workers told me about this web framework called A-Frame. It provided a basic 3D environment for users of any level of experience can use. I found it really enticing, but I never had the time to go in depth about it. Fortunately, hack@CEWIT gave me the opportunity to finally experiment with it.

What is A-Frame? What does my program do?

A-Frame is a library to create a 3D environment optimized for VR, more specifically, the HTC Vive.The user can move using either the wasd keys or arrow keys and the mouse to click-and-drag to rotate the camera, the user is can only move along the x and z axis's for the demo. It demonstrates basic animation of objects and how objects work. What is presented is essentially an A-Frame iteration of the classic "hello world" program. Not only can flat controls like the keyboard and mouse can be used, but A-Frame is better optimized for the Vive VR headset. Not only that, but mobile users can look around based on the user's movement of the accelerometer in their phones however, they cannot move.

The Tools I Used

I used HTML and CSS to actually create the page and the A-Frame "Scene" and technically JavaScript to import the library. 3D enviornment building comes off as hard, but A-Frame is very simple at first, with rotations, color and size, but more complex later on with user interaction and sophisticated manipulation like skewing and custom polygonal shapes.

Challenges I Ran Into

It was a little rushed due to complications from former teammates. With the small amount of time I have I thought it would be a good idea to start to get to know A-Frame

Accomplishments that I'm proud of

It looks better than I expected. I think I did a good job of touching on the bare-bone basics. Apparently not many people know about this, so I'll be proud that I would be able to contribute to the hack@CEWIT by teaching a few people something new, something they haven't seen.

What I learned

A-Frame has a lot of potential in the role of WebVR (Web App-Based VR). I feel that WebVR is the next big step in the Virtual Reality gaming industry. A-Frame is not only good for VR, but can also dabble in AR and can host 360-degree panoramic video and images.

What's next for the A-Frame Demo

This was just a mere project to get my hands dirty. I was actually thinking about making a project involving seed generation to create terrain in which the aesthetics are derived from functions in A-Frame.

Built With

Share this project: