Minggu, 22 Desember 2013

Belajar Augmented Reality dengan Flartoolkit

romadhon-byar.com - Dari waktu ke waktu, teknologi mampu memenuhi kebutuhan manusia dalam berbagi hal yang belum tentu manusia kerjakan dengan maksimal. Dengan teknologi, manusia dapat dengan mudah mengeluarkan imajinasi yang belum tentu ada di dunia nyata. Nah, bicara tentang imajinasi, salah satu teknologi yang akan kita bahas saat ini bertumpu pada imajinasi kita masing - masing. Dengan teknologi ini kita dapat membuat sebuah bentuk 3D yang seterusnya dapat kita tampilkan pada dunia nyata alias dunia virtual ditampilkan pada dunia nyata.

Teknologi apa itu? Apa nama teknologi-nya? Apakah mudah untuk mempelajari-nya? Apakah kita harus Ngoding juga? Hmm, Teknologi ini adalah teknologi yang dimana Dunia Virtual dapat muncul di Dunia Nyata dengan bantuan kamera yang sebelumnya telah di setting dengan toolkit-nya. Nama teknologi-nya adalah Flartoolkit. Flartoolkit ini bersifat Open Scoure alias di gratiskan oleh pembuatnya. Untuk mempelajari Flartoolkit cukup mudah jika ada kemauan untuk belajar (benarkan saya?). Dalam pembuatan Augmented Reality yang ditekankan adalah pembuatan objek 3D-nya saja. Pada bagian Adobe Flash ada Ngoding-nya juga, tetapi disini kita hanya mengubah bagian - bagian yang perlu untuk diubah yang terkait dengan 3D-nya.

Sebenarnya apa itu Augmented Reality, lalu apa gunanya sih?

Sebelumnya sudah saya jelaskan secara singkat bahwa Augmented Reality adalah sebuah virtual yang dapat kita munculkan ke dalam dunia nyata dengan perantara kamera. Kegunaan dari Augmented Reality sendiri yaitu sebagai alat tambahan dalam pekerjaan manusia alias sebagai alat pendukung di kehidupan nyata. Contohnya memberikan efek 3D pada latar belakang sebuah acara televisi, memanfaatkan objek 3D sebagai contoh produk yang asli, memberi petunjuk arah dan lain sebagainya.

Apakah untuk membuat Augmented Reality hanya satu cara (Flartoolkit) saja?

Tidak, untuk membuat sebuah Augmented Reality ada beberapa metode, tidak hanya Flartoolkit saja.
  1. ARToolkit
  2. ARToolkit adalah sekumpulan library yang dikembangkan menggunakan bahasa C atau C++.
  3. Flartoolkit
  4. Flartoolkit adalah sekumpulan library yang dibuat dengan menggunakan Flash. Flartoolkit adalah lanjutan atau kembangan dari ARToolkit. Tool ini dapat dikembangkan pada website.
  5. Nyartoolkit
  6. Nyartoolkit sendiri berasal dari ARToolkit juga, tetapi jika ARToolkit memakai Bahasa C atau C++ lain halnya Nyartoolkit, tool ini memakai Bahasa Java.

Kali ini saya hanya membahas Flartoolkit saja. :) Karena saya agak menguasai ilmu ini, hehehe :)
O.k Langsung saja. 

Bahan - bahan yang diperlukan untuk membuat Augmented Reality dengan Flartoolkit antara lain:
  1. Flartoolkit 
  2. 3D Max Versi apa saja. (di sini saya memakai versi 2010)
  3. OpenCOLLADA_3ds_Max_1.3.1_x86 (untuk tambahan 3D Max)
  4. Adobe Flash (di sini saya menggunakan CS3 dan CS5)
  5. Marker AR
Jika belum ada silakan download terlebih dahulu bahan - bahannya:
  1. www.mediafire.com/download.php?uf1v14i4cl5s317 
  2.  (Isi-nya Flartoolkit, Marker Generator, Marker dan OpenCollada)
  3. Adobe Flash CS3 Portable (Sorry, belum di Upload, ada masalah)
  4. www.mediafire.com/view/?xxtc3cpycur9tm7 - Marker Buatan Admin.
  5. 3D Max 2010 (Link download O.k)

[TAHAP PERTAMA]
Oke, setelah bahan - bahannya siap kita langsung saja membuat AR nya. Pertama kali untuk membuat AR adalah membuat dahulu Objek 3D-nya dengan 3D Max. Buka aplikasi 3D Max-nya, lalu buat sebuah kotak. (lihat tools dikanan) Object Type > Box lalu buat kotaknya pada tempat yang telah disediakan.

Belajar Augmented Reality dengan Flartoolkit - Membuat Box
Membuat Box
Setelah membuat Box-nya langsung saja kita Export, klik lambang 3D Max yang ada pada pojok kiri atas > Export > Export.

Belajar Augmented Reality dengan Flartoolkit - Meng-Export
Meng-Export
Export Box tersebut ke dalam folder Flartoolkit > Model lalu pada "File Name" beri nama Box.DAE "Save as Type"  ke OpenCOLLADA(*.DAE). Lalu Klik "Save"

Belajar Augmented Reality dengan Flartoolkit - Men-Save
Men-Save
Langkah berikutnya, Centang semua cekbox pada kotak dialog "OpenCOLLADA Export" sesuai dengan gambar dibawah ini. Setelah itu Klik "Ok"


Belajar Augmented Reality dengan Flartoolkit - OpenCOLLADA Export
OpenCOLLADA Export


[TAHAP KEDUA]
Nah, tahap pembuatan bentuk 3D pada 3D Max sudah selesai selanjutnya kita menuju ke tahap berikutnya.
Pada tahap ini kita akan meng-Copy dan paste file "Box.DAE" yang tadi kita buat ke dalam folder "Data" lalu ubah Ektensi file "Box.DAE" menjadi "Box.PAT".

Langkah - langkahnya, masuk ke folder Flartoolkit > Model (Copy file Box.DAE) setelah meng-Copy lalu masuk ke folder Flartoolkit > Data (Paste file Box.DAE) lalu ubah ekstensinya menjadi *.PAT.

Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Copy Paste File dot DAE
Folder Flartoolkit
Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Copy Paste File dot DAE
Folder Model
Folder Model adalah tempat untuk men-Save Export dari 3D Max.

Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Copy Paste File dot DAE
Meng-Copy file Box.DAE
File Box.DAE yang terdapat pada folder Model di copy.

Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Copy Paste File dot DAE
Folder Data
Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Copy Paste File dot DAE
Ganti Ekstensi
Ganti Ekstensi *.DAE menjadi *.PAT


[TAHAP KETIGA]
Setelah mengganti Ekstensi-nya, sekarang kita men-Scan Marker Augmented Reality dengan menggunakan "Marker Generator" yang ada pada folder Marker Generator. (Scan Marker Secara OFFLINE)

Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Scan Marker AR
Scan Marker Augmented Reality
Buka Marker Generator-nya > Klik Allow > Arahkan Marker ke Kamera sampai dilingkari warna merah > Klik Get Pattern.

Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Scan Marker AR
Save Marker Augmented Reality
Selanjutnya Klik Save yang ada pada Marker Generator > Simpan Marker-nya di dalam folder Data > Lalu langsung Save (Lihat gambar untuk lebih jelasnya).

Catatan: Marker Generator dalam format *.swf. Jika tidak bisa di buka instal Adobe Flash atau melakukan "Scan Marker secara ONLINE".
Link-nya: http://flash.tarotaro.org/ar/MarkerGeneratorOnline.swf
(caranya sama seperti yang OFFLINE).


[TAHAP KEEMPAT]
Setelah Scan marker selesai, selanjutnya buka Adobe Flash CS3-nya.

Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Ngoding
Pilih Flash File (ActionScript 3.0)
Pada bagian ini pilihlah "Flash File (ActionScript 3.0)".  

Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Ngoding
Tampilan Tab Flash File (ActionScript 3.0)
Pada bagian ini berikan nama pada "Document Class". Contohnya: belajar.
Pada bagian ini Save dengan Ekstensi *.Fla

Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Ngoding
Buat File ActionScript File
Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Ngoding
Pilih ActionScript File
Pada bagian ini Klik File > New > ActionScript File


Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Ngoding
Tulis Kodenya

package{
  import flash.events.Event;
  import org.papervision3d.objects.parsers.DAE;
  [SWF(width=640, height=480, backgroundColor=0x808080, frameRate=30)]
 
    //Kata "Belajar" harus sesuai dengan nama file-nya Mau itu .fla atau .As (Sesuaikan!)
    public class belajar extends PV3DARApp 
    {
 //Kata "_Box" harus sama dengan nama file *.DAE dan *.PAT (Sesuaikan!)
 private var _Box;DAE;
 public function belajar() {
    addEventListener (Event.INIT, _onInit);
    init('Data/camera_para.dat','Data/Box.pat');
    }
  
           private function _onInit(e:Event):void 
           {
  _Box = new DAE();
  _Box.load('model/Box.dae'); //untuk membca file pd folder model
  _Box.scale = 2; //Skala 3D-nya
  _Box.rotationX = 90; //Rotasinya
  _markerNode.addChild(_Box);
    }
     }
}


Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Ngoding
Save File kodingan-nya
Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Ngoding
Save File kodingan-nya
Save filenya didalam folder Flartoolkit lalu beri nama dan dengan ekstensi *.As
Setelah kita save semua filenya, selanjutnya tinggal eksekusi saja file tersebut dengan cara CTRL+Enter.

Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Eksekusi
Eksekusi 
Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Eksekusi
Tampilan Box Kamera
Jika Kodingan benar dan tidak ada yang salah maka akan tampil seperti ini.
Selanjutnya klik tombol "Allow"

Belajar Augmented Reality dengan Flartoolkit - Augmented Reality - Hasil
Hasil Output Augmented Reality

Nah, ini tutorial yang pakai Adobe Flash CS5 



Kalau yang ini tutorial yang pakai Adobe Flash CS3 Portable 


Jika ada kritik dan saran dari Anda, silakan contact saya disini => romadhon-byar 
Terima Kasih ...
Mohon Maaf, jika saya lama merespon pertanyaan dari Agan sekalian.



Bagikan

Jangan lewatkan

Belajar Augmented Reality dengan Flartoolkit
4/ 5
Oleh

Subscribe via email

Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.

48 comments

Tulis comments
avatar
17 Mei 2013 02.23.00 WIB

Thank you tutorialnya :)
Semoga semakin sukses :D

Reply
avatar
17 Mei 2013 05.40.00 WIB

Sip Gan, semoga bermanfaat ... :)
Amin, Thanks Gan :D

Reply
avatar
Anonim
17 Mei 2013 10.23.00 WIB

gan kalo udah selesai bikin AR nya gimana cara menjadikan file supaya bisa di unduh di AppStore (iOS) atau di PlayStore/GooglePlay (android)?

Reply
avatar
17 Mei 2013 18.04.00 WIB

Mas, kenapa AR saya tidak bisa dibuka saat meng-eksekusi video untuk menampilkan object ?

Reply
avatar
17 Mei 2013 18.34.00 WIB

Gan kenapa script saya ketika di eksekusi ada tulisan "flash could not connect to the debug player" dan tidak bisa membuka webcam?

mohon bantuannya gan , , ,

Reply
avatar
17 Mei 2013 19.46.00 WIB

Kalo ini (Flartoolkit) hanya di komputer Gan.
di unduh apa di upload gan?
Kalo android cari saja aplikasi AR di Google Play. :)

Reply
avatar
17 Mei 2013 19.52.00 WIB

Kesalahan yang sering terjadi dan harus diperbaiki:
1. Nama file harus sesuai dengan kode.
2. Ekstensi harus diperhatikan.
3. File .DAE tidak diubah menjadi .PAT
4. File .DAE yg sudah di ubah menjadi .PAT tidak ada di folder Data.

Coba di periksa ulang dan baca dengan seksama Tutorial-nya :)

Reply
avatar
17 Mei 2013 20.11.00 WIB

Coba sesuaikan nama di kode (syntax) nya dengan nama file yang ber-Ekstensi .Fla dan .As

coba periksa camera_para.dat apakah sudah sesuai namanya di syntax.?

Apakah file .DAE yg sudah di ubah ekstensi-nya menjadi .PAT sudah ada di dalam folder Data?

Semua nama File harus sama. Serta juga sesuai dengan Ekstensi-nya.

Harus teliti Gan :)
Semoga berhasil ...

Reply
avatar
14 Juni 2013 07.14.00 WIB

mas tutorialnya sangat bermanfaat sekali...
saya mau tanya kalau pake flash develop gemana mas???

Reply
avatar
15 Juni 2013 08.54.00 WIB

manta gan tutorialnya....
kalau pake flash develop gemana caranya gan???

Reply
avatar
17 Juni 2013 02.01.00 WIB

AR pakai Flash Developer saya belum pernah coba. Tapi jika ada waktu saya akan membuat Tutorialnya.

Terima Kasih atas pertannyaanya :)

Reply
avatar
17 Juni 2013 02.02.00 WIB

Augmented Reality pakai Flash Developer saya belum pernah coba. Tapi jika ada waktu saya akan membuat Tutorialnya.

Terima Kasih atas pertanyaanya :)

Reply
avatar
5 Juli 2013 11.51.00 WIB

bro, setelah saya eksekusi tampilan nya putih aja.. pemanggilan kameranya ga bisa... coding-coding udah aku sesuaikan dengan syntax2nya..

Reply
avatar
5 Juli 2013 22.01.00 WIB

bro, programna udah jalan.. tapi marker yang di baca masih sering lari-lari ga fokus.. malahan biar tanpa marker bisa muncul sendiri objek 3D na..

Reply
avatar
Anonim
9 Juli 2013 14.32.00 WIB

bro tutorialnya bermanfaat banget, tapi kok aku coba biar ga ada marker objek nya tetap muncul yang penting di depan webcam gambar agak gelap pasti objek nya muncul

Reply
avatar
15 Juli 2013 01.51.00 WIB

Thanks Gan :) Semoga Bermanfaat selalu. Ia gan, mungkin yang gelap itu menyerupai markernya :). Ane juga ngalamin.

Reply
avatar
15 Juli 2013 01.56.00 WIB

Sip, Pencahayaan ruangan, posisi marker serta kamera sangat mempengaruhi sekali.

Kalo objek muncul tanpa marker pada kegelapan dimungkinkan warna gelap itu hampir sama dengan marker :)

Reply
avatar
15 Juli 2013 02.03.00 WIB

Coba klik baris error pada box "Compiler Error" nya. :) dimana letak kesalahannya.
kalau sukses pasti tampilan outputnya sama kaya gambar "Tampilan Box Kamera" di atas.
:)

Reply
avatar
15 Juli 2013 12.56.00 WIB

gan.. mau tanya.. kalo pake sketchup.. untuk eksport kan langsung ada Collada nya (.dae) sama ga sih sama openCollada?? dan bisa ga kalau bikinnya 3d nya di sketchup langsung masuk ke Flaar-nya??

Reply
avatar
22 Juli 2013 06.01.00 WIB

maaf gan saya mau tutorial bikin drumkit pake AR kira2 agan tau caranya biar kalo salah satu dari marker ditutup keluar bunyinya

Reply
avatar
30 Juli 2013 21.10.00 WIB

Antara Collada dan OpenCollada berbeda serta fungsinya pun juga berbeda. OpenCollada sendiri adalah tambahan plugin untuk 3DMax dalam tutorial ini.

untuk SketchUp saya belum bisa menanggapinya lebih jauh.
Saya rasa tidak bisa, kecuali di SketchUp ada plugin OpenCollada.

:)

Reply
avatar
30 Juli 2013 21.39.00 WIB

Sebelumnya saya mohon maaf, untuk bagian ini saya belum sampai situ belajar AR nya. :|
tetapi, Saya akan mencoba mencari tahu tentang hal ini di kemudian hari. :)

Reply
avatar
8 Oktober 2013 23.03.00 WIB

Gan mau nanya nih, itu dalam folder Flartoolkit > Data, kok file typenya ga bisa di ganti ya?? yang Box.PAT, camera_para.dat, marker16.PAT. Pas gw rename tetep aj type filenya dalam bentuk coreldraw sma video CD movie. Mhoon bantuannya gan. :D

Reply
avatar
28 Oktober 2013 13.55.00 WIB

gan kalo untuk penggunaan markerless kira2 di flartoolkit support dan memungkinkan gk ya???
mohon penjelasanya. thnks gan sebelumnya :)

Reply
avatar
28 Oktober 2013 16.53.00 WIB

Apakah Ekstensinya sudah terlihat atau belum?
Kalau belum anda bisa lihat cara menampilkan Ekstensi file agar mempermudah dalam mengganti formatnya (ekstensinya).
Lihat Video > http://youtu.be/BMZJUx8OY6k :)

Reply
avatar
28 Oktober 2013 17.44.00 WIB

Untuk markerless pada Flartoolkit sepertinya tidak memungkinkan Gan. Setahu saya markerless bisanya pasa D'Fusion.

Reply
avatar
30 Oktober 2013 11.05.00 WIB

gan mau tanya nih... waktu saya save mescan marker kenapa gak keluar tempat penyimpenannya (ini dilakuakan dalam keadaan offline) dan waktu keadaan online muncul kata seperti ini :
ReferenceError: Error #1069: Property save not found on flash.net.FileReference and there is no default value.
at org.tarotaro.flash.ar.ui::FLARCodeViewPanel/::savePattern()
at org.tarotaro.flash.ar.ui::FLARCodeViewPanel/__saveButton_click()

Reply
avatar
30 Oktober 2013 11.43.00 WIB

gan kenapa waktu save marker tidak muncul tempat penimpanan markernya.. ohon pencerahannya. terima kasih.

Reply
avatar
31 Oktober 2013 21.08.00 WIB

Ada beberapa kemungkinan:
1. Flash.taro-taro harus Online.
2. Jika bisa Offline komponen dari web (Flash.taro-taro) harus termuat terlebih dahulu.*

Saran saya: Pakai yang Offline saja agar mempermudah eksekusi nya.
*sudah saya coba. :)

Reply
avatar
21 Januari 2014 09.24.00 WIB

Gan, klo ditambah tombol kira2 bisa ga ya di flashnya, misalnya utk fungsi zoom / rotate ? klo bisa bagaimana caranya?

Reply
avatar
23 Januari 2014 14.43.00 WIB

Menurut saya bisa. Tinggal logikanya.
Maaf, Gan untuk caranya ane belum bisa. Maklum ane juga masih belajar.

Tapi, Saya pernah coba pas nyentuh marker-nya otomatis objeknya membesar atau mengecil. Cara ini kalo ga salah pake OpenSpace3D Gan. Mungkin lain waktu ane bisa postingin.

Reply
avatar
20 Juni 2014 10.12.00 WIB

gan, klo di bikin web based gmn ya caranya?

Reply
avatar
10 Oktober 2014 07.50.00 WIB

gan file .DAE saya kok tidak bisa di ubah ke .PAT ya ?

Reply
avatar
12 Desember 2014 03.02.00 WIB

ini bisa multi marker gak gan? jadi bisa mendeteksi beberapa marker yg berbeda dan menampilkan gambar 3D yang berbeda untuk tiap markernya?

Reply
avatar
22 Januari 2015 06.25.00 WIB

gan sya pengen marker tuh cuma buat barkod keluaran buar gambar muncul 3d nya saja. jadi pass marker ga di arahin ke kamera gambarnya msh tetap muncul itu gmna ya

Reply
avatar
17 April 2015 21.38.00 WIB

Silahkan cari cara untuk mengubah extensi file terlebih dahulu

Keyword: "cara-mengganti-ekstensi-file-di-komputer"

Reply
avatar
17 April 2015 21.39.00 WIB

Itu yang mau Saya pelajari :3, tapi belum ada waktu :'(

Reply
avatar
17 April 2015 21.41.00 WIB

Wah, kayanya itu Nyartoolkit gan :3

Reply
avatar
17 April 2015 21.43.00 WIB

Flartoolkit bisa multi marker gan :3

cek disini -> http://flash.tarotaro.org/blog/2010/03/16/multi-marker-test/

Reply
avatar
17 April 2015 21.44.00 WIB

dan disini -> http://wonderfl.net/c/8lBK
(FLARToolKit Multi Marker Sample(FLAR, Hiro))

Reply
avatar
10 Juni 2016 23.37.00 WIB

gan.. ramadhon.. ada kontak agan..?

Reply
avatar
20 Juni 2016 08.03.00 WIB

kalau open calloda untuk 3ds max 9 ada tidak alnya yang ini error 1114?

Reply
avatar
30 Juni 2016 17.45.00 WIB

coba ke website nya langsung -> http://opencollada.org/
:)

Reply
avatar
30 Juni 2016 17.48.00 WIB

http://www.romadhon-byar.com/2016/06/kontak.html

:)

Reply
avatar
18 Oktober 2016 19.47.00 WIB

gan ana mau tanya pada codingan flashnya apakah pengaruh Huruf besar sama huruf kecilnya??

thanks before

Reply
avatar
20 Oktober 2016 20.18.00 WIB

Gan kalo untuk markernya yang mana yah??

Reply
avatar
13 November 2016 06.56.00 WIB

menurut Saya pengaruh, tp kenapa tidak mencobanya sendiri :D

Reply
avatar
13 November 2016 06.59.00 WIB

Yg ini gan buat Saya -> http://www.mediafire.com/view/?xxtc3cpycur9tm7

Kalau mau buatan sendiri bisa dicoba ke sini -> http://flash.tarotaro.org/ar/MarkerGeneratorOnline.swf

Reply

Berikan komentar Anda tentang postingan ini :)