WebVR is a JavaScript API that allows virtual reality (VR) experiences to run in a Web browser on VR headsets, mobile phones & tablets, and regular computers. The goal is to make it easier for everyone to get into VR experiences, no matter what device is used. You need two things to experience WebVR: a headset and a compatible browser.
The easiest way to get started is with a basic headset such as Google Cardboard. Just drop your phone in, and you’re ready to go. For the best performance and most features, you can use a VR headset connected to a computer. These will allow for higher frame rates, higher resolutions, and even let you walk around in VR. Or, on some sites, you can just use your computer or phone without a headset. You won’t be able to see in 3D or interact as fully in most VR worlds, but you can still look around in 360 degrees.
A-Frame (aframe.js), created by Mozilla, is a front-end Web framework for developing WebVR. Technically, A-Frame is an abstraction of three.js, a JavaScript library that uses the WebGL API to render 3D graphics in the browser.
It's easy to get started with virtual reality using A-Frame, and even a Javascript amateur can create good VR experiences!
The best way to begin to understand A-Frame would be through an example. Let's dive in!
An A-Frame app is simply an HTML Web page that includes the A-Frame library and contains entities embedded within a-scene tags.
A-Frame uses entity-component architecture. Every object in A-Frame is an entity represented as an HTML tag. Components that look like HTML attributes add behaviors to entities. Some components, such as geometry, material, and position, are built into A-Frame. You can also create your own custom components in JavaScript or use existing components from the A-Frame registry.
Installation
The first step is to include the aframe.js CDN build in the head of the HTML file. (If you’re wondering why you insert this script in the top of the file, it’s because the VR environment cannot be loaded without the framework.) If you want to serve it yourself, you can download the JS file here.
Setting Up
A few things we encountered which are important to note:
File > Open menu in a browser.That's all there is to it. We're ready to get started!
For this demo, we'll use A-Frame to create a rotating 360° panorama which will display inside our VR scene. A sphere will be added to the scene and will slowly rotate, reflecting the background as it moves. An image of an abandoned cabin on a snowy seaside is the scene.
Here is the full code. As you can see, it's really only a few lines!
The Code Explained
All of the aframe action happens within the a-scene component. It acts as a signal to the device that it needs to render the Web page in VR mode. Within, you insert components such as assets, geometry and position. These components are called primitives.
The embedded component is added to a-scene which makes it easier to embed the scene in the layout of an existing 2D Web page.
The camera primitive determines what the user sees. We can change the viewport by modifying the camera entity’s position and rotation.
A-Frame represents an entity via the a-entity element. Entities are placeholder objects to which we plug in components to provide them appearance, behavior, and functionality. Entities are inherently attached with the position, rotation, and scale components.
Images are placed withing the a-assets component. Images need to be equirectangular (2:1 ratio) to ensure the image is not stretched. Our demo image is placed twice, once for the sphere (reflection), and once for the background (sky).
This component creates spherical or polyhedron shapes. Inside, it creates a geometry component with primitive set as sphere. This is our demo's rotating sphere that reflects the background as it moves. Attributes are set within the a-animation tag.
The sky primitive adds a background color or 360° image to a scene. It is a large sphere with a color or texture mapped to the inside. This is our demo's rotating 360° background image. Attributes are set within the a-animation tag.
Our rotating cabin panorama turned out pretty cool! When viewed from a non-VR device such as a desktop computer, it’ll give you the option to drag around the panorama. When viewed in VR, you can move your head around to view the panorama.
A second demo was created using a 360° image of Citizen Hall Church in Munich, Germany. Click on the image to view the scene in a new page. Be sure to drag up to view the church ceiling. Beautiful!
Note: Sound was added and will autoplay. (There is a delay of a few seconds.)
VR SHOWCASE
Immerse yourself in some of the most unique experiences this amazing technology has to offer!
See More
Bullying Prevention Animated Storybook
An Interactive Film from Patagonia
History and Heritage of the Portuguese City
A WebGL Experiment from France
A-Frame is an amazingly-simple and easy-to-learn framework for creating VR experiences — with only a few lines of code, we were able to create a neat rotating panorama! Of course, we've only touched the surface, and there's so much more A-Frame is able to do. Check out the documentation and try creating your own!
We hope you have enjoyed this introduction to VR using A-Frame and have learned a few things in the process! Until next time, happy coding!
Projects
