9

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 real-

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

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). Potongan-

potongan 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 keadaan-

keadaan (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 dengan meminimalisasi error melalui proses iterasi

sebagai berikut :

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.