PROGRAM APLIKASI PEMANDU GALERI LUKISAN BERDASARKAN AUGMENTED REALITY MENGGUNAKAN METODE PENCOCOKAN TANDA DENGAN HTML5 DAN JSARTOOLKIT Hans Dharmawidjaja Bina Nusantara University, Jalan KH. Syahdan No. 9 Palmerah, Jakarta 11480, Indonesia Email : j_hans_d@hotmail.com ABSTRAK Pada galeri lukisan setiap pengunjung yang datang ingin mendapatkan informasi tentang lukisan dengan mudah. Namun dengan terbatas nya jumlah pemandu dan banyaknya jumlah lukisan, maka perolehan informasi yang didapat menjadi terbatas. Oleh karena itu dibutuhkan sebuah aplikasi yang dapat membantu pengunjung dalam memperoleh informasi tentang lukisan menggunakan augmented reality. Augmented reality menggunakan metode marker matching untuk mencocokan tanda yang ada pada lukisan. Setelah dicocokan akan ditampilkan informasi yang ada pada lukisan tersebut secara nyata (real-time) sesuai dengan marker ID yang ada. Diharapkan dengan adanya aplikasi ini pengunjung merasa terbantu dalam mendapatkan informasi dalam galeri lukisan dan juga membantu pemilik galeri lukisan dalam pengelolaan galerinya. Kata kunci : Augmented Reality, Marker Matching, HTML5, Javascript ABSTRACT In the painting gallery every visitor who comes wants to get information about the painting with ease. But with its limited number of guides and the large number of paintings, the acquisition of the information obtained is limited. Therefore we need an application that can assist visitors in obtaining information about painting using augmented reality. Augmented reality using marker matching method to match the markings on the painting. Having matched the information displayed on the painting are real-time in accordance with the existing marker ID. Hopefully with this application visitors find it helpful in getting information in a gallery of paintings and also help the art gallery owner for the management of the gallery. Keyword : Augmented Reality, Marker Matching, HTML5, Javascript
PENDAHULUAN Saat ini perkembangan internet sangatlah pesat terutama dalam bahasa web HTML. Sebagian besar orang dapat mengaksesnya dimana saja baik dengan menggunakan komputer ataupun smartphone untuk mendapatkan informasi yang diinginkan. Sejak munculnya HTML5 banyak perubahan yang terjadi pada dunia web terutama dapat berinteraksinya browser dengan hardware pada perangkat serta adanya canvas untuk menampilkan beragam konten. Oleh karena hal tersebut banyak perancangan aplikasi yang dibentuk agar dapat memudahkan kerja manusia dalam hal mendapatkan informasi. Manusia dengan seiring berjalannya waktu terus melakukan penelitian agar manusia dapat memperoleh informasi dengan mudah melalui dunia maya. Dimulai dari tampilan berbasis teks yang masih terbatas pada command line pada tahun 1940, hingga diciptakan teknologi display graphic user interface (GUI) yang kita gunakan saat ini (Hager & Burku, 2011). Sejalan dengan perkembangan tersebut, munculah teknologi realitas maya atau biasa disebut dengan Virtual Reality (disingkat menjadi VR). Realitas maya yaitu teknologi yang membuat pengguna dapat berinteraksi dengan suatu lingkungan yang disimulasikan oleh komputer (computer-simulated environment), suatu lingkungan yang ditiru atau benar-benar suatu lingkungan baru yang hanya ada dalam komputer. Pada perkembangannya virtual reality memiliki cabang baru yang bahkan lebih terkenal dari Virtual Reality itu sendiri. Teknologi tersebut bernama Augmented Reality (disingkat menjadi AR), atau diterjemahkan bebas menjadi realitas tertambah (Azuma, 1997). Augmented reality adalah penggabungan benda-benda nyata dan maya di lingkungan nyata, berjalan secara interaktif dalam waktu nyata, dan terdapat integrasi antar benda dalam tiga dimensi, yaitu benda maya terintegrasi dalam dunia nyata (Azuma, 1997). Dalam augmented reality kita dapat menangkap informasi tambahan melalui indera visual maupun audio. Dalam penelitian ini akan dibentuk sebuah aplikasi augmented reality berbasis HTML5 dan Javascript serta menggunakan metodologi Marker Matching untuk mengklasifikasi marker yang ada. Aplikasi ini dibentuk untuk sistem pada galeri lukisan dimana adanya keterbatasan waktu dan jumlah pemandu yang ada. Dengan adanya aplikasi ini maka para pengunjung galeri lukisan dapat mengetahui informasi-informasi yang ada pada lukisan hanya dengan menangkap marker pada lukisan dengan menggunakan browser smartphone. Setelah itu browser akan mencocokan marker dengan pola yang ada untuk mendapatkan sebuah marker ID dan menampilkan informasi yang tersedia pada lukisan tersebut sesuai dengan marker ID yang tedeteksi. Dengan adanya aplikasi ini diharapkan pengunjung terbantu dalam mendapatkan informasi pada lukisan. Pengelola galeri juga diharapkan dapat memaksimalkan waktu dan mengurangi biaya yang dikeluarkan untuk pemandu. METODE PENELITIAN Metode yang akan digunakan meliputi tahap-tahap sebagai berikut: 1. Studi pustaka. Penulis mencari sumber buku, artikel, dan literatur internet yang berhubungan dengan topik penelitian. Penulis kemudian mempelajari dan memahami materi tersebut sebagai penunjang dalam kaitannya dengan materi yang di pilih. 2. Metode Analisis Metode Analisis dalam penelitian ini di bagi menjadi beberapa tahap yaitu: a. Mempelajari HTML5 b. Mempelajari bahasa pemrograman Javascript c. Mempelajari CSS3 d. Mempelajari metode marker matching 3. Metode Perancangan Tahapan perancangan dalam penulisan ini dibagi menjadi beberapa tahap, yaitu: a. Menggunakan permodelan incremental dalam pembuatan aplikasi b. Perancangan algoritma dan struktur program untuk setiap tahapan dalam membuat program aplikasi augmented reality c. Perancangan desain tampilan web
Pada pembuatan aplikasi augmented reality ini digunakan model perancangan aplikasi secara incremental. Berikut adalah tahapan yang dilakukan dalam pengembangan aplikasi ini: Increment #1 (Iterasi 1) 1. Communication (Komunikasi) Penulis melakukan bimbingan tentang pembuatan aplikasi augmented reality dan membicarakan tentang fitur-fitur yang akan dihadirkan dalam aplikasi ini serta tujuan dan manfaatnya. Pada tahap ini ditentukan bahwa aplikasi ini menggunakan marker sebagai penanda dan akan dimunculkan informasi secara langsung (real-time) jika marker. 2. Planning (Perencanaan) Penulis melakukan perencanaan dalam menentukan bahasa pemrograman yang akan digunakan. Penulis menggunakan bahasa pemrograman HTML5 dan JavaScript untuk pembuatan aplikasi ini. Pada tahap ini dilakukan juga pengecekan dukungan HTML5 pada browser yang ada serta mempelajari buku dan jurnal yang berkaitan tentang augmented reality dan HTML5 3. Modeling (Perancangan) Penulis melakukan perancangan yang akan dilakukan pada pembuatan aplikasi. Penulis menentukan library yang digunakan serta tahapan dalam pembuatan (penulisan koding). 4. Construction (Pembuatan) Penulis membuat aplikasi sesuai dengan rancangan yang telah dibuat pada tahap sebelumnya. Setelah aplikasi terbentuk dan dapat dijalankan maka dilanjutkan pada tahapan uji coba. 5. Development (Uji coba) Penulis melakukan uji coba aplikasi dan memperlihatkan aplikasi kepada pembimbing. Pada tahap uji coba aplikasi dapat berjalan dengan lancar dan dapat menampilkan informasi saat marker. Namun jika terlalu banyak gerakan yang ada, informasi yang ada terkadang menjadi hilang. Increment #2 (Iterasi 2) 1. Communication (Komunikasi) Penulis melakukan bimbingan tentang tahap uji coba pada iterasi sebelumnya. Pada tahap ini dihasilkan sebuah fitur baru dalam pengembangan berikutnya karena pada iterasi sebelumnya, informasi yang ada terkadang menghilang karena adanya gerakan. Pada iterasi ini akan dibuat sebuah layar khusus untuk menampilkan informasi saat pengguna menekan sebuah tombol sehingga jika terjadi gerakan layar informasi tidak menghilang. 2. Planning (Perencanaan) Pada tahap ini penulis mempelajari tentang pembuatan div, canvas dan CSS3 secara lanjut untuk membuat layar informasi. Setelah itu penulis merencanakan pembuatan aplikasi dengan fitur baru tersebut. 3. Modeling (Perancangan) Pada tahap ini penulis melakukan permodelan untuk menggabungkan fitur yang baru kedalam aplikasi tanpa mengubah terlalu banyak fitur yang ada sebelumnya. Penulis merancang untuk mengilangkan informasi yang lama dan menggantinya dengan layar informasi dengan menggunakan div dan menggunakan opacity pada CSS3 untuk membuat layar menjadi lebih interaktif dengan lingkungan nyata. 4. Construction (Pembuatan) Penulis melakukan pembuatan aplikasi sesuai dengan rancangan pada tahap sebelumnya. 5. Development (Uji coba) Penulis melakukan uji coba aplikasi dan memperlihatkan aplikasi kepada pembimbing. Setelah itu penulis melakukan survei kuesioner kepada pengguna secara umum untuk mengetahui pendapat dari pengguna.
HASIL DAN BAHASAN Untuk mengevaluasi kepuasan pengguna, penulis membuat kuesioner yang di isi secara langsung oleh pengguna setelah pengguna menggunakan aplikasi. Skala yang ada pada kuesioner ini adalah : 1. Sangat tidak setuju 2. setuju 3. Ragu-ragu 4. Setuju 5. Sangat setuju Pertanyaan 1 Program ini membantu untuk mendapatkan informasi secara mudah dalam galeri. Tabel 4.4 Hasil kuesioner Pertanyaan 1 1 0 0 0 8 7 Gambar 4.10 Grafik pertanyaan 1 Pada grafik diatas, pengguna memilih sangat setuju sebesar 47% dan setuju sebesar 53%. Dengan ini menandakan bahwa program augmented reality ini membantu pengguna untuk mendapatkan informasi secara mudah. Pertanyaan 2 Program ini dapat menggantikan manusia dalam pemanduan galeri lukisan. Tabel 4.5 Hasil kuesioner Pertanyaan 2 2 0 0 1 9 5
Gambar 4.11 Grafik pertanyaan 2 Pada grafik diatas, pengguna memilih sangat setuju sebesar 33%, setuju sebesar 60% dan raguragu sebesar 7%. Dengan ini menandakan bahwa program ini dapat menggantikan manusia dalam pemanduan galeri lukisan. Pertanyaan 3 Program dapat menghemat waktu dalam memandu karena sesuai dengan kebutuhan pengunjung. Tabel 4.6 Hasil kuesioner Pertanyaan 3 3 0 0 0 9 6 Gambar 4.12 Grafik pertanyaan 3 Pada grafik diatas, pengguna memilih sangat setuju sebesar 40% dan setuju sebesar 60%. Dengan ini menandakan bahwa program dapat menghemat waktu dalam memandu karena sesuai dengan kebutuhan pengunjung. Pertanyaan 4 Penggunaan augmented reality dalam program sangat menarik dan mempermudah pengunjung dalam mendapatkan informasi.
Tabel 4.7 Hasil kuesioner Pertanyaan 4 4 0 0 1 8 6 Gambar 4.13 Grafik pertanyaan 4 Pada grafik diatas, pengguna memilih sangat setuju sebesar 40%, setuju sebesar 53%, dan raguragu sebesar 7%. Dengan ini menandakan bahwa penggunaan augmented reality dalam program sangat menarik dan mempermudah pengunjung dalam mendapatkan informasi. Pertanyaan 5 Program efisien karena tidak membutuhkan instalasi dan hanya menggunakan browser biasa. Tabel 4.8 Hasil kuesioner Pertanyaan 5 5 0 0 0 6 9 Gambar 4.14 Grafik pertanyaan 5
Pada grafik diatas, pengguna memilih sangat setuju sebesar 60% dan setuju sebesar 40%. Dengan ini menandakan bahwa program efisien karena tidak membutuhkan instalasi dan hanya menggunakan browser biasa. Pertanyaan 6 Panduan penggunaan program mudah dimengerti. Tabel 4.9 Hasil kuesioner Pertanyaan 6 6 0 0 0 9 6 Gambar 4.15 Grafik pertanyaan 6 Pada grafik diatas, pengguna memilih sangat setuju sebesar 40% dan setuju sebesar 60%. Dengan ini menandakan bahwa panduan penggunaan program mudah dimengerti. Pertanyaan 7 Program mudah untuk dimengerti dan dioperasikan. Tabel 4.10 Hasil kuesioner Pertanyaan 7 7 0 0 1 8 6
Gambar 4.16 Grafik pertanyaan 7 Pada grafik diatas, pengguna memilih sangat setuju sebesar 40%, setuju sebesar 53%, dan raguragu sebesar 7%. Dengan ini menandakan bahwa program mudah untuk dimengerti dan dioperasikan. Pertanyaan 8 Tampilan website simple, menarik dan mudah untuk dioperasikan. Tabel 4.11 Hasil kuesioner Pertanyaan 8 8 0 0 0 7 8 Gambar 4.17 Grafik pertanyaan 8 Pada grafik diatas, pengguna memilih sangat setuju sebesar 53% dan setuju sebesar 47%. Dengan ini menandakan bahwa tampilan website simple, menarik dan mudah untuk dioperasikan. Pada evaluasi sistem, penulis melakukan uji coba (testing) aplikasi dengan menggunakan smartphone Nexus 4 bersistem operasi Android 4.2.2 Jelly Bean dan berkamera dengan resolusi 8 megapixel. Marker yang digunakan pada lukisan berukuran 25mm x 25mm dan memiliki titik sebanyak
49 buah (7x7). Pada uji coba aplikasi ini digunakan variable uji coba yaitu perspektif (jarak dan sudut) dan distorsi (kelengkungan marker). Berikut adalah kelima marker yang akan digunakan dalam uji coba : Gambar 4.18 Marker ID dari kiri ke kanan : 76, 77, 83, 80, 78 Berikut adalah tabel hasil uji coba aplikasi yang telah dilakukan menggunakan variable jarak kamera terhadap lukisan secara tegak lurus (sudut 90 o ) : Tabel 4.12 Tabel uji coba jarak kamera terhadap marker pada lukisan Jarak Marker ID 76 Marker ID 77 Marker ID 83 Marker ID 80 Marker ID 78 30 cm 60 cm 90 cm 120 cm Pada tabel diatas dapat dilihat bahwa aplikasi dapat berjalan dengan baik jika jarak kamera terhadap marker pada lukisan berada diantara 30 60 cm. Diluar jarak tersebut aplikasi masih tetap dapat berjalan namun deteksi sangat sulit terjadi karena hanya dengan sedikit gerakan maka deteksi menjadi hilang. Untuk uji coba sudut terdiri dari 3 bagian yaitu yaw, pitch, dan roll. Yaw adalah kemiringan sudut yang diambil secara horizontal (sumbu x), sedangkan pitch kemiringan yang di ambil secara vertical (sumbu y), sedangkan roll adalah kemiringan sudut marker yang dirotasikan. Namun karena pada marker yang bersifat 2 dimensi maka yaw dan pitch dapat dijadikan satu uji coba karena memiliki hasil yang sama. Berikut adalah tabel hasil uji coba sudut dengan kemiringan yang diambil secara horizontal (yaw) oleh kamera terhadap lukisan pada jarak 60 cm (titik aman terjauh) : Tabel 4.13 Tabel uji coba sudut kamera (yaw) terhadap marker pada lukisan Jarak Marker ID 76 Marker ID 77 Marker ID 83 Marker ID 80 Marker ID 78 30 o 45 o 90 o 135 o 150 o Pada tabel diatas dapat dilihat bahwa aplikasi dapat berjalan dengan baik jika sudut kamera terhadap marker pada lukisan berada diantara 45 o s/d 135 o. Diluar sudut deteksi sangat sulit terjadi. Berikut adalah tabel hasil uji coba sudut dengan kemiringan pada marker yang diputar dengan jarak kamera pada lukisan adalah 60 cm (titik aman terjauh) :
Tabel 4.14 Tabel uji coba rotasi marker Rotasi Marker Marker ID 76 Marker ID 77 Marker ID 83 Marker ID 80 Marker ID 78 0 o 45 o 90 o 135 o 180 o 225 o 270 o 315 o Pada tabel diatas dapat dilihat bahwa aplikasi dapat berjalan dengan baik walau marker dirotasi dengan sudut berapapun. Dapat disimpulkan bahwa rotasi pada marker tidak menyebabkan kurangnya performa dari aplikasi ini. Berikut adalah tabel hasil uji coba kelengkungan (distorsi) marker dengan jarak kamera terhadap lukisan adalah 60 cm (titik aman terjauh) dan kamera tegak lurus terhadap marker (sudut 90 o ) : Tabel 4.15 Tabel uji coba kelengkungan (distorsi) marker Kelengkungan Marker Marker ID 76 Marker ID 77 Marker ID 83 Marker ID 80 Marker ID 78 Sedikit Sedang Banyak Pada tabel diatas dapat dilihat bahwa aplikasi dapat berjalan dengan baik dengan kelengkungan marker sedikit dan sedang. Pada marker dengan kelengkungan banyak, marker tidak dapat sama sekali. Menurut hasil uji coba aplikasi yang telah dilakukan, dapat dilihat bahwa aplikasi ini dapat berjalan dengan baik jika jarak kamera terhadap marker pada lukisan berada diantara 30 60 cm dan dengan sudut yaw dan pitch antara 45 o s/d 135 o. Diluar jarak dan sudut tersebut aplikasi masih tetap dapat berjalan namun deteksi sangat sulit terjadi karena hanya dengan sedikit gerakan maka deteksi menjadi hilang. Untuk uji coba rotasi, aplikasi tidak mengalami masalah dalam pendeteksian marker dan pada uji coba distorsi, marker tidak sama sekali pada kelengkungan banyak. Hilangnya deteksi yang muncul terjadi karena adanya gerakan yang membuat aplikasi menjadi sulit mendeteksi adanya marker. Hal ini terjadi pada jarak diatas 60cm dan sudut diluar 45 o s/d 135 o. Saat uji coba diluar batasan tersebut, tombol show information yang muncul saat nya marker terkadang hilang dan terkadang muncul kembali sehingga menyulitkan pengguna untuk menekan tombol tersebut. SIMPULAN DAN SARAN Simpulan yang didapat dalam pembuatan aplikasi ini melalui analisis, perancangan, implementasi dan evaluasi yang ada adalah sebagai berikut : 1. Aplikasi augmented reality ini membantu para pengguna untuk mendapatkan informasi pada lukisan tanpa membutuhkan bantuan banyak dari pemandu sehingga semua pengunjung museum mendapatkan kepuasan dalam memperoleh informasi. 2. Aplikasi ini berbasis HTML5 untuk mempermudah dalam penggunaan nya karena hanya membutuhkan browser yang telah mendukung HTML5 sehingga pada berbagai sistem operasi aplikasi ini dapat dijalankan. 3. Aplikasi ini dapat berjalan secara cepat pada mobile browser dan menampilkan informasi dengan cepat karena digunakan nya objek 2D dan menjadi lebih akurat dalam deteksi dan klasifikasi karena digunakannya marker sebagai penanda lukisan. 4. Aplikasi ini membuat banyak pengguna menjadi lebih tertarik dalam belajar secara realitas pada mobile (mobile learning) karena lebih interaktif berdasarkan kuesioner pada halaman 92.
Berikut ini adalah saran yang dapat membantu dalam pengembangan lebih lanjut dari aplikasi augmented reality : 1. Dapat membuat tampilan antarmuka yang lebih interaktif untuk menarik banyak pengguna agar lebih mengetahui tentang augmented reality 2. Pengembangan objek yang ditampilkan menjadi objek 3D setelah speksifikasi hardware dan software pada mobile telah mendukungnya 3. Menggunakan gambar sebagai marker agar lebih menarik 4. Adanya sistem database sehingga mempermudah penggantian objek dan marker REFERENSI Azuma, R. T. (1997). A Survey of Augmented Reality. In Presence: Teleoperators and Virtual Environments, 355-385. Cawood, S., & Mark, F. (2008). Augmented Reality : A Practical Guide (1st ed.). Pragmatic Bookshelf. Dutton, S. (2012). WEBRTC : Plugin-free real-time communication. Flanagan, D. (2011). JavaScript: The Definitive Guide (6th ed.). O'Reilly Media, Inc. Freeman, E., & Robson, E. (2011). Head First HTML5 Programming. O'Reilly Media, Inc. Fulton, S., & Fulton, J. (2011). HTML5 Canvas. O'Reilly Media, Inc. Hager, H., & Burku, S. (2011). A Historical Overview Of Tablet Computing, Guis and Hypertext. Kato, H. (2009). Inside ARToolkit. Koyama, T. (2009). Introduction To FLARToolkit. Kriegman, D. (2007). Homography Estimation. Computer Vision I. Pressman, R. S. (2010). Software Engineering : A practitioners Approach. McGraw-Hill Science. Rumbaugh, J. (2004). The Unified Modeling Language Reference Manual (2nd ed.). Pearson Education, Inc. Shneiderman, B. (2009). Designing The User Interface : Strategies For Effective Human-Computer Interaction (5th Edition ed.). Pearson Education, Inc. Wagner, D., & Schmalstieg, D. (2007). ARToolKitPlus for Pose Tracking on Mobile Devices. Computer Vision Winter Workshop 2007. RIWAYAT PENULIS Hans Dharmawidjaja lahir di kota Jakarta pada 30 Desember 1989. Penulis menamatkan pendidikan S1 di Universitas Bina Nusantara dalam bidang ilmu Teknik Informatika dan Matematika pada tahun 2013.