augmented reality malaysian greeting cards · this project report entitled augmented reality...

71
AUGMENTED REALITY MALAYSIAN GREETING CARDS ASMA’ RAIHANAH BINTI MOHD SAIDI BACHELOR OF INFORMATION TECHNOLOGY (INFORMATICS MEDIA) WITH HONOURS FACULTY OF INFORMATICS AND COMPUTING UNIVERSITI SULTAN ZAINAL ABIDIN 2020

Upload: others

Post on 17-Mar-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

AUGMENTED REALITY

MALAYSIAN GREETING CARDS

ASMA’ RAIHANAH BINTI MOHD SAIDI

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONOURS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITI SULTAN ZAINAL ABIDIN

2020

Page 2: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

AUGMENTED REALITY MALAYSIAN GREETING CARDS

ASMA’ RAIHANAH BINTI MOHD SAIDI

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONOURS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITI SULTAN ZAINAL ABIDIN, TERENGGANU, MALAYSIA

JANUARY 2020

Page 3: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

i

DECLARATION

I at this moment 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 Universiti Sultan

Zainal Abidin or other institutions.

Signature:

______________________

Name: Asma’ Raihanah Binti Mohd Saidi

Date:

Page 4: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

ii

CONFIRMATION

This project report entitled Augmented Reality Malaysian Greeting Cards prepared and

submitted by Asma’ Raihanah Binti Mohd Saidi, matric number BTDL17047934 and

in my point of view, this project fulfils a condition to be awarded a Bachelor of

Information Technology (Informatics Media) with Honours in Universiti Sultan Zainal

Abidin (UniSZA).

Signature:

______________________

Supervisor: Prof Madya Ts Dr Syadiah Nor

Binti Wan Shamsuddin

Date:

Page 5: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

iii

DEDICATION

In the name of Allah, the Most Gracious and the Most Merciful, all praise is only for

Him the documentation and the system for the subject, CSF35204, Final Project II is

finished due the time. Never forget to my kind supervisor, Prof Madya Dr Syadiah Nor

Binti Wan Shamsuddin for the valuable idea, time, support, advice, guidance, and ideas

given through the development of research until complete the part of the project in

phase one. Also, I want to dedicate my appreciation to my beloved family that supports

and motivates me during process finishing project. Next, thanks a lot to friends that

willing to lend their hand for finishing the project. Lastly, thank you to everyone who

directly or indirectly involved in the process of making the system and documentation.

Page 6: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

iv

ABSTRACT

Malaysia is a multi-cultural society. The main ethnic groups are the native Malays as

well as large populations of Chinese. When visiting the country it is clear that the

ethnicities retain their religions, customs and way of life. Augmented Reality (AR)

Malaysian Greeting Cards is an interactive mobile application that develops to show

how we celebrate festivals in Malaysia such as Eid Al Fitr, Eid Al Adha, Chinese New

Year and Independence Day. This mobile application is applied with augmented

reality technology which allows users to use it more attractive and real when they

want to express the user’s wishes through AR presentation to their relatives and

friends instead of using the paper card. AR is the augmentation of the real world

through the addition of three-dimensional (3D) virtual objects. By implementing the

technology of Augmented Reality, the mobile application will look more attractive

and real.

Page 7: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

v

ABSTRAK

Malaysia adalah masyarakat yang berbilang budaya. Etnik utama adalah orang

Melayu asli dan populasi besar kaum lain adalah kaum Cina. Jelas sekali, bahawa

etnik di Malaysia ini mengekalkan agama, adat istiadat dan cara hidup mereka. Realiti

Semula Kad Perayaan Malaysia merupakan satu aplikasi telefon pintar yang interaktif

yang dibangunkan untuk menunjukkan bagaimana kita merayakan perayaan-perayaan

di Malaysia seperti Hari Raya Aidilfitri, Hari Raya Aidiladha, Tahun Baru Cina dan

Hari Kebangsaan. Aplikasi mudah alih ini diaplikasi bersama teknologi AR di mana

membolehkan pengguna menggunakannya dengan lebih menarik dalam membuat

ucapan kepada saudara mara dan rakan-rakan berbanding menggunakan kad kertas.

AR adalah pembesaran dunia nyata melalui penambahan objek maya tiga dimensi

(3D). Dengan menggunakan teknologi Realiti Semula (AR), aplikasi telefon ini akan

lebih menarik dan kelihatan lebih nyata.

Page 8: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

vi

CONTENTS

DECLARATION

CONFIRMATION

DEDICATION

PAGE

i

ii

iii

ABSTRACT iv

ABSTRAK v

CONTENTS vi

LIST OF TABLES ix

LIST OF FIGURES x

LIST OF ABBREVIATIONS

LIST OF APPENDICES

xii

xiii

CHAPTER I

INTRODUCTION

1.1

1.2

Introduction

Project Background

1

2

1.3 Problem Statement 2

1.4 Objective 3

1.5

1.6

1.7

Scope

Limitation of Work

Expected Result

3

4

4

1.8 Chapter of Summary

5

CHAPTER II LITERATURE REVIEW

2.1 Introduction 6

2.2 Mobile Augmented Reality 7

2.3 Marker Based Augmented Reality 8

Page 9: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

vii

2.4 Marker Based Augmented Reality Using

Android

9

2.5 Kineticards Brings Augmented Reality To

Greeting Cards

10

2.6 Overall Analysis 11

2.7 Chapter of Summary

13

CHAPTER III

METHODOLOGY

3.1 Introduction 14

3.2 ADDIE Development Model 15

3.2.1 Analysis Phase 15

3.2.2 Design Phase 16

3.2.3 Development Phase 19

3.2.4 Implementation Phase 21

3.2.5 Evaluation Phase 22

3.3 Framework 23

3.4 Hardware and Software Requirement 24

3.4.1 Hardware 24

3.4.2 Software 25

3.5 Techniques 27

3.6 Chapter of Summary

27

CHAPTER IV IMPLEMENTATION AND TESTING

4.1 Introduction 28

4.2 Implementation 29

4.2.1 Greeting Malaysia Interface 29

4.2.2 AR Camera 34

4.2.3 AR Marker 38

4.2.4 3D Model 43

4.2.5 Unity 3D 46

Page 10: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

viii

4.3 Testing 47

4.3.1 Test Case 48

4.4 Chapter of Summary

50

CHAPTER V CONCLUSION

5.1

5.2

Introduction

Project Contribution

51

51

5.3 Problem and Limitation 52

5.4 Future Work 52

5.5

Conclusion

REFERENCES

52

53

Page 11: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

ix

LIST OF TABLES

TABLE

TITLE

PAGE

2.1 Comparison Table 11

4.1 Open Application Test Case 47

4.2 Home Page Test Case 48

4.3 AR Camera Test Case 48

4.4 Instruction Page Test Case 49

4.5 About Page Test Case 49

Page 12: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

x

LIST OF FIGURES

FIGURE TITLE PAGE

2.1 Mobile Augmented Reality 7

2.2 Marker Based Augmented Reality 8

2.3 Marker Based Augmented Reality Using Android 9

2.4 Kineticards 10

3.1 ADDIE Development Model 15

3.2 Menu Page 16

3.3 Tutorial Page 17

3.4 About Page 17

3.5 AR Camera 18

3.6

3.7

Create Marker Based

Interaction Button

19

20

3.8 Develop On Unity 21

3.9 Framework 23

3.10 Marker Based 27

4.1 Home Page 29

4.2 Start Button 30

4.3 Instruction Button 30

4.4 About Button 30

4.5 Exit Button 30

4.6 Instruction Page 1 31

4.7 Instruction Page 2 31

4.8 Instruction Page 3 31

4.9 Home Button 32

4.10 Previous Button 32

4.11 Next Button 32

Page 13: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

xi

4.12 About Page 33

4.13 AR Camera Page (Eid Al Fitr) 34

4.14 AR Camera Page (Eid Al Adha) 34

4.15 AR Camera Page (Chinese New Year) 35

4.16 AR Camera Page (Independence Day) 35

4.17 More Info Button 36

4.18 Home Button 36

4.19 Greeting Description (Eid Al Fitr) 36

4.20 Greeting Description (Eid Al Adha) 36

4.21 Greeting Description (Chinese New Year) 37

4.22 Greeting Description (Independence Day) 39

4.23 Eid Al Fitr Marker 39

4.24 Eid Al Fitr Features 39

4.25 Eid Al Adha Marker 40

4.26 Eid Al Adha Features 40

4.27 Chinese New Year Marker 41

4.28 Chinese New Year Features 41

4.29 Independence Day Marker 42

4.30 Independence Day Features 42

4.31 Eid Al Fitr 3D Model 43

4.32 Eid Al Adha 3D Model 44

4.33 Chinese New Year 3D Model 44

4.34 Independence Day 3D Model 45

4.35 Unity 3D Workspace 1 46

4.36 Unity 3D Workspace 1 46

Page 14: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

xii

LIST OF ABBREVIATIONS / TERMS / SYMBOLS

AR Augmented Reality

2D Two Dimensional

3D Three Dimensional

ADDIE Analysis, Design, Development, Implementation, Evaluation

FYP Final Year Project

Page 15: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

xiii

LIST OF APPENDICES

APPENDIX

TITLE

PAGE

A Gantt Chart FYP I 54

B Gantt Chart FYP 11 55

C Poster Augmented Reality Malaysian Greeting

Cards

56

Page 16: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

1

CHAPTER I

INTRODUCTION

1.1 Introduction

Augmented reality (AR) is an interactive experience of a real world

environment where the objects that reside in the real world. It is an enhanced version of

the real physical world through the use of visual elements, sound or other sensory

stimuli of interactive technology that give us a new way to interact in direct view of an

existing environment. It allows us to create the 3D object directly into physical things or

fused together in real-time. In this era of technology, there are various applications that

integrated with augmented reality technology.

Page 17: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

2

1.2 Project Background

Augmented Reality Malaysian Greeting Cards is the apps of the cards to show

how we celebrate festivals in Malaysia such as Eid Al Fitr, Eid Al Adha, Chinese New

Year and Independence Day. This mobile application is applied with augmented

reality technology which allows users to use it more attractive and real when they

want to express the user’s wishes through AR presentation to their relatives and

friends instead of using the paper card.

1.3 Problem Statement

In a previous time, we only use the paper card to present or to wish someone for a

special occasion. This old school pattern will make peoples not interest to buy or to

present it in such way. Most of it only available in printed version and it is not

something that interactive to the user. Thus, the functionality of the object that

available in printed version or 2D is limited, user cannot see the real of how we

celebrate festivals in Malaysia.

Page 18: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

3

1.4 Objective

The are a few purposes in developing the Augmented Reality Malaysian Greeting

Cards which is :

1. To design the apps to express the user’s wishes through AR presentation to their

relatives and friends instead of using the paper card.

2. To develop an attractive card with augmented reality using the software which is

Maya 3D, Unity 3D, Adobe Photoshop and Vuforia.

3. To test the functionalities of augmented reality of Greeting Malaysia Apps.

1.5 Scope

The scope of this study is divided into 2:

1. User

The content is generally suitable for all ages and they also can experience to

see the virtual object appear in real-world with the animation.

2. Application

Augmented reality presented in 3D mobile application by using a smartphone.

The application will show how Malaysian celebrate the festivals.

Page 19: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

4

1.6 Limitation of Work

The limitations in conducting this application the users need a mobile-based

application for start the augmented reality and only android version can access the

application. The technique of the application is marker based mobile AR.

1.7 Expected Result

The expected result of Malaysian Greeting Cards application after completing the

development is the user can view and express the information clearly with a good

interface. At the same time, the user can emphasize the button functionality on wide

space. By using the apps, user can experience a real-life festive celebration.

Page 20: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

5

1.8 Chapter of Summary

This chapter discussed about the project background, problem statement,

objectives and project scope.

Page 21: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

6

CHAPTER II

LITERATURE REVIEW

2.1 Introduction

Literature review means searching, collecting and analyzing any issues related

from the previous journal or research paper. The information that has been gathered is

about what method and what contributions that the research has been achieved in

improving the uses of the application. This chapter will be discussing the report

analyzing the approach and techniques that are going to be used in completing the

Augmented Reality Malaysian Greeting Cards project. This literature is made for

identifying the weakness or lacking of related literature review sources.

Page 22: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

7

2.2 Mobile Augmented Reality

As computers increase in power and decrease in size, new mobile, wearable, and

pervasive computing applications are rapidly becoming feasible, providing people

access to online resources always and everywhere. This new flexibility makes possible

new kind of applications that exploit the person's surrounding context. Augmented

reality (AR) as an emerging technology in the mobile computing domain is becoming

mature enough to engender publicly available applications for end users. Various

commercial applications have recently been emerging in the mobile consumer domain

at an increasing pace.

Figure 2.1 Mobile Augmented Reality

Page 23: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

8

2.3 Marker Based Augmented Reality

A marker is a piece of paper with black and white markings. This is used to

display the augmented object on your mobile phone’s screen. Marker-based

augmented reality uses a camera and a visual marker which determines the centre and

range of its spherical coordinate system. Once the marker is present one can view

augmented objects.

A camera is used with AR software to detect augmented reality markers as the

location for virtual objects. The result is that an image can be viewed, even live, on a

screen and digital assets are placed into the scene at the location of the markers.

Limitations on the types of augmented reality markers that can be used are based on

the software that recognizes them. While they need to remain fairly simple for error

correction, they can include a wide range of different images.

Figure 2.2 Marker Based Augmented Reality

Page 24: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

9

2.4 Marker Based Augmented Reality Using Android

Augmented Reality or AR is an emerging technology in which one’s perception

of the real-time environment is enhanced by superimposing computer-generated

information such as graphical, textual, or audio content, as well as objects onto a

display screen. The proposed application is an android mobile based application which

will be compatible with all the existing and upcoming versions of the operating

system. The idea is to allow the user to view the virtual object in the real world using

a marker based AR system.

The user could provide images of the object which would be the front, back, top,

bottom, left and right side pictures of the object. They will be placed onto a 3D cube

which will make up the complete virtual object. Thus an extended environment will be

created through the amalgamation of real world and generated object and it will

appear as though the real-world object and virtual object coexist within the

environment. The advantages of this application as compared to the already existing

2D application are that it would display object in 3D and enable the user to rotate it

virtually. It is inexpensive as the user need not actually purchase the object to see how

it fits in the environment, instead he can try before the purchase itself.

Figure 2.3 Marker Based Augmented Reality Using Android

Page 25: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

10

2.5 Kineticards Brings Augmented Reality To Greeting Cards

With Kineticards, costumers get a traditional greeting card with the details they

want along with a lively and innovative animation complete with sound that is

viewable in AR. What makes them even more appealing though is that the cards

making them a much more affordable solution. All the designs on the cards are

hand-drawn and giving them a sincere and organic feel which they feel has been

missing from traditional greeting cards for sometime. Animation and sounds have

been common in the form of eCards for some time, the media has yet to be seen in a

physical form which is where Kineticards comes in.

Figure 2.4 Kineticards

Page 26: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

11

2.6 Overall Analysis

TITTLE AUTHOR TECHNIQUE ADVANTAGES DISADVANTAGES

Mobile

Augmented

Reality

Application

Tobias H.

Hollerer,

Steven K.

Feiner

Mobile AR

application

AR and wearable

computing are

rapidly growing

fields, as

exemplified by

the soaring

number of

research

contributions and

commercial

developments

since the mid

1990s.

It will take more time

for mobile AR to

reach the computing

mainstream.

Marker

Based

Augmented

Reality

Anuroop

Katiyar,

Karan

Kalra,

Chetan

Garg

Augmented

Reality,

Mobile

Augmented

Reality

The result is that

an image can be

viewed, even live,

on a screen and

digital assets are

placed into the

scene at the

location of the

markers.

Limitations on the

types of augmented

reality markers that

can be used are based

on the software that

recognizes them.

Page 27: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

12

Marker

Based

Augmented

Reality

Using

Android

Mr.

Raviraj

S. Patkar,

Mr.S.

Pratap

Singh,

Ms. Swati

V. Birje

Augmented

Reality,

Android,

Marker,

Operating

System

Low cost devices

as compared to

the costly head

mounted display

devices.

Don’t need not

buy product and

then see how it

will suit with

environment.

Usually have low

screen dimensions

and resolution.

Kineticards

Brings

Augmented

Reality To

Greeting

Cards

Nikholai

Koolonavi

ch

Mobile

augmented

reality

Costumers get a

traditional

greeting card with

the details they

want along with a

lively and

innovative

animation

complete with

sound that is

viewable in AR.

Limitations on the

cards that can be used

are based on the space

that recognizes them.

Table 2.1 Comparison Table

Page 28: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

13

2.7 Chapter of Summary

Basically in this chapter several research have been done in order to have a deep

understanding of the method that is going to implement in proposed application.

Besides a review of related existing systems also have been done at this chapter. From

the existing system, we can have an idea of how the proposed system can be developed

so that it is functioning well and beneficial to all the user. Moreover, there are some

advantages and disadvantages in every technique that has been considered in the

research.

Page 29: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

14

CHAPTER III

METHODOLOGY

3.1 Introduction

In this chapter, it will explain the specific details on the methodology being

used in order to develop this project. In order to make sure the project is on the right

path, methodology plays an important role as a guide for the project complete and

working well as plan. The methodology for this application is ADDIE development

model.

Page 30: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

15

3.2 ADDIE Development Model

The phase in ADDIE development model are: Analysis Phase, Design Phase,

Development Phase, Implementation Phase and Evaluation Phase. All the

methods and processes undertaken in ADDIE development model are more

visible.

Figure 3.1 ADDIE Development Model

3.2.1 Analysis

In this first phase, ideas are collected and categorized, identify the problem,

identify the problem and determine possible solutions. The main objective of this

phase is to come out with new idea and improvements to the current complaint

application. The analysis is also carried out by doing literature review on existing any

augmented reality project. Through the analysis, the weakness of the existing

augmented reality can be identified. All information gathered were used to develop

goals and objective of developing AR application. The software and hardware

requirement are also determined in this phase.

Page 31: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

16

3.2.2 Design

In this phase, the idea application is development into an initial design of the

application. This phase will explain on the design of application will develop in the

form of 3D prototype. A very importance part of the design phase is to create the

storyboard described flow of the application.

i. Storyboard of the application

Main Menu

Figure 3.2 Menu Page

This figure show homepage or main screen. On this screen, there are 3 button

which is AR Camera when user tap icon start, How To and About.

Page 32: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

17

Tutorial Page

Figure 3.3 Tutorial Page

This page show as guideline how to use this application.

About Page

Figure 3.4 Tutorial Page

This page describes the details of the application.

Page 33: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

18

AR Camera Page

Figure 3.5 AR Camera

When user scan the card, the object will automatically pop out on the screen.

When user touch the sound button, the music will display and when user touch the

info button, the details of the greeting will display.

Page 34: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

19

3.2.3 Development

The Development stage builds on both Analysis and Design phase. This phase

will develop the instruction, all media that will be used in the instruction and any

supporting documentation. During the development phase, the actual course materials

are created. In this phase, all step in development of the project are collected,

prepared, created and ready to be tested. In this stage, designers make use of the data

collected from the two previous stages, and use this information to create a program

that will relay what needs to be taught to participants. If the two previous stages

required planning and brainstorming, the Development stage is all about putting it into

action. This phase includes three tasks, namely drafting, production and evaluation.

i. Create Marker

Figure 3.6 Create Marker Based

This is first step before start build the 3D animation, create marker using Adobe

Photoshop. User can scan the marker and the 3D animation models automatically pop

out on the phone screen.

Page 35: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

20

ii. Building environment AR using Unity Software

Figure 3.7 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.

Page 36: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

21

Figure 3.8 Develop On Unity

Create the menu of the application. Insert the Marker Based and create the scene

which is Navigation, AR Camera, Light, 3D Object and Scripts.

3.2.4 Implementation

In this phase, the another word is testing phase. Testing is one if the most

important in ADDIE development model. The application must be tested before

release to the user and sent to the supervisor for feedback. After feedback is received

from the supervisor, the required changes are implemented through the development

phase. When the second prototype is ready, it is integrated with the first prototype,

tested and the send to the user. The development, prototyping and testing phase are

repeated until the final application is ready. The final application is sent to the

supervisor for a final feedback.

Page 37: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

22

3.2.5 Evaluation

Evaluation is the final phase of the ADDIE development model. After the testing

is completed and the final feedback is obtained from the supervisor, the application us

ready for the evaluate by the professional panel.

Page 38: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

23

3.3 Framework

Figure 3.9 Framework

This Figure shows the framework of Augmented Reality Malaysian Greeting

Cards. The user able to scan any image of the flashcard to display 3D animation

models using their device. Meanwhile, user able to choose any button in the

mobile application. Vuforia is a platform to create Augmented Reality for mobile

based. The database marker is saved there.

Page 39: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

24

3.4 Hardware and Software Requirements

In the application development process, the requirement such as software and

hardware are the most importance requirement to ensure that all system development

work smoothly without any interruption and problem. There are several requirements

that were used to complete this project which include:

3.4.1 Hardware

Minimum hardware requirement needed in this development of this application are:

I. Laptop Lenovo Ideapad 320S

To create the sketches for the storyboard, card design, create code and 3D

model of animation.

II. Android Mobile

Use to run and test the application whether it work fine on the device or

not.

Use to play with AR experiences using mobile application.

The camera also used to scan the image of the flashcard.

Page 40: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

25

3.4.2 Software

Software requirement of this project are:

I. Unity 3D

This software is the main software that should gather and combine of the

element that will be have on the application.

II. Autodesk Maya 2018

This software used to make animation, modeling, simulation, rendering of 3D

model.

III. Vuforia

This software is the platform that allow

application to have the feature of Augmented Reality on the devices.

Page 41: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

26

IV. Microsoft Visual Code

Used to code the program the function in the application such as to make the

button functionality when user press the button.

V. Adobe Photoshop

Used to create design of the card and mobile app interface.

Page 42: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

27

3.5 Technique

In Augmented Reality technique there are a few techniques can be use such as

Marker Based, Markerless, Superimposition and Projection Based. In this Malaysian

Greeting Cards project, Marker Based technique is implemented in the application.

Figure 3.10 Marker Based

3.6 Chapter of Summary

It is important to choose the right and suitable methodology for the development

of an application thus it is necessary to understand the application functionality itself.

In order to ensure the effective of the apps, good identification is required before the

development process begins. It also describes the analysis on the requirement that

related to the purpose of the project in order to complete the final product of the

Augmented Reality Malaysian Greeting Cards interactive mobile application.

Page 43: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

28

CHAPTER IV

IMPLEMENTATION AND TESTING

4.1 Introduction

Testing and implementation are described to develop the application that

discussed in the previous chapter, verified to make sure that the application is error-free

and fulfill the user requirements. This chapter should finish before the application is

complete. Implementation are executed to ensure the system is developing according to

the main objectives of the application and fulfill the user requirement. Testing will be

executed the developer will recognize the detects as soon as possible and repair it

immediately. A successful test is one that can uncover errors.

Page 44: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

29

4.2 Implementation

This project is implemented as an android application by using Unity 3D which

is integrated with Vuforia to help developer design, code, debug, test and execute the

main process of the project. This project also used the C# language to connect program

in the Android Studio to the Unity 3D. The apk file is build and being implemented on

Android smartphone to test effectiveness of the application.

4.2.1 Greeting Malaysia Interface

Figure 4.1 Home Page

Figure 4.1 as homepage or main screen of Greeting Malaysia. On this screen,

there are 4 button which is Start, Instructions, About and Exit. When user tap icon Start,

it will to proceed to AR Camera that allows user scan the marker. Meanwhile,

Instruction button as a guideline how user to use this application. Then, About button

describes the details of the application and Exit button will exit from the application.

Page 45: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

30

Figure 4.2 Start Button

Figure 4.3 Instruction Button

Figure 4.4 About Button

Figure 4.5 Exit Button

Page 46: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

31

Figure 4.6 Instruction Page 1

Figure 4.7 Instruction Page 2

Figure 4.8 Instruction Page 3

Page 47: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

32

Figure 4.6, Figure 4.7 and Figure 4.8 as guideline how to use the application of

Greeting Malaysia. On this screen, there are 3 button which is Previous, Next, and

Home. When user touch the Previous button, it will go to previous page and Next

button, it will to proceed to next page of the instruction. Home button is directed to the

homepage of the application.

Figure 4.9 Home Button

Figure 4.10 Previous Button

Figure 4.11 Next Button

Page 48: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

33

Figure 4.12 About Page

Figure 4.12 describes the details of the application. On this screen, there is

Home button, directed to the homepage of this application.

Page 49: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

34

4.2.2 AR Camera

Figure 4.13 AR Camera Page (Eid Al Fitr)

Figure 4.14 AR Camera Page (Eid Al Adha)

Page 50: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

35

Figure 4.15 AR Camera Page (Chinese New Year)

Figure 4.16 AR Camera Page (Independence Day)

Figure 4.13 until figure 4.16 show the scene of AR camera page for user scan the

card. On this screen, there are 2 button which is More Info and Home. When user scan

the card, the object will automatically pop out on the screen and the music will display.

When the 3D model appears, user can move their device to look at 3D model and user

also can use their two fingers to resize the 3D model which is can zoom in and zoom

out. When user touch the more info button, the details of the greeting will display.

Page 51: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

36

Figure 4.17 More Info Button

Figure 4.18 Home Button

Figure 4.19 Greeting Description (Eid Al Fitr)

Figure 4.20 Greeting Description (Eid Al Adha)

Page 52: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

37

Figure 4.21 Greeting Description (Chinese New Year)

Figure 4.22 Greeting Description (Independence Day)

Page 53: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

38

4.2.3 AR Marker

Marker or image target can be anything, as long as it has enough unique visual

point. Images with lots of corners and edges will work without any problem. Vuforia

Developer is the website that the user must use to upload the image target and check

whether the image that has been uploaded is suitable as a marker or not.

Page 54: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

39

Figure 4.23 Eid Al Fitr Marker

Figure 4.24 Eid Al Fitr Features

Page 55: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

40

Figure 4.25 Eid Al Adha Marker

Figure 4.26 Eid Al Adha Features

Page 56: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

41

Figure 4.27 Chinese New Year Marker

Figure 4.28 Chinese New Year Features

Page 57: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

42

Figure 4.29 Independence Day Marker

Figure 4.30 Independence Day Features

Page 58: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

43

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.31 Eid Al Fitr 3D Model

Page 59: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

44

Figure 4.32 Eid Al Adha 3D Model

Figure 4.33 Chinese New Year 3D Model

Page 60: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

45

Figure 4.34 Independence Day 3D Model

Page 61: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

46

4.2.5 Unity 3D

Unity 3D is a platform to create this application especially the AR contents. All

the interfaces of this application is created here and then 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

Page 62: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

47

4.3 Testing

This project is implemented as an android application by using Unity 3D which

is integrated with Vuforia to help developer design, code, debug, test and execute the

main process of the project. This project also used the C# language to connect program

in the Android Studio to the Unity 3D. The apk file is build and being implemented on

Android smartphone to test effectiveness of the application.

4.3.1 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.

Open Application Test Case

Step Test Procedure Expected Output Result

1 Open the application There are 4 button which is

Start, Instruction, About and

Exit.

Success

Table 4.1 Open Application Test Case

Page 63: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

48

Home Page Test Case

Step Test Procedure Expected Output Result

1 Tap the Start Button Redirect to the AR Camera

interface.

Success

2 Tap the Instruction

Button

View the guideline of the

application.

Success

3 Tap the About Button View the information of the

application.

Success

4 Tap the Exit Button Redirect exit the application. Success

Table 4.2 Home Page Test Case

AR Camera Page Test Case

Step Test Procedure Expected Output Result

1 User enter the AR

Camera interface

There are 2 buttons which is

More Info and Home.

Success

2 User scan the marker The object will automatically

pop out on the screen and the

music will display.

Success

3 User scale the 3D model

with two fingers

3D model will resize which is

can zoom in and zoom out of

the model.

Success

4 User touch and move

the 3D model

3D model will move to the

right and left smoothly

according to the user.

Success

Page 64: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

49

5 User tap the

More Info Button

The details of the greeting will

display.

Success

6 User tap the Home Button Redirect to the homepage. Success

Table 4.3 AR Camera Page Test Case

Instruction Page Test Case

Step Test Procedure Expected Output Result

1 User enter the Instruction

Page

There are 3 buttons which is

Next, Previous and Home.

Success

2 User tap the Next and

Previous Button

The guidelines of the

application will change

whenever user tap the button.

Success

3 Tap the Home Button Redirect to the homepage. Success

Table 4.4 Instruction Page Test Case

About Page Test Case

Step Test Procedure Expected Output Result

1 User enter the About

Page

There is Home button,

Success

2 Tap the Home Button Redirect to the homepage. Success

Table 4.5 About Page Test Case

Page 65: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

50

4.4 Chapter of Summary

In a nut shell for this chapter, part implementation in this chapter have been

describing and show all the user interfaces in the android application. It can act as a

guide for a new user to use this application. Testing also has been done to ensure that all

the functionality achieved and run smoothly. Maintenance should be carried out if there

are any bugs detected. The system will repeatedly be tested to minimize the error.

Page 66: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

51

CHAPTER V

CONCLUSION

5.1 Introduction

This chapter will discuss a conclusion of this project and the content on this

chapter are project contribution, problem and limitation and some suggestion for the

future.

5.2 Project Contribution

Augmented Reality Malaysian Greeting Cards apps is designed to experience

the hidden content of every cards thru the latest technology Augmented Reality which

allows users to use it more attractive and real when they want to express the user’s

wishes through AR presentation to their relatives and friends instead of using the

paper card. To view AR component of Greeting Malaysia apps, users need to

download the app on the Google Play Store and the simply scan a card to enjoy the

animation and sounds.

Page 67: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

52

5.3 Problem and Limitation

There are a few of problems can be found during the process to achieve the

project objectives. The major problem 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. The limitations in conducting this application only android

version can access the application.

5.4 Future Work

Although the application operates in properly and follows the milestone of

project respectively, there exist some changes can be taken for better performances.

Currently, the version of the application it only available for four festivals. So for the

next planning is to add many festivals that available so user can more enjoy with more

attractive festivals.

5.5 Conclusion

In conclusion, most traditional greeting cards can sometimes cost upwards and

this can be a lot of money for people to spend on what is just some card. With

Greeting Malaysia apps, users get a traditional greeting card of innovative animation

complete with sound that is viewable in AR and it more attractive and real when they

want to express the user’s wishes to their relatives and friends instead of using the

paper card.

Page 68: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

53

REFERENCES

Höllerer, T& Feiner, S. (2004). Mobile augmented reality. Telegeoinformatics:

Location-based computing and services, 21.

Katiyar, A., Kalra, K., & Garg, C. (2015). Marker based augmented

reality. Advances in Computer Science and Information Technology

(ACSIT), 2(5), 441-445.

Patkar, R. S., Singh, S. P., & Birje, S. V. (2013). Marker based augmented

reality using Android os. International Journal of Advanced Research in

Computer Science and Software Engineering (IJARCSSE), 3(5).

Johnson, K. D. (2015). U.S. Patent No. 9,171,404. Washington, DC: U.S.

Patent and Trademark Office.

Marsh, A., & Miller, C. (2011). U.S. Patent Application No. 13/038,204.

Page 69: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

54

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

Page 70: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

55

Appendix A Gantt Chart FYP I

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

Page 71: AUGMENTED REALITY MALAYSIAN GREETING CARDS · This project report entitled Augmented Reality Malaysian Greeting Cards prepared and ... membolehkan pengguna menggunakannya dengan lebih

56

Appendix C Poster Augmented Reality Malaysian Greeting Cards