Virtual Reality:
Virtual reality is the technology that can simulate a user’s physical presence in a realistic virtual environment. Virtual reality has been creating a lot of buzz for quite some time now. Oculus Rift & Google Cardboard were the early platforms whose launches made developers & consumers realize VR’s practical potential. VR is being considered as next platform after we moved from PC to Smartphone, and this will change how we work, play and community digitally.
Native VR experiences available today have a several downsides such as needing to go through gatekeepers at app stores for distribution, users having to do large downloads and installs, and consisting of proprietary and closed cultures. There are also a lot of cross-compatibility issues because of the fragmented VR ecosystem today.
VR is leading towards a drastic makeover of the computer industry, and the Web has already proven itself as the most open platform, it will be exciting to see how VR will change the web also. During this era of reformation, the Web is not going to remain an exclusively 2D environment. In fact, VR has already arrived to the browser. It is incredibly fun to play and work with! Mozilla & Google have launched https://mozvr.com/ and https://vr.chromeexperiments.com/ websites with some experimental VR experience environments/apps.
WebVR & A-Frame:
WebVR is an open virtual reality platform with all of the advantages of the Web: – open, connected, and instant. More technically, WebVR is set of standard browser APIs that enable direct WebGL rendering to headsets and access to various VR sensors for pose (i.e., position and rotation) and input.
Though WebVR has made it possible to create VR content on the web, but it’s too difficult to create WebVR experiences. With three.js, the most popular 3D library, it takes over 100 lines of boilerplate per project; which is an obstacle if we want to do a small prototype or experiments. The boilerplate also needs to be updated with new versions of WebVR, three.js & needs to handle cross-browser & cross-platform compatibility related issues. What if we could encapsulate all that boilerplate to just one line of HTML and quickly go from idea to prototype without hassle! Let me introduce you A-Frame, a vehicle to kick start WebVR development.
A-Frame is open-source framework, launched in December 2015 by Mozilla, for easily creating 3D and VR experiences on the Web. A-Frame puts VR content creation into our hands by allowing us to create scenes with declarative HTML that work across desktop, smartphones, Oculus Rift, and the HTC Vive. It takes just one line of code ‘<a-scene></a-scene>’, instead of heavy boilerplate code, to get started; which is very motivating to experiment and prototype. It also saves a lot of boilerplate for creating objects, and similarly does many other magics. We can manipulate scenes with vanilla JavaScript just as we would with ordinary HTML elements (e.g. by inspecting elements on browse), and we can continue using our favorite JavaScript libraries and frameworks (e.g. d3, React). Here is sample code for Hello World program –
Hello World code:
Output:
You can checkout blogpost on my experience about getting started with A-Frame to see why I loved working with A-Frame. Few more related links –
Contributing to A-Frame:
Being an open source project, A-Frame has an awesome community of volunteers. If you are interested, check out the Contributing Guide, join WebVR-India Telegram group or A-Frame Slack channel. Looking forward to see you there, #HappyContributing 🙂
