Siti Nurul Hidayati

IMPLEMENTASI WEB-VR
(VIRTUAL REALITY BERBASIS BROWSER WEB)
PADA MEDIA PEMBELAJARAN BIOLOGI TINGKAT SMA
Skripsi
Oleh
Siti Nurul Hidayati
NIM: 11140910000032
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH
JAKARTA
2018 M / 1439 H
i UIN Syarif Hidayatullah Jakarta

IMPLEMENTASI WEB-VR
(VIRTUAL REALITY BERBASIS BROWSER WEB)
PADA MEDIA PEMBELAJARAN BIOLOGI TINGKAT SMA
Skripsi
Diajukan Sebagai Salah Satu Syarat untuk Memperoleh
Gelar Sarjana Komputer (S.Kom)
Oleh
Siti Nurul Hidayati
NIM: 11140910000032
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH
JAKARTA
2018 M / 1439 H
ii UIN Syarif Hidayatullah Jakarta

Scanned by CamScanner
Scanned by CamScanner
Nama : Siti Nurul Hidayati (11140910000032)
Program Studi : Teknik Informatika
Judul : Implementasi WebVR (Virtual Reality berbasis Web) pada
Media Pembelajaran Biologi tingkat SMA
ABSTRAK
Biologi merupakan salah satu mata pelajaran dari cabang IPA (Ilmu Pengetahuan
Alam) yang memiliki banyak materi hafalan. Media Pembelajaran merupakan salah
satu faktor yang memengaruhi tercapainya tujuan pembelajaran, salah satu yang
paling menjanjikan adalah Virtual Reality (VR). Dalam cara penggunaan VR,
mobile-based merupakan yang paling mudah untuk diakses yaitu dengan
menggunakan smartphone. Menurut analisis demografi pengguna gadget netizen di
Indonesia berdasarkan platform, yang mengakses internet hanya melalui
smartphone 80% berasal dari usia 15-17 yaitu usia didik aktif tingkat SMA. Dengan
melakukan pengumpulan data menggunakan studi pustaka, wawancara, dan
kuesioner, penulis membangun aplikasi yang mengimplementasikan WebVR, yaitu
Virtual Reality berbasis website pada media pembelajaran biologi untuk tingkat
SMA dengan menggunakan framework A-Frame dalam pengembangan WebVR
dan metode pengembangan sistem multimedia interaktif (IMSDD). Hasil dari
penelitian menunjukkan bahwa media pembelajaran biologi menggunakan WebVR
dapat berfungsi dengan baik dan menurut 60 siswa yang menjadi responden
penelitian ini menyatakan bahwa WebVR ini sangat mudah digunakan (skor 81%),
meningkatkan minat mereka pada materi yang disajikan (skor 85%), lebih menarik
dari media pembelajaran yang biasa mereka gunakan (skor 95%), dan kedepannya
WebVR dapat bermanfaat dalam pembelajaran (skor 91%).
Kata Kunci : WebVR, Virtual Reality, Media Pembelajaran, Biologi,

A-Frame, IMSDD
Jumlah Halaman : xvi + 114
Jumlah Pustaka : 33 sumber (21 buku + 5 Jurnal + 7 Website)
vii UIN Syarif Hidayatullah Jakarta

Author : Siti Nurul Hidayati (11140910000032)
Study Program : Informatics
Title : Implementation WebVR (Web-based Virtual Reality) for
High School Level Biology Educational Media
ABSTRACT
Biology is one of the subjects from science study which has a lot of memorized
material. Educational media is one of the factors that influence the achievement of
learning goals, one of the most promising is Virtual Reality (VR). In how to use
VR, mobile-based is the easiest to access, which is using a smartphone. The
demographic use of netizen gadget users in Indonesia by platform, shows that those
who access the internet only through smartphones 80% comes from the age of 15-
17 whom are actively educated in high school. By collecting data using literature
studies, interviews, and questionnaires, the authors build an application which
implement WebVR, a web-based Virtual Reality on Biology educational media for
high school level using the A-Frame framework for developing WebVR and
interactive multimedia system design and development method (IMSDD) . The
results of this study indicate that the developed WebVR educational media works
well and according to 60 students who were respondents of this study stated that
this WebVR is very easy to use (score 81%), increased their interest in the material
presented (score 85%), more interesting than ordinary educatinal medias they used
(score 95%), and in the future WebVR can be useful in learning (score 91%).
Keyword : WebVR, Virtual Reality, Instructional Media, Biology,

A-Frame, IMSDD
Number of Pages : xvi + 114
Number of Reference : 33 references (21 books + 5 Journals + 7 Websites)
viii UIN Syarif Hidayatullah Jakarta

KATA PENGANTAR
Alhamdulillah segala puji dan syukur penulis panjatkan kehadirat Allah

SWT yang telah memberikan Rahmat dan Hidayah-Nya sehingga penulis dapat
menyelesaikan skripsi ini. Tak lupa shalawat serta salam kepada Nabi Muhammad
SAW, beserta keluarga, para sahabat, dan para pengikutnya dari awal hingga akhir
zaman.
Penulisan skripsi ini berjudul “Implementasi WebVR (Virtual Reality
Berbasis Web) pada Media Pembelajaran Biologi Tingkat SMA”, disusun
untuk memenuhi persyaratan guna mendapatkan gelar Sarjana Komputer (S.Kom)
pada Program Studi Teknik Informatika di Universitas Islam Negeri Syarif
Hidayatullah Jakarta.
Dalam penyusunan skripsi ini, telah banyak bimbingan dan bantuan yang
didapatkan dari berbagai pihak sehingga skripsi ini dapat berjalan dengan lancar.
Oleh karena itu, penulis ingin mengucapkan banyak terima kasih kepada :
1. Bapak Dr. Agus Salim, M.Si selaku dekan Fakultas Sains dan Teknologi.
2. Ibu Arini, MT. selaku Ketua Program Studi Teknik Informatika.
3. Ibu Nenny Anggraini, MT. dan Ibu Luh Kesuma Wardhani, MT. selaku
Dosen Pembimbing I dan II yang senantiasa memberikan bimbingan,
semangat, motivasi serta arahan yang sangat membantu penulis untuk dapat
menyelesaikan skripsi ini.
4. Bu Elis, Bu Pipit, serta staff dan siswa SMA Negeri 49 Jakarta yang telah
mengizinkan penulis untuk melaksanakan penelitian disana dan membantu
penulis dalam melaksanakannya.
5. Seluruh dosen dan staff UIN Jakarta, khususnya Fakultas Sains dan
Teknologi yang telah memberikan ilmu dan pengalaman yang berharga.
ix UIN Syarif Hidayatullah Jakarta

6. Kedua orang tua, mama dan papa yang senantiasa memberikan dukungan.
Terima kasih banyak, atas doa-doa dan jerih payah kalian lah penulis dapat
menyelesaikan studi di jenjang perguruan tinggi ini. Terima kasih ma,
terimakasih pa, I love you.
7. Kedua kakak penulis, kak Tira dan kak Indra serta kakak ipar yang selalu
memberikan semangat selama ini, membantu penulis agar dapat
menyelesaikan studi ini.
8. Lulut Dwi Putri Bagaswari, sahabat penulis yang telah membantu,
menyemangati serta menghibur dalam penelitian skripsi ini juga pada masa
perkuliahan, kita sukses bareng ya!
9. Untuk kucing-kucing penulis yang tersayang, yang selalu memberikan
dukungan emosional, dan selalu membuat penulis tersenyum dikala gundah.
Cimut, Kotaro dan Kaizo luv you my children!
10. Seluruh teman-teman Teknik Informatika angkatan 2014, khususnya kelas
TI-B tercinta. Terima kasih atas kebersamaan, kenangan, ilmu dan
pengalaman selama masa kuliah.
11. Seluruh pihak yang tidak dapat disebutkan satu persatu yang secara
langsung maupun tidak langsung telah membantu dalam menyelesaikan
skripsi ini.
Penulisan skripsi ini masih jauh dari kata sempurna. Untuk itu,
sangat diperlukan kritik dan saran yang membangun bagi penulis. Akhir
kata, semoga laporan skripsi ini dapat bermanfaat bagi penulis dan orang
lain.
Jakarta, September 2018

Penulis
Siti Nurul Hidayati

11140910000032
x UIN Syarif Hidayatullah Jakarta

DAFTAR ISI
LEMBAR PERSETUJUAN................................................................................... iii

LEMBAR PENGESAHAN ................................................................................... iv
PERNYATAAN ORISINALITAS ......................................................................... v
PERNYATAAN PERSETUJUAN PUBLIKASI SKRIPSI .................................. vi
ABSTRAK ............................................................................................................ vii
KATA PENGANTAR ........................................................................................... ix
DAFTAR ISI .......................................................................................................... xi
DAFTAR GAMBAR ........................................................................................... xiv
DAFTAR TABEL ................................................................................................ xvi
BAB I PENDAHULUAN ....................................................................................... 1
1.1. Latar Belakang.......................................................................................... 1
1.2. Rumusan Masalah .................................................................................... 5
1.3. Batasan Masalah ....................................................................................... 5
1.4. Tujuan dan Manfaat Penelitian ................................................................. 5
1.4.1. Tujuan Penelitian .............................................................................. 5
1.4.2. Manfaat Penelitian ............................................................................ 6
1.5. Metodologi Penelitian .............................................................................. 6
1.5.1. Metode Pengumpulan Data ............................................................... 7
1.5.2. Metode Pengembangan Aplikasi....................................................... 7
1.6. Sistematika Penulisan ............................................................................... 8
BAB II LANDASAN TEORI ............................................................................... 10
2.1. Biologi .................................................................................................... 10
2.1.1. Kingdom Animalia .......................................................................... 10
2.2. Media Pembelajaran ............................................................................... 12
2.3. Multimedia ............................................................................................. 14
2.3.1. Multimedia dalam Pendidikan ........................................................ 15
2.4. Virtual Reality ........................................................................................ 16
2.4.1. WebVR ............................................................................................ 19
2.5. A-Frame.................................................................................................. 20
xi UIN Syarif Hidayatullah Jakarta

2.6. HTML5 ................................................................................................... 27
2.7. Perangkat Lunak Pendukung .................................................................. 27
2.7.1. XAMPP ........................................................................................... 28
2.7.2. Blender ............................................................................................ 28
2.7.3. Adobe Photoshop ............................................................................ 28
2.8. Metode Pengembangan Aplikasi Multimedia ........................................ 29
2.9. Storyboard .............................................................................................. 31
2.10. Beta Testing ........................................................................................ 32
2.11. The Eight Golden Rules of Interface Design ...................................... 33
2.12. Metode Pengumpulan Data................................................................. 35
2.12.1. Studi Pustaka ............................................................................... 35
2.12.2. Kuesioner ..................................................................................... 35
2.12.3. Wawancara .................................................................................. 36
2.13. Studi Literatur Sejenis ........................................................................ 37
BAB III METODOLOGI PENELITIAN.............................................................. 41
3.1. Metode Pengumpulan Data .................................................................... 41
3.1.1. Studi Pustaka ................................................................................... 41
3.1.2. Kuesioner ........................................................................................ 41
3.1.3. Wawancara ...................................................................................... 43
3.2. Metode Pengembangan Sistem............................................................... 43
3.3. Alur Pemikiran Penelitian ...................................................................... 47
BAB IV PERANCANGAN SISTEM DAN IMPLEMENTASI .......................... 48
4.1. Tahap Analisis Kebutuhan Sistem.......................................................... 48
4.1.1. Definisi Sistem ................................................................................ 48
4.1.2. Target User dan Kebutuhannya ...................................................... 49
4.1.3. Kebutuhan Hardware, Software, dan Tool ..................................... 49
4.1.4. Delivery Platform ............................................................................ 50
4.2. Tahap Pertimbangan Desain ................................................................... 51
4.2.1. Desain Metafora .............................................................................. 51
4.2.2. Format dan tipe dari Informasi ........................................................ 51
4.2.3. Struktur Navigasi ............................................................................ 52
4.2.4. Sistem Kontrol ................................................................................ 53
xii UIN Syarif Hidayatullah Jakarta

4.3. Tahap Implementasi ............................................................................... 53
4.3.1. Storyboard dan pengkodean prototipe ............................................ 53
4.3.2. Prototyping...................................................................................... 58
4.3.3. Hasil Prototipe ................................................................................. 64
4.3.4. Beta Testing..................................................................................... 64
4.4. Tahap Evaluasi ....................................................................................... 64
BAB V HASIL DAN PEMBAHASAN ................................................................ 65
5.1. Hasil Prototipe ........................................................................................ 65
5.2. Beta Testing ............................................................................................ 70
5.3. Hasil Evaluasi ......................................................................................... 73
BAB VI PENUTUP .............................................................................................. 79
6.1. Kesimpulan ............................................................................................. 79
6.2. Saran ....................................................................................................... 80
DAFTAR PUSTAKA ........................................................................................... 81
LAMPIRAN ........................................................................................................ 813
xiii UIN Syarif Hidayatullah Jakarta

DAFTAR GAMBAR
Gambar 1.1. Infografik survei VR di dalam kelas .................................................. 3

Gambar 1.2. Demografi pengguna gadget netizen Indonesia terhadap platform .... 4
Gambar 2.1. Beragam jenis hewan: (a) capung, (b) siput, (c) burung. ................. 10
Gambar 2.2. Peta Konsep dari kingdom animalia................................................. 11
Gambar 2.3. Beberapa HMDs (VR mounts) dengan pengguna seiring waktu ...... 17
Gambar 2.4. Penyetelan VR Computer-based ...................................................... 18
Gambar 2.5. Penyetelan VR mobile-based ........................................................... 18
Gambar 2.6. Logo A-Frame yang mengilustrasikan objek 3D yang simpel ......... 20
Gambar 2.7. Contoh pengkodean “Hello World” menggunakan A-Frame .......... 21
Gambar 2.8. Siklus dari IMSDD ........................................................................... 31
Gambar 2.9. Contoh sebuah storyboard ................................................................ 32
Gambar 3.1. Kerangka Pemikiran Penelitian ........................................................ 47
Gambar 4.1. VR mount Google Cardboard V2 ..................................................... 50
Gambar 4.2. Struktur Navigasi WebVR Kingdom Animalia ............................... 52
Gambar 4.3. Storyboard Scene pembuka dilihat secara first person view ............ 54
Gambar 4.4. Storyboard Scene Main Menu dilihat secara first person view ........ 54
Gambar 4.5. Storyboard Scene materi kingdom animalia .................................... 55
Gambar 4.6. Storyboard Scene secara first person view ....................................... 55
Gambar 4.7. Storyboard Scene klasifikasi filum secara keseluruhan ................... 56
Gambar 4.8. Storyboard Scene klasifikasi filum secara first person view ............ 56
Gambar 4.9. Storyboard Scene saat salah satu filum di klik ................................. 57
Gambar 4.10. Storyboard Scene video 360 secara first person view .................... 57
Gambar 4.11. Folder aset dalam WebVR Kingdom Animalia ............................. 58
Gambar 4.12. Screenshot Include JS Build A-Frame ........................................... 59
Gambar 4.13. Screenshot memasukkan aset-aset WebVR Kingdom Animalia ... 61
Gambar 4.14. Screenshot pengkodean entity component template....................... 62
Gambar 4.15. Screenshot scenes pada WebVR Kingdom Animalia .................... 62
Gambar 4.16. Screenshot pengkodean scenes ending.html .................................. 63
Gambar 4.17. Screenshot pengkodean scenes opening.html ................................ 63
Gambar 5.1. Scene pembuka ................................................................................. 65
xiv UIN Syarif Hidayatullah Jakarta

Gambar 5.2. Scene Main Menu, saat objek materi kingdom Animalia di-hover .. 66
Gambar 5.3. Scene Materi Kingdom Animalia (first person view)....................... 66
Gambar 5.4. Scene Materi Kingdom Animalia bagian Klasifikasi Animalia (rotasi
180o) ...................................................................................................................... 67
Gambar 5.5. Scene Materi Kingdom Animalia bagian Klasifikasi Animalia (rotasi
180o) saat objek 3D di-hover................................................................................. 67
Gambar 5.6. Scene salah satu klasifikasi Filum (Vertebrata/Chordata)................ 68
Gambar 5.7. Scene penjelasan sub-filum (Amphibia) .......................................... 68
Gambar 5.8. Scene penjelasan sub-filum ketika salah satau contoh gambar sub-
filum di-hover (Amphibia) .................................................................................... 69
Gambar 5.9. Scene penjelasan sub-filum saat user melihat ke bawah .................. 69
Gambar 5.10. Scene menu Video 360 derajat ....................................................... 70
Gambar 5.11. Scene salah satu Video 360 derajat (Understanding Shark) .......... 70
Gambar 5.12. Grafik WebVR mudah digunakan .................................................. 71
Gambar 5.13. Grafik WebVR meningkatkan minat pada materi pembelajaran ... 71
Gambar 5.14. Grafik WebVR lebih menarik dari media pembelajaran yang biasa
digunakan .............................................................................................................. 72
Gambar 5.15. Grafik WebVR bermanfaat dalam pembelajaran kedepannya ....... 73
Gambar 5.16. Penerapan prinsip Strive for Consistency ....................................... 74
Gambar 5.17. Penerapan Cater to Universallibility .............................................. 75
Gambar 5.18. Penerapan Offer Informative Feedback.......................................... 75
Gambar 5.19. Penerapan Design Dialogs to Yield Closure .................................. 76
Gambar 5.20. Penerapan Prevent Errors .............................................................. 76
Gambar 5.21. Penerapan Permit Easy Reversal of Actions .................................. 77
Gambar 5.22. Penerapan Support Internal Locus of Control................................ 77
Gambar 5.23. Penerapan Reduce Short-term Memory Load................................. 78
xv UIN Syarif Hidayatullah Jakarta

DAFTAR TABEL
Tabel 2.1. Macam-macam primitive dalam A-Frame API .................................... 22

Tabel 2.2. Studi Literatur Sejenis.......................................................................... 37
Tabel 3.1. Perhitungan Sampel Populasi Kelas X MIPA SMA Negeri 49 ………43
xvi UIN Syarif Hidayatullah Jakarta

BAB I
PENDAHULUAN
1.1. Latar Belakang
Edukasi atau pendidikan merupakan proses perkembangan diri untuk

memperoleh pengetahuan. UNESCO menyebutkan bahwa pendidikan
sekarang itu adalah untuk mempersiapkan manusia bagi suatu tipe
masyarakat yang belum ada.
Dalam dunia pendidikan Indonesia, ada banyak sekali mata pelajaran
yang diajarkan kepada pelajar, salah satunya adalah Biologi. Menurut
Subagiya, Triyono & Sulistyono (2016), mata pelajaran Biologi adalah
cabang IPA (Ilmu Pengetahuan Alam) yang mempelajari tentang makhluk
hidup dan proses kehidupan. Biologi merupakan mata pelajaran yang
memiliki banyak materi hafalan.
Dalam proses belajar mengajar ada banyak faktor yang mempengaruhi
tercapainya tujuan pembelajaran diantaranya pendidik, peserta didik,
lingkungan, metode/teknik serta media/alat pembelajaran. Dalam kaitannya
dengan usaha untuk mencapai tujuan pembelajaran, media pembelajaran
mempunyai peran yang sangat penting. Media pembelajaran merupakan
sarana yang dapat membantu proses pembelajaran karena berkaitan dengan
indera pendengaran dan penglihatan. Adanya media pembelajaran bahkan
dapat mempercepat proses belajar mengajar menjadi efektif dan efisien dalam
suasana yang kondusif, sehingga dapat membuat pemahaman peserta didik
lebih cepat (Wibawanto 2017:2). Penulis telah melakukan wawancara dengan
ibu Tri Fitrayanti, seorang staf pengajar biologi di SMA Negeri 49 Jakarta.
Menurut beliau, materi biologi untuk SMA terlalu banyak sedangkan waktu
kegiatan belajar mengajar relatif sangat kurang. Beliau juga menyatakan
bahwa selama ini media pembelajaran yang digunakan hanya berupa
presentasi power point, video, dan kartu. Beliau berpendapat bahwa akan
lebih baik jika ada media pembelajaran yang mendukung dan memberikan
penjelasan kepada siswa agar lebih menarik dan interaktif, seperti terdapat
visual dan audio.
1 UIN Syarif Hidayatullah Jakarta

2
Menurut Munir (2012:132), pembelajaran yang menggunakan

teknologi informasi dan komunikasi atau menggunakan multimedia disebut
dengan media pembelajaran berbasis multimedia interaktif. Penggunaan
media pembelajaran ini dimaksudkan untuk membantu pendidik dalam
penyampaian materi yang diajarkan dan juga membantu peserta didik dalam
memahami materi yang dipelajarinya.
Secara umum, multimedia berhubungan dengan penggunaan lebih dari
satu macam media untuk menyajikan informasi (Munir 2012:2). Menurut
Munir (2012:39), Multimedia menyediakan peluang yang sangat besar
terhadap kontrol peserta didik dibandingkan media-media lainnya. Peserta
didik tidak hanya mempunyai kontrol terhadap kedalaman dan pemilihan
bahan tetapi juga interaktif yang memungkinkan peserta didik menjalin
komunikasi dengan program.
Teknologi multimedia membantu menyediakan cara yang unik untuk
para peserta didik agar lebih aktif dalam pembelajaran, dan menjelaskan
konten rekayasa dengan cara yang berbeda dari metode tradisional. Salah satu
multimedia yang paling menjanjikan untuk pendidikan adalah Virtual Reality
(VR) (Munir 2012:127).
Virtual Reality adalah media dengan potensi yang luar biasa.
Kemampuan untuk berada di tempat lain, untuk benar-benar masuk, dan
merasakan seolah-olah kita benar-benar ada disana. VR juga membuka cara
yang tidak terbayangkan untuk berinteraksi dan berkomunikasi (Parisi
2015:7). Menurut survei yang dilakukan oleh sebuah perusahaan riset Jerman,
Kantar EMNID (2017), sebanyak 74% guru percaya bahwa penggunaan VR
di kelas dapat meningkatkan motivasi belajar siswa dan meningkatkan
keberhasilan belajar mereka (62%).
UIN Syarif Hidayatullah Jakarta

3
Gambar 1.1. Infografik survei VR di dalam kelas

Sumber: Samsung Newsroom (2017)
Pengembangan virtual reality dapat mengambil berbagai bentuk: SDK

native yang mengakses fitur platform baku; game engines yang memberi
lebih banyak kekuatan dan jangkauan lintas platform; web browser; dan
pemutar video dan alat untuk membuat video stereo panorama berdasarkan
dunia nyata (Parisi 2015:16). Virtual Reality berbasis browser web atau dapat
disingkat menjadi WebVR merupakan sebuah Javascript API yang
menyediakan dukungan untuk berbagai macam perangkat VR melalui
browser web (Neelakantam & Pant 2017:3). Hal ini membuat WebVR
memiliki beberapa keuntungan seperti akses secara instan, mudah terintegrasi
dengan data web lainnya, pengembangan yang lebih cepat dan murah, dan
deployment yang lebih mudah (Parisi 2015:75). Selain itu, menurut
Neelakantan & Pant (2017:3), WebVR memiliki kelebihan untuk digunakan
karena dapat bekerja mulus pada kebanyakan smartphone.
Penggunaan smartphone pada remaja dan pelajar bukanlah hal yang
asing lagi. Menurut analisis oleh MMX Multi-Platform (Nguyen 2017),
populasi netizen di Indonesia yang mengakses hanya melalui smartphone,

4
mayoritas berasal dari usia muda. Dimana usia 15-17 tahun, yang merupakan
usia aktif peserta didik, 80% mengakses melalui smartphone, sisanya melalui
desktop atau gabungan keduanya.
% OF UNIQUE USERS BY PLATFORM AND DEMOGRAPHIC
100%
90%
80%
70%
70% 75% 67%
60% 80% 79%
50%
40%
30%
20% 15% 20%
13% 16% 13%
10% 15% 7% 9% 7% 12%
0%
Total Audience Persons: 15-17 Persons: 18-24 Persons: 25-34 Persons: 35+
Desktop Only Multi-platform Mobile Only
Gambar 1.2. Demografi pengguna gadget netizen Indonesia terhadap platform

Sumber: comScore, MMX Multi-Platform (Nguyen 2017)
Selain itu, dari hasil survei yang dilakukan penulis pada siswa kelas X
MIPA di SMAN 49 Jakarta, ditemukan bahwa seluruh responden telah memiliki
smartphone dan 98% nya telah memiliki akses terhadap internet. Dalam survei
tersebut pula, penulis menemukan bahwa media pembelajaran biologi yang
paling banyak digunakan oleh siswa adalah buku (43%) dan power point (43%).
Namun siswa cenderung masih merasa media pembelajaran biologi yang
digunakan kurang menarik dan sulit dipahami (skor 46%), dan siswa sangat
setuju bila ada media pembelajaran baru yang memanfaatkan teknologi
smartphone mereka (skor 90%). Selain itu, pada wawancara sebelumnya
dengan narasumber ibu Tri Fitrayanti, staf pelajar biologi di SMA Negeri 49
Jakarta, beliau berpendapat bahwa smartphone baik digunakan untuk media
pembelajaran, tetapi harus sesuai dengan materi kurikulum yang ada.
Dari permasalahan diatas, penulis mencoba untuk
mengimplementasikan WebVR agar dapat dimanfaatkan dalam pembelajaran

5
biologi tingkat SMA. WebVR ini dapat digunakan pelajar untuk mengakses
materi pembelajaran biologi dengan bentuk virtual reality yang bisa diakses
dengan browser web di perangkat smartphone yang mereka miliki. Adapun
judul yang diangkat adalah “Implementasi WebVR (Virtual Reality berbasis
Browser Web) pada Media Pembelajaran Biologi Tingkat SMA.”
1.2. Rumusan Masalah
Rumusan masalah pada penelitian ini adalah bagaimana

mengimplementasikan WebVR pada pembelajaran biologi tingkat SMA?
1.3. Batasan Masalah
1. Metode pengumpulan data pada penelitian ini menggunakan studi pustaka,

kuesioner, dan wawancara.
2. Metode pengembangan sistem pada penelitian ini menggunakan metode
IMSDD (Interactive Multimedia System Design and Development).
3. Virtual Reality ini dirancang untuk browser web menggunakan WebVR
Framework yaitu A-Frame.
4. Materi biologi yang digunakan untuk aplikasi ini adalah materi Kingdom
Animalia. (berdasarkan hasil wawancara dengan narasumber)
5. Studi kasus dilakukan di SMA Negeri 49 Jakarta
6. WebVR yang dikembangkan ini hanya untuk membantu sebagai sebuah
media pembelajaran pendukung, bukan sebagai media pembelajaran
utama.
1.4. Tujuan dan Manfaat Penelitian
1.4.1. Tujuan Penelitian

Tujuan dari penelitian ini adalah untuk membuat pengguna dapat
mempelajari biologi dengan lebih menarik dan meningkatkan minat
siswa terhadap materi yang diajarkan.

6
1.4.2. Manfaat Penelitian
Manfaat dari penelitian yang dilakukan ini yaitu:

a. Bagi Peneliti:
1. Mengetahui penerapan WebVR untuk media pembelajaran.
2. Mengetahui framework yang digunakan dalam
mengembangkan WebVR dan komponen-komponennya.
3. Menjadi referensi dalam membuat browser web yang akan
menggunakan WebVR.
b. Bagi Pengguna
1. Bagi pelajar dapat meningkatkan pemahaman dan minat mereka
pada materi pembelajaran.
2. Bagi guru dapat menjadi bentuk cara ajar alternatif yang dapat
menarik minat pelajar.
c. Bagi Universitas
1. Mengetahui kemampuan mahasiswa dalam menerapkan
ilmunya dan sebagai bahan evaluasi.
2. Memberikan gambaran tentang kesiapan mahasiswa dalam
menghadapi dunia kerja yang sebenarnya.
3. Menambah referensi literatur pustaka Universitas Negeri Islam
Syarif Hidayatullah Jakarta dan bahan masukan bagi mahasiwa
dalam pengembangan penulisan dan penelitian yang sejenis.
1.5. Metodologi Penelitian
Metode penelitian yang penulis gunakan dalam penelitian skripsi ini

adalah sebagai berikut:

7
1.5.1. Metode Pengumpulan Data
Berikut beberapa proses yang dilalui penulis dalam pengumpulan

data guna membantu dalam penelitian ini, yaitu:
1. Studi Pustaka
Penulis melakukan studi pustaka sebagai bahan dalam
pembuatan skripsi. Pengumpulan data diambil dari sumber-sumber
media cetak maupun elektronik yang dapat dijadikan acuan
penelitian dan penulisan skripsi ini.
2. Kuesioner
Penulis mengumpulkan data dengan menyebarkan
kuesioner atau angket berupa daftar pertanyaan yang sebelumnya
telah disusun oleh penulis. Responden akan menjawab daftar
pertanyaan dari angket-angket tersebut sehingga penulis dapat
memperoleh data atau gambaran terhadap masalah yang ada.
3. Wawancara
Penulis mengumpulkan data dengan tatap muka secara
langsung oleh narasumber yang terkait pada penelitian ini untuk
memperoleh data yang diperlukan.
1.5.2. Metode Pengembangan Aplikasi
Metode yang digunakan penulis dalam membuat aplikasi ini

adalah IMSDD (Interactive Multimedia System Design and
Development), tahapan-tahapannya adalah sebagai berikut:
1. Analisis Kebutuhan Sistem

2. Pertimbangan Desain
3. Implementasi
4. Evaluasi

8
1.6. Sistematika Penulisan
Agar penelitian dapat mengarah pada permasalahan secara runut dan

teratur dalam penyusunan dan penulisan, maka penulis menyusunnya ke
dalam lima bab. Setiap bab terdiri dari beberapa sub bab tersendiri dan kelima
bab tersebut saling berkaitan satu sama lain secara keseluruhan. Sebagaimana
penjelasan tiap bab terlampir dibawah ini:
BAB I PENDAHULUAN
Bab ini terdiri dari latar belakang, rumusan masalah, batasan
masalah, tujuan dan manfaat penelitian, metode penelitian, dan
sistematika penulisan.
BAB II LANDASAN TEORI
Pada bab ini akan diuraikan teori yang menjadi landasan karena akan
digunakan dan berhubungan erat dengan berbagai pokok landasan
berpikir yang relevan dengan topik penyusunan skripsi ini.
BAB III METODOLOGI PENELITIAN
Pada bab ini berisi tentang penjelasan metodologi penelitian yang
dipilih penulis untuk implementasi WebVR pada media
pembelajaran biologi tingkat SMA.
BAB IV PERANCANGAN SISTEM DAN IMPLEMENTASI
Bab ini berisi tentang pembahasan dan pemaparan mengenai
langkah – langkah perancangan hingga sampai proses pengujian
sistem sesuai dengan tahap metode IMSDD (Interactive Multimedia
System Design and Development), sebagai solusi dalam
menyelesaikan permasalahan.
BAB V HASIL DAN PEMBAHASAN
Bab ini berisi hasil dan pembahasam dari penelitian yang sudah
dilakukan.

9
BAB VI PENUTUP
Bab ini adalah bab terakhir yang berisi kesimpulan dari hasil
keseluruhan pembahasan serta berbagai saran yang kiranya dapat
bermanfaat untuk melakukan penelitian dan pengembangan lebih
lanjut.

10
BAB II
LANDASAN TEORI
2.1. Biologi
Biologi mempelajari tentang makhluk hidup, bagaimana interaksinya
satu sama lain, dan bagaimana interaksinya dengan lingkungan. Karakteristik
ilmu biologi ditentukan oleh objek yang dipelajari dan permasalahan yang
dikaji (Pratiwi et al. 2016:6).
2.1.1. Kingdom Animalia
Hewan atau Animalia (Latin, anima = jiwa) merupakan organisme

eukariotik (memiliki membran inti sel), multiseluler (bersel banyak), tidak
memiliki dinding sel, tidak berklorofil sehingga hidup sebagain organisme
heterotroph, dan dapat menggerakkan tubuh untuk mencari makan atau
mempertahankan diri dari musuh. Terdapat lebih dari satu juta spesies hewan
dengan bentuk dan struktur tubuh yang beraneka ragam. Hewan menempati
hampir semua lingkungan di bumi, namun sebagian besar spesies hewan
hidup di air (Irnaningtyas 2013:309–10).
(a) (b) (c)
Gambar 2.1. Beragam jenis hewan: (a) capung, (b) siput, (c) burung.
Sumber: (Irnaningtyas 2013:309)
Hewan dapat dikelompokkan berdasarkan ada tidaknya jaringan
penyusun tubuh, yaitu parazoa dan eumetazoa. Parazoa adalah hewan yang
tidak memiliki jaringan sejati seperti anggota filum porifora, sementara
eumetazoa adalah yang memiliki jaringan sejati seperti filum hewan lainnya
(Irnaningtyas 2013:310).

11
Hewan juga dapat dikelompokkan berdasarkan ada tidaknya tulang

belakang, yaitu Invertebrata (tidak bertulang belakang) dan Vertebrata
(memiliki tulang belakang) (Irnaningtyas 2013:311). Invertebrata
dikelempokkan menjadi delapan filum, yaitu Porifera, Ctenophora, Cnidaria,
Platyhelminthes, Nematoda, Annelida, Mollusca, Anthropoda, dan
Echinodermata. Sedangkan Vertebrata meliputi kelompok Pisces, Amphibia,
Reptilia, Aves, dan Mammalia (Irnaningtyas 2013:389). Selain invertebrata
dan vertebrata, hewan juga dapat dikelompokkan dalam filum Chordata
(memiliki korda dorsalis atau tali punggung) yang meliputi subfilum yaitu
Urochordata, Cephalochordata (Chordata yang tidak memiliki tulang
belakang), dan Vertebrata (Irnaningtyas 2013:311).
Gambar 2.2. Peta Konsep dari kingdom animalia

Sumber: (Irnaningtyas 2013:308)

12
2.2. Media Pembelajaran
Menurut Edgar Dale (1946) (dalam Wibawanto 2017:5), media

pembelajaran merupakan klasifikasi pengalaman menurut tingkat dari yang
paling konkrit ke yang paling abstrak, dimana partisipasi, observasi, dan
pengalaman langsung memberikan pengaruh yang sangat besar terhadap
pengalaman belajar yang diterima siswa. Penyampaian suatu konsep pada
siswa akan tersampaikan dengan baik jika konsep tersebut mengharuskan
siswa terlibat langsung didalamnya bila dibandingkan dengan konsep yang
hanya melibatkan siswa untuk mengamati saja.
Media pembelajaran adalah media kreatif yang digunakan dalam
memberikan materi pelajaran kepada anak didik sehingga proses belajar
mengajar lebih efektif, efisien dan menyenangkan (Wibawanto 2017:6).
Menurut Kustiawan (2016:8), secara garis besar fungsi media pembelajaran
1. Fungsi Umum:
Media sebagai pembawa pesan (materi) dari sumber pesan (guru) ke
penerima pesan (murid) dalam rangka mencapai tujuan
pembelajaran.
2. Fungsi Khusus:
a. untuk menarik perhatian murid
b. untuk memperjelas penyampaian pesan
c. untuk mengatasi keterbatasan ruang, waktu, dan biaya
d. untuk menghindari terjadinya verbalisme dan salah tafsir
e. untuk mengaktifkan dan mengefektifkan kegiatan belajar murid.
Perkembangan media pembelajaran seiring dengan perkembangan

teknologi, Seels dan Richey (dalam Azhar Arsyad, 2006) dalam Wibawanto
(2017:8) membagi media pembelajaran dalam empat kelompok berdasarkan
perkembangan teknologi, yaitu:

13
a. Media hasil teknologi cetak

Media hasil teknologi cetak adalah cara untuk menghasilkan atau
menyampaikan materi melalui proses pencetakan mekanis atau
fotografis. Kelompok media hasil teknologi cetak meliputi teks,
grafik, foto, dan representasi fotografik. Materi cetak dan visual
merupakan pengembangan dan penggunaan kebanyakan materi
pengajaran lainnya. Teknologi ini menghasilkan materi dalam
bentuk salinan tercetak, contohnya buku teks, modul, majalah, hand-
out, dan lain-lain.
b. Media hasil teknologi audio-visual
Media hasil teknologi audio-visual menghasilkan atau
menyampaikan materi dengan menggunakan mesin-mesin mekanis
dan elektronik untuk menyajikan pesan-pesan audio dan visual.
Contohnya proyektor film, televisi, video, dan sebagainya.
c. Media hasil teknologi berbasis komputer
Media hasil teknologi berbasis komputer merupakan cara
menghasilkan atau menyampaikan materi dengan menggunakan
sumber-sumber yang berbasis mikro-prosesor. Berbagai jenis
aplikasi teknologi berbasis komputer dalam pengajaran umumnya
dikenal sebagai computer-assisted instruction (pengajaran dengan
bantuan komputer).
d. Media hasil teknologi gabungan
Media hasil teknologi gabungan adalah cara untuk menghasilkan
atau menyampaikan materi yang menggabungkan beberapa bentuk
media yang dikendalikan oleh komputer. Perpaduan beberapa
teknologi ini dianggap teknik yang paling canggih. Contohnya:
teleconference, realitas maya (virtual reality).

14
2.3. Multimedia
Menurut Parekh (2013:1), kata multimedia berasal dari bahasa latin

“multus” yang berarti banyak atau beberapa dan “media” yang berarti
perantara. Karena itu multimedia dapat diartikan “beberapa perantara” atau
“beberapa cara”. Multimedia dalam arti secara umum yaitu “beberapa
perantara” antara sumber dan penerima informasi atau “beberapa cara”
dimana informasi disimpan, ditransmisikan, disajikan atau dirasakan. Berikut
cara dimana kita dapat merasakan informasi dan juga merupakan elemen
multimedia adalah:
1. Teks (contoh: buku, artikel koran)
2. Gambar (contoh: fotografi)
3. Grafik (contoh: sketsa, diagram)
4. Suara (contoh: pidato, musik)
5. Video (contoh: program TV, klip film)
6. Animasi (contoh: klip animasi)
Pengertian multimedia dapat berbeda dari sudut pandang orang yang

berbeda. Secara umum, multimedia berhubungan dengan penggunaan lebih
dari satu macam media untuk menyajikan informasi. Misalnya, video musik
adalah bentuk multimedia karena informasi menggunakan audio/suara dan
video. Berbeda dengan rekaman musik yang hanya menggunakan audio/suara
sehingga disebut monomedia (Munir 2012:2).
Menurut Munir (2012:4), secara singkat, dari beberapa definisi di atas,

multimedia dapat dibagi menjadi beberapa jenis atau kategori, yaitu:
a. Ada yang berbentuk network-online (internet) yaitu yang terhubung
dengan internet dan multimedia yang offline/stand alone
(tradisional) yang memeiliki penyimpanan, alat input, alat output,
VGA dan Soundcard.

15
b. Multimedia dibagi menjadi dua kategori, yaitu multimedia linier dan

multimedia interaktif. Multimedia linier adalah multimedia yang
tidak dilengkapi dengan alat pengontrol yang dapat dioperasikan
oleh pengguna, sepeti TV dan film. Multimedia interaktif adalah
multimedia yang dilengkapi dengan alat pengontrol yang dapat
dioperasikan oleh pengguna, seperti aplikasi game, dan lain-lain.
c. Merujuk pada elemen-elemen multimedia dan operasi yang bisa
dilakukan multimedia dapat dikategorikan menjadi:
 Multimedia bukan temporal (non-temporal multimedia). Jenis
multimedia ini tidak bergantung pada waktu. Multimedia ini
terdiri dari teks, grafik, dan gambar.
 Multimedia temporal (temporal multimedia). Jenis multimedia
ini bergantung pada waktu. Multimedia ini terdiri dari audio,
video dan animasi.
2.3.1. Multimedia dalam Pendidikan
Pada dekade 1960 komputer telah menghasilkan teks, suara,

dan grafik walaupun masih sangat sederhana sehingga bisa digunakan
dalam media pendidikan. Donald Bitzer sebagai Bapak PLATO
(Programmed Logic for Automated Teaching Operations)
mengembangkan pembelajaran berbasis komputer (CAI: Computer
Assisted Instruction) pada tahun 1966 di University of Illinois at
Urbana-Champaign. Uji coba pembelajaran berbasis komputer
pertama dilakukan pada tahun 1976 di sekolah Waterford Elementary
School. Sejak saat itu, pembelajaran berbasis komputer mulai
dipublikasikan dan digunakan di sekolah-sekolah umum sebagai
media pembelajaran berbasis komputer (Munir 2012:25).
Menurut Mishra dan Sharma (2005) (dalam Munir 2012:25),
mengatakan bahwa multimedia interaktif yang awalnya dipandang
sebagai pilihan teknologi dalam konteks pendidikan untuk alasan
sosial, ekonomi, dan pedagogis telah menjadi suatu kebutuhan dalam

16
pendidikan. Banyak lembaga pendidikan menginvestasikan waktu,

usaha dan uang mereka ke dalam penggunaan teknologi.
Penggunaan multimedia dalam pendidikan mempunyai
beberapa keistimewaan yang tidak dimiliki oleh media lain. Diantara
keistimewaan itu adalah (Munir 2012:27–28):
a. Multimedia mengintegrasikan berbagai media (teks, gambar,
suara, video dan animasi) dalam satu program secara secara
digital;
b. Multimedia menyediakan proses interaktif dan memberikan
kemudahan umpan balik;
c. Multimedia memberikan kebebasan kepada peserta didik dalam
menentukan materi pelajaran;
d. Multimedia memberikan kemudahan mengontrol yang sistematis
dalam pembelajaran.
2.4. Virtual Reality
Menurut situs website merrieam-webster.com (2015) (dalam Jerald

2016:9) Virtual Reality adalah sebuah lingkungan buatan yang dialami
melalui rangsangan sensorik (pemandangan dan suara) yang disediakan oleh
komputer dan dimana tindakan orang yang menggunakannya menentukan
apa yang terjadi di lingkungan tersebut. Sedangkan menurut Jerald (2016:9),
virtual reality didefinisikan sebagai sebuah lingkungan digital buatan
komputer yang dapat dialami dan berinteraksi seolah-olah lingkungan
tersebut nyata.
Virtual Reality memiliki satu tujuan, untuk meyakinkan penggunanya
bahwa mereka ada di tempat lain. Virtual Reality melakukannya dengan
menipu otak manusia khususnya korteks visual dan bagian otak yang
merasakan gerak. Berbagai teknologi bekerja sama untuk menciptakan ilusi
ini, termasuk (Parisi 2015:9):

17
 Tampilan stereoskopis: Juga disebut 3D Displays, head mounted displays

(HMDs) atau VR mounts. Tampilan ini menggunakan kombinasi
beberapa gambar, distorsi optik yang realistis, dan lensa khusus yang
membuat mata kita tafsirkan memiliki kedalaman tiga dimensi.
 Motion Tracking Hardware: Giroskop, akselerometer dan komponen
lainnya untuk merasakan ketika tubuh kita bergerak dan kepala kita
berputar sehingga dapat memperbarui pandangan kita ke dalam
pemandangan 3D.
 Perangkat Masukan: Virtual Reality menciptakan tipe perangkat
masukan baru diluar keyboard dan mouse, termasuk game controllers
dan sensor pelacak tangan dan tubuh yang dapat mengenali gerakan.
 Platform Desktop dan Mobile: Termasuk perangkat keras komputer,
sistem operasi, perangkat lunak untuk antarmuka ke perangkat, kerangka
kerja dan mesin yang menjalankan aplikasi, dan alat perangkat lunak
untuk membangunnya.
Gambar 2.3. Beberapa HMDs (VR mounts) dengan pengguna seiring waktu
Sumber: Ellis (2014) (dalam Jerald 2016:16)

18
Meskipun teknologi ini masih baru, virtual reality sudah digunakan

dalam sejumlah aplikasi seperti game, edukasi, pariwisata (menunjukkan foto
360 panorama), arsitektur, konser-konser, dan situs web. Developers juga
menciptakan produktivitas dan aplikasi perusahaan untuk meningkatkan nilai
bisnis (Parisi 2015:14–16).
Ada dua jenis dasar penyetelan hardware untuk merasakan virtual
reality yang utama, yaitu (Neelakantam & Pant 2017:2):
a. Computer-based: dalam penyetelan VR ini, sensor posisi dan HMD
terkoneksi pada sistem komputer dan berbagai peralatan VR menggunakan
sistem komputer untuk memproses pekerjaannya.
Gambar 2.4. Penyetelan VR Computer-based

Sumber: (Neelakantam & Pant 2017:2)
b. Mobile-based: penyetelan VR berbasis mobile (mobile-based) ini hanya
terdiri dari HMD dan dibangun dengan bantuan smartphone, yang
berfungsi sebagai layar serta memberikan output suara. Penyetelan ini
menggunakan VR mount, yang menahan smartphone dan berisi lensa
untuk menyampaikan tampilan stereoskopik kepada pengguna.
Gambar 2.5. Penyetelan VR mobile-based


19
2.4.1. WebVR
Menurut situs resmi WebVR (WebVR.info), dijelaskan bahwa

WebVR adalah spesifikasi terbuka yang membuat kita dapat
merasakan VR melalui browser. Tujuannya ialah membuat semua
orang dapat merasakan VR, apapun perangkat yang dimilikinya.
Pertama kali disusun pada musim semi 2014 di Mozilla,
WebVR adalah sebuah JavaScript application programming interface
(API) eksperimental yang menyediakan dukungan untuk berbagai
macam perangkat virtual reality melalui web browser. WebVR mudah
untuk dirasakan atau digunakan karena bekerja pada smartphone
kebanyakan, dimana user’s experience terjadi sepenuhnya di dalam
web browser. Anda tinggal mengirim tautan ke seseorang untuk
membagikan pengalaman WebVR berbasis web anda kepada mereka
(Neelakantam & Pant 2017:3).
Browser awalnya sudah memiliki kemampuan untuk
merenderkan real-time 3D menggunakan WebGL, sebuah standar
API untuk rendering grafis 3D menggunakan JavaScript. Dan ternyata
menambahkan VR ke browser sebenarnya sangat diperlukan sedikit
modifikasi. WebVR API terdiri dari inovasi-inovasi oleh browser ini
(Parisi 2015:78):
 Mengkoneksikan ke perangkat VR: Browser menyediakan

API untuk developer agar terhubung ke perangkat VR yang
terpasang ke komputer.
 Mode fullscreen VR: Browser web sudah memiliki mode
fullscreen untuk mendukung pengembangan game. Mode ini
diperluas agar secara otomatis meletakkan perangkat VR,
misalnya Rift, ke mode driver video yang benar pada komputer.
 Head Tracking: API JavaScript baru untuk melacak posisi dan
orientasi kepala sehingga kita dapat menyesuaikan kamera
setiap frame sebelum kita render.

20
Sejauh ini sudah ada beberapa frameworks dan tools yang

tersedia untuk membuat sebuah WebVR, beberapa diantaranya adalah
(Neelakantam & Pant 2017:6):
1. A-Frame: sebuah framework WebVR yang bersifat open source,

di kembangkan oleh MozVR team untuk membuat virtual
reality experiences melalui HTML.
2. WebVR-Boilerplate: adalah sebuah titik awal untuk WebVR
berbasis three.js. Proyek ini menggunakan webvr-polyfill, yang
merupakan implementasi JavaScript dari spesifikasi WebVR.
Webvr-polyfill memungkinkan kita melihat konten yang sama
walau tanpa VR viewer. A-Frame menggunakan tools ini.
3. Vizor: adalah platform online untuk membuat dan menerbitkan
konten WebVR. Vizor memungkinkan kita melihat konten tiga
dimensi dalam virtual reality di ponsel anda atau dalam dua
dimensi di browser web atau di tablet anda.
2.5. A-Frame
A-Frame merupakan sebuah framework WebVR untuk

mengimplementasikan virtual reality dengan lebih cepat dan lebih mudah
dengan membiarkan anda mengkodekan lewat HTML tanpa harus
mengetahui WebGL (Neelakantam & Pant 2017:17).
Gambar 2.6. Logo A-Frame yang mengilustrasikan objek 3D yang simpel


21
Menurut situs resmi A-Frame (A-Frame.io), A-Frame adalah kerangka

web untuk membangun virtual reality (VR) experiences. Berasal dari
Mozilla, A-Frame dikembangkan untuk menjadi cara yang mudah namun
ampuh untuk mengembangkan konten VR. Sebagai proyek open source yang
independen, A-Frame telah berkembang menjadi salah satu komunitas VR
terbesar dan paling ramah.
A-Frame hadir dalam building blocks dasar untuk suasana VR, seperti
model, langit, kursor, animasi, dan sebagainya. Cara mengimplementasikan
A-Frame di HTML adalah dengan sebuah tag khusus yaitu <a-scene> yang
menampung semua konten VR. Tentunya sebelum mengkode anda perlu
memasukkan JavaScript build script di tag <head> (Neelakantam & Pant
2017:18).
Gambar 2.7. Contoh pengkodean “Hello World” menggunakan A-Frame (kiri)

dan hasil yang muncul di browser (kanan)
A-Frame dibangun pada sistem entitas-komponen (ECS). Hal ini

biasanya digunakan oleh pengembang game dan biasanya menekankan
hubungan antar komponen. Entitas adalah placeholder generik yang tidak
memiliki fungsi dengan sendirinya, tetapi memungkinkan kita untuk
mengaitkan berbagai komponen dengannya untuk membuat penampilan dan
fungsi yang diperlukan. Komponen menambahkan detail spesifik ke entitas
tempat mereka dimasukkan (Neelakantam & Pant 2017:20).

22
Komponen hanyalah setumpuk data yang menggambarkan atribut dari

suatu entitas. Kita menggunakan atribut ini untuk mengubah tampilan dan
fungsi entitas. Misalnya, mobil adalah entitas, dan jumlah roda gigi, tenaga
kuda, dan sebagainya, adalah atributnya (Neelakantam & Pant 2017:21)
A-Frame juga menyediakan beberapa elemen seperti <a-box> atau <a-
sky> yang disebut primitives. Primitives membungkus pola entitas-
komponen untuk membuatnya menarik bagi pemula (A-Frame.io). Primitives
memiliki nama semantik seperti <a-box>. Mereka adalah entitas yang
memiliki komponen yang telah disetel dengan beberapa nilai atribut default.
Mereka bertindak sebagai tools singkat untuk menyederhanakan entitas
umum yang sulit diterapkan (Neelakantam & Pant 2017:22).
Berikut adalah macam-macam primitives yang diawarkan oleh A-

Frame API:
Tabel 2.1. Macam-macam primitives dalam A-Frame API dengan contoh

pengkodean dan beberapa outputnya
Sumber: (Neelakantam & Pant 2017:22–35)
Nama
Fungsi Contoh pengkodean dan outputnya
Primitive
Membuat kotak
<a-box>
(kubus, bata, dll)
Menaruh kamera
<a-camera> di posisi yang
diinginkan

23
Nama
Primitive
Menambahkan
fitur untuk dapat
<a-cursor>
mengklik di
WebVR
Membuat
<a-circle>
lingkaran
<a-collada Memasukkan 3D
model> Collada models
<a-cone> Membuat kerucut

24
Nama
Primitive
<a- Melengkungkan
curvedimag gambar untuk 360
e> VR scene
<a-
Membuat tabung
cylinder>
<a-
Membuat model
dodecahedr
3D dengan 12 sisi
on>
Menambah
<a-image> gambar di
permukaan datar
Menyesuaikan
<a-light> pencahayaan di A-
Frame scene

25
Nama
Primitive
Memasukkan .obj
<a-obj-
model (bersamaan
model>
dg .mtl nya)
<a- Membuat 3D
octahedron model dengan 8
> sisi segitiga
Membuat
<a-plane>
permukaan datar
Membuat bentuk
<a-ring>
cincin
Menambah
gambar 360
<a-sky>
derajat sebagai
latar belakang

26
Nama
Primitive
<a-sound> Menambah suara
Menambah bidang
<a-sphere> bola, terdapat
warna & pola
<a-
Menambah
tetrahedron
piramida
>
Menambah bentuk
<a-torus> yang menyerupai
donat
Menambah bentuk
<a-torus-
yang menyerupai
knot>
pretzel
Menambah video
<a-video> untuk permukaan
datar

27
Nama
Primitive
<a-
Menambah video
videosphere
untuk layar 360
>
2.6. HTML5
HTML5 adalah versi terbaru dan terbesar dari bahasa inti World Wide
Web dan merupakan salah satu perkembangan paling menarik yang terjadi di
web dan komunitas web dalam waktu yang lama. HTML (HyperText Markup
Language) adalah bahasa yang telah menjadi jantung dari semua dokumen
web sejak konsepsinya di awal 1990-an. HTML5 juga mengubah makna dari
beberapa elemen HTML yang ada, menghapus yang lain, dan yang lebih
penting, menambahkan yang baru — beberapa di antaranya memungkinkan
anda untuk menyediakan lebih banyak makna semantik ke konten anda
(Devlin 2012:2).
2.7. Perangkat Keras Pendukung
2.7.1. Xiaomi Redmi Note 3
Xiaomi Redmi Note 3 adalah smartphone yang diproduksi oleh

Xiaomi Inc. Smartphone ini memiliki prosesor Snapdragon 650,
sensor fingerprint, baterai sebesar 4050mAh dengan berat sebesar 164
gram. Smartphone ini dilengkapi sensor kompas, sensor gravitasi,
sensor cahaya dan gyroscope sehingga dapat digunakan untuk VR.
Xiaomi Redmi Note 3 menggunakan sistem operasi Android 6.0
berbasis MIUI 7 yang semuanya telah mendukung VR (Mi.com).

28
2.8. Perangkat Lunak Pendukung
2.8.1. XAMPP
XAMPP adalah al-in-one kit populer yang menginstal Apache,

MySQL, dan PHP dalam satu prosedur. XAMPP dimaksudkan
sebagai lingkungan pengembangan komputer lokal. Sebagai
lingkungan pengembangan, XAMPP dikonfigurasi untuk menjadi
seterbuka mungkin. XAMPP tidak dimaksudkan untuk penggunaan
produksi - tidak aman sebagai lingkungan produksi. Sebelum
menggunakan XAMPP untuk membuat situs web tersedia untuk
umum, web perlu diamankan dulu (Suehring dan Valade 2013:75)
2.8.2. Blender
Menurut situs resmi Blender (Blender.org), Blender adalah

kreasi rangkaian 3D gratis dan open source. Blender mendukung
keseluruhan dari 3D pipeline - pemodelan, rigging, animasi, simulasi,
rendering, compositing dan motion tracking, bahkan editing video dan
pembuatan game.
2.8.3. Adobe Photoshop
Adobe Photoshop, merupakan sebuah program yang sangat

terkenal di karangan para desainer grafis dan fotografer. Karena
kecanggihan dan fasilitasnya yang lengkap, maka Adobe Photoshop
menjadi pilihan pertama untuk memanipulasi gambar atau foto
menjadi sebuah hasil karya yang indah dan menakjubkan (Madcoms
2012:2).

29
2.9. Metode Pengembangan Aplikasi Multimedia
Pembuatan WebVR ini dikembangkan dengan menggunakan tahapan

desain dan pengembangan multimedia interaktif yang disebut IMSDD
(Interactive Multimedia System Design and Development).
Dalam IMSDD (Interactive Multimedia System Design and
Development) atau pengembangan dan desain sistem multimedia interaktif
terdapat empat tahapan yaitu (Dastbaz 2003:130–32):
Fase ini mirip seperti fase spesifikasi kebutuhan dalam model

waterfall, fase ini memberikan definisi sistem seperti membuat tujuan
secara garis besar dan sasaran dari sistem yang sedang dirancang. Fungsi
dari fase ini adalah:
 Untuk memberikan definisi dari sistem seperti membuat garis besar
tujuan dan sasaran dari sistem yang sedang dirancang.
 Untuk memverifikasi siapakah user yang akan menggunakan sistem
tersebut dan jika ada persyaratan khusus lainnya yang perlu
dipertimbangkan.
 Evaluasi perangkat keras, perangkat lunak, dan tools yang
diperlukan dan dipilih dengan tepat.
 Mempertimbangkan platform penyajian yang tepat yang dibutuhkan
oleh sistem.
Tujuan dari fase ini adalah untuk mendeskripsikan secara detail

pedoman-pedoman desain, tahapan-tahapan yaitu:
a. Desain Metafora
Memilih model nyata yang akan digunakan sebagai solusi utama
untuk desain antarmuka sistem, misal film, buku, game dll.

30
b. Format dan Tipe dari Informasi

Mendefinisikan tipe dari informasi yang dibutuhkan untuk
dintegrasikan kedalam sistem, misal jika kita membuat multimedia
interaktif dalam film atau bioskop maka format video adalah yang
paling berkontribusi.
c. Struktur Navigasi
Menjelaskan strategi navigasi dengan jelas, yang mencakup struktur
dari hubungan dan fitur untuk menghindari masalah yang
berhubungan dengan sistem seperti disorientasi.
d. Sistem Kontrol
Mendeskripsikan tipe dan fitur dari kontrol dan peralatan yang
dibutuhkan sistem
3. Implementasi
Ketika fitur desain telah ditentukan maka fase implementasi sistem
memulai multimedia tools. Fase ini terdiri dari:
a. Membuat Prototype (purwarupa) dari sistem
b. Melakukan beta testing pada purwarupa untuk mencari masalah
yang mungkin berasal dari kontrol atau desain
4. Evaluasi
Pada tahap ini sistem dievaluasi terhadap tujuan sebelumnya
menggunakan prinsip-prinsip atau panduan yang telah dikemukakan ahli.

31
Gambar 2.8. Siklus dari IMSDD

Sumber: (Dastbaz 2003)
2.10. Storyboard
Storyboard merupakan teknik yang telah digunakan bertahun-tahun

dalam industri film. Serangkaian gambar digunakan sutradara dengan alat
visual untuk melihat bagaimana cerita dalam film berkembang adegan demi
adegan. Storyboard juga merupakan teknik yang berguna untuk
memvisualisasikan user interface dalam sebuah multimedia interaktif
(Dastbaz 2003:134).
Menurut Vaughan (2011:300), gambar arsitektural untuk proyek
multimedia adalah storyboard dan peta navigasi. Storyboard dan peta
navigasi adalah suatu kesatuan selama proses desain, dan membantu
memvisualisasikan arsitektur informasi.

32
Gambar 2.9. Contoh sebuah storyboard (sebelah kiri) dan hasil UI yang
sebenarnya (sebelah kanan)
Sumber: (Vaughan 2011:301)
2.11. Beta Testing
Beta test (pengujian beta) sering dikatakan sebagai “user test”.

Pengujian beta adalah distribusi terkelola dari suatu produk ke pasar
targetnya. Pengujian beta biasanya meminta pelanggan perusahaan untuk
berpartisipasi dalam pengujian produk sebelum peluncurannya (Fine
2002:11).
Menurut Fine (2002:11), pengujian beta bukanlah sebuah lingkungan
laboratorium. Seringkali, pengujian beta akan menemukan masalah yang
tidak dapat ditemukan atau bahkan diduplikasi di laboratorium uji. Sifat
eklektik dan beragam dari para peserta tes beta sering mengeksploitasi
keterbatasan dalam produk dan menguji seluruh proses pengembangan
produk.

33
2.12. The Eight Golden Rules of Interface Design
Delapan prinsip atau biasa disebut oleh “golden rules” dapat

diaplikasikan pada sistem interaktif kebanyakan. Prinsip-prinsip ini berasal
dari pengalaman dan disempurnakan selama dua dekade, membutuhkan
validasi dan penyetelan untuk domain desain khusus. Tidak ada daftar seperti
ini yang bisa lengkap, tetapi telah diterima dengan baik sebagai panduan yang
berguna untuk siswa dan desainer (Shneiderman dan Plaisant 2016:74).
Berikut kedelapan prinsip golden rules menurut Shneiderman dan

Plaisant 2016:74–75 :
a. Strive for Consistency

Aturan ini adalah yang paling sering dilanggar, tetapi
mengikutinya bisa jadi rumit karena ada banyak bentuk
konsistensi. Urutan tindakan yang konsisten harus diperlukan
dalam situasi yang serupa; terminologi identik harus digunakan
dalam petunjuk, menu, dan layar bantuan; dan warna yang
konsisten, tata letak, kapitalisasi, font, dan sebagainya harus
digunakan sepanjang waktu.
b. Cater to Universability
Kenali kebutuhan pengguna dan desain untuk plastisitas,
fasilitasi transformasi isi. Perbedaan keahlian, rentang usia, cacat,
dan keragaman teknologi masing-masing memperkaya spektrum
persyaratan yang memandu desain. Menambahkan fitur untuk
pemula, seperti penjelasan, dan fitur untuk para ahli, seperti
shortcuts dan tempo yang lebih cepat, dapat memperkaya desain
antarmuka dan meningkatkan kualitas sistem yang dirasakan.
c. Offer Informative Feedback
Untuk setiap tindakan pengguna, harus ada umpan balik
sistem. Untuk tindakan yang sering dan kecil, responsnya bisa

34
sederhana, sedangkan untuk tindakan yang jarang dan besar,

responsnya harus lebih substansial. Presentasi visual dari objek
yang menarik memberikan lingkungan yang nyaman untuk
perubahan secara eksplisit.
d. Design Dialogs to Yield Closure
Umpan balik yang informatif pada penyelesaian suatu
kelompok tindakan memberi operator kepuasan atas penyelesaian,
rasa lega, sinyal untuk menjatuhkan rencana darurat dari pikiran
mereka, dan sinyal untuk mempersiapkan kelompok tindakan
berikutnya.
e. Prevent Errors
Sebisa mungkin rancang sistem dimana pengguna tidak
dapat melakukan kesalahan serius; misal menu-menu yang tidak
diperlukan dan jangan sampai ada karakter alfabet ketika
melakukan input data numerik. Jika pengguna melakukan
kesalahan, interface seharusnya seharusnya dapat mendeteksi
kesalahan dan menawarkan instruksi yang sederhana, konstruktif,
dan spesifik untuk pemulihan.
f. Permit Easy Reversal of Actions
Sebisa mungkin, tindakan harus dapat dikembalikan. Fitur
ini mengurangi kecemasan, karena pengguna tahu bahwa
kesalahan dapat diurungkan, sehingga mendorong eksplorasi opsi
yang tidak dikenal.
g. Support Internal Locus of Control
Operator yang berpengalaman sangat menginginkan
pengertian bahwa mereka bertanggung jawab atas antarmuka dan
bahwa antarmuka menanggapi tindakan mereka. Tindakan
antarmuka yang mengejutkan, urutan entri data yang
membosankan, ketidakmampuan untuk mendapatkan atau
kesulitan dalam memperoleh informasi yang diperlukan, dan

35
ketidakmampuan untuk menghasilkan tindakan yang diinginkan

semua membangun kecemasan dan ketidakpuasan.
h. Reduce Short-term Memory Load
Keterbatasan proses informasi manusia dalam memori
jangka pendek (aturan dasarnya adalah bahwa manusia dapat
mengingat "tujuh plus atau minus dua bongkahan" informasi)
mensyaratkan agar tampilan tetap sederhana, tampilan multi-
halaman dikonsolidasi, frekuensi gerakan-jendela dikurangi, dan
waktu pelatihan yang cukup diberikan untuk kode, mnemonik, dan
urutan reaksi. Apabila diperlukan, akses online ke formulir,
singkatan, kode, dan informasi perintah-sintaksis lainnya harus
disediakan.
2.13. Metode Pengumpulan Data
2.13.1. Studi Pustaka
Studi pustaka adalah kajian teoritis, referensi serta literatur ilmiah

lainnya yang berkaitan dengan budaya, nilai dan norma yang berkembang
pada situasi sosial yang diteliti (Sugiyono 2012:291).
2.13.2. Kuesioner
Metode angket disebut pula sebagai metode kuesioner. Metode angket

merupakan serangkaian atau daftar pertanyaan yang disusun secara
sistematis, kemudian dikirim untuk diisi oleh responden. Setelah diisi, angket
dikirim kembali atau dikembalikan ke petugas atau peneliti (Bungin
2014:133).
Menurut Noor (2016: 147) dalam penelitian, populasi digunakan untuk

menyebutkan seluruh elemen/anggota dari suatu wilayah yang menjadi
sasaran penelitian atau merupakan keseluruhan (universum) dari objek
penelitian.

36
Menurut Noor (2016: 148) pengambilan sampel (sampling) adalah

proses memilih sejumlah elemen secukupnya dari populasi, sehingga
penelitian terhadap sampel dan pemahaman tentang sifat atau
karakteristiknya merupakan pilihan ideal yang akan digeneralisasi oleh
peneliti. Jumlah sampel yang diambil pada penelitian ini didapatkan
menggunakan rumus Slovin sebagai berikut:
𝑁
𝑛=
1 + 𝑁𝑒 2
Keterangan:
n = ukuran sampel
N= ukuran populasi
e = kelonggaran ketidaktelitian karena kesalahan pengambilan sampel yang
ditololerir, misalnya 1%, 2%, 5%, 10%... (catatan: batas kesalahan ditentukan
oleh peneliti)
Dalam teknik sampling Proportionate Stratified Random Sampling,

untuk menentukan jumlah sampel di tiap kelas digunakan rumus (Noor
2016:152):
𝑝𝑜𝑝𝑢𝑙𝑎𝑠𝑖 𝑘𝑒𝑙𝑎𝑠
𝐽𝑢𝑚𝑙𝑎ℎ 𝑠𝑎𝑚𝑝𝑒𝑙 𝑡𝑖𝑎𝑝 𝑘𝑒𝑙𝑎𝑠 = × 𝑗𝑢𝑚𝑙𝑎ℎ 𝑠𝑎𝑚𝑝𝑒𝑙
𝑝𝑜𝑝𝑢𝑙𝑎𝑠𝑖 𝑡𝑜𝑡𝑎𝑙
2.13.3. Wawancara
Wawancara adalah teknik pengumpulan data dengan cara menanyakan

sesuatu kepada seseorang yang menjadi informan dengan bercakap-cakap
secara tatap muka (Afifuddin & Saebani 2012:141 dalam Sugiarto 2015:88).

37
2.14. Studi Literatur Sejenis
Pada bagian ini, penulis telah mengumpulkan 5 penelitian sejenis. Dalam sub bab ini, penulis akan menjelaskan proses,
metode, tools, kelebihan, dan kekurangan yang nantinya akan dijadikan bahan pertimbangan penulis dan acuan untuk
menghasilkan output yang lebih baik.
Tabel 2.2. Studi Literatur Sejenis
No Jurnal / Skripsi Proses Tools Kelebihan Kekurangan

1. Judul : Website menampilkan Website dibuat  Menggunakan Web VR  Jangkauan
Website Galeri Seni Lukis informasi dan menggunakan HTML5 dan yang mudah digunakan untuk
Virtual Berbasis Web Browser visualisasi tiga dimensi Aframe.js. Objek galeri dan sudah menggunakan menjelajahi
pada Smartphone galeri seni lukis dalam seni lukis virtual dirancang framework AFrame objek VR
Oleh : bentuk Virtual Reality menggunakan Blender 3D.  Tampilan museum 3D sangat terbatas
Radhi Al Hamid (Gunadarma) lewat website. nya menarik
Tahun : (2016)
2. Judul : Menampilkan sebuah Dibuat menggunakan  NCSLab menggunakan  Cara

Implementation of WebVR-based laboratorium untuk HTML5 dan NCSLab. Three.js untuk 3D mengakses
Laboratory for Control teknik kontrol berbasis Objek 3D modeling dibuat graphic engine yang WebVR tidak
Engineering WebVR dengan menggunakan 3ds Max. memiliki performa hebat secara
Education based on NCSLab menggunakan untuk rendering 3D langsung tapi
Framework framework NCSLab menggunakan
37
38
No Jurnal / Skripsi Proses Tools Kelebihan Kekurangan

Oleh : interaktif membuat QR code dari
Quan Ye, Wenshan Hu, Hong animasi lebih baik aplikasi
Zhou (Wuhan University) laboratorium yang
Tahun : (2017) ada
3. Judul : Sebuah konsep Prototype virtual lab dibuat  Fungsi-fungsi dalam  Masih berupa
Web-based VR engine in eksperimental untuk dengan HTML5, PHP, dan virtual labnya sangat konsep dan
electrical engineering: a implementasi engine MySql detail tampilan virtual
proof of concept WebVR dalam simulasi  Bentuk alat dalam lab nya masih
Oleh : laboratorium teknik virtual lab sangat sangat
Boris I. Evstatiev, Katerina G. elektro. menyerupai yang asli sederhana

Gabrovska-Evstatieva, Teodor B.  Belum ada
Iliev and Ivaylo S. Stoyanov framework
(University of Ruse Angel dalam
Kanchev) developingnya
Tahun : (2017)
38
39
No Jurnal / Skripsi Proses Metode Kelebihan Kekurangan

4. Judul: Pengembangan game Game dikembangan  Game memiliki  Spesifikasi
Game Edukasi “Penjelajah” edukasi VR untuk menggunakan Unity 3D, tampilan dan fitur yang untuk
Berbasis Virtual Reality mengenal benda benda streamVR SDK dan menarik memainkan
Oleh : pra sejarah untuk pelajar Blender ntuk modelling 3D.  Ada banyak level dalam game ini berat,
Robby Wijaya Khoerniawan dan mahasiswa game dan tampilan yang membuatnya
Universitas Pendidikan Ganesha) cukup detail kurang fleksibel
Tahun : (2018) untuk
dimainkan
5. Judul : Menggunakan Membuat multimedia  Isi dari materi sangatlah  AR
Implementasi Augmented Reality Augmented reality pembelajaran AR dengan detail dan membantu. menggunakan
Pada Pengembangan Media dalam pembelajaran Openspace3D dan Ulead  Kaya akan berbagai tipe marker
Pembelajaran Interaktif Materi fotosinesis untuk kelas Video Studio 11, informasi. sehingga kurang
Fotosintesis Untuk Siswa Kelas 5 5 SD dengan metode dikembangkan fleksibel untuk
SD Budi Luhur Pondok Aren IMSDD menggunakan metode digunakan

Oleh : IMSDD  Belum ada
Fenty E.M.A, Rayi Pradono I. framework
dan Dewi Nurochmah dalam
Tahun : (2014) developingnya
39
40
Dari beberapa penelitian sejenis yang dijadikan perbandingan dalam

penelitian ini, terdapat beberapa kekurangan yang kemudian dijadikan sebagai
acuan untuk pengembangan yang lebih baik pada aplikasi yang dirancang ini. Dari
hasil studi penelitian sejenis yang dilakukan, maka dapat disimpulkan beberapa
kelebihan pada penelitian ini, yaitu sebagai berikut :
1. Aplikasi ini menggunakan Web-based Virtual Reality (WebVR) yang mudah

diakses tanpa mengunduh aplikasi apapun, dan dapat digunakan pada multi-
platform. Namun pada pengembangan ini penulis memfokuskan pada
penyajian dalam bentuk mobile-based VR di smartphone dengan menggunakan
VR mount.
2. Aplikasi ini menggunakan framework A-Frame yang mempermudah dan
mempercepat dalam pembuatan WebVR dengan pengkodean HTML serta
bersifat open source sehingga tidak mengeluarkan biaya tambahan dalam
pengembangannya.
3. Aplikasi ini menggunakan IMSDD (Interactive Multimedia System Design and
Development) sebagai metode pengembangan aplikasi.
4. Materi yang ada di dalam aplikasi adalah salah satu dari materi biologi yang
diajarkan di kelas X SMA yaitu materi Kingdom Animalia, dipilih berdasarkan
wawancara dengan guru biologi dan mengikuti materi kurikulum yang berlaku.

41
BAB III
METODOLOGI PENELITIAN
Bab ini akan menjelaskan metode-metode penelitian yang digunakan oleh

penulis untuk mendapatkan hasil yang semaksimal mungkin dalam hal
pengumpulan data, informasi, dan metode pengembangan sistem untuk
mengimplementasi WebVR (virtual reality berbasis browser web) pada media
pembelajaran biologi tingkat SMA.
3.1. Metode Pengumpulan Data
Metode-metode pengumpulan data yang digunakan penulis dalam

penelitian ini meliputi tiga tahap, yaitu studi pustaka, wawancara, dan
kuesioner.
3.1.1. Studi Pustaka
Sumber-sumber data dan informasi yang penulis gunakan

sebagai studi pustaka dalam penelitian ini ialah sebanyak 32 sumber
yang merupakan 21 buku dan e-book, 5 jurnal dan skripsi dan 6 website.
Daftar lengkap untuk studi pustaka yang digunakan dalam penelitian
ini dapat dilihat pada daftar pustaka.
3.1.2. Kuesioner
Metode ini dilakukan untuk mendapatkan data dengan

menyebarkan kuesioner atau angket berupa beberapa pertanyaan pada
responden agar hasilnya lebih objektif.
Form kuesioner dapat dilihat pada halaman lampiran. Adapun
kuesioner yang disebarkan penulis adalah:
a. Kuesioner penelitian, kuesioner ini dilakukan penulis bertujuan
untuk mengetahui keadaan media pembelajaran yang
digunakan siswa sekarang dan bagaimana pendapat mereka jika

42
ada media pembelajaran baru yang memanfaatkan smartphone

mereka.
b. Kuesioner hasil, kuesioner ini dilakukan penulis untuk tahap
pengujian beta setelah aplikasi rampung. Kuesioner bertujuan
untuk mengetahui pendapat siswa setelah menggunakan
aplikasi, Untuk mengetahui pendapat mereka tentang manfaat,
dan pemahaman tentang materi pelajaran yang mereka
dapatkan.
Jumlah responden yang akan digunakan pada penelitian ini

diambil dengan menggunakan teknik sampling, yaitu Proportionate
Stratified Random Sampling dikarenakan populasi yang ada memiliki
strata (tingkatan) juga agar penulis mendapat sampel yang proporsional
dari tiap tingkatan. Sedangkan perhitungan sampel menggunakan
rumus slovin. Studi kasus pada penelitian ini bertempat di SMA Negeri
49 Jakarta.
Populasi dalam penelitian ini adalah seluruh siswa kelas X jurusan

MIPA di SMA Negeri 49 Jakarta yang dibagi menjadi empat kelas
(empat strata), yaitu Kelas X MIPA 1, Kelas X MIPA 2, Kelas X MIPA
3 dan Kelas X MIPA 4 yang tiap kelasnya berjumlah 36 siswa dan
seluruhnya berjumlah 144 siswa.
Penulis menentukan nilai tingkat kesalahan e = 10%, jumlah

populasi N = 144 siswa, maka didapatkan jumlah sampel adalah
sebanyak:
144 144
𝑛= = = 59.016 ≅ 60
1 + 144 ∗ 0.12 2.44
Dari perhitungan diatas didapat jumlah sampel dari populasi yang

diperlukan adalah sebanyak 60 siswa. Setelah didapat besar sampel,
populasi sendiri terbagi ke dalam empat bagian (kelas X MIPA 1, 2, 3
dan 4) yang masing-masing berjumlah 36 siswa.

43
Tabel 3.1. Perhitungan Sampel Populasi Kelas X MIPA SMA Negeri

49 Jakarta
No Nama Kelas Perhitungan Hasil

36
1. Kelas X MIPA 1 × 60 15
144
36
144
36
144
36
144
Total jumlah sampel 60
3.1.3. Wawancara
Pada metode ini, peneliti mewawancarai seorang narasumber

dari pihak SMA Negeri 49, yaitu ibu Tri Fitrayanti, selaku guru mata
pelajaran Biologi. Wawancara ini dilakukan guna mendapatkan
informasi yang dibutuhkan dalam melakukan penelitian ini. Adapun isi
wawancara terlampir pada lampiran.
3.2. Metode Pengembangan Sistem
Sebuah sistem multimedia interaktif membutuhkan perencanaan yang

matang dalam hal struktur navigasi dan pendekatan desain yang sesuai. Maka
dari itu penulis menggunakan IMSDD (Interactive Multimedia System design
and development) yang merepresentasikan semua tahap yang dibutuhkan
dalam mengembangkan multimedia interaktif VR ini. Fase-fase dalam
IMSDD adalah sebagai berikut:

44
Fase ini menjelaskan definisi sistem secara umum, pengguna yang

akan menggunakan sistem, mengevaluasi hardware, software dan tools
yang akan digunakan dalam pengembangan sistem juga
mempertimbangkan delivery platform yang dibutuhkan oleh sistem. Pada
pengembangan WebVR media pembelajaran biologi ini, penulis
merencanakan kebutuhan sistem antara lain:
 Mendefinisikan sistem yang akan dibangun, yaitu merupakan

sebuah media pembelajaran biologi dalam bentuk Virtual Reality
berbasis web.
 Menentukan target user dan kebutuhannya, target dari media
pembelajaran ini adalah pelajar SMA, khususnya pada jurusan
MIPA yang mempelajari biologi.
 Mengevaluasi hardware, software, dan tools. Karena sistem yang
dibuat merupakan WebVR, maka beberapa perangkat keras dan
lunak yang digunakan adalah yang memenuhi spesifikasi
pengembangan WebVR.
 Mempertimbangkan delivery platform yang akan dibutuhkan
sistem.
Pada fase ini akan mendeskripsikan secara detail pedoman-pedoman
desain. Dalam pengembangan aplikasi ini, penulis melakukan tahapan-
tahapan sebagai berikut:
a. Desain Metafora
Dalam pengembangan media pembelajaran ini, model metafora yang
digunakan penulis adalah museum.
b. Format dan Tipe dari Informasi
Format dan tipe dari informasi yang digunakan pada WebVR ini

45
1. Teks: Informasi yang berupa kata-kata, disampaikan pada user di

berbagai objek, seperti di judul, petunjuk, materi, dan semua
informasi lain yang berupa kata-kata.
2. Gambar: Informasi berupa sebuah tampilan visual dua dimensi,
digunakan pada materi klasifikasi Animalia, contoh-contoh tiap
filum, dan icon dalam format .jpeg dan .png
3. Model 3D: Informasi berupa sebuah tampilan visual tiga dimensi
yang dapat ditambah animasi dengan bantuan framework,
digunakan pada objek di menu utama, objek untuk
invertebrata/vertebrata, dan beberapa objek dalam menu filum
dengan format .obj dan .mtl
4. Audio: Informasi dalam bentuk bunyi yang dapat di dengar,
digunakan untuk beberapa contoh suara hewan, dalam format .mp3
5. Video: Informasi dalam bentuk gambar bergerak, dalam sistem ini
video yang digunakan merupakan equirectangular video yaitu di
mana tampilan di setiap arah direkam pada saat yang sama,
mengambil gambar menggunakan kamera omnidirectional atau
kumpulan kamera. Format dari video ini adalah .mp4
c. Struktur Navigasi
Struktur navigasi yang dibutuhkan pada media pembelajaran ini
adalah yang memuat alur materi dengan baik, mudah dioperasikan
oleh pengguna, simpel, dan dapat diterapkan pada pengembangan
VR-nya.
d. Sistem Kontrol
Mengklarifikasikan tipe dan fitur dari kontrol dan peralatan yang
dibutuhkan sistem, seperti kontrol animasi, suara, gambar, dan
sebagainya.

46
3. Implementasi
Sebelum benar-benar masuk pada fase implementasi pengkodean,

penulis terlebih dahulu memvisualisasikan user interface yang akan
dikembangkan untuk mempermudah tahap implementasi. Teknik yang
digunakan penulis untuk ini adalah Storyboard.
Berdasarkan Storyboard yang dibuat, penulis akan
mengimplementasikannya sebagai prototype dari sistem. Setelah
prototype rampung, dilakukan beta testing dilakukan oleh siswa kelas X
SMA Negeri 49 untuk mencari masalah atau bug agar dapat dilakukan
beberapa perubahan atau perbaikan pada prototype-nya.
4. Evaluasi
Fase terakhir ini adalah melakukan evaluasi berdasarkan delapan
aturan emas desain antar muka (The Eight Golden Rules of Interface
Design) yang dikemukakan oleh Ben Shneiderman.

47
3.3. Alur Pemikiran Penelitian
Gambar 3.1. Kerangka Pemikiran Penelitian

48
BAB IV
PERANCANGAN SISTEM DAN IMPLEMENTASI
Dalam perancangan WebVR Kingdom Animalia, digunakan metode

IMSDD (Interactive Multimedia System Design and Development) yang terdiri dari
empat tahap, yaitu: 1) Tahap Analisis Kebutuhan Sistem, 2) Tahap Pertimbangan
Desain, 3) Tahap Implementasi, dan 4) Tahap Evaluasi.
4.1. Tahap Analisis Kebutuhan Sistem
Fase ini memberikan definisi sistem seperti membuat tujuan secara

garis besar dan sasaran dari sistem yang sedang dirancang. Pada
pengembangan WebVR media pembelajaran biologi ini, penulis
merencanakan kebutuhan sistem antara lain:
4.1.1. Definisi Sistem
Definisi sistem yang akan dibangun merupakan sebuah media

pembelajaran interaktif biologi materi Kingdom Animalia untuk kelas
X SMA dalam bentuk WebVR (Virtual Reality berbasis web) dengan
menggunakan framework A-Frame dalam pengembangannya dan eight
golden rules of interface design dalam tahap evaluasinya. WebVR ini
dapat diakses pada multi-platform, namun penulis memfokuskan pada
penggunaan mobile-based VR yaitu dengan menggunakan smartphone
dan VR mount. Isi WebVR ini mencakup materi-materi kingdom
Animalia dan dua buah video 360.
Tujuan dibangunnya sistem ini adalah untuk

mengimplementasikan WebVR agar dapat dimanfaatkan sebagai salah
satu media pembelajaran dimana pada penelitian ini dikhususkan untuk
mata pelajaran Biologi materi Kingdom Animalia kelas X SMA. Selain
itu sistem ini bertujuan agar pelajar dapat mendapatkan informasi
dengan lebih menarik dan interaktif agar dapat meningkatkan minat
siswa pada materi yang dipelajari.

49
4.1.2. Target User dan Kebutuhannya
Target user atau pengguna pada WebVR ini adalah pelajar SMA,
lebih khususnya pelajar SMA kelas X yang sedang mempelajari materi
Kingdom Animalia. Untuk merasakan sensasi WebVR dengan mudah,
pelajar memanfaatkan smartphone yang dimiliki dibantu dengan VR
mount.
Selain pelajar, guru juga berperan sebagai user yang akan

mengiringi proses pembelajaran. Menurut wawancara dengan staf
pengajar di SMA Negeri 49, beliau sangat setuju bila ada media
pembelajaran interaktif yang dapat membantu proses pembelajaran
dengan memanfaatkan smartphone, namun harus berisi materi yang
cocok dengan kurikulum yang ada.
4.1.3. Kebutuhan Hardware, Software, dan Tool
Kebutuhan Hardware, Software, dan Tool merupakan apa saja

perangkat keras dan spesifikasinya yang digunakan untuk membangun
aplikasi ini. Berikut merupakan Hardware, Software, dan Tool yang
digunakan dalam pembangunan WebVR ini:
1. Hardware
a. Laptop HP EliteBook 2560p
b. Intel Core i7 (2nd Gen) 2620M / 2.7 GHz
c. RAM 4 GB
d. Intel HD Graphics 3000
e. Mouse, Keybord, dan Pen tablet sebagai alat input
f. Smartphone Xiaomi Redmi note 3
g. Google Cardboard V2 (sebagai VR mount)
2. Software dan Tool

a. Google Chrome for Windows versi 70.0.3538.77
b. Google Chrome for Android versi 70.0.3538.80

50
c. Sublime Text 3
d. XAMPP version 1.7.7 64bit
e. Blender 2.79
f. Adobe Photoshop CS3
g. Paintool SAI versi 1.1.0
h. Github Desktop
4.1.4. Delivery Platform
Delivery platform yang dibutuhkan untuk WebVR sebenarnya

sangat luas karena mendukung multi-platform yaitu VR on desktop
dengan headset, VR on mobile dengan headset, flat on desktop (dengan
mouse dan keyboard) dan flat mobile (magic window). Tapi penulis
memfokuskan penyajian WebVR ini untuk penggunaan VR on mobile
dengan headset, yaitu mengakses WebVR dengan menggunakan
smartphone yang dibantu oleh VR mount (headset) dan browser yang
mendukung WebVR.
Dalam penelitian ini browser smartphone yang digunakan dalam

pengembangan adalah Google Chrome for Android versi 60+ untuk
android dan Safari 16+ untuk iOS, VR mount yang digunakan adalah
Google Cardboard V2 yang dapat menampung sampai ukuran
smartphone 6 inci.
Gambar 4.1. VR mount Google Cardboard V2

51
4.2. Tahap Pertimbangan Desain
Tujuan dari fase ini adalah untuk mendeskripsikan secara detail

pedoman-pedoman desain, tahapan-tahapannya adalah sebagai berikut:
4.2.1. Desain Metafora
Desain metafora yang digunakan oleh penulis dalam WebVR ini

adalah museum, dimana user memiliki kebebasan dalam memilih objek
mana yang ingin dilihat. User dapat melihat secara 360 derajat (dapat
dilihat ke seluruh arah, kiri, kanan, belakang, atas dan bawah) dan
berinteraksi dengan objek seakan-akan ia ada di tempat tersebut.
4.2.2. Format dan tipe dari Informasi
Berikut adalah detail lebih lengkap dari aset informasi

berdasarkan format dan tipe dari informasi:
a. Teks: Teks terdapat pada penjelasan materi, judul menu, judul

scene, dan nama icon.
b. Gambar:
 Dalam aset materi terdapat 71 gambar yang terdiri dari 3
format .png dan 68 format .jpeg.
 Dalam aset icon terdapat 5 gambar berformat .png
c. Model 3D: Model 3D yang digunakan dalam sistem ini ada 4
yang masing-masing memiliki format .obj dan .mtl.
d. Audio: jumlah audio adalah 5 buah dalam format .mp3
e. Video: jumlah video adalah 2 buah dalam format .mp4

52
4.2.3. Struktur Navigasi
Perancangan struktur navigasi untuk WebVR Kingdom Animalia

ini adalah sebagai berikut:
Gambar 4.2. Struktur Navigasi WebVR Kingdom Animalia
Gambar 4.2 adalah rancangan struktur navigasi dari WebVR yang

akan dibuat. Struktur navigasi berawal dari tampilan laman pembuka
yang berisi cara menggunakan WebVR dengan singkat, kemudian
menu pembuka akan mengarah ke main menu. Dalam main menu
terdapat tiga pilihan menu yaitu materi Kingdom Animalia, Video 360,
dan kembali ke laman pembuka.
Dalam menu materi Kingdom Animalia, user dapat melihat ke

arah 180 derajat (ke belakang) dan akan ditampilkan klasifikasi

53
kingdom Animalia (invertebrata dan vertebrata). Dari tampilan

klasifikasi kingdom Animalia akan diarahkan pada tampilan klasifikasi
filum di scene yang berbeda, sedangkan penjelasan tiap filum akan
ditampilkan pada scene yang sama. User dapat selalu kembali ke scene
materi dan main menu dari menu filum dengan memilih icon yang
tersedia. Dalam menu Video 360 terdapat dua pilihan video yang dapat
ditonton, dalam video tersebut tersedia kontrol play and pause dan dari
tiap video dapat kembali ke menu video 360 atau main menu.
4.2.4. Sistem Kontrol
Kontrol yang digunakan berupa sebuah kursor yang mengikuti

gerakan kamera di dalam WebVR dan posisi kursor selalu berada di
tengah tampilan. Kursor ini dapat diarahkan ke objek yang kita mau
dengan menggerakkan perangkat yang digunakan.
Untuk berinteraksi dalam lingkungan virtual reality melalui

smartphone, user dapat menyentuh dimana saja di layar perangkat
untuk meng-klik pada objek VR. Selain itu user dapat menggunakan
mouse dan keyboard sebagai alat input untuk penggunakan melalui
komputer,
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.

54
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.

55
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 180 o) 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

56
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

57
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

58
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

59
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 A-Frame serta component A-

Frame yang dibutuhkan pada bagian <head> HTML

60
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.

61
Gambar 4.13. Screenshot memasukkan aset-aset WebVR Kingdom

Animalia dalam tag <a-assets>

62
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.

63
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

64
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.
4.3.3. Hasil Prototipe
Penjelasan dan pemaparan mengenai hasil prototipe akan

dijelaskan pada BAB V, yaitu bab hasil dan pembahasan.
4.3.4. Beta Testing
Penjelasan dan pemaparan mengenai beta testing akan dijelaskan

pada BAB V, yaitu bab hasil dan pembahasan.
4.4. Tahap Evaluasi
Penjelasan dan pemaparan mengenai tahap evaluasi akan dijelaskan

pada BAB V, yaitu bab hasil dan pembahasan.

65
BAB V
HASIL DAN PEMBAHASAN
5.1. Hasil Prototipe
Prototipe WebVR Kingdom Animalia ini yang akan digunakan dalam

beta testing untuk mengetahui apakah ada kesalahan fungsional pada WebVR
yang dibuat agar dapat diperbaiki kemudian dapat dilanjutkan ke tahap
evaluasi. Berikut merupakan hasil screenshot dari penggunaan WebVR
Kingdom Animalia melalui PC untuk menunjukkan dan menjelaskan hasil
prototipe yang sudah dibuat.
Gambar 5.1. Scene pembuka
Scene pembuka adalah scene yang pertama kali muncul sebelum

WebVR masuk ke main menu, tampilan dapat dilihat pada gambar 5.1. Dalam
scene ini dijelaskan secara singkat bagaimana cara menggunakan WebVR ini.
Dari scene tersebut kita diarahkan ke main menu jika meng-klik tanda panah
dibawah kotak penjelasan.

66
Gambar 5.2. Scene Main Menu, saat objek materi kingdom Animalia di-hover
Tampilan Main Menu dapat dilihat pada gambar 5.2., dimana terdapat
tiga menu yaitu kembali ke scene intro (icon lampu), Materi kingdom
Animalia (icon telapak hewan), dan Video 360 derajat (icon kamera). Judul
dari tiap icon akan muncul jika user meng-hover kursor kearah icon tersebut.
Tampilan Materi Kingdom Animalia dapat dilihat pada gambar 5.3.

secara first person view, disini terdapat pengertian dari Animalia itu sendiri
serta petunjuk untuk melihat ke arah 180 derajat untuk melihat klasifikasi
Animalia yang tampilannya dapat dilihat pada gambar 5.4.
Gambar 5.3. Scene Materi Kingdom Animalia (first person view)

67
Gambar 5.4. Scene Materi Kingdom Animalia bagian Klasifikasi Animalia

(rotasi 180o)
Gambar 5.5. Scene Materi Kingdom Animalia bagian Klasifikasi Animalia

(rotasi 180o) saat objek 3D di-hover
Pada scene klasifikasi animalia terdapat objek 3D kepik dan anjing

yang merepresentasikan filum Invertebrata dan Vertebrata/chordata. Seperti
pada main menu, judul dari objek 3D muncul saat objek di-hover. Objek
tersebut dapat di-klik untuk masuk ke scene klasifikasi filum.
Scene klasifikasi filum (gambar 5.6.) menunjukkan klasifikasi sub-

filum dengan objek 3D atau gambar yang akan merepresentasikannya. Pada
contoh di gambar 5.6. scene yang ditampilkan adalah klasifikasi filum
Vertebrata/chordata. Dalam scene tersebut terdapat penjelasan dari
Vertebrata/chordata dan klasifikasi sub-filumnya, tiap objek ini dapat di-klik
untuk menunjukkan penjelasan yang lebih detail.

68
Gambar 5.6. Scene salah satu klasifikasi Filum (Vertebrata/Chordata)
Scene klasifikasi filum (gambar 5.6.) menunjukkan klasifikasi sub-

filum dengan objek 3D atau gambar yang akan merepresentasikannya. Pada
contoh di gambar 5.6. scene yang ditampilkan adalah klasifikasi filum
Vertebrata/chordata. Dalam scene tersebut terdapat penjelasan dari
Vertebrata/chordata dan klasifikasi sub-filumnya, tiap objek ini dapat di-klik
untuk menunjukkan penjelasan yang lebih detail.
Gambar 5.7. Scene penjelasan sub-filum (Amphibia)
Gambar 5.7. merupakan tampilan dari scene penjelasan sub-filum

Amphibia, pada kotak kuning diatas terdapat pengertian dari amphibia dan
kotak biru dibawahnya menunjukkan ordp-ordo apa saja yang terdapat dalam
amphibia. Jika salah satu contoh gambar di-hover maka isi dari kotak bitu
tersebut akan berubah menjadi penjelasan dari gambar tersebut (gambar 5.8.).

69
Gambar 5.8. Scene penjelasan sub-filum ketika salah satau contoh gambar
sub-filum di-hover (Amphibia)
Pada scene klasifikasi filum dan penjelasan sub-filum selalu terdapat

dua icon yang berada di bawah user (gambar 5.9.). Dua icon ini menjadi jalan
pintas yang akan memudahkan dalam navigasi di dalam WebVR kingdom
Animalia. Pada scene tersebut terdapat icon telapak hewan yang akan
mengarahkan kembali ke scene materi kingdom animalia saat di klik dan icon
rumah yang akan membawa user kembali ke main menu.
Gambar 5.9. Scene penjelasan sub-filum saat user melihat ke bawah
Gambar 5.10. menunjukkan scene Video 360 derajat, di dalamnya

terdapat dua pilihan video yang dapat diputar yaitu Antartika dan Penguin dan
Understanding Shark. Saat video dimainkan terdapat kontrol video dimana
user dapat melakukan play dan pause (gambar 5.11.).

70
Gambar 5.10. Scene menu Video 360 derajat
Gambar 5.11. Scene salah satu Video 360 derajat (Understanding Shark)
5.2. Beta Testing
Pengujian Beta atau Beta Testing dilakukan oleh 60 siswa kelas X SMA
Negeri 49 Jakarta yang dibagi pada empat kelas dimana masing-masing kelas
diambil 15 siswa untuk melakukan pengujian beta terhadap prototipe WebVR
yang sudah jadi untuk menguji kinerja dari WebVR ini. Pengujian ini
memfokuskan pada kebutuhan fungsional dari aplikasi, yaitu kesesuain
output dengan input yang diterima oleh sistem. Penguji menguji interface
WebVR dengan mencoba semua fungsi icon, tombol, audio, video dan semua
komponen lain yang ada pada WebVR ini. Selain itu pengujian ini juga
bermaksud untuk mengetahui tingkat ketertarikan dan opini pengguna pada
WebVR ini.

71
Hasil pengujian beta menunjukkan bahwa secara fungsional WebVR

Kingdom Animalia sudah memenuhi kebutuhan sistem yang disyaratkan.
Dari kuesioner yang dibagikan pada responden, hasil angket pada tiap
pertanyaan dapat dilihat dari grafik dibawah ini:
1. Apakah webVR ini mudah untuk digunakan?
30 26
25
25
20
15
10 8
5 1
0
Sangat Mudah Cukup Mudah Agak Sulit Sulit
Gambar 5.12. Grafik WebVR mudah digunakan
Dari grafik diatas jika dihitung menggunakan skala likert dengan

keterangan “sangat mudah” = 4, “cukup mudah” = 3, “agak sulit” = 2, “sulit”
= 1 maka didapatkan skor 81%. Skor ini menunjukkan bahwa responden
menyatakan bahwa WebVR ini sangat mudah untuk digunakan.
2. Apakah kamu merasa WebVR ini meningkatkan minat kamu pada materi
pembelajaran?
35
30
30 28
25
20
15
10
5 2
0
0
Sangat setuju Cukup Setuju Kurang setuju Tidak setuju
Gambar 5.13. Grafik WebVR meningkatkan minat pada materi

pembelajaran

72

keterangan “sangat setuju” = 4, “cukup setuju” = 3, “kurang setuju” = 2,
“tidak setuju” = 1 maka didapatkan skor 86%. Skor ini menunjukkan bahwa
responden sangat setuju bahwa WebVR ini meningkatkan minat pada materi
yang dipelajari.
3. Apakah WebVR ini lebih menarik dari media pembelajaran yang biasa
kamu gunakan?
60
48
50
40
30
20
12
10
0 0
0
Gambar 5.14. Grafik WebVR lebih menarik dari media pembelajaran yang
biasa digunakan

responden sangat setuju bahwa WebVR ini lebih menarik dari media
pembelajaran yang biasa digunakan.

73
4. Menurut kamu, apakah webVR akan bermanfaat dalam pembelajaran

kedepannya?
50
39
40
30
20
20
10
1 0
0
Gambar 5.15. Grafik WebVR akan bermanfaat dalam pembelajaran

kedepannya

responden sangat setuju bahwa WebVR akan bermanfaat dalam
pembelajaran kedepannya.
5.3. Hasil Evaluasi
Pada tahap ini, dilakukan evaluasi terhadap sistem yang sudah dibuat
dan diuji berdasarkan delapan aturan emas desain antar muka (The Eight
Golden Rules of Interface Design) yang dikemukakan oleh Ben Shneiderman.
Berikut pembahasan tiap prinsip dari hasil evaluasi menggunakan Eight
Golden Rules of Interface Design pada WebVR Kingdom Animalia.

74
1. Strive for Consistency (Konsistensi)
Prinsip ini menunjukkan tentang konsistensi dalam aplikasi seperti

istilah yang identik harus digunakan dalam petunjuk, menu, dan layar
bantuan; dan pemilihan nuansa warna yang konsisten, tata letak,
kapitalisasi, font, dan sebagainya harus digunakan secara menyeluruh.
Hal ini dilakukan agar tidak membuat pengguna bingung. Pada WebVR
Kingdom Animalia, prinsip konsistensi dapat dilihat pada gambar 5.13.
yaitu:
a. Bentuk icon pada main menu konsisten dengan warna yang seragam
b. Tata letak judul selalu ditempat yang sama didalam segi empat
c. Font keseluruhan aplikasi juga seragam, dan bahasa yang konsisten.
Gambar 5.16. Penerapan prinsip Strive for Consistency
2. Cater to Universallibility (Memenuhi Universalitas)
Maksud dari prinsip ini adalah menjelaskan perbedaan antara

pengguna yang sudah ahli dan pengguna baru. Pada hal ini diperlukan
adanya fitur untuk pemula, seperti penjelasan, dan fitur untuk para ahli,
seperti shortcuts dapat memperkaya desain antarmuka dan meningkatkan
kualitas sistem yang dirasakan. Hal ini dapat dilihat pada gambar 5.14
dimana terdapat penjelasan pada intro di WebVR ini agar pengguna baru
dapat mengerti cara menggunakan dan terdapat pula icon shortcuts pada
menu-menu tertentu.

75
Gambar 5.17. Penerapan Cater to Universallibility
3. Offer Informative Feedback (Umpan Balik yang Informatif)
Untuk setiap tindakan pengguna, harus ada umpan balik sistem.

Untuk tindakan yang sering dan kecil, responsnya bisa sederhana.
Contoh umpan balik dalam WebVR ini dapat dilihat pada gambar 5.15.
dimana webVR muncul fungsi dari tiap icon yang ada pada main menu
dengan mengarahkan kursor ke icon tersebut.
Gambar 5.18. Penerapan Offer Informative Feedback
4. Design Dialogs to Yield Closure (Adanya Penutupan)
Prinsip ini menunjukkan bahwa adanya urutan saat pengguna

melakukan event tertentu dengan adanya awal, tengah, dan akhir. Dalam
WebVR ini terdapat menu penutup pada bagian bawah di main menu
yang menunjukkan halaman penutup seperti pada gambar 5.16.

76
Gambar 5.19. Penerapan Design Dialogs to Yield Closure
5. Prevent Errors (Pencegahan Kesalahan)
Dalam mengembangkan sebuah sistem, sebisa mungkin hindari

pengguna dari melakukan kesalahan, dan jika terjadi kesalahan sistem
sebaiknya memberitahu pengguna bahwa pengguna melakukan
kesalahan. Prinsip ini penulis terapkan pada awal sistem dimana
dijelaskan bagaimana cara menggunakan WebVR ini dengan singkat dan
jelas untuk mencegah adanya kesalahan kontrol dan navigasi.
Gambar 5.20. Penerapan Prevent Errors

77
6. Permit Easy Reversal of Actions (Pembalikan Aksi)
Prinsip ini menunjukkan bahwa sebisa mungkin adanya

pembalikan aksi dalam sistem agar memudahkan pengguna dalam
mengeksplorasi. Dalam WebVR ini, terdapat icon di tiap scene untuk
kembali ke halaman sebelumnya, pada contoh gambar 5.18. dapat dilihat
terdapat icon tutup pada scene penjelasan nematode agar menunjukkan
kembali scene sebelumnya.
Gambar 5.21. Penerapan Permit Easy Reversal of Actions
7. Support Internal Locus of Control
Maksud dari prinsip ini ialah menjadikan pengguna sebagai

pemegang kendali dalam sistem. Pastikan bahwa desain yang telah dibuat
membuat pengguna mengontrol sistem dengan baik. Pada hal ini penulis
menerapkan dengan membuat pusat kendali untuk keseluruhan menu
utama dalam main menu yang merupakan pusat kendali dari sistem agar
pengguna dapat dengan leluasa menjelajahi WebVR tanpa merasa
dikontrol oleh sistem.
Gambar 5.22. Penerapan Support Internal Locus of Control

78
8. Reduce Short-term Memory Load
Maksud dari prinsip ini mengurangi ingatan jangka pendek karena

rata-rata manusia memiliki ingatan yang pendek, maka dari itu desain
sebaiknya dibuat dengan sederhana dan menarik untuk mengurangi
beban ingatan tersebut. Prinsip ini diterapkan dengan lebih banyak
menggunakan gambar dibanding tulisan dalam menyajikan menu karena
gambar dan model 3D lebih menarik dan lebih diingat oleh pengguna,
selain itu tata letak aset yang selalu sama agar pengguna selalu ingat
dimana letak icon yang akan dipilih.
Gambar 5.23. Penerapan Reduce Short-term Memory Load
Dari pembahasan penerapan Eight Golden Rules of Interface Design

dalam WebVR yang telah dikembangkan pada tahap evaluasi ini didapatkan
hasil bahwa WebVR Kingdom Animalia memenuhi kedelapan prinsip
tersebut.

79
BAB VI
PENUTUP
6.1. Kesimpulan
Dari penelitian yang sudah dilakukan penulis tentang implementasi

WebVR (Virtual Reality berbasis web) pada media pembelajaran biologi
tingkat SMA, dapat ditarik beberapa kesimpulan sebagai berikut:
1. Media pembelajaran WebVR Kingdom Animalia dikembangkan
menggunakan metode IMSDD (Interactive Multimedia System design
and development) yang terdiri dari tahap kebutuhan sistem, tahap
pertimbangan desain, tahap implementasi, dan tahap evaluasi.
2. WebVR Kingdom Animalia menggunakan Framework A-Frame dan
HTML5 dalam pengkodeannya dan dapat diakses melalui browser
tertentu dalam smartphone atau perangkat lain yang mendukung Virtual
Reality dengan menggunakan VR mount.
3. Setelah dilakukan pengujian didapatkan bahwa media pembelajaran
WebVR Kingdom Animalia berfungsi dengan baik serta siswa merasa
WebVR ini sangat mudah untuk digunakan (skor 81%), meningkatkan
minat pada materi yang disajikan (skor 85%), dan lebih menarik dari
media pembelajaran yang biasa mereka gunakan (skor 95%), mereka
juga sangat setuju bahwa kedepannya WebVR dapat bermanfaat dalam
pembelajaran (skor 91%).
4. WebVR ini juga memenuhi kedelapan prinsip dari Eight Golden Rules of
Interface Design pada tahap evaluasi.

80
6.2. Saran
Setelah melakukan penelitian, penulis memiliki saran untuk pembaca

dan pengembang berikutnya guna membantu dalam pengembangan
selanjutnya. Adapun saran penulis antara lain:
1. Untuk pengembangan selanjutnya diharapkan untuk menerapkan desain
yang lebih menarik pada penyajiannya tanpa mengurangi kinerja dari
WebVR.
2. Membuat bahan materi lebih baik dalam bentuk animasi, objek 3D, video
360 derajat, dan permainan.
3. Untuk pengembangan selanjutnya diharapkan mengembangkan media
pembelajaran WebVR yang dapat menggunakan track controller agar
membuat pengguna dapat berjalan dan berinteraksi dengan VR dengan
lebih leluasa.
4. Kedepannya diharapkan agar pengembang selanjutnya dapat
mengimplementasikan WebVR pada lingkup lain selain edukasi seperti
pariwisata, jual beli online, arsitektur dan lainnya.

81
DAFTAR PUSTAKA
A-Frame.io. HTML & Primitives. [online] Tersedia:

https://aframe.io/docs/0.8.0/introduction/html-and-primitives.html#example.
[diakses 4 April 2018, 20.06 WIB]
A-Frame.io. Introduction. [online] Tersedia: https://aframe.io/docs/0.8.0/

introduction/#. [diakses 4 April 2018, 19.23WIB]
Blender.org. About. [online] Tersedia: https://www.blender.org/. [diakses 5 April

2018, 20.10WIB]
Bungin, M. Burhan. 2014. Metodologi Penelitian Kuantitatif: Komunikasi,

Ekonomi, Dan Kebijakan Serta Ilmu-Ilmu Sosial Lainnya. Jakarta: Kencana.
Dastbaz, Mohammad. 2003. Designing Interactive Multimedia Systems. New York:

McGraw-Hill, 2002.
Devlin, Ian. 2012. HTML5 Multimedia: Develop and Design. Berkeley: Peachpit
Press.
E.M.A, Fenty, Rayi Pradono I., dan Dewi Nurochmah. 2014. “Implementasi
Augmented Reality Pada Pengembangan Media Pembelajaran Interaktif
Materi Fotosintesis Untuk Siswa Kelas 5 SD Budi Luhur Pondok Aren.”
Semantik 2014(November):217–24.
Evstatiev, Boris I., Katerina G. Gabrovska-evstatieva, Teodor B. Iliev, dan Ivaylo

S. Stoyanov. 2017. “Web-Based VR Engine in Electrical Engineering : A
Proof of Concept.” 29–32.
Fine, Michael. 2002. Beta Testing for Better Software. Indianapolis: Wiley
Publishing.
Hamid, Radhi Al. 2016. “Website Galeri Seni Lukis Virtual Berbasis Web Browser
Pada Smartphone.” Universitas Gunadarma.

82
Irnaningtyas. 2013. Biologi Untuk SMA/MA Kelas X. Jakarta: Penerbit Erlangga.
Jerald, Jason. 2016. The VR Book: Human-Centered Design for Virtual Reality. San
Rafael: Morgan & Claypool Publishers.
Khoerniawan, Robby Wijaya, Ketut Agustini, dan I. Made Putrama. 2018. “Game
Edukasi ‘ Penjelajah ’ Berbasis Virtual Reality.” 7(1).
Kustiawan, Usep. 2016. Pengembangan Media Pembelajaran Anak Usia Dini. I.

Malang: Penerbit Gunung Samudra.
Madcoms. 2012. Mahir Dalam 7 Hari: Adobe Photoshop CS6. Yogyakarta: ANDI.
Mi.com. Redmi Note 3 - Rise to Power. [online] Tersedia:

https://www.mi.com/global/note3/ [diakses 28 November 2018, 15.10 WIB].
Munir. 2012. Multimedia Konsep & Aplikasi Dalam Pendidikan. Bandung:

Penerbit Alfabeta.
Neelakantam, Srushtika dan Tanay Pant. 2017. Learning Web-Based Virtual

Reality. New York: Springer Science+Business Media.
Nguyen, Joe. 2017. “Indonesia’s Mobile Only Population and Mobile Consumer
Behaviour.” [online] Tersedia: https://www.comscore.com/Insights
/Infographics/Indonesias-Mobile-Only-Population-and-Mobile-Consumer-
Behaviour. [diakses 25 Maret 2018, 17.33WIB]
Noor, Juliansyah. 2016. Metodologi Penelitian: Skripsi, Tesis, Disertasi & Karya
Ilmiah. Jakarta: Prenada Media.
Parekh, Ranjan. 2013. Principles of Multimedia. New Delhi: Tata McGraw Hill
Education Private Limited.
Parisi, Tony. 2015. Learning Virtual Reality. Sebastopol: O’Reilly Media.
Pratiwi, Sri Maryati, Suharno, dan Bambang Suseno. 2016. BIOLOGI Untuk
SMA/MA Kelas X. Edisi Revisi.

83
Samsung-Newsroom. 2017. “Survey Shows That Teachers See Potential for Virtual
Reality in Education.” Retrieved (https://news.samsung.com/global/survey-
shows-that-teachers-see-potential-for-virtual-reality-in-education).
Shneiderman, B., Plaisant, C., Cohen, M., Jacobs, S., dan Elmqvist, N. 2016.
Designing the User Interface: Strategies for Effective Human-Computer
Interaction: Sixth Edition. London: Pearson.
Subagiya, Agus Triyono, dan Agung Sulistyono. 2016. IPA BIOLOGI Jilid 2 Kelas
VIII SMP/MTs. Jakarta: Penerbit Erlangga.
Suehring, Steve dan Janet Valade. 2013. PHP, MySQL, JavaScript & HTML5 All-
in-One For Dummies. Hoboken: John Wiley & Sons.
Sugiarto, Eko. 2015. Menyusun Proposal Penelitian Kualitatif: Skripsi Dan Tesis.
Yogyakarta: Suaka Media.
Sugiyono. 2012. Metode Penelitian Kuantitatif Kualitatif Dan R&D. Bandung:

Penerbit Alfabeta.
Vaughan, Tay. 2011. “Multimedia: Making It Work.” New York: McGraw-Hill

Osborne Media.
WebVR. WebVR - Bringing Virtual Reality to the Web. [online] Tersedia:

https://webvr.info/. [diakses 2 April 2018, 15.02 WIB]
Wibawanto, Wanda. 2017. Desain dan Pemrograman Multimedia Pembelajaran

Interaktif. Jember: Penerbit Cerdas Ulet Kreatif.
Ye, Quan, Wenshan Hu, dan Hong Zhou. 2017. Implementation of WebVR-Based
Laboratory for Control Engineering Education Based on NCSLab Framework.
Chinese Control Conference, CCC 7880–85.

84
LAMPIRAN

85
Lampiran 1: Kuesioner Penelitian
Identitas Peneliti
Nama : Siti Nurul Hidayati
Jurusan : Teknik Informatika
Fakultas : Sains dan Teknologi
Universitas : UIN Syarif Hidayatullah Jakarta
Judul Penelitian : Implementasi WebVR (Virtual Reality berbasis browser
web) pada Pembelajaran Biologi tingkat SMA.
Tujuan :
 Mencari tahu penggunaan smartphone pada responden
 Mengetahui pendapat responden terhadap media pembelajaran yang ada
 Mencari tahu apakah responden membutuhkan media pembelajaran yang
memanfaatkan smartphone mereka
Data Diri Responden
 Nama :
 Jenis Kelamin :
 Email :
Silahkan lingkari atau silang jawaban yang menjadi pilihan anda.
1. Apakah kamu memiliki smartphone?

a) Ya b) Tidak
2. Jika jawaban adalah Ya, Apakah kamu memiliki akses internet? (lewati jika
jawaban Tidak)
a) Ya b) Tidak
3. Apa media pembelajaran biologi yang sering kamu gunakan? (Pilih satu saja)
□ Buku
□ Internet (browsing)
□ Video
□ Dan lain-lain, isi sendiri ………………………………………..

86
4. Selama ini, apakah media pembelajaran biologi yang kamu gunakan menarik
dan mudah dipahami?
a) Sangat Setuju b) Setuju
c) Tidak Setuju d) Sangat Tidak Setuju
5. Apakah kamu setuju bila ada media pembelajaran biologi yang memanfaatkan
teknologi smartphone kamu?
a) Sangat Setuju b) Setuju

c) Tidak Setuju d) Sangat Tidak Setuju
Terima kasih atas partisipasi anda dalam mengisi kuesioner ini.

87
Lampiran 2: Kuesioner Hasil
Identitas Peneliti
Nama : Siti Nurul Hidayati
Jurusan : Teknik Informatika
Fakultas : Sains dan Teknologi
Universitas : UIN Syarif Hidayatullah Jakarta
Judul Penelitian : Implementasi WebVR (Virtual Reality berbasis browser
web) pada Pembelajaran Biologi tingkat SMA.
Tujuan :
 Mengetahui apakah webVR berjalan sesuai dengan tujuan

 Mengetahui bagaimana pendapat responden terhadap webVR ini
Data Diri Responden
 Nama :
 Email :
Silahkan lingkari atau silang jawaban yang menjadi pilihan anda.
1. Apakah webVR ini mudah untuk digunakan?

a) Sangat Mudah b) Cukup mudah
c) Agak sulit d) Sulit
2. Apakah kamu merasa WebVR ini meningkatkan pemahaman dan minat kamu
pada materi pembelajaran?
a) Sangat Setuju b) Cukup Setuju
c) Kurang Setuju d) Tidak Setuju
3. Apakah WebVR ini lebih menarik dari media pembelajaran yang biasa kamu
gunakan?
a) Sangat Menarik b) Cukup Menarik
c) Kurang menarik d) Tidak Menarik

88
4. Menurut kamu, apakah webVR ini akan bermanfaat dalam pembelajaran

kedepannya?
a) Sangat Setuju b) Cukup Setuju
c) Kurang Setuju d) Tidak Setuju
5. Dari pilihan dibawah ini, apa yang dapat dikembangkan/ditambahkan dari

WebVR ini?
□ Desain yang lebih menarik
□ Lebih banyak animasi
□ Lebih banyak materi teks
□ Lebih banyak video
□ Isi sendiri …………………….
Terima kasih atas partisipasi anda dalam mengisi kuesioner ini.

89
Lampiran 3: Pengolahan Data Kuesioner Hasil
Biodata Responden Pertanyaan

No Nama Kelas P1 P2 P3 P4 P5
dikembangkan untuk
arsitek atau desainer
1 Raka Satrya X MIPA 1 4 4 4 4 (dalam segala hak)
1, dapat digunakan di
2 Jazmi Nadhila X MIPA 1 3 3 4 4 seluruh android
3 Akhila Nazwa X MIPA 1 3 3 4 3 2,3
4 Aulia Nafis H X MIPA 1 3 4 4 4 1,3
5 Mare X MIPA 1 3 4 4 3 1,2,3
6 Nadya Ariyanti X MIPA 1 4 4 4 4 3
7 Adhitya Yoga Pratama X MIPA 1 3 4 4 4 1,3
8 Farhan Aula X MIPA 1 3 3 4 4 1,3
9 Rafiansyah RW X MIPA 1 3 4 4 3 1,3
10 Putri Mutiara X MIPA 1 3 4 4 4 1
11 Tiara zhafirah X MIPA 1 4 4 4 4 3
12 Ivanne X MIPA 1 4 4 3 3 1
13 Muhammad Raul X MIPA 1 3 3 3 3 3
14 Randitya Krisna X MIPA 1 3 3 3 3 1
15 M. Fernando X MIPA 1 4 4 4 4 3
16 Karmelita X MIPA 2 4 4 4 4 3
17 Nur Shadrina X MIPA 2 4 4 4 4 3
18 Siti humairo X MIPA 2 1 3 3 4 3
19 Fani Novelita X MIPA 2 2 3 4 4 1
20 M. alfa X MIPA 2 3 3 3 4 3
1,2,3,4, bisa dibuat
21 Imam Mujahid X MIPA 2 4 4 4 4 lebih dinamis
22 M. Rafi Endri X MIPA 2 3 4 4 4 1,2,3
23 Wanda rhisma X MIPA 2 2 3 4 3 1
24 Nadhira T.A X MIPA 2 2 3 4 3 1
25 Naufal fadhillah X MIPA 2 2 3 4 3 3
26 Syahrel akh X MIPA 2 2 3 3 4 1
27 Seto H.Y X MIPA 2 2 3 4 4 3
28 Febby Athia X MIPA 2 3 4 4 3 1,3
29 Nayla M X MIPA 2 3 3 3 3 3
30 Ilyas Ar X MIPA 2 3 2 4 3 3
31 Daffa Haidar X MIPA 3 3 4 4 4 1,2
32 Yeshva noah X MIPA 3 4 3 4 4

90
No Nama Kelas P1 P2 P3 P4 P5
animasi lebih real &
33 Samira Febrita X MIPA 3 3 3 3 4 video tentang praktik
34 Anggraeni X MIPA 3 2 2 3 3 2
35 Nada khalishah X MIPA 3 4 3 4 4 3
36 Meivanza Dwi X MIPA 3 3 3 4 4 4
37 Javier X MIPA 3 3 3 4 3 3
38 Genta n. alif X MIPA 3 4 3 3 3 3
39 M. Difa Pratama X MIPA 3 4 4 4 4 3
40 Rayhan Andika X MIPA 3 4 3 4 4 3
41 Immanuel X MIPA 3 3 4 4 3 1,2,3
42 M. adam X MIPA 3 4 3 4 4 1,2,3
43 M. Ghazy rizqi X MIPA 3 4 3 4 4 1,2,3
44 Raden salma X MIPA 3 3 4 4 4 1,3
45 Azizah Sukma X MIPA 3 4 4 4 3 1
46 Farah Irawan X MIPA 4 4 4 4 4 3
47 Fatih Ali Kentjana X MIPA 4 3 4 4 4 1
48 - X MIPA 4 4 3 4 4 3
49 Nabela X MIPA 4 3 3 4 3 3
50 Raditya Prabaswara X MIPA 4 3 4 4 4 1,2,3,gambar lebih HD
1,2,3,Materi
pendengaran dg
51 Isna Fara Diba NA X MIPA 4 4 4 4 4 b.indonesia
52 Farah mualifah X MIPA 4 3 3 3 3 2,3
53 Maryana Wulandari X MIPA 4 4 4 4 4 1,2
54 Laila Nurul X MIPA 4 3 3 4 2 -
55 Dina lestari S X MIPA 4 4 4 4 4 2,3
56 Heny Fatul X MIPA 4 4 3 4 3 1,3
57 Riyanti X MIPA 4 4 4 4 4 3
58 M Ihsan X MIPA 4 4 3 4 4 1,2,3, penajaman grafik
59 wildan maulana X MIPA 4 4 4 3 4 1
60 Naufah alvaretta X MIPA 4 2 3 4 4 1
P1: Apakah webVR ini mudah untuk digunakan?

P 1 2 3 4 skor mean
P1 1 8 26 25 60
1 16 78 100 195
81%
SANGAT MUDAH

91
P2: Apakah kamu merasa WebVR ini meningkatkan minat kamu pada materi
pembelajaran?
P 1 2 3 4 skor mean
P2 0 2 30 28 60
0 4 90 112 206
86%
SANGAT SETUJU
P3: Apakah WebVR ini lebih menarik dari media pembelajaran yang biasa kamu
gunakan?
P 1 2 3 4 skor mean
P3 0 0 12 48 60
0 0 36 192 228
95%
SANGAT MENARIK
P4: Menurut kamu, apakah webVR ini akan bermanfaat dalam pembelajaran
kedepannya?
P 1 2 3 4 skor mean
P4 0 1 20 39 60
0 2 60 156 218
91%
SANGAT SETUJU
P5: APA YANG DAPAT DIKEMBANGKAN/DITAMBAHKAN

DARI WEBVR INI?
Desain yang lebih menarik Lebih banyak animasi Lebih banyak materi teks lebih banyak video
2%
34%
46%
18%

92
Lampiran 4: Hasil Wawancara
Wawancara dengan Staf Pengajar Biologi

SMA Negeri 49 Jakarta
Mengenai Materi Pelajaran Biologi dan
Pendapatnya Tentang Media Pembelajaran
Nama Narasumber : Ibu Tri Fitrayanti

Jabatan : Guru/Staf Pengajar Biologi
Waktu : 26 April 2018
Tempat : SMA Negeri 49 Jakarta
1. Tanya : Berapa jumlah kelas MIPA di SMA 49 ini bu? Dan tiap kelasnya
ada berapa murid?
Jawab : Jumlah kelas MIPA pada tiap kelas (X, XI dan XII) ada 4, tiap
kelas terdapat 36 siswa.
2. Tanya : Apa kesulitan ibu dalam mengajar materi biologi?
Jawab : Materinya terlalu banyak sedangkan waktu untuk semester 2 terlalu
pendek, karena dipotong dengan libur simulasi, tryout kelas XII, USBN,
UNBK, dsb.
3. Tanya : Materi biologi apa yang dirasa paling sulit untuk diajarkan atau
dimengerti oleh siswa?
Jawab : Sebenarnya tidak ada yg sulit, hanya materi untuk bab animalia yg
terlalu banyak, satu bab ini terdiri dari berbagai phylum, class, dsb. Yang
kemungkinan ketika diuji ke siswa masih banyak yang kurang paham.
4. Tanya : Media Pembelajaran apa saja yang tersedia atau digunakan dalam
kegiatan belajar mengajar?
Jawab : Yang paling sering adalah power point, selain itu adalah video dan
kartu

93
5. Tanya : Apa menurut ibu akan lebih baik jika ada media pembelajaran lain
yang dapat memberikan penjelasan dengan menarik dan interaktif pada siswa?
Jawab : Ya, media pembelajaran yang mendukung akan memberikan
pengetahuan kepada siswa menjadi lebih mudah untuk dipahami. Seperti
terdapat visual dan audio.
6. Tanya : Bagaimana pendapat ibu jika media pembelajaran tersebut
memanfaatkan smartphone/komputer yang dimiliki oleh siswa?
Jawab : Smartphone baik digunakan untuk mencari atau menambah ilmu,
tetapi harus bisa untuk mensortirnya, karena info yg ada di internet masih suka
salah, jadi perlu juga di cross-check dengan buku pendukung pelajaran.
Staf Pengajar Biologi

SMA Negeri 49 Jakarta
Ibu Tri Fitrayanti

94
Lampiran 5: Surat Bimbingan Skripsi

95
Lampiran 6: Surat Permohonan Penelitian

96
Lampiran 7: Dokumentasi
Responden beta test mendengarkan instruksi, melakukan beta test,

dan mengisi kuesioner.

Siti Nurul Hidayati - FST

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Siti Nurul Hidayati - FST

Diunggah oleh

Hak Cipta:

Format Tersedia

IMPLEMENTASI WEB-VR

(VIRTUAL REALITY BERBASIS BROWSER WEB)

PADA MEDIA PEMBELAJARAN BIOLOGI TINGKAT SMA

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

i UIN Syarif Hidayatullah Jakarta

(VIRTUAL REALITY BERBASIS BROWSER WEB)

PADA MEDIA PEMBELAJARAN BIOLOGI TINGKAT SMA

Diajukan Sebagai Salah Satu Syarat untuk Memperoleh

Gelar Sarjana Komputer (S.Kom)