How to build an AR app

[Rss Bot 1]

Over the past two years, there has been an explosion in interest surrounding VR and AR technologies. The latest big thing in experimental design, AR has also arrived on the web, but with this new technology comes new skills, and right now it feels like the Wild West with no major standards to follow. 

The ability to display 3D on the web is nothing new, but if you’ve been avoiding it, then you need to jump into technologies like three.js or A-Frame (take a look at our roundup of AR tools to try for a full list).

Whatever skill level you are at, it won’t make much difference if you don’t have some decent content. Think about appropriate use cases for AR before jumping in. In this article, we’ll show you how to create a multi-marker AR experience. 

By using multiple markers, it’s possible to show different stages of a process or any unique content based on that marker. In this example, our app will explore the water cycle. Jump to page 3 to learn how to create a custom AR marker.

01. Get started

Open the start folder in your IDE and inside the index.html page find the script tags. All the code in the tutorial will go inside these. To test the app you will need to have a server and if you want to test on a phone you will need to host the files on a HTTPS server. Add the initial variables in the script tags:

02. Load the model

Use the icon in the top right to enlarge the image

To make the AR scene work, a model will be loaded. You will see that once loaded it is stored in the variable model1. This is then scaled and cloned twice for the three steps. Rather than load three different models, all the adjustments to one model will be done in code to make it load quickly on mobile.

03. Set up the tweening

On the first model, the cloud is going to be found in the scene and this will be tweened to a new position so that the cloud rises out of the sea. This is set to repeat forever and it will take eight seconds for the tween to animate up and show a cloud forming.

04. Scale it up

The cloud is scaled down to be almost invisible. Another tween is added to the cloud and this scales the cloud up to its normal size. With the movement and the scaling, it will give the illusion that the cloud is rising and forming out of the sea as the first step in the process of the water cycle.

05. Set up the second cloud

A second cloud will sit above the mountain

The next cloud from the second model needs to be positioned where the first cloud finished its animation as a formed cloud in the sky. This is given a tweened movement to position itself over the land, rising slightly above the mountain. This will take 12 seconds to animate as it’s a bigger move.

06. Make it rain

The key to making this illusion work is allowing the cloud to rain. The water cycle has the cloud rain as it moves higher over land. To get the effect, a particle system will be used. Here the amount of particles and the particle material is created, using a rain drop image.

07. Create raindrops

Using a for loop, 1500 raindrops can be created with a random x, y, z position that will be between the cloud and the ground. Each raindrop is given its own random velocity to make the rain look more natural. The particle is pushed into the correct vertex of the geometry.

08. Work on the particle system

Now the particle system is created out of the geometry and the material. The particles are set to be sorted so that the z-order is correct and then the rain particles are made a child of the second cloud. Anywhere the cloud is tweened, the rain also follows, so no need to animate the rain following the cloud!

09. Set the final model positions

In the final model, the cloud is repositioned to the ending spot of the second cloud animation cycle. This new cloud is just going to sit in the sky and not animate. Instead the river is going to animate, so the river model is stored in a variable, ready to add the tween to it.

10. Fill up the river

Water levels in the river need to rise

In the third step of the water cycle the water runs off the hills, filling rivers and lakes as it returns to the sea. This is the most subtle movement as it will just entail moving the height of the river so that it appears to fill up. Everything is preloaded now, so the init function is called.

Next page: Add AR functionality and markers

11. Initialise the AR scene

The init function is mainly about setting up the Three.JS scene and then making that scene respond to the position of the marker detected in AR. In this case the renderer is set up and the various attributes set. It’s positioned in the top left of the browser screen.

12. Add the camera

The renderer is appended into the HTML document and then a new array is created that will contain all the elements that need to be updated in the scene for animation – more on this later. A 3D scene is created and a camera added to the scene which will be from the position of the user’s camera.

13. Add AR functionality

The source to track for AR markers is set up now and you can see in this code that it is set to track the webcam. This will be a phone or tablet’s camera if on those devices. If for any reason the window resizes, the onResize function is called and this is also called at the start.

14. Resize the screen

Now the code creates the onResize function that is called from the previous step. This ensures the webcam image is set to be resized to fit inside the renderer. If you inspect your page, the renderer is actually a HTML5 Canvas element.

15. Add the first marker

The next few steps all take a similar approach. A new variable is created and this becomes a group. Inside this group the marker is told to respond to a ‘pattern’ marker and the type of pattern is defined in an external file. For more information on how this was created see the separate tutorial.

16. Add the second marker

Now the second marker is created with a different variable name. This references a different pattern so it will respond to a different marker held in front of the camera. This way holding up different markers will trigger different responses.

17. Add the final marker and models

Each variable needs the correct marker added to it

Once more, another variable is declared for the last marker and it references another pattern file. After this you will see that each marker variable group gets the correct model added to it that we set up in the first 10 steps. These will display when the marker is placed in front of the camera.

18. Update the particles

The rain particles need to change every frame

You may have forgotten about the rain particles created earlier, but they need updating every frame. So here a for loop moves through each particle in the array and updates its position, resetting it if it moves below the ground. This totally makes the rain effect work.

19. Remove the preloader

This needs to disappear when the scene is ready

While all of this set up has been going on, there has been a message over the screen that is asking the user to wait patiently for the content to load. Here that content is removed and the scene is rendered through the camera.

20. Continuously update

The requestAnimationFrame is the browser’s built-in loop that tries to run as close to 60 frames per second that it can. Here the frame rate is worked out so that the animation is divided by 60 frames per second to work out the interval, to create a delta of time that has passed. Mobile CPUs will run at a different speed so frame rate will not be an accurate time counter.

21. Finish up

Now the tween engine is updated and every element added to the onRenderFct array that will be updated at the correct speed. Save the file and make sure you look at this on a server, it must be HTTPS if you want to serve to mobile devices. Place the markers supplied in the project files folder in front of the camera to see the different stages.

Next page: How to create a custom marker

When creating your own AR experience, you will probably want the marker that you are using to either be branded to a client logo or customised in some way to reflect the nature of what your user is doing with the AR application. This is very easy to do.

The main part to make this work is downloading the pattern file, placing this within your project folder structure and referencing this in your JavaScript code. Here's a quick step-by-step guide.

01. Make the pattern

First create your marker's design

In your image editing application make a square image and ensure the background is set to white. Now create a custom shape on the screen. Make sure this is black as this is the easiest to be read. Save the file as a PNG as this will be uploaded to a website to convert into the pattern code.

02. Upload and download

Upload the design into AR.js

Go to the pattern marker training page and click the upload button. Your marker will appear on the screen. Click the download marker button to get the marker file for your code. Click the appropriate download PDF button to get a printable marker.

03. Place it in the code

Add the file to the data folder

Place the downloaded pattern-marker.patt in the data folder. You can name it anything you like. Look in your code and change the line shown below to be the name of the pattern that you have downloaded. Now hold the PDF up to the camera to trigger the AR content to appear.

This article was originally published in creative web design magazine Web Designer. Buy issue 274 or subscribe.

Read more:

• 5 future web design job titles
• The future of design: AR will be bigger than the internet
• AR.js is bringing augmented reality to the web

View the full article