Besut Campus Virtual Reality (Vr) 360 Degree Panoramic View

BESUT CAMPUS VIRTUAL REALITY (VR) 360 DEGREE PANORAMIC VIEW

MUHAMMAD NAUFAL BIN FARID

BACHELOR OF INFORMATION TECHNOLOGY (INFORMATIC MEDIA) WITH HONOURS UNIVERSITI SULTAN ZAINAL ABIDIN

2018

BESUT CAMPUS VIRTUAL REALITY (VR) 360 DEGREE PANORAMIC

VIEW

MUHAMMAD NAUFAL BIN FARID

Bachelor Of Information Technology

(Informatic Media) With Honours

Universiti Sultan Zainal Abidin,Terengganu,Malaysia

DECEMBER 2018

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 Universiti Sultan Zainal

Abidin or other institutions

______

Name : Muhammad Naufal bin Farid

Date : 23 December 2018

CONFIRMATION

This is to confirm that:

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

______

Name : Dr Ismahafezi bin Ismail

Tarikh : 23 December 2018

DEDICATION

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

Alhamdulillah, I thank God for His grace and grace, I can prepare and complete this report successfully.

I am grateful and would like to express my sincere gratitude to my supervisor,

Dr Ismahafezi bin Ismail for his invaluable guidance, continuous encouragement and constant support in making this research possible. I really appreciate his guidance from the initial to the final level that enabled me to develop an understanding of this project thoroughly. Without his advice and assistance, it would be a lot tougher for completion. I also sincerely thanks for the time spent proofreading and correcting my mistakes.

I acknowledge my sincere indebtedness and gratitude to my parents for their love, dream and sacrifice throughout my life. I am really thankful for their sacrifice, patience, and understanding that was inevitable to make this work possible. Their sacrifice had inspired me from the day I learned how to read and write until what I have become now.

I would like to take the opportunity to thank all lecturers of the Informatics and

Computing Faculty for their attention, guidance, and advice in helping and sharing ideas and opinions in making this report successful.

May Allah SWT bless to all the efforts that have been given in completing this report.

Thank you

iii

ABSTRACT

Sultan Zainal Abidin University (UniSZA) is a university located in the state of

Terengganu, in the East Coast of Malaysia. UniSZA has three campuses in different places. The first camp known as the Gong Badak Campus is located in

Gong Badak, Kuala Terengganu district. in Kuala Terengganu and is known as the

City Campus. The third camp is the Besut Campus located in the Besut district of

Terengganu. The Gong Badak campus is the main campus for UniSZA. My project focuses on the Besut campus between the Terenganu and Kelantan boundaries. UniSZA has two faculties and four blocks of residential colleges. The faculty located at Besut Campus is the Faculty of Informatics and Computing

(FIK) with the Faculty of Biosumber and Food Industry (FBIM). The residential college has four blocks, three blocks in female students and one block in the male students. Besut campus also has lakes, multipurpose halls, fields and animal sanctuary as well as with farms used for students to do their crop project. Students should know the areas in Besut Campus to facilitate them to go to the area they want to go to.

ABSTRAK

Universiti Sultan Zainal Abidin(UniSZA) ialah universiti yang berada di negeri

Terengganu iaitu di Pantai Timur Malaysia.UniSZA mempunyai tiga kampus yang berada di berlainan tempat.Kampus pertama di kenali sebagai Kampus Gong badak berada di daerah Gong Badak,Kuala Terengganu.Kampus kedua berada di

Kuala Terengganu dan di kenali sebagai Kampus Kota.Kampus ketiga ialah

Kampus Besut yang berada di daerah Besut,Terengganu.Kampus Gong badak merupakan kampus utama bagi UniSZA.Projek saya mengfokuskan kepada kampus Besut yang berada di antara sempadan Terenganu dan Kelantan.Kampus

Besut UniSZA mempunyai dua fakulti dan empat blok kolej kediaman.Fakulti yang terdapat di Kampus Besut ialah Fakulti Informatik dan Komputeran (FIK) bersama Fakulti Biosumber dan Industri Makanan (FBIM).Blok kolej kediaman mempunyai empat blok iaitu tiga blok di diami oleh pelajar perempuan dan satu blok di diami oleh pelajar lelaki.Kampus Besut juga mempunyai tasik,dewan serbaguna,padang dan kawasan peliharaan haiwan serta dengan ladang yang digunakan untuk pelajar melakukan projek tanaman mereka.Pelajar haruslah mengetahui kawasan-kawasan di Kampus Besut supaya memudahkan mereka untuk pergi ke kawasan yang mereka ingin tuju.

TABLE OF CONTENT

Halaman DECLARATION i CONFIRMATION ii DEDICATION iii ABSTRACT iv ABSTRAK v TABLE OF CONTENT vi LIST OF TABLES viii LIST OF ABBREVIATIONS/TERMS/SYMBOLS ix LIST OF FIGURES x

CHAPTER 1 INTRODUCTION 1.1 Project Background 1 1.2 Problem Statement 3 1.3 Objective Study 3 1.4 Scope 4 1.5 Limitation Of Work 4 1.6 Expected Result 5

1.7 Activities, Milestones (Gantt Chart) 6

CHAPTER II LITERATURE REVIEW 2.1 Introduction 7 2.2 Virtual Reality (Vr) 360 Degree Panoramic View 8 2.3 Related Projects 9

2.3.1 UNISZA Website 2.3.2 Panoramas.Dk Website 10 2.3.3 360cities (VR) Website 11 2.3.4 Waze Application 12 2.3.5 Google Street View Application 13

2.4 Tools Use To Develop The Related Projects 14

2.4.1 PHP 14 2.4.2 MySQL 14

2.4.3 Adobe Photoshop 14 2.4.4 Tourweaver 15 2.5 Summary Of Chapter 15

CHAPTER METHODOLOGY III 3.1 Introduction 16 3.2 System Development Methodology (Waterfall) 17 3.2.1 Requirement phase 18 3.2.2 Analysis Phase 18 3.2.3 Design Phase 19 3.2.4 Development and Implementation Phase 19 3.2.5 Deployment Phase 19 3.3 Framework 20 3.4 Context Diagram 21 3.5 Data Flow Diagram 22 3.6 Entity Relationship Diagram 23 3.7 Analysis Of System Requirements 24 3.7.1 Software Requirement 24 3.7.2 Hardware Requirement 25 3.8 Summary Of Chapter 25

REFERENCES 27

vii

LIST OF TABLES

TABLE TITTLE PAGE

1.7 Gantt Chart 4 3.1 Comparision table of existing project 18 3.2 Software requirement 24 3.3 Hardware requirement 25

viii

LIST OF ABBREVIATIONS/TERMS/SYMBOLS

VR Virtual Reality FYP Final year project CD Context Diagram DFD Data Flow Diagram ERD Entity Relationship Diagram

LIST OF FIGURES

FIGURE TITLE PAGE 2.1 UNISZA Website 9 2. 2 Panoramas.Dk Website 10 2..3 360cities (VR) Website 11 2.4 Waze Application 12 2.5 Google Street View Application 13 3.1 Waterfall method 17 3.2 Framework 20 3.3 Context Diagram 21 3.4 Data Flow Diagram 22 3.5 Entity relationship Diagram 23

CHAPTER I

INTRODUCTION

1.1 Project Background

In chapter 1, there are five subtopics that we will briefly discuss. They have included an introduction, background of study, objectives, problem statement, and scope. The introduction discusses about basic information about this website while a background of study will explain about the area of research to set the context for a problem that which really happened. Problem statement will be discussing related issues in this project. Objectives will define all the main goal of this application.

Lastly, a scope will elaborate more about where this website will take part in society.

Panorama is the result of stitching multiple photos to one single image that covers a wide field of up to 360 degrees horizontally and 180 degrees vertically. There are 2 ways of displaying panorama. Firstly is a flat panorama. This panorama is a static image and it is not attractive which is the user cannot go through the image but only can just view the image. Secondly is unfold image and also known as a Spherical image. This Spherical image is not a static image and it is an interactive image which is user can view the image and go through the image, the user can pan around the picture,zoom in and out also can go to left and right at special view of the image using the interactive button that will be provided in the image. My project will use this spherical image inside the website.

This Besut campus website (Besut 360) is an informal method that aims to make it easy for students to get information or to view Besut campus in real view 360 1

(panorama). This campus website is to show students through online about Besut campus without the student moving around and just browsing this website. This website contains images and information about the campus buildings. this website is developed to enable users or students to obtain the necessary information by accessing this website. In addition, these websites become more efficient when work such as searching, storing, updating and deleting information can be implemented more quickly and regularly.

In this project will be entered into the process of inserting data and visualization of the campus environment. The technique to be adopted in the project is a 360 photography technique that is one of the techniques in virtual reality using original images. This project is developed exclusively for external users or new students who do not know the environments around campus that can help to facilitate the realization of information and scenery in real time and can promote UniSZA's bespoke campus to the outside community. Website habits focus only on providing information without showing pictures or directions but this website will include panorama view and graphic info that is more attractive to make it easier for users to browse.

1.2 Problem Statement

The problem statement for this project is less of an interesting interface. The less

interesting interface is not inserted with multimedia elements such as animation,

audio and video. Design of website content is often limited to a one-size-fits-all

approach to interaction and presentation that does not accommodate people with

disabilities and personalized needs. Secondly is the lack of an interactive button

because most panoramas only have views and do not have a button to move in and

out. Don’t make people search for what they need, and do not use unclear wording

for your pages. Have all your website’s important information readily available to

any site visitor. Lastly is the walkthrough website. Most panoramas website do

have a walkthrough to show about the environment of the place.

1.3 Objectives Study

This application can be fully complete if all the objectives are accomplished

1. To design interfaces website of Besut Campus.

2. To develop an online panorama website about the area in Besut Campus.

3. To test the functionality of the website developed based on creative and user-

friendly concepts.

1.4 Scope

1. Admin

Admin can check feedback made by users about the website of panorama view.

Admin also managed all information (Insert, update and delete any information) about website Besut Campus.

2. User ( Visitor)

This website contains 3 users which are the student, lecturer and any potential visitor.

A user is able to get information about Besut Campus according to what they want to know and what they want to view in this website. The user that wants to view the panorama 360-degree view can search through the website and user can give feedback to the website.

1.5 Limitation Of Work

The limitation of this website is accessibility to internet connectivity. If the internet speed is low so the resolution will become low in the computer.Furthermore, this website is developed based on web-based – so that it only can be open using a computer that has adobe flash software. This website also covers about Besut Campus only.

1.6 Expected Result

The expected result following the development of the proposed project is the user can have a website with a good user interface. Panoramas that have good navigation and user-friendly. Other than that, give enough information about the Besut

Campus and lastly achieved the outline of the objective.

1.7 Activities, Milestones (Gantt Chart)

Task name SEPTEMBER OCTOBER NOVEMBER DECEMBER

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Topic Discussion and

Determination

Project Title Proposal

Proposal writing

Proposal writing –

Literature Review

Proposal Progress

Presentation &

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

Table 1.1 Gantt Chart 6

CHAPTER II

LITERATURE REVIEW

2.1 Introduction

Nowadays, there are many ways to gain an information. We can basically find it by reading a book, find someone to talk about a certain course in their area of specialization and by easy find it in internet. Unlike the traditional application, this application are accessible any time, anywhere via any computer with an internet connection.

This chapter describes the literature review on the development of the Besut campus 360-degree view website (Campus besut). Descriptions include existing website and analyzes of existing website so that weaknesses can be identified. Then, overcome and find solutions to these weaknesses.

2.2 Virtual Reality (VR) 360 Degree Panoramic View

Virtual reality (VR) is an interactive computer-generated experience taking place within a simulated environment. It incorporates mainly auditory and visual feedback, but may also allow other types of sensory feedback like haptic. This immersive environment can be similar to the real world or it can be fantastical.

Augmented reality systems may also be considered a form of VR that layers virtual information over a live camera feed into a headset or through a smartphone or tablet device giving the user the ability to view three-dimensional images.

VR photography can also be used for displaying objects in 360 (360 photography, commonly referred to as 360 Object VR, 360 product photography, 360 product images and 360 product views. These are created by capturing a series of images as the object rotates over a 360 rotation ,camera stays in a fixed position. The output will be a series of individual images ,typically JPG format that can then be composed into an interactive 360 view.

2.3 Related Projects

2.3.1 UniSZA Website

FIGURE 2.1 : The information page of UniSZA website.

UniSZA website is a website for UniSZA student or any visitor to get an information about news, awards, activities and many more about UniSZA.This website contains of 5 button menu which is Profile, Admission , International

,Academic & PTJ and Information.The strength of this website, it has an intuitive interface and use of appropriate colors. It will attract the users to view the website.

But the weakness of this website is the website does not have enough audio and video multimedia element and this will make users boring when browsing this website. So the solution is to diversify multimedia elements such as animation, audio, and video so that will make this website more interactive media.

2.3.2 Panoramas.Dk Website

1. Zeitkapsel 2. 007museum

FIGURE 2.2: The main page of Panoramas.dk website.

Panoramas website is a website for users to browsing panorama image in the website. Panoramas.dk was started in 2002 with the intention to make immersive panoramic images also called Virtual Reality (VR) Photography more known among the general public. Interactive panoramas is a young media and as such, it has for many years been known among enthusiastic photographers and multimedia creators.

You can only distribute VR panoramas by the internet or on CD. The strength of this website, it has the right choice of writing. The content is simple but it makes the user easy to understand. The weaknesses of this website are, it has an irregular and messy button arrangement. It makes users confuse with the button on the website.So the solution is to make improvements to the arrangement of key buttons.

2.3.3 360 Cities (VR) Website

FIGURE 2.3 : The game page inside the website.

360cities website is a website for users to browsing panorama image in the website. 360cities.net is the largest collection of stunning, high-resolution, interactive panoramic photos and 360º videos created by a network of thousands of the finest panorama photographers and videographers from around the world. 360Cities is the leader in 360° / VR media for education, publishing, advertising & film, and mobile app & game development. The strength of this website is, it has a good resolution image of panoramas view. The weakness is the website is not user-friendly.So the solution is to make this website become more user-friendly and that will make the user easy to use this website.Technique use in this website is photography technique.Which is 360 degree panoramic view.The camera with the fisheye lens is mounted with the correct settings on top of the panoramic head, which is fastened onto the tripod. The photographic session begins by choosing the point in which you want to “center” the 360° Photograph.

2.3.4 Waze Application

FIGURE 2.4 : The Menu inside the waze application.

Waze application is an application for users to browsing or searching location in the application. Waze is a GPS navigation software app. It works on smartphones and tablet computers that have GPS support. It provides turn-by-turn navigation information and user-submitted travel times and route details while downloading location-dependent information over a mobile telephone network. The strength of this application is the information in the application is always up to date.The weakness of

Waze is the layout of the maps. The layout is messy and makes user confuse when using Waze.So the solution is to make the layout simpler and easy to understand by users.

2.3.5 Google Street View Application

FIGURE 2.5 : The Pages inside the google street view.

Google Street View is a technology featured in Google Maps and Google

Earth that provides panoramic views from positions along many streets in the world. It was launched in 2007 in several cities in the United States, and has since expanded to include cities and rural areas worldwide. Google Street View displays panoramas of stitched images. Most photography is done by car, but some is done by trekker, tricycle, walking, boat, snowmobile, and underwater apparatus. Google Maps used

Adobe Flash for Street View.The Strength of this application is, it has views around all the world.User just search the location and it will appears the view of the location.The weakness of this application is the location unaccurate location view.

2.4 Tools Use To Develop The Related Projects

2.4.1 PHP

In developing a system, PHP software is used to create source code to produce any process. Hypertext Preprocessor (PHP) is a server-side scripting language designed for Web development. It was originally created by Rasmus Lerdorf in 1994 the PHP reference implementation is now produced by The PHP Group. PHP code may be embedded into HTML code, or it can be used in combination with various web template systems, web content management systems, and web frameworks.

2.4.2 MySQL

Phpmyadmin is used to create databases. Phpmyadmin is a free and open source administration tool for MySQL and MariaDB. As a portable web application written primarily in PHP, it has become one of the most popular MySQL administration tools, especially for web hosting services.

2.4.3 Adobe Photoshop

Adobe Photoshop is the software used to edit images in the system. Adobe Photoshop is a raster graphics editor developed and published by Adobe Inc. for macOS and

Windows. Photoshop can edit and compose raster images in multiple layers and supports masks, alpha compositing and several color models.

2.4.4 Tourweaver

Tourweaver is use to stich the image to become 360 degree panoramas view.

Tourweaver 7 is a professional virtual tour creating software. It presents a real 360 degree world with panoramic view and transition. sounds, video, maps and more great features can be explored in virtual tour.

2.5 SUMMARY OF CHAPTER

As a result of the literature review, the development of the new website can detect problems in the existing website . The next chapter will discuss the website development methodology created, to address the problem of existing websites.

CHAPTER III

METHODOLOGY

3.1 INTRODUCTION

In order to make the website more comprehensive, creative and complete in addition to meeting the requirements, various aspects need to be considered. The aspect is, to begin with the process of understanding the existing website, then researching the website, analyzing research, making new designs more efficient and attractive, and then developing and implementing projects to the website maintenance process.

Therefore, several methods have been used to obtain information in developing a more systematic and high-quality website and able to complete it at a predetermined time.

3.2 SYSTEM DEVELOPMENT METHODOLOGY (WATERFALL)

The methodology is very important in the process of building a website. The methodology is a method in which techniques have to be followed in every process that exists in the website development life cycle. To develop a 360 view website

(Besut Campus), waterfall method is used. This waterfall method is very easy to understand by users. In this model, the phase is processed and resolved one by one.

There are 5 phases involved in the plumbing:

Requirement Phase

Analysis Phase

Design Phase

Editing and Testing Phase

Deployment

FIGURE 3.1 : Waterfall method

3.2.1 Requirement Phase

This phase is the first phase that aims to identify the problems faced. In this first phase, I observe UniSZA website. After that, identify the problems or shortcomings existing in the existing website to overcome them.

3.2.2 Analysis Phase

Information gathering activity to identify the confusion for the website to be developed has been carried out and with the information obtained can be analyzed in more detail. Through the information that has been analyzed, the website to be developed will overcome every problem and shortage that existed before.

EXISTING MEDIUM VIRTUAL CONTENT WEAKNESS

PRODUCT REALITY

Website No UnisZA -Less of

UniSZA Infomation multimedia

element

Website Yes Virtual Reality -

Google street of the some

location

Website Yes Virtual Reality -Messy Layout

360CITIES of the some

location

Table 3.1 Comparison Between Related Project

3.2.3 Design Phase

Through this phase, the design of this website will be built to facilitate the development of the website later. Designing a project first is very important to ensure that the website to be developed as an organized journey. Among the processes used in this phase are the context diagram (CD), constructing an entity relationship diagram

(ERD), and construct a data flow diagram (DFD). Interface and database schema will also be created to facilitate the development process in implementing this website.

3.2.4 Development and Implementation Phase

Testing of this website will be made in stages where each module will be tested before the website overall testing. At this stage, each sub will be unified and form a complete website. This test will be performed by friends before being tested by the supervisor. This implementation is important for detecting errors in the website. If there is an error on the website, correction or repair will be done promptly.

3.2.5 Deployment

The support system involves the problem-solving process faced by the developed website. In this phase, the final test needs to be done to ensure the website is in good shape. The website will be tested and maintained to ensure that the website does not have any problems. Repair should be done immediately if there is any problem with this system. If there is no problem, this developed website can be used thoroughly.

3.3 Framework

FIGURE 3.2 Framework

Figure 3.2 above shows the framework design of Besut Campus website. User able to choose any button on this website. The users need the mouse to interact and moving in this panoramic view. For Admin, Admin able to update the application for making the new design. Admin also able to view the response feedback. The database used to stored data for the visitors and the feedbacks.

3.4 Context Diagram (CD)

FIGURE 3.3 Context Diagram

In the context of the diagram for the Besut Campus website, there are two entities. the visitor and the admin, as shown in Figure 3.3. The first process involved is that user will enter data visitor to create a record as a visitor. Similarly, with admin, they need to include data admin to access the system. Furthermore, through this system visitor can place feedbacks. Lastly, the Admin can manage the feedback as well as obtain various feedback reports of activities from this system.

3.5 Data Flow Diagram (DFD)

FIGURE 3.4 Data Flow Diagram

Referring to figure 3.4, the first process involved in the registration process of the visitor. This registration process requires visitors to enter visitor data as input.

Then, the received visitor information will be stored in the visitor data storage. visitors need to fill in the information correctly and completely for admin's savings. This is because to make it easier for admin to process the feedback if visitors make feedback using this system.

The second process is the login process. visitors need to use the correct e-mail and password as listed in the first process. This is because the process of signing in to the system must be correct and the same as in visitors data storage. Identity verification will be done by referring to visitors data storage. This process also applies to (admin), and confirmation of admin identity will also be performed.

The third process is the process of visitors feedback . This process applies to visitors who want to make feedback in this system. feedback details will be saved into the database after the visitors make feedback.

The last process is the process of generating reports. This process will take input from two data storage, customer data storage, feedback. Next will be sent to the admin as a report.

3.6 Entity Relationship Diagram (ERD)

FIGURE 3.5 Entity relationship Diagram

Once the application architecture is identified, the database is developed according to the predefined specifications. Databases are created to store data on visitors personal information and feedbacks. It enables information to be quickly and more structured.

3.7 ANALYSIS OF SYSTEM REQUIREMENTS

Some software and hardware have been used to simplify the website development process. Among the software used are:

3.7.1 Software Requirement

Type of Software Function

Windows 10 The selection of Windows is considered as a platform because it is commonly used, and is easy to maintain.

Xampp Used to connect between SQL with the internet.

MySQL Used to develop databases.

Microsoft word 2010 Used to generate documentary reports.

Google Chrome Used to view project results after being framed using coding html and programming languange.

Notepad++ Used to do programming to develop the website.

Adobe Photoshop CS6 Used for editing images.

Adobe Premiere Pro Used to produce video.

Panoweaver Used to stitch a storefront image to make a panorama.

Tourweaver Used to generate functional buttons in store environment visualization.

Table 3.2 Software requirement

3.7.2 Hardware Requirement

Type of Hardware Function

Laptop Used to create PHP program.

Memory Used to store data and information.

Processor Used to run the project work process smoothly.

Mouse Used to facilitate movement of arrows when using laptop.

Printer Used to print project proposals and final reports.

USB Used to keep the project work softcopy.

CD-ROM Used to store documents or information related to the final assignment.

Camera Used to capture pictures of Besut campus environment.

Stablizer Used to support the camera to take pictures in order to produce quality pictures.

Table 3.3 Hardware requirements

3.8 Summary Of Chapter

Development methodology is important to develope more systematic and high quality website. The next chapter will show and describe the elements in the system.

REFERENCES

• Grau, Oliver; Custance, Gloria (2003), Virtual art : from illusion to

immersion([Rev. and expanded ed.] ed.), MIT Press, ISBN 978-0-262-07241-0

• Kenny, Michael F.; Schmitt, Raymond F. (1983). Images, Images, Images: The Book of Programmed Multi-Image Production. New York: Eastman Kodak. ISBN 978-0-87985-327-3.

• Oettermann, Stephan (1997). The Panorama: History of a mass medium. MIT Press. ISBN 0942299833, 9780942299830

• Garrison, Laurie et al., editors (2013). Panoramas, 1787–1900 Texts and contexts Five volumes, 2,000pp. Pickering and Chatto. ISBN 978-1848930155