Penerapan Teknologi Augmented Reality pada Aplikasi Perancangan Interior Ruangan Menggunakan FLARToolkit

Penerapan Teknologi Augmented Reality pada Aplikasi Perancangan Interior Ruangan Menggunakan FLARToolkit Tjatur Kandaga, Andini Fiorenzy Sakkung Jurusan S1 Teknik Informatika Fakultas Teknologi Informasi, Universitas Kristen Maranatha Jln. Prof. Drg. Surya Sumantri No. 65, Bandung 4164 email : tjatur.k@gmail.com, andinifiorenzy@yahoo.com Abstract Along with the development of computer technology, people found that computer can be used to help people in many areas, and they try to ease the interaction with computer. Various technologies are developed to achieve this. Augmented reality is one of them. We discuss analysis, design, and theories that support the development of applications with augmented reality technology and its implementation. It aims to answer the problem of how to display the interior design of a room and simulate the user environment to facilitate user interaction with computers. Tools used to build the application are ActionScript, FLARToolkit, and Papervision3D. The application can be used to design a room interior, print the marker and visualize the final result with augmented reality technology. Keywords: augmented reality, interior design, flartoolkit, human-computer interaction 1. Pendahuluan Seiring dengan semakin berkembangnya teknologi dan meningkatnya kebutuhan manusia akan komputer, manusia berusaha mempermudah interaksinya dengan komputer. Berbagai teknologi terus dikembangkan untuk mencapai hal tersebut. Teknologi Augmented Reality merupakan sebuah teknologi yang akan menempatkan suatu gambar virtual dari grafis komputer pada dunia nyata atau dengan kata lain merupakan penggabungan antara dunia nyata dengan dunia virtual yang merupakan sebuah terobosan baru dalam dunia multimedia. Teknologi ini diharapkan dapat mempermudah interaksi user dengan komputer. Berdasarkan permasalahan di atas maka dirancang dan dibuatlah aplikasi perancangan interior ruangan menggunakan teknologi augmented reality untuk menghasilkan aplikasi yang lebih memudahkan user. 2. Landasan Teori Augmented Reality Augmented reality (AR) adalah teknologi yang menggabungkan benda maya dua dimensi atau tiga dimensi ke dalam sebuah lingkungan nyata tiga dimensi. Definisi yang lebih spesifik didapat dari Ronald Azuma yaitu bahwa AR adalah suatu lingkungan yang mengkombinasikan virtual reality dan elemen-elemen dunia nyata, bersifat interaktif, real-time, dan tiga dimensi [15]. Tujuan dari AR adalah menambahkan pengertian dan informasi pada dunia nyata, dimana sistem AR 167

Jurnal Informatika, Vol.8, No. 2, Desember 212: 167-179 mengambil dunia nyata sebagai dasar dan menggabungkan beberapa teknologi dengan menambahkan data kontekstual agar pemahaman seseorang menjadi semakin jelas [5]. Human-Computer Interaction ( HCI ) HCI atau Human-Computer Interaction adalah suatu disiplin ilmu yang mempelajari interaksi antara manusia (user) dan komputer. Definisi yang lebih lengkap didapat dari Association of Computing Machinery yaitu bahwa HCI adalah suatu disiplin ilmu yang mempelajari desain, evaluasi, dan implementasi dari sistem komputer yang interaktif untuk kegunaan manusia, dan juga mempelajari hal-hal yang berkaitan dengannya [15]. Tujuannya adalah untuk meningkatkan kualitas interaksi antara user dan komputer atau mesin dengan cara menjadikan komputer semakin mudah digunakan (user-friendly) dan reseptif terhadap kebutuhan user. Computer Vision Computer vision adalah salah satu cabang dari artificial intelligence (kecerdasan buatan) yang difokuskan pada pengembangan algoritma untuk menganalisa isi dari suatu gambar [11]. Computer vision mempunyai tujuan utama untuk menganalisa obyek fisik yang nyata berdasarkan image yang ditangkap dari sensor. Visualisasi dan Grafik 3D Visualisasi adalah suatu teknik untuk mengkreasikan gambar-gambar, diagramdiagram, atau animasi-animasi untuk mengkomunikasikan sebuah pesan. Visualisasi melalui gambar menjadi cara yang lebih efektif untuk mengkomunikasikan hal yang abstrak dan konkrit bagi seseorang [5] Grafik 3D adalah transformasi grafik-grafik primitive seperti titik, garis, segitiga, persegi, bola, surface menjadi gambar-gambar atau animasi. Grafika Komputer Grafika komputer bertujuan untuk menghasilkan citra yang lebih tepat yang disebut grafik atau picture dengan primitif-primitif geometri, seperti garis, lingkaran, volume dan lain-lain. Primitif-primitif geometri tersebut memerlukan data deskriptif untuk melukis elemen-elemen gambar. Contoh dari data deskriptif adalah koordinat titik, panjang garis, jari-jari lingkaran, tebal garis, warna dan lain-lain. Grafika komputer mempunyai peranan penting dalam visualisasi dan virtual reality. FLARToolkit FLARToolkit adalah sebuah pustaka / library untuk aplikasi augmented reality yang berbasiskan Flash (ActionScript 3). FLARToolkit merupakan turunan dari NyARToolkit berbasiskan Java yang diturunkan dari ARToolkit. FLARToolkit dibuat untuk menjembatani para web developer yang ingin menerapkan teknologi augmented reality. Secara umum prinsip kerja FLARToolKit adalah sebagai berikut : 168

Penerapan Teknologi Augmented Reality pada Aplikasi Perancangan Interior Ruangan Menggunakan FLARToolkit (Tjatur Kandaga, Andini Fiorenzy Sakkung) 1. kamera menangkap gambar dari dunia nyata secara live dan mengirimkannya ke komputer, 2. perangkat lunak dalam komputer mencari marker pada masing-masing frame video, 3. jika ditemukan sebuah kotak, maka digunakan perhitungan matematik untuk menghitung posisi kamera relatif terhadap kotak berwarna hitam, 4. tiap kali posisi kamera diketahui maka model grafis hasil rekayasa komputer digambarkan pada posisi yang sama, 5. model tersebut ditampilkan di atas gambar video dunia nyata dan tampak menempel pada marker yang berbentuk kotak, 6. hasil akhir menunjukkan, jika pengguna melihat pada tampilan, maka akan tampak obyek virtual tambahan menempel pada obyek dunia nyata. Langkah awal yang harus dilakukan adalah mendapatkan masukan video dari sebuah kamera. Video yang di-streaming secara real-time ini akan diolah oleh sistem untuk dianalisa frame demi frame. Gambar 1 Perbandingan antara image yang ideal dengan image yang disebabkan oleh faktor distorsi [1] Sebelum kamera digunakan, kamera harus dikalibrasi terlebih dahulu. Kalibrasi kamera merupakan bagian yang sangat penting dalam proses pengambilan masukan video. Hal ini disebabkan timbulnya distorsi pada lensa kamera dimana tiap-tiap kamera berbeda karakteristiknya (Gambar 1). Tujuan dari kalibrasi kamera adalah untuk menghitung tingkat distorsi dari sebuah lensa kamera yang digunakan agar image yang dihasilkan mendekati image ideal. Parameter ini nantinya digunakan dalam perhitungan pada proses Pose and Position Estimation agar objek dapat ditampilkan tepat diatas marker. Video yang diterima selanjutnya akan mengalami proses binarisasi (gray-scale), kemudian nilai threshold ditentukan sehingga menghasilkan gambar hitam-putih. Nilai threshold berada pada angka 255 dan secara default, threshold bernilai 1. Fungsi dari proses ini adalah untuk membantu sistem agar dapat mengenali bentuk segi empat dan pola di marker pada video yang diterima. Nilai threshold dapat dirubah dan disesuaikan dengan kondisi cahaya disekitar marker untuk tetap membuat marker terlihat sebagai segi empat, karena ketika cahaya disekitar marker berkurang ataupun berlebih pada saat proses thresholding, sistem tidak dapat mendeteksi marker. Hal ini penting mengingat aplikasi ini bekerja dengan cara mengenali marker. 169

Jurnal Informatika, Vol.8, No. 2, Desember 212: 167-179 Setelah video mengalami proses thresholding, langkah selanjutnya adalah mendeteksi marker, dimana sistem akan mengenali bentuk dan pola yang ada pada marker. Sistem akan mencari bagian yang memiliki bentuk segi empat dan menandainya. Sistem juga akan menghilangkan area yang tidak berbentuk segi empat sehingga yang akan ditampilkan pada layar hanyalah area yang memiliki bentuk segi empat [1]. Gambar 2 Hasil dari contour extraction dan corner detection [1] Contour extraction dan corner detection digunakan untuk mendapatkan koordinat dari empat sisi dan empat titik sudut pada segi empat yang tersisa setelah proses image labeling (Gambar 2). Setelah proses ini selesai dilakukan, dua garis paralel pada marker diproyeksikan sehingga persamaan garisnya pada koordinat layar kamera adalah : a 1 x + b 1 y + c 1 = a 2 x + b 2 y + c 2 = (1) Parameter pada persamaan 1 akan disimpan dan dipakai pada proses selanjutnya. Karena sudut dari lensa kamera tidak tegak lurus terhadap marker ketika mengambil video, sudut-sudut marker yang dibentuk oleh sisi-sisi segi empat tidak 9 (Gambar 3). Hal ini membuat pola yang ada didalam marker tidak dapat dikenali dengan baik. Gambar 3 Pattern normalization dan template matching [1] Pattern normalization berperan untuk mengubah sudut marker yang tidak 9 menjadi 9 agar pola dapat dikenali dan dicocokkan menggunakan template matching dengan pola (template) yang telah ada pada sistem untuk memperoleh 17

Penerapan Teknologi Augmented Reality pada Aplikasi Perancangan Interior Ruangan Menggunakan FLARToolkit (Tjatur Kandaga, Andini Fiorenzy Sakkung) positif ID dari marker tersebut. Sebuah gambar, foto, maupun nama dapat dijadikan pola pada sebuah marker agar sistem dapat mengenali pola itu. Untuk menaruh objek 3D tepat diatas marker, sistem perlu mengetahui koordinat dari marker dan kamera. X Y Gambar 4 Hubungan antara koordinat marker dengan koordinat kamera [1] Z 1 = X Y X Y X Y = = T Z 1 1 Z cm (2) 1 Z 1 1 Matrix transformasi (T cm ) dari koordinat marker ke koordinat kamera seperti pada Gambar 4 diberikan pada persamaan (2). Untuk marker yang sudah dikenali, nilai dari parameter a 1, b 1, c 1 dan a 2, b 2, c 2 didapatkan ketika proses contour extraction. Matrix proyeksi P pada persamaan (3) diperoleh ketika proses kalibrasi kamera. Dengan mengganti x c dan x y pada persamaan (3) untuk x dan y pada persamaan 1 didapat persamaan garis seperti persamaan 4. P = 1 hx hy, = P h 1 1 X Y Z 1 (3) a 1 P 11 X c + (a 1 P 12 + b 1 P 22 )Y c + (a 1 P 13 + b 1 P 23 + c 1 )Z c = a 2 P 11 X c + (a 2 P 12 + b 2 P 22 )Y c + (a 2 P 13 + b 2 P 23 + c 2 )Z c = (4) Marker segi empat yang digunakan mempunyai empat sisi dimana dua sisi adalah garis yang paralel. Vektor normal dari marker adalah ñ yang dihasilkan dari perkalian cross vektor u 1 dan u 2, seperti ditunjukkan pada Gambar 5. 171

Jurnal Informatika, Vol.8, No. 2, Desember 212: 167-179 Gambar 5 Dua buah vector yang tegak lurus : v 1 dan v 2 didapat dari u 1 dan u 2 [1] Pada kenyataanya, vektor u 1 dan u 2 seharusnya tegak lurus, hal ini disebabkan oleh sudut kamera ketika pengambilan gambar yang tidak tegak lurus terhadap marker. Vektor v 1 dan v 2 dibuat agar memiliki sudut 9 dengan menggunakan nilai dari vektor u 1 dan u 2 untuk memperkecil kesalahan. Setelah v 1 dan v 2 tegak lurus, v 3 dihasilkan dari perkalian cross v 1 x v 2. Nilai v 1, v 2, dan v 3 adalah komponen rotasi pada matrix transformasi T cm dari koordinat marker ke koordinat kamera seperti yang disampaikan pada persamaan (2). Setelah komponen rotasi V 3x3 pada matrix transformasi diketahui, komponen translasi W 1, W 2, dan W 3 dapat diperloleh dengan menggunakan persamaan (2) dan (3). Setelah transformasi matrix didapat, langkah terakhir yang dilakukan adalah menggambar objek virtual 3D pada frame video tepat diatas permukaan marker dan hasilnya dapat dilihat pada keluaran videonya. Dengan demikian model rumah virtual seolah-olah ada diatas marker. Marker pada FLARToolKit dilambangkan dengan gambar yang terdiri atas border outline (tepian kotak) berwarna hitam dan pattern image (gambar dalam marker) yang merupakan kombinasi warna hitam dan putih. Salah satu contoh marker dapat dilihat pada Gambar 6. Border Outline 25% 5% Pattern Image 25% 25% 5% 25% 172 Gambar 6 Contoh Marker [8] Cara pembuatan marker : 1. Membuat desain marker sesuai dengan aturan yang berlaku. 2. Desain yang telah di buat dikonversi dalam bentuk file.pat dengan menggunakan Marker Generator.air.

Penerapan Teknologi Augmented Reality pada Aplikasi Perancangan Interior Ruangan Menggunakan FLARToolkit (Tjatur Kandaga, Andini Fiorenzy Sakkung) 3. Inisialisasi marker (.pat) pada aplikasi. 4. Marker dapat dideteksi. Marker memiliki beberapa kendala, yaitu: [4] 1. Marker harus berbentuk persegi. 2. Warna pada tepian marker harus kontras dengan warna latar belakang marker dan secara default ketebalan tepian adalah 25% dari panjang marker. 3. Daerah dalam perbatasan (atau yang disebut gambar penanda) dan perbatasan tepian tidak boleh rotational simetris. 4. Daerah dalam perbatasan marker dapat hitam dan putih atau berwarna. Pelacakan sistem terhadap marker memiliki beberapa batasan, yaitu : [4] 1. Objek hanya akan muncul ketika marker ditangkap kamera. Jika pengguna menutupi pola yang ada pada marker dengan tangan atau benda lain, maka objek akan menghilang. Juga ketika garis pinggir marker berada di luar frame kamera, dan memiliki lebih dari empat sudut, maka akan gagal untuk mengenali marker [1]. 2. Jarak juga menjadi masalah dalam pelacakan optik, ketika marker bergerak menjauhi kamera, mereka menempati lebih sedikit piksel pada layar kamera, dan tidak cukup detail untuk dapat mengidentifikasi pola pada marker dengan benar. Semakin besar ukuran pola marker, semakin jauh pula pola dapat dideteksi. [1] 3. Objek dipengaruhi oleh kompleksitas pola pada marker. Semakin sederhana pola maka akan semakin baik. Pola dengan warna hitam dan putih akan lebih efektif. 4. Orientasi marker terhadap kamera pun mempengaruhi pelacakan sistem terhadap pola. Semakin miring marker, maka pola pada marker akan semakin tidak terlihat sehingga sulit untuk melakukan pelacakan pola marker. 5. Kamera (distorsi pada lensa, resolusi video, frame rate) juga menentukan keluaran yang dihasilkan oleh aplikasi ini. [1] 6. Faktor cahaya yang dapat ditangkap oleh lensa kamera juga berperan penting karena aplikasi ini menggunakan metode threshold untuk sistem tracking-nya. Action Script 3. Actionscript merupakan bahasa pemrograman pada Flash. Dengan adanya actionscript, animasi dapat dibuat menjadi movie yang interaktif, sehingga pengguna dapat menggunakan keyboard atau mouse untuk melompat ke movie yang diinginkan, memindahkan objek, memasukkan informasi pada form, dan lainlain. Dimana pada prinsipnya actionscript merupakan alat bantu yang dapat mempermudah dalam merancang atau membuat movie atau situs. Papervision3D Papervision3D adalah sebuah engine 3D open source untuk platform Flash. Papervision3D masuk versi Beta Publik pada tanggal 7 Juli 27. Papervision3D dirilis dibawah lisensi MIT. Adapun langkah-langkah instalasi Papervision3D sangat mudah yaitu : 173

Jurnal Informatika, Vol.8, No. 2, Desember 212: 167-179 1. Simpan file papervision3d di suatu folder, misalkan di folder bernama Data di drive D ( D:\Data\papervision3d_source\src ). 2. Setelah itu, jalankan aplikasi Flash. 3. Pilih Edit Preferences ActionScript klik ActionScript 3. Setting klik tanda (+), lalu browse folder yang berisi source code papervision klik OK. 3. Analisis Gambar 7 merupakan flowchart dari aplikasi perancangan interior ruangan menggunakan augmented reality. Gambar 7 Flowchart Aplikasi Perancangan Ruangan menggunakan augmented reality 174

Penerapan Teknologi Augmented Reality pada Aplikasi Perancangan Interior Ruangan Menggunakan FLARToolkit (Tjatur Kandaga, Andini Fiorenzy Sakkung) Gambar 8 merupakan rancangan marker yang akan digunakan dalam aplikasi. Gambar 8 Rancangan marker yang digunakan Gambar 9 merupakan use case menggunakan augmented reality. dari aplikasi perancangan interior ruangan Aplikasi PIB AR Membuat sketsa Membuat kertas baru Menyimpan sketsa User Memuat sketsa Mencetak marker Menampilkan augmented reality Gambar 9 Use Case Aplikasi Perancangan Interior Ruangan menggunakan augmented reality 175

Jurnal Informatika, Vol.8, No. 2, Desember 212: 167-179 4. Hasil Penelitian Tampilan program yang digunakan ketika membuat perancangan interior dapat dilihat pada gambar 1. Pada tampilan terdapat juga menu New, Load, Save, Print, dan Play. Gambar 1 Tampilan Utama Program Hasil implementasi dari teknologi augmented reality pada aplikasi yang dihasilkan dapat dilihat pada gambar 11. Objek 3D yang ditampilkan disesuaikan dengan marker yang telah dideklarasikan terlebih dahulu. 176

Penerapan Teknologi Augmented Reality pada Aplikasi Perancangan Interior Ruangan Menggunakan FLARToolkit (Tjatur Kandaga, Andini Fiorenzy Sakkung) Gambar 11 Contoh-contoh output dari aplikasi 177

Jurnal Informatika, Vol.8, No. 2, Desember 212: 167-179 5. Simpulan Dari hasil pembahasan di atas dan percobaan yang telah dilakukan, maka kesimpulan yang dapat diambil yaitu: 1. Penerapan teknologi augmented reality dapat menghasilkan aplikasi yang lebih memudahkan user dalam melakukan visualisasi obyek 3D. 2. Tingkat pencahayaan ruangan sangat berpengaruh terhadap kemampuan program untuk mengenali marker dari obyek. 3. Jika bentuk marker mirip, ada kalanya aplikasi tertukar dalam mengenali marker-marker tersebut. 4. Obyek 3D yang ditampilkan dapat mengikuti gerakan marker, tetapi jika marker digerakkan (didekatkan / dijauhkan / diputar / diubah sudutnya) dengan cepat, biasanya gambar obyek 3D akan menghilang beberapa saat. 6. Saran Aplikasi ini masih dapat dikembangkan lebih lanjut dan dilengkapi dengan fiturfitur lain, diantaranya : 1. Objek 3D yang ditampilkan dapat menggunakan animasi sehingga menjadi lebih menarik. 2. Aplikasi diperluas untuk perancangan tata letak obyek secara umum, sehingga dapat digunakan untuk berbagai kebutuhan, misalnya: eksterior bangunan, ruang terbuka, denah perumahan, rencana tata kota, denah pabrik, dll. Daftar Pustaka [1] Abubakar, M. Mahmud. 21.Teknologi Augmented Reality untuk Mensimulasikan Sistem Tata Surya. Yogyakarta:Program Sarjana Sekolah Tinggi Manajemen Informatika dan Komputer. [2] Adobe.http://papervision3d.googlecode.com/svn/trunk/as3/trunk/docs/index.html pada tanggal 2 November 21. [3] Affiat, Denny. 28. Aplikasi Media Informasi Promosi PT The One dengan Menggunakan Macromedia Flash versi 8..Jakarta: Program Diploma Sekolah Tinggi Manajemen Informatika dan Komputer STI&K. [4] ARToolkit.http://www.hitl.washington.edu/artoolkit/documentation pada tanggal 21 November 21. [5] Bradys, Arsenal. 28. Desain dan Evaluasi Alat Peraga Tsunami AR (Stusi Kasus Museum Geologi Bandung). Bandung : Program Magister Institut Teknologi Bandung. [6] Chafied, dkk. 21. Brosur Interaktif Berbasis Augmented Reality. Surabaya: Program Sarjana Politeknik Elektronika Negeri Surabaya. [7] FLARToolkit.http://jinustudio.com/flash/tutorial/flar/FLARSquidderKit/docs/ index.htm pada tanggal 21 November 21. [8] Gambar 2.7;Diunduh dari http://wibirama.com/dip/21/11/17/image-processinginstalasi-artoolkit-di-windows-xp/ pada tanggal 3 Oktober 21. [9] Gambar 1; Diunduh dari http://www.psfk.com/wp-content/uploads/29/6/layarworlds-first-mobile-augmented-reality-browser-525x294.jpg pada tanggal3 Oktober 21. [1] Gorbala, B. Tedy. 21. Aplikasi Augmented Reality untuk Katalog Penjualan Rumah. Surabaya: Program Sarjana Institut Teknologi Sepuluh November. 178

Penerapan Teknologi Augmented Reality pada Aplikasi Perancangan Interior Ruangan Menggunakan FLARToolkit (Tjatur Kandaga, Andini Fiorenzy Sakkung) [11] Gunawan, Jimmy. 23. People Counter menggunakan web camera. Surabaya : Program SarjanaUniversitas Kristen Petra. [12] Kustiawan, Iwan. 28. Tsunami Augmented Reality : Interaksi Berbasis Marker Sebagai Pointer. Bandung: Program Magister Institut Teknologi Bandung. [13] Prima,R. S. 21. Penerapan Metode Transformasi Fourier Untuk Perbaikan Citra Digital.Medan : Program SarjanaUniversitas Sumatera Utara. [14] Sobana, Aceng. 21. Pengenalan Augmented Reality. Bandung: Universitas Jenderal Achmad Yani. [15] Sutanto, Yoshita. 28. Interaksi Berbasis Teknologi Augmented Reality pada Aplikasi Musik DyA. Bandung : Program Sarjana Institut Teknologi Bandung. 179