Basic AR App Development (ANDROID)

YASRUL RIDZUAN USMAN 4. Rename the image to ARONEIMG and save it in the Photo Library as JPEG format. After that,
click the share button and save it in your Gdrive/Cloud/local phone memory. Retrieved the image
and save it to your Desktop

Chapter 16: Creating A Vuforia Database

1. First, open the Vuforia Developer Portal, and click the Develop button
2. Then click the Target Manager button

3. After that, click Add Database, type ARONE as the Database Name, select Device in the “Type”
section and then click Create

4. “Device” option means that the Image target that we are going to upload will be stored in your
smartphone device. This is the easiest and the fastest way to get started with Augmented Reality.
The “Cloud” option means that the Image will be stored in the Vuforia cloud and to access this
Image target, you will need an Internet connection.

48

YASRUL RIDZUAN USMAN5. ”VuMark” option is an advanced target technology developed by Vuforia. VuMark is similar to QR
Code or Barcode. With VuMark Database, you can develop multiple image targets which look
similar just like a QR code but all of the images have different feature points that distinguish them
from each other. Below is the example of VuMark Database targets

6. After that, click the ARONE Database

7. And then click Add Target
8. After Add Target has been clicked, below window will be popped up

9. First, select “Single Image” as we are only using one image which has been captured using the
MIcrosoft Lens App just now

49

YASRUL RIDZUAN USMAN10. Secondly, browse for the location of the captured image, which in my case, is in the Desktop
folder named ARONEIMG

11. Third, the suitable width for our selected image is 5 unity units. Because Vuforia uses meters as
the standard measurement, our image will become small. For example, our image has a width of
30cm. If we convert it to meters, it will become 0.3m. And Unity will detect this as 0.3 unity units,
which is close to 0, very small and hard to be detected by our AR camera. So instead of inserting
0.3 in the Width section, we will insert 5 instead (5 unity units) as it will be properly visible inside
Unity

12. Fourth, the name of the image remains the same, which is ARONEIMG
13. And fifth step, click Add button and it will be uploaded

14. You will find the target image has been uploaded like in the image below. If you see the Status is
still in “Processing” state, just reload the page and it will change to “Active”. After that, click on the
image ARONEIMG

15. After you click the ARONEIMG, the window below will appear.

16. Here are the explanations on some of the details:
● Augmentable - This is the star rating whether your image is good for Augmented reality or
not good. If the star rating is 5 or 4, the image will be quickly recognized by the webcam
or smartphone camera. If it has a 3 star rating, then it will take some time for the webcam
or smartphone camera to recognize the image. If the star rating is 2 or 1, it will be very
difficult for the webcam or smartphone camera to recognize and process it. If the star
rating is zero, it can never be recognized at all and you have to replace the target image.

50

YASRUL RIDZUAN USMAN ● Show Features - This is where Vuforia will show you the features on your image that will
be used as the recognition points of the AR. The yellow points are the representations of
how well the image will be recognized by the webcam or smartphone camera. The
process of recognizing these unique yellow points is called Image processing. The
augmented star rating is also based on these yellow points

17. After that, checked the ARONEIMG box and click Download Database (1)

18. Then, check the Unity Editor and click Download. Because we are developing our AR project
using Unity Editor, that is why we have to select the Unity Editor option.

19. After that, save the downloaded file into your Desktop folder

51

YASRUL RIDZUAN USMAN 20. Next, open the Unity Project, Click Assets → Import Package → Custom Package and select the
Vuforia Database called ARONE which you just downloaded. Then click Import

21. You can find the newly imported Vuforia Database which contains your target image in the Asset
folder (Project Panel)

Chapter 17: Projecting Rigged 3D Model On Image Target

1. First, click the + button in the SampleScene/Hierarchy and select Vuforia Engine → Image Target

52

YASRUL RIDZUAN USMAN2. Next, select the ImageTarget from the SampleScene/Hierarchy and launch its properties from the
Inspector Panel. Then from the Type column, click the dropdown button and select “From
Database”

3. And from the Database, select ARONE. Once selected, you can see that the Image Target that
you have created and selected appears in the Scene panel

4. Next if you click on the Advanced tab, you will find the Physical Width and Height are shown in
there. And Vuforia has automatically calculated the Height for us which is 3.435673m. We can
increase or decrease the image target dimension by changing these values. Try to key in 0.3 and
see what is the outcome

5. Now for testing purposes, first we will place a cube on top of this image by creating a Cube game
object.

53

YASRUL RIDZUAN USMAN6. If we want to make the Cube to appear on top of the Image target, we have to make the Cube
becomes the child of the Image target

7. Next, when I click the Play button, the Cube will be projected on top of the Image target

8. Now, let us add another 3D Model in the form of a “Barbarian Warrior”. We need to go to the
Asset Store to import it. Type Unity Asset Store in Google browser

9. Once you are in the Asset Store, search for “Barbarian”
10. Select the one from ADVANCEDSKELETON. And click “Add to My Assets”

54

YASRUL RIDZUAN USMAN11. Click “Accept”
12. And it has been added to My Assets. Click Open in Unity
13. It will appear in your Unity Editor in the form of Package Manager. Go ahead and click

“Download”. After that click “Import”

14. When you click “Import”, the window below will open. Once again click “Import”

55

YASRUL RIDZUAN USMAN15. After that, you can see that there is a folder named Barbarian in your Project Panel.
16. Open the Model folder, select the barbarian.fbx file and drop it into the Image Target game object,

making it a child for the Image Target. After that, delete the Cube (child) game object because
previously we used it for testing purposes only.

17. Now, you can see the Barbarian 3D model is standing on top of our Image Target

56

YASRUL RIDZUAN USMAN18. Scale up the Barbarian 3D image
19. Next, we are going to animate this Barbarian model. Select Models folder → Barbarian.fbx→ In

the Inspector Panel, click Rig option
20. Change the Animation Type from “Humanoid” to “Legacy”. And then click “Apply”

57

YASRUL RIDZUAN USMAN21. Next, select the “Animation” option. And you can see many Animation styles are listed here. Only
animation “Walk”, “Run” and “Round Kick” are unique because these animations involve the
movement of the body, while the other animations only involve facial expressions.

22. Apparently for this particular application, we will select the “RoundKick” animation. Click the Play
button beneath the RoundKick and see the Barbarian performs the RoundKick action

58

YASRUL RIDZUAN USMAN23. After selecting the RoundKick, we have to make sure that the Barbarian performs this animation
in a loop. To do this, while selecting the RoundKick animation, we need to change the Wrap Mode
from Default to Loop. Then click Apply

24. Next we select the Barbarian model game object again, and select the circle beside the
Animation colum “Idle” and change it to “RoundKick”

25. Since we have set the RoundKick animation wrap mode as Loop, any other animation will not be
in Loop as they are in Default. If you want to change to another animation, you have to select the
new animation wrap mode to Loop once again

26. Now let us test the output by clicking the Play button.If the back of the Barbarian is facing you,
then we need to rotate the Barbarian before we hit the Play button again

59

YASRUL RIDZUAN USMAN27. We can set the Y axis of the Rotation to 180. Now, test the output again
And yes! He moves !

60

YASRUL RIDZUAN USMANChapter 18: Creating The ANDROID AR Application

1. First you have to click Edit → Preferences → External Tools. Check whether your Unity Editor has
been installed with the Android components. These components can be selected while installing
Unity Editor

2. Next, select File → Build Settings → Android

61

YASRUL RIDZUAN USMAN3. Then click the “Switch Platform”

4. And then, click “Add Open Scenes” and the “SampleScene” from the ARONE Project will be
loaded in the “Scenes In Build” column. The other way to do it is by locating the SampleScene
from the Project panel, and then drag and drop it into the “Scenes In Build” column

5. Next click the “Player Setting” and change the Company Name and Default Icon.

62

YASRUL RIDZUAN USMAN6. Then select the Resolution and Presentation and change the Default orientation to “Landscape
Left”. The reason why is because we don’t want to see any weird transition on your AR object if
you tilt/rotate your android device

7. Next, select the “Other Setting”, under the “Graphics API”, remove the “Vulkan” and keep the
“OpenGLES3” only. The reason why we remove the Vulkan graphic is because in some Android
smartphones, when the Vulkan graphic is present, the AR output will be in the form of black
screen (unable to see the camera feed) So we remove it in order to avoid this problem

63

YASRUL RIDZUAN USMAN8. After that, we select the minimum “API Level” and “Target API Level".The Minimum API Level
refers to the minimum Android version, in this case we will select Android 6.0 “Marshmallow” (API
Level 23) while for Target API Level refers to the maximum Android version and we will set it to
Automatic (Highest Installed)

9. So this ARONE Augmented Reality App that we are building will support Android version
Marshmallow up to the latest version

10. After that, close the “Project Setting”. Then, again in the “Build Setting”, click the “Build” button.
The build file will be in .APK format. Type in ARONE for the file name and click “Save” button

64

YASRUL RIDZUAN USMAN 11. Then the build has started

12. After that, the ARONE.apk file is ready. Transfer this file into your Android device and run the
application. Test it with the marker given

Chapter 19: Installing The .APK File And Testing It In ANDROID
Device

1. Locate the ARONE.apk file in your PC

2. Then, connect your Android Device to the PC. In my case, I will be using a Samsung Galaxy
Tablet with the Android version 11 “R”

3. After that, copy the ARONE.apk file from your PC and paste it in your Android device. My advice
is not to cut and paste because sometimes, when the file has been transferred into the Android
device, it tends to corrupt. If you cut and paste, the source of the file will no longer be available on
your PC. So Copy and Paste / Drag and Drop will do just fine

65

YASRUL RIDZUAN USMAN4. Next, install the ARONE.apk in your Android device. Below are the steps to install:
I. Locate the ARONE.apk file in your Android device and then double click it

II. An Installation message will be prompted. Click Install

III. The installation process will then be started
IV. PlayProtect might try to block the installation process. If this happens, just click INSTALL

ANYWAY

V. Once it has finished, click Open

66

YASRUL RIDZUAN USMANVI. You are now in the ARONE application. Point your Android device camera to the Target
Image / Marker and you will see the “Barbarian” 3D Image will appear on top of the
Target Image / Marker

67

YASRUL RIDZUAN USMANChapter 20: Assessment - To Project A Robot 3D Model On A New
Image Target

For Assessment ARKUKA1
1. Create A folder name Robot in Assets Folder
2. Drag and drop the .FBX file into it
3. Drag the .FBX file and drop to become child for ImageTarget
4. Test it out

68

THANK YOU