Develop Augmented Reality using PhoneGap, Wikitude and Vuforia

  • Posted on: 20 June 2013
  • By: oon
Augmented Reality using PhoneGap, Wikitude & Vuforia

Wikitude terus mengembangkan SDK untuk development Augmented Reality, termasuk diantaranya dukungan untuk platform pengembangan HTML menggunakan PhoneGap dan Titanium. [1]

Melanjutkan artikel sebelumnya [2] tentang perpaduan PhoneGap dan Wikitude untuk membuat aplikasi augmented reality berbasis lokasi dengan teknologi HTML5, saat ini Wikitude SDK 3.0 memiliki mekanisme untuk membuat aplikasi augmented reality dengan image recognition berupa marker. Teknologi image recognition pada Wikitude SDK 3.0 didukung oleh SDK Vuforia dari Qualcomm [3] yang sudah terkenal sangat handal dalam teknologi augmented reality dan proses image recognition yang cepat dan akurat.

Terlihat seperti pada gambar, di gambar paling kiri terdapat papan selancar yang ditambahkan secara virtual dengan augmented reality setelah foto orang yang memegang papan selancar di sebelah kanan tersebut dikenali oleh mekanisme image recognition dari aplikasi sample HelloImageRecognition [4].

Vuforia SDK mendukung platform iOS dan Android, sehingga pada implementasi PhoneGap plugin juga hanya ada kedua platform tersebut. Dan baru teruji untuk versi PhoneGap 2.2, 2.4, 2.5, 2.8.1. [5]

Bagaimana langkah-langkah mencoba aplikasi contoh Basic/HelloWorld dan Extended/HelloImageRecognition akan dijelaskan di bawah ini, dengan catatan bahwa penulis mencobanya menggunakan platform iOS dengan Xcode sebagai development kit:

  • Setup proyek PhoneGap dengan plugin yang disesuaikan untuk iOS atau Android [6][7]
  • Proses setup proyek sementara tidak perlu buat (create) pakai script PhoneGap dahulu, gunakan dari contoh dulu untuk mempermudah percobaan
  • Proses setup membutuhkan download Wikitude SDK [1] sesuai platform yang dicoba, untuk platform iOS Wikitude SDK versi 3.0 berukuran 111MB. Kemudian extract Wikitude SDK, akan digunakan isi dari direktori Framework, untuk disalin ke direktori proyek PhoneGap. Proses download Wikitude SDK mensyaratkan untuk mendaftar sebagai Wikitude Developer (free).
  • Download wikitude-phonegap plugin dari Github [5], bisa download langsung dari tombol "download zip" ataupun menggunakan command-line git. Extract wikitude-phonegap, akan digunakan direktori sample dari direktori platform yang dipilih.
  • Pilih contoh proyek yang dijelaskan dalam dokumentasi [8] atau gunakan sample bawaan dari wikitude-phonegap [5] (HelloWorld & HelloImageRecognition)
  • Untuk mencoba contoh proyek HelloImageRecognition (dan mekanisme image recognition lainnya), butuh download Vuforia SDK sesuai platform yang dipilih [3]. Kemudian extract, dan akan digunakan isi dari direktori build (include, lib). Yang digunakan penulis dalam pembuatan artikel ini adalah Vuforia SDK v2.5. 
  • Setelah semua siap, lakukan proses build, jika sudah tidak ada error, coba Run aplikasi di perangkat. Pada saat muncul logo PhoneGap dengan tombol "Load AR", klik tombol, kemudian coba fiturnya (HelloWorld akan menampilkan POI, HelloImageRecognition akan mencari gambar yang sudah didefinisikan[9])

Cukup singkat bukan untuk mencoba aplikasi contoh dari Wikitude-PhoneGap yang menggunakan Vuforia SDK.. :)

Sekarang saatnya berkreasi sendiri, membuat proyek Augmented Reality dengan menggabungkan kemampuan PhoneGap (HTML5), Wikitude, dan Vuforia.. 

note: aplikasi Wikitude yang bisa digunakan untuk komersial harus menggunakan lisensi yang berbayar [11]

[1] http://developer.wikitude.com/download
[2] http://oo.or.id/content/augmented-reality-using-phonegap-and-wikitude-sdk
[3] https://developer.vuforia.com/
[4] https://github.com/Wikitude/wikitude-phonegap/tree/master/iOS/SampleProj...
[5] https://github.com/Wikitude/wikitude-phonegap
[6] http://www.wikitude.com/external/doc/documentation/3.0/phonegap/setupgui...
[7] http://www.wikitude.com/external/doc/documentation/3.0/phonegap/setupgui...
[8] http://developer.wikitude.com/documentation/phonegap
[9] http://www.wikitude.com/external/doc/documentation/3.0/phonegap/images/t...
[10] https://www.alohar.com/static/doc/ios/tutorial.html
[11] http://www.wikitude.com/developer/download-sdk/pricing

Comments

Wah, kok saya baru baca artikel ini, kelewatan baca nih, untung baca-baca ulang... Keren kang O... maju terus!

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.