BAB V HASIL DAN PEMBAHASAN
4.3. Tahap Implementasi
4.3.1. Storyboard dan pengkodean prototipe
Sebelum dilakukan pengkodean prototipe WebVR, penulis terlebih dahulu memvisualisasikan user interface yang akan dibuat untuk mempermudah tahap pengkodean dengan teknik Storyboard.
UIN Syarif Hidayatullah Jakarta Gambar 4.3. Storyboard Scene pembuka dilihat secara first person
view
Pada Scene pembuka terdapat kalimat intro dan penjelasan cara menggunakan WebVR dengan singkat, dapat dilihat konsepnya pada gambar 4.3. Tanda panah mengarah ke halaman main menu yang konsepnya dapat dilihat pada gambar 4.4.
Gambar 4.4. Storyboard Scene Main Menu dilihat secara first person view
Dalam main menu terdapat tiga icon, jika di-hover oleh kursor akan menunjukkan nama icon tersebut. Tiap icon akan mengarahkan ke scene lain jika di klik yaitu ke materi, kembali ke laman intro, dan video 360.
UIN Syarif Hidayatullah Jakarta Gambar 4.5. Storyboard Scene materi kingdom animalia dilihat
secara keseluruhan (God’s eye view)
Gambar 4.6. Storyboard Scene materi kingdom animalia secara first person view dan first person view (rotasi 180o)
Gambar 4.5. menunjukkan scene materi kingdom Animalia secara keseluruhan. Dalam zona sudut pandang pertama terdapat terdapat judul dari materi yang dijelaskan dan objek yang merepresentasikan Kingdom Animalia dan pengertiannya. Sedangkan di belakang sudut pandang pertama (rotasi 180o) terdapat klasifikasi kingdom Animalia yang akan direpresentasikan oleh dua objek 3D yang dapat di klik dan akan mengarah ke scene klasifikasi filum.
Konsep lebih jelasnya dapat dilihat pada gambar 4.6.
Pada scene klasifikasi filum yaitu filum invertebrata dan vertebrata, konsep UI nya kurang lebih sama, hanya berbeda jumlah subfilum saja. Maka dari itu penulis menggunakan konsep storyboard
UIN Syarif Hidayatullah Jakarta yang sama (gambar 4.7. dan gambar 4.8.). Tampilan zona di belakang sudut pandang pertama (rotasi 180o) kosong, jadi user hanya difokuskan pada zona sudut pandang pertama saja. Pada bagian bawah terdapat gambar icon Animalia yang mengarah ke menu materi kingdom Animalia dan icon rumah yang mengarah kembali ke scene main menu.
Gambar 4.7. Storyboard Scene klasifikasi filum secara keseluruhan (God’s eye view)
Gambar 4.8. Storyboard Scene klasifikasi filum secara first person view
Di zona sudut pandang pertama terdapat gambar-gambar atau objek 3D yang merepresentasikan tiap subfilum. Konsep dapat dilihat di gambar 4.8., jika di-hover maka objek tersebut akan sedikit
UIN Syarif Hidayatullah Jakarta membesar dan jika di klik akan muncul penjelasan dari filum tersebut dengan tampilan seperti pada gambar 4.9.
Gambar 4.9. Storyboard Scene saat salah satu filum di klik dan menampilkan penjelasan secara first person view
Penjelasan tentang subfilum berada pada kotak paling atas, sedangkan dibawahnya terdapat penjelasan klasifikasi subfilum, kotak ini dapat mengganti isi teksnya jika kursor mengarah (hover) ke tiap gambar yang ditampilkan dibawah kotak tersebut, teks akan berubah sesuai dengan gambar yang di-hover. Pada bagian pojok kanan atas ada icon untuk menutup penjelasan tersebut dan menunjukkan kembali scene klasifikasi filum seperti di gambar 4.8.
Gambar 4.10. Storyboard Scene video 360 secara first person view
UIN Syarif Hidayatullah Jakarta Dalam scene video 360, terdapat thumbnail dari video yang tersedia berikut dengan judul video tersebut, konsep dapat dilihat pada gambar 4.10. Tiap thumbnail yang di klik akan menampilkan video yang dipilih.
4.3.2. Prototyping
Setelah membuat storyboard, penulis mulai membangun prototipe yang sesuai dengan rancangan UI yang sudah dibuat.
1. Mempersiapkan aset-aset WebVR yang akan digunakan
Pertama-tama penulis mengumpulkan dan membuat bahan-bahan yang dibutuhkan sebagai aset untuk WebVR ini, yaitu teks, gambar, video, icon, audio dan objek 3D.
Beberapa gambar yang menjadi aset diolah dengan menggunakan software adobe photoshop untuk membuatnya transparan dan ukurannya sesuai dengan yang diinginkan. Selain itu beberapa objek 3D juga diolah menggunakan software blender untuk mengubah warna materialnya.
Gambar 4.11. Folder aset dalam WebVR Kingdom Animalia
UIN Syarif Hidayatullah Jakarta 2. Pengkodean
Yang selanjutnya dilakukan adalah pengkodean HTML menggunakan framework A-Frame. Pengkodean web ini dilakukan di server lokal dengan menggunakan XAMPP. Pertama-tama buat index.html dan include JS Build A-Frame pada bagian <head>-nya serta component A-Frame yang digunakan agar dapat melakukan pengkodean WebVR dengan menggunakan framework A-Frame.
Versi A-Frame yang digunakan pada penelitian ini adalah versi 0.8.2 yang dapat di download secara gratis di website A-Frame atau kita dapat langsung meng-include source alamat URLnya yaitu https://aframe.io/releases/0.8.2/aframe.min.js. Selain itu kita menggunakan tiga component A-Frame yang akan di include juga pada bagian <head> yaitu:
Aframe-template-component: untuk menerapkan multiple scene pada WebVR dalam satu page.
Aframe-event-set-component: untuk menerapkan multiple event dalam satu objek, misal saat objek di klik dan di hover mengeluarkan output yang berbeda.
Aframe-video-controls: untuk menampilkan video control pada tampilan video 360 derajat, dapat melakukan play dan pause serta mempercepat ke bagian video yang diinginkan.
Gambar 4.12. Screenshot Include JS Build Frame serta component A-Frame yang dibutuhkan pada bagian <head> HTML
UIN Syarif Hidayatullah Jakarta Setelah itu baru dapat melakukan pengkodean dalam bentuk framework A-Frame di dalam tag <a-scene> yang diletakkan didalam tag HTML <body>. Selanjutnya masukkan aset-aset WebVR Kingdom Animalia yang sudah disiapkan di dalam tag <a-assets>, berikut screenshot dari source code-nya.
UIN Syarif Hidayatullah Jakarta Gambar 4.13. Screenshot memasukkan aset-aset WebVR Kingdom
Animalia dalam tag <a-assets>
UIN Syarif Hidayatullah Jakarta Selanjutnya panggil component template yang sudah di include di
<head> tadi di dalam <a-entity> agar dapat memanggil scene yang dapat dilakukan pengkodean pada file .html yang berbeda seperti yang ditunjukkan pada gambar 4.14.
Gambar 4.14. Screenshot pengkodean entity component template untuk memanggil scene “opening.html”
Gambar 4.15. Screenshot scenes yang terdapat pada WebVR Kingdom Animalia
Setelah itu mulai pengkodean scene-scene yang dibutuhkan.
Dalam WebVR ini terdapat sembilan file HTML scenes, dapat dilihat pada gambar 4.15. Tiap scene ini harus memiliki tag <a-sky> yaitu untuk menentukan warna atau gambar yang akan dijadikan latar belakang dari scene tersebut. Selain itu harus terdapat tag <a-cursor>
yang diletakkan di dalam tag <a-camera>, maksud dari hal tersebut ada kursor yang ditentukan akan megikuti posisi kamera jadi kursor akan senantiasa berada di tengah tampilan WebVR. Bentuk kursor dapat di modifikasi pada tag <a-cursor> tersebut dengan menentukan bentuk, material serta warna. Gambar 4.16. menunjukkan source code dari salah satu scene yaitu ending.html.
UIN Syarif Hidayatullah Jakarta Gambar 4.16. Screenshot pengkodean scenes ending.html
Dapat dilihat pada gambar 4.16. file html tidak memilikitag
<head> dan <body> karena file html ini langsung dipanggil didalam tag component template yang ada di file index.html sehingga memperkecil ukuran WebVR dan mengefisiensikan kecepatan loading page-nya.
Pada baris ke 7 di gambar 4.16. terdapat tag <a-image> untuk menampilkan gambar yang dapat dipanggil dari aset yang sudah dimasukkan di file index.html tadi dengan memanggil id nya pada atribut src=”#id”, kemudian modifikasi atribut lainnya seperti position, width, height untuk menentukan tampilan yang diinginkan.
Pada scene lain yaitu opening.html dapat dilihat penerapan component event-set yang ditampilkan pada gambar 4.17.
Gambar 4.17. Screenshot pengkodean scenes opening.html
UIN Syarif Hidayatullah Jakarta Pada gambar tersebut diterapkan component event-set pada baris 9 dan 10 yang diterapkan pada objek gambar ber id #next.
9 event-set__click="_target: #op2; visible: true;"
10 event-set__click2="_event: click; _target: #op1; visible: false"
Maksud dari kode baris 9 ini adalah saat gambar di klik, maka target yang ditentukan dengan id nya yaitu op2 akan muncul (visible:true). Dan maksud baris 10 adalah saat di klik itu pula maka target id op1 akan hilang (visible: false).
Pengkodean pada scenes lain kurang lebih sama seperti itu, yang dibedakan adalah memanggil id aset yang tepat dan atur atribut agar sesuai dengan tampilan yang diinginkan.