55
MARINE PARK VIRTUAL REALITY AHMAD SUFI BIN WISLAN BACHELOR OF INFORMATION TECHNOLOGY (INFORMATICS MEDIA) FACULTY INFORMATICS AND COMPUTING UNIVERSITY SULTAN ZAINAL ABIDIN , TERENGGANU, MALAYSIA JANUARY 202

MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

  • Upload
    others

  • View
    6

  • Download
    0

Embed Size (px)

Citation preview

Page 1: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

MARINE PARK VIRTUAL REALITY

AHMAD SUFI BIN WISLAN

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA)

FACULTY INFORMATICS AND COMPUTING

UNIVERSITY SULTAN ZAINAL ABIDIN , TERENGGANU, MALAYSIA

JANUARY 202

Page 2: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

I

MARINE PARK VIRTUAL REALITY

AHMAD SUFI BIN WISLAN

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA)

FACULTY INFORMATICS AND COMPUTING

UNIVERSITY SULTAN ZAINAL ABIDIN , TERENGGANU, MALAYSIA

JANUARY 2019

Page 3: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

2

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 Sufi Bin Wislan

Page 4: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

3

CONFIRMATION

This is to confirm that Marine Park Virtual Reality was prepared and submitted by

Ahmad Sufi bin Wislan (Matric Number: BTDL17047369) 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 : Puan Norkhairani Binti Rawi

Page 5: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

IV

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, Norkhairani Binti Rawi 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,

Zainon Binti Sulaiman. 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.

Page 6: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

V

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 a Marine Park Virtual Reality Mobile Application which

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

identify current VR application focus on deep sea fish. To design interface and to

develop Marine Park 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 unique species in Marine Park. The methodology used in this

application is Addie methodology. ADDIE 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.

Page 7: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

VI

ABSTRAK

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

Pendidikan, hiburan dan insudtri penjualan barangan. VR mempersembahkan objek

dalam bentuk 3D. Kajian ini dilaksanakan bagi membangunkan sebuah Aplikasi Mudah

Alih Marine Park Realiti Maya yang beroperasi secara menggunakan landasan android.

Objektif kajian ini adalah untuk menghasilkan aplikasi virtual reality yang focus kepada

ikan ditaman laut. 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 spesis yang unik sukar dijumpai di taman laut. Metadologi yang digunakan

dalam aplikasi ini ialah kaedah ADDIE. Kaedah ADDIE 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.

Page 8: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

VII

CONTENTS

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

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

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

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

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

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

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

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

CHAPTER 1 .................................................................................................................

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

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

1.3 Objective .......................................................................…………………………………………

1.4 Scope.................................................. .................................................................

1.5 Limitation Work .................................................................................................

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

1.7 Project Schedule ..................................................................................................xi

CHAPTER 1 ................................................................................................................. 1

Page 9: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

VIII

CHAPTER 2 ................................................................................................................. 5

2.1 Introduction ......................................................................................................... 5

2.2 VR Pipeline ......................................................................................................... 6

2.3 VR Platform ......................................................................................................10

2.3.1 HTC Vive / Open VR SDK .......................................................................10

2.3.2 PlayStation VR / PSVR dev kit .................................................................11

2.3.3 Oculus Rift / Oculus SDK .........................................................................12

2.3.4 Samsung Gear VR / Oculus Mobile SDK .................................................13

2.3.5 Google Cardboard / Google VR SDK .......................................................14

2.3.6 Comparison VR Platform ..........................................................................15

2.4 Related Product .................................................................................................17

2.4.1 VR Ocean Aquarium 3D...................... ......................................................17

2.4.2 VR Abyss....................................................................................................18

2.4.3 VR Sea world2 ...........................................................................................19

2.5 Summary of Chapter .........................................................................................20

Page 10: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

IX

CHAPTER 3 ............................................................................................................... 21

3.1 Introduction .......................................................................................................21

3.2 Addie Methodology ..........................................................................................21

3.2.1 Analysis Phases .........................................................................................23

3.2.2 Design Phases ...........................................................................................25

3.2.3 Development Phases .................................................................................. 30

3.2.4 Implementation Phases .............................................................................. 31

3.2.5 Evaluate Phases ......................................................................................... 32

3.3 Framework ........................................................................................................33

3.4 Hardware and Software Requirement ...............................................................33

3.4.1 Hardware Requirement ...................................................................................34

3.4.2 Software Requirement .....................................................................................38

3.5 Technique/Method ............................................................................................43

3.6 Summary of Chapter ......................................................................................... 43

REFERENCES ........................................................................................................... 44

Page 11: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

1

CHAPTER I

1.1 Project Background

Applications of Virtual Reality (VR) have and continue to increase over

the last three year ago. Virtual reality is a combination of video and audio, filling

a single person’s field of sensation, that works with their perceptual process to

give the illusion of being in a computer generated, and can give believe in the real

environment . This is partly due to its usefulness in many fields and as a result of

the attention given to it by the media. This trend is expected to continue in the

future with the advancement of technology in areas like computer graphics,

computer vision, controls, image processing, and other technology-affiliated

components.

The proposed application is for where Marine Park (VR) is the real

experience with marine park VR in the mobile device. A user can explore a new

world by diving into the sea and have an enjoyable journey to see different fish

species. Diving experience will be great with the Marine Park (VR). When a user

used this application, they can learn the type of the fish and at look them closely.

In this application, three (3) option is available. The first one is getting

information. About on how to use this application. Secondly is explore. Where

the user can explore move through around this application and get more

knowledge information about fish it enable user to use and lastly, the user can

collect memorize and moment when using this application.

Page 12: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

2

1.2 Problem Statement

In my literature review about existing products, many virtual reality applications

developed is not focused on fish and is limited come closer . They only focus on the

ocean. So, about this problem, I take an alternative to developing applications that

focus on marine park. Secondly, the problem is Many people don’ know how to swim,

so difficult to get experience in real scuba driving. Problems with many who are not

good at swimming, but they have a desire like swimming in the marine park to see

and feel the environment. So, with this app, it can help people who are not good

swimming to feel like swimming in the ocean . Lastly is there has been a move away

from the traditional experience to technology experience.

1.3 Objective

There are the objectives in this project to be achieved to make this project

successfully complete:

.I. To study and identify current VR applications and marine life.

II. For interface design and for developing the Marine Park (VR) application.

III. To test the app works and benefits the user.

Page 13: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

3

1.4 Scope

The scope of this application is divided into two (2) which are user and admin.

User Scope

(1) Able to explore this application.

(2) Able to play this application

Admin Scope

(1) Able to update this application.

(2) Able to manage application.

1.5 Limitation of works

There are some limitation have in a program

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 application only focuses on Marine park only.

IV. The user needs a VR Box/ VR Cardboard to play this application.

V. Limit only for mobile based

1.6 Expected Result

The expected results for marine park are:

I. Specification of marine park (VR)

II. This application can provide fully function for functional requirement and designof marine park (VR).

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

user when using this mobile application for marine park.

Page 14: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

4

1.7 Project Schedule

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

project is from September of 2019 to December of 2019. Chart that illustrate each

month’s progression and task to be done is shown below .

Page 15: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

5

CHAPTER II

LITERATURE REVIEW

2.1 Introduction

The purpose of this chapter is to present selected literature review,

which is very important for the research. This chapter also describes and explains

of the literature review carried out on the application that will be used as

references in developing this application. The existing application will also be

discussed in this session. Literature review aims to review the critical points of

the current knowledge on a particular topic. Therefore, the purpose of the

literature review is to find, read and analyses the literature or any works or studies

related to this system. It is important to well understand about all information to

be considered and related before developing this application. Some research has

been studied to understand to implement in the Marine Park (VR) application.

Page 16: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

6

2.2 VR Pipeline

The process develops virtual reality is referring to a Virtual Reality

production pipeline. There are a group of people, hardware, and software

aligned to work in a specific sequential order to create a Virtual Reality

product or asset. The three main stages of the production pipeline are

preproduction, production, and postproduction.

Figure 2.1 VR PIPELINE

Page 17: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

7

The first is preproduction. In this stage that includes the idea, script, storyboard,

and design. The idea for a project can come from just about anywhere and from

almost anything. Ideas should be something fun and simple. The idea can get from

research about the environment, what people needed and from an existing product.

When getting an idea, have some questions to ask self-such as who the characters are?

What is this project for? Who the audience? and What is the final product? After

getting the idea, go to script. The script is the formal written form of the final story. It

has written within it the basic character movement, environment and actions. The

script must describe what will be seen and heard onscreen for different production

teams to know what will be created. After the script is a storyboard. Storyboard is the

visual story form of the script. Storyboard is the first visual representation of the

entire story. Storyboards can be anything from quickly thumbnail sketches to a fully

developed idea. Lastly in this stage is design. In the design component, the final look

of the project is decided. This included the character design, prop design, and

environment design. The most important aspects are that the mood and concept must

be fully realized.

Secondly is production. In this stage that includes modeling, texturing, rigging, and

lighting. Modeling is everything that needs to be seen screen has to be modeled

shown Figure 2.2. The developer can now begin modeling them based on the designs.

After modeling is texturing. Texturing is to make model's surface look like it does in

the concept art or to match its real-world counterpart that shown Figure 2.3. Based on

the findings of the research on VR in the light of UI and UX, the developer must

sketch a design interface to meet the needs of the findings. Rigging is the component

Page 18: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

8

which a control rig is put into a geometric object so the animators can move that

object that shown Figure 2.3. Once the modes have been completed and the armature

is needed to be placed in the character's body and face. This is so that during

animating, the developer can move the character expressions freely and easily. Lastly

is lighting. Lighting is the painting component of the production stage. In this stage,

created the lighting and mood for a scene.

FIGURE 2.2 MODELLING

FIGURE 2.3 TEXTURING

Page 19: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

9

FIGURE 2.4 RIGGING

Lastly is post production. In this stage include programming and final output. Afterfinish production in the Autodesk Maya 3D, move to Unity. In unity to make virtualreality view. Programming is the implementation of logic to facilitate specifiedcomputing operations and functionality. In this development using C# language.During this process, the developer must begin programming and coding the desiredoutcome of the project based on the findings during the research phase. After thefinish is final output. Build this application on the android phone and test thisapplication functional or not. The developer has to present their product. The productis ready to be presented and launched for a large audience to use this application inthe play store.

Page 20: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

10

2.3 VR Platform

VR platform is where you can test to use VR experience. These have

SDKs are the building blocks to create VR experiences such as mobile apps,

marketing experiences, and more. VR SDKs offer the tools to perform

functions such as adding, cloning, and moving 3D objects. Example VR

platform is:

2.3.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.5 HTC Vive

Page 21: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

11

2.3.2 PlayStation VR / PSVR dev kit

The PlayStation VR, known by the codename 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.6 Play Station VR

Page 22: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

12

2.3.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.7 Oculus

Page 23: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

13

2.3.4 Samsung Gear VR / Oculus Mobile SDK

The Samsung Gear VR is a mobile virtual reality headset developed by SamsungElectronics, in collaboration with Oculus, and manufactured by Samsung. The devicecan be calibrated using the wheel at the top of the headset. A trackpad is located onthe right of the device and back button is located just above it. Volume can beadjusted through the volume rockers also found on the right-hand side. Some of themajor goals Samsung set for this project regarding hardware were: that their headsetcould support MTP (Motion to Photon) latency less than 20 MS. Softwaredevelopment kits for developing is Oculus Mobile SDK.

Figure 2.8 Samsung Gear VR

Page 24: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

14

2.3.5 Google Cardboard / Google VR SDK

Google Cardboard 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.9 Google Cardboard

Page 25: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

15

2.3.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 Sony Play Oculus Samsung Google

Vive Station VR Rift Gear VR Cardboard

Headset type PC Console PC Mobile Mobile

Connection HDMI, HDMI, USB USB 2.0,

USB 3.0 None

USB 3.0 2.0 USB 3.0

Resolution Native to Native to

080×1200 960×1080 1080×1200

phone phone

Sensors Motion,

Motion, Motion,

camera,

external external

external Motion Motion

visual visual

motion

positioning positioning

tracking

Page 26: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

16

Controls Dual Shock Oculus Handheld

HTC Vive

4, Touch, remote, Handheld

motion

PlayStation Xbox One touchpad remote

controllers

Move gamepad on headset

Software PlayStation Android,

Steam VR Oculus Android

platform 4 iOS

Table 2.1 Comparison VR Platform

Page 27: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

17

2.4 Related Product

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

product applications. Example existing product is :

2.4.1 VR Ocean Aquarium 3D

Figure 2.11 Screenshot of the interface

In this application, the user can explore a new world by diving into the deep

ocean and have an enjoyable journey to see different fish species. Scuba

Diving experience will be great with the VR Ocean Aquarium 3D. The user

can learn the names of the fish and look them closely. When the user

approaches a fish, the movement will be slower so that user can closely

examine the details. Just look at another place to move again. The user can use

the magnet sensor to stop and examine the place around there. This application

release on 2017 and user can get free on play store.

Page 28: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

18

2.4.2 VR Abyss

Figure 2.12 Screenshot of the interface

Take a journey under the sea to discover what lies beneath our virtual

aquarium. About this application is an interesting aquarium app with

information about the fish and creatures you see. Move your device around to

view the reef and then listen to the narration describing what you see. With

fish, sharks, dolphins, and coral, VR Abyss gives you a unique experience just

dive straight into bus dive straight into the abyss and see what the deep ocean

depth have to offer.

Page 29: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

19

2.4.3 VR Abyss

Figure 2.13 Screenshot of the interface

This application, take a deep breath and escape into the calming Aquarium VRexperience for mobile VR headsets. Interact with a wide variety of exotic fishincluding the popular shark. Experience breathtaking underwater décor as you engagewith the fish and watch them interact with one another in Virtual Reality (VR).Compatible with all Google Cardboard devices.

Page 30: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

20

2.5 Summary of Chapter

This chapter discusses the information about the study on the VR

Platform to find the best software and technique that use to develop this

application and study about existing product VR. This study is more to focus

on development and guide to the successful project, to come out with the new

application will benefit all user. Next chapter will discuss the methodology to

develop the application.

Page 31: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

21

CHAPTER III

METHODLOGOLY

The methodology is one of the most important chapters in this entire project.It outlines why you chosea particular methodology in order to solve the problem and secondly explaining the plan to collect andanalyses data moreover, the methodology should aim to provide the project with the information toallow it to come to some conclusion.

3.1 Introduction

In this chapter is about process of developing project from the beginning until the end

of this project. The flow of the project will discuss briefly to give more understanding of

design and develop of this application. There are many methods that can be used for

developing this project. The methodology that can be decide in this project is ADDIE. In this

methodology is based on phases for each development process. Every phase of this

methodology will be explained.

3.2 Addie Methodology

In this project, the most suitable methodology that can be used to develop mobile VR application

is ADDIE. The ADDIE model is an iterative instructional design process, where the results of the

formative evaluation of each phase may lead the instructional designer back to any previous phase.

This model is of the most common models used in the instructional design field a guide to producing

an effective design. The ADDIE Model have five steps processes such as analysis, design,

development, implementation, and evaluate as illustrated is below.

Page 32: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

22

The ADDIE Model

Figure 3.1 ADDIE MODE

Page 33: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

23

3.2.1 Analysis Phases

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 ADDIE model in the design of courses and teaching

materials for on-line teaching and learning. At this stage, it is necessary to create the

“overall picture” of the instructional design integrity . The content of Mobile VR

application can have referred to Figure 3.2. The mobile VR is developed focus on

marine park fish learning content. The analysis is also carried out by doing market

survey on existing product. So, the weakness of the existing product can be identified.

The comparison of existing product as depicted in Table 3.1. The target audience of

this application is being analysis and children age five (5) to fifty-five (55) years old

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

determination of the content and the design of this application. VR application use all

model using 3D object and Virtual Reality technology to develop this application.

PLAY LET’SLET’SLEARN EXPLORE

Marine Park(VR) CREDIT LEARN EXPLORE

ABOUT FISH MARINE VR

HELP

Figure 3.2 Content of Mobile VR

Page 34: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

24

Table 3.1 Existing Product

Existing Product Platform Advantage Disadvantage

VR Abyss Android,-User can choosethe view modes

- Shutdown whentrying to open vrmode.

iOS -like in real ocean.-Limited to how farcan go

-Interactive andUser-friendly -Lack fish

VR Ocean Aquarium iOS -User can choose-Small textinformation

Android

their view modes.

-The fish arebeautiful

-Some animals arewrong size

-Have sound -Less attractive

effect. environment design.

Sea World VR2IOS

Android

-Environmentdesign very nice.

-Colorful

-User can choosethere view modes

-Some fish have wrongsize

-no have informationabout fish

-it's hard to move

Page 35: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

25

3.2.2 Design Phases

In the design phase, the focus is on learning objectives, content, subject matter

analysis, exercise, lesson planning, assessment instruments used and media selection.

In these phases, storyboard and prototype making. Storyboarding is also a part of

multimedia design process. The storyboard can show the look and feel of the

application that will be developed. Some of the storyboards can be seen in Figure 3.3

until Figure 3.6. A prototype is draft to representation built to test idea for layout. A

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

Figure 3.7 until Figure 3.1

Figure 3.3 Storyboard Page Start and Main Menu

CODE : 01 CODE : 02

TITLE : Start Page TITLE : Main Menu

Description : A : Graphic B: Menu Description : (A) Button quit (B) Button

Play (C) Button Help (D) Button Credit

(E)Button

A

B

A

B

C D E

Page 36: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

26

Figure 3.4 Storyboard Page Play and VR View

Figure 3.5 Storyboard Page Let’s Learn and Credit

CODE : 03 CODE : 04

TITLE : Play TITLE : Play View

Description : A : Button Home C: Quit

B : Text D: Animation

Description : A : Button Home C: Quit

B : Text D: Animation

E : Graphic

CODE : 05 CODE : 06

TITLE : Let Learn TITLE : Credit

Description : A : Button Home C: Quit

B : Text D: Animation

Description : A : Button Home C: Quit

B : Text D: Graphic

A

BB

D

E

C

D

A C

A

BB D

C

D

A C

Page 37: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

27

Figure 3.6 Storyboard Page Help

Figure 3.7 Prototype Start Page

CODE : 07 CODE : 08

TITLE : Let’s Explore TITLE : Help

Description : A : Button Home C: Quit

B : Text D: Animation

Description : A : Button Home C: Quit

B : Text D: Graphic

A

B

B

D

C

D

A C

Page 38: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

28

Figure 3.8 Prototype Page Main Menu

Figure 3.9 Prototype Let’s learn fish

Figure 3.10 Prototype VR View

Page 39: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

29

Figure 3.11 Prototype Page Credit

Figure 3.11 Prototype Page Help

Page 40: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

30

3.2.3 Development Phases

The next phase is development. The development phase involves the transition

from the “contemplative” to “physical” implementation (Sinteza, 2017). This phase is

the process of developing the entire design and is used as a guide to the authoring

process. Multimedia applications should be used based on the designs established

through the design phase. The development of this design refers to the process of

software development using a variety of existing applications such as programming

applications, authoring, graphics, video, animation and so on. At this stage, the final

structure and content of the course are created. All of the components of multimedia

are prepared during this phase. In this phase have three stages include pre-production,

production and post production.

Idea Story Storyboard Animatic Design

Layout Modelling Texturing Rigging Animation Lighting

Rendering

Composition Color Correction Final Output

Figure 3.8 Shows the 3D Production Pipeline

PRE-PRODUCTION

PRE-PRODUCTION

PRE-PRODUCTION

Page 41: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

31

3.2.4 Implementation Phases

The implementation phase represents the first test of making the entire course and is therefore

recommended to divide this phase conditionally into two parts: a test implementation phase

and final implementation phase . The implementation phase is a testing phase. Completed

applications will be tested by the supervisor. Testing is aimed at finding the weaknesses and

detecting any unobserved errors during the authoring process. During the test, the supervisor

freely commented and criticized for improvements to be made and any errors can be

corrected. In this phase, test run project and user test run. Test run project is when the

developer test runs the project by herself. This is to ensure that the project can be used and is

running accordingly. User test run is before presenting the final product a demo version is given

to alpha and beta testers to ensure that the project is meeting their criteria. Criticisms and

constructive feedback are taken into account to be implemented later on

1) Testing run project

I will test run the project. While testing this project i have to make sure that the project is

successfully run correspondingly.

2) User testing run project

After testing the project, I have to test it to the user.User will give their feedback before the final

product can be a launch to the bigger users.The criticisms and suggestion are taken and will be

implemented later on

Page 42: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

32

3.2.5 Evaluate Phases

This phase measures the effectiveness and efficiency of the instruction. This

assessment involves the process of obtaining feedback from users on the content,

graphics, audio, animation, interfaces and so forth contained in the application. This

process is carried out through the methods of purchase, testing, questionnaire,

interviews and so on to ensure the application will be in harmony with the needs of

consumers. In this stage has debug and final product. In debug, the first one is identify

error. After the test run had been done, errors that were found by the users must be

identified. Glitches and mistakes must be brought to light for the developer to

improve the project while also implementing the feedback given by the alpha and beta

testers. Next is find solution. Once errors have been identified, solutions to solve them

must be done. In final product, the developer has to present their product. Product is

ready to be presented and launched for a large audience to use this application in play

store.

1) Identifying Error

. When the project is done for the testing phase ,an error that appears should be

identified, what a problem that occurs during the implementation . Example a bug and

accuracy should be taken wisely for developer to ensure the project efficiency.

2) Find the Solution

-after done identifying the problem the developer has find the solution to improve the

project.

Page 43: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

33

3.3 Framework

Figure 3.14 shows an overview of flows of the project looks like. The

framework show user has to apply google cardboard when using this

application. When the user uses google cardboard, google cardboard connect

with the application. To develop this application, needed Autodesk Maya 3D

and unity. After finish develops this application, the application gives VR

view to google cardboard and google cardboard give immersive view to a

user.

Figure 3.14 Framework

3.4 Hardware and Software Requirement

Software and hardware are important in the making this project as it is

needed for the application development. The section will show the list of all

software and hardware requirement that involved in the development process.

Page 44: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

34

3.4.1 Hardware Requirement

Hardware is the important in ensuring the research of this project is success.

Each hardware has its own function in order to do this research. The hardware

to develop this project is shown as below.

Table 3.2 List of hardware requirement

HARDWARE USE FIGURE

Laptop To create a sketches for

the character,

background and create

script or document

related to application

also for create a coding

and make a 3d

modelling

Personal Computer Used to code render and

create the overall

interface a PC is needed

as project is heavy and

requires strong rendering

Page 45: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

35

power that could provide

with laptop.

Headphone Used for development

and test run of the project

as well used for finished

project to amplify

immersion

Google Cardboard Used for test run and

overall final product

Mobile Phone To run and test the

application

Mouse Mouse is used during a

coding and 3D modelling

process

3.4.2 Software Requirement

Page 46: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

36

To develop this project, it can be many choices to choose the best

software, this is because the selection of software depends on requirement

needed in this project. The software to develop this project is shown as below:

Table 3.3 List of software requirement

SOFTWARE USE FIGURE

Unity Used to Create the virtualreality app and overallproject and animated 3DCharacter.It is veryeffective while rendering2d scene in this era visualtreat ,unity can very wellbe use to used for 3D thequality also relatively goodcompared to otherapplication.

Maya Used to create 3d models.Autodesk Maya is simplyone of the best, mostrobust and most versatilesoftware available.

Adobe After Effect To edit or fine tune SFX ifrequired. After effect tohelp create all cool extrasthat make your motiongraphic shine.

Page 47: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

37

Adobe Illustrator To design interface , posterand logo application.Adobe Illustrator is used tocreate a variety of digitaland printed images,including cartoons,chartsdiagrams, graphs andillustrations.Illustratorallows a user to import aphotograph and use it as aguide to trace an object inthe photograph and easy touse from other application

Adobe Photoshop Used to create sketches ofbackground , character andposters.Adobe photoshopis critical tool fordesigners,web developers,graphic artists,photographers, imageediting, retouching,creating imagecompositions and addingaffect . Digital or scannedimages can be edited. Itseasy to handling and used.

Page 48: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

38

3.5.1 3D Animation Production

In its simplest form, 3D animation is the process of creating three-dimensionalmoving images in a digital environment. 3D models within a 3D software arecarefully manipulated to make them look like real moving objects. Just like traditionalanimation, the goal of 3D animation is to make it appear on the screen as if the imagesare actually moving when in fact, they are simply a series of consecutive imageswhich are shown on a very fast sequence. The same principle is used in 2D or stopsanimation. The only difference between 2D and 3D animation is that in 2D, imagesare hand-drawn while the pictures are computer-generated in 3D. Now, there are theregeneral phases involved in the making of 3D animation, modelling, texturing, rigging,animation and rendering. In this case, I use Autodesk Maya as my platform formodelling the 3d model. For Animation, I will first convert all the 3D Maya files toFilmbox (fbx) format file which Unity can read it.

i) Modelling

Creating a 3D character is a greater undertaking than people often realize. Making 3dModel first you have to come up with the 3D model sheet. The 3D model sheet is asingle painting or picture of the character in a various angle of pose such as front, sideand top/bottom as a reference for your model. Depends on what you want to use asme I’m using pictures as my 3D model sheet. We can start from a cube and nextcrafted polygon-by-polygon per the provided reference pictures. If the character orobject is symmetrical, we can use mirroring tools to create a perfectly symmetricalmodel. The result shows as below.

Figure 3.6: Fish modelling

Page 49: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

39

Along with character, we have to also create the others supporting model formaking the environment more realistic. The result show as below

Figure 3.7: 3D Models that included in marine park

Page 50: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

40

ii) Texturing

In order to give character features like skin, clothing and hair color, texture maps areessential. But before these maps can be created and applied, the modeller needs tounwrap the UVs of the model. UV, or UVW, represent the different axes where the3D model exists. UVW represent the XYZ axes respectively (Autodesk maya, 2018).We will choose edges on the model, mark them as seams and have the program placethe cut-out shapes onto a UV layout. The UV layout can be exported from theprogram into a painting program like Photoshop and a 2D artist can paint the texturesthere. The finished textures will be brought back to the 3D program and applied to thecharacter model. The result show as below..

Figure 3.8: Character with skin texture

Page 51: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

41

iii) Rigging

3D model by itself is a static mesh which cannot be animated by itself withoutrigging it first. Therefore, creating a system for moving its limbs is essential. The taskof creating a system for moving a character by creating bones and joints is referred toas a rigging while the structure itself can be referred to as a rig, armature or skeleton(Slick 3, 2016). The first step to creating an internal digital skeleton, you must firstcreate a relationship between the mesh and the skeleton (known as skinning,enveloping or binding). You can use the following methods to animate a skeleton:forward kinematics (FK), inverse kinematics (IK), or IK/FK blending. Next to addinga set of controls that the animator can use to push and pull the character around.

Figure 3.9: Character that has been rigged

Page 52: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

42

iv) 3D Animation

The animation is an optical illusion produced when a rapid succession of imagesenters the eye. The brain processes them as though it is seeing movement. Twelveprinciples of animation were devised in 1981 to assist in creating believablemovement. So, starting by exporting the character that has been created in Maya saveit as a file (fbx, cd3, etc.). Next, import it into the folder in Unity project. After thatsetup rig by right click the character and choose humanoid. Add the animatorcontroller and start making an animation. The result shows as below.

Page 53: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

43

3.6 Technique/Method

Technique is a systematic procedure, formula, or routine by which a

task is accomplished. Have many techniques that can use to development

virtual reality. The gaze input interaction technique is suitable to be develop

this application. Gaze input interaction not use controller to play the

application. If using controller less interaction method for google cardboard

virtual reality. Use just play this application wear the google cardboard and

use pointer to interaction with application. Example technique gaze input

interaction shown in figure 3.15.

Figure 3. 15 Gaze input interaction

Page 54: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

44

3.7 Summary of Chapter

This chapter discussed the methodology used is to complete this

project. The ADDIE methodology is used because every phase during the

application development follows the project methodology that is mentioned in

this chapter. The hardware and software requirement also had been discussed.

3.8 References

[1] ADDIE. American International Journal of Contemporary Research ,

1.

[2] DOI, K. (24 February, 2016). App Store Preview. Retrieved from Rice

Fish AR/VR :

https://itunes.apple.com/us/app/rice-fish-ar-vr/id1077413244?mt=8

[3] (November, 2015). Google Play. Retrieved from Aquarium VR:

https://play.google.com/store/apps/details?id=com.company.aquarium

vr&hl=e n

[4] Categories of Gaze interaction events. Defining Gaze Interaction

Events, 2.

Page 55: MARINEPARKVIRTUALREALITY AHMADSUFIBINWISLAN ... · Headsettype PC Console PC Mobile Mobile Connection HDMI, HDMI,USB USB2.0, USB3.0 None USB3.0 2.0 USB3.0 Resolution Nativeto Nativeto

45

[5] ADDIE Model: Instructional Design. Retrieved

from The ADDIE Model:

https://educationaltechnology.net/the-addie-model-instructional-design

/

[6] Using the ADDIE Model. Instructional System Design (ISD), 2.

[7] Evaluation of a Monocular Eye Tracking Set-Up. Towards Gaze

Interaction in Immersive Virtual Reality, 4.

[8] Defination Flowchart. Retrieved from Flowchart:

https://whatis.techtarget.com/definition/flowchart

[9] ADDIE MODEL FOR DEVELOPMENT OF E-COURSES.

INFORMATION TECHNOLOGY IN EDUCATION, 244.