1

AR ISLAMIC SCHOLAR

NUR SAADAH BINTI SAARI

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONOURS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITY SULTAN ZAINAL ABIDIN

2020

i

DECLERATION

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: NUR SAADAH BINTI SAARI

Date: 2 JAN 2020

ii

CONFIRMATION

This is to confirm that:

The research conducted and the writing of this report was under my supervision.

Name: MADAM IRMA SHAYANA

BINTI SAMADEN

Date: 2 JAN 2020

iii

DEDICATION

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

First and foremost, I thanked Allah for granting me continuous strength, motivation and

patience in successfully dealing this project from the start till the complete process. I

thanked my supervisor, Madam Irma Shayana binti Samaden for her knowledge in

guiding me throughout whole process, my dear parents, Saari bin Husin and

Moonafizad binti Muhamad for understanding me in working up the project and a lot

thanks to other lecturers and coursemates under same faculty for aiding me in pointing

out any deficiency in this project to make it worth in the end.

iv

ABSTRACT

AR Islamic Scholar is an interactive application which is developed for building

interaction in teaching and learning with combination of unlimited elements of

multimedia in real time as initiative for teenagers to enjoy learning history about Islamic

Scholar and their contribution on various field of knowledge. Development of AR

Islamic Scholar application use Autodesk Maya – 3D computer graphics software for

modelling three main 3D models: picture frame, scroll and book; and animation.

Unity3D – cross-platform game engine for developing AR application and Vuforia – an

augmented reality software development kit for mobile devices. The methodology used

is an interaction design lifecycle model consisting of four activities: identifying needs,

(Re) design, build an interactive version (prototype) and evaluate. For future plan, the

development for AR Islamic Scholar will be updated with more elements of multimedia

such as video, images, audio and sound.

v

ABSTRAK

AR Islamic Scholar adalah aplikasi interaktif yang dibangunkan untuk membina

interaksi dalam pengajaran dan pembelajaran dengan gabungan unsur multimedia yang

tidak terhad dalam masa nyata sebagai inisiatif untuk remaja menikmati keseronokan

mempelajari sejarah tentang Ilmuwan Islam dan sumbangan mereka dalam pelbagai

bidang pengetahuan. Pembangunan aplikasi AR Islamic Scholar menggunakan perisian

grafik komputer ‘Autodesk Maya’ - 3D untuk memodelkan tiga model 3D yang utama:

bingkai gambar, skrol dan buku; serta animasi. ‘Unity3D’ - enjin permainan silang

platform untuk membangunkan aplikasi AR dan ‘Vuforia’ - kit pembangunan perisian

realiti yang diperkembangkan untuk peranti mudah alih. Metodologi yang digunakan

adalah model kitaran hayat reka bentuk interaksi yang terdiri daripada empat aktiviti:

mengenal pasti keperluan, reka bentuk (semula), membina versi interaktif (prototaip)

dan menilai. Untuk perancangan masa depan, perkembangan untuk ‘AR Islamic

Scholar’ akan dikemas kini dengan lebih banyak elemen multimedia seperti video, imej,

audio, bunyi dan animasi interaktif.

vi

TABLE OF CONTENTS

Page

DECLERATION i

CONFIRMATION ii

DEDICATION iii

ABSTRACT iv

ABSTRAK v

TABLE OF CONTENTS vi

LIST OF TABLES viii

LIST OF FIGURES ix

LIST OF APPENDICES x

CHAPTER 1 INTRODUCTION 1

1.1. Introduction 1

1.2. Background 1

1.3. Problem Statement 2

1.4. Objective 3

1.5. Scopes 3

1.6. Limitation of Work 3

1.7. Milestone 4

1.8. Expected Result 4

1.9. Conclusion 4

CHAPTER 2 LITERATURE REVIEW 5

2.1 Introduction 5

2.2 Related Product 5

2.2.1 Book 5

vii

2.2.2 Electronic Source 6

2.2.3 Virtual Flash Card 6

2.2.4 Mobile Application 7

2.3 Comparison table of multimedia element among existing product 7

2.4 Comparison table of advantages and disadvantages among existing product 8

2.5 Conclusion 8

CHAPTER 3 METHODOLOGY 9

3.1 Introduction 9

3.2 Interaction Design Lifecycle Model 9

3.2.1 Identifying 10

3.2.2 Designing 11

3.2.3 Prototyping 15

3.2.4 Evaluation 15

3.3 Hardware and Software Requirement 16

3.3.1 Hardware requirement 16

3.3.2 Software requirement 16

3.4 Conclusion 17

REFERENCE 18

APPENDIX 20

viii

LIST OF TABLES

TABLE TITLE PAGE

Table 1 Gantt Chart 4

Table 2 Comparison table of multimedia element among existing product 7

Table 3 Comparison table of advantages and disadvantages among existing product 8

Table 4 Vuforia Rating 14

ix

LIST OF FIGURES

FIGURE TITLE PAGE

Figure 1 Book Cover 5

Figure 2 PDF Cover 6

Figure 3 Quizlet website 6

Figure 4 Application Interface 7

Figure 5 Interaction Design Lifecycle Model 10

Figure 6 Framework 11

Figure 7 Storyboard Application 12

Figure 8 Storyboard Marker 13

Figure 9 Modelling 13

Figure 10 Texturing 14

Figure 11 Unity 3D Project 15

x

LIST OF APPENDICES

APPENDIX TITLE PAGE

A Appendix 1 – 28 Okt 2010 20

B Appendix 2 - 25 Aug 2019 21

1

CHAPTER 1

INTRODUCTION

1.1. Introduction

This section provides a basic overview of the whole developed system. This chapter

presents the project background, problem statement, objectives, scope and project

planning. The project background discusses about the basic information regarding this

system. The problem statements mention about related common issues of the system.

The objective will be focused as the main goal of this system. The scope shows the user

who will be using this system and what they can gain with.

1.2. Background

Augmented reality (AR as abbreviation) is recognised globally for use in education

as learning and teaching app, while in Malaysia, it is still new and has been implemented

in several subject such as science, astronomy, mathematics and language. It is still

considered rare for Islamic study despite some had implement this new technology in

‘tajwid’, ‘ibadah’, ‘sirah’, ‘aqidah’ and jawi that has transformed them into new

interactive way as Islamic learning and teaching app.

By making embedded ‘marker’, through an AR application, educational reading

materials such as flash card and book has transform the dull in traditional way into

active learning process. Being an interactive application with its elements of

multimedia such as text, image, video, audio, sound and animation, those had been

superimposed into user’s real time environment, thus this project choose AR Handheld

as AR feature to reach the user, seeing that almost everyone has smartphone as personal

belonging.

2

This project focus on using benefits of AR for its visualization experience (makes

virtual object look nearer to reality along with objects’ properties as in real world),

interaction and movement (quality of AR innovation that enable to interact with virtual

object in real time and give them accessibility to control learning material) and proved

for being useful in learning (gives frailty feeling which is the rule impact learning as

matter of exploration that raise positive impacts and motivation level for inactive and

dull understudies).

Known that AR has potential as best learning immersion that permits users to keep

control how they see the virtual in the present reality around them which comes with

flexibility of sighting the expected by moving around the virtual object in real time. It

has certain trademark to control or control virtual protests and view them in alternate

points of view (Billinghurst, 2002). Thus, it is clear that AR Islamic Scholar will be

using this AR technology as an interactive application for educational purpose to people,

especially young teenagers about great, humble people who gave their time for their

career, learning and discovering new knowledge for the sake of civilization.

1.3. Problem Statement

With such good adaption towards educating with augmented reality, it would be

wise to take first action on educate about Islamic Scholars using this new technology.

Sadly, there are none application developed to educate about Islamic Scholar by using

augmented reality beside common mobile application. Learning about Islamic Scholar

are considered as part of history whereas the subject history itself is very unlikeable

among teenagers. They found the dull hardly appreciate the significant of history and

that can be changed by using augmented reality as alternative for interactive learning

approach. In addition, most people do not realize how much contributions that these

Islamic Scholar had made in various fields. Thus, making development of an

augmented application about Islamic Scholar will preserve history of contributions from

these iconic scholar in the future.

3

1.4. Objective

The objectives of the AR Islamic Scholar are:

1. To identify the capabilities of augmented reality that surpassed other forms of

media in education.

2. To design AR Islamic Scholar with element of interactive multimedia as

interactive learning approach.

3. To evaluate the system functionality of AR Islamic Scholar application.

1.5. Scopes

The main scope of the system is put into two categories as mentioned below:

1. Admin

The admin responsible on managing the application and scheduling maintenance

of the application as well as updating new version with better performance.

2. User

AR Islamic Scholar is developed for main target, teenagers aged 13 to 17 years old,

especially those with low interest in history. This application can be installed into

smartphone by android user only.

1.6. Limitation of Work

There are several limitation and constraints throughout the development and usage of

AR Islamic Scholar using embedded marker on flashcards and a board with A4 size.

1. AR Islamic Scholar is developed as mobile based application.

2. AR Islamic Scholar is available in android version.

3. AR Islamic Scholar only enlists selected scholars for each field.

4

1.7. Milestone

Table 1 Gantt Chart

1.8. Expected Result

At the end of this project, the result that are expected following the development of

AR Islamic Scholar:

1. Good evaluation in all aspects such as design, command, etc.

2. Smooth interaction with 3D object from embedded marker.

3. Get clear interactive multimedia such as image, text, etc.

1.9. Conclusion

In the end of this chapter, AR Islamic Scholar can surely hope to be the first

augmented reality application developed for educating people about Islamic scholar and

their contributions from the past. For future plan, the development for AR Islamic

Scholar will be updated with more elements of multimedia such as video, images, audio

and sound.

5

CHAPTER 2

LITERATURE REVIEW

2.1 Introduction

This chapter focuses on literature review on related product regarding Islamic

scholars in educating about Islamic scholars had gone through various method from

conventional to new technology. This really aided this final project as a reference to

the extent to which information on Islamic scholars was spread among people and how

these products gave benefits towards them. None product about Islamic scholar is

developed using augmented reality so far.

2.2 Related Product

2.2.1 Book

Figure 1 Book Cover

This book is published in Indonesia language, with elements of multimedia such as

texts and images. The font type and size used is pleasant to the eyes. The book cover

is also attractive. The contents of this book only focuses on the philosophical

thinking by Ibn Rusyd with deeper discussion on that matter.

6

2.2.2 Electronic Source

Figure 2 PDF Cover

This downloaded PDF is compiled with long lists of Islamic scholar names including

the contribution they made. There are also many images included. The language

used is Indonesia. The contents is not professionally organised and plainly-designed.

2.2.3 Virtual Flash Card

Figure 3 Quizlet website

This Quizlet is created by one of its user, SeanTheReckless. People can have fun

learning by doing all sorts of activities and playing two interactive game made in

Quizlet. Here, flash card is used as part of activities in the list of study. This Quizlet

is compiled with several selected Islamic scholars from various field whereas it main

focus is the information about contributions that these scholar had achieved. People

can even check their scores in the history of activities. The language used is English.

https://quizlet.com/SeanTheReckless

7

2.2.4 Mobile Application

Figure 4 Application Interface

This mobile application is developed for educate about famous Muslim scientists and

their inventions with several numbers of them. The interface design is very simple

and learnable. This application came with short and clear description of invention

made by these Muslim scientists along with an image of each of them.

2.3 Comparison table of multimedia element among existing product

Product / Element Text Image Audio Video Animation

SERIAL TOKOH

PEMIKIRAN ISLAM

Y Y

ILMUWAN ISLAM Y Y Y

CONTRIBUTIONS

OF ISLAMIC

SCHOLARS

Y Y Y Y

MUSLIM

SCIENTISTS AND

THEIR INVENTIONS

Y Y

Table 2 Comparison table of multimedia element among existing product

8

2.4 Comparison table of advantages and disadvantages among existing product

Product / Detail Source Function Advantage Disadvantage

‘SERIAL TOKOH

PEMIKIRAN

ISLAM’

Book

Physical

reading

material

Using

suitable font

for reading

No

interactive

content

ILMUWAN ISLAM Electrical

source

Portable

reading

material

Able to

benefit

elements of

multimedia

in device

No

interactive

content after

printed

CONTRIBUTIONS

OF ISLAMIC

SCHOLARS

Website

Interactive

activities

for

education

Has lots of

fun activities

involved

with

elements of

multimedia

Cannot be

reached

offline

MUSLIM

SCIENTISTS AND

THEIR

INVENTIONS

Play

Store

Interactive

mobile

application

Learnable

with

elements of

multimedia

Limited

reading

content

Table 3 Comparison table of advantages and disadvantages among existing product

2.5 Conclusion

In the end of this chapter, it shows lists of related products about Islamic scholar in

different medium such as book, electronic source, website and mobile application.

These have been put into comparison for its elements of multimedia, function,

advantage and disadvantage. After much considering the potential that lies in these

related product, AR seems to have more outstanding performance for enable to put in

use all elements of multimedia and proved out as far most being more fun and attract

attention as learning approach to anyone despite difference in age, gender and

background.

9

CHAPTER 3

METHODOLOGY

3.1 Introduction

This chapter will discuss the methodology used for this project and activities that

will be going thoroughly in application development of AR Islamic Scholar. The

methodology acts as a guide for the progress go smoothly within the given time, seeing

that it is part of factor that pinpoint the work task performed by researchers during the

project’s timeline. Besides that, hardware and software that are required for the process

of AR application development in this project are also enlisted.

3.2 Interaction Design Lifecycle Model

This project use Interaction Design Lifecycle Model as the methodology for AR

application development. It involves four basic activities with keyword: identify,

develop, build and evaluate. The methodology has more than usability goals to be

reached. It focuses more on user experience: goals positive user experience, enjoyable,

entertaining, fun, aesthetically pleasing and supportive of creativity. Key principles

that held in this methodology by matching up those with this application development

mainly on learnability (easily learn how the system works), memorability (easy to

remember how to use the system), feedback (menus is immediate and selection button

works smoothly), visibility (user interface enable user to focus on task) and constraint

(design avoid leading to frustration).

In order for Interaction Design Lifecycle Model to suits well as methodology for

this AR application development, first step should be understand who the users are and

goals that they expected when using the mobile device. Design reference is a must in

considering how the user interface should look like as well as alternative design

10

solutions. Prototyping is a significant part that reflects how the user feedback shown

on designs at every stages. Issues that found in testing prototypes should be detected

and solutions will be made to resolve those issues to ensure the expected goals can be

reached. The Interaction Design Lifecycle Model is shown in figure 3.1.

Figure 5 Interaction Design Lifecycle Model

3.2.1 Identifying

In this activities, identifying needs and establishing requirements should be

made. Seeing that augmented reality brings much potential as media approach in

education, this activity will look into needs for user and requirements for elements

of multimedia that should be implemented into AR application development based

on comparison shown by related products in Table 2.1 (See page 7) and Table 2.2

(See page 8). The target user selected in this project is teenagers who have access to

smartphone and inactive with dull understudies.

Islamic Scholar is a history and history subject is mostly hate by teenagers due

to long, boring facts with traditional way of teaching. Common plain way of using

every elements of multimedia with 2D interaction no longer attracts them to have

fun learning history, even about Islamic Scholar. Thus, the way of learning and

teaching with 3D interaction would sparks their interest, moreover this AR has

transform the future in field of education globally including Malaysia recently.

11

3.2.2 Designing

i. Framework

The framework consists of two-way flow whereas the android user need to install

AR Islamic Scholar on their smartphone before scanning the embedded marker.

Database of these embedded marker are kept in Vuforia which acts as AR

Platform that allows 3D model to appear after the user scan any of embedded

marker provided.

Figure 6 Framework

ii. Complexity Solution

The elements that matches with the theme of Islamic application that need to be

designed are thoroughly searched on Google Chrome. Afterward, rough sketches

are done for illustrating core idea of unique design feature for this AR application.

Finally, the sketches and searched elements are combined into more clearly image

using Adobe Photoshop and Adobe InDesign. These images then imported as user

interface design into Unity3D as well as creating C# scripts using Visual Studio for

the system to work. Some of the images become the texture for the 3D model in

Autodesk Maya: picture frame, scroll, 3D book and props.

iii. User Interface

The design for user interface is with purpose to make it easy for user to get to know

what the app is about, how to use the app and aid user to recognise how the selection

buttons works.

12

Figure 7 Storyboard Application

Opening Page

Show the logo and

the name of AR

application

Loading Page

Show aayat of al-

Quran about

knowledge

Menu Page

Show selection

buttons and name

of AR application

Info Page

Show about the

app. Close button

included to close

the page.

How-to-use Page

Instructs with texts

and images. Home

button to go back to

menu page.

13

iv. Embedded Marker

The embedded marker is created using Adobe Photoshop CS6 and Adobe InDesign

CC. There are three marker made in this project. For flash card, user has to place

it on the base frame. After scanning the marker, user will see 3D objects appears

on the screen of smartphone.

Figure 8 Storyboard Marker

v. 3D Virtual Object

Figure 9 Modelling

14

Figure 3.2 shows the process of modelling 3D objects using Autodesk Maya. Here,

the properties of 3D objects are scale to certain sizes to make them identical as in

real world.

Figure 10 Texturing

Figure 3.3 shows the process of texturing 3D objects using Autodesk Maya after

done modelling. Textures that was added was firstly designed using Adobe

Photoshop CS6.

vi. Create Database of Embedded Marker in Vuforia

Table 4 Vuforia Rating

Figure 3.4 shows the rating star for each marker of AR Islamic Scholar application.

Vuforia make it possible to recognize and track planar images (embedded marker)

to get 3D objects in real time. The visibility of target’s feature would need to be

15

changes if the performance is not satisfying, by means good performance must has

star rating either 4 to 5 stars.

3.2.3 Prototyping

Figure 11 Unity 3D Project

The prototyping will be made in Unity3D to build up the environment for AR

experiences. C# scripts will be the fundamental in order to make the system works

with properties in each scene such as Navigation, Camera, Light, 3D object,

Physics, Material and Animation.

3.2.4 Evaluation

This project evaluate the performance of AR application based on proper design,

command scripting, interaction with 3D model with embedded marker and clear

interactive multimedia such as image, text, etc. Once error is detected or certain

aspects found unsatisfying, the steps will return to previous steps in order to solve

the error. The process of evaluation continue until a satisfying performance is

obtained.

16

3.3 Hardware and Software Requirement

This section enlist the hardware and software that are involved during the process of

application development. All of those significant items for developing this AR

application are as follows:

3.3.1 Hardware requirement

i. Laptop ACER

Used to design 2D images (for interface, flash card, marker and model

texture), for modelling and animating 3D models (frame, table, cloth,

scroll and book) and create scripts for coding.

Processor: Intel(R) Core(TM) i5-8250U CPU @1.60GHz 1.80 GHz

Operating System: 64-bit, x64-based processor

RAM: 4GB

ii. Printer

Used to print out documentation and pictures (Flash card and Marker)

iii. Harddisk

Used to store data as backup file

Storage: 1 Terabytes

iv. Android Xiaomi Redmi 4X

Used to run and testing the performance of application

3.3.2 Software requirement

i. Unity3D

Used to develop Augmented Reality app and interface for android

application

17

ii. Autodesk Maya

Used as platform for modelling and animating 3D models

iii. Vuforia

Part of Unity3D

Used to detect and tracks the marker of images. For best result, the

target should gains 4 to 5 stars.

3.4 Conclusion

Methodology is significant in application development to ensure the system runs

well. In this chapter, it showed that Interaction Design Lifecycle Model is suitable as

guide in building the AR application. Aside that, this chapter also explained and enlists

hardware and software requirement for the AR application development to build the

system.

18

REFERENCE

1. AlFurqon. (2017). Ilmuwan Muslim. Retrieved from

https://kupdf.net/download/ilmuwan-muslim_58e7aafadc0d60656dda97fe_pdf

Accessed on 11 September 2019.

2. KingApps. (2017) Muslim Scientists and Their Inventions. Retrieved from

https://play.google.com/store/apps/details?id=com.kingzapps.muslimscientists

andtheirinventions. Accessed on 11 September 2019.

3. Rapia'e, Muhammad & Khaliludin, Nur & Junit, Muhammad & Sobri, Nur.

(2016). Encouraging People to Learn Islam in a New Interactive Way Using

Augmented Reality (AR). Nova Journal of Engineering and Applied Sciences.

5.10.20286/nova-jeas-050104. Retrieved from

https://www.researchgate.net/publication/310314814_Encouraging_People_to

_Learn_Islam_in_a_New_Interactive_Way_Using_Augmented_Reality_AR.

4. Saforrudin, Norabeerah & Badioze Zaman, Halimah & Ahmad, Azlina. (2012).

Usage Concepts of Augmented Reality Technology in Islamic Study. Global

Journal Al-Thaqafah. 2. 15-22. 10.7187/GJAT102012.02.01. Retrieved from

http://www.gjat.my/gjat062012/gjat1020120201.pdf.

5. Billinghurst, M. 2002. Augmented Reality in Education. Seattle WA: New

Horizons for Learning - Technology in Education. Retrieved from

http://scholar.google.com.my/scholar_url?url=http://www.academia.edu/downl

oad/4810740/ar_edu.pdf&hl=en&sa=X&scisig=AAGBfm1N8LeiyprF3yQ70N

2vYjeelw43Iw&nossl=1&oi=scholarr.

6. Andre, Andre & Dinata, Hendra. (2018). Interaction Design to Enhance UX of

University Timetable Plotting System on Mobile Version. IOP Conference

Series: Materials Science and Engineering. 407. 012174. 10.1088/1757-

899X/407/1/012174. Retrieved from

https://www.researchgate.net/publication/327907730_Interaction_Design_to_

Enhance_UX_of_University_Timetable_Plotting_System_on_Mobile_Version

19

7. Arkib Orang Muda Buta Sejarah! – Lampiran (2010) Retrieved from

studentsrepo.um.edu.my. Accessed on 18.December 2019.

8. Tidak kenal sejarah buat orang muda jiwa kosong. (2019) Retrieved from

bharian.com.my/berita/nasional/2019/08/599979/tidak-kenal-sejarah-buat-

orang-muda-jiwa-kosong/amp. Accessed on 18.December 2019.

20

APPENDIX

Appendix A Appendix 1 – 28 Okt 2010

21

Appendix B Appendix 2 - 25 Aug 2019