AFrame

AFrame: A Hands on Tutorial

Granting accessibility is something that has proven important in the progression of technology. AFrame is a tool that grants AR capabilities to anyone with a browser.

About

A-Frame is an open source web framework for building VR and AR experiences. It is primarily improved by and maintained by Mozilla. It is heavily based on Three.js where developers can create 3D scenes using simple HTML. HTML offers a familiar and easy to learn tool for individuals while incorporating a game development pattern used by engines such as Unity.

Tutorial

To use AFrame, we first head over to Brown workshop resources. Once we get there we are going to click A Scene in Glitch and this will take us to a very handy editor that we will be working in for the remainder of the tutorial. We are going to be creating a moving AR globe that works through your webcam.

Note: Before we begin make sure to press remix this to allow you to edit the code.

In our editor a couple of things to note. In order to preview your work all you have to do is press Show Live. This will open another tab with your work. Press this now. You should be seeing 3 objects on a green surface, a sphere, cylinder, and cube. We will mainly be working with the sphere but feel free to experiment with everything.

Make sure everything looks like this in the beginning

Each of the individual pieces is contained within the traditional body tags that we see in everyday html pages. What's new are the <a-scene><a-scene> which is where all of the components of our scene are going to go. The sphere is created by the <a-sphere></a-sphere> tags. Each of the objects have their respective tags and properties. For the sphere, the important properties are the position, radius, and color. The position require 3 numbers since we are working in 3D space. For color you can also place names of colors. Try this out.

Requirements:

Web Browser
Webcam (make sure to grant mission)
Can work on mobile phone(Android, Iphone, anything with a camera and webcam)
Printed Symbols

Now we are going to add the necessary changes to make this an Augmented Reality space. First we are going to erase the box, cylinder, and the plane. Then add style="margin : 0px; overflow: hidden;" inside of the body tag. This is just standard for the body tag to make sure everything is placed correctly. Then to our scene tag we are going to add embedded arjs="sourceType: webcam;" which will allow AFrame to use our camera. Without this the program won't have access to our webcam. Next we are going to add the properties for the globe specifically the picture, src="https://raw.githubusercontent.com/aframevr/sample-assets/master/assets/images/space/earth_atmos_4096.jpg" radius="1" segments-height="53". So far we should have code that looks like this:

<a-scene embedded arjs="sourceType: webcam;">

<a-sphere src="https://raw.githubusercontent.com/aframevr/sample-assets/master/assets/images/space/earth_atmos_4096.jpg" radius="1" segments-height="53">

Next we are going to add a special animation tag that will animate the sphere. This tag and it's properties will be contained within the sphere because we want to the animation effect to take place on that and not anything else. Add this code between the sphere tags.

<a-animation attribute="scale"

dur="1000"

from= ".1 .1 .1"

to=".4 .4 .4"

direction="alternate-reverse"

easing= "ease-in-out-circ"

repeat="indefinite"></a-animation>

What this tag does is scale the sphere in 1000ms intervals. The sphere is going to move between two points in the alternating and reverse direction infinitely.

The last thing we are going to add is the ability to recognize a predefined marker. There are currently two predefined markers. This is trainable but for purposes of the tutorial we are going to use the built in. Add:

<a-marker-camera preset="kanji"></a-marker-camera>

right below the sphere.

Before we can run everything the last thing we need to add an additional library.

If everything runs smoothly you should now be able to have a webcam or camera phone recognize the kanji marker.

Note: The marker is located here.