» All Posts «

The New Reality

Jackrabbit Design June 23, 2016 Creativity, Noteworthy, Resources, Technology, Web Design & Development

Share Comment 0

With the advent of consumer-grade virtual reality headsets (known as head mounted displays, or HMDs), we are entering an era only seen previously in science fiction.

An era where researching a school project online can mean not only reading about an important date in history, but also experiencing it in a virtual reality-based recreation. Imagine walking around, controlling the action going on around you, reaching out to touch an object of interest, and receiving context and helpful links for everything you see.

While this kind of in-depth virtual reality may seem impossibly futuristic, this is truly the era we are entering. HMDs such as the Oculus Rift, HTC Vive, and even Samsung VR are bringing people into virtual spaces more and more every day. Already we are seeing new products showcasing the capacity for movies and video games to place viewers in the center of the action. But what does the emergence of VR mean for internet users?


VR and the internet

When most people think of browsing the Internet, they imagine a point-and-click-style browser window. How could VR change this very basic experience in any significant way? Honestly, in two dimensions, there wouldn’t be much of a change. If you want to browse a 2-D website, you’re better off with your current monitor; headsets aren’t quite as sharp as current generation monitors. If, however, we imagine the VR version of the web as an interactive experience, with the user actually inside the screen, things begin to change.

This is what a team at Mozilla working on the WebVR project is envisioning for the future of web design. The internet has become infinitely sleeker and more intuitive with the implementation of UX design, so the next challenge becomes one of augmented and improved experience. With some WebVR websites, at the tap of a button, the 2-D page will fill your vision with a complete 3-D interactive world. At the moment, this experience is limited to a handful of tech demos: riding roller coasters, or dropping into a large space with shapes floating around you. We have a long way to go before we can convert a site like the very 2-D Amazon.com into a useable, enjoyable VR experience.

Roadblocks and Innovation

Another roadblock is the vast difference in expertise required to build conventional websites, versus creating an interactive environment. There are only a handful of WebGL developers in the world, but there are millions of web developers, web designers, and 3-D artists. Very few of these people, taken alone, are well-suited for developing VR spaces.

That’s where Mozilla’s other platform, A-Frame, comes into play. A-Frame is an open-source framework for creating 3-D and virtual spaces aimed at people well versed in HTML and CSS. A-Frame puts VR content creation into the hands of the general public. A-Frame allows the creation of VR scenes that work across desktop, the Oculus Rift, and mobile using only HTML. We can drop into the library and have a VR scene running with just a few lines of markup. Since A-Frame is based on HTML, we can manipulate scenes with JavaScript like we would with normal HTML elements, and we can continue using our favorite JavaScript libraries and frameworks.

Most recently, The Washington Post used A-Frame to build its interactive demo of the surface of Mars. As examples of future use, a realtor could offer interactive tours to prospective homebuyers, Wikipedia pages could include recreations of their subject matter, families could visit parks in faraway places – all without the potential prohibitive costs or physical demands of actually making the trip. Here are some really neat demos you can try for yourself on your mobile phone or browser. These are best experienced using Google cardboard or a desktop HMD, but you can also sample them in your 2-D browser without the virtual effect.


So let’s take a quick glance at how A-Frame works! If you have a WebVR enabled browser (Firefox and Chrome at the moment) or a Google Cardboard device, you can click on the results tabs to see the scenes in actions.

In this first pen, I’ve created a very simple box:

See the Pen A-Frame Tutorial Step 1 by Gerry Holt (@GerryHolt) on CodePen.

It would seem to be a flat square at first, but you can use WASD to move around and your mouse to look around. If you have an HMD, you can also click on the “enter VR” button. From here, we can start transforming the box. A-Frame uses a right-handed coordinate system which can be thought of:

  • Positive X-axis as “right”
  • Positive Y-axis as “up”
  • Positive Z-axis as coming out of the screen

The distance, as with height and width, are measured in meters. There’s no need to get too crazy with your items unless you are building something very tall, which could honestly look really cool in VR. So thinking of X Y and Z, we can set the position, rotation and scale of our objects to start to layout our scene.

See the Pen A-Frame Tutorial Step 2 by Gerry Holt (@GerryHolt) on CodePen.

Next, we can apply a texture to the box in one of two ways. First we can apply it directly to the box as follows (this step currently only works in firefox as there is a bug in the texture display on the chrome deployment of WebVR):

See the Pen A-Frame Tutorial Step 3 by Gerry Holt (@GerryHolt) on CodePen.

However, this will cause your scene to render before your images have all loaded in, so you can take this one step further by using the asset management system. We’ll define the image as an <img> tag, give it an ID and point to it using a selector:

See the Pen A-Frame Tutorial Step 3.5 by Gerry Holt (@GerryHolt) on CodePen.

From here we can go a step further and make the box animate using the built in animation system. We can define animations by placing an <a-animation> tag as the child of the entity to animate. Here, I’ve made the box rotate on the Y axis 360 and told it to repeat indefinitely.

See the Pen A-Frame Tutorial Step 4 by Gerry Holt (@GerryHolt) on CodePen.

I’ve also given it a linear easing so it completes a smooth rotation without a starting and stopping point and told it to have a duration of 3 seconds to complete a full rotation. Next, we can interact with the box via clicking (or in VR gazing). To do this, we’ll need to define a camera on the scene and give it a cursor child. Then we can tell the animation to only start when the cursor “clicks” the box. We do this using a click event and a begin attribute. To demo this, click in the window to control the camera, hover over the box and then click it to activate the animation.

See the Pen A-Frame Tutorial Step 5 by Gerry Holt (@GerryHolt) on CodePen.

This can also be done through a JavaScript listener or a helper element, but for this we’ll stick to A-Frame. So we’ve made our box, moved it around, and spun it on command. We’re almost done! Just two more steps to go! Now we’re going to give the scene a little lighting using <a-light>! For the purposes of this example, I’m going to change the box to be white, and use lighting colors to change the box.

See the Pen A-Frame Tutorial Step 6 by Gerry Holt (@GerryHolt) on CodePen.

Our ambient light is a light gray, while our spot light is a green.

Finally, we’ll add a background to the scene using the <a-sky> tag. The background can be a color or evena 360-degree image or video. For now, let’s keep it simple and use a color.

See the Pen A-Frame Tutorial Step 7 by Gerry Holt (@GerryHolt) on CodePen.

And that’s it! Our simple spinning box scene is complete and we only added an extra 21 lines of code. We can push this futher using CSS, but we’ll stop here for today.

Navigating Virtual Reality

Tools like A-Frame, however, don’t automatically equate to skill sets. There is no reason that the way information flows through 2-D space should hold all that much similarity to how it operates in 3-D space. We have a lot to learn, but the challenge sounds like an extremely fun and exciting time to jump in and help shape the future of VR.

TL:DR – VR is very cool. It’s also difficult and we’ve not found great ways to use it for the web, yet! But through trial and error, we’ll get there! For now, I leave you with a virtual bunny!

See the Pen Bunny Time by Gerry Holt (@GerryHolt) on CodePen.


There aren't currently any comments for this entry.

Leave a Comment