UMRAH GUIDE VIRTUAL REALITY

AHMAD SOLAAHUDDIN BIN MAT LELA

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA)

FACULTY INFORMATICS AND COMPUTING

UNIVERSITY SULTAN ZAINAL ABIDIN , TERENGGANU, MALAYSIA

2019/2020

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 : Ahmad Solaahuddin Bin Mat Lela

Date :

ii

CONFIRMATION

This is to confirm that Umrah Guide Virtual Reality for mobile app was prepared and

submitted by Ahmad Solaahuddin Bin Mat Lela (Matric Number: BTDL17047826) and have

been found satisfactory in terms of scope, quality and presentation as a part of fulfilment of

the requirement for Bachelor of Information Technology (Informatics Media) with honor’s in

University Sultan Zainal Abidin. The research conducted and writing of this report was under

my supervision.

_____________________________________

Name : Pn Normala Binti Rahim

Date :

iii

ACKNOWLEDGEMENT

In the name of Allah, the Most Gracious and Most Merciful.

Alhamdulillah all praise it to ALLAH SWT, by His grace and blessings, I were able to

successfully finish my report. First of all, I would like to thank you to my supervisor, Pn

Normala Binti Rahim for his guides and a lot contribute ideas, provide information and

guidance as well as a bit of advice to me without giving up until the end of the project was

made. I want to take this opportunity to thanks to my mother, Wan Najidah Binti Wan Mansur

and my father Mat Lela Bin Muda. And special thanks to all my lectures of Faculty of

Informatics and Computing for their support and advices. And for all my friends, thank you

for helping, advising and support me in finishing my project.

iv

ABSTRACT

Virtual Reality (VR) is the latest technology that is widely in various sectors such as education,

entertainment and industry sales of good. VR presents objects in 3D. This research is

conducted to develop the Umrah Guide Virtual Reality Mobile Application which operates

using android platform. The objective of study was to produce application that identify current

VR application focus on ibadah Umrah in Malaysia. To design interface and to develop this

application that can give beneficial to user. In this application, not only focus on entertainment

but combination entertainment and education. Therefore, this mobile application is developed

by applying element of multimedia to deliver the information about the ibadah Umrah. The

methodology used in this application is UCD methodology. UCD methodology consists of 5

phases which is Analysis, Design, Development, Implementation, and Evaluate. The

programming language used in the development of the mobile application is C Sharp (C#)

using Unity 3D software.

v

ABSTRAK

Realiti Maya adalah teknologi terkini yang luas diguna dalam berbagai sektor seperti

Pendidikan, hiburan dan industri penjualan barangan. VR mempersembahkan objek dalam

bentuk 3D. Kajian ini dilaksanakan bagi membangunkan sebuah Aplikasi Menerokai Panduan

Umrah di Alam Maya yang beroperasi secara menggunakan landasan android. Objektif kajian

ini adalah untuk menghasilkan aplikasi realiti maya yang fokus kepada ibadah Umrah . Selain

itu, untuk rekacipta permukaan dan bangunkan aplikasi yang dapat memberi faedah kepada

pengguna. Aplikasi ini tidak hanya fokuskan pada hiburan sahaja, tetapi gabungan antara

hiburan dan Pendidikan. Oleh itu, aplikasi yang dibangunkan ini mengaplikasikan elemen

multimedia dalam penyampaian maklumat mengenai ibadah Umrah. Metadologi yang

digunakan dalam aplikasi ini ialah kaedah UCD. Kaedah UCD mengandungi 5 fasa iaitu

Analisis, Rekabentuk, Pembangunan, Pelaksanaan, dan Pengujian. Bahasa pengaturcaraan

yang digunakan dalam aplikasi ini adalah C Sharp (C#) dengan menggunakan perisian Unity

3D.

vi

CONTENTS

DECLARATION .......................................................................................................i

CONFIRMATION ....................................................................................................ii

ACKNOWLEDGEMENT .......................................................................................iii

ABSTRACT ..............................................................................................................iv

ABSTRAK .................................................................................................................v

CONTENTS .............................................................................................................vi

LIST OF FIGURES ..................................................................................................ix

LIST OF TABLES ....................................................................................................xi

CHAPTER I ...............................................................................................................1

1.1 Project Background ..............................................................................................1

1.2 Problem Statement ...............................................................................................2

1.3 Objective...............................................................................................................3

1.4 Scope ....................................................................................................................3

1.5 Limitation of works ..............................................................................................4

1.6 Expected Result ....................................................................................................4

1.7 Project Schedule...................................................................................................5

1.8 Chapter Summary ................................................................................................6

vii

CHAPTER II ............................................................................................................7

2.1 Introduction .........................................................................................................7

2.2 Technology Virtual Reality Umrah......................................................................8

2.2.1 Virtual Reality Technology……..…………………………………………..8

2.2.2 Virtual Devices…………... .........................................................................11

2.2.2.1 HTC Vive/Open SDK ………....................................................................11

2.2.2.2 Playstation VR/PSVR dev kit………………............................................12

2.2.2.3 Oculus Rift/Oculus SDK………………. ..................................................13

2.2.2.4 Samsung Gear VR/Oculus Mobile SDK....................................................14

2.2.2.5 VR Box………………. .............................................................................15

2.2.2.6 Comparison Virtual Reality Platform.........................................................16

2.2.3 Implementation of Virtual Reality Technology in Education……...............17

2.3. The User of Technology in The Study of Umrah Worship…….........................17

2.3.1 Virtual Reality Research Past…....................................................................18

2.3.2 Analysis of Reseach Past on Virtual Reality Umrah Guide………………..18

2.3 Relate Product……………………………………...........................................18

2.3.2.1 Experience Makkah……………………....................................................19

2.3.2.2 Makkah VR….............................................................................................20

2.3.2.3 Tawaf……………………………………………………………………..21

viii

2.3.2.4 Umrah and Hajj Guide………………………………………………………22

2.3.2.5 Comparison Existing Product……………………………………………….23

2.3.3 Discussion……………………………………………………………………..25

2.4 Chapter Summary……………………………………………………………….25

CHAPTER III ..........................................................................................................26

3.1 Introduction ........................................................................................................26

3.2 UCD Methodology .............................................................................................27

3.2.1 Analysis Phases ...........................................................................................28

3.2.2 Design Phases .............................................................................................30

3.2.3 Development Phases ....................................................................................33

3.2.4 Evaluate Phases……….................................................................................34

3.3 Framework ...........................................................................................................34

3.4 Method/Technique ...............................................................................................35

3.5 Hardware and Software Requirement ..................................................................35

3.5.1 Hardware Requirement ..................................................................................35

3.5.2 Software Requirement....................................................................................36

3.5.3 Hardware Specification ................................................................................38

3.5.4 Software Specification ..................................................................................39

3.6 Chapter Summary…............................................................................................40

ix

CHAPTER IV ……………………………………………………………………….40

4.1 Introduction………………………………………………………………………41

4.2 Implementation…………………………………………………………………..41

4.2.1 Mobile App Interface………………………………………………………..42

4.2.1.1 Home Page………………………………………………………………...42

4.2.1.2 Virtual Reality Enviroment………………………………………………..43

4.2.1.3 The Enviroment of Umrah Guide…………………………………………44

4.3 Button in Application…………………………………………………………..47

4.4 Testing….………………………………………………………………………48

4.4.1 Test case……………………………………………………………………48

4.5 Summary………………………………………………………………………..48

CHAPTER V……………………………………………………………………....49

5.1 Introduction……………………………………………………………………..50

5.2 Project Contribution…………………………………………………………….50

5.3 Problem and Limitation…………………………………………………………51

5.4 Future Work…………………………………………………………………….51

REFERENCES ........................................................................................................52

x

LIST OF FIGURES

Figure 2.1 Image Based Model...................................................................................... 9

Figure 2.2 Geometric Model ......................................................................................... 9

Figure 2.3 Hybrid Model….......................................................................................... 10

Figure 2.4 HTC Vive………. ...................................................................................... 10

Figure 2.5 Playstation VR….. ...................................................................................... 12

Figure 2.6 Oculus……………………………. ............................................................ 13

Figure 2.7 Samsung Gear VR……………….. ............................................................ 14

Figure 2.8 VR Platform……………………… ............................................................ 16

Figure 2.9 Screenshot “Interface” 2017……................................................................. 19

Figure 2.10 Screenshot”Interface” 2018........................................................................ 20

Figure 2.11 Screenshot “Interface” 2019…....................................................................21

Figure 2.12 Screenshot “Interface”2016 ………........................................................... 22

Figure 3.1 Prototype Page Load Page.. .…………........................................................ 30

Figure 3.2 Prototype Page Main Menu.......................................................................... 31

Figure 3.3 Prototype Page Option Gender Button......................................................... 31

Figure 3.4 Prototype Choose Route Button................................................................... 31

Figure 3.5 Prototype Page Procedure Rukun Button Go To Umrah..............................32

Figure 3.6 Prototype Page Play ....................................................................................32

Figure 3.7 Prototype Page Let Learn..............................................................................32

Figure 3.8 Prototype Page Credit………………………………………………………33

xi

Figure 3.9 Prototype Page Help………………………………………………………33

Figure 4.1 Show The Home Page for Use and The Button… ………………………..42

Figure 4.2 Show The Main Menu View After Press The Start Button……………….43

Figure 4.3 Show The Model in Prepare Bag………………………………………….44

Figure 4.4 Show The Environment in Airport………………………………………..44

Figure 4.5 Show The Enviroment in Interion of Airplane……………………………45

Figure 4.6 Show The Environment in Tawaf in Kaabah……………………………..45

Figure 4.7 Show The Enviroment of Saie……………………………………………46

Figure 4.8 Show The Enviroment of Tahallul…..……………………………………46

LIST OF TABLES

Table 1.1 Gantt Chart ....................................................... ............................................ 5

Table 2.1 Comparison VR Platform ................................. ........................................... 17

Table 2.2 Comparison Existing Product .......................... ............................................ 24

Table 2.3 Comparison Element Multimedia ................... ............................................. 24

Table 3.1 Existing Product…………….. ..................... .................................................29

Table 3.2 List of Hardware Requirement ...................... ................................................36

Table 3.3 List of Software Requirement ........................................................................37

Table 4.1 Button in Application……….. .......................................................................47

Table 4.2 Test case for Successful of Open Application…………… ………………...48

Table 4.3 Test Case for The Successful of the Home Page……………………………49

Table 4.4 Test Case for The Successful of VR Environment..… ……………………..49

Table 4.5 Test Case for The Successful of Exit Page………… ………………………49

xii

LIST OF Diagram

Diagram 3.1 UCD Model……………... .......................................................................27

Diagram 3.2 Framework……….. ..................................................................................35

1

CHAPTER I

INTRODUCTION

1.1 PROJECT BACKGROUND

Virtual reality (VR) technology is a computer-generated environment. Most virtual

reality environments focus on visual experiences, either on screen computers or through

special display stereoscopes, but some simulations include additional sensory

information, such as sound through speakers or headphones. According to Steve

Aukstkalnis and David Blatner (1992), the author of the book Silicon mirage is that

virtual reality is a means by which humans picture a visualize, imagination and interact

with computers and complex data. Technology virtual reality has its own advantages,

Eliminate stress by playing games like, second life, sims. There are many domains

involved in this virtual reality but the education domain is optional as it contains a

variety of modes, high interactivity, as well as creating a variety of scenarios, and

simulation exercises.

The project to be developed is a virtual reality mobile apps umrah guide. This

is because umrah worship is a rukun of Islam. Performing Umrah worship is an annual

2

ritual performed by Muslims worldwide who are physically, mentally, and

scientifically capable. Although the training has been conducted with a place made to

resemble the original, often the Umrah congregation candidates have not been able to

fully master the Umrah worship. This is because the practice of Umrah worship is

rarely performed repeatedly. To that end, using virtual reality technology to help solve

these problems. Virtual reality also gives user a sense of being in a real place. In this

application there is a 3-dimensional model of the locations included in the rukun and

wajib umrah. The location is the around kaabah, Safa and mar wah. In addition, in this

application there is information of the object located in the location of the umrah

worship. There are many disadvantages to existing Umrah virtual reality such as having

small buttons, more text and there are pictures of people doing Umrah but users only

who can move a little, just turn around to see a picture. The expected outcome of this

project is to satisfy users in exploring this virtual reality. In addition, this project can be

used over a long period of time for users who want to know and learn to gain knowledge

on Umrah worship.

1.2 PROBLEM STATEMENT

The main problem is that existing technology-based tools do not help the pilgrims

umrah to have a fun experience. Besides that, it also have information content about

umrah worship a very simple its can causes user cannot get knowlegde clear about

how to make umrah. next problem is user interaction with existing application still

limited. Lastly, there are also existing applications that do not have a clear guide for

users to interact with the system. know the local fruits with information to feel like

they are in the garden. Lastly is there has been a move away from the traditional

experience to technology experience.

3

1.3 OBJECTIVES

There are three goals to be achieved in this project. The objectives are as follows:

a) Project is to identify user needs and appropriate techniques to assist users in

obtaining knowledge clear about Virtual reality(VR) Guide.

b) To design and develop a new prototype of Virtual reality(VR) Guide.

c) To evaluate prototype functionality that will make it easier for users to

explore this application.

1.4 SCOPE

The target audience of this study is for primary school students only. the domain of

study is worship including intention, tawaf, saie, tahallul and order. The task that the

user can perform is to browse the virtual and virtual environment through the vr box on

the smartphone. This application is built specifically for android users only.Following

the flowchart about user journey using the “VR Umrah Guide” User journey.

Start Gender Router Mekah

Saie Tawaf Niyyah Preparing Ihram

Tahallul Tertib

4

The Defition of pillar of Umrah are:

-Niyyah is express intention to perform Umrah. It can be categorized into three namely

normal niyyah, conditional and badal niyyah(on behalf of other person)

-Tawaf is Circling around the Ka’bah for seven rounds with certain conditions. The

Pilgrims must walk start from the Black Stone by keeping the Ka’bah on the left in

clockwise manner and end at Black Stone.

-Sa’ie is walk back and forth between the hill of Safa and Mar Wah for seven times.

-Tahallul is after completion of sa’ie,, pilgrims should cut off at least three pieces of

their hair.

1.5 LIMITATION OF WORKS

Limitations on running this application are

I. This application is only available for Android phones and not support iOS

or Apple phones.

II. This application only uses the English Language.

III. This app focuses on the virtual reality Umrah Guide.

IV. Users need a VR / VR Box to play this app.

1.6 EXPECTED RESULT

The expected outcome for the virtual reality Umrah is:

I. Succeed in developing a mobile application for Android phone.

II. This app can provide fully function for its functional.

III. Successfully create a user-friendly mobile application that give beneficial to

user when using this application.

5

1.7 PROJECT OF SCHEDULE

The project schedule covers the entire FYP 1 course. The duration of this project is

from September 2019 to December 2019. The following is a Gantt chart which shows

the monthly progress and tasks to be done.

Table 1.1 Gantt Chart

6

1.8 SUMMARY OF CHAPTER

This section covers the whole application of the project, starting with the

background of the project before starting the actual project, and then, the problem

statement is to know about problems with existing applications, objectives, scope is to

focus the user , limitations of work, expected results, and project schedule.

7

CHAPTER II

LITERATURE REVIEW

2.1 INTRODUCTION

This chapter provides some reviews of techniques that have been suggested by many

researchers before. Relevant works have also been reviewed to ensure the quality of the

project. This chapter also describes a literature review of the applications that will be

used as a reference in developing these applications. Previous research or existing

applications will also be discussed in this section.This literature review is intended to

examine current knowledge of specific topics. therefore, The purpose of the literature

review is to find, read and analyze literature or work or other studies related to this

application. It is important to understand all the information that needs to be considered

and relevant before developing this application. Some studies have been studied to be

understood in virtual reality Umrah Guide.

8

2.2 TECHNOLOGY VIRTUAL REALITY UMRAH

Virtual Reality is a significant component that can make Virtual ‘Umrah Guide

application successful. Virtual Reality technology is not fully utilize yet in any

application that deliver the knowledge of ‘Umrah. Nevertheless, this technology is

beneficial to the pilgrims when it is combined with multimedia elements in ‘Umrah

applications. technology umrah guide is a new application that will be developed with

many additional features. This app is development to help and facilitate the people to

learn Umrah worship properly. There are three types of modeling techniques in virtual

reality technology namely geometric based model, image based model and hybrid based

model. Geometric model is based on geometric source. The Resources are designed from

the original image while hybrid model is a combination between geometric model and

image model.

2.2.1 Virtual reality technique

The virtual reality technique use a image based model for Virtual 'Umrah Guide

Application'. According to the use of image is very useful in Virtual Reality enviroment.

There are several advantage of image model such as better quality image and faster

rendering process compared to geometric model and hybrid model. Moreover, image

can provider panoramic enviroment interactively with higher sense of presense and the

users can feel real experience in performing 'Umrah rituals such as tawaf and

tahallul(cutting of hair or shaving). Virtual reality technique shown Figure 2.1 until

Figure 2.3.

9

Figure 2.1 Image Based Model

Figure 2.2 Geometric Model

10

Figure 2.3 Hybrid Model

11

2.2.2 Virtual reality devices

Virtual reality devices are using smartphones containing android as this app is

focused on android only. Next, smartphones need to be put into the VR platform for

users to use. We choose VR Box because the VR Box is very cheap and it,s device can

bring users to the world virtual reality and users can discover this app. Some of the VR

Platform can be seen in Figure 2.4 until Figure 2.8.

2.2.2.1 HTC Vive / Open VR SDK

The HTC Vive is a virtual reality headset developed by HTC and Valve

Corporation. The headset allowing the user to move in 3D space and use motion-tracked

handheld controllers to interact with the environment. Software development kits for

developing HTC Vive applications is VIVE software.

Figure 2.4 HTC Vive

12

2.2.2.2 PlayStation VR / PSVR dev kit

The PlayStation VR, known by the code name Project Morpheus during

development, is a virtual reality headset developed by Sony Interactive Entertainment,

which was released in October 2016. It was designed to be fully functional with the

PlayStation 4 home video game console. In certain games and demos for the VR, the

player wearing the headset acts separately from other players without the headset. The

PlayStation VR system can output a picture to both the PlayStation VR headset and

television simultaneously, with the television either mirroring the picture displayed on

the headset or displaying a separate image for competitive or cooperative gameplay.

Software development kits for developing is a PSVR dev kit.

Figure 2.5 Play Station VR

13

2.2.2.3 Oculus Rift / Oculus SDK

The Oculus Rift is a virtual reality headset developed and manufactured by

Oculus VR. Oculus radically redefines digital entertainment. Immerse yourself in games

or go inside your favorites films. Time travel, space travel, or hang out with friends in

VR. Oculus sensor is able to recognize the motion if you turn your body more than 180

degrees. Software development kits for this application is Oculus SDK.

Figure 2.6 Oculus

14

2.2.2.4 Samsung Gear VR / Oculus Mobile SDK

The Samsung Gear VR is a mobile virtual reality headset developed by Samsung

Electronics, in collaboration with Oculus, and manufactured by Samsung. The device

can be calibrated using the wheel at the top of the headset. A trackpad is located on the

right of the device and back button is located just above it. Volume can be adjusted

through the volume rockers also found on the right-hand side. Some of the major goals

Samsung set for this project regarding hardware were: that their headset could support

MTP (Motion to Photon) latency less than 20 MS. Software development kits for

developing is Oculus Mobile SDK.

.

Figure 2.7 Samsung Gear VR

15

2.2.2.5 VR Box

VR Box is a virtual reality (VR) platform developed by Google for use with a

head mount for a smartphone. Named for its fold-out cardboard viewer, the platform is

intended as a low-cost system to encourage interest and development in VR

applications. Users can either build their own viewer from simple, low-cost components

using specifications published by Google or purchase a re-manufactured one. To use

the platform, users run Cardboard-compatible applications on their phone, place the

phone into the back of the viewer, and view content through the lenses. Google provides

three software development kits for developing Cardboard applications: one for the

Android operating system using Java, one for the game engine Unity using C#, and one

for the iOS operating system.

Figure 2.8 VR Box

16

2.2.2.6 Comparison VR platform

To summarize all of the above, here is the feature comparison of five top virtual

reality viewers. These specifications may help the developer out to determine what kind

of VR app might be able to develop, or what resources might be required for the project.

Product HTC

Vive

Sony Play

Station VR

Oculus

Rift

Samsung

Gear VR

VR Box

Headset type PC Console PC Mobile Mobile

Connection HDMI,

USB 3.0

HDMI, USB

2.0

USB 3.0 USB 2.0,

USB 3.0

None

Resolution 080×1200 960×1080 1080×1200 Native to

phone

Native to

phone

Sensors Motion,

camera,

Detection

moving

outside

Motion,

position

outside

Motion,

position

visual

outside

Motion Motion

Controls HTC Vive

motion

guard

Dual Shock

4,

PlayStation

Move

Oculus

Touch,

Xbox One

gamepad

Handheld

remote,

touchpad on

headset

Handheld

remote

17

Software

platform

Steam VR PlayStation

4

Oculus Android Android,

iOS

Table 2.1 Comparison VR Platform

2.2.3 Implementation of Virtual Reality Technology in Education

Education through virtual reality can be helpful as it has three virtual reality

categories that are immersive, semi-immersive and non-immersive, it is beginning

to be widely used in various domains especially education domain. The advantages

offered by virtual reality technologies such as diversity of modes, interactivity and

high levels of interactivity. Create various scenarios, exercises simulations are making

this technology more popular in this domain.

2.3 THE USER OF TECHNOLOGY IN THE STUDY OF UMRAH WORSHIP

Virtual virtual reality is a technology that enables users to gain interact with a

computer-simulated environment.Virtual reality is a technology that enables uses

to gain interact with a computer simulated environment. Virtual reality in this final

task is developed on mobile devices with VR box so that users in this case are

Candidates for the congregation can use it as often as they like. Virtual reality

also gives you a sense of being in a real place.

18

2.3.1 Virtual reality research past

Existing applications have many drawbacks and there are some advantages to it,

Among the disadvantages is the use of too small a button, no button, no button outgoing,

limited user movement and other. Beside that it also have many text, little video and

audio.

2.3.2 Analysis of research past on virtual reality umrah guide

Before to start this project, several analyzes and studies were conducted. Against

product applications. Examples related existing product are:

2.3 RELATE PRODUCT

Before starting this project, several studies have been done on existing product

applications. Example existing product is :

19

2.3.2.1 Experience Makkah

Figure 2.9 Screenshot “interface” (2017)

This app is "Experience Makkah", which is a smartphone app (Mobile

Apps) that shows the names of places around the temple and the human

atmosphere of the umrah. The release date was July 6, 2017, and last updated to

the latest version on July 6, 2017. This app focuses on education categories

and is available for free on the App Store.

20

2.3.2.2 Makka VR

Figure 2.10 Screenshots “Interface” (2018)

This app "Makka VR" is a smartphone app (Mobile Apps) that features

the human atmosphere of performing Umrah. In this app, users can learn more

about Tawaf. Release date is May 21, 2017, and last updated to the latest version

on September 10, 2018. This app focuses on Islamic category education and is

available for free on the App Store.

21

2.3.2.3 Tawaf

Figure 2.11 Screenshots “Interface” (2019)

This app "Tawaf" is a smartphone app (Mobile Apps) that features the human

atmosphere of performing Umrah. In this app, users can learn more about Tawaf.

Release date is March 12, 2019, and last updated to the latest version on May 19, 2018.

This app focuses on Islamic category education and is available for free on the App

Store.

22

2.3.2.4 Umrah and Hajj Guide

Figure 2.12 Screenshots “Interface” (2016)

This app "Umrah and Hajj Guide" is a smartphone app (Mobile Apps) that

features is to easily understandable user interface with pleasing visibility. In this app, to

helps Muslims all performance of religious rituals of Umrah and Hajj in the most

effective way. Release date is October 14, 2013, and last updated to the latest version

on September 9, 2016. This app focuses on Islamic category education and is available

for free on the App Store.

23

2.3.2.5 Comparison existing products

This table is about comparing existing products. Comparison with publisher of

the year platform, advantages, and disadvantages. Therefore, the weaknesses of existing

products can be identified by making comparisons. Comparison shown in Table 2.1

Title Year

Publisher

Platfor

m

Advantages Disadvantages

Experience

Makkah

2017 Android

-Have a voice.

-User can move

-User can

experience the

atmosphere in

Makkah

-There are subtitle

options

-There is an

animated movement

-Cant move

free

-Just focus

around Kabbah

-No instruction

to explore this

application

-No prayer

-Analysis of

the tawaf

automatically

move

uncontrollably.

Makkah VR

2017 Android -Have a picture

only

-The right human

image is not an

animated human

image.

-User do not move

forward and

backward and

only turn around.

Tawaf

2019 Android

Have calculator

manual for tawaf

More text

24

Umrah and

Hajj Guide

2016 Android -Have doa

-Have map

-More text

Table 2.2 Comparison Existing Product

2.3.5 Comparison element multimedia

This table about comparison existing product in element multimedia. Element

multimedia is important when want to develop something interesting. The comparison

with all element of multimedia such as audio, text, graphic, video, and animation.

Product 3D

Animation

Video

Text Image Audio Mobile

Based

Experience

Makkah

Makkah VR

Tawaf

Umrah and

Hajj Guide

Table 2.3 Comparison Element Multimedia

25

2.3.3 Discussion

Discussions Recent studies on Maya Umrah are related to applications that contain

information on the procedure for performing Umrah properly. However there are

weaknesses in existing applications for example there is a lot of text, video is more

focused on the internet like youtube, and in virtual reality there is a picture that causes

limited user movement. Therefore, with this discussion it is possible to develop a quality

application product.

2.4 CHAPTER SUMMARY

This chapter discusses research on the VR Platform to find the best software and

techniques used to develop this application and to study about existing VR products.

This study focuses on the development and guidance of successful projects, to release

new applications that will benefit all users. The next chapter will discuss the

methodology for developing applications.

26

CHAPTER III

METHODOLOGY

3.1 INTRODUCTION

This chapter describes the process of developing the VR Umrah Guide

application. The development process is briefly discussed in design and

development. There are many methods that can be used to develop interactive

applications. Methodologies include ADDIE, AGILE, WATERFALL, UCD

models and so on. However, the study used for this UCD model was created in

Donald A. Norman's research lab at the University of California, There are four

phases involved (user center design). The model consists of phase one analysis,

phase two design, phase three deveploment and phase four evaluation. Every phase of

This methodology will be explained.

27

3.2 UCD METHODOLOGY

User-centered design (UCD) is an iterative design process in which designers focus

on the users and their needs in each phase of the design process. In UCD, design teams

involve users throughout the design process via a variety of research and design

techniques, to create highly usable and accessible products for them. In user-centered

design, designers use a mixture of investigating methods and tools (surveys and

interviews) and generative ones (brainstorming) to develop an understanding of user

needs.

Diagram 3.1 UCD Model

ANALYSIS

DESIGN

DEVELOPMENT

EVALUATION

28

3.2.1 Phase Analysis

In this phase, analysis was done to identify what need to develop the mobile VR

application. analysis stage is the most important phase in this process. The analysis is

the first step of UCD model in final project for this course. At this stage, the analysis

must carried out through observation and reference to existing product applications to

identify weaknesses . The comparison of existing product as depicted in Table 3.2.

Beside that ustaz interview or watch the umrah youtube video to find out the items

needed in making the umrah guide application. Additionally, The target for audience of

this application is being analysis and student primary school for year 1 to year 6 are

chosen for using this application. Target audience as for these features guided the

determination of the content and the design of this application.

Existing Product Platform Advantages Disadvantage

Android

-Have option

language

-The model can

move

-The user cannot

free move

-No have button

exit

-No Prayer

Android

-Have a picture

-Have a sound

-No Prayer

-No instruction

-The user cannot

free move

29

Android

-Have a Map

-Have a calculator

manual

- Have more Text

-No sound

-No Subtitle Malay

Android

-Have prayer

-Option Language

-Text is very

difficult

-No sound

-More Text

Table 3.1 Existing Product

30

3.2.2 Phase Design

The design phase is based on analysis, assessment instruments, objectives,

project planning and media selection. The design phase should be systematic and

specific. In addition, the design phase storyboard and prototype is making, because the

storyboard can show the look and feel of the application that will be developed. A

prototype is draft to representation built to test idea for layout. Design Prototype shown

Figure 3.1 until Figure 3.9.

Figure 3.1 Prototype Loading Page

Figure 3.2 Prototype Page Main Menu

31

Figure 3.3 Prototype Page Option Gender Button

Figure 3.4 Prototype Page Choose Route Button

32

Figure 3.5 Prototype Page Procedure Rukun Button and go to Umrah

Figure 3.6 Prototype Page play

Figure 3.7 Prototype Page let learn

33

Figure 3.8 Prototype Page Credit

Figure 3.9 Prototype Page Help

34

3.2.3 Phase Development

The development phase is where developers create and install content assets

created in the design phase. The development phase will be created through 3D Model

design in Virtual application, high fidelity prototype is made in the computer to create

3D sketches in creating models like buildings, houses, people and more. Then it is also

created through the application of unity to create virtual reality. In this application unity

also requires programming to mobilize other users. In addition, it also creates an

interface sketch in this unity application.

3.2.4 Phase Evaluation

The evaluation phase consists of two parts: formative and summative.

Formative evaluations are available at every stage of the UCD process. Summative

Assessment to through survey techniques quistionanaire, and interviews to

Obtaining feedback from expert or user, graphics, audio, animation, interfaces, and so

Forth contained in the application. because to ensure the application will be

Harmony with the needs of Consumers.

3.3 FRAME WORK

Projects that are based on the framework and process flow to achieve.The

project goals that will analyze the Reality Virtual umrah guide using VR Box can

be achieved successfully by making school students the focus of the pro ject. In

order to run a project, the analysis needs to be done and the project framework can

be used to view and understand the flow. The methodological framework described

in figure 3.2 is divided into users, the VR box is used to play this application. Users

must use the VR box to view with the app. The app will then provide a virtual

Reality view into the VR Box and users will be excited to use this app.

35

Diagram 3.2 Framework

3.4 METHODS / TECHNIQUES

The dash is recorded and used in real time as input in the user's computer

interaction. Researchers in this field have developed a more efficient and novel human

computer interface to support users with and without defects. A person's point of view

can be used in a variety of ways to control the user interface, alone or in conjunction

with other input modalities, such as a mouse, keyboard, sensor, or other device. The key

area of gaze interaction research is to find more efficient and new ways to facilitate

human computer interaction for disabled users, who can only use their eyes for input.

Other view interaction studies focus on the more general use of real-time tracking data

in HCI to improve computer user interaction and explore novel user interfaces.

3.5 HARDWARE AND SOFTWARE REQUIREMENTS

Software and hardware are important in the making of this project as they are

essential for application development. This section will show you a list of all the

software and hardware requirements involved in the development process.

36

3.5.1 Hardware Requirements

Hardware is essential in making this project a success. Each appliance has its own

function to do this research. The hardware for developing this project is shown below.

HARDWARE USER DIAGRAM

Laptop

.To create sketches

for characters,

backgrounds and

create scripts or

documents related

to the application.

Also used for 3D

encoding and

modeling

Table 3.2 List of Hardware Requirements

3.5.2 Software Requirements

To develop this project, there are many options to choose the best software, this is

because the software selection depends on the requirements of the project. Software for

developing this project is shown below:

SOFTWARE USER DIAGRAM

Unity Used to create Virtual

Reality applications and

whole projects and turn

on 3D characters

37

Maya 2018 Used to create 3D

character models

Google Cloud Used as an external

routing model or

animation

Adobe

Illustrator

For poster design and

logo applications.

Adobe

Photoshop

Used to create

background sketches,

characters and posters.

Table 3.3 List of Software Requirements

38

3.5.3 Hardware Specifications

The required hardware is as follows:

Personal computer

Manufacturers : Dell

Model : OPTIPLEX 7010

Processor : Intel ® Core ™ i5-3570 @ 3.40GHz 3.40GHz

Memory : 4 GB

Operational system : Windows 10 Professional

System Type

Laptop

: 64-bit

Manufacturers : Acer

Model : G-569 GX

Processor : Intel ® Core ™ i3-3570 @ 2.80GHz 2.80GHz

Memory : 8 GB

Operation System : Windows 8.1

Hard Disk

Model

: Seagate

Storage

Headphone

: 1TB

39

Model

Mobile Phone

: Samsung

Model :Honor 8Pro

Storage : 64GB

Memory(RAM)

Mouse

: 6GB

Model : Dell

Wireless : Yes

3.5.4 Software Specifications

Four specific software are required to develop this application. Such as:

a) Unity

Is the main software used to develop this project in generating view

interactions and using C # scripts.

b) Adobe Photoshop CS6

It is a graphics software for editing images according to the user's creativity.

This software is used to resize the image and modify the image.

c) Adobe Illustrator CC

It is a graphics software used to create and modify various image illustrations.

d) Autodesk Maya 2018

It is a 3D software for building 3-dimensional objects and modeling any

object in 3D form.

40

e) Google Cloud

Create a server that is used for data backup and used as an external routing

model or animation.

3.6 Chapter Summary

In conclusion, choosing a good methodology is very important to ensure the

development of the application can be done in a timely manner. In addition, good

methodology can also provide systematic steps in building applications so that

applications can be developed with minimal errors and problems. The methodology

used by virtual reality Umrah Guide application for this project. It also describes the

hardware and software needed in this project that guides the success of the project.

41

CHAPTER IV

IMPLEMENTATION AND TESTING

4.1 INTRODUCTION

In this chapter, we will discuss about the implementation of the methodology

discussed in previous chapter and testing to obtain the result of each implementation.

Implementation is executed to ensure the system is developed according to the main

objectives of the system and fulfill the user requirement. Testing will be executed so that

the developed will recognize the defects as soon as possible and repair it immediately.

4.2 IMPLEMENTATION

In this phase it have many thing must to tested to know this apps function. In this

testing process we can know how far it can attract the user and can hold out old. This

app should be tested to identify the anything malfunction.

42

4.2.1 Mobile App Interface

4.2.1.1 Home Page

Figure 4.1 Show The Home Page For User and The Button

The home page is the first view of this app. Figure 4.1 shows the home page featuring

one button to start exploring the Umrah Guide VR.

43

4.2.1.2 Virtual Reality Enviroment

Figure 4.2 Shows The Main Menu View After Pressing The Start Button

Figure 4.3 is the user’s main menu view in virtual reality view.User will see a Virtual

Reality view of “Welcome to Umrah Guide VR” and app supervisor and developeds

view. This main menu have five button in the cube, the cube is a animation to move turn

around surrounding. When the user moves a little forward control, the user will hear the

sound as if whispering in the ear to congratulate the Umrah Guide VR.

44

4.2.1.3 The Environment of Umrah Guide Virtual Reality

Figure 4.3 Show The Model in Preparing Bag

The figure 4.3 is to show activity before go to mekah the model was preparing bag

and do it prayer. The user can exploring this scene.

Figure 4.4 Show The Environment in Airport

The figure 4.4 is to show the environment in airport, it have airplane and also have a

audio to give convenience to user for explore.

45

Figure 4.5 Show The Environment in Interion of Airplane

The figure 4.5 is to show the environment in interion of airplane and also have audio.

Figure 4.6 Show The Environment of Tawaf in Kaabah

The figure 4.6 show the environment of tawaf in Kaabah to turn around kaabah and

also have audio.

46

Figure 4.7 Show The Environment of Saie

The figure 4.7 show the environment of saie, the user can see and explore this saie.Its

have safa and mar’wa, the model animation move start from safa to mar’wa.

Figure 4.8 Show The Environment of Tahallul

The figure 4.8 show the activity tahallul in this scene. Its have animation scissor to

cutting their hair in tahallul.

47

4.3 Button in Application

Based on the Table 4.1 below,show the buttons displayed on each interface. This

can make easier for user to navigate to desire part. Among the buttons used are:

Button Description

To starting user enter the second scene

This play button is to get ready journey a

apps

To give know about apps and background

for user

To give credit for development and

supervisor

To help user to know type of button

To help and give guide for user to know

journey in apps

To exit for this apps

Table 4.1:Button in Application

PLAY

INFO

CREDIT

HELP

GUIDE

EXIT

START

48

4.4 TESTING

In final testing we can know for the level this app for how far it function to user use

that.Testing is needed to the test system full function and free error. There is three types

of testing in the application.Those are unit testing, integrate testing and system testing.

Unit testing is carried out to verify the functionality of specific section code and

integration testing works to exposed defect in the interfaces and interaction between

modules.

4.4.1 Test Case

A test case is a set of condition or variables under which a tester will determine

if requirement upon an application is partially or fully satisfield. A 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,procedures and expected outcomes would be

stated in a case.

Test case for successful of open the application

Step Test Procedure Expected Output Result

1

Open the application

One-button will appear on the

home page which is Play

Success

Table 4.2 Test Case for successful of open the application

49

Test case for successful of the home page

Step Test Procedure Expected Output Result

1 Gaze the play button From 2D interface to virtual reality Success

2 Gaze the info button View the info to read text detail Success

3 Gaze the help button View the help to read detail Success

4 Gaze the credit button View the credit developed detail Success

5 Gaze the guide button View the map detail Success

Table 4.3 Test case for the successful of the home page

Test case for successful of the video and audio interaction in VR environment

Step Test Procedure Expected Output Result

1

User is gaze to the sound

button in main menu

The video will be play

automatically

Success

2 User is gaze to the next

scene

The audio automatically play

Success

Table 4.4 Test case for the successful of VR environment

Test case for successful of exit page

Step Test Procedure Expected Output Result

1

Click the exit button on

the virtual reality view

Redirect exit the application

Successful

Table 4.5 Test case for the successful of exit page

50

4.5 SUMMARY

In 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 archieved

and run smoothly. Maintenance should be carried out if there are any bugs detected. The

system will repeatedly be tested to minimize the error.

51

CHAPTER V

CONCLUSION

5.1 INTRODUCTION

In this chapter, the contribution of ‘Umrah Guide VR using VR technology’, problem

and limitation during project development as well as future work to improve Umrah

Guide VR will be discussed.

5.2 PROJECT CONTRIBUTION

Umrah Guide VR developed based on the UCD method mainly aim to help users

learning or teaching about the ibadah Umrah in a new interactive environment.

Meanwhile, the other aim is user also can learning about the VR technology in their life.

By using this application, user can be opportunities in learning or teaching about the how

to know way umrah with more effective and efficient due to the interactive and new

technology way. Futhermore , it is very convenience since it is an android application

and can be accessed by user everywhere because it did not use internet connection. This

application also has using a new technique which is the controller. Moreover, the user

can be experiences play with the virtual reality and learn about it more.

52

5.3 PROBLEM AND LIMITATION

The major problem and limitation during project development are the some of the

colliders, script coding is not functioning well as expected. This has caused due to

lacking of knowledge in this field also make the project development quite harder and

not works well.

5.4 FUTURE WORK

Umrah Guide VR still needs to improve up for a lot of time a long. Since this

application development , it has more scene for user journey, so the developer can add

more scene soon for user to learn or teach for daily life. In addition, this application can

build with more interactivity such as game or quiz so that user can learn, teach or play

with it,Lastly,this application can also be built with a new platform with is Cardboard

VR. By using this platform user will have more experience in virtual reality with a more

realistic environment.

53

REFERENCES

1) Wilma Elzeline Waterlander, BSc, MSc, PhD, Yannan Jiang, BSc, MSc, PhD,

Ingrid Hendrika Margaretha Steenhuis, MSc, PhD and Cliona Ni Mhurchu, BSc

(Hons). (2015), VR tawaf.

https://horizonstreetview.wordpress.com/2017/08/02/newvirtual-reality-

application-tawaf -vr/

2) Kangas, J. (2013). Categories of Gaze interaction events. Defining Gaze

Interaction Events, 2.

3) Kurt, S. (29 August, 2017). UCD Model: Instructional Design. Retrieved from

The UCD Model: https://educationaltechnology.net/the-

addiemodelinstructional-design/

4) McGriff, S. J. (2000). Using the UCD Model. Instructional System Design

(ISD), 2.

5) ITE College Central. (March, 2018). Google Play. Retrieved from Makkah vr:

https://play.google.com/store/apps/details?id=sg.edu.ite.video360&hl=en

54

FACULTY INFORMATICS AND COMPUTING

LOG BOOK

CSF 35104 FINAL YEAR PROJECT I

SEMESTER 2 SESSION 2018/2019

NAME

AHMAD SOLAAHUDDIN BIN MAT LELA

MATRIC NUM

BTDL17047826

SEMESTER

6

TELEPHONE

01130357660

EMAIL

SUPERVISOR’S NAME

PN NORMALA BINTI RAHIM

PROJECT TITLE

UMRAH GUIDE VIRTUAL REALITY

55

LOG ACTIVITIES

WEEK MEETING

DATE

NOTES / DISCUSSION SUPERVISOR

SIGNATURE

3

5

9

10

4/2/2020

19/2/2020

2/6/2020

9/6/2020

Discussion for progress FYP 11 (20%)

Discussion for progress FYP 11 (40%)

Briefing on Covid-19 Final Project

Implementation Guidelines

(webex meeting)

Zero Draft & Mendeley Briefing by

Pn. Norhazura Yunus

(webex meeting)

56

WEEK MEETING

DATE

NOTES / DISCUSSION SUPERVISOR

SIGNATURE

10

11

12

10/6/2020

16/6/2020

23/6/2020

Discussion for progress FYP 11 (80%)

Discussion for progress FYP 11 (90%)

Poster Briefing for the final presentation of

FYP 2

by En.Tolahah Muda

(Online meeting)

57

WEEK MEETING

DATE

NOTES / DISCUSSION SUPERVISOR

SIGNATURE

12

13

14

25/6/2020

27/6/2020

6/7/2020

Discussion for progress FYP 11 (92%)

Report

Meeting webex

58

WEEK MEETING

DATE

NOTES / DISCUSSION SUPERVISOR

SIGNATURE

14

8/7/2020 Poster