i UIN Syarif Hidayatullah Jakarta 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
ii 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
vii UIN Syarif Hidayatullah Jakarta 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)
viii 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)
ix 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.
x 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
xi 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
xii 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
xiii 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
xiv 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
xv 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
xvi 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
1 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.
UIN Syarif Hidayatullah Jakarta 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 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,
UIN Syarif Hidayatullah Jakarta 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.
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
15% 7% 9% 7% 12%
15%
13% 16% 13% 20%
70% 80% 75% 79% 67%
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Total Audience Persons: 15-17 Persons: 18-24 Persons: 25-34 Persons: 35+
% OF UNIQUE USERS BY PLATFORM AND DEMOGRAPHIC
Desktop Only Multi-platform Mobile Only
UIN Syarif Hidayatullah Jakarta 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.
UIN Syarif Hidayatullah Jakarta 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:
UIN Syarif Hidayatullah Jakarta 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
UIN Syarif Hidayatullah Jakarta 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.
UIN Syarif Hidayatullah Jakarta 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.
UIN Syarif Hidayatullah Jakarta 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).
10
UIN Syarif Hidayatullah Jakarta 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)
UIN Syarif Hidayatullah Jakarta 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 adalah sebagai berikut:
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:
UIN Syarif Hidayatullah Jakarta 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).
UIN Syarif Hidayatullah Jakarta 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.
UIN Syarif Hidayatullah Jakarta 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
UIN Syarif Hidayatullah Jakarta 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):
UIN Syarif Hidayatullah Jakarta
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)
UIN Syarif Hidayatullah Jakarta 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
Sumber: (Neelakantam & Pant 2017:2)
UIN Syarif Hidayatullah Jakarta 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.
UIN Syarif Hidayatullah Jakarta 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
Sumber: (Neelakantam & Pant 2017:17)
UIN Syarif Hidayatullah Jakarta 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)
Sumber: (Neelakantam & Pant 2017:18)
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).
UIN Syarif Hidayatullah Jakarta 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
Primitive Fungsi Contoh pengkodean dan outputnya
<a-box> Membuat kotak (kubus, bata, dll)
<a-camera>
Menaruh kamera di posisi yang
diinginkan
UIN Syarif Hidayatullah Jakarta Nama
Primitive Fungsi Contoh pengkodean dan outputnya
<a-cursor>
Menambahkan fitur untuk dapat
mengklik di WebVR
<a-circle> Membuat lingkaran
<a-collada model>
Memasukkan 3D Collada models
<a-cone> Membuat kerucut
UIN Syarif Hidayatullah Jakarta Nama
Primitive Fungsi Contoh pengkodean dan outputnya
<a- curvedimag
e>
Melengkungkan gambar untuk 360
VR scene
<a-
cylinder> Membuat tabung
<a- dodecahedr
on>
Membuat model 3D dengan 12 sisi
<a-image>
Menambah gambar di permukaan datar
<a-light>
Menyesuaikan pencahayaan di A-
Frame scene
UIN Syarif Hidayatullah Jakarta Nama
Primitive Fungsi Contoh pengkodean dan outputnya
<a-obj- model>
Memasukkan .obj model (bersamaan
dg .mtl nya)
<a- octahedron
>
Membuat 3D model dengan 8
sisi segitiga
<a-plane> Membuat permukaan datar
<a-ring> Membuat bentuk cincin
<a-sky>
Menambah gambar 360 derajat sebagai
latar belakang
UIN Syarif Hidayatullah Jakarta Nama
Primitive Fungsi Contoh pengkodean dan outputnya
<a-sound> Menambah suara
<a-sphere>
Menambah bidang bola, terdapat warna & pola
<a- tetrahedron
>
Menambah piramida
<a-torus>
Menambah bentuk yang menyerupai
donat
<a-torus- knot>
Menambah bentuk yang menyerupai
pretzel
<a-video>
Menambah video untuk permukaan
datar
UIN Syarif Hidayatullah Jakarta Nama
Primitive Fungsi Contoh pengkodean dan outputnya
<a- videosphere
>
Menambah video 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).
UIN Syarif Hidayatullah Jakarta 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).
UIN Syarif Hidayatullah Jakarta 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):
1. Analisis Kebutuhan Sistem
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.
2. Pertimbangan Desain
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.
UIN Syarif Hidayatullah Jakarta 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.
UIN Syarif Hidayatullah Jakarta 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.
UIN Syarif Hidayatullah Jakarta 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.
UIN Syarif Hidayatullah Jakarta 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
UIN Syarif Hidayatullah Jakarta 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
UIN Syarif Hidayatullah Jakarta 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.
UIN Syarif Hidayatullah Jakarta 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).
UIN Syarif Hidayatullah Jakarta 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 Galeri Seni Lukis Virtual Berbasis Web Browser pada Smartphone
Oleh :
Radhi Al Hamid (Gunadarma) Tahun : (2016)
Website menampilkan informasi dan
visualisasi tiga dimensi galeri seni lukis dalam bentuk Virtual Reality lewat website.
Website dibuat
menggunakan HTML5 dan Aframe.js. Objek galeri seni lukis virtual dirancang menggunakan Blender 3D.
Menggunakan Web VR yang mudah digunakan dan sudah menggunakan framework AFrame
Tampilan museum 3D nya menarik
Jangkauan untuk menjelajahi objek VR sangat terbatas
2. Judul :
Implementation of WebVR-based Laboratory for Control
Engineering
Education based on NCSLab Framework
Menampilkan sebuah laboratorium untuk teknik kontrol berbasis WebVR dengan menggunakan framework NCSLab
Dibuat menggunakan HTML5 dan NCSLab.
Objek 3D modeling dibuat menggunakan 3ds Max.
NCSLab menggunakan Three.js untuk 3D graphic engine yang memiliki performa hebat untuk rendering 3D
Cara mengakses WebVR tidak secara langsung tapi menggunakan
UIN Syarif Hidayatullah Jakarta 37
