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

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 AssociationofComputingMachinery 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, diagram-diagram, 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 augmentedreality.

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 [10]

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 Poseand 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 0 – 255 dan secara default, threshold bernilai 100. 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.

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 [10].

Gambar 2 Hasil dari contour extraction dan corner detection [10]

Contour extraction dan corner detection digunakan untuk mendapatkan koordinat dari empat sisi dan empat titik sudut pada segi empat yang tersisa setelah proses

imagelabeling (Gambar 2).

Setelah proses ini selesai dilakukan, dua garis paralel pada marker diproyeksikan sehingga persamaan garisnya pada koordinat layar kamera adalah :

a1x + b1y + c1 = 0 a2x + b2y + c2 = 0 (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 90° (Gambar 3). Hal ini membuat pola yang ada didalam marker tidak dapat dikenali dengan baik.

Gambar 3 Patternnormalization dan templatematching [10]

Pattern normalization berperan untuk mengubah sudut marker yang tidak 90° menjadi 90° agar pola dapat dikenali dan dicocokkan menggunakan template matching dengan pola (template) yang telah ada pada sistem untuk memperoleh

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.

Gambar 4 Hubungan antara koordinat marker dengan koordinat kamera [10] X Y Z 1 = 0 0 0 !" !# !$ 1 X% Y% Z% 1 = & ' !' 0 0 0 1 ( X% Y% Z% 1 = Tcm X% Y% Z% 1 (2) Matrix transformasi (Tcm) dari koordinat marker ke koordinat kamera seperti pada Gambar 4 diberikan pada persamaan (2). Untuk marker yang sudah dikenali, nilai dari parameter a1, b1, c1 dan a2, b2, c2 didapatkan ketika proses contourextraction. Matrix proyeksi P pada persamaan (3) diperoleh ketika proses kalibrasi kamera. Dengan mengganti xc dan xy pada persamaan (3) untuk x dan y pada persamaan 1 didapat persamaan garis seperti persamaan 4.

P = ) 0 0 0 ) ) 0 0 ) ) 1 0 0 0 0 1 , hx hy h 1 = P X Y Z 1 (3) a1P11Xc + (a1P12 + b1P22)Yc + (a1P13 + b1P23 + c1)Zc = 0

a2P11Xc + (a2P12 + b2P22)Yc + (a2P13 + b2P23 + c2)Zc = 0 (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 u1 dan u2, seperti ditunjukkan pada Gambar 5.

Gambar 5 Dua buah vector yang tegak lurus : v1 dan v2 didapat dari u1

dan u2 [10]

Pada kenyataanya, vektor u1 dan u2 seharusnya tegak lurus, hal ini disebabkan oleh

sudut kamera ketika pengambilan gambar yang tidak tegak lurus terhadap marker. Vektor v1 dan v2 dibuat agar memiliki sudut 90° dengan menggunakan nilai dari

vektor u1 dan u2 untuk memperkecil kesalahan. Setelah v1 dan v2 tegak lurus, v3

dihasilkan dari perkalian crossv1 x v2. Nilai v1, v2, dan v3 adalah komponen rotasi

pada matrix transformasi Tcm dari koordinat marker ke koordinat kamera seperti

yang disampaikan pada persamaan (2).

Setelah komponen rotasi V3x3 pada matrix transformasi diketahui, komponen

translasi W1, W2, dan W3 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.

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. Pattern Image Border Outline 50% 50% 25% 25% 25% 25%

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 [10].

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.[10]

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. [10]

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

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 lain-lain. 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 2007. Papervision3D dirilis dibawah lisensi MIT.

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.0 Setting | klik tanda (+), lalu browse folder yang berisi sourcecode 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

Gambar 8 merupakan rancangan marker yang akan diguna

Gambar 8 Rancangan

Gambar 9 merupakan use case dari aplikasi perancangan interior ruangan menggunakan augmented reality.

User

Gambar 9 Use Case Aplikasi Perancangan Interior Ruangan meng augmented reality

Gambar 8 merupakan rancangan marker yang akan digunakan dalam aplikasi.

Rancangan markeryang digunakan

Gambar 9 merupakan use case dari aplikasi perancangan interior ruangan

Membuat kertas baru

Aplikasi PIB AR Menyimpan sketsa Memuat sketsa Menampilkan augmented reality Mencetak marker Membuat sketsa

Use Case Aplikasi Perancangan Interior Ruangan menggunakan augmented reality

4. Hasil Penelitian

Tampilan program yang digunakan ketika membuat perancangan interior dapat dilihat pada gambar 10. Pada tampilan terdapat juga menu New, Load, Save, Print, dan Play.

Gambar 10 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.

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 fitur-fitur 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. 2010.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 20 November 2010.

[3] Affiat, Denny. 2008. Aplikasi Media Informasi Promosi PT The One dengan Menggunakan Macromedia Flash versi 8.0.Jakarta: Program Diploma Sekolah Tinggi Manajemen Informatika dan Komputer STI&K.

[4] ARToolkit.http://www.hitl.washington.edu/artoolkit/documentation pada tanggal 21 November 2010.

[5] Bradys, Arsenal. 2008. Desain dan Evaluasi Alat Peraga Tsunami AR (Stusi Kasus Museum Geologi Bandung). Bandung : Program Magister Institut Teknologi Bandung.

[6] Chafied, dkk. 2010. 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 2010.

[8] Gambar 2.7;Diunduh dari http://wibirama.com/dip/2010/11/17/image-processing-instalasi-artoolkit-di-windows-xp/ pada tanggal 30 Oktober 2010.

[9] Gambar 1; Diunduh dari http://www.psfk.com/wp-content/uploads/2009/06/layar-worlds-first-mobile-augmented-reality-browser-525x294.jpg pada tanggal30 Oktober 2010.

[10] Gorbala, B. Tedy. 2010. Aplikasi Augmented Reality untuk Katalog Penjualan Rumah. Surabaya: Program Sarjana Institut Teknologi Sepuluh November.

[11] Gunawan, Jimmy. 2003. People Counter menggunakan web camera. Surabaya : Program SarjanaUniversitas Kristen Petra.

[12] Kustiawan, Iwan. 2008. Tsunami Augmented Reality : Interaksi Berbasis Marker Sebagai Pointer. Bandung: Program Magister Institut Teknologi Bandung.

[13] Prima,R. S. 2010. Penerapan Metode Transformasi Fourier Untuk Perbaikan Citra Digital.Medan : Program SarjanaUniversitas Sumatera Utara.

[14] Sobana, Aceng. 2010. Pengenalan Augmented Reality. Bandung: Universitas Jenderal Achmad Yani.

[15] Sutanto, Yoshita. 2008. Interaksi Berbasis Teknologi Augmented Reality pada Aplikasi Musik DyA. Bandung : Program Sarjana Institut Teknologi Bandung.