Basic AR App Development (ANDROID)

INTRODUCTION TO BASIC

AUGMENTED
REALITY

APP DEVELOPMENT

( ANDROID PLATFORM )

TRAINING CONTENT

Chapter 1: Introduction
Chapter 2: Installing UNITY Hub
Chapter 3: Navigating The UNITY Hub Ecosystem
Chapter 4: Game Panel In UNITY
Chapter 5: Physic Component In UNITY
Chapter 6: Adding Colour To Game Object
Chapter 7: Adding Texture To Game Object
Chapter 8: Parent & Child Game Object
Chapter 9: Local/Global & Pivot Center Tool
Chapter 10: Prefab In Unity
Chapter 11: Scripting For Motion (Rotation)
Chapter 12: Creating Revolving Motion
Chapter 13: Getting To Know The Vuforia SDK
Chapter 14: Viewing The Camera Output & Creating License Key
Chapter 15: Capturing The Image Target
Chapter 16: Creating A Vuforia Database
Chapter 17: Projecting Rigged 3D Model On Image Target
Chapter 18: Creating The ANDROID AR Application
Chapter 19: Installing The .APK File And Testing It In ANDROID Device
Chapter 20: Assessment - To Project A Robot 3D model On A New
Image Target

PRE-REQUISITE

Smart Phone with:
- Camera
- GPS
- Accelerometer
- Compass

PC Or Macbook with:
- Good webcam
- Significant processing power
- Significant amount of memory

Basic computer programming skill and software navigation
Software Needed To Be Installed:
- Unity Engine
- Vuforia SDK
- Microsoft Lens
- Microsoft Visual Studio

Chapter 1: Introduction

What is Augmented Reality
Wikipedia: Augmented reality (AR) is an interactive experience of a real-world environment where the
objects that reside in the real world are enhanced by computer-generated perceptual information,
sometimes across multiple sensory modalities, including visual, auditory, haptic, somatosensory and
olfactory

Augmented → Augment → To Add Something
We are adding something inside the real world. Something = CGI/2D graphic/3D graphic

For viewing Augmented Reality objects
1. Handheld device (Handphone, Tablet)
2. Headgear device (Microsoft Hololens, Meta2, Google glass)

Headgear cost more than handheld
YASRUL RIDZUAN USMAN
Microsoft Hololens Meta 2 Google Glass

Best example of AR application : Pokemon GO

For experiencing AR in your smartphone, your smartphone must have:
1. Camera
2. GPS
3. Accelerometer
4. Compass
5. Significant processing power (CPU, GPU, RAM)

1

Types of AR Marker based AR
1. Markerless AR
2. Projection based AR
3. Superimposition based AR
4.

Marker based AR
Also known as image recognition AR
You have to keep a marker in front of your smartphone camera. Markers can be in the form of QR code
or 2D image. When the marker is recognized by the camera, a digital 3D object will appear on top of it.
YASRUL RIDZUAN USMAN
Markerless based AR
Do not require a marker but it detects the surface plane such as the floor.And when it detects the surface
plane, it will project a 3D image on top of it. It is also used in location based AR applications such as
Pokemon GO. Pokemon GO uses the GPS sensor in your smartphone. When you have reached a
certain location, the pokemon 3D image will appear

Projection based AR
Requires a small projector to work. Google glass is an example of a projection based AR device.It
projects light onto a small prism and by doing this, we can see data like time, map location and weather

Superimposition based AR
Also known as object tracking AR. We replace the original view of the object with the AR view.
Example, projecting a car 3D model on top of a hot wheel scaled model.

Augmented Reality (AR) vs Virtual Reality (VR)
VR - Oculus rift, HTC Vive, Sony Morpheus
VR has:

1. A pair of lenses
2. Magnetometer - measure magnetic field
3. Gyroscope sensor - measure changes of X,Y and Z axis of the phone

(landscape/portrait).
4. Advance form of accelerometer
These sensors help to measure motion and direction

VR uses stereoscopic images which give 3D effects to an Image. It adds an illusion of depth to a flat
image

In summary, Augmented reality is a way of viewing the real world (either directly or via a device
such as a camera creating a visual of the real world) and “augmenting” that real-world visual with
computer-generated input such as still graphics, audio, or videos. AR is different from VR in that AR
augments (adds to) a real-world or existing scene instead of creating something new from scratch.

2

YASRUL RIDZUAN USMANLooking at Some Other Types of Virtual and Augmented Reality
Mixed reality (MR) may take your view of the real world and integrate computer generated content that

can interact with that view of the real world. Or
it may take a fully digital environment and
connect it to real-world objects. In this way, MR
can sometimes function similarly to VR and
sometimes function similarly to AR. In
AR-based MR, the content of the digital world
is no longer passively laid on top
of the real world; instead, it can act as if it were
a part of the real world. Digital objects appear
as if they existed in the physical space, and
you can even interact with some digital objects
as if they were actually there. For example,
you might be able to drop a digital rocket onto your coffee table and watch it blast off, or bounce a digital
soccer ball off the real-world walls and floor.

Augmented virtuality (AV), also sometimes called merged reality, is essentially the inverse of typical
AR. Whereas AR refers to predominantly real-world
environments that have been augmented with digital
objects, AV refers to predominantly digital
environments in which there is some integration of
real-world objects. Some examples of AV include
streaming video from the physical environment and
placing that video within the virtual space or creating
a 3D digital representation of an existing
physical object.
Image on the left is an example screenshot of AV
through Intel’s recently defunct Project Alloy. Using
3D cameras, Intel was able to bring in interactive

imagery of physical real-world objects (such as your hands) into its virtual environments.

Extended reality (XR) is the umbrella term for the entire spectrum of technologies discussed thus far
(including VR, AR, and AV). The virtuality continuum is a scale used to measure a technology’s amount
of realness or virtualness. On one end of the scale is the completely virtual, and on the other end is the
completely real. XR spans the full spectrum of this scale, from end to end. Image below shows where
these terms fall on this scale developed by technology researcher Paul Milgram in the 1990s.

3

YASRUL RIDZUAN USMAN Five Top Tools To Build Augmented Reality Mobile Apps

Vuforia is a leading portal for augmented reality application development that has a broad set of features.
Vuforia augmented reality SDK:

1. Recognizes multiple objects including boxes, cylinders, and toys as well as images.
2. Supports text recognition including about 100,000 words or a custom vocabulary.
3. Allows creating customized VuMarks, which look better than a typical QR-code.
4. Allows creating a 3D geometric map of any environment using its Smart terrain feature
5. Turns static images into full motion video that can be played directly on a target surface.
6. Provides a Unity Plugin.
7. Supports both Cloud and local storage.
Supported platforms: iOS, Android, Universal Windows Platform, Unity.
Pricing: free version, classic version - $499 one time, cloud - $99 per month and Pro version for
commercial use.

ARTOOLKIT is an open-source tool to create augmented reality applications. Even though it's a free
library, it provides a rather rich set of features for tracking, including:

1. Unity3D and OpenSceneGraph Support.
2. Supports both single and dual cameras.
3. GPS and compasses support for creation of location-based AR apps.
4. Possibility to create real-time AR applications.
5. Integration with smart glasses.
6. Multiple Languages Supported
7. Automatic camera calibration.
Supported platforms: Android, iOS, Linux, Windows, Mac OS and Smart Glasses.
Pricing: free

With two millions Android active users, Google could not miss the chance to give developers an
opportunity to create AR apps on this operating system. That’s how Google ARCore appeared.
This toolkit works with Java/OpenGL, Unity, and Unreal. It provides features such as:

1. Motion tracking. ARCore can determine the position and orientation of the device using the
camera and spot the feature points in the room. That helps to place virtual objects accurately.

2. Environmental understanding. Due to the possibility of detecting horizontal surfaces, you can
place virtual objects on tables or on the floor. This feature can be also used for motion tracking.

3. Light estimation. This technology allows your app to match the lighting of the environment and to
light virtual objects so they look natural within the surrounding space. With the help of smart light
tracking developers can now create very realistic objects.

4

YASRUL RIDZUAN USMANSupporting devices: Currently: Google Pixel, Pixel XL, Pixel 2, Pixel 2 XL, Samsung Galaxy S7-S8+,
Samsung A5-A8, Samsung Note8, Asus Zenfone AR, Huawei P20, OnePlus 5 ARCore is designed to
work on devices running Android 7.0 and higher.
Pricing: free

With iOS11, Apple introduced its own ARKit, announced during Apple’s Worldwide Developers
Conference in June 2017. Here are the features of Apple’s augmented reality SDK for iOS:

1. Visual Inertial Odometry (VIO) allows to track the environment accurately without any additional
calibration.

2. Robust face tracking to easily apply face effects or create facial expressions of 3D characters.
3. Tracking the light level of the environment to apply the correct amount of lighting to virtual objects.
4. Detecting horizontal planes like tables and floors, vertical and irregularly shaped surfaces.
5. Detecting 2D objects and allowing developers to interact with them.
6. Integration with third-party tools like Unity and Unreal Engine.
Compatible with the following devices: iPhone 6s and 6s Plus, iPhone 7 and 7 Plus, iPhone SE, iPad Pro
(9.7, 10.5 or 12.9) – both first-gen and 2nd-gen, iPad (2017),iPhone 8 and 8 Plus, iPhone X
Pricing: free

Wikitude has recently introduced its SDK7, including support for simultaneous localization and Mapping.
The tool provides currently the following features:

​ 3D recognition and tracking.
​ Image recognition and tracking.
​ Cloud recognition (allows to work with thousands of target images hosted in the cloud).
​ Location-based services.
​ Smart glasses integration.
​ Integration with external plugins, including Unity.
Supported platforms: Android, iOS, Smart Glasses (currently Google Glass, The Epson Moverio BT-200,
and the Vuzix M100).
Pricing: Pro version - €2490 per year per app, Pro3D - €2990 per year per app, Cloud - €4490 per year
per app, Enterprise version.

5

YASRUL RIDZUAN USMANChapter 2: Installing UNITY Hub

1. What is a UNITY Engine?

Unity is a cross-platform game engine developed by Unity Technologies, first announced and
released in June 2005 at Apple Worldwide Developers Conference as a Mac OS X game
engine. The engine has since been gradually extended to support a variety of desktop, mobile,
console and virtual reality platforms. It is particularly popular for iOS and Android mobile game
development and is considered easy to use for beginner developers and is popular for indie

game development.
The engine can be used
to create
three-dimensional (3D)
and two-dimensional (2D)
games, as well as
interactive simulations
and other
experiences.The engine
has been adopted by
industries outside video gaming, such as film, automotive, architecture, engineering,
construction, and the United States Armed Forces. The image shown leads to a Short film
created and rendered using Unity by the Unity Demo Team

Installing Unity Hub

2. First, search for Unity Hub in the Google browser

6

YASRUL RIDZUAN USMAN
3. Then click the Download Unity Hub button and install it in your PC

7

YASRUL RIDZUAN USMAN
4. If you are new to Unity, click the Create Account button

8

YASRUL RIDZUAN USMAN5. Or you can Sign in by using your Google / Apple / Facebook Account
6. Next, you need to install the Unity Editor. Pay attention to the version. Normally the system will

recommend the best version for you

7. Make sure you checked all of these modules before continue

9

YASRUL RIDZUAN USMAN
8. If you need to install another version of Unity Editor, you can search them in the Download
Archive section. I will explain this further

10

YASRUL RIDZUAN USMAN9. If you want to uninstall the current Unity Editor due to some problems, you can click on the
setting function and select uninstall

10. And if you want to install the recommended version of Unity Editor, you can select the Installs
tab and click the Install Editor button. The system list down several versions for you to choose,
and most of these versions are recommended by the system

11

YASRUL RIDZUAN USMAN
11. Now let's create your first project. Click New project button
12. Select 3D, name your project as UnityOne and then click Create project

12

Chapter 3: Navigating The UNITY Hub Ecosystem

1. The Hierarchy panel
● List of all 2D and 3D objects which are parts of your unity project
● 3D objects in unity are referred to as game objects. 2D objects are referred to as
sprites
● Main camera and Directional Light are default game objects

2. Scene panel
● In this scene panel we can view, rotate, scale and position game objects inside
unity
● Currently there are only 2 default game objects in the scene (Directional light and
Main camera)

3. Game panel
● To preview the output of our game / application

4. Inspector panel
● We can view the properties of our game object in this panel
● Example: click the Main camera object and view the properties

5. Project Panel
● Basically contains a folder named Asset which currently opens here
● This asset folder is basically a part of every unity project
● If I open the UnityOne folder, we will find this Asset folder inside it

● If expand the folder, you will find SampleScene.unity
● Since unity has been developed primarily as a game engine, so since in Unity

are like levels in the game. 10 levels = 10 scenes
● Similarly if you create an apps and your apps has 5 pages, so you will have 5

scenes in your unity project

6. Console Panel
● Where errors will be displayed

7. How To Move/Scale/Rotate Game Objects in Unity
I.Create a 3D object
YASRUL RIDZUAN USMAN
II.The Cube has been listed inside hierarchy panel also
III.Select the move tool

13

YASRUL RIDZUAN USMAN IV.After select, you will see the red, blue and green arrows surrounding the Cube

V.Move your cursor to the arrows and drag them to move to your desired position
VI.Notice that while you are dragging the arrows and moving the Cube, the value of the

selected axis is also changing in the Inspector panel
VII.Alternatively you can also change the position of the Cube by changing the axis values

VIII.The point where all arrows are connected is called the Pivot point

IX.Next we select the Rotate tool

X.You can see there are 3 spherical lines matching the axis colors surrounding the Cube

XI.You can rotate each axis by selecting the desired lines or you can directly changed the
value in the rotation tab inside the inspector panel

14

YASRUL RIDZUAN USMAN XII.As for scaling the Cube, there are 3 methods that you can use, one is the scale tool, two
is the Rect tool and three is by directly change the value in the Scale tab inside the
inspector panel

XIII.We can refer to the scale tool as the 3D scaling tool and the Rect Tool as the 2D scaling
tool.When using the scale tool, we can scale all of the 3D faces of the Cube. By dragging
the Cube arrows representing each axis. Scaling can also be done via the Scale tab in
the inspector panel

XIV.If you want the view the Cube in all 6 sides, you can:

XV.The scale is measured in Unity unit
XVI.As for the Rect Tool, it will only scale 2 dimensions at a time, which is the XY, XZ and YZ

XVII.It is suitable for 2D elements like, button, canvas, images and etc
XVIII.And finally if you select the move, rotate or scale function, it will combine all in one

function

15

YASRUL RIDZUAN USMANChapter 4: Game Panel In UNITY

1. In the Game Panel, you can view and test the output of your Unity Project.
What you see in Game Panel is exactly what you will see in your smartphone screen view / PC
What we see in the Game Panel is actually through the eyes of the Main Camera
Below is the field of view of the Main Camera

2. Now try to change the layout

16

YASRUL RIDZUAN USMAN3. Unlock the view to move the Cube in 4 split
4. You can right click on each scene to add a tab (i:e. Hierarchy Tab)
5. The Directional Light and Main Camera are also known as Gizmos. You can enlarge their icons

by clicking the Gizmos tab

Chapter 5: Physic Component In UNITY

1. First RESET your Cube position to the original position. Click the 3 dots at the right of the
Transform tab and click Reset

2. Then, change the scale of the Cube to be flat like in below image

3. Move the main camera until you can view your flat Cube like this:

17

YASRUL RIDZUAN USMAN4. Pay attention to the Star sign besides the SampleScene*. The star indicates that there are
changes made in this SampleScene which have not been saved yet. So go ahead and save your
project first. Once saved, the star sign will disappear

5. Add a new game object called Sphere

6. Raised the Sphere slightly higher from the flat surface

NOTE: If you want your Game Objects to become white, you have to Generate the Lighting in the
Lighting option. Windows → Rendering → Lighting → Generate Lighting

18

YASRUL RIDZUAN USMAN7. Click the Game panel to see the output of your project. Click the playmode to access it

8. There is no specific change when you play the project. In the real world, the Sphere will
definitely be affected by gravity.

9. In order to make the Sphere acts like it has been affected by the gravitational force we first need
to select the Sphere game object, then we go to the inspector panel of the Sphere, and click on
the Add Components and select Physics

10. Then in the Physic list, search or type “Rigidbody”. And select it

19

YASRUL RIDZUAN USMAN11. And now, the Rigidbody physic element has been added to the properties of the Sphere

12. Now, click the Play button again, and you will see the Sphere will fall as it has been affected by
the gravitational force.
13.
14. NOTE: Whenever you made any changes in the Game Objects or the Properties in the Inspector

panel, remember to come out from the Play mode first. The changes won’t be reflected if you
made the changes in Play mode
15. The Pause button is where you want to pause any action during the Play mode. And the Step
button is for you to verify the action in a step by step sequence while in the Play mode.

Chapter 6: Adding Color To Game Object

1. In order to add color to Game Objects, first we need to create a Material folder. Right click on the
Project tab, and create new folder called Material

2. Open the Material folder, right click and create another new Material inside that folder. Rename it
to Red

20

3. Next we are going to give color to the Red material. By default, this Red material has the color of
white. We are going to change it to red by click on the color picker option in the inspector panel
and select Red color

YASRUL RIDZUAN USMAN
4. Right after that, you can see the Material called Red has turn from white color to Red

5. In order to transfer this Red color to our Sphere Game Object, we have to drag this Red material
and drop it onto the Sphere game object in the SampleScene / Hierarchy

6. So now as you can see, the color of the Sphere has change to red

21

YASRUL RIDZUAN USMAN7. Now, let us change the color of the Cube as well. We will repeat the same procedure (point 2
until 6). Create another Material inside the Material folder. Rename it to Blue. Open the color
picker form the Inspector panel, and change the color to blue or you can type in the hex number
265AFF in the Hexadecimal tab

8. Next, drag and drop the material called Blue into the Cube game object in the
SampleScene/Hierarchy

9. If you again want to change the color, you just need to click on the color picker option, and turn
the dial to your desired color. And you can see the color of the game object will changed in
real-time according to the dial turn

22

YASRUL RIDZUAN USMANChapter 7: Adding Texture To Game Object

1. First, extract the Image from the shared folder and placed them in your Desktop

2. Now, we are going to transfer the Wood texture into our Unity Project. First, we need to create a
new subfolder inside the Material folder called Texture.

3. Open the folder then drag and drop the Wood texture image into theTexture folder

4. Click the Wood Texture image to retrieve its properties in the Inspector panel. The image has to
be in PNg or JPEG format.

5. Now we are going to apply this texture to our game object (Sphere). There are two methods to
execute this.
● Create another Material in the Material Folder called Woodmat

23

YASRUL RIDZUAN USMAN● Click the Woodmat material and access the properties of it via the Inspector
panel, and click on the lock icon to lock the properties of this material. If we don’t lock
the properties of the Woodmat, as soon as we click on other material, the properties of
that material will be reflected in the Woodmat material

● After that, open the Texture folder and drag the Wood texture and drop it into
the left square of the albado parameter

● So you can see the Wood texture has been overlaid onto the Sphere.(Try to
turn it in the inspector panel)
● Then, open the Woodmat and unlock it. Once unlocked, drag and drop the
Woodmat material onto the Sphere game Cube inside the SampleScene/Hierarchy.
And you can see that the Sphere in the scene panel has been wrapped with the
Woodmat pattern after you perform this action

24

YASRUL RIDZUAN USMAN● Now as for the Cube game object, repeat the same steps similar to the Sphere
just now. Open the Texture folder and then drag and drop an image called Kismec from
the desktop into that folder

● Next, create a new Material inside the Material folder and the new Material is
called KISMEC
● Click the Kismec material to retrieve its properties in the Inspector panel. Go

ahead and lock it

● Then, open the Texture folder, drag the Kismec texture and drop it into the left
square of the albado parameter

25

YASRUL RIDZUAN USMAN ● Unlock the Kismec material, drag it and drop into the Cube game object in the
SampleScene/Hierarchy

Chapter 8: Parent & Child Game Object

1. In Unity, when we place one game objects into another game object, the outer game object will
become the parent of the inner game object

2. In our UnityProject, if I drag the Sphere and drop it into the Cube game object, the Sphere will
automatically become the child and the Cube becomes the Parent object

3. What will happen?: When I click on the Cube (Parent), and when I move the Cube along X axis,
the whole Cube and Sphere assembly will moved together along the X axis

26

YASRUL RIDZUAN USMAN4. We can place similar type game objects inside a single game object Parent. First we need to
create an empty game object.

5. Once it has been created, move it slightly up. And as the name suggest, this game object is
basically empty

6. We will use this empty game object as a holder to hold the Cube and the Sphere game object.
Reset the empty game object to zero via the Inspector panel and rename it to
CubeSphereHolder

7. Unchild the Sphere from the Cube, and drag both of the Cube and Sphere into the
CubeSphereHolder so that they become childs for the CubeSphereHolder game object

27

YASRUL RIDZUAN USMANChapter 9: Local/Global & Pivot Center Tool

1. When Pivot button is selected, the Pivot of the parent appears in the center of the Cube fame
object

2. When Center button is selected, the Pivot of the parent will be in the center between the childs

3. Now let us duplicate the sphere by selecting the Sphere game Object in the
SampleScene/Hierarchy and pressing the CTRL + D

4. Moved the duplicated Sphere (Sphere (1) to the right hand side

28

YASRUL RIDZUAN USMAN5. Now, click the Center position again and you can see the Pivot will be moved slightly to the right
between Sphere and Sphere (1) Game Objects

6. What happens is, there are 3 child game objects in the project (Cube, Sphere and Sphere(1) ).
Unity has taken inputs of all 3 childs and produced the position of the Pivot somewhere between
the Sphere and Sphere(1) locations.

7. Next, let us look at the Local/Global buttons. First, let us tilt our Cube game object along the Z
axis

.
8. Then, click the Local button. You can see that the Pivot of the X,Y and Z axis will also be tilted

similar with the Cube position

9. And if you move the game object along any of the axis, the game object will follow the direction
of the tilted Pivot

10. Now, select the Global button. After selecting the Global button, you can see the Pivot will stay in
a straight position, especially the Y axis, even though the Cube has been tilted

11. And if you move the game object along any of the axis, the game object will follow the direction
of the straight Pivot

12. Test both movement to get a better understanding

29

YASRUL RIDZUAN USMANChapter 10: Prefab In Unity

1. Definition:
2. How to create a Prefab

● Moved the Sphere away from the Parent (CubeSphereHolder)

● Select the independent Sphere, drag and drop it into the Asset folder

● After that, a Prefab has been automatically created. And in the
SampleScene/Hierarchy, you can see that the Sphere game object has turned to blue.
Means that the blue Sphere is an instance of the particular Sphere Prefab

30

YASRUL RIDZUAN USMAN● Now, let us create 2 more Sphere instances from the Sphere Prefab. Method 1
is by dragging the Sphere prefab from the Assets panel and drop it in the
SampleScene/Hierarchy

● And move the Sphere (1) to the right

● Now, let us create another Sphere Prefab instance, by using Method 2 which is
by dragging the Sphere Prefab and drop it directly into the Scene (on the right
of the center Sphere)

● Rename all of the Sphere Instances to SphereOne (middle), SphereTwo (left)
and SphereThree (Right)

31

YASRUL RIDZUAN USMAN4. The Importance Of Prefab
● If we make any changes in the Sphere Prefab (Asset) properties in the Inspector
panel, the changes will also affect the three Sphere Prefab instances in the
SampleScene/Hierarchy. This will come in handy when you need to apply a
uniform changes towards multiple similar game objects
● For example, if I changed the scale of the Sphere Prefab to 5, the size of all 3
Sphere Prefab instances will also increase bigger to 5

● Same goes to the Material properties. Currently the Spheres are in Wood texture.
So if I want to change the texture to others, I will just simply change it in the
Sphere Prefab properties rather than going into the individual Sphere properties
one by one

5. Now, inside the Asset folder, create a new folder called Prefab. And then drag the Sphere Prefab
into that Prefab folder

32

YASRUL RIDZUAN USMAN6. Next, create an empty game object

7. Make sure the Pivot position of the new empty game object is the same as SphereOne. If not,
please make necessary changes

8. Then, select all 3 Sphere Prefab Instances, and drop them into the empty game object in the
SampleScene/Hierarchy. Rename the empty game object to SphereHolder

9. Next, unchild the Cube from the CubeSphereHolder and then delete the CubeSphereHolder

33

YASRUL RIDZUAN USMANChapter 11: Scripting For Motion (Rotation)

1. Definition of Script:
2. Steps in creating Script

● Create a new folder in Asset panel called Script

● Next, open the Script folder, and create a new C# Script. Rename the C# Script
to RotateSphere. Remember, when naming a C# script, always capitalized the
first letter and never included a space in it.It should be a single word

● When you click on the C# RotateSphere script, the default code will appear on
the Inspector panel properties

34

YASRUL RIDZUAN USMAN● We cannot edit this script in the Inspector panel. To edit the script, we have to
double click it and open it in the Microsoft Visual Studio

● These first 3 lines are the header files

● Next we have a class called RotateSphere. Please ensure the class name is the
same with the script name. Monobehavior is a predefined class in Unity and it
contains some important Unity functions

● For line 8 until 14, there are 2 functions declared in the Monobehaviour class and
we are inheriting them from the RotateSphere class, To understanding further, let
us open a google browser and search for Monobehaviour

● Inside the scripting API, we can see that there are several predefined functions
and two of them are Start () and Update (), which we have seen earlier in the C#
script of the RotateSphere. Go ahead and read the description of each Start and
Update Functions

35

YASRUL RIDZUAN USMAN● We are inheriting these functions from the MonoBehavior class into the
RotateSphere class. I will explain the INHERITANCE concept using the whiteboard

● Write your code like this

● The Vector3 data type is used to set the movement of X, Y and Z rotation
values. In this case, they are 0, 30 and 0 respectively. So the Spheres will only
rotate in the Y axis. The movement has been initialized inside the Start ()
function.

● And inside the Update () function, for rotating the Spheres, we wrote the
transform.Rotate (movement) meaning that we will access the transform and
rotation properties in the Inspector panel of the unity (refer below image)

● Inside the (movement), we have written movement. Meaning that we called back
the Movement variable which have been set in line 11

● Once finished writing the script, next we will attach this script to the Spheres
game object. You can manually attached this script to each of the SphereOne,
SphereTwo and SphereThree, or you can straight away attached it into the
Sphere Prefab which we have created in the previous chapter

36

YASRUL RIDZUAN USMAN● Go to Assets and open the Prefab folder. Select the Sphere Prefab and lock it
first

● Next select the Script folder in Asset and drag the RotateSpherescript and drop it
into the Sphere Prefab properties like in below image

● Then, unlock the properties of the Sphere Prefab. Then check each SphereOne,
SphereTwo and SphereThree and see whether there is a RotateSphere script
embedded in their properties respectively

● Now it is time for us to test the output via the Play button. But before you test,
please once again select the Sphere Prefab and disable the gravity effect via
Rigidbody properties in the Inspector panel

37

YASRUL RIDZUAN USMAN● Once the Play button has been pressed, you will see that all 3 Spheres will
rotates along their Y axis

● To verify why we set the Y axis to 30, first you have to pause the output testing.
And then you have to click the Step button. While clicking the step button, select
one of the Sphere and pay attention to the Y value in the Rotation section of the
Sphere properties

● You can see the Y value changes in incremental 30 value

● Now, open the RotateSphere script again, and change the Y value from 30 to 60

● Test again and see any changes on the rotation speed. It should be doubled
● Now let us reduce the speed of the spheres so that they move smoothly. Open

the RotateSphere script and add the command below. The Time.deltaTime
command will basically add smooth movement to our sphere rotations

● Once again, test the output and see the difference. The Spheres are rotating
slower and smoother.

● Currently you may have noticed that everytime we want to change the speed of
the rotation, we have to do it via the Microsoft Visual Studio application.

● Inside Unity, we have a special feature of editing the script directly from the
Inspector panel.

● How to do it? First open the RotateSphere script again in the Visual Studio.
Declare a public Integer called xi, yi and zi.

38

YASRUL RIDZUAN USMAN ● Next replace the hard coded value of 0, 60, 0 to xi, yi, zi

● Save it, then next, click on the Sphere Prefab to see its properties in the
Inspector panel. You can see that now, there are new columns of integers called
Xi, Yi and Zi in the Rotate Sphere script properties. Go ahead and type 60 in the yi
column. Then test your output

● You can change the rotation by just editing the values of the Integers in the
columns

Chapter 12: Creating Revolving Motion

1. Now we are going to make SphereTwo and SphereThree rotate around SphereOne
2. First you drag the Script from the Asset panel and drop it into the SphereHolder game object in

the SampleScene/Hierarchy

3. The other way to do it is you can also drag the Script and drop directly it in the Inspector panel
of the SphereHolder game object

39

YASRUL RIDZUAN USMAN4. Or, another method is you can click the Add Component button in the SphereHolder gameobject
Inspector panel. Click the Add Component and search for the Script

5. Now, after inserting the RotateSphere script, set the Yi value to 30. And test your output

6. And now you can see the SphereTwo and SphereThree are rotating around SphereOne
7. The reason why this happened is because, as we know, the SphereHolder is a game object

without any image, it only has a Pivot. And the Pivot of SphereHolder is the same position with
the Pivot of SphereOne. And all of the 3 Spheres are the child of the SphereHolder. This make
the Spheres (childs) rotate around the Pivot of the SphereHolder which also happen to be the
same position with the Pivot of SphereOne
8. Still blur? To make it clearer, let us shift SphereOne slightly to the left of its original position. After
that, click Play button and see what happens

9. Now, we can see that the SphereOne is also rotating around the SphereHolder Pivot position.
Because we have moved SphereOne slightly off from its original position. Reset back to its
original position once you are done with the testing

40

Chapter 13: Getting To Know The Vuforia SDK

1. What is a Vuforia SDK?

Vuforia is a software development kit (SDK) for creating
Augmented Reality apps. Developers can easily add
advanced computer vision functionality to any application,
allowing it to recognize images and objects, and interact
with spaces in the real world.
Vuforia is the most widely used platform for AR
development, with support for the majority of phones,
tablets, and eyewear. Developers can easily add
advanced computer vision functionality to Android, iOS,
and UWP apps, to create AR experiences that realistically
interact with objects and the environment.
YASRUL RIDZUAN USMAN
2. First we need to create a folder name Vuforia_Projects in this directory:

3. Then, create a Unity project called ARONE and save the project location in the newly created
Vuforia_Projects folder and click the create button

4. Next we are going to import the Vuforia SDK, but before we are able to do that, we need to have
a Vuforia account

5. To create a Vuforia Account, first we need to open our Google browser, and type
DEVELOPER.Vuforia.com.

41

YASRUL RIDZUAN USMAN6. In the Vuforia Developer Portal, click the Register tab

7. Register your details and create your account

8. After that, verify your email and log in to your newly created account
9. Then, select the Download tab
10. Select the ”Add Vuforia Engine to a Unity Project or upgrade to the latest version” link

11. Save the downloaded file into your Desktop

42

12. Now the Vuforia Package is in my Desktop

13. And then, open the Unity project which you have created earlier (ARONE)
14. There are two methods of importing the Vuforia Package. The first method is when you have only

one Unity project open. You just import it by directly double clicking the Vuforia package, and click
import
YASRUL RIDZUAN USMAN
15. The other method is when you have multiple Unity projects open. You have to click
Asset → Import Package → Custom Package → select the Vuforia package from your
Desktop → Click Import

16. The system will ask you to update. Click UPDATE

43

YASRUL RIDZUAN USMAN 17. Once finished, you can view the Package folder appear in your Project panel

Chapter 14: Viewing The Camera Output & Creating License Key

1. To view the AR output camera, first you have to delete the Main Camera in
SampleScene/Hierarchy

2. Now to add the new AR camera, first you have to click on the + sign → Vuforia Engine → AR
Camera

3. You will be prompted with this message. Click accept

4. After that, an AR Camera will appear and replace your Main Camera. The AR camera is one of
the Vuforia Engine components. It will basically activates your webcam of your laptop when you
are testing the output in the Play mode and when your testing the output in your smartphone, it
will activate the rear camera of your smartphone

44

YASRUL RIDZUAN USMAN5. After adding the AR camera, try to click the Play button, and you can see that your webcam will
be activated

6. If you have multiple webcam connected to your laptop, then you can switch between multiple
webcam by first selecting the AR camera, next inside the Inspector panel, click the Open Vuforia
Engine configuration button

7. Then scroll down to Camera Device and select the camera you want to use

8. Next step is to create the Vuforia License Key. Open the Vuforia Developer Portal and click
Develop

9. Then click Get Basic

45

10. Populate the details like in the image below. The license name should be the same with your
Unity Project name. After that click Confirm

11. After that, your Basic License will be created under the name of ARONE. Click the ARONE
license

12. After clicking it, this page will appear. The long string of texts is basically your license key which
has been generated earlier under the name of ARONE
YASRUL RIDZUAN USMAN
13. Click on the text strings to copy it to the clipboard. After that open your Unity Project, and open
the Vuforia Engine Configuration in the Inspector panel

14. And paste your copied license key here

46

YASRUL RIDZUAN USMAN
15. After pasting the license key, you DO NOT have to CLICK the ADD LICENSE button as the
license key will get automatically linked to your AR Camera the moment you paste it here

Chapter 15: Capturing The Image Target

1. The image target will act as a marker that will be placed in front of the webcam or smartphone
camera. Once this image has been recognized, the system will project a 3D model on top of it

2. To capture the image, we are going to use a Camera Scanning App. The Microsoft Lens PDF
Scanner

3. Place your desired Image properly into the scanning window and press the capture button, please
make sure you can snap a good square image, like the image below. Readjust and crop the
border until you only see only the image fit in the window. After finish cropping, press Confirm and
click done

47