Four years ago, I had the honor of running a hands on workshop at the second annual Afrotectopia Conference, held over a jam-packed summer weekend in August at Google NYC. The workshop was called, Intro to WebVR with A-Frame. WebVR was a JavaScript API that allows VR experiences to run in a web browser on VR headsets, mobile phones and tablets, and regular computers. It has since been deprecated and replaced by the WebXR Device API. At the time, I chose to teach the workshop participants A-Frame for a couple reasons:
Accessibility (cost and open source ecosystem)
Easy to share and publish content
A-Frame is an abstraction of three.js, another JavaScript library that uses WebGL API to render 3D graphics in the browser. Simply put, it is an HTML webpage that includes the A-Frame library, making it super simple for a newbie to get started.
Participants worked on a live coding project where they learned the basics:
Create a simple virtual reality website (using HTML)
Learn the basics of the A-Frame library
Work with primitive shapes like cubes and spheres (which they later swapped out for 3D assets)
Why Learn (and Teach) VR?
As a former architect, urban planner and now product-minded technologist I found myself uniquely poised to harness my spatial design and thinking skills. At the time, I was teaching a software engineering immersive course and my focus was squarely on the browser. Building and teaching others how to build this simple game was my initial foray into leveraging my body’s physical inputs — head and eyes — to interact with the computer.
How Can I Build Avocado, No Toast?
To learn how to set up a boilerplate WebVR project using the A-Frame library, check out the step-by-step instructions here.