BAB 3
ANALISIS DAN PERANCANGAN
Sistem pengenalan bangun ruang menggunakan augmented reality terdiri dari aplikasi software pembelajaran dan buku belajar. Aplikasi pembelajaran ini berisikan teori
dan latihan mengenai bangun ruang serta aplikasi augmented reality. Buku belajar ini berisikan materi bangun ruang dan marker-marker yang nanti digunakan untuk
menjalankan aplikasi augmented reality. Tahap analisis dilakukan untuk menjelaskan cara kerja dari augmented reality.
Analisis augmented reality ini dilakukan pada program FLARToolKit. Tahapan perancangan sistem yang akan dilakukan pada penulisan tugas akhir
ini terdiri dari dua bagian, yaitu perancangan aplikasi dan perancangan buku belajar. Tahap perancangan aplikasi terdiri dari perancangan menggunakan Unified Modeling
Language UML, flowchart atau diagram alir program, perancangan tampilan antarmuka sistem dan storyboard. Dan tahap perancangan buku belajar hanya
perancangan tampilan antarmuka buku belajar. Penjelasan mengenai perancangan aplikasi dan buku akan dijelaskan sebagai berikut.
3.1 Analisis Augmented Reality
3.1.1 Cara Kerja Augmented Reality
Cara kerja FLARToolKit secara garis besarnya sebagai berikut: 1. Mengambil video dari webcam.
2. Binarisasi citra masukanthresholding. 3. Memberi penanda labelling.
4. Deteksi area persegi Marker Outline Detection. 5. Pencocokan pola.
Universitas Sumatera Utara
6. Merender obyek 3D.
3.1.1.1 Mengambil Video dari Webcam
Langkah awal yang harus dilakukan adalah mendapatkan masukan video dari sebuah webcam, seperti yang ditunjukkan gambar 3.1. Video yang di-streaming secara real-
time ini akan diolah oleh sistem untuk dianalisa frame per frame.
Gambar 3.1 Mengambil Citra dari Webcam
Proses pengambilan citra dari webcam ini terdapat pada file konfigurasi dari FLARToolKit yang disimpan dalam bentuk file xmlflarConfig.xml. Baris
programnya dapat dilihat pada gambar 3.2. .
flar_config == source settings --
flarSourceSettings sourceWidth=”640”
sourceHeight=”480” displayWidth=”640”
displayHeight=”480” framerate=”30”
trackerToSourceRatio=”0.5” activityThreshold=”16”
Gambar 3.2 Listing Mengambil Citra dari Webcam
Universitas Sumatera Utara
Baris program ini akan mengkonfigurasi ukuran video yang di-capture
[sourceWidth] dan [sourceHeight], mengkonfigurasi ukuran output video [displayWidth] dan [displayHeight], framerate dari video yang di keluarkan.
File ‘flarconfig.xml’ ini akan dipanggil oleh program utama FLARManagerTutorial_Collada_PV3D.as dengan menggunakan baris program pada
gambar 3.3.
also pass an IFLARTrackerManager instance to communicate with a tracking library,
and a reference to the Stage required by some trackers.
this .flarManager =
new FLARManager
..resourcesflarflarConfig.xml ,
new FLARToolKitManager,
this.stage ;
to switch tracking engines, pass a different IFLARTrackerManager into FLARManager.
Gambar 3.3 Pemanggilan file flarConfig.xml
3.1.1.2 Binarisasi citra masukanthresholding
Langkah pertama pada aplikasi visi komputer yang terletak pada deteksi tepi adalah untuk men-threshold sumber citra atau disebut juga binarisasi seperti yang
ditunjukkan gambar 3.4. Thresholding mengkonversi citra ke citra binary sehingga memudahkan untuk komputasi. Sebuah citra binari dibuat dengan mengubah pixel
yang lebih cerah daripada nilai threshold ke suatu warna, dan pixel yang lebih gelap daripada nilai threshold ke suatu warna lainnya didefinisikan sebagai gray-scale atau
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 citra 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.
Universitas Sumatera Utara
Gambar 3.4 Thresholding
3.1.1.3 Memberi Penanda Labelling
Langkah berikutnya dari FLARToolKit adalah menemukan area yang berdampingan dalam citra yang di-treshold, khususnya dalam area dibawah threshold area yang
lebih gelap. Area yang berdampingan diberi tanda dengan warna yang berbeda dengan tujuan untuk mengidentifkasi area, proses labeling dapat dilihat pada gambar
3.5.
Gambar 3.5 Setiap Warna Putih Diberi Warna Berbeda
Universitas Sumatera Utara
3.1.1.4 Deteksi Area Persegi Marker Outline Detection
Langkah selanjutnya, FLARToolKit mencari area yang kemudian ditandai sebagai persegi marker outline. Setelah citra mengalami proses thresholding dan labelling,
FLARToolKit akan mengenali bentuk dan pola yang ada pada marker. FLARToolKit akan mencari bagian yang memiliki bentuk segi empat dan menandainya.
FLARToolKit juga akan menghilangkan area yang tidak berbentuk segi empat sehingga yang akan ditampilkan pada layar hanyalah area yang memiliki bentuk segi
empat. Untuk lebih jelasnya dapat dilihat pada gambar 3.6
Gambar 3.6 Mencari area persegi Marker Outline Detection
3.1.1.5 Pencocokan Pola
Setelah semua area persegi ditandai, FLARToolKit menganalisa citra yang berada di dalam persegi dan membandingkan polanya dengan sekumpulan pola yang telah
ditentukan pencocokan pola. FLARToolKit mengekstrak pola didalam persegi menggunakan transformasi homography. FLARToolKit memberikan sebuah nilai
condence kepada setiap pola yang cocok, jika kecocokannya di atas nilai yang telah ditentukan maka polanya dinyatakan cocok. Salah satu contoh pola marker dapat
dilihat pada gambar 3.7.
Universitas Sumatera Utara
Gambar 3.7 Spesifikasi Pola Marker
Satu marker hanya dapat digunakan untuk menampilkan satu objek 3D. Untuk menampilkan 3D yang berbeda-beda, maka digunakan lebih dari satu marker. Data
dari marker-marker yang digunakan dalam aplikasi ini, disimpan dalam bentuk array dari baris program yang terdapat pada file flarConfig.xml. baris program dapat dilihat
pada gambar 3.8.
patterns resolution=32 patternToBorderRatioX=50 patternToBorderRatioY=50 minConfidence=0.5
pattern path=..resourcesFLARToolKitpatternspat8kubus1.pat
pattern path=..resourcesFLARToolKitpatternspat8kubus2.pat
pattern path=..resourcesFLARToolKitpatternspat8kubus3.pat
pattern path=..resourcesFLARToolKitpatternspat8kubus4.pat
pattern path=..resourcesFLARToolKitpatternspat8balok1.pat
pattern path=..resourcesFLARToolKitpatternspat8balok2.pat
pattern path=..resourcesFLARToolKitpatternspat8balok3.pat
Gambar 3.8 Listing array marker
Universitas Sumatera Utara
3.1.1.6 Me-render Objek 3D
FLARToolKit menggunakan transformasi matriks yang dikalkulasikan di step sebelumnya dan menampilkan objek yang sesuai dengan sebuah library 3D, seperti
yang ditunjukkan gambar 3.9. FLARToolKit menyertakan kelas pendukung yang mengkonversikan transformasi matriks FLARTollKit ke setiap kelas matriks internal
library 3D tersebut.
Gambar 3.9 Render Objek 3D
Listener untuk method yang akan dijalankan jika marker ditemukan yaitu on- MarkerAdded, listener ketika marker digerakkan yaituon-MarkerUpdate listener
ketika marker tidak ditemukan lagi yaitu on-MarkerRemoved ditambahkan ke
method initAR, seperti ditunjukkan oleh listing pada gambar 3.10.
this .flarManager.
addEventListener FLARMarkerEvent.MARKER
_ADDED, this
.onMarkerAdded; this
.flarManager. addEventListener
FLARMarkerEvent.MARKER _UPDATED,
this .onMarkerUpdated;
this .flarManager.
addEventListener FLARMarkerEvent.MARKER
_REMOVED, this
.onMarkerRemoved;
Gambar 3.10 Listing untuk Marker
Jika salah satu marker ditangkap oleh kamera, maka objek 3D akan di-render di atas marker tersebut. Proses pe-render-an ini akan di jalankan pada baris program
pada gambar 3.11.
Universitas Sumatera Utara
private function onMarkerAdded evt:FLARMarkerEvent :
void {
trace [
+evt.marker.patternId+ ] added
; if
evt.marker.patternId == 0 {
trace Marker 1 Added
; this
.modelContainer. visible
= true
; this
.activeMarker = evt.marker; }
if evt.marker.patternId == 1
{ trace
Marker 2 Added ;
this .modelContainer1.
visible =
true ;
this .activeMarker1 = evt.marker;
} if
evt.marker.patternId == 2 {
trace Marker 3 Added
;
Gambar 3.11 Listing untuk onMarkerAdded
Ketika marker di pindahkan posisinya, maka objek 3D akan terus di-render di atas marker. Proses pe-render-an ini dijalankan pada baris program yang dapat dilihat
pada gambar 3.12.
Gambar 3.12 Listing untuk onMarkerUpdate
private function onMarkerUpdated evt:FLARMarkerEvent :
void {
trace [
+evt.marker.patternId+ ] updated
; if
evt.marker.patternId == 0 {
this .modelContainer.
visible =
true ;
this .activeMarker = evt.marker;
} if
evt.marker.patternId == 1 {
this .modelContainer1.
visible =
true ;
this .activeMarker1 = evt.marker;
} if
evt.marker.patternId == 2 {
this .modelContainer2.
visible =
true ;
this .activeMarker2 = evt.marker;
}
Ketika marker tidak lagi ditangkap oleh kamera, maka objek 3D akan dihilangkan dari layar monitor. Proses penghilangan ini dijalankan pada baris
program yang dapat dilihat pada gambar 3.13.
Universitas Sumatera Utara
private function onMarkerRemoved evt:FLARMarkerEvent :
void {
trace [
+evt.marker.patternId +] removed
; if
evt.marker.patternId == 0 {
this .modelContainer.
visible =
false ;
} if
evt.marker.patternId == 1 {
this .modelContainer1.
visible =
false ;
} if
evt.marker.patternId == 2 {
this .modelContainer2.
visible =
false ;
}
Gambar 3.13 Listing untuk onMarkerRemoved
3.1.2 Ukuran, Posisi dan Orientasi Marker
Ukuran, posisi dan orientasi dari marker akan berpengaruh terhadap objek 3D yang di render oleh FLARToolKit.
a. Ukuran marker
Ukuran marker berpengaruh terhadap ukuran dari objek 3D. Semakin besar ukuran marker yang di tangkap oleh kamera, maka ukuran objek 3D yang di
render di atas marker akan semakin besar juga. Dan semakin kecil ukuran marker yang ditangkap oleh kamera, maka ukuran objek 3D yang di render di
atas marker akan semakin kecil juga. Perbedaan hasil render objek 3D dengan ukuran marker yang berbeda dapat dilihat pada gambar 3.14, dengan ukuran
marker 10x10cm dan gambar 3.15 dengan ukuran marker 5x5 cm.
Universitas Sumatera Utara
Gambar 3.14 Marker ukuran 10x10cm
Gambar 3.15 Marker ukuran 5x5cm
b. Posisi marker
Posisi marker berpengaruh terhadap ukuran dari objek 3D. Semakin dekat marker dengan kamera, maka objek 3D yang di tampilkan juga dekat. Semakin
jauh marker yang ditangkap kamera, maka objek 3D yang ditampilkan juga jauh. Perbedaan posisi marker dapat dilihat pada gambar 3.16 dengan jarak
marker 30cm dari kamera, dan gambar 3.17 dengan jarak marker 2m dari kamera.
Universitas Sumatera Utara
Gambar 3.16 Marker dengan Jarak 30cm
Gambar 3.17 Marker dengan Jarak 2m
c. Orientasi marker
Orienteasi marker berpengaruh terhadap orientasi dari objek 3D. Objek 3D akan mengikuti orientasi dari marker. Apabila marker di putar, maka objek 3D
juga akan berputar. Perbedaan orientasi marker dapat dilihat pada gambar 3.18 dengan orientasi marker lurus terhadap kamera, dan gambar 3.19 dengan
orintasi marker diputar 90 .
Universitas Sumatera Utara
Gambar 3.18 Marker dengan Posisi Lurus
Gambar 3.19 Marker Diputar 90
3.2 Pemodelan Visual Menggunakan Unified Modeling Language UML
