The easiest way to realize Web virtual reality - A-Frame framework

【Abstract】This article will introduce you to the easiest way to implement Web VR support—A-Frame. A-Frame is an open source framework that can build WebVR solutions through custom HTML elements. With this framework, Web programmers can add VR support to Web development without learning a new language or 3D engines like Unity and Unreal. As an introductory tutorial, this article will guide you step by step to build a Web page with Web VR support.

one, What is A-Frame?

A-Frame (https://aframe.io/) is an open source framework for creating WebVR experiences using custom HTML elements. These elements use three.js (http://threejs.org/) and WebGL (https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) to create VR-enabled elements in the scene without requiring developers to learn lower-level APIs such as WebGL just to build simple experiences.

The A-Frame development team is working hard to create a scalable VR Web that allows developers to build competitive APIs. And, once this idea is widely adopted and established, it is likely to become part of a defined standard. This allows us to use new features provided by JavaScript frameworks and experimental versions of browsers today, for example, without having to wait for a standard to be implemented and supported by browsers.

two, Device compatibility issues

Next, a very important question is probably: Is A-Frame compatible with browsers? A surprising conclusion is that A-Frame works well on all platforms as long as it is a WebGL-compatible browser; of course, the 3D scene is still visible without VR support. This means that popular browsers such as Chrome, Firefox, Edge, and Opera can display desktop-level interactive 3D experiences. To experience VR, you need to connect a device such as Oculus Rift to some browser that supports WebVR technology to achieve VR compatibility (please continue to read below).

On the smartphone side, modern smartphones from the last two generations running iOS and Android are best suited (iPhone 6+, Samsung Galaxy S6+, and my personal HTC One M9 work great). Most of these smartphones also support VR when plugged into a Google Cardboard headset, so VR compatibility is actually easier to achieve and manage on a smartphone than it is to get VR working on your desktop.

three, Preparation

To follow this guide to complete an A-Frame experiment, you will need to do the following:

l To implement a basic type of non-VR experience:

n You will need a browser that supports WebGL as described above.

l To implement a desktop-based VR experience:

n You will need to have a browser that supports WebGL installed, such as the latest Chromium WebVR version (https://drive.google.com/folderview?id=0BzudLt22BqGRbW9WTHMtOWMzNjQ) or Firefox Nightly (https://nightly.mozilla.org/).

n An Oculus Rift headset (and possibly an HTC Vive, I just haven't actually tested it yet).

l To realize VR experience based on mobile devices, you need the following:

n The latest models of smart devices are generally able to at least display the scene and allow you to look around in a semi-virtual reality view.

n A Google Cardboard or Gear VR headset.

Four, Start working

First, open the A-Frame framework's entry-level tutorial page (https://aframe.io/docs/guide/getting-started.html). Currently, the A-Frame team has provided various options to facilitate various experiments related to the A-Frame framework, including CodePen code snippets, an npm build version, an A-Frame framework JS file (downloadable directly or obtained through CDN), an HTML template, and a local development server. To make things as simple as possible, we will download and work directly with the A-Frame boilerplate (https://github.com/aframevr/aframe-boilerplate/archive/master.zip).

Unzip the above template to your system in the same location as your web project. This template does not have to be run on a local web server. The template uses the A-Frame framework from a CDN, so we will focus on the index.html file. The configuration file package.json provides a local web server based on npm for testing purposes. In this article, we will use this server - however, it is not necessary to test it now.

five, Start the local server

As mentioned above, the A-Frame boilerplate comes with its own local web server ready to use. While this isn't always necessary to test your A-Frame framework, doing so is good practice and can reduce confusion around various cross-origin policy issues that can arise when running web pages from your computer's file system.

To run the local web server, switch to your template project folder from your terminal/command prompt and run the following command:

npm install && npm start

This will install all the necessary files for the web server and then run it. Afterwards, if you want to run the server again, just run the command "npm start".

Once we have our local web server running, it should automatically open our web browser and load our template web page file. The template has LiveReload support added to it - meaning that whenever you change the page its contents will automatically refresh.

If you need to open the web page on a different device, or the web page does not automatically open after running the local web server, you can enter http://localhost:3000 or http://192.168.0.1:3000 in your browser. Note that the IP address here corresponds to the IP address of your computer.

You should see your initial scene look something like this:

six, Building a new scene

Now, let's remove the template code and get rid of everything inside the <body> tag, leaving only the <a-scene> part. All of our A-Frame elements will be placed inside this <a-scene> component. The code currently looks like this:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Our First A-Frame Experience</title>

<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>

</head>

<body>

<a-scene>

</a-scene>

</body>

</html>

A-Frame provides a set of prototypes that provide us with commonly used elements in VR scenes.

Next, let's add some elements to build a custom scene.

seven, Creating the Sky

Every scene needs a sky component (or some type of background). This is either a monochrome image or a panoramic image. The prototype of this component is <a-sky>.

The code for the sky part using a monochrome image is as follows:

This will create a lovely natural bright mauve sky effect for our target scene, as shown in the image below:

As with the brilliant sky effects, using a 360 degree panorama will look even better. A great place to find such skybox images is on the Flickr website. There are quite a few panorama images on this site that are free for everyone to reuse.

I found the following image on Flickr by Luca Biada (https://flic.kr/p/bCMJ4X):

When we put it in our scene using the following code:

We can get a 360-degree panoramic view of the scene as shown below:

eight, Add a cuboid

Now that we have a scene, let's add some elements to it. Using the <a-box> prototype, we can place some cuboids and cubes into our scene. The following code will add an orange cuboid to the road in our scene:

<a-box color="#B76705" depth="2" height="2" width="4" position="0 0 -1.25"></a-box>

The color attribute in the code has the same function as the color attribute in our skybox above, which is used to specify the material color of our cuboid element. Then, the shape is specified by the attributes depth, height, and width. Our cuboid is 2 x 2 x 4 in size, and looks like a very wide box, vaguely like a paper car on the road. To put the box in a different position in the scene, just modify its position attribute. This attribute uses three values, corresponding to the three coordinate axes: x-axis, y-axis, and z-axis.

The cuboid created by the above code looks like the following figure in our scene:

Nine, Add some cylinders

Now we'll use the <a-cylinder> prototype to add a few cylinders to the street in our scene:

<a-cylinder color="#1E130E" height="40" radius="0.5" position="-40 0 -8"></a-cylinder>

The color and position attributes have the same meaning as the cuboid we created above; however, two new attributes are added here - height and radius, which are used to set the height and radius of the cylinder respectively. The figure below shows the scene graph after we added the new column.

So, we can easily extend the above idea. All we need to do is add a row of columns using the following code:

<a-cylinder color="#1E130E" height="40" radius="0.5" position="-40 0 -8"></a-cylinder>

<a-cylinder color="#1E130E" height="40" radius="0.5" position="-10 0 -8"></a-cylinder>

<a-cylinder color="#1E130E" height="40" radius="0.5" position="20 0 -8"></a-cylinder>

<a-cylinder color="#1E130E" height="40" radius="0.5" position="50 0 -7"></a-cylinder>

The running results are shown in the figure below:

There are many other options available for cylinders in A-Frame, and you can refer to the Cylinder reference documentation for yourself.

ten, Add another sphere

Now, let's add a sphere to the 3D scene. This can be achieved by using the <a-sphere> prototype, as shown below:

<a-sphere color="#000000" radius="2" position="0 15 20"></a-sphere>

This code is straightforward, and it creates a slightly creepy black sphere floating in the sky behind us:

eleven, Adding Materials

We can add textures to our box, cylinder, and sphere primitives using the <a-assets> tag. This requires setting up an A-Frame asset management system that allows us to define assets and then apply them to our shapes. This is the recommended way to add textures to your scene.

I downloaded and slightly modified an image from http://subtlepatterns.com/dark-sharp-edges/ to use as a texture. We can then add this asset to the scene we just created as follows:

The Id attribute in the code above gives us the name by which we reference the texture and apply it to objects in the scene. The src attribute tells A-Frame the name of the image file we want to use. To assign a material to an object in the scene, we can assign the material to the object's src attribute - using a hashing technique in front of the texture's ID, as shown below:

<a-sphere src="#darktexture" radius="2" position="0 15 20"></a-sphere>

The above code will create a random, eerie sphere in the sky, which will be a better-looking, sci-fi texture. Please refer to the effect picture below.

twelve, Operation effect display

To actually see the above experience in VR, you either need to have an Oculus Rift connected to your PC, or you need a fancy smartphone! Of course, a smartphone is the easiest option. If you don't have a VR headset, you can still see everything implemented above when you walk into the scene displayed on your smartphone. At this point, you can shake your phone to walk around; see the picture below.

If you have a Google Cardboard headset that you use with your phone, you can tap the VR icon in the bottom right corner to switch to VR view, see the image below.

Thirteen, VR Experience

Well, if you want to take a walk through the A-Frame Street demo above, then great. You can go to the A-Frame Street demo here (https://www.devdiner.com/demos/aframedemo/) to try it out.

fourteen, summary

Today, when we mention WebVR, A-Frame is undoubtedly a simple and easy-to-use framework. Through this framework, we can achieve a lot of VR experiences based on cross-browser compatibility. In fact, we can use A-Frame to achieve more functions. I will continue to introduce these issues in future articles. Thank you for reading!