The Basics: Creating a Web VR Space
Framework
Web VR is an interesting phenomenon in the web development space. It allows for the creation of virtual reality atmospheres within a web browser. There's a number of different frameworks out there that allow developers to create Web VR. For my purposes, I chose A-Frame as my framework.
Tutorial and Differentiation
To assist in the creation of an A-Frame VR space, I enlisted the help of this tutorial to learn the basics of A-Frame VR creation. While several aspects of the tutorial remain in place, I have tweak several aspects (such as colors of the shapes and background) while also adding in text and another shape (the sphere) to modify the space originally envisioned by the tutorial.
To see the final results, click here!
Overall, A-Frame is an excellent framework for creating VR spaces on the web. It runs completely off its own built-in JavaScript library, removing the barrier of having to install something extra (as other VR frameworks tend to need). A-Frame coding is a breeze to learn too, as it is completely made of HTML and JavaScript, opening VR worlds up to more developers. The only con I can think of would be getting used to positioning the objects can be a bit tricky at first. Since positions in A-Frame don't have units of measurement or text alignments, it can be confusing to figure out the exact position coordinates for objects and/or text.
All in all, this project really helped introduce me to the vast world of virtual reality on the web. It was quite the experience learning how to craft basic 3D objects and manipulate them through animation. I didn't really have any trouble finding valuable resources and tutorials on A-Frame-built content. Even A-Frame's own website covers in detail several basic aspects of its framework. One improvement that could have been made is using an image instead of a plain color background. A-Frame recommends images be equirectangular so that they fill the entire 360 degree canvas. While examples of these are out there, the options felt limited and didn't really mesh well with the abstract nature of my piece. Hopefully in the future, should this become more well-adopted by the web development community, learning how to create VR-ready backgrounds will be an inexpensive venture.