bazilah binti zakaria - myfik.unisza.edu.my · kepada organ dalaman haiwan katak yang dikenali...
TRANSCRIPT
FROGAR WITH AUGMENTED REALITY
BAZILAH BINTI ZAKARIA
BACHELOR OF INFORMATION TECHNOLOGY (INFORMATICS
MEDIA) WITH HONOURS FACULTY OF INFORMATICS AND
COMPUTING UNIVERSITI SULTAN ZAINAL ABIDIN
2019/2020
ii
iii
i
DECLARATION
I hereby declare that this report is based on my original work except for quotations and
citations, which have been duly acknowledged. I also declare that it has not been
previously or concurrently submitted for any other degree at University Sultan Zainal
Abidin or other institutions.
Name : Bazilah binti Zakaria
Date : …………………….................
ii
CONFIRMATION
This is to confirm that:
The research conducted and the writing of this report was under my supervision
Name: Prof. Madya Ts Dr Syadiah Nor
binti Wan Shamsuddin
Date: ……………………………………
iii
DEDICATION
Alhamdulillah. All thanks to Allah the almighty for blessing me and give me
strength to complete my final year project. I would like to express my deepest gratitude
to my supervisor, Professor Madya Ts Dr Syadiah Nor binti Wan Shamsuddin for the
continuous support in my research project, for he patience, motivation and also her
knowledge. It was great moment to work under your guidance.
I also want to thanks to my lovely family especially my beloved mother, Salina
binti Salleh for supporting me financially and spiritually throughout the process of
writing this thesis and complete my final year project also my life in general.
Lastly, I sincerely thank to all my friends for their advice, support and also
suggestion during the development of my final year project.
Thank you.
iv
ABSTRACT
Science subject is very important to create scientific knowledge among students. In
Malaysia, the implementation of the Science Curriculum is normally done via
conventional approach. However, this approach is not able to attract students’ interests
in exploring more knowledge. In addition, the students only acquire the basic knowledge
without being able to visualize the subject matters. Thus, this study is aimed to apply
Augmented Reality (AR) technology in teaching and learning of the Basic Science
subject to overcome the issues. AR is the augmentation of the real world through the
addition of three-dimensional (3D) virtual objects. AR has been proven as an effective
method in delivering lessons to the students compared to conventional method. This
study applied AR in preschool Basic Science subject that focused on the internal organ
of animal of frog known as the Anatomy and lifecycle of frog. In addition, it has also
been proven that the integration of the AR technology in teaching and learning is able
to create an enjoyable environment because it is supported by the visualization of 3D
virtual objects. As a result, the students were able to understand and recognize the
anatomy and life cycle of frog.
v
ABSTRAK
Subjek sains sangat penting untuk mewujudkan pengetahuan saintifik dalam kalangan
pelajar. Di Malaysia, pelaksanaan Kurikulum Sains biasanya dilakukan melalui
pendekatan konvensional. Walau bagaimanapun, pendekatan ini tidak dapat menarik
minat pelajar untuk meneroka lebih banyak pengetahuan. Di samping itu, para pelajar
hanya memperoleh pengetahuan asas tanpa dapat menvisualisasikan perkara-perkara
tertakluk. Oleh itu, kajian ini bertujuan untuk menggunakan teknologi Realiti Semula
(AR) dalam pengajaran dan pembelajaran subjek Sains Asas untuk mengatasi masalah
tersebut. AR adalah pembesaran dunia nyata melalui penambahan objek maya tiga
dimensi (3D). AR telah terbukti sebagai kaedah yang berkesan dalam menyampaikan
pengajaran kepada pelajar dibandingkan dengan kaedah konvensional. Kajian ini
menggunakan AR dalam mata pelajaran Sains Asas prasekolah yang memberi tumpuan
kepada organ dalaman haiwan katak yang dikenali sebagai Anatomi dan kitaran hayat
katak. Di samping itu, telah terbukti bahawa penyepaduan teknologi AR dalam
pengajaran dan pembelajaran mampu mewujudkan persekitaran yang menyeronokkan
kerana disokong oleh visualisasi objek maya 3D. Akibatnya, pelajar dapat memahami
dan mengenali anatomi dan kitaran hidup katak.
vi
CONTENTS
PAGE
DECLARATION i
CONFIRMATION ii
DEDICATION iii
ABSTRACT iv
ABSTRAK v
CONTENTS vi
LIST OF TABLES ix
LIST OF FIGURES x
LIST OF ABBREVIATIONS/TERM/SYMBOL xii
LIST OF APPENDICES xiv
CHAPTER I INTRODUCTION
1.1 Introduction 1
1.2 Project Background 2
1.3 Problem Statement 2
1.4 Objective 3
1.5 Scope 3
1.6 Limitation of Work 4
1.7 Expectation Result 4
1.8 Report Structure 4
CHAPTER II
LITERATURE REVIEW
2.1 Introduction 6
2.2 Augmented Reality History 6
2.3 Related Technique 7
2.3.1 Marker Based 8
vii
2.3.2 Markerless 9
2.4 Related Topic 9
2.4.1 Human Anatomy in Mobile Augmented Reality 10
2.4.2 An Interactive Augmented Reality System for
Learning Anatomy Structure
11
2.4.3 Augmented Reality for Learning Anatomy 11
2.4.4 3D Frog Skeleton 12
2.5 Comparison Table of Topic 13
2.6 Comparison Table of the Existing Products with 5 Element
Multimedia
15
2.7 Summary 16
CHAPTER III PROJECT METHODOLOGY
3.1 Introduction 17
3.2 Project Development Methodology 17
3.2.1 Analysis 18
3.2.2 Design 21
3.2.3 Development 25
3.2.4 Implementation 29
3.2.5 Evaluation 30
3.3 Framework of FrogAR Application 31
3.4 Software Requirement 31
3.5 Hardware Requirement 33
3.6 Conclusion 34
viii
CHAPTER IV IMPLEMENTATION AND TESTING
4.1 Introduction 35
4.2 Implementation 35
4.2.1 FrogAR Application Interface 36
4.2.2 AR Camera 41
4.2.3 AR Maker 44
4.2.4 3D Model 48
4.2.5 Unity 3D 51
4.3 Testing 52
4.4 Test Case 52
4.5 Conclusion 56
CHAPTER V
CONCLUSION
5.1 Introduction 57
5.2 Project Contribution 57
5.3 Problem and Limitation 58
5.4 Future Work 58
5.5 Conclusion 58
REFERENCES
59
ix
LIST OF TABLES
TABLE TITLE PAGE
2.1 Comparison Table of Topic 14
2.2 Comparison Table of Element
Multimedia
15
3.1 Existing System 20
3.2 Software Requirement 32
3.3 Hardware Requirement 33
4.1 Open Application Test Case 53
4.2 Home Page Test Case 54
4.3 AR Camera test case 55
4.4 Guideline page test case 55
4.5 About page test case 56
4.6 Exit page test case 56
x
LIST OF FIGURES
FIGURE TITLE PAGE
2.1 Marker-Based Augmented Reality 8
2.2 Markerless Augmented Reality 9
2.3 Human Anatomy 10
2.4 Learning Anatomy Structure 11
2.5 Learning Anatomy using Marker Based 11
2.6 3D Frog Skeleton 12
3.1 ADDIE Development Model 18
3.2 Analysis Phase 19
3.3 Loading Screen 21
3.4 Homepage 22
3.5 Guideline Page 23
3.6 About Page 23
3.7 Exit Page 24
3.8 AR Camera 24
3.9 Prototype of Flashcard 25
3.10 Create Marker Based 26
3.11 Create Marker using Vuforia 26
3.12 Animation 3D character using Maya Software 27
3.13 Building AR using Unity 3D software 28
3.14 Framework of FrogAR application 31
xi
4.1 FrogAR Home Page 36
4.2 Start Button 37
4.3 Guideline Button 37
4.4 About Button 37
4.5 Exit Button 37
4.6 Guideline Page 1 38
4.7 Guideline Page 2 38
4.8 Guideline Page 3 39
4.9 Exit Button 39
4.10 Next Button 40
4.11 Previous Button 40
4.12 About Page 40
4.13 AR Marker Page (Egg) 41
4.14 AR Marker Page (Tadpole) 41
4.15 AR Marker Page (Adult Frog) 42
4.16 AR Marker Page (Muscular) 42
4.17 AR Marker Page (Respiration) 43
4.18 AR Marker Page (Skeleton) 43
4.19 Sound Button 44
4.20 Camera Button 44
4.21 Exit Button 44
4.22 Egg Marker and Features 45
4.23 Tadpole Marker and Features 45
4.24 Adult Frog Marker and Features 46
4.25 Muscular Marker and Features 46
4.26 Respiration Marker and Features 47
4.27 Skeleton Marker and Features 47
4.28 Egg 3D Model 48
4.29 Tadpole 3D Model 49
4.30 Adult Frog 3D Model 49
4.31 Muscular 3D Model 49
xii
4.32 Respiration 3D Model 50
4.33 Skeleton 3D Model 50
4.34 Unity 3D Workspace 1 51
4.35 Unity 3D Workspace 2 51
xiii
LIST OF ABBREVIATIONS / TERM / SYMBOL
AR Augmented Reality
2D Two Dimensional
3D Three Dimensional
ADDIE Analysis, Design, Development, Implement, Evaluate
xiv
LIST OF APPENDICES
APPENDIX TITLE PAGE
A Gantt Chart FYP I 60
B Gantt Chart FYP II 61
C Poster FrogAR of Augmented Reality 62
1
CHAPTER I
INTRODUCTION
1.1 Introduction
Augmented Reality is an interactive technology that give us new way to interact in
direct view of an existing environment where the objects that reside in the real-world.
A simple augmented reality use case is a user captures the image of a real-world object,
and the underlying platform detects a marker, which triggers it to add a virtual object
on top of the real-world image and displays on your camera screen.
Augmented reality is a technology that works on computer vision based
recognition algorithms to augment sound, video, graphics and other sensor based inputs
on real world objects using the camera of your device. It is a good way to render real
world information and present it in an interactive way so that virtual elements become
part of the real world.
2
1.2 Project Background
FrogAR with Augmented Reality is an interactive flashcard which is using new
era technology to help the students learn and know about life cycle and anatomy of frog
which is in English language. This application will show them the information and a
little bit of scientific name to make a clearer understanding when applying with
augmented reality technology which allows the student to explore the 3D model of the
anatomy and life cycle in the real world space. This application using an interactive
flashcard focus on life cycle such as egg, tadpoles and adult frog also anatomy, such as
muscular, skeleton and respiratory systems of frog that users have learned before. The
users need to scan the image of the frog that created on the flashcard using their mobile
phone. Then, 3D frog models will appear at the mobile phone automatically.
Meanwhile, on the mobile apps they also can click physical button such as start, about,
guideline, previous, next, sound, and exit button. This interactive flashcards has sound
that gives instruction and interaction with the users. Last but not least, the 3D frog
models was created is suitable for the students, so it has many of the movement to make
this interactive flashcards more attractive.
1.3 Problem Statement
In generally, there are various augmented reality applications that have been
developed to attract student into science subjects. But it’s lacking in lot of aspect. For
example, nowadays are currently too much open with the technology so they may not
interest too much for reading or to studying it in such a way with an old pattern book that
contains a lot of writing without understanding it. Besides that, they will feel bored with it.
Furthermore, the students like to learn to sound which is contains interaction and listening.
3
Second, traditional methods like dissection still do exist. Dissection has been
used for centuries to explore anatomy of frog. Students from all educational levels may
be faced with the ethical dilemma of whether or not to participate in the dissection of
animals.
1.4 Objective
There are the following objectives of FrogAR with Augmented Reality which are:
i. To design the application to explore the unique life cycle and intricate
anatomical details of a frog through AR presentation to student.
ii. To develop an attractive flashcard that enhanced with augmented reality using
the software which is Maya 3D as the main software and also the side software
which are Unity 3D, Adobe Photoshop, Adobe Illustrator and Vuforia.
iii. To test the functionalities of mobile application that will be create can be use
smoothly by the user on the android platform and provide beneficial to the user.
1.5 Scope
The scopes for this project are identified to make the application development
process easier. The scope is divide into two, which are application scope and user scope.
The application scope that augmented reality technology integrated in mobile
application for smartphone. In addition, can featuring 3D model of frog and information
about life cycle and anatomy. User scope are suitable for student from all educational
level like student primary and secondary school, university.
4
1.6 Limitation of Work
This AR model based on FrogAR for students are limited by three aspect. First
and foremost, this application is applicable only for android user which is not supported
in websites and IOS operating system. Then, this application need special marker in
order to make it work. This application implement physical button only for the
interaction between user and the application.
1.7 Expected Result
At the end of this project, the expected result following the development of the proposed
project is as follows:
i. Used maker-based technique with a good interface.
ii. Student can interact with the button functionality on wide space.
iii. Student can explore and discover the unique life cycle and intricate anatomical
details of a frog in real experience.
iv. Student can get the information clearly from application AR.
1.8 Report Structure
This thesis consists of three chapters. Chapter one is introduced that contains
project background, problem statement, objectives, scope, limitation of work, expected
result and thesis structure. Chapter two is literature review and discuss the advantages
and disadvantages that had been carried out by another existing products that relatedto
the on-going project. Chapter three is a methodology that discusses method or technique
that are used in the project also design framework, specifying in detail design of
5
development project. Next is the conclusion of the overall project followed by
references.
6
CHAPTER II
LITERATURE REVIEW
2.1 Introduction
This chapter discusses about previous work or related work about Augmented Reality
of life cycle and anatomy frog. The literature review involving process of read,
evaluating and analyses the available literature related to the selected area of a project
to introduce a need for a new research. In this project literature review, a research has
been made to understand and get some overview about existing project and related
technology. It is important to well understand about all information to be considered
and related before developing this application.
2.2 Augmented Reality History
The first Augmented Reality was first invented by a Professor and Computer
Scientist from Harvard name Ivan Sutherland in 1968. He invented a device that he
called The Sword of Damocles which is a head-mounted display. This deviceis the first
7
sort of augmented reality device that being invented by him and his student, Bob
Sproull. The next big thing happened in 1974, when Myron Krueger created
Videoplace. This project combined a projection system and video cameras that
produced shadows on the screen. This setup made the user feel as though they were in
an interactive environment.
A huge advancement in the Augmented Reality technology happened in
2000 when Hirokazu Kato from the Nara Institute of Science and Technology in Japan
released a software called ARToolKit. Through this software, users could capture real-
world actions and combine it with interactions of virtual objects. The ARToolKit is still
used widely to compliment many augmented reality experiences. In 2009, Esquire
magazine collaborate with Robert Downey Jr., enabling readers to use a software on
their computers to scan the magazine and see him in AR. In this same year, ARToolKit
made augmented reality available to Internet browsers. In 2013, Volkswagen provides
a virtual step-by-step repair assistance using their app called MARTA (Mobile
Augmented Reality Technical Assistance). As more industries started using AR, it
continues to grow. In 2016, Augmented Reality and Virtual Reality investment has
reached $1.1 billion, and that growth is only expected to continue. Then in year 2018,
the software of Assemblr is a content-creation platform that lets everyone create their
own AR content was launched.
2.3 Related Technique
Related techniques refer techniques of Augmented Reality already existing and
used until now. Many of them are using different technique to make the system. Some
of them are using marker-based detection technique while the other is using markerless
8
detection technique. This is example of techniques:
2.3.1 Marker based
Figure 2.1 : Marker-Based Augmented Reality
The digital world is anchored to the real world. Image recognition is an
imperative component of augmented reality systems. By use of identifying visual
markers already embedded within the system, physical world objects are detected for
superimposition of virtual elements. In order for an AR application to estimate the
orientation and position of a camera with respect to the real world frame, most
applications employ a tracking technique known as marker based augmented reality.
Marker is such a sign or image that a computer system can detect using image
processing, pattern recognition and computer vision techniques. Once detected, it then
defines both the correct scale and pose of the camera. A marker can be anything, as
long as it has enough unique visual points.
9
2.3.2 Markeless
Figure 2.2 : Markerless Augmented Reality
New advances in the mobile hardware and software technologies led to the
recent introduction of markerless augmented reality. Markerless augmented reality
technique allows the use of any and all parts of the physical environment as the target
or base for the placement of superimposed virtual objects. Markerless AR depends on
the natural features of a surrounding rather than the fiducial identifying markers. Some
Markerless systems have the ability to extract and store information and characteristics
about the environments they are used on for later usage. When used in smartphones and
other digital devices, the Markerless AR system typically makes use of the GPS feature
in-built in the device in order to locate and interact with the available augmented reality
resources.
2.4 Related Topic
There are several products related to the topic of the project that will be develop.
Most of them used the same methods but different features and multimedia elements.
There are the example of system that can be related:
10
2.4.1 Human Anatomy in Mobile Augmented Reality or HuMAR
Figure 2.3 : Human Anatomy
Augmented Reality is a technology that augments reality with either two or three
dimensional computer generated imagery, objects and information, and allows users to
interact with them. Focuses on the development of a prototype educational tablet
application called Human Anatomy in Mobile-Augmented Reality (HuMAR) utilizing
AR technology and the selected learning topic is the anatomy of the human skeletal
structure. This HuMAR application is currently implemented as a learning tool,
designed to enhance learning and foster student motivation and to increase the learning
outcomes in skeletal anatomy. This session was organized for the development of the
3D modelling.
11
2.4.2 An Interactive Augmented Reality System for Learning Anatomy
Structure
Figure 2.4 : Learning Anatomy Structure
Augmented reality (AR) technology to create an interactive learning system,
which help medical students to understand and memorize the 3D anatomy structure
easily with tangible augmented reality support. It using the marker less Augmented
Reality. It is simultaneous location and mapping that allows to place AR user
experience wherever they want, it a flat surface.
2.4.3 Augmented Reality for Learning Anatomy using Marker Based
Figure 2.5 : Learning Anatomy using Marker Based
12
Augmented reality (AR) with haptics is an effective tool to learn anatomy while
providing equitable access to more engaging experiences. Marker Based Augmented
Reality is the physical object or a piece of paper on which an icon has been printed. It
contain simple and asymmetrical designs that allow three-dimensional objects
superposition and recognition.
2.4.4 3D Frog Skeleton
Figure 2.6 : 3D Frog Skeleton
This application are a tool to understand better how motor system parameters
are fine-tuned for specific behaviors. Allows viewing the frog body and skeleton at
different angles and degrees of approximation. Also can click on legend button to see
the names of the bones.
13
2.5 Comparison Table of Topic
Journal
Title
Author/Year Techniqu
e
Advantage Disadvantage
Human
Anatomy in
Mobile
Augmented
Reality or
(HuMAR)
Siti Salmi
Jamali, and
Mohd Fairuz
Shiratuddin,
and Kok Wai
Wong, and
Charlotte L.
Oskam.
2015
Augmente
d Reality
and
coursewar
e-based
applicatio
n
It will improve
their memory to
retain the
information longer
and have a better
understanding of
the subject learnt
Limitations on the
books that can be
used are based on
the space that
recognizes them.
An
Interactive
Augmented
Reality
System for
Learning
Anatomy
Structure
Chien-Huan
Chien, and
Chien-Hsu
Chen, and
Tay-Sheng
Jeng.
2010
Markerles
s
Augmente
d Reality
This AR system
help medical
students to learn
the complex
anatomy structure
better and faster
than only with
traditional
methods.
Less demographics
about information
and anatomy
background
14
Augmented
Reality for
Learning
Anatomy
Soon-ja Yeom.
2011
Marker-
based
Augmente
d Reality
Interactive method
like AR with
haptics is expected
to provide more
engaging and
effective learning
experiences.
Interactive online
learning systems
are very common
as auxiliary
learning tools
3D Frog
Skeleton
Anne Maglia.
2005
Mobile
3D
Applicati
on
Help students learn
anatomy and to
make the field of
study more
accessible to both
students and
teachers
Only give external
information and
less interactive and
do not use
Augmented Reality
technique in this
mobile application.
Table 2.1 : Comparison Table
15
2.6 Comparison table of the existing products with 5 element multimedia
Product Text Image Video Audio Animation
Human Anatomy
in Mobile
Augmented
Reality or
(HuMAR)
An Interactive
Augmented
Reality System
for Learning
Anatomy
Structure
Augmented
Reality for
Learning
Anatomy
3D Frog Skeleton
Table 2.2 : Comparison Table of Element Multimedia
16
2.7 Summary
This chapter discuss about an overview about the concept of the system.
Literature Review is important to help the developer to know the problem from the
previous system that can be improves or as a guidance of the flow of new system.
Besides, it helps the developer in understanding the system and the chosen techniques
more.
17
CHAPTER III
PROJECT METHODOLOGY
3.1 Introduction
This chapter will explain the details about the research methodology and system
development methodology that being used in this proposed project to develop the
application of FrogAR with Augmented Reality features. Methodology is a set of guides
that contains models, equipment and specific techniques that need to be followed in
executing every activity that exists in the system development life cycle. This is very
important in determining the success of a project. This is because every methodology
used will have a profound impact if this methodology is not appropriate.
3.2 Project Development Methodology
Development process of an application is a detail process and needs to be
executed according to their phases. The project methodology is being used to solve all
the problems arising in the system analysis systematically to ensure this project is
18
ANALYSIS
EVALUATE DESIGN
completed and meet the objectives. It is important to decide what is the problem occur
and what kind of method that are suitable to overcome the problem in the proposed
project. There are a few steps of the development model for this application is ADDIE
development model that are being followed in this research methodology as illustrated
in the Figure 3.1 below.
Figure 3.1 : ADDIE Development Model
3.2.1 Analysis
The Analysis phase is the foundation for all other phases of instructional design.
During this phase, the developer defines the problem, identifies the source of the
problem and determines possible solutions. In this phase, the analysis process will be
carry out to find the problem that exist related to the development of FrogAR
application. The phase may include new element or value added that must be apply in
order to attract the user to using the application. Through this phase, the process of
application development such as to establish the goals, setting up the objective, to
choose the content that corresponding to the application and make a research on related
in Literature Review and make the comparison on each other.
DEVELOP-
MENT
IMPLEMENT
19
Problem
Objectives
Target Audience
Content
Strategy
Figure 3.2 : Analysis Phase
• Students may not interest to read or to study it in such a way with an old pattern book.
• Traditional methods like dissection still do exist
• To study the AR can use in FrogAR app.
• To design and develop FrogAR app that enable users can learning with AR.
• To evaluate function AR of Froggipedia.
• Admin
• User (students)
• FrogAR using Augmented Reality
•
•
•
•
-A mobile apps contains 3D model
-Sound effect
-Contains picture with pronouns words
-Used as a marker based for AR
• Use 3D model
• Augmented reality technology
20
Journal Title Author/Year Technique Advantage Disadvantage
Human
Anatomy in
Mobile
Augmented
Reality
Siti Salmi Jamali,
and Mohd Fairuz
Shiratuddin, and
Kok Wai Wong,
and Charlotte L.
Oskam. 2015
Augmented
Reality and
courseware-
based
application
It will improve their
memory to retain the
information longer and
have a better
understanding of the
subject learnt
Limitations on the
books that can be
used are based on
the space that
recognizes them.
An Interactive
Augmented
Reality
System for
Learning
Anatomy
Structure
Chien-Huan
Chien, and
Chien-Hsu Chen,
and
Tay-Sheng Jeng.
2010
Markerless
Augmented
Reality
This AR system help
medical students to learn
the complex anatomy
structure better and
faster than only with
traditional methods.
Less demographics
about information
and anatomy
background
Augmented
Reality for
Learning
Anatomy
Soon-ja Yeom.
2011
Marker-
based
Augmented
Reality
Interactive method like
AR with haptics is
expected to provide
more engaging and
effective learning
experiences.
Interactive online
learning systems
are very common
as auxiliary
learning tools
3D Frog
Skeleton
Anne Maglia.
2005
Mobile 3D
Application
Help students learn
anatomy and to make the
field of study more
accessible to both
students and teachers
Only give external
information and
less interactive and
do not use
Augmented Reality
technique in this
mobile application.
Table 3.1 : Existing System
21
3.2.2 Design
The second phase is design stage which is it will be explain on the design of
application that will be develop in the form of 3D prototype. This phase will also explain
the technology and tools involved. This stage is focusing on the prototype itself that
will be show on 2D presentation such as pictures. In addition, 3D prototype will be
include the 3D model of the building, interface of application and what button that
include. This prototype will help the development process as it is the guide that show
what the expected output should the application will be.
3.2.2.1 Storyboard
Storyboard is also a part of multimedia design process. The storyboard
shows the look and feel of the application that will be developed. Some of the
storyboard can be seen in interface prototype.
Figure 3.3 : Loading screen
22
Figure 3.3 show loading screen when user open the application and it need to
wait for data loading before it moves to the homepage interface of FrogAR.
Figure 3.4 : Homepage
Figure 3.4 above show homepage after all the data already load on the loading
screen. On this screen, there are 4 button which is AR Camera when click Start, About,
exit and guideline. AR camera use to scan the marker, About button to show
information about apps FrogAR, Guideline button is how to use the application and
Exit button is to exit application.
23
Figure 3.5 : Guideline Page
Figure 3.5 show the guideline how to use this application of FrogAR.
Figure 3.6 : About Page
Figure 3.6 show the page describe about details of application FrogAR.
24
Figure 3.7 : Exit Page
Figure 3.7 show the page to exit application of FrogAR.
Figure 3.8 : AR Camera
25
Figure 3.8 show the when user scan the flashcard, the object will automatically
pop out on the screen. User can look around of the frog structure and it also give
advantages for user to look the real frog using of the 3D model. The details of
information also will display bottom on the screen.
Figure 3.9 : Prototype of Flashcard
Figure 3.9 show that the flashcard used for markers which is user can scan the
image that created on the flashcard and it will pop out the 3D frog models on the
smartphone screen.
3.2.3 Development
Third phase is the process of development on the real workable and functioning
application. During the development phase, the actual course material are created. This
process are involve the combination of the element that will be use such as 3D model
of the building, button, sound and others, all of that will be apply in the application
itself. In this phase, all steps in development of the project are collected, prepared and
created.
26
a) Create Marker
i. Create Marker
Figure 3.10 : Create Marker Based
Before starting develop the 3D frog models, the flashcard must be created using
Adobe Photoshop. This flashcard used for markers which is user can scan the image
that created on the flashcard and its will pop out the 3D models at the smartphone
screen.
ii. Create Marker using Vuforia
Figure 3.11 : Create Marker using Vuforia
27
The figure 3.11 show that Vuforia is able to recognize and track targets by
analyzing the contrast based features of the target that are visible to camera. The
developer can improve the performance of a target by improving the visibility of these
features through adjustments to the target's design, its rendering and scale, and how it's
printed. The star rating of a target ranges between 1 and 5 stars; although targets with
low rating (1 or 2 stars) can usually detect and track well. For best results, the developer
should aim for targets with 4 or 5 stars.
b) Animating 3D character
Next process in animating 3D frog models using Autodesk Maya broken down
into a few components which is generate a modelling, texturing, rigging, animation and
rendering process.
Figure 3.12 : Animation 3D character using Maya Software
i. Modelling: Everything that needs to be seen onscreen or rapid prototyped has to
be modelled. There are many techniques for creating 3D models.
28
ii. Texturing: In the texturing component, the colour and the surface properties
being apply to the geometric models. The model surface should look like its
match the real-world counterpart. It is important to create the mood for the user
as they feeling they were in that place.
iii. Rigging: In this process, rig the 3D models of frog models in anatomy and life
cycle to make movement in the next process. Furthermore, joint controller,
skinning, enveloping, muscle system and floating GUI is involved.
iv. Animation: The movement of the frog is created. In this process, the physical
button will be added where the user can touch at the phone screen. Other features
like text, sound and video are being implemented during this process.
v. Rendering: This process is the last in animating 3D frog models. Rendering is
the process which is painting all component in the production stage to make
final output.
c) Building AR
Figure 3.13 : Building AR using Unity 3D software
29
In this process, the 3D frog models of the anatomy and life cycle of frog will be
imported into Unity 3D software. Then, the developer can started building AR
experience using Unity 3D and Vuforia Platform.
d) Interaction Button
Adding virtual buttons provide by platform of Vuforia to the scene, which
simply means that we add buttons to AR world, which can touch in the real world.
e) Layout Design
An illustration for the homepage looks and illustration of the FrogAR for the
card is created. The image on the card as a basis for AR model during the scanning
process. While the homepage is crucial as the opening of the application before it goes
to the next steps.
f) Coding
The movement of object is created by coding the model using C# language to
desired outcome of the project based on the findings during the research phase.
3.2.4 Implementation
The implementation phase refers to the actual delivery of the instruction. This
phase is the efficient and effective delivery of instruction. This phase must promote the
user understanding of material, support the user achieve of objectives, and ensure the
users transfer of knowledge from the learning to setting to the job.
30
a) Test Run Project
This is when the developer test and runs the project to ensure that the project
can be used and running accordingly.
b) User Test Run
Developer give to the user to test the project and give the feedback before the
presenting the final product. Criticisms and constructive feedback is taken to be
implemented later on.
3.2.5 Evaluation
This phase measures the effectiveness and efficiency of the instruction.
Evaluation should actually occur throughout the entire instructional design process-
within phases, between phases, and after implementation. Evaluation phases may be
formative or summative. The last phase is the evaluation phase which is the final
product will be judge and evaluate by the professional panel.
i) Debug
a) Identify Errors
After done test run, errors that were found by the users should be
identified. Example, glitches and mistakes should be brought to light for
developer to improve the project while also implementing the feedback
by the alpha and beta testers.
b) Find solutions
If once errors have been identified, solutions the error must be done to
solve.
31
ii) Final product
a) Presentation
All of steps in production stages are complete. The final output have
been done to be presented and launched for a large audience to use and
ready to perform.
3.3 Framework
Figure 3.14 : Framework of FrogAR application
Figure 3.14 above shows the framework design of FrogAR using with
Augmented Reality. The user can scan the any image of flashcard for display 3D
animation models. In addition, user can play with virtual button that implanted at the
image target. Vuforia platform is to create Augmented Reality for mobile based and the
database marker is save in there.
3.4 Software Requirement
Each software has its own function in order to do this research. The software
used during the FrogAR with Augmented Reality application development are:
32
Software Use Figure
Unity 3D Used to create the
Augmented Reality app and
overall project.
Autodesk Maya
2018
Used to make 3D character
model of anything such as
frog model and more.
Adobe
Photoshop
Used for create design of
flashcard and mobile
application interface.
Adobe
Illustrator
Used for create design of
flashcard and mobile
application interface.
Vuforia The platform that allow
FrogAR application to have
the feature of Augmented
Reality on the devices.
Use computer vision
technology to recognize and
track Image target and
simple 3D objects, such as
boxes in a real time.
Table 3.2 : Software Requirement
33
3.5 Hardware Requirement
Hardware is another thing that important to have in order to make the application
work. Each hardware has its own function in order to do this research. The hardware
used during the FrogAR with Augmented Reality application development are:
Hardware Use Figure
Laptop
Used a high spec laptop to create
the sketches for the storyboard,
flashcard design and create some
info related to FrogAR using AR
Technology.
Used for on the coding and 3D
modelling.
Smartphone
(Android)
Used to test the application
whether it work fine on the
device or not.
Used to play with AR
experiences using mobile
application.
The camera also used to scan the
image at the flashcard.
The speaker used to give the
sound.
Table 3.3 : Hardware Requirement
34
3.6 Conclusion
As a whole, this chapter describes about the project methodology towards the
application development and also the analysis on the requirement that related to the
purpose of the project in order to complete the final product of the FrogAR with
Augmented Reality interactive mobile application.
35
CHAPTER IV
IMPLEMENTATION AND TESTING
4.1 Introduction
In this chapter described the implementation of the methodology discussed in the
previous chapter and testing to obtain the result of each implementation. Implementation
is executed to ensure the application is developed according to the main objectives of the
project and fulfill the user requirement. Testing will be executed the developer will
recognize the defects as soon as possible and repair it immediately.
4.2 Implementation
The implementation phase refers to the actual delivery of the instruction. The
purpose of this phase is to give the effective and efficient delivery of a fully functional
application. This project is to develop and implement as an android application by using
the main software which is Unity 3D that integrated with Vuforia. Furthermore, this
36
project use C# as the programming language for the coding purpose.
4.2.1 FrogAR Application Interface
Figure 4.1 : FrogAR Home Page
Figure 4.1 above show the whole interface for home page. There is the logo
of the application on the top side of the screen. It have 4 buttons which are Start,
Guideline, About and Exit. For the Start button, when user click button, it brings the
user to the AR Camera interface that allows to scan the marker. Meanwhile, the
Guideline button will allow the user to see how to use the application wisely. In addition,
About button is explain and describe the details of this application and Exit button to
exit from application.
37
Figure 4.2 : Start Button
Figure 4.3 : Guideline Button
Figure 4.4 : About Button
Figure 4.5 : Exit Button
38
Figure 4.6 : Guideline Page 1
Figure 4.6 above show guideline as an instruction how to use the application of
FrogAR. There are two button which are Next button to move next page of guideline
and Exit button directed to the homepage of the application.
Figure 4.7 : Guideline Page 2
39
Figure 4.7 above show guideline as an instruction how to use the application of
FrogAR. There are three button which are Next button to move next guideline, previous
button to return page guideline, and Exit button directed to the homepage of the
application.
Figure 4.8 : Guideline Page 3
Figure 4.8 above show guideline as an instruction how to use the application of
FrogAR. There are two button which are previous button to return page of guideline and
Exit button directed to the homepage of the application.
Figure 4.9 : Exit Button
40
Figure 4.10 : Next Button
Figure 4.11 : Previous Button
Figure 4.12 : About Page
Figure 4.12 above show the about page describes the details of the application.
On this screen, there are Exit button to direct the homepage of this application.
41
4.2.2 AR Camera
Figure 4.13 : AR Marker Page (Egg)
Figure 4.14 : AR Marker Page (Tadpole)
42
Figure 4.15 : AR Marker Page (Adult Frog)
Figure 4.16 : AR Marker Page (Muscular)
43
Figure 4.17 : AR Marker Page (Respiration)
Figure 4.18 : AR Marker Page (Skeleton)
Figure 4.13 until figure 4.18 show the scene of AR camera page for user to scan
44
the flashcard marker. On this screen, there are three button which are Sound, Camera
and Exit button. When user scan the flashcard, the 3D model will automatically pop out
on the screen with the information. When user click the Sound button, the sound will be
display. Then when user click the camera, the page will be screenshot and save into the
gallery. Lastly, Exit button to direct move to the homepage of the application.
Figure 4.19 : Sound Button
Figure 4.20 : Camera Button
Figure 4.21 : Exit Button
4.2.3 AR Marker
Marker or image target can be anything, as long as it has unique visual point.
Image with lots of corners and edges will work without any problem. Vuforia Developer
is the website that the user must upload the image target and check whether the image
have been uploaded is suitable as a marker or not.
45
Figure 4.22 : Egg Marker and Features
Figure 4.23 : Tadpole Marker and Features
46
Figure 4.24 : Adult Frog Marker and Features
Figure 4.25 : Muscular Marker and Features
47
Figure 4.26 : Respiration Marker and Features
Figure 4.27 : Skeleton Marker and Features
48
4.2.4 3D Model
Augmented Reality is a combination of 2D objects or 3D objects in real 3D
environment and present them into virtual objects in a real time.3D modeling is the
process of developing a mathematical representation of any surface of an object (either
inanimate or living) in three dimensions via specialized software. The product is called
as a 3D model. It can be displayed as at two-dimensional image through a process called
3D rendering or used in a computer simulation of physical phenomena. This project
created 3D model using Autodesk Maya. The 3D model was built with texture. When
users scan the marker, the 3D model will appear at the mobile phone screen based on
the marker.
Figure 4.28 : Egg 3D Model
49
Figure 4.29 : Tadpole 3D Model
Figure 4.30 : Adult Frog 3D Model
Figure 4.31 : Muscular 3D Model
50
Figure 4.32 : Respiration 3D Model
Figure 4.33 : Skeleton 3D Model
51
4.2.5 Unity 3D
Unity 3D is a platform to create application especially the AR contents. All the
interface of this application is created here and the 3D animation contents then imported
from Maya into Unity 3D.
Figure 4.35 : Unity 3D Workspace 1
Figure 4.36 : Unity 3D Workspace 2
52
4.3 Testing
Testing is one of an important phase in the development of the project. System
testing is a technique to evaluate the performance measures of this application whether
it fully function or vice versa. The system testing is to investigate the testing phase where
the test of the design and set requirement. Testing is needed to test system full function
and free error. In this phase, there are three types of testing to test the application which
are unit testing, integrate testing and system testing. Unit testing is carried out to verify
the functionality of a specific section code. Integration testing is to exposed defect in the
application interfaces and interaction between modules. End-to-testing or system tests
a complete integrated system to verify that it meets its requirements.
4.4 Test Case
A test case is a set of condition or variables under where the tester will determine
if the requirement upon an application is partially or fully satisfied. Test case also can
be defined as a sequence of steps to test the correct behavior of functionality or feature
of an application. There is a list of steps, test, procedure and expected outcomes would
be stated in the test case.
53
Open Application Test Case
Step Test Procedure Expected Output Result
1
Open the application
Loading Screen will appear
before jump into the
homepage.
Success
There are 4 buttons which are
Start, About, Guideline and
Exit button.
Success
Background sound will be play Success
Table 4.1 : Open Application Test Case
Home Page Test Case
Step Test Procedure Expected Output Result
1 Tap the Start button Redirect to AR Camera
interface.
Success
2 Tap the Guideline Button Open and view the Guideline
Interface and information.
Success
3 Tap the About Button Open and view the About
Interface and information.
Success
54
4 Tap the Exit Button Open and view the Exit
Interface.
Success
Table 4.2 : Home Page Test Case
AR Camera Test Case
Step Test Procedure Expected Output Result
1 User enter the AR Camera
interface
There are 3 buttons which are
Sound, Camera and Exit
button.
Success
2
User scans the marker
The 3D model will appears
automatically on the screen
and display information with
model.
Success
3
User touch and move 3D
model with two finger
3D model will move to the
right and left smoothly
according to the user.
Success
4
User scale the 3D model
with two finger
The 3D model will resize into
large or small size which are
zoom in and zoom out the
model.
Success
5 User tap sound button The sound will be display. Success
55
6 User tap camera button The page will be screenshot
and save data into phone
gallery.
Success
7 User touch the back button Redirected and view the
homepage
Success
Table 4.3 : AR Camera test case
Guideline Page Test Case
Step Test Procedure Expected Output Result
1 User enter the Guideline
Page
There 3 buttons which are
Next, Previous, Exit Button
Success
2 User tap Next and Previous
button
The information on how to use
the application will change
whenever the user clicks the
button
Success
2 User touch the Exit button Redirected and view the
homepage
Success
Table 4.4 : Guideline page test case
About Page Test Case
Step Test Procedure Expected Output Result
1 User enter the About Page There is Exit Button Success
2 User tap the Exit button Redirected and view the Success
56
homepage
Table 4.5 : About page test case
Exit Page Test Case
Step Test Procedure Expected Output Result
1 User enter the Exit Page There are 2 button which are
Yes and No Button
Success
2 User tap the Yes button Redirected to exit the
application
Success
3 User tap the No button Redirected and view the
homepage
Success
Table 4.6 : Exit page test case
4.5 Conclusion
In this chapter of implementation and testing, it is been describe and show all
the user interfaces in the application. It can act as a guide for the new user about how
they can use the application. Testing also an important part to ensure that all the
functionality achieved and run smoothly. Maintenance should be carry from time to time
to check whether there are any bugs detected. This phase will repeat to ensure the error
can be minimized and the application will be optimized.
57
CHAPTER V
CONCLUSION
5.1 Introduction
In this chapter, the contribution of FrogAR with Augmented Reality, problem, and
limitation during project development as well as the future work in order to improve the
application itself will be discussed.
5.2 Project Contribution
FrogAR with Augmented Reality developed based on ADDIE method mainly
aims to give the user to experience the new way to explore the life cycle and anatomical
details and also to provide the user with the information of the scientific’s name in this
application. Meanwhile, the other aim is to give the user exposure and education about
AR technology. Furthermore, it is very convenient to use because the user only just needs
to be download on the Google Play Store and can use them with offline internet
connection.
58
5.3 Problem and Limitation
The major problem and limitation during the project development are to find the
way to optimize the application and stabilize the 3D model to ensure it can be shown
without any failures. Besides that, the limitation is this application only available on the
Android platform only.
5.4 Future Work
FrogAR with Augmented Reality still need to improve a lot but it will take a lot
of time. In the current version of the application, it only available for little type of life
cycle and anatomy, so for next planning is to add the more model and Scientific’s name
information that available. Moreover, we can add on new modules such as activity, quiz
or games might help more student in their understanding about the subject they study
and the outcomes will be the learning that is most interactive and suitable for teachers
and parents’ usage to teach their student or children. In addition, this application can
also be added a video of the anatomy of frog in a linear presentation with subtitles for
student to enhance learning process.
5.5 Conclusion
FrogAR with Augmented Reality helps the target user to explore the life cycle
and anatomy of frog in a new way or experience. ADDIE model has been used in order
to make this development workflow going well and give the expected outcome. The
framework and user interface design that included in this report can also act as a
guideline for the user to use this application and also for research in their work.
59
REFERENCES
Chien, C. H., Chen, C. H., & Jeng, T. S. (2010, March). An interactive augmented
reality system for learning anatomy structure. In proceedings of the international
multiconference of engineers and computer scientists (Vol. 1, pp. 17-19). Hong Kong,
China: International Association of Engineers.
Jamali, S. S., Shiratuddin, M. F., Wong, K. W., & Oskam, C. L. (2015). Utilising
mobile-augmented reality for learning human anatomy. Procedia-Social and Behavioral
Sciences, 197, 659-668.
Yeom, S. J. (2011). Augmented reality for learning anatomy. Changing Demands,
Changing Directions. Proceedings ascilite Hobart, 1377-1383.
60
APPENDIX
TASK NAME 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Topic Discussion
Project Tittle Proposal
Proposal Writing
Proposal Writing-
Literature Review
Proposal Progress
Presentation and
Evaluation
Discussion
Correction Proposal
Proposed Solution
Methodology
Proof of Concept
Drafting Report of the
Proposal
Submit Draft of Report
to Supervisor
Seminar Presentation
Correction Report
Final Report
Submission
Appendix A Gantt Chart FYP I
61
TASK NAME 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Project Meeting with
Supervisor
Project Development
Progress Presentation
and Evaluation
Project Development
Project Testing
Submit Draft Report
and Documentation of
the project
Seminar Presentation
Correction Report
Final Thesis
Submission
Appendix B Gantt Chart FYP II
62
Appendix C Poster FrogAR of Augmented Reality