Make your first Web AR Application in 30 minutes

Web AR is an exciting prospect as it allows users to engage with AR experiences without the need for downloads and longer time to engagement. 8th Wall have recently released a platform on which you can easily create web AR applications using their SLAM engine and rendering with WebGL. In this tutorial we are going to be making a small web AR app in which you drop in a car and then drive it around.

To get started you’ll need to head over to 8th Wall and setup an account, it’s free to test and build demo apps but you will have to pay for commercial deployments. Once you're signed in follow this setup tutorial which will get you started with the basics of setting up a web AR project. If you don’t want to follow the tutorial then the major steps are as follows.

Download this project from Github.

Go to your 8th Wall console and make a new project.

In index.html replace the XXX with your app key generated in the 8th wall console.

For this tutorial we will be adapting the Three.js demo that is given to us by 8th wall. To start you can test out what the original project does by serving it and then loading the address on your phone. You should be able to place trees that ‘bounce’ into the scene with proper scaling for distance.

The first thing you will want to do it get yourself a nice 3D model. Poly have a great selection of models that you can use for project like this but any model that you like should work. In this example we will be sticking with a .GLB file for simplicity. You should be able to use other formats, but be aware that you might need to import materials to the model separately.

Okay so once you’ve added your model to the project folder you’ll want to change the ‘modelFile’ variable at the top of the file so that you are now loading in your new model. If you are using a model that has separate materials then you will want to add another variable for the file path to the material and then add that into the model loader. Save the project and check that now when you tap your car model bounces in. If not then double check all your model loading code, try it again with a different model and if non of that works then maybe consider using a .GLB file and also that your file has its origins set to 0 and that it has the correct forward vector positions. You might also want to check the scale of your model and adjust the ‘startScale’ and ‘endScale’ value as desired to get the correct looking bounce effect.

Now to get your car driving!

Presently when you tap on a surface in the scene it will spawn a new object, since we want to be able to drive our car around we only want our first tap to spawn the car and then all subsequent taps to move the car. In order to achieve this we will start by adding a bool at the top of our document to store when the car has been spawned. So for this we create a let called ‘carSpawned’ and set it to false.

Now navigate down to the function ‘placeObjectTouchHandler’ and where it calls the function ‘placeObject’ change the code to the following.

Save again and check that now after spawning one car taping again moves the car to your desired position. You will notice however that the further away you tap the faster the car goes. This is because presently our position tween uses the fixed timing from the objects bounce in animation. To fix this we will set our tween up to move the car at a consistent speed depending on the distance it has to travel.

Create a new variable at the top of the file called ‘millisPerMeter’ and set it to 100. Then change your code to the following. Here you will want to test out the changes and see how fast your car moves. You can easily slow the car down by increasing ‘millisPerMeter’ and speed it up by decreasing it. All we are doing here getting the distance between the cars position and the target position and then using that distance with 1 representing a meter.

Okay so you got a car and it moves around a little better now but it still sits at any old rotation while you do this which, last time I checked anyway, is not how cars drive. Thanks to Three.js fixing this is a simple problem as they have a built in ‘lookAt’ function. Just add the following line of code to your application and then you will be done!

And we are done! Thanks for reading and I hope you are happy with your new web AR app!

If you have any comments or suggestions on the project then please let me know!