Injecting Objects in an Augmented Reality Ionic App using Wikitude

Injecting objects into our world (or vice-versa) is the main goal of Augmented Reality. Those elements can be of different types. Images, videos, sounds, whatever media you want.
Let’s see how we can do this in Ionic using a Wikitude file.

This tutorial is the continuation of this one. Head there to see what Wikitude offers.
This time we are going to create everything from Zero.

The earth model is available here and the indicator image there.
Our world folder will be as follow:

World folder

First we move the world launching logic in a new method:

Once this is done, we can add another launching method for our experiment that will use this launchWorld method:

We only change here the file that will be loaded.

The index.html file that will be used is as follow:

Very basic here, the important imports here are the architect and ade libraries. Those libraries are necessary because they contain the main methods we will use to launch our world.

World file contains a World Object:

This init method will start everything, for now it only contains a geolocation.

This geolocation is relative to another location or the user’s location.
By setting the first parameter to null, the location will be relative to the current user, precisely 5 meters north and 2 meters above.

Still in this init method:

The AR variable comes from the ade.js file, it contains the methods we need to create our objects.
Here we ask for a new 3D Model by passing the path of a wt3 file.
You can change the scale if you want to make this model bigger or smaller.

An Indicator can be added to help the user find the model (especially if you are not sure if the model is correctly loaded):

The first step is to create an ImageRessource, this can be a jpeg, jpg, png, etc.

This image will then be converted into a visual representation of an ARObject.
The ARObject is the most basic Object in AR, it’s the equivalent of Object in JavaScript.

The indicator image is quite big so we scale it down to one tenth.
Finally, setting up the verticalAnchor value to top by using a constant from the library. This makes the indicator totally visible instead of half-cut by the screen.

We have our indicator and our 3D Model.
All we need now is to set them together on the screen:

Using the previous generated location, the indicator will be coupled with the earthModel and a GeoObject will be created.

Finally we can launch our app:

Ionic 3 mobile app development augmented reality wikitude earth

The Secret Lair
Slap your email address in the box below to get access to this tutorial (and others) source code.

Conclusion

Creating objects with Wikitude is fairly easy, in our case we used a relative position, however, we can place objects at specific absolute positions.
It’s better to add an indicator so the user can quickly locate where the object is positioned.
Every objects can be proportioned in order to give the user a better experience, in our case we only had one object, however, when many objects are displayed on screen, it can quickly become chaotic.

 

No Comments Yet

Leave a Reply

4 Shares