AR For The Web: An 8th Wall Tutorial

AR For the Web

Hi everyone, I'm a dev that's very interested in XR technology, and I think it would be great if users didn't need an expensive phone or a fancy headset to experience XR for themselves.
In this set of tutorials, I'll be walking you through how to create your own Augmented reality app using 8th Wall and A-Frame, that you can run right in your phone browser! I'll try to take it slow, so even if you have little experience you should still be able to follow along!

Let's Start : Setting Up

Before we dive in I'll make a note to say that this tutorial will mostly follow the 8th wall quick start docs, so if you need another perspective head there. The following tutorials will dive deeper.

First let's navigate to our 8th wall console (https://console.8thwall.com/web/), and create a new project. Our console should look like so:
Next we need to authorize our phone as a developer device. To do this just click device authorization in the top right of the developer console, and scan the QR code.

Now we'll download some scripts that will allow us to run our future AR app locally. We can clone or download the following repo for the scripts:

Inside this file we will import scripts to enable our A-Frame and 8th wall content. We will also set up our application key. Our index page should look like this:

<!DOCTYPE html><html><head><metacharset="utf-8"><title>My First Web-AR App!</title><!-- This is 8th Wall's version of A-Frame --><script src="//cdn.8thwall.com/web/aframe/8frame-0.8.2.min.js"></script><!-- This allows us some nice 8th wall AR extras such as the tap to recenter and a loading spinner --><script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script><!-- We need to replace the XXXXXXXX here with our AppKey --><script asyncsrc="//apps.8thwall.com/xrweb?appKey=XXXXXXXX"></script></head><body></body></html>

We need to import our appkey, so let's head back to the web console. Our App key will be on the right inside our project panel. Just copy and paste this key to replace the Xs in our Index file.

Creating Our Content

In order to include our AR content we will be using A-Frame. This three.js framework allows us to declaratively add 3d objects to our scene and interact with them using an entity component architecture. In my opinion working with A-Frame feels similar to working with Unity and allows quick prototyping and development. A-Frame is created by Mozilla, the docs can be found here: https://aframe.io/docs/0.9.0/introduction/.

Let's start by adding our first entity to our application; the a-scene. We'll insert it into our body tag just like regular HTML. You might notice we have some attributes on this tag, these are custom 8th wall components which have mostly self-explanatory names.

First we added the <a-camera> to the scene, this is one of a number of primitive entities that A-Frame provides ( more info here ). Our camera also has a position component that we can provide arguments to. While using A-Frame you will make use of many components, they provide a lot of functionality to our entities such as; position, scale, materials and more. Without our components our entities would be nothing!

We then added some more entities to our scene, each with a light and position component and a number of arguments. Hopefully now you have the general gist of working A-Frame's EntityComponent system, these are the building blocks with which we can build anything!

Lastly we added an <a-light> another A-Frame primitive, I'm sure you can guess what this one does!

The first uses the primitive entity <a-box> and we've given it some components to change the look and notably the position. Position in A-Frame is controlled similarly to Unity's Vector3 struct. We can give it 3 arguments; the x,y,z coordinates of our object in 3D space.

Next we opted for the basic entity option, and added a geometry component to show our box. We also added some other components here, such as scale and rotation. For a list of all built in components it's a good plan to check the A-Frame docs!

Scan the QR on your mobile, and proceed past the security warning (It's our app so it's fine). You'll also have to give camera permissions to the browser.

You should now be able to see your app up and running!

It might not look like much, but we've created our first AR Web App! And all great things must start somewhere!

Once again I'd recommend taking a look at the docs to see what other kind of primitives we can use to make something cool in our scene using just the basics.

I hope you enjoyed this look at 8th Wall and A-Frame. If there is interest I'll continue with this series and cover importing custom models ( No more boxes! ) as well as using some animations and interactions.