BAB 2 LANDASAN TEORI 2.1
Teori Umum
2.1.1 Augmented Reality (AR) Augmented reality adalah sebuah teknik 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. Tujuan utama dari augmented reality adalah untuk menciptakan sensasi objek virtual yang hadir di dunia nyata. Untuk mencapai efek ini maka dibutuhkan penggabungan antara virtual reality (VR) dengan dunia nyata. Augmented reality akan sangat efektif jika elemen virtual ditambahkan secara realtime. Oleh karena hal tersebut, augmented reality umumnya menambahkan objek 2D atau 3D pada sebuah video digital secara real-time. Objek virtual yang ditambahkan kedalam adegan diketahui sebagai visual AR. Menurut definisi, element AR tidak terlihat dengan mata telanjang sehingga visual AR bergantung pada semacam layar seperti canvas pada HTML5 (Cawood & Mark, 2008). Augmented
reality
menggunakan
metode
Marker
Matching
untuk
mencocokan marker yang ditangkap oleh kamera dengan matriks yang sudah ditentukan. Tahapan Marker Matching yang digunakan oleh penulis adalah rectangle extraction dan pose & position estimation yang akan dijelaskan lebih lanjut di bagian berikutnya. Setelah data marker dicocokan dan marker ID didapatkan, maka visual AR yang cocok akan ditampilkan untuk menambah informasi yang dibutuhkan.
9
10 Contoh augmented reality :
Gambar 2.1 Meja nyata dengan lampu virtual dan dua kursi virtual (Azuma, 1997) Gambar 2.1 merupakan contoh dari bentuk augmented reality dalam 3D. Pada gambar ini menunjukkan meja yang nyata dengan telepon yang nyata. Di dalam ruangan ini juga terdapat lampu virtual dan dua kursi virtual. Perhatikan bahwa benda digabungkan dalam 3D, sehingga lampu maya meliputi meja nyata, dan meja sebenarnya mencakup bagian dari dua kursi virtual.
2.1.2
Perkembangan Augmented Reality Augmented reality (AR) adalah fenomena yang berkembang pada perangkat
mobile, tercermin dari peningkatan komputasi pada dibeberapa tahun terakhir dan peningkatan akses internet secara umum di seluruh dunia. Salah satu kegunaan augmented reality yang paling menarik adalah resonansi dengan lingkungan sekitarnya dan informasi yang dapat ditampilkan pada lingkungan tersebut yang memungkinkan tidak hanya untuk belajar tentang lingkungan tetapi juga memberikan keterangan tambahan tentang lingkungan tersebut. Banyak perkembangan yang terjadi pada augmented reality hingga pada akhirnya terkenal dan sampai pada sistem mobile. Perkembangan Azuma yang dilaporkan pada tahun 1997 difokuskan terutama pada menambahkan informasi visual, tetapi pada awal abad kedua puluh satu, para peneliti bekerja pada augmented reality untuk semua indera, termasuk pendengaran,
11 sentuhan dan bau (Azuma et al., 2001). Milgram dan Kishino (1994) menulis tentang kemungkinan auditory augmented reality yang merupakan pencampuran sinyal yang dihasilkan komputer dengan orang-orang dari lingkungan dunia nyata secara langsung, haptic augmented reality yang menggabungkan sensasi artifisial yang dihasilkan dari sentuhan dan tekanan, serta vestibular augmented reality, sintesa informasi tentang akselerasi atau gerakan yang bekerja pada penggunanya. Kemungkinan untuk aplikasi mobile juga meningkat, sebagai peneliti bekerja untuk memanfaatkan pengambilan informasi dari sebuah lokasi. Sebagai contoh, Mobile Augmented reality System (MARS) yang mengkombinasikan komputer mobile dan headset dengan kompas, inklinometer dan GPS (Global Positioning System), yang memungkinkan pengguna untuk melihat representasi dari bangunan bersejarah di lokasi asli (Höllerer et al., 1999). Dalam rangka untuk mendapatkan wawasan pembelajaran unik augmented reality pada mobile, perlu adanya pendekatan dengan pembelajaran mobile (mobile learning) dalam realitas yang normal. Fokus pada pembelajaran melalui realitas mengarahkan kita untuk memperdalam tentang teori dalam pembelajaran dan perhatian yang seksama terhadap konteks. Vygotsky berpendapat bahwa kesadaran manusia berhubungan dengan penggunaan alat-alat dan artefak, yang memiliki kontak dengan dunia secara langsung (real-time). Alat ini menghasilkan perbaikan kuantitatif dalam hal kecepatan dan efisiensi dalam pembangunan dan perkembangan manusia. Alat ini juga memproduksi transformasi secara kualitatif karena adanya kontak dengan dunia manusia dan tersedianya sarana untuk mengontrol dan mengatur perilaku mereka dibandingkan dengan adanya rangsangan eksternal (Vygotsky, 1978).
12 Dengan banyaknya perkembangan yang ada, augmented reality dalam teknologi informasi dapat sangat membantu manusia dalam memperoleh informasi. Untuk mendapatkan informasi yang mudah maka harus dibuat sistem yang dapat diakses dari berbagai macam alat dan mudah untuk diimplementasikan serta diaplikasikan.
2.1.3 Rekayasa Piranti Lunak (RPL) Ada banyak situasi dimana kebutuhan inisial dari sebuah perangkat lunak didefinisikan dengan baik, namun ruang lingkup keseluruhan dari upaya pengembangan menghalangi proses linear yang murni. Selain itu, kebutuhan yang mendesak untuk menyediakan perangkat lunak kepada pengguna juga menjadi salah satu alasan dan memperbaiki serta memperluas fungsi-fungsi nya pada rilis berikutnya. Dalam kasus seperti ini kita dapat memilih model proses yang menghasilkan perangkat lunak secara bertahap seperti model incremental (Pressman, 2010).
2.1.3.1 Incremental Model Model incremental menggabungkan elemen dari aliran proses linear dan paralel. Model ini mengaplikasikan urutan linear sebagai sebuah kalender kemajuan dari proses. Setiap urutan linear menghasilkan peningkatan perangkat lunak dengan cara yang mirip dengan yang dihasilkan oleh aliran evolusi proses.
13
Gambar 2.2 Incremental Model Process (Pressman, 2010: 42) Ketika model incremental digunakan, biasanya peningkatan pertama merupakan produk inti yang merupakan persyaratan dasar dari kebutuhan pelanggan namun fitur-fitur tambahan banyak yang belum tersampaikan. Dengan adanya penggunaan dan evaluasi dari produk inti tersebut maka terbentuklah rencana untuk peningkatan selanjutnya. Rencana untuk memodifikasi produk inti lebih diutamakan untuk memenuhi kebutuhan pelanggan dan menambah fitur tambahan serta fungsi lainnya. Proses peningkatan ini diulang secara terus menerus setelah adanya hasil dari peningkatan sebelumnya dan berhenti setelah produk yang utuh telah terselesaikan (Pressman, 2010: 41-42).
2.1.4 Unified Modeling Language (UML) Unified modeling language (UML) adalah bahasa pemodelan visual yang memiliki tujuan umum untuk menentukan, memvisualisasikan, membangun, dan mendokumentasikan susunan dari sistem perangkat lunak. UML menangkap keputusan dan pemahaman tentang sistem yang harus dibangun. Hal ini digunakan
14 untuk memahami, merancang, menjelajah, mengkonfigurasi, memelihara, dan mengontrol informasi tentang sistem tersebut. Spesifikasi UML tidak menentukan standar proses, tetapi dimaksudkan untuk proses iterasi dalam pembangunan. Hal ini dimaksudkan untuk mendukung proses pembangunan object-oriented (Rumbaugh, 2004). UML memiliki banyak struktur dan diagram dalam permodelannya. Pada pembuatan aplikasi ini akandigunakan beberapa diagram seperti use case diagram, activity diagram, class diagram, dan sequence diagram.
2.1.4.1 Use Case Diagram Diagram use case merupakan sebuah model yang menggambarkan hubungan pengguna (aktor) dengan sistem. Diagram ini menangkap perilaku sistem, subsistem, atau kelas yang muncul untuk pengguna di luar sistem (Rumbaugh, 2004). Potonganpotongan fungsi interaktif disebut kasus penggunaan. Sebuah kasus penggunaan menggambarkan interaksi dengan pengguna sebagai urutan pesan antara sistem dan satu atau lebih pengguna. Tujuan dari diagram ini adalah untuk mendaftarkan aktor dan kasus serta menunjukan bagaimana aktor berpartisipasi dalam setiap kasus yang ada. Diagram use case diimplementasikan sebagai sebuah kolaborasi dalam tampilan interaksi.
15 Tabel 2.1 Use Case Diagram Simbol
Keterangan
Kasus penggunaan
Aktor
Jalur komunikasi antara aktor dan kasus pengunaan
2.1.4.2 Activity Diagram Diagram aktivitas merupakan bentuk khusus dari bagian sistem yang dimaksudkan untuk model perhitungan dan alur kerja. Bagian-bagian dari diagram aktivitas mewakili pelaksanaan perhitungan, dan bukan bagian dari objek (Rumbaugh, 2004). Diagram aktivitas berisikan keadaan dari sebuah kegiatan. keadaan-keadaan tersebut merupakan pernyataan sebuah pelaksanaan dalam prosedur atau kinerja dari suatu kegiatan dalam alur kerja. Diagram ini juga mengandung keadaan dari sebuah aksi yang mirip dengan keadaan kegiatan. Keadaan aksi biasanya digunakan untuk operasi pembukuan jangka pendek. Sebuah diagram aktivitas dapat memiliki beberapa cabang serta mengontrol cabang-cabang tersebut agar dapat berjalan dengan lancar. Diagram aktivitas dapat digambarkan seperti alur
16 kerja (flow chart) tradisional namun memiliki kemungkinan untuk mengontrol secara bersamaan selain mengontrol secara berurutan (sekuensial).
Tabel 2.2 Activity Diagram Simbol
Keterangan
Simbol awal dari penggunaan diagram aktivitas
Symbol akhir dari penggunaan diagram aktivitas
Keadaan dari sebuah aktivitas
Jalur yang mengubungkan keadaankeadaan (states)
2.1.4.3 Class Diagram Sebuah diagram kelas adalah presentasi grafis dari pandangan statis yang menunjukkan koleksi deklaratif (statis) elemen model, seperti kelas, jenis, dan isinya dan hubungan mereka (Rumbaugh, 2004). Sebuah diagram kelas dapat menunjukkan pandangan dari paket dan mungkin berisi simbol untuk paket bersarang (nesting). Sebuah diagram kelas berisi elemen perilaku tertentu seperti operasi, tetapi dinamika
17 mereka disajikan dalam diagram lainnya, seperti diagram statechart dan diagram kolaborasi. Tabel 2.3 Class Diagram Simbol
Keterangan Class (Kelas) : Kelas terdiri dari nama kelas, atribut dan fungsi Aggregation : Hubungan sebuah kelas besar yang mengandung beberapa kelas kecil
Composition : Hubungan sebuah kelas besar membentuk atau menghancurkan bagian yang lebih kecil didalamnya Inheritance : Hubungan dimana sebuah kelas induk yang fungsi-fungsinya dipakai oleh kelas anaknya.
2.1.4.4 Sequence Diagram Sebuah diagram yang menunjukkan interaksi objek diatur dalam urutan waktu. Secara khusus, hal itu menunjukkan benda-benda yang berpartisipasi dalam interaksi dan urutan pesan yang dipertukarkan (Rumbaugh, 2004). Diagram sequence menampilkan interaksi sebagai grafik dua dimensi. Dimensi vertikal adalah sumbu waktu. Dimensi horizontal menunjukkan peran classifier yang mewakili objek individu dalam kolaborasi ini. Setiap peran classifier diwakili oleh kolom vertikal. Selama obyek ada, peran ditunjukkan oleh garis putus-
18 putus. Selama aktivasi prosedur pada objek mulai aktif, garis hidup digambar sebagai sebuah garis ganda. Tabel 2.4 Sequence Diagram Simbol
Keterangan Actor Lifeline : Menandakan hidupnya aktor dalam sebuah sequence Object Lifeline : Menandakan hidupnya objek dalam sebuah sequence Activation : Menandakan periode waktu saat proses aktif dalam interaksi Message : Hubungan yang terjadi antar objek Self Message : Hubungan yang terjadi dalam objek itu sendiri
2.1.5 User Interface Design Pada pembuatan aplikasi ini, desain yang dilakukan untuk antarmuka pengguna berpedoman kepada eight golden rules yang di kemukakan oleh Ben Shneiderman (Shneiderman, 2009). Eight golden rules tersebut akan dijelaskan sebagai berikut : 1.
Strive For Consistency (Berusaha untuk konsisten) Aturan ini adalah aturan yang paling sering dilanggar. Konsistensi urutan tindakan harus dilakukan dalam situasi yang mirip. Kemiripan tersebut harus ada dalam setiap elemen seperti menu, prompt, layar bantuan, warna yang konsisten, tata letak, kapitalisasi, gaya tulisan, dan sebagainya.
19 2.
Cater to Universabillity (Memenuhi kebutuhan secara universal) Kenali kebutuhan beragam dari pengguna dalam memfalisitasi dan transformasi konten. Perbedaan keahlian, rentang usia, kecacatan pengguna, dan keanekaragaman teknologi masing-masing memiliki persyaratan yang memandu pembuatan desain. Menambah fitur untuk pemula seperti penjelasan penggunaan, dan fitur untuk para ahli seperti jalan pintas dapat memperkaya desain antarmuka dan meningkatkan kualitas sistem.
3.
Offer Informative Feedback (Adanya umpan balik informatif) Harus adanya sistem umpan balik untuk setiap tindakan pengguna. Untuk tindakan yang sering dan kecil, respon dapat berupa sesuatu yang sederhana. Namun untuk tindakan yang jarang terjadi dan utama, respon harus lebih substansial.
4.
Design Dialogs To Yield Closure (Dialog untuk hasil penutupan) Urutan tindakan harus dikelompokan menjadi awal, tengah dan akhir. Umpan balik informative pada penyelesaian sekelompok tindakan memberikan pengguna kepuasan dan rasa lega serta dapat menyiapkan kelompok tindakan berikutnya.
5.
Prevent Errors (Penanggulangan kesalahan) Perancangan sistem harus sedemikian rupa agar pengguna tidak membuat kesalahan serius. Jika pengguna membuat kesalahan maka antarmuka harus mendeteksi kesalahan dan menawarkan istruksi sederhana.
6.
Permit Easy Reversal Of Actions (Mudah dalam pengembalian aksi) Tindakan harus bersifat reversible (dapat kembali). Fitur ini mengurangi kecemasan, karena pengguna tahu bahwa kesalahan dapat dibatalkan sehingga mendorong eksplorasi pilihan asing.
20 7.
Support Internal Locus Of Control (Mendukung kontrol internal) Pengguna yang berpengalaman sangat ingin bertanggung jawab atas interface dan antarmuka untuk merespon tindakan mereka.
8.
Reduce Short-term Memory Load (Mengurangi beban ingatan jangka pendek) Keterbatasan manusia dalam pengolahan informasi pada ingatan jangka pendek mensyaratkan bahwa penampilan harus dibuat secara sederhana. Maka dibutuhkan bantuan agar manusia tetap mengingat sepert symbol dan nilai setelah menyelesaikan suatu tindakan.
2.2
Teori Khusus
2.2.1 Marker Matching Marker Matching menggunakan image processing untuk mengubah marker menjadi matriks agar dapat dicocokan dengan pola marker yang sudah ditentukan. Pertama gambar akan diproses menjadi grayscale (warna hitam putih). Dengan mengubah gambar menjadi grayscale akan mempercepat dan mempermudah proses pencocokan gambar karena pixel yang ada hanya 2 yaitu hitam dan putih. Disini penulis menggunakan algoritma Rectangle Extraction untuk untuk mendeteksi adanya marker. Setelah marker terdeteksi makan dilanjutkan dengan algoritma Pose & Position Estimation untuk memproyeksikan bidang 3 dimensi menjadi 2 dimensi. Setelah marker dideteksi dan diubah kebidang 2D maka akan ada proses classification (klasifikasi) untuk mendapatkan marker ID yang sesuai dengan pola yang ada.
21 2.2.1.1 Marker ID Marker yang digunakan untuk pencocokan gambar 2D dikelilingi oleh garis hitam setelah mengubah gambar menjadi matriks yang sesuai dengan resolusi programmer. Dengan adanya penyesuaian resolusi, Marker ID yang dapat digunakan secara bersamaan saat dijalankannya program menjadi terbatas karena meningkatnya biaya pencarian (klasifikasi). Namun dengan Marker ID ini, proses klasifikasi menjadi sangat cepat karena tidak membutuhkan proses pencocokan gambar. Marker ID yang dapat digunakan pada aplikasi ini adalah sebanyak 100 buah. Marker dapat dibentuk hingga 4096 buah dengan kecepatan dan keakuratan yang sama. Marker yang digunakan dapat lebih dari 4096 tetapi membutuhkan pengurangan keakuratan dalam deteksi ID (Wagner & Schmalstieg, 2007: 3-4).
Gambar 2.3 Contoh Marker (Kiri ke kanan, ID : 4, 5, 6, dan 7)
2.2.1.2 Rectangle Extraction Rectangle extraction terdiri dari 4 proses yaitu Thresholding, Labeling, Feature Extraction, Four straight lines fitting. Dari keempat proses ini akan dideteksi sebuah marker berbentuk kotak.
2.2.1.3 Thresholding Thresholding adalah metode yang paling sederhana dari segmentasi citra. Dari gambar grayscale, thresholding dapat digunakan untuk membuat gambar biner (hitam dan putih). Sebuah gambar biner dibentuk dari perbedaan warna pixel yang
22 ditentukan oleh threshold. Jika threshold yang ditentukan adalah 110, maka pixel yang berada di atas atau sama dengan 110 (lebih gelap) akan ditandai dengan biner 1, dan yang berada di bawah 110 (lebih terang) akan ditandai dengan biner 0. Setelah terbentuk gambar hitam dan putih maka proses selanjutnya adalah labeling.
Gambar 2.4 Contoh hasil thresholding (Koyama, 2009)
2.2.1.4 Labeling Proses labeling adalah proses pemberian tanda pada pada gambar yang telah menjadi hitam putih setelah proses thresholding. Setiap bagian yang berwarna putih dan tertutup diberi tanda agar lebih mudah dikenali dan dicek pada tahap berikutnya.
Gambar 2.5 Contoh hasil labeling (Koyama, 2009)
23 2.2.1.5 Feature Extraction Setelah terbentuk bagian dengan ruang tertutup dan telah diberi tanda maka akan dilakukan pengambilan fitur berupa area dan posisi. Setiap ruangan yang telah diberi tanda didapatkan posisi dan letak koordinat nya dalam tahap ini. Setelah didapatkannya posisi dan koordinat dari tiap bagian, maka akan dilanjutkan ketahap four straight lines fitting.
2.2.1.6 Four Straight Lines Fitting Four straight lines fitting adalah algoritma sederhana untuk menentukan berbentuk kotak atau tidak bagian yang telah diberi tanda pada tahap sebelumnya. Bagian yang berbentuk kotak akan ditampung dan diproses lebih lanjut untuk pengenalan marker agar didapatkan sebuah marker ID.
Gambar 2.6 Contoh hasil feature extraction dan four straight lines fitting (Koyama, 2009)
2.2.1.7 Pose & Position Estimation Pada pose & position estimation, akan dilakukan proses pengubahan proyeksi dari 3D menjadi 2D menggunakan matriks translasi dan rotasi serta adanya distorsi
24 agar kelengkungan marker dapat ditoleransi. Bagian kotak yang telah diseleksi pada tahap sebelumnya, masih dalam bentuk proyeksi 3D sehingga sulit untuk dideteksi. Untuk mengubahnya menjadi bidang 2D maka digunakan beberapa perhitungan matriks untuk mengubah koordinat sistem.
Gambar 2.7 Sistem Koordinat (Kato, 2009) Pada gambar sistem koordinat diatas dapat dilihat bahwa terdapat koordinat dari kamera yaitu
dan koordinat dari marker yaitu
. Dapat
dilihat juga koordinat layar 2D yang ideal dalam pendeteksian marker (berwarna hijau) dan terdapat koordinat layar observasi untuk distorsi dari marker. Untuk mengubah marker dari bidang 3D menjadi bidang 2D maka akan dilakukan proses translasi dan rotasi sesuai dengan koordinat kamera dan marker sebagai berikut :
25 Adapula matriks yang dilakukan untuk mengubah proyeksi perspektif dari kamera dengan layar 2D yang ideal sebagai berikut :
C = parameter kamera; s = skala; f = faktor distorsi Dan hubungan antara koordinat layar ideal dengan koordinat layar observasi adalah sebagai berikut :
= koordinat titik tengah dari distorsi
faktor distorsi
Gambar 2.8 Proses distorsi gambar dan skala distorsi (Kato, 2009)
26
Setelah itu akan diimplementasikan parameter distorsi gambar sebagai berikut :
s
Dengan adanya persamaan-persamaan diatas dan diketahuinya koordinat marker, koordinat kamera, koordinat layar ideal serta koordinat layar observasi, maka akan dicari parameter
sebagai berikut :
dengan meminimalisasi error melalui proses iterasi
27
Setelah
didapatkan maka akan dimasukan ke persamaan awal dan
didapatkan proyeksi 2D dari marker yang ada sehingga dapat dicocokan dengan pola yang telah disediakan.
2.2.1.8 Classification Setelah pola terdeteksi maka tepi dari marker akan ditandai untuk langkah awal. Langkah berikutnya rotasi dari pose estimasi dicek secara iterasi menggunakan matriks yang telah ditentukan.
Gambar 2.9 Proses klasifikasi marker (Koyama, 2009)
28
Gambar 2.10 Pencocokan pola pada proses klasifikasi (Koyama, 2009) Pola matriks yang paling sesuai mendefinisikan marker ID dan dapat dilakukan transformasi dari bidang kamera ke sistem koordinat local yang berada di tengah marker sehingga dapat ditampilkan konten pada marker (Wagner & Schmalstieg, 2007: 2-3). Setelah mendapat marker ID yang tepat maka akan ditampilkan informasi tambahan pada data tersebut secara real-time dengan javascript dan canvas pada HTML5.
2.2.2 HTML5 HTML memberikan sebuah cara untuk menggambarkan struktur isi dalam file. Ketika browser menampilkan HTML, browser memiliki gaya tersendiri untuk menyajikan struktur ini. Sedangkan HTML5 merupakan sebuah bahasa markup yang dibentuk oleh W3C (World Wide Web Consortium) yang dibentuk untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin (Freeman &
29 Robson, 2011: 1). Beberapa fitur baru yang terdapat pada HTML5 adalah adanya sintaks canvas dan getusermedia yang akan dijelaskan pada bagian selanjutnya.
2.2.2.1 Canvas Canvas pada HTML5 merupakan mode langsung dari daerah bitmap pada layar yang dapat di manipulasi dengan javascript. Mode langsung ini mengacu pada cara kanvas membuat piksel pada layar. Kanvas pada HTML5 sepenuhnya merupakan penggambaran ulang layar bitmap pada setiap frame menggunakan panggilan canvas API dengan javascript (Fulton & Fulton, 2011). Canvas pada HTML5 ini memungkinkan programmer untuk menggambar berbagai macam bentuk, me-render tulisan, dan menampilkan gambar langsung ke area tertentu dari jendela browser. Anda dapat menerapkan warna, rotasi, transparansi alpha, manipulasi piksel, dan berbagai jenis garis, kurva, kotak, dan mengisi, menambah, mengubah bentuk, teks, gambar yang ingin ditampilkan pada canvas.
2.2.2.2 GetUserMedia GetUserMedia adalah sebuah sintaks baru yang ada dalam HTML5 yang berfungsi untuk mengambil multimedia berupa kamera dan mikrofon dari alat komunikasi yang ada seperti notebook dan smartphone. Dengan sintaks ini penulis dapat mengambil data gambar dari kamera dan memasukannya kedalam HTML5 sehingga dapat diproses langsung oleh berbagai web browser (Dutton, 2012).
2.2.2.3 HTML5 Supported Browser
30 HTML5 adalah bahasa baru dalam teknologi website dan memiliki lebih banyak fitur baru dari pendahulunya (HTML4). Banyaknya fitur baru yang ada membuat beberapa browser belum mendukung semua fitur yang ada pada HTML5. Namun seiring berjalannya waktu browser-browser yang ada semakin mendukung fitur-fitur yang ada pada HTML5. Contoh dari browser tersebut yang terdapat pada desktop adalah Mozilla Firefox, Opera, dan Google Chrome. Ketiga desktop browser tersebut sudah mendukung sebagian besar fungsi dari HTML5 serta dapat me-render objek 3D secara sempurna. Namun untuk mobile browser hanya sebagian kecil yang masih mendukung fitur-fitur dari HTML5. Pada mobile browser fungsi pengambilan kamera serta render objek 3D masih bermasalah karena masih dalam tahap pengembangan. Objek 3D yang di-render memakan waktu lama serta membutuhkan spesifikasi hardware yang besar sehingga tidak dapat digunakan oleh sebagian besar smartphone. Untuk sistem operasi Android contoh browser yang mendukung fungsi dari HTML5 adalah Google Chrome, Mozilla Firefox, Firefox Nightly dan Opera mobile. Untuk sistem operasi IOS contohnya adalah safari. Untuk sementara program augmented reality ini dapat berjalan pada desktop browser Mozilla Firefox (minimal versi 17), Opera (minimal versi 12), dan Google Chrome (minimal versi 21) serta pada mobile browser
bersistem
operasi android,
Firefox Nightly (minimal versi 24)
(http://www.html5rocks.com/en/tutorials/getusermedia/intro/ [dikutip 25 Juli 2013]).
2.2.3 JavaScript JavaScript merupakan bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar browser. Pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, kemudian namanya diganti menjadi LiveScript, dan
31 akhirnya menjadi JavaScript. Javascript memungkinkan objek pada web untuk berinteraksi dengan pengguna, mengontrol browser web, dan mengubah isi dokumen yang muncul dalam layar web browser (Flanagan, 2011: 1). Pada pembuatan aplikasi ini digunakan sebuah library javascript yang membantu untuk pembentukan deteksi dan klasifikasi dari marker yang ada. Library ini bernama JSARToolkit yang berisikan sebuah kode komputasi dalam pendeteksian serta pengklasifikasian marker agar dapat dikenali oleh sistem.
2.2.3.1 Library JSARToolkit (Javascript Augmented Reality Toolkit) Library JSARToolkit ini merupakan bahasa javascript pengembangan dari FLARToolkit yang juga merupakan cabang dari ARToolkit untuk flash. ARToolkit merupakan library untuk bahasa C dan C++ yang pertama kali dikembangkan oleh Hirokazo Kato pada tahun 1999 di HITLab (https://github.com/kig/JSARToolKit [dikutip 25 Juli 2013]). Dengan adanya library ini maka para programmer dapat dengan mudah mengembangkan aplikasi augmented reality. JSARToolKit menggunakan teknik visi komputer untuk menghitung posisi kamera yang nyata dan orientasi relatif terhadap marker dan memungkinkan programmer untuk menambahkan objek virtual pada marker tersebut. Pada aplikasi kali ini objek virtual yang ditambahkan pada dunia nyata adalah sebuah layar informasi yang akan muncul sesuai dengan marker yang ada.
2.2.4 CSS3 CSS3 merupakan bagian dari menataan atau desain dari sebuah website yang akan dibuat. CSS3 dapat mendesain sebagian besar konten yang ada seperti tulisan, gambar, border, dan lain-lain. CSS3 memberi cara untuk menjelaskan bagaimana
32 konten HTML harus disajikan dan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam (Freeman & Robson, 2011: 548). Pada aplikasi ini digunakan fitur baru yang ada pada CSS3 yaitu dapat mengubah opacity dari sebuah objek.
2.2.5 Pemandu pe·man·du : 1. penunjuk jalan (di hutan); 2. orang yg memandu sesuatu (dl diskusi dsb); moderator;~ acara orang yg memandu atau memimpin acara: tugasnya sbg ~ acara itu diterima mendadak; ~ pesawat terbang petugas bandar udara yg memandu pesawat; ~ wisata orang yg pekerjaannya mendampingi wisatawan dng mengatur perjalanan dan memberi penjelasan tentang tempat yg dikunjungi; orang yg bertugas memandu wisatawan; pramuwisata; (http://bahasa.kemdiknas.go.id/kbbi/ index.php [dikutip 25 Juli 2013])
2.2.6 Galeri Lukisan ga·le·ri : ruangan atau gedung tempat memamerkan benda atau karya seni dsb; lu·kis·an : 1. hasil melukis; gambar(an) yg indah-indah; 2.cerita atau uraian yg melukiskan sesuatu (hal, kejadian, dsb); (http://bahasa.kemdiknas.go.id/kbbi/ index.php [dikutip 25 Juli 2013]) Jadi galeri lukisan adalah ruangan atau gedung tempat memamerkan hasil melukis yang indah.
