IMPLEMENTASI VIRTUAL REALITY UNTUK VISUALISASI PENGGUNAAN RUANG BACA TEKNIK INFORMATIKA (RBTC) BERBASIS WEB DENGAN MENGGUNAKAN WebVR

  TUGAS AKHIR – KI141502

  

IMPLEMENTASI VIRTUAL REALITY UNTUK

  

VISUALISASI PENGGUNAAN RUANG BACA

TEKNIK INFORMATIKA (RBTC) BERBASIS WEB

DENGAN MENGGUNAKAN WebVR

  TUGAS AKHIR – KI141502

  

IMPLEMENTASI VIRTUAL REALITY UNTUK

  

VISUALISASI PENGGUNAAN RUANG BACA

TEKNIK INFORMATIKA (RBTC) BERBASIS WEB

DENGAN MENGGUNAKAN WebVR

  

[Halaman ini sengaja dikosongkan]

  ssasaddaasdasdssad UNDERGRADUATE THESIS – KI141502

  VIRTUAL REALITY

   IMPLEMENTATION FOR

RUANG BACA TEKNIK INFORMATIKA (RBTC)

USER VISUALIZATION USING WebVR WEB

  

[Halaman ini sengaja dikosongkan]

  

LEMBAR PENGESAHAN

IMPLEMENTASI VIRTUAL REALITY UNTUK

  INFORMATIKA (RBTC) BERBASIS WEB DENGAN MENGGUNAKAN WebVR

TUGAS AKHIR

  Diajukan Guna Memenuhi Salah Satu Syarat Memperoleh Gelar Sarjana Komputer pada

  Rumpun Mata Kuliah Interaksi Grafika dan Seni Program Studi S-1 Jurusan Teknik Informatika

  Fakultas Teknologi Informasi Institut Teknologi Sepuluh Nopember

  

JUNI 2017

  

[Halaman ini sengaja dikosongkan]

IMPLEMENTASI VIRTUAL REALITY UNTUK

  

INFORMATIKA (RBTC) BERBASIS WEB DENGAN

MENGGUNAKAN WebVR

Nama : Yohana Desy Permatasari NRP : 51131000038 Departemen : Teknik Informatika Fakultas Teknologi Informasi ITS

Dosen Pembimbing 1 : Dr. Darlis Herumurti, S.Kom., M.Kom.

Dosen Pembimbing 2 : Ridho Rahman H, S.Kom., M.Sc.

  

ABSTRAK

Perkembangan teknologi dibidang realitas virtual

berkembang dengan sangat cepat. Realitas virtual banyak

  Hasil pengujian terhadap website menujukan bahwa

website berhasil mensimulasikan penggunaan Ruang Baca

Teknik Informatika dalam bentuk realitas virtual berbasis web.

Selain itu, hasil kuisioner menujukan bahwa website mudah dan

nyaman untuk digunakan serta membantu pengguna untuk

melakukan interaksi secara realitas virtual pada penggunaan

Ruang Baca Teknik Informatika

Kata Kunci: Realitas Virtual, WebVR, A-frame, Ruang Baca,

Teknik Informatika

  

VIRTUAL REALITY IMPLEMENTATION FOR RUANG

BACA TEKNIK INFORMATIKA (RBTC) USER

  

VISUALIZATION USING WebVR WEB BASED

Name : Yohana Desy Permatasari NRP : 5113100038 Department : Department of Informatics Faculty of Information Technology ITS

Supervisor I : Dr. Darlis Herumurti, S.Kom., M.Kom.

Supervisor II : Ridho Rahman H, S.Kom., M.Sc.

  

ABSTRACT

Technological developments in the field of virtual reality

develop very quickly. Virtual reality is widely used in various

fields and much in demand by users to interact with a computer-

  

convenient to use and helps users to interact in virtual realiy on

Ruang Baca Teknik Informatika.

  

Kata Kunci: Realitas Virtual, WebVR, A-frame, Ruang Baca,

Teknik Informatika

KATA PENGANTAR

  Alhamdulillahirobbil’alamin. Puji syukur kehadirat Allah SWT yang telah memberikan rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan tugas akhir yang berjudul

VIRTUAL REALITY UNTUK

  “IMPLEMENTASI

  

VISUALISASI PENGGUNAAN RUANG BACA TEKNIK

  

INFORMATIKA (RBTC) BERBASIS WEB DENGAN

MENGGUNAKAN WebVR

  ”. Pengerjaan Tugas akhir ini merupakan suatu kesempatan yang sangat baik bagi penulis, karena dengan ini penulis dapat belajar lebih banyak untuk memperdalam dan meningkatkan apa yang telah didapatkan selama menempuh perkuliahan di Teknik Informatika ITS.

  Selesainya tugas akhir ini tidak lepas dari bantuan dan

6. Seluruh teman-teman Teknik Informatika 2013 yang selalu memberikan dukungan untuk menyelesaikan tugas akhir ini.

  7. Seluruh pihak yang tidak bisa disebutkan namanya satu persatu yang telah memberikan kritik dan sarannya kepada penulis sehingga dalam pengerjaan tugas akhir ini menjadi lebih baik.

  Penulis menyadari bahwa tugas akhir ini masih memiliki banyak kekurangan, sehingga dengan kerendahan hati, penulis mengharapkan kritik dan saran dari pembaca untuk perbaikan ke depannya.

  Surabaya, Juni 2017 Penulis

  DAFTAR

  ISI

  LEMBAR PENGESAHAN......................................................... v ABSTRAK ..............................................................................viii ABSTRACT ............................................................................... x KATA PENGANTAR .............................................................. xii DAFTAR ISI ........................................................................... xiv DAFTAR GAMBAR ............................................................. xviii DAFTAR TABEL .................................................................. xxii DAFTAR KODE SUMBER .................................................. xxiv

  BAB I PENDAHULUAN ........................................................... 1

  1.1 Latar Belakang ................................................................. 1

  1.2 Rumusan Masalah ............................................................ 2

  1.3 Batasan Masalah .............................................................. 2

  1.4 Tujuan ............................................................................. 3

  1.5 Manfaat ........................................................................... 3

  1.6 Metodologi ...................................................................... 3

  1.7 Sistematika Penulisan ...................................................... 5

  3.2.1.1 Perancangan Tata Letak Ruang Baca Teknik Informatika ................................................... 16

  3.2.1.2 Perancangan Desain Permodelan 3D............. 18 Perancangan Arsitektur ........................................... 19 Perancangan Alur Penggunaan ................................ 19

  3.2.3.1 Alur Penggunaan pada Perangkat Desktop .... 19

  3.2.3.2 Alur Penggunaan pada Perangkat Mobile ...... 20 Perancangan Basis Data .......................................... 21 Perancangan Antarmuka ......................................... 22

  3.2.5.1 Rancangan Lingkungan Pengembangan WebVR ..................................................................... 22

  3.2.5.2 Rancangan Halaman Utama .......................... 23

  3.2.5.3 Rancangan Halaman Memilih Jenis Buku ...... 24

  3.2.5.4 Rancangan Halaman Menampilkan PDF ........ 25

  BAB IV IMPLEMENTASI ....................................................... 27 Lingkungan Implementasi .............................................. 27 Lingkungan Implementasi Perangkat Keras ............ 27

  5.2.1.1 Pengujian Kontrol Kamera dan Kursor ........... 42

  5.2.1.2 Pengujian Melihat Ruangan RBTC ................. 46

  5.2.1.3 Pengujian Memilih Jenis Buku ....................... 50

  5.2.1.4 Pengujian Menampilkan Buku....................... 52

  5.2.1.5 Pengujian Terhadap Jenis Browser dan Versi Perangkat ..................................................... 54

  Pengujian Aplikasi Terhadap Pengguna .................. 66 Evaluasi ......................................................................... 67

  Evaluasi Pengujian Fungsionalitas .......................... 67 Evaluasi Pengujian Aplikasi Terhadap Pengguna .... 68

  BAB VI KESIMPULAN DAN SARAN ................................... 69 Kesimpulan .................................................................... 69 Saran ............................................................................. 70 DAFTAR PUSTAKA ............................................................... 71 LAMPIRAN A. HASIL KUESIONER ..................................... 73 BIODATA PENULIS .............................................................. 79

  

[Halaman ini sengaja dikosongkan]

  

DAFTAR GAMBAR

  

  

  

  

[Halaman ini sengaja dikosongkan]

  

DAFTAR TABEL

  

  

  

  

  

  

  

[Halaman ini sengaja dikosongkan]

  

DAFTAR KODE SUMBER

  

  

[Halaman ini sengaja dikosongkan]

1 BAB

  I PENDAHULUAN

  Bagian ini akan dijelaskan hal-hal yang menjadi latar belakang, permasalahan yang dihadapi, batasan masalah, tujuan dan manfaat, metodologi dan sistematika penulisan yang digunakan dalam pembuatan tugas akhir ini.

1.1 Latar Belakang

  Perkembangan teknologi berkembang sangat cepat yang salah satunya adalah teknologi 3D yang memberikan warna baru bagi dunia visualisasi komputer. Berbagai produk IT seperti permainan, film animasi, dan simulasi dari 2D menjadi 3D berkembang lebih pesat. Penerapan konsep 3D mulai terhubung dengan teknologi lain dibidang komputer, salah satunya adalah teknologi web. Web menjadi media informasi utama di era modern ini, banyak fitur yang dikembangakan dan salah satunya didukung visualisasi penggunaan Ruang Baca Teknik Informatika (RBTC) berbasis web dengan menggunakan WebVR yang memungkinkan pengguna dapat melihat objek 3D yang visualnya sama seperti objek aslinya. Selain itu, pengguna dapat melakukan interaksi penggunaan Ruang Baca Teknik Informatika (RBTC) yang meliputi aktivitas, yaitu menjelajah ruang baca, memilih buku secara realitas virtual, dan menampilkan buku berupa PDF. Pengguna juga akan disuguhkan tampilan berupa teks, gambar, dan video untuk membantu dalam memberikan informasi. Tugas akhir ini diharapkan dapat diimplementasikan pada website RBTC.

1.2 Rumusan Masalah

  Rumusan masalah yang terdapat pada tugas akhir ini, antara lain adalah:

  1. Bagaimana cara menerapkan framework A-Frame dalam penggunaan Ruang Baca Teknik Informatika (RBTC)?

  1.4 Tujuan

  Tujuan dari pembuatan tugas akhir ini adalah untuk membangun sebuah realitas virtual berbasis web yang merupakan implementasi dari penggunaan Ruang Baca Teknik Informatika (RBTC). Selain itu tugas akhir ini difokuskan untuk mengeksplorasi framework A-frame dan kegunaan realitas virtual itu sendiri.

  1.5 Manfaat

  Tugas akhir ini diharapkan dapat menghasilkan sebuah realitas virtual berbasis web dengan mengimplementasikan

  

framework A-Frame sehingga dapat mensimulasikan sebuah objek

  secara nyata dan mampu membangkitkan suasana 3D yang membuat pengguna seolah-oleh terlibat secara fisik dalam penggunaan Ruang Baca Teknik Informatika (RBTC).

  2. Studi Literatur

  Pada tahap ini dilakukan pengumpulan informasi yang diperlukan dalam pembuatan realitas virtual berbasis web, yaitu proses implementasi realitas virtual berbasis web, pengumpulaan data PDF ruang baca Teknik Informatika, penggunaan framework A-Frame dalam membangun pengalaman realitas virtual, program Blender dalam pembuatan objek 3D, dan penerapan WebVR untuk mengakses konten realitas virtual melalui browser.

  3. Analisis dan Perancangan Sistem

  Pada tahap ini dilakukan analisis dan perancangan terhadap

website yang dibuat dengan menggunakan framework A-frame.

Perancangan sistem dilakukan dalam beberapa tahap yaitu analisis kebutuhan fungsional yang kemudian digambarkan dalam sebuah diagram kasus penggunaan, perancangan model, perancangan arsitektur, perancangan basis data, dan perancangan antarmuka.

  4. Implementasi

  Pengujian

  white-box

  merupakan pengujian untuk memperlihatkan cara kerja dari produk secara rinci sesuai dengan spesifikasinya.

6. Penyusunan Buku Tugas Akhir

  Pada tahap ini dilakukan penyusunan laporan yang menjelaskan dasar teori dan metode yang digunakan dalam tugas akhir ini. Pada tahap ini juga disertakan hasil dari implementasi metode dan algoritma yang telah dibuat.

1.7 Sistematika Penulisan

  Penulisan buku tugas akhir ini bertujuan untuk mendapatkan gambaran pengerjaan tugas akhir dan diharapkan dapat berguna untuk pembaca yang tertarik untuk melakukan pengembangan lebih lanjut. Secara garis besar, buku tugas akhir terdiri atas beberapa bagian seperti berikut ini:

BAB I PENDAHULUAN

  BAB IV IMPLEMENTASI Bab ini membahas implementasi dari desain yang telah

  dibuat pada bab sebelumnya. Bab ini berisi proses implementasi dari setiap kelas pada semua modul.

  BAB V PENGUJIAN DAN EVALUASI Bab ini menjelaskan kemampuan perangkat lunak

  dengan melakukan pengujian kebenaran dan pengujian kinerja dari sistem yang telah dibuat.

  BAB VI KESIMPULAN DAN SARAN Bab ini merupakan bab terakhir yang menyampaikan

  kesimpulan dari hasil uji coba yang dilakukan dan saran untuk pengembangan perangkat lunak ke depannya.

DAFTAR PUSTAKA

  Merupakan daftar referensi yang digunakan dalam tugas

2 BAB

II TINJAUAN PUSTAKA

  Bab ini berisi penjelasan teori-teori yang berkaitan dengan metode yang diajukan pada pengimplementasian perangkat lunak. Penjelasan ini bertujuan untuk memberikan gambaran secara umum terhadap sistem yang dibuat dan berguna sebagai penunjang dalam pengembangan perangkat lunak.

   Virtual reality Virtual reality (VR) atau realitas virtual adalah teknologi

  yang membuat pengguna dapat berinteraksi dengan suatu lingkungan yang disimulasikan oleh komputer (computer

  

simulated environment ), suatu lingkungan sebenarnya yang ditiru

  atau benar-benar suatu lingkungan yang hanya ada dalam imajinasi. Konsep VR mengacu pada sistem prinsip-prinsip, metode dan teknik yang digunakan untuk merancang dan

  . Lingkungan yang digambarkan dapat menyerupai dunia

  arm

  nyata, sebagai contoh, simulasi untuk pilot atau pelatihan pertempuran, atau dapat sangat berbeda dengan kenyataan, seperti di VR game. Dalam praktik, sekarang ini sangat sulit untuk menciptakan pengalaman Realitas maya dengan kejernihan tinggi karena keterbatasan teknis atas daya proses, resolusi citra, dan lebar pita komunikasi. Bagaimanapun, pembatasan itu diharapkan untuk secepatnya diatasi dengan berkembangnya pengolah, pencitraan dan teknologi komunikasi data yang menjadi lebih hemat biaya dan lebih kuat dari waktu ke waktu [2].

   Ruang Baca Teknik Infomatika (RBTC)

  Perpustakaan atau Ruang Baca Teknik Informatika menyediakan berbagai koleksi akademik, seperti buku, majalah, jurnal akademik, laporan kerja praktik, laporan tugas akhir, dan tesis. Jenis layanan ruang baca ini adalah Layanan Sirkulasi serta Layanan Koleksi Tugas Akhir dan Tesis [3]. sekaligus ampuh untuk mengembangkan konten WebVR. Sebagai

  

full open project , A-Frame telah berkembang menjadi salah satu

komunitas VR terbesar dan paling diminati.

  A-Frame berbasis HTML sehingga mudah untuk digunakan. Tidak hanya adegan 3D grafik, A-Frame adalah framework yang menyediakan entitas komponen yang kuat yang menyediakan struktur deklaratif, dapat diperluas, dan mudah digabungkan menjadi three.js.

  A-Frame mendukung sebagian besar VR headset seperti Vive, Rift, Daydream, GearVR, Cardboard, dan bahkan dapat digunakan untuk augmented reality. Meskipun A-Frame mendukung keseluruhan spektrum, A-Frame bertujuan untuk mendefinisikan pengalaman VR yang mendalam dan interaktif dengan pelacakan dan pengendali posisional yang melampaui konten 360°. Tim Mozilla VR saat ini menggunakan A-Frame sebagai fondasi untuk Metaverse-in-progress. [5] atau menekan keyboard. Dalam arti lain Virtual Reality juga

  mouse

  sering disebut sebagai Quick Time Virtual Reality (QTVR) adalah cara untuk melihat gambar seolah-olah kita dalam gambar dan dapat melihat semua jalan [8].

   MySQL

  MySQL merupakan software yang tergolong sebagai DBMS yang bersifat open source. Open

  (Database Mnagement System)

source menyatakan bahwa software ini dilengkap dengan source

code (kode yang dipakai untuk membuat MySQL), selain tentu saja

  bentu executable-nya atau kode yang dapat dijalankan secara langsung dalam sistem operasi dan bisa diperoleh dengan cara mengunduh di internet secara gratis [9].

  MySQL awalnya dibuat oleh perusahaan konsultan bernama TcX yang berlokasi di Swedia. Saat ini pengembangan MySQL berada di bawah naungan perusahaan MySQL AB. Adapun

  software dapat di unduh di situs www.mysql.com

  Blender memiliki ukuran instalasi yang relatif kecil dan dapat diimplementasikan disemua platform komputer. Walaupun sering didistribusikan tanpa adanya dokumentasi yang cukup atau tanpa contoh yang jelas, software ini mengandung beberapa fitur yang hampir sama dengan software modelling terbaru. Beberapa kemampuan dari Blender 27 adalah mendukung keanekaragaman dari bentuk geometri primitif, termasuk polygon yang tak beraturan, fast subdivision, surfaced modeling, kurva bezier,

  metalballs dan lain-lain.

  Didukung dengan keyframed animation tools termasuk

  

kinematic invers, armature (skeleton), shape keys (morphing),

  animasi nonlinier, pemberian bobot pada vertex, pendeteksian , dan partikel sistem dengan

  mesh colution, particle based hair

collution detection . Didukung oleh Phyton scripting untuk

  menciptakan tools baru dan prototyping, game logic, import dan dari format lain seperti OBJ, FBX, DFX dan task

  export

automation . Memiliki kemampuan untuk editing video atau audio

  4. Kamera, Blender menggunakan kamera untuk memberikan pandangan dari kamera untuk objek 3D. Kamera sendiri dapat dianimasikan.

  5. Environment dan Effect adalah proses pemberian background dan efek-efek tambahan yang akan semakin memperindah tampilan 3D yang dibuat. Suatu karya berupa gambar 3D maupun animasi 3D akan lebih indah dan menarik apabila memiliki background dan efek-efek.

  6. Particles adalah suatu fitur dalam Blender yang berfungsi untuk membuat berbagai macam efek tambahan yang sifatnya acak dan banyak, misalkan membuat hujan, salju, pecahan, dan sejenisnya.

7. Animasi, setiap komponen objek, elemen, tekstur, dan efek dalam scene dapat dianimasikan.

  8. Rendering adalah proses pengkalkulasian akhir dari keseluruhan proses dalam pembuatan gambar atau animasi

  3D. Rendering akan mengkalkulasikan seluruh elemen material, pencahayaan, efek, dan lainnya sehingga akan

3 BAB

  III

ANALISIS DAN PERANCANGAN SISTEM

  Bab ini menjelaskan tentang analisis permasalahan dan perancangan dari pengimplementasi realitas virtual berbasis web dalam memvisualisasikan penggunaan Ruang Baca Teknik Informatika. Penjelasan yang akan dilakukan meliputi analisis fitur yang dibutuhkan dari peancangan.

   Analisis

  Tahap analisis dibagi menjadi beberapa bagian antara lain analisis permasalahan, analisis kebutuhan, deskripsi umum aplikasi, dan kasus penggunaan.

   Analisis Permasalahan

  Permasalahan yang diangkat pada tugas akhir ini adalah WebVR yang akan dibuat merupakan website yang menampilkan Ruang Baca Teknik Informatika dimana pengguna dapat melihat objek 3D yang visualnya seperti objek aslinya, melakukan eksplorasi ruang baca, dan interaksi pada penggunaan ruang baca. Pengguna juga akan disuguhkan tampilan berupa teks, gambar dan video untuk membantu dalam memberikan informasi.

  Diharapkan dengan adanya aplikasi ini dapat memberi suasana baru dalam penggunaan RBTC dan dapat diimplementasikan pada website RBTC yang telah ada.

   Analisis Kebutuhan

  Kebutuhan utama dalam WebVR ini adalah pengguna dapat melakukan beberapa interaksi secara virtual pada objek- objek tertentu untuk mengimplementasikan penggunaan ruang baca teknik informatika. Kebutuhan fungsional dapat dilihat pada

   Deskripsi Umum Aplikasi

  Pada tugas akhir ini dibuat sebuah realitas virtual berbasis web untuk mengimplementasikan penggunaan Ruang Baca Teknik Informatika dengan menggunakan framewoek A-frame, WebVR ini memiliki fitur dimana pengguna dapat melakukan interaksi secara realitas virtual. Pada interaksinya pengguna dapat mengeksplorasi ruang baca, melakukan pemilihan buku berdasarkan jenis secara realitas virtual, dan menampilkan buku berupa PDF. Pengguna juga akan disuguhkan tampilan berupa teks, gambar dan video untuk membantu dalam memberikan informasi.

   Kasus Penggunaan

  Berdasarkan analisis pada kebutuhan fungsional, dibuatlah spesifikasi kasus penggunaan. Kasus penggunaan dapat dilihat pada diagram

   Perancangan Aplikasi

  Tahap perancangan dibagi menjadi beberapa bagian antara lain perancangan model, perancangan arsitektur, perancangan alur penggunaan, perancangan basis data, dan perancangan antarmuka.

   Perancangan Model

  Perancangan model pada website ini dibuat dari program Blender, object yang dibuat merupakan replika dari Ruang Baca Teknik Informatika. Rancangan model akan ditampilkan pada subbab berikut.

3.2.1.1 Perancangan Tata Letak Ruang Baca Teknik Informatika

  Terdapat beberapa model yang digunakan, perancangan objek tersebut dapat dilihat padayang menjelaskan

  

Tabel 3-3 Objek untuk Berinteraksi

Rak id Nama Objek Keterangan

  1 Data Mining Rak buku yang berisi jenis PDF data mining.

  2 Desain Rak buku yang berisi jenis PDF desain.

  3 Jaringan Rak buku yang berisi jenis PDF jaringan.

  4 Pengembangan Game

  Rak buku yang berisi jenis PDF pengembangan game.

  5 Artikel Islami Rak buku yang berisi jenis PDF artikel islami.

  6 Virtual Reality dan Augmentasi Reality

  Rak buku yang berisi jenis PDF realitas virtual dan augmentasi.

  Algoritma dan Rak buku yang berisi jenis

  

Tabel 3-4 Objek Tambahan

Nama Objek Keterangan Rak Buku Terdapat 4 objek rak buku.

  Tumbuhan Terdapat 3 objek tumbuhan hias. Meja Reservasi Terdapat 1 objek meja reservasi.

  Televisi Terdapat 1 objek televisi yang menampilkan video profil Jurusan Teknik Informatika.

  Meja Komputer Terdapat 2 objek meja komputer. Meja Belajar Terdapat 2 objek meja belajar. Kursi Terdapat 4 objek kursi. Lemari Penyimpanan Terdapat 1 objek lemari penyimpanan.

3.2.1.2 Perancangan Desain Permodelan 3D

   Perancangan Arsitektur

  Arsitektur umum pada website ini diperlukan web

  

service untuk mendukung dalam penyimpanan atau pengiriman

  data baik lokal maupun antar perangkat. Untuk membuat aplikasi bebasis WebVR digunakan framework bernama A-Frame, sebuah teknologi dari Mozilla yang memungkinkan pengembang secara cepat merancang konten VR diweb. Arsitektur secara umum website dapat dilihat pada

  3.2.3.1.1 Alur Kontrol pada Kamera dan Kursor pada Desktop

  Pada kasus penggunaan ini, menjelaskan kontrol pada kamera dan kursor dengan cara mengarahkan kursor menggunakan mouse, untuk pepindahan gunakan keyboard dan untuk melakukan interaksi arahkan kursor

  (WASD/arrow), pada objek lalu memilih dengan cara klik objek.

  3.2.3.1.2 Alur Membaca Buku pada Desktop

  Pada kasus penggunaan membaca buku, buku ditampilkan pada browser dalam bentuk PDF sehingga tampilan tidak lagi dalam bentuk realitas virtual.

3.2.3.2 Alur Penggunaan pada Perangkat Mobile

  cukup dengan memandang objek tersebut sehingga suatu event akan terjadi.

3.2.3.2.2 Alur Membaca Buku pada Perangkat Mobile

  Pada kasus penggunaan ini, proses membaca buku dilakukan dengan cara mengunduh dalam berkas dalam bentuk PDF sehingga pengguna bisa membaca PDF di perangkat mobile menggunakan aplikasi pembaca PDF. Pada kasus ini, tampilan tidak lagi dalam bentuk realitas virtual.

   Perancangan Basis Data

  Perancangan basis data digunakan untuk menyusun struktur sistem pada tugas akhir ini menggunakan Database MySql sebagai media penyimpanan data. Data yang disimpan adalah data dari genre buku dan nama dari buku, data ini disimpan dalam dua table. Desain basis data tersebut dapat dilihat b.

  “nama_buku” merupakan nama dari buku atau PDF.

  c.

  “rak_id” merupakan nilai unik untuk masing-masing data rak.

  d.

  “lokasi_file” menujukan dimana lokasi buku tersebut disimpan.

  e.

  “nama_rak” merupakan nama dari rak yang menujukan atau jenis buku tersebut.

  genre Perancangan Antarmuka

  Perancangan antarmuka pengguna berisi rancangan tampilan dari website. Tampilan dirancang agar memudahkan pengguna untuk menjalankan website dan memberikan kesan realitas virtual.

3.2.5.1 Rancangan Lingkungan Pengembangan WebVR

3.2.5.2 Rancangan Halaman Utama

  Halaman ini merupakan halaman utama dimana pengguna dapat melakukan eksplorasi di dalam Ruang Baca Teknik Informatika dan berinteraksi dengan objek-objek 3D. Rancangan halaman utama tersebut dapat dilihat pada

  

Gambar 3-10 Rancangan Halaman Utama (Kiri)

3.2.5.3 Rancangan Halaman Memilih Jenis Buku

  Halaman ini merupakan halaman tampilan realitas virtual dimana pengguna akan memilih jenis buku atau PDF yang akan

3.2.5.4 Rancangan Halaman Menampilkan PDF

  Halaman ini merupakan halaman yang menampilkan isi dari PDF. Rancangan halaman menampilkan PDF dapat dilihat pada

  

[Halaman ini sengaja dikosongkan]

4 BAB

IV IMPLEMENTASI

  Pada bab ini dijelaskan mengenai implementasi yang dilakukan berdasarkan rancangan yang telah dijabarkan pada bab sebelumnya.

   Lingkungan Implementasi

  Lingkungan implementasi merupakan lingkungan tempat akan dibangun. Lingkungan implementasi dibagi

  website

  menjadi dua, yaitu lingkungan implementasi berupa perangkat keras dan lingkungan implementasi berupa perangkat lunak.

   Lingkungan Implementasi Perangkat Keras

  Sepesifikasi perangkat keras yang digunakan dalam pengembangan website ini adalah komputer dengan spesifikasi

   Implementasi

  Tahap implementasi yang dilakukan meliputi implementasi basis data, implementasi alur penggunaan, dan implementasi antarmuka.

   Implementasi Basis Data

  Pada tahap ini dijelaskan implementasi dari desain basis data yang telah dibuat. Implementasi dapat dilihat pada

4.2.2.1 Implementasi Alur Kontrol pada Kamera dan Kursor

  Pada tahap ini, dijelaskan implementasi dari alur kontrol pada kamera dan kursor. Implementasi kontrol pada kamera dan kursor digunakan untuk melihat arah sekitar, melakukan perpindahan, dan memilih sebuah objek.

  Tahapan awal untuk memanggil fungsi kamera adalah dengan memasukkan entitas melalui fungsi camera. Kamera menentukan setiap hal yang pengguna lihat, sedangkan cursor adalah fungsi memanggil sebuah kursor yang memungkinkan pengguna untuk mengklik dan berinterkasi pada objek. Untuk mengatur posisi kamera digunakan fungsi position dan height untuk mengatur tinggi pandangan kamera.

  Dalam pengaturan kamera diperlukan universal-control sebagai kontrol keyboard dan untuk mengatur perecapatan atau merupakan tipe perpindahan dengan cara kamera berpindah ke posisi entity. Contoh implementasi untuk melakukan pepindahan kamera dapat dilihat pada

  1. <a-obj-

model src= "#arrowdesainkiri" mtl= "#arrowdesainkiri-

mtl" travel-node= "transition: move" position= "-

9.9 0 5.725" ></a-obj-model>

  

Kode Sumber 4.2 Implementasi Melakukan Perpindahan Kamera

  Proses memilih sebuah objek dengan menggunakan Afame Hyperlink, yaitu menambahkan atribut href pada objek untuk mengubah objek menjadi seperti elemen link dan ketika di klik komponen href akan menampilkan event didalam

  link objek.

  Contoh implementasi dalam memilih sebuah objek dapat dilihat pada

  1. <?php

2. $connection = mysql_connect( "localhost" , "ro

ot" , "" );

  3. $db = mysql_select_db( "ta" , $connection);

4. $query = mysql_query( "select * from buku whe

re rak_id=" .$_GET[ 'rak_id' ], $connection);

  5. $y=2.5; _while

6. ($row = mysql_fetch_array($query)) {

7. echo "<a- entity href=\"{$row['lokasi_file']}.pdf\" mixin=\"ma

rker\" position=\"-1 {$y} 0.01\"></a-entity>" ;

  8. echo "<a- entity href=\"{$row['lokasi_file']}.pdf\" position=\ "- 1 {$y} 0\" text=\"width: 2; color: white;value:{$row ['nama_buku']}\" > </a-entity> ";

  9. $y=$y-0.5; 10. } 11. ?> 12. <?php 13. mysql_close($connection);

  1. <a-gradient- sky material= "shader: gradient; topColor: 46 144 201

; bottomColor: 182 216 236;" ></a-gradient-sky>

  Kode Sumber 4.5 Implementasi Latar Belakang

Lingkungan Pengembangan WebVR

  1. <a- entity light= "type: ambient; color: #FFFFFF intensit y: 5" ></a-entity>

  

Kode Sumber 4.6 Implementasi Penggunaan Pencahayaan

4.2.3.2 Implementasi Halaman Utama

  Halaman utama adalah halaman yang dilihat pengguna pertama kali ketika membuka website. Halaman ini menampilkan visualisasi dari Ruang Baca Teknik Informatika dimana pengguna dapat melakukan interaksi pemilihan jenis

  

Gambar 4-4 Implementasi Halaman Utama (Kiri)

4.2.3.2.1 Implementasi Pembuatan Objek dan Material

  Untuk membuat sebuah asset diperlukan sebuah PNG. Terdapat berbagai objek yang dibuat yaitu, dinding, lantai, rak buku, meja, kursi, komputer, tangga, dan ubin.

  

Gambar 4-5 Contoh Implementasi Pembuatan Objek Ruang Baca

  Gambar 4-7 Proses UV Mapping Ruang Baca

4.2.3.2.2 Implementasi Menampilkan Objek

  Pada bagian ini dijelaskan implementasi menampilkan objek yang terdiri dari 4 jenis yaitu objek dan material, teks, gambar, dan video.

  4.2.3.2.2.1 Implementasi Menampilkan Objek dan Material

  Untuk memuat model .OBJ dengan menunjuk asset yang menentukan letak file .OBJ dan .MTL berada. Berikut contoh pemanggilan model .OBJ dan .MTL yang dapat dijelaskan pada 1.

  <a-scene> 2.

  3.

  <a-assets>

  

Gambar 4-10 Implementasi Menampilkan Objek dan Material

4.2.3.2.2.2

  

Implementasi Menampilkan Teks

  4.2.3.2.2.3 Implementasi Menampilkan Gambar

  Pada tahap ini dijelaskan implementasi menampilkan gambar. Implementasi dapat dilihat padadan tampilan dapat dilihat pada

  1.

  <a-

assets><img id="dalpro" src="images/alpro.png"></a-

assets> 2. <a-image position="14.706 8.637 - 26.257" width="1.75" height="0.75" rotation="0 0 0" src="#dalpro" ></a-image>

  

Kode Sumber 4.9 Implementasi Menampilkan Gambar

  

Gambar 4-13 Implementasi Menampilkan Video

4.2.3.3 Implementasi Halaman Memilih Buku

  Halaman memilih buku adalah halaman dimana pengguna dapat memilih jenis buku berdasarkan rak-rak yang telah

4.2.3.4 Implementasi Halaman Menampilkan PDF

  Halaman menampilkan PDF adalah halaman dimana pengguna disuguhkan ebook dengan tampilan PDF. Halaman ini akan tampil jika pengguna telah mengarahkan atau mengklik kursor pada judul. Tampilan Halaman Menampilkan PDF akan diperlihatkan pada

5 BAB

  V PENGUJIAN DAN EVALUASI

  Pada bab ini dijelaskan tentang uji coba dan evaluasi dari implementasi yang telah dilakukan.

   Lingkungan Pengujian

  Lingkungan uji coba yang digunakan adalah komputer dengan spesifikasi sebagai berikut: 1. : Asus K46CB

  Tipe Prosesor : Intel® Core(TM) i5-3317U CPU @

  1.70GHz (4 CPUs) ~1.7GHz Memori : 8192 MB DDR3 Sistem Operasi : Windows

  2. : MacBook Pro Retina Tipe

   Skenario Pengujian

  Pada skenario pengujian dijelaskan tentang skenario pengujian yang dilakukan. Metode pengujian akan mengacu pada dan black-box testing. Pengujian dibagi menjadi

  white-box testing

  dua bagian, yaitu pengujian fungsionalitas dan pengujian aplikasi terhadap pengguna. Pengujian ini dilakukan untuk mengetahui apakah fungsionalitas sistem telah berjalan sesuai rancangan.

   Pengujian Fungsionalitas

  Pengujian fungsionalitas dilakukan dengan menyiapkan beberapa skenario pengujian sebagai tolok ukur keberhasilan pengujian dan mengacu pada kasus penggunaan yang sudah dijelaskan pada sub bab 3.1.3. Metode pengujian yang digunakan pada pengujian fungsionalitas mengacu pada white-box testing dan black-box testing .

  5.2.1.1 seperti tanda panah pada mouse. Untuk memilih buku dan melakukan perpindahan dengan memilih tanda diamond. Pengguna cukup memandang objek tersebut dan suatu event akan terjadi.

   menampilkan pengujian kontrol kamera dan kursor sesudah menggunakan gaze interaction. akan menjelaskan skenario pengujian kontrol kamera dan kursor klik objek pada perangkat mobile.

  

Tabel 5-1 Skenario Pengujian Kontrol Kamera dan Kursor Klik

Objek pada Perangkat Desktop

  SP-01

  Nomor Kontrol Kamera dan Kursor. Nama

  Penggunaan kontrol kamera dan kursor untuk meilihat sekitar, melakukan

  Tujuan perpindahan dan memilih sebuah obyek.

  Pengguna membuka website.

  Kondisi Awal

  Pengguna mengklik ikon VR dipojok kanan bawah, lalu mengontrol dengan cara cara mengarahkan kursor menggunakan mouse, untuk pepindahan gunakan keyboard

  Skenario (WASD/arrow) dan untuk melakukan

  interaksi arahkan kursor pada objek lalu memilih dengan cara klik objek. Pengguna dapat melihat sekitar, melakukan

  

Gambar 5-4 Tampilan Pengujian Kontrol Kamera dan Kursor

Setelah Menggunakan Gaze Interaction pada Perangkat Mobile

Tabel 5-2 Skenario Pengujian Kontrol Kamera dan Kursor Klik

Objek pada Perangkat Mobile

  

Tabel 5-2 Skenario Pengujian Kontrol Kamera dan Kursor Klik

Objek pada Perangkat Mobile

  perpindahan dengan memilih tanda

  diamond pengguna cukup memandang objek tersebut dan suatu event akan terjadi.

  Keluaran yang Diharapkan

  Pengguna dapat melihat sekitar, melakukan perpindahan dan memilih sebuah objek.

  Hasil Pengujian Berhasil.

  Kendala

  Presisi posisi kursor dikedua sisi dari kamera yang tidak sama sehingga membuat pengguna kesulitan untuk memilih sebuah objek. Selain itu, kursor akan berpindah kehalaman lain apabila kursor terlalu lama menggunakan gaze interaction pada halaman yang dimuat secara sempurna. Pada tampilan mobile yang dilakukan adalah pengguna harus mengarahkan pandangan dengan menggeser layar dan untuk bergerak mengarah kursor pada objek arraw sepertimenjelaskan tentang skenario pengujian melihat ruangan RBTC menggunakan perangkat mobile.

  

Tabel 5-3 Skenario Pengujian Melihat Ruangan RBTC

Menggunakan Desktop

Nomor SP-UC-0001-01 Referensi Kasus

  UC-0001

  Penggunaan Nama Melihat Ruangan RBTC

  Menampilkan seluruh ruangan sehingga pengguna dapat mengeksploarsi ruangan

  Tujuan dan berinteraksi dengan objek. Kondisi Awal Pengguna membuka website.

  

Gambar 5-5 Tampilan Pengujian Melihat Ruangan RBTC

Menggunakan Desktop (Kiri)

  Gambar 5-7 Tampilan Pengujian Melihat Ruangan RBTC Menggunakan Mobile (kiri)

  

Tabel 5-4 Skenario Pengujian Melihat Ruangan RBTC

Menggunakan Mobile

  SP-UC-0001-02

  Nomor Referensi Kasus

  UC-0001

  Penggunaan Nama Melihat Ruangan RBTC

  Menampilkan seluruh ruangan sehingga

  Tujuan pengguna dapat mengeksploarsi ruangan

  dan berinteraksi dengan objek

  Kondisi Awal Pengguna membuka website

  Pengguna harus mengarahkan pandangan dengan mengeser layar dan untuk bergerak

  Skenario

  mengarah kursor pada objek arraw yang telah disediakan

  Keluaran yang Dapat mengarahkan pengguna ke tempat tentang skenario pengujian memilih jenis buku, sedangka adalah menampilan pengujian memilih jenis buku.

  

Tabel 5-5 Pengujian Memilih Jenis Buku

Nomor

  SP-UC-0002-01

  Referensi Kasus Penggunaan

  UC-0002

  Nama Memilih Genre buku Tujuan

  Memilih jenis buku pada objek rak yang telah disediakan.

  Kondisi Awal Pengguna membuka website. Skenario

  Pengguna diminta mengarahkan kursor ke objek-objek yang memiliki informasi rak buku dan menekan objek tersebut.

  Keluaran yang Diharapkan Website akan menampilkan daftar buku sesuai dengan genre yang ditentukan.

  Hasil Pengujian Berhasil. Kendala

  Terdapat jeda waktu lama sebelum gambar dapat diload secara sempurna.

  

Tabel 5-6 Pengujian Menampilkan Buku

  Menampilkan buku merupakan pengujian

  Tujuan saar pengguna melihat tampilan ebook atau buku dalam bentuk PDF.

Kondisi Awal Pengguna membuka halaman memilih buku.

  Pengguna diminta untuk menekan,

  Skenario mengarahkan kursor, dan memilih judul buku. Keluaran

  Website akan menampilkan tampilan ebook yang atau buku dalam bentuk PDF. Diharapkan Hasil Berhasil. Pengujian

  Jika Desktop memasang aplikasi , maka PDF akan otomatis

  Kendala downloader terdowload.

  

Gambar 5-12 Tampilan Pengujian Menampilkan Buku pada

Desktop

5.2.1.5 Pengujian Terhadap Jenis Browser dan Versi

  

Tabel 5-7 Pengujian Terhadap Perangkat Mobile iOS pada

Browser Safari

Nomor SP-03

  Pengujian Terhadap Perangkat Mobile iOS

  Nama pada Browser Safari.

  Menampilkan Website pada Perangkat

  Tujuan Mobile iOS pada Browser Safari.

  Pengguna menjalankan website pada

  Kondisi Awal perangkat mobile.

  Pengguna memasukkan alamat website pada Browser yang akan dijalankan. Lalu jalankan

  Skenario alamat website. Tunggu hingga halaman

  berjalan dengan sempurna lalu tekan tombol start.

  Keluaran Browser berhasil menampilkan Website. yang Diharapkan

2. Pengujian Terhadap Perangkat Mobile iOS pada Browser Firefox

   adalah tampilan pengujian terhadap perangkat Mobile iOS pada Browser Firefox.

  

Tabel 5-8 Pengujian Terhadap Perangkat Mobile pada

iOS

  

Browser Firefox

Nomor SP-04

  Pengujian Terhadap Perangkat Mobile iOS

  Nama pada Browser Firefox.

  Menampilkan Website pada Perangkat