Senin, Februari 07, 2011

FLARManager v1.1 (FLARToolkit + Away3D) + FlashDevelop = Multi Marker & Collada

Setelah menunggu 2 bulan sejak versi terakhirnya FLARManager v1.0.4 yang masih banyak bug (terutama sangat terasa pada fitur mirrorDisplay yang saat itu hanya mencerminkan video dari kamera saja tanpa mencerminkan objek 3D-nya), akhirnya di bulan Januari yang lalu kembali ada update menjadi FLARManager v.1.1.0. Pada FLARManager v1.1.0 ini ada perbedaan yang sangat mendasar dari versi-versi sebelumnya, yaitu diubahnya sebagian besar contoh kode untuk menampilkan objek 3D yang pada awalnya menggunakan engine Papervision3D menjadi menggunakan engine Away3D.


Berkaitan dengan pekerjaan saya tentang Augmented Reality yang salah satu fiturnya yaitu harus dapat menampilkan objek 3D yang berbeda-beda untuk tiap marker yang berbeda-beda pula, maka saya modifikasi file contoh standar yang awalnya hanya menampilkan satu objek COLLADA pada marker menggunakan FLARManager v1.1, FLARToolkit, dan Away3D (FLARManagerTutorial_Collada_Away3D.as). Metode untuk melakukannya saya adaptasikan dari kode milik lOOney dOOdle pada link ini yang masih menggunakan Papervision3D sebagai Flash 3D engine (dan FLARManager versi sebelumnya), sedemikian sehingga file hasil modifikasinya (MultiMarkerMultiCollada.as) menjadi seperti ini:

package examples {
 import away3d.animators.Animator;
 import away3d.animators.BonesAnimator;
 import away3d.containers.ObjectContainer3D;
 import away3d.containers.Scene3D;
 import away3d.containers.View3D;
 import away3d.core.utils.Cast;
 import away3d.events.Loader3DEvent;
 import away3d.lights.DirectionalLight3D;
 import away3d.loaders.AbstractParser;
 import away3d.loaders.Collada;
 import away3d.loaders.Loader3D;
 import away3d.loaders.utils.AnimationLibrary;
 import away3d.materials.BitmapMaterial;
 
 import com.transmote.flar.FLARManager;
 import com.transmote.flar.camera.FLARCamera_Away3D;
 import com.transmote.flar.camera.FLARCamera_PV3D;
 import com.transmote.flar.marker.FLARMarker;
 import com.transmote.flar.marker.FLARMarkerEvent;
 import com.transmote.flar.tracker.FLARToolkitManager;
 import com.transmote.flar.utils.geom.AwayGeomUtils;
 
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.geom.Rectangle;
 import flash.geom.Vector3D;
 import flash.utils.getTimer;
 
 
 /**
  * This file (MultiMarkerMultiCollada.as) is modification of the standard
  * example file to display collada-formatted model using FLARManager v1.1,
  * FLARToolkit, and Away3D (FLARManagerTutorial_Collada_Away3D.as) authored 
  * by Eric Socolofsky (http://transmote.com/flar). The collada model used 
  * for this example (mario_testrun.dae) comes from Away3D's examples.
  * 
  * The method to display multiple colladas on multiple markers is derived
  * from a code to display multiple colladas on multiple markers using 
  * previous version of FLARManager, FLARToolkit, and Papervision3D
  * (http://www.looneydoodle.com/MultiMarkerMultiCollada.zip) authored by
  * Arunram Kalaiselvan aka lOOney dOOdle (http://www.looneydoodle.com/).
  * 
  * @author Fathah Noor Prawita
  * @url  http://blog.fathah.net
  */
 
 public class MultiMarkerMultiCollada extends Sprite {
  private var flarManager:FLARManager;
  
  private var view:View3D;
  private var camera3D:FLARCamera_Away3D;
  private var scene3D:Scene3D;
  private var light:DirectionalLight3D;
  
  private var activeMarker:FLARMarker;
  private var activeMarker1:FLARMarker;
  private var activeMarker2:FLARMarker;
  
  private var modelLoader:Loader3D;
  
  private var modelContainer:ObjectContainer3D;
  private var modelContainer1:ObjectContainer3D;
  private var modelContainer2:ObjectContainer3D;
  
  private var modelAnimator:BonesAnimator;
  private var modelAnimator1:BonesAnimator;
  private var modelAnimator2:BonesAnimator;
  
  // texture file for mario
  [Embed(source="../../resources/assets/mario_tex_red-blue.jpg")]
  private var MarioTextureRedBlue:Class;
  
  [Embed(source="../../resources/assets/mario_tex_green-red.jpg")]
  private var MarioTextureGreenRed:Class;
  
  [Embed(source="../../resources/assets/mario_tex_blue-green.jpg")]
  private var MarioTextureBlueGreen:Class;
  
  // collada file for mario
  [Embed(source="../../resources/assets/mario_testrun.dae",mimeType="application/octet-stream")]
  private var MarioDae:Class;
  
    
  public function MultiMarkerMultiCollada () {
   this.addEventListener(Event.ADDED_TO_STAGE, this.onAdded);
  }
  
  private function onAdded (evt:Event) :void {
   this.removeEventListener(Event.ADDED_TO_STAGE, this.onAdded);
   
   // pass the path to the FLARManager xml config file into the FLARManager constructor.
   // FLARManager creates and uses a FLARCameraSource by default.
   // the image from the first detected camera will be used for marker detection.
   // 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("../resources/flar/flarConfig.xml", new FLARToolkitManager(), this.stage);
   
   // to switch tracking engines, pass a different IFLARTrackerManager into FLARManager.
   // refer to this page for information on using different tracking engines:
   // http://words.transmote.com/wp/inside-flarmanager-tracking-engines/
   //   this.flarManager = new FLARManager("../resources/flar/flarConfig.xml", new FlareManager(), this.stage);
   //   this.flarManager = new FLARManager("../resources/flar/flarConfig.xml", new FlareNFTManager(), this.stage);
   
   // add FLARManager.flarSource to the display list to display the video capture.
   this.addChild(Sprite(this.flarManager.flarSource));
   
   // begin listening for FLARMarkerEvents.
   this.flarManager.addEventListener(FLARMarkerEvent.MARKER_ADDED, this.onMarkerAdded);
   this.flarManager.addEventListener(FLARMarkerEvent.MARKER_UPDATED, this.onMarkerUpdated);
   this.flarManager.addEventListener(FLARMarkerEvent.MARKER_REMOVED, this.onMarkerRemoved);
   
   // wait for FLARManager to initialize before setting up Away3D environment.
   this.flarManager.addEventListener(Event.INIT, this.onFlarManagerInited);
  }
  
  private function onFlarManagerInited (evt:Event) :void {
   this.flarManager.removeEventListener(Event.INIT, this.onFlarManagerInited);
   
   this.scene3D = new Scene3D();
   this.camera3D = new FLARCamera_Away3D(this.flarManager, new Rectangle(0, 0, this.stage.stageWidth, this.stage.stageHeight));
   this.view = new View3D({x:0.5*this.stage.stageWidth, y:0.5*this.stage.stageHeight, scene:this.scene3D, camera:this.camera3D});
   this.addChild(this.view);
   
   this.light = new DirectionalLight3D();
   this.light.direction = new Vector3D(500, -300, 200);
   this.scene3D.addLight(light);
   
   
   //--------------------------------------3D-Model----
   var collada:Collada = new Collada();
   collada.scaling = 10;
   var model:ObjectContainer3D = collada.parseGeometry(MarioDae) as ObjectContainer3D;
   model.materialLibrary.getMaterial("FF_FF_FF_mario1").material = new BitmapMaterial(Cast.bitmap(MarioTextureRedBlue));
   model.mouseEnabled = false;
   model.rotationX = 90;
   this.modelAnimator = model.animationLibrary.getAnimation("default").animator as BonesAnimator;
   
   // create a container for the model, that will accept matrix transformations.
   this.modelContainer = new ObjectContainer3D();
   this.modelContainer.addChild(model);
   this.modelContainer.visible = false;
   this.scene3D.addChild(this.modelContainer);
   
   
   //--------------------------------------3D-Model----
   var collada1:Collada = new Collada();
   collada1.scaling = 10;
   var model1:ObjectContainer3D = collada1.parseGeometry(MarioDae) as ObjectContainer3D;
   model1.materialLibrary.getMaterial("FF_FF_FF_mario1").material = new BitmapMaterial(Cast.bitmap(MarioTextureGreenRed));
   model1.mouseEnabled = false;
   model1.rotationX = 90;
   this.modelAnimator1 = model1.animationLibrary.getAnimation("default").animator as BonesAnimator;
   
   // create a container for the model, that will accept matrix transformations.
   this.modelContainer1 = new ObjectContainer3D();
   this.modelContainer1.addChild(model1);
   this.modelContainer1.visible = false;
   this.scene3D.addChild(this.modelContainer1);
   
   
   //--------------------------------------3D-Model----
   var collada2:Collada = new Collada();
   collada2.scaling = 10;
   var model2:ObjectContainer3D = collada2.parseGeometry(MarioDae) as ObjectContainer3D;
   model2.materialLibrary.getMaterial("FF_FF_FF_mario1").material = new BitmapMaterial(Cast.bitmap(MarioTextureBlueGreen));
   model2.mouseEnabled = false;
   model2.rotationX = 90;
   this.modelAnimator2 = model2.animationLibrary.getAnimation("default").animator as BonesAnimator;
   
   // create a container for the model, that will accept matrix transformations.
   this.modelContainer2 = new ObjectContainer3D();
   this.modelContainer2.addChild(model2);
   this.modelContainer2.visible = false;
   this.scene3D.addChild(this.modelContainer2);
   
   
   
   this.addEventListener(Event.ENTER_FRAME, this.onEnterFrame);
  }
  
  private function onMarkerAdded (evt:FLARMarkerEvent) :void {
   trace("[" + evt.marker.patternId + "] added");
   
   if (evt.marker.patternId == 0) {
    markerAdded(0);
    this.activeMarker = evt.marker;
   }
   
   if (evt.marker.patternId == 1) {
    markerAdded(1);
    this.activeMarker1 = evt.marker;
   }
   
   if (evt.marker.patternId == 2) {
    markerAdded(2);
    this.activeMarker2 = evt.marker;
   }
  }
  
  private function onMarkerUpdated (evt:FLARMarkerEvent) :void {
   trace("[" + evt.marker.patternId + "] updated");
   
   if (evt.marker.patternId == 0) {
    markerAdded(0);
    this.activeMarker = evt.marker;
   }
   
   if (evt.marker.patternId == 1) {
    markerAdded(1);
    this.activeMarker1 = evt.marker;
   }
   
   if (evt.marker.patternId == 2) {
    markerAdded(2);
    this.activeMarker2 = evt.marker;
   }
  }
  
  private function onMarkerRemoved (evt:FLARMarkerEvent) :void {
   trace("[" + evt.marker.patternId + "] removed");
   
   if (evt.marker.patternId == 0) {
    markerRemoved(0);
   }
   
   if (evt.marker.patternId == 1) {
    markerRemoved(1);
   }
   
   if (evt.marker.patternId == 2) {
    markerRemoved(2);
   }
   
   this.activeMarker = null;
   this.activeMarker1 = null;
   this.activeMarker2 = null;
  }
  
  private function onEnterFrame (evt:Event) :void {
   // apply the FLARToolkit transformation matrix to the Cube.
   if (this.activeMarker) {
    this.modelContainer.transform = AwayGeomUtils.convertMatrixToAwayMatrix(this.activeMarker.transformMatrix);
   }
   
   if (this.activeMarker1) {
    this.modelContainer1.transform = AwayGeomUtils.convertMatrixToAwayMatrix(this.activeMarker1.transformMatrix);
   }
   
   if (this.activeMarker2) {
    this.modelContainer2.transform = AwayGeomUtils.convertMatrixToAwayMatrix(this.activeMarker2.transformMatrix);
   }
   
   // update the animation and Away3D view.
   if (this.modelAnimator) {
    this.modelAnimator.update(getTimer() * .005);
   }
   
   if (this.modelAnimator1) {
    this.modelAnimator1.update(getTimer() * .005);
   }
   
   if (this.modelAnimator2) {
    this.modelAnimator2.update(getTimer() * .005);
   }
   this.view.render();
  }
  
  private function markerAdded(markerId:int):void {
   switch(markerId) {
    case 0: {
     if (modelContainer.visible == false) {
      modelContainer.visible = true;
      break;
     } else {
      break;
     }
    }
    case 1: {
     if (modelContainer1.visible == false) {
      modelContainer1.visible = true;
      break;
     } else {
      break;
     }
    }
    case 2: {
     if (modelContainer2.visible == false) {
      modelContainer2.visible = true;
      break;
     } else {
      break;
     }
    }
   }
  }
  
  private function markerRemoved(markerId:int):void {
   switch(markerId) {
    case 0: {
     if (modelContainer.visible == true) {
      modelContainer.visible = false;
      break;
     } else {
      break;
     }
    }
    case 1: {
     if (modelContainer1.visible == true) {
      modelContainer1.visible = false;
      break;
     } else {
      break;
     }
    }
    case 2: {
     if (modelContainer2.visible == true) {
      modelContainer2.visible = false;
      break;
     } else {
      break;
     }
    }
   }
  }
 }
}

Untuk langsung mencobanya, silakan print marker-1, marker-2, dan marker3, kemudian buka link ini. Jika Flash meminta izin untuk mengakses webcam, tekan "Allow" saja. Arahkan marker yang tadi telah diprint ke depan webcam.

Bagi yang biasa menggunakan FlashDevelop, file proyeknya dapat dapat didownload di link ini. Semoga bermanfaat.

[UPDATE 2013-04-24] Karena ternyata banyak yang menanyakan ke saya via YM dan Facebook tentang bagaimana mengubah (misalnya) skala dari si model 3D jika kita menekan suatu tombol pada keyboard, maka saya update sedikit file proyeknya untuk menambahkan fungsi tersebut. Silakan download di link ini. Cara menggunakan contoh ini yaitu dengan mengarahkan marker pertama pada webcam, sehingga akan memunculkan model 3D berupa Mario berbaju merah. Kemudian tekan tombol panah kanan/kiri pada keyboard untuk memperbesar/memperkecil ukurannya.

220 komentar:

1 – 200 dari 220   Lebih baru›   Terbaru»
basworo mengatakan...

haloo mas,
terima kasih buat source codenya.
sudah berhasil saya coba.
sekalian mau tanya nih mas
untuk mendeteksi posisi/coordinat dari tiap marker?
thanks b4

George mengatakan...

hey man! congrats for your program is the best Augmented reality program that uses Away3D that i found. One question how can i remove the black square in the left corner?

fathah mengatakan...

@Basworo: bisa menggunakan class FLARMarker.

untuk langsung mencobanya, silakan paste kode ini pada line 244 di file MultiMarkerMultiCollada.as:

trace(this.activeMarker.centerpoint.x + " | " + this.activeMarker.centerpoint.y + " | " + this.activeMarker.transformMatrix.rawData[14]);

fathah mengatakan...

@George: thanks, glad this source code can be useful for you. to remove the thresholdSourceDisplay, please open file flarConfig.xml and in line 46 set its value to "false".

joni mengatakan...

sudah bisa mas, trims.
tanya lg nih mas, untuk buat bayangan pada obyek 3d pad ar berdasar posisi cahaya ?

fathah mengatakan...

@Joni: wah kalau itu saya kurang ngerti, cahayanya kan sudah dibuat di kode pada line 126-128 tuh, mungkin biar bayangan dari si mario terlihat mesti kita buat objek 3D lagi sebagai alas tempat jatuhnya bayangan(?), CMIIW.

Pipin Ramadhani mengatakan...

salam mas fathah,
terima kasih atas source codenya.
awesome, mas fathah menggunakan Away 3D.

saya punya pertanyaan mas, saya punya proyek yang membuat AR yang terdiri 27 dae dan tentu saja 27 marker, jadi setelah jalankan, terjadi error seperti ini:


Attempting to launch and connect to Player using URL J:\PROJECT Road Safety Education2\ROeS\AugmentedReality.swf
[SWF] J:\PROJECT Road Safety Education2\ROeS\AugmentedReality.swf – 542447 bytes after decompression
Error: Error #2032: Stream Error. URL: file:///J|/PROJECT%20Road%20Safety%20Education2/ROeS/./assets/FLAR/flarConfig.xml
at com.transmote.flar::FLARManager/onFlarConfigLoadError()[J:\PROJECT Road Safety Education2\ROeS\FLARToolKit_ver2_5_4\src\com\transmote\flar\FLARManager.as:832]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()


saya sudah mempelajari kodenya tapi stack untuk mengerti tentang hal ini, dan saya menemukan sorce code dari mas fathah. dan saya berpikir untuk mencoba SC dari mas, tapi mas menggunakan model mario dengan 2 atau 3 texture, saya ingin bertanya bagaimana menggunakan 27 model dengan texture yang berbeda? apakah sama seperti looney doodeykah?

maaf atas pertanyaan bodoh saya tapi saya baru sekali mempelajari AR ini. mohon bantuannya mas, terima kasih.

fathah mengatakan...

Stream error biasanya karena file yang akan diload tidak ditemukan, untuk kasus ini sepertinya path ke file flarConfig.xml kurang lengkap.

Iya, judul blog ini agak rancu juga "Multi Collada" padahal sebenernya saya cuma pake 1 collada dengan 3 tekstur, hehehe... :D
Tapi gak sulit kok untuk modifikasinya. Cukup copy baris 81-82, ubah menjadi seperti kode-kode berikut ini, lalu paste dibawah baris ke-82.

[Embed(source="../../resources/assets/colladaKedua.dae",mimeType="application/octet-stream")]
private var ColladaKeduaDae:Class;
[Embed(source="../../resources/assets/colladaKetiga.dae",mimeType="application/octet-stream")]
private var ColladaKetigaDae:Class;
[Embed(source="../../resources/assets/colladaKeempat.dae",mimeType="application/octet-stream")]
private var ColladaKeempatDae:Class;
[Embed(source="../../resources/assets/colladaSeterusnya.dae",mimeType="application/octet-stream")]
private var ColladaSeterusnyaDae:Class;

Emm, gak cuma itu sih, semua kode dibawahnya harus dimodifikasi juga sesuai dengan jumlah collada yang digunakan. Coba dibaca-baca lagi filenya, polanya kelihatan kok. Silakan dicoba dulu. Btw, biasanya ngoding pake bahasa apa?

Pipin Ramadhani mengatakan...

waah mas fathah, terima kasih banyak. alhamdulillah sudah berhasil hehehe 27 marker + collada dan ga ada macet pas switchnya .. saya cuma belajar basic java dan c++ saja :D soalnya saya orang multimedia mas . makasi banyak mas :D

Pipin Ramadhani mengatakan...
Komentar ini telah dihapus oleh pengarang.
peruzz mengatakan...

saya orang baru dlm menghasilkan aplikasi yg menggunakan augmented reality ini. saya telah pun mendownload project seumpama ini dan saya ingin bertanya bagaimana untuk compile script as3 ini ke fla?

fathah mengatakan...

@Peruzz: silakan dibuka tutorial ini

Pipin Ramadhani mengatakan...

salam mas fathah..
mau nanya, mas udah pernah nyoba augmented reality tangible marker ?
yang seperti di video ini.

http://www.youtube.com/watch?v=zLVWQSdce9o

makasi mas..

fathah mengatakan...

Maksutnya tangible marker tuh yg biasa juga disebut "markerless"/natural feature tracking yha? Pernah coba (pake Unifeye Design), tapi masih belum nemu yg free. Jadi si marker tidak harus berbentuk kotak-kotak hitam putih.

YOGI mengatakan...

terimakasih Source Code nya mas... sangat menarik sekali, menantang untuk dipelajari :).... kalo bisa diperbanyak lagi ya mas... lagi belajar nih..Keep Share,

achmad ridwan mengatakan...

Mas, saya mau tanya. untuk membuat menjadi file swf dan bisa di publikasikan lewat web caranya gimana? mohon pencerahannya.

Fathah mengatakan...

@Yogi: sama-sama :) semoga bermanfaat...

Fathah mengatakan...

@Achmad Ridwan: IDE-nya pake FlashDevelop kan? Di bagian atas ada tombol "Test Project", coba saja jalankan. Lalu lihat di folder "bin" ada file SWF nya dan biasanya sekaligus dengan file "index.html". File tersebut bisa langsung diupload dan dibuka via web.

achmad ridwan mengatakan...

Mas Fathah terima kasih atas jawabannya. gak nyangka bakal dapet cepet jawabannya. terus terang biasanya saya menggunakan adobe flex atau adobe cs4. untuk flash develop saya baru coba ini. saya sudah cek di folder bin, ada file swfnya. tapi kenapa ya kalo saya pisahkan file swf tersebut dari folder, saat dijalankan muncul security eror? kalo saya jalankan langsung dari flash develop, ada kotak hitam di pinggir atas, cara menghilangkannya bagaimana? sebelumnya saya ucapkan terimakasih atas pencerahan dari mas fathah.

Fathah mengatakan...

@Achmad Ridwan: errornya seperti ini yha?

Error #2044: Unhandled error:. text=Error #2032: Stream Error. URL: file:///D|/resources/flar/flarConfig.xml

itu karena file flarConfig.xml yang ada di folder resources/flar tidak ikut dicopy :)

untuk menghilangkan kotak hitam di kiri atas, silakan cek komen saya untuk George di bagian awal postingan ini...

achmad ridwan mengatakan...

wew,, berhasil. trimakasih Mas Fathah. next time bahas AR untuk handheld ya (kalo bisa android).

Fathah mengatakan...

hayuk atuh post tentang mobile AR di blognya~ ;)

riko saja mengatakan...

hallo mas fathah....
terima kasih source kodenya... saya mau bertanya nih:
1. bagaimana jika kita ingin membuat bentuk marker sendiri??
2. bagaimana buat AR yang seperti ini http://www.youtube.com/watch?v=HfaGih85ZJg yang menggunakan marker sebagai tombol untuk interaksi user....
maaf pertanyaanya banyak, masih belajar nih hehehe....
mohon bantuanya mas....

Fathah mengatakan...

1. Untuk membuat marker sendiri, silakan bukan link ini.

2. Inti algoritmanya sih kita definisikan 5 buah marker, tapi hanya 1 buah (yang paling depan) yang "ditempeli" objek 3D. Pastikan 5 buah marker tsb terdeteksi semua, dan ketika salah satu dari 4 marker controllernya tidak terdeteksi, maka lakukan suatu aksi pada objek 3D-nya.

riko saja mengatakan...

masih kurang ngerti ne mas... hahaha... saya ingin coba zoom out dan zoom in, jadi saya kan harus scale objekny... nah kira2 codingny bagaimana ya?? letakan codingny dmn??..
o iya mas, objek saya rumah ne... dan ad animasiny... dmn bagunan rumah dan atap bisa terbuka sehingga tampak dalam rumah dapat terlihat, nah gimana cara stop n play animasi dengan menggunakan perintah keyboard...
satu lagi ne tanggung... hehehe....
apakah coding ini dapat menampilkan satu objek dengan beberapa marker yang sama, atau hanya bisa 1 objek 1 marker saja??...
tolong pencerahany mas.... saya buta banget tentang action script..... hehehehe...

Fathah mengatakan...

@Riko saja: Btw dari source code di blog ini sudah bisa bikin apa? Ada SWF atau script yang bisa dishare?

riko saja mengatakan...

wah... cepet bener replaynya... hahahaha...
saya baru buat objekny mas, belum masuk k testing source codeny... hehehe....

riko saja mengatakan...

hallo mas.... saya ingin coba Source codeny ne.... apa aj yang dibutuhkan?? dan tolong minta langkah2ny mas.... saya bingung pake ap bukany ne... tolong jawabany mas.... TQ...

Fathah mengatakan...

install FlashDevelop, download versi terbarunya di sini.

setelah itu download file yang linknya ada di paragraf terakhir blog ini.

riko saja mengatakan...

sdh saya DL n instal mas, terus langkah selanjutny??
oh iy minta Acount FBny ad mas??? blogny sering error ne.... jadi ssh mw tanya2 lagi.... hehee....

Fathah mengatakan...

waduh jangan semuanya ditanyain step-by-stepnya dari awal donk, fokus ke topik MultiMarker menggunakan FLARManager :)

di webnya FlashDevelop bagian dokumentasi cukup memadai kok untuk mulai menggunakan FlashDevelop.

sebaiknya artikel-artikel awal di sini dibaca juga sebagai dasar aplikasi AR di Flash.

riko saja mengatakan...

ok.... Thanx mas..... ntar kalo sdh bisa, saya share dha..... hehehee......

riko saja mengatakan...
Komentar ini telah dihapus oleh pengarang.
riko saja mengatakan...

mas saya sudah bisa ne tambah objekny, tapi kenapa texture yang saya buat tidak mau menempel pada objekny?? jadi warna objekny hanya berwarna abu2 saja ne.... oh iy, arti string dari (FF_FF_FF_mario1) d line 145, 147, 169....

tolong arahany mas....

Fathah mengatakan...

Sip! :)

Kalau aset dae kita embed, materialnya memang perlu ditempelkan secara manual. Nah "FF_FF_FF_mario1" ini adalah nama dari material id yang terkait, pada script saya tempelkan dengan tekstur yang berbeda-beda warna bajunya.

Coba buka file 3D modelnya (*.dae) pake text editor, dan search "material id", perhatikan pada bagian name.

alfin mengatakan...

siang mas saya alfin ..
luar biasa mas untuk karyanya..
saya mau nanya mas saya ingin membuat simulator gempa bumi neggunakan teknologi ini mas ,,
rancangan saya saya memiliki 2 buah marker yang masing-masing memiliki satu buah objek dan ketika didekatkan(kedua marker bertemu)maka muncul objek yang lain itu kira2 gmn yam mas :)
trima kasih mas

Fathah mengatakan...

Wah konsep interaksi markernya persis dengan aplikasi yang sekarang sedang saya buat... :)

Klo menggunakan source code di atas, kita mesti menambahkan sebuah flag untuk tiap-tiap marker yang akan bernilai true ketika marker tersebut terdeteksi (dan bernilai false jika sebaliknya).

Pada fungsi markerAdded, kita tambahkan kemampuan untuk mengecek apakah flag dari kedua marker bernilai true, untuk kemudian model 3D dari masing-masing marker tsb disembunyikan (visible = false) dan tampilkan model 3D lainnya pada salah satu marker tsb.

Intinya sih gitu~

riko saja mengatakan...

wah mas.. berhasil ne... oh iy mas, kembali k pokok maslahny ne... gimana yang menggunakan marker sebagai tombol interaksi userny..... seperti comnt saya sebelumny.... terus, pada objek yang saya buat ada animasiny, tapi waktu d jalani animasiny gak gerak... mohon bimbingany lagi mas.... hahaha....

Fathah mengatakan...

@Riko: tentang animasi, pastikan pas export colladanya sudah benar animasi terekspor juga.

cek aja dengan impor ke (misalnya) 3dsMax, apa animasinya masih ada? klo tidak ada berarti salah pas ekspor.

untuk marker sebagai tombol, algoritmanya udah saya reply dengan jelas waktu itu, silakan implementasikan sendiri dalam script. coba dipahami di script bagian mana yang berjalan ketika sebuah marker terdeteksi, dan mana bagian yang bertugas untuk menampilkan atau mengubah properti (rotasi/translasi/skala) model 3D-nya.

alfin mengatakan...
Komentar ini telah dihapus oleh pengarang.
alfin mengatakan...

nah memeberikan flag itu yang saya binggung mas ???
contohny gmn ya mas ??
maap mas byk bertanya soalny baru belajar :)
trima kasih

Fathah mengatakan...
Komentar ini telah dihapus oleh pengarang.
Fathah mengatakan...

kira-kira seperti ini, harap diingat bahwa ini bukan script sebenarnya, cukup diikuti alurnya saja, terutama pada bagian OnEnterFrame ketika membanding2kan nilai foundMarker0 dan foundMarker1 apakah true atau false :)
*btw tampilan script di komentar ini susah dibaca, nanti kopas aja dan autoformat*
--------------------------------

private function onMarkerAdded(markerId:int) {
switch(markerId) {
case 0: {
foundMarker0 = true;
}
case 1: {
foundMarker1 = true;
}
}
}

private function onEnterFrame(e:Event) {
if (foundMarker0 && !foundMarker1) {
if (modelContainer0.visible == false) {
modelContainer0.visible = true;
break;
} else {
break;
}
}
if (!foundMarker0 && foundMarker1) {
if (modelContainer1.visible == false) {
modelContainer1.visible = true;
break;
} else {
break;
}
}
if (foundMarker0 && foundMarker1) {
if (modelContainer2.visible == false) {
modelContainer2.visible = true;
break;
} else {
break;
}
}
if (this.activeMarker0) {
this.modelContainer0.transform = AwayGeomUtils.convertMatrixToAwayMatrix(this.activeMarker0.transformMatrix);
}
if (this.activeMarker1) {
this.modelContainer1.transform = AwayGeomUtils.convertMatrixToAwayMatrix(this.activeMarker1.transformMatrix);
}
this.view.render();
}

alfin mengatakan...
Komentar ini telah dihapus oleh pengarang.
alfin mengatakan...

mas saya sudah mencoba program dari mas tp keluar error sperti ini mas
C:\Documents and Settings\alfin\My Documents\FlashDevelopProject_FLARManager_v1_1_0\src\com\transmote\flar\marker\FLARMarker.as(76): col: 36 Error: Syntax error: expecting identifier before lessthan.
kira2 knp ya mas ???

trus saya mau nanya mas deklarasi markerny dimn ya mas ??
mas nanyany banyak soalny baru belajar tentang ini mas ..
trima kasih :)

Fathah mengatakan...

itu errornya setelah nambahin script yang barusan saya kasih? ato dari awal sejak pake source code di blog ini?

script yang barusan kan cuma untuk menunjukkan contoh alurnya :) silakan disesuaikan sendiri

alfin mengatakan...

sebelum ditambahin mas ..
masih nyoba program dari mas aj
:)

riko saja mengatakan...

@alfin : bukany pake ap? kalo pake flash develop langsung bisa tuh, tapi harus instal java n sdk flex builder dl untuk jalaniny... linkny liat d replay mas fathah sebelum2ny...

terus deklar markerny ad d flarconfig.xml ny.... (resources > flar > flarconfig.xml ), terus jika mw buat markerny... linkny jg ad d replay ini.... hahahaaha....


@mas fathah : mas saya masih bingung dengan conrol markerny, tidak sesuai dengan harapan... hhahaha... oo iy mas fathah, saya mw tanya ne.. SC ini bisa gak menampilkan 1 objek yang sama pada banyak marker yang sama pula.... jadi intinya, 1 objek tersebut dapat ditampilkan pada banyak marker yang sama pula... atau dengan kata lain 1 objek memiliki multi target marker yang sama..... nah itu pengaturany bagaimana??

Fathah mengatakan...

@Alfin: nah itu udah dijawab :)

@Riko saja: pasti kontrolnya agak ngaco karena markernya sering gak kedetek yha? :P

Nah untuk yang multimarker tapi dengan marker yang sama, kita mesti ngasih index di tiap markerId yang terdeteksi, simpan aja dalam container berupa array. Jadi alurnya kira-kira gini:
#1 markerId 0 terdeteksi
#2 beri flag true pada containerMarkerId0[0]
#3 markerId 0 terdeteksi lagi untuk ke-n kali
#4 beri flag true pada containerMarkerId[n]
#5 nah yang ribet untuk transform model 3D nya, untuk tiap containerMarkerId[n] yang bernilai true, mesti ditempeli model 3D satu persatu, jadi harus bikin instance dari model 3D tersebut untuk tiap marker
#6 biar aplikasinya gak berat, jangan lupa untuk containerMarkerId[n] yang bernilai false model 3D nya langsung di removeChild, jangan sekedar di set false untuk visible nya

Fathah mengatakan...

@Riko saja: oiya saya barusan buka sourcenya lagi dan nemu sesuatu yang pasti bisa membantu :)

Ternyata selain markerId, ada juga sessionId! :D
Nilai sessionId tidak pernah sama untuk tiap marker yang sama maupun marker yang beda.

Untuk mencobanya, ganti trace pada fungsi onMarkerAdded, onMarkerUpdated, onMarkerRemoved menjadi mirip-mirip seperti ini:

trace("[" + evt.marker.patternId + ", " + evt.marker.sessionId + "] added");

Jangan lupa buka flarConfig.xml dan ubah nilai markerMode="SINGLE" menjadi markerMode="MULTI"

riko saja mengatakan...

pakai yang array sepertinya ribet mas... gak nyampe ilmu saya pakai array.... sulit dipahami codingnya.... hahahahaa....

terus cara yang kedua kok gak ad perubahan... masih saja, walaupun marker yang samany cuma ad 2 tapi yang muncul 1 objek saja pada satu marker, gak bisa 2 2ny... apa saya yang salah ya mas??

oh iy fungsi trace disini untuk apa ya mas, untuk parameter nilai marker ya??

Fathah mengatakan...

lah? :D

Di cara yang kedua kan saya cuma pengen ngasi tau bahwa nilai sessionId untuk semua marker itu berbeda (dengan menampilkan nilainya menggunakan fungsi trace). Jadi variable sessionId tsb bisa dimanfaatkan untuk membuat aplikasi multi marker dgn marker yang sama. Gak perlu pake array~ :)

riko saja mengatakan...

masih gak ngerti mas.... saya sdh tambahin di trace seperti mas replay td... terus, yang fungsi if ny gak diubah2 ya?? atau harus nambahin fungsi if ny??

Fathah mengatakan...

perhatikan saja hasil trace di output tab FlashDevelop

riko saja mengatakan...

mas... saya coba jalani cubeAway3D... yang ada d examples.. nah 1 objekny bisa tampil pada banyak marker yang sama..... bisa dijelaskan gak caranya??? kayakny pake array t......

Fathah mengatakan...

itu dari awalnya aja udah beda cara untuk create 3D modelnya, coba klik di "SimpleCubes_Away3D" dan tekan tombol F4.

riko saja mengatakan...

saya gak jadi pake multi markerny mas.... jadi pake satu2 aj, biar gak pusing hahahhaha...

oh iya mas, kalo kita sdh selesai buat nih... kt mau buat fileny jadi exe gmn ya?? masalahanya kalau kita pindahkan folderny dari partisi/komputer lain file .swf nya gak bisa dibuka langsung, harus dijalankan dari flash develop dl..... jadi ssh de... hahhahaha.......

Fathah mengatakan...

double click file swfnya di luar FlashDevelop (otomatis akan dibuka oleh Flash Player), kemudian pakai menu "File >>> Create Projector..."

alfin mengatakan...

mas mau nanya lagi :)
texture saya kok ngk kluarny ya mas apdahal material idny sudah saya buat

model.materialLibrary.getMaterial("gedung3").material ;
model.materialLibrary.getMaterial("gedung1").material ;
model.materialLibrary.getMaterial("orange").material ;
model.materialLibrary.getMaterial("Material").material ;
model.materialLibrary.getMaterial("lempengbawah").material ;
model.materialLibrary.getMaterial("tanah").material ;
model.materialLibrary.getMaterial("cor").material ;
model.materialLibrary.getMaterial("pohon1").material ;
model.materialLibrary.getMaterial("jalan").material ;
model.materialLibrary.getMaterial("gedung2").material ;
model.materialLibrary.getMaterial("gedung4").material ;
malah kluar error seperti ini mas [Fault] exception, information=TypeError: Error #1009: Cannot access a property or method of a null object reference.

itu gmn ya mas ???

mohon pencerahannya
trima kasih sebelumny :)

riko saja mengatakan...
Komentar ini telah dihapus oleh pengarang.
riko saja mengatakan...

@alfin :
- coba cek declare texture atau objek .dae ny benar atau salah...
- bener t id materialny? yang ad d dae lho...... yang kayak gini kah? nah ambil yang material idny (_1_-_Default-material)...... kalo bener biasany muncul t.....
- oh ia, exportny gunakan yang open collada dae, jgn yang bawaan 3ds max...
- ada animasi kah?

alfin mengatakan...
Komentar ini telah dihapus oleh pengarang.
alfin mengatakan...

@rico:ud dicoba jg mas yg itu
model.materialLibrary.getMaterial("gedung3-material").material ;
tp ttp ngk kluar mas textureny :(

saya menggunakan blander mas ...

gmn ya mas ?

Fathah mengatakan...
Komentar ini telah dihapus oleh pengarang.
Fathah mengatakan...

wah pake blender yah, mungkin bisa lihat2 tutorial ini aja, soalnya saya biasanya pake 3dsMax :)

achmad ridwan mengatakan...

cara menambahkan modelnya lagi gimna?
maksud dari default di syntak ini apa ya?
this.modelAnimator1 = model1.animationLibrary.getAnimation("default").animator as BonesAnimator;
apa

Fathah mengatakan...

cara menambahkan model 3D lainnya:

#1 embed 3D model seperti pada baris 81-82

#2 embed teksturnya seperti pada baris 71-72, 74-75, 77-78

#3 edit flarConfig.xml dan tambahkan 1 marker lagi

#4 parsing 3D modelnya seperti pada baris 130-143, 146-159, 162-175

#5 modifikasi fungsi onMarkerAdded, onMarkerUpdated, onMarkerRemoved, onEnterFrame, markerAdded, markerRemoved

Fathah mengatakan...

tentang getAnimation("default") saya juga kurang paham, mungkin "default" ini hanya dapat diganti dengan nama lain jika 3D model yang dibacanya berasal dari MD2 atau MD5, karena setau saya di kedua format itu tiap rentang animasi (frame sekian hingga frame sekian) dapat diberi nama masing-masing, dan dimainkan pada bagian itu saja.

pada collada sepertinya harus "default" dan otomatis memainkan seluruh frame pada file DAE tersebut. CMIIW

achmad ridwan mengatakan...

syukron mas. SANGAT JELAS SEKALI! dan mudah diikuti.
jazakallahu khairan katsira

Pipin Ramadhani mengatakan...

Salam Mas Fathah..

Saya perlu pencerahan, jadi Multiple Marker menggunakan FLARToolkit + Papervision kan saya sudah berhasil tu, alhamdulillah 27 marker jalan semua.
Nah, kebetulan saya ingin buat object yang keluar tu bukan 3D tapi video, mungkin .mp4 atau .flv punya di multiple marker tu. Saya bingung, apa bisa menggunakan alur code yang saya pakai di awal?
trus, swc file nya cuma 1 saja ya?

Mudah"an Mas boleh bantu :D
Terima kasih :)

Fathah mengatakan...

Bisa, cukup ganti 3D model yang kemarin dengan sebuah plane, kemudian videonya dipasang sebagai tekstur :)

Pipin Ramadhani mengatakan...

hehehe terima kasih mas fathah, tapi boleh dibimbing sedikit ga mas, saya masih kurang paham bagaimana saya bisa combine itu. nah bagaimana caranya export ke flash builder itu mas? hehehe maap masih amatir :D

Fathah mengatakan...

dicoba aja dulu yg di tutorial tsb, lalu share file projectnya di sini kalau ada masalah, memang gak gampang kok dulu juga pas pertama kali saya pake cara ini.. :)

Fathah mengatakan...

Haha :)) ternyata link yang saya kasih tadi itu untuk Papervision3D, bukan Away3D...

Nanti cari lagi deh yang untuk Away3D. padahal cara Papervision3D yang di tutorial tadi lebih mudah mestinya daripada Away3D...

Young Meijer mengatakan...

Hallo mas...
saya sudah liad source codenya..
mau tanya niey.. saya coba download 3D dae yg di googlesketchup. mau saya ganti marionya.
itu di file 3dnya khan ngga da texturenya mas.
tpi di file daenya ada material idnya..
itu gmn ditulis di codenya ya mas.. sedangkan di codenya.. pemanggilan material disertai texturenya..

mohon bantuannya mas...

Fathah mengatakan...

material id tersebut mungkin memang tidak butuh tekstur, hanya warna dasar. jadinya gak perlu dituliskan di scriptnya. coba aja load 3D modelnya tanpa ngoprek2 material id dan tekstur, lihat tampilannya apa udah bener... :)

Young Meijer mengatakan...

Ow iyaa mas bisa..
trims mas fathah.

trus mau tanya mas.. klu index 0 is out of range 0 tu artinya apa ya mas ?
sama kalau file 3dnya kira" 10 MB lebih.. sistemnya ngga kuat mbaca ya mas.. jadi tulisannya. Error #1502: A script has executed for longer than the default timeout period of 15 seconds.

mohon bantuannya untuk ini mas..

Fathah mengatakan...

Wah saya belum pernah kena masalah "index 0 is out of range 0" tuh. Munculnya error tersebut pas kondisi apa?

Ukuran file 3D paling besar yang saya gunakan 3MB (rata-rata 1MB), karena total ada 20an model 3D yang diload sekaligus dalam 1 aplikasi, kasian usernya nanti kelamaan pas nunggu loadingnya~ :D

Young Meijer mengatakan...

Nah itu mas, saya juga bingung. waktu ngisi material id sama texturenya.. kluarnya gitu.. ngga tau kesalahan di 3Dnya atau apanya...

brati 3Mb keatas ngga bsa ya mas.
kalau buat ngecilin file 3Dnya gmn mas?
soalnya temen saya yg buat 3Dnya..

Fathah mengatakan...

Mungkin bisa, tapi lemot! :D
Oiya, untuk ngecilin file 3D modelnya itu udah bagiannya 3D modeller, bukan programmer, soalnya gak mudah. Jumlah poligon dari si 3D modelnya harus dikurangi.

Young Meijer mengatakan...

Hmm..gitu ya mas fathah.
makasih infonya mas.

klu mau tanya" saya posting lagi disni ya mas..^^

thanks a lot..

Fathah mengatakan...

silakan, ditunggu... :)

New Blog 2009 mengatakan...

Terimakasih tutorialnya mas fathah :)
sya mau tnya ?
sya coba bkin animasi model 3d bergerak memutar, tp kok gk bsa y

baris animasi ini apa mksudtnya mas,.

this.modelAnimator1 = model1.animationLibrary.getAnimation("default").animator as BonesAnimator;

Fathah mengatakan...

gak bisanya seperti apa? tampil tapi gak memutar? sama sekali gak tampil? gak ada tekstur? coba lebih detil :)


this.modelAnimator1 = model1.animationLibrary.getAnimation("default").animator as BonesAnimator;

baris tersebut gunanya untuk menjalankan animasi yang menggunakan bone dari si 3D model (biasanya animasi yang berupa gerakan orang atau hewan)

ika mengatakan...

pusing sy mas liat komentar bgitu bxk :D. mnax mas' AR ke web ap aj yg hrus dpersiapkan???

mita sari mengatakan...
Komentar ini telah dihapus oleh pengarang.
mita sari mengatakan...

mas, aku coba pake collada dari archieve3d.net, ada beberapa yang menggunakan texture dasar warna(bukan gambar). sudah saya embed tapi ko kenapa malah jadi jaring-jaring gitu ya texturenya.

Fathah mengatakan...

@Ika: bisa pake Flash atau D'fusion. Untuk yang Flash bisa menggunakan AR engine FLARToolKit atau IN2AR dengan 3D engine Papervision3D/Away3D/Alternativa3D/Flare3D/dsb.

@Mita sari: wah saya kurang tau, biasanya sih teksturnya jadi jaring-jaring kalo file tekstur tidak ditemukan. Yakin collada tsb tidak butuh file gambar sbg teksturnya? Coba dibuka pake notepad dan cek ada path ke suatu file gambar ngga.

diwan mengatakan...

Mas, FlarConfignya bisa di Embed gak? bagaimana caranya?

Fathah mengatakan...

@Diwan: saya belum pernah berhasil, tapi harusnya bisa meski agak ribet.

diwan mengatakan...

iya, karena kalo kita buat online program AR nya memang bisa di gunakan oleh siapa saja namun bila objeknya banyak malah agak berat. tapi kalo dibuat offline, programnya agak ribet karena harus selalu disertakan flarconfignya. saya coba dibuat .exe malah lebih ribet, flarconfignya harus ada di "C:DocumentsandSettings/achmadridwan/resources/flar/flarConfig.xml"

niatnya mau bikin yang user friendly.

Fathah mengatakan...
Komentar ini telah dihapus oleh pengarang.
Fathah mengatakan...

owh ternyata untuk sekedar menyederhanakan proses di usernya. :) kalo gitu dicompile jadi AIR aja, semua aset di folder bin bakal otomatis dimasukkan ke package.

tadinya saya kira ingin diembed jadi 1 SWF untuk alasan keamanan biar aset tidak dapat dengan mudah diakses oleh user.

diwan mengatakan...
Komentar ini telah dihapus oleh pengarang.
diwan mengatakan...

oh ada ya cara seperti itu, boleh kasih petunjuk gimana caranya?

Fathah mengatakan...

Masukkan semua aset ke folder "bin" agar ketika kompilasi ke AIR aset-aset tersebut otomatis terbawa. Jangan lupa untuk mengubah semua path pada script yang mengarah ke path lama si aset, menjadi ke path baru di folder bin.

ika mengatakan...

mas fathah, punya tutor AR ke web g, tlong donk dasar2nya???? cz q mw ambil jdul TA ttg yg d web. plizzzz

diwan mengatakan...

@IKA : wah sepertinya TA mba sama kayak Skripsi saya sekarang nih.

AR ke WEB, bukankan hasil dari tutorial ini bisa dimasukan ke WEB juga, karena bentuknya file *.swf yang di kategorikan sebagai Rich Internet Application (RIA). saya sudah coba dan berhasil di upload ke web. namun disertakan dengan beberapa foldernya seperti folder bin,resources, dan src. (bener gak Mas Fathah?)

saya mau tanya, untuk membuat dari awal program ini apa aja yang dipersiapkan? apakah cuma library FLARToolkit v1.1.0 dan away3D? away3Dnya versi berapa?

terima kasih.

ika mengatakan...

@diwan : o y' bs berbagi donk hehe.. tp aq g tau seting ke web gmn, bis seting Flar + papervision3d, trus ke webnya gmn dr Flashnya???

Fathah mengatakan...

@Ika: tuh udah dijawab oleh Diwan :)

@Diwan: iya, butuh FLARManager 1.1.0 dengan FLARToolKit versi bawaannya dan Away3D 3.6 (juga bawaan dari FLARManager)

ika mengatakan...

bingung mas pnjelasan klian berdua :(
hbis stingannya smua bres, trus k webnya gmn awalnya mas?????

Fathah mengatakan...

tinggal upload files yang ada di folder "bin" dan "resources"

diwan mengatakan...
Komentar ini telah dihapus oleh pengarang.
kiky mengatakan...

kl dgabungin dgn php gmn mas??? kyak web2 AR yg udah ada.

Fathah mengatakan...

ada contoh linknya?

kiky mengatakan...

kyak gini mas http://takethewheel.nissan.com.au/

Fathah mengatakan...

PHP-nya di sebelah mana? Gini aja deh, kalo AR di web menggunakan Flash penanganannya anggap aja mirip dengan gambar dan aset-aset media lainnya, karena menurut saya di web tersebut AR-nya tidak ada interaksi tertentu yang membutuhkan PHP.

kiky mengatakan...

oo...iy pham mas, bbrti pke template kyak link di atas itu gmn mas????

Fathah mengatakan...

Template apa maksudnya? Diusahakan pertanyaannya fokus ke seputar AR yah~ :)

Kalo web development secara umum silakan dicari dulu referensinya.

kiky mengatakan...

heheh...maksudq mas, tampilannya bgus kyak webx nissan gt mas???

ika mengatakan...

mas fathah klo pke Flash Develop dg Flar gimana???

ika mengatakan...

mas?? pke control keyboard gimana kl d Flartoolkit???

Fathah mengatakan...

"heheh...maksudq mas, tampilannya bgus kyak webx nissan gt mas???"

Kalo pengen tampilannya bagus yha mesti bisa desain donk~ ;)

"mas fathah klo pke Flash Develop dg Flar gimana???"

Sudah coba jalanin file project yang ada di blog ini belum?? Itu kan sudah untuk FlashDevelop, cukup install FlashDevelop, dobel klik file projectnya, build, jalankan SWF-nya.

"mas?? pke control keyboard gimana kl d Flartoolkit???"

Coba dibedakan antara FLARToolKit (Flash AR engine), Away3D (Flash 3D engine), dan ActionScript (Flash programming umum). Untuk dapat mengontrol dengan keyboard coba dipelajari lebih lanjut tentang event handler di AS3 dan parameter-parameter milik ObjectContainer di Away3D.

ika mengatakan...

sy dh coba running tapi,dusruh minta SDK flex mas...sdk flex brp???

diwan mengatakan...
Komentar ini telah dihapus oleh pengarang.
bigfat mengatakan...

mas,saya udah download file project nya. saya mau ganti object 3D nya dengan gambar lain, gmn ya mas cara nya? coding yg harus di rubah apa?

ika mengatakan...

mas fatah... klo seting animasinya gmn dr 3dmax ke flar?????

diwan mengatakan...

@bigfat: untuk mengganti objek 3dnya bisa diliat dibagian
[Embed(source="../../resources/assets/mario_testrun.dae",mimeType="application/octet-stream")]
private var MarioDae:Class;

kalo kita merujuk ke folder assets akan ditemukan file mario_tesrun.dae nah kita cukup ganti file 3dnya dengan yang kita ingin tentunya dalam contoh ini berbentuk collada file (*.dae) jangan lupa di embed juga texturenya

kalo mau tambah model 3dnya, lebih dari 1 bisa liat di komentar mas fathah kepada achmad ridwan mengenai cara menambahkan model 3d.
alurnya mudah diikuti

(bener gak mas Fathah, (^_^)

@ika: setahu saya untuk bermain animasi kita cukup lakukan setting di 3ds Max nya aja.
(itu cuma sok taunya saya aja sih)

@bagi temen2 yang lagi bikin TA/Skripsi tentang AR mohon share ilmunya disini ya, saya lagi mentok gak ada ide nih.

ika mengatakan...

klo smua file termasuk toolkit gtu dmasukin dalam databse gmn cranya?? trus pke dtabse ap klo ada.

diwan mengatakan...

@ika: waduh saya aja baru tau kalo toolkit bisa dimasukin ke database.
emang tujuannya biar apa?

ika mengatakan...

kyak gini mas http://takethewheel.nissan.com.au/

diwan mengatakan...

@ika, sebelumnya saya sudah lihat web AR itu. saya juga berencana membuat program skripsi saya dengan membuat AR yang disajikan secara online. kalo dilihat dari web rujukan mba ika, saya pikir biasa saja walaupun saya hanya melihat dari demonya saja. karena yang ditampilkan hanya model mobil dengan animasi cahaya lampu dan mobil yang berputar. tapi itu semua dikerjakan di file flash (.swf) yang sudah ditanamkan diwebsitenya bukan database website. jadi mba harus paham dulu antara websitenya dan file AR nya. mungkin kalo kurang jelas kita bisa share di YM. ini YM saya [email protected]

Fathah mengatakan...

wah wah liburan panjang gak cek blog tau-tau udah banyak yang komen~ :D


@Bigfat: itu sudah dijawab oleh Diwan :)

@Diwan: mantap! komplit sekali penjelasannya.

@Ika: coba dilihat-lihat lagi kira-kira di bagian mana yang menurut Ika perlu dimasukkan ke database? Soalnya menurut saya untuk AR (tidak termasuk keseluruhan website) dengan data hanya seperti pada web Nissan tersebut belum membutuhkan bantuan DB.

diwan mengatakan...

Mas mau tanya,
1. bagaimana cara menampilkan textur objek yang tidak menggunakan gambar texture. jadi texturenya warna dasar dari model itu sendiri?


2. Bagaimana cara menggunakan model .kmz, bukan collada. coding apa aja yang perlu dirubah.

Fathah mengatakan...

1. non aktifkan saja semua method yang berkaitan dengan material untuk masing-masing objek 3D, misalnya kalo di script saya pada line: 134/150/166

2. pada dasarnya KMZ itu berbasis Collada juga, cobain rename KMZ jadi ZIP lalu ekstrak, di dalamnya ada DAE

chegoz mengatakan...

mas mau nanya nih,,
dari script yang buat mas alfin,,,apa bisa 3 marker berbeda nampilin 1 objek mas?
case yang berikut kan cuma 2 marker yah.

if (!foundMarker0 && foundMarker1) {
if (modelContainer1.visible == false) {
modelContainer1.visible = true;
break;
} else {
break;
}

makasih mas...

Fathah Noor mengatakan...

Bisa, silakan modifikasi script tersebut. Dari contoh script itu harusnya sudah terbayang mana proses untuk mendeteksi marker, mana proses mengaktifkan/nonaktifkan flag foundMarker, dan mana proses untuk menampilkan serta mengontrol 3D model berdasarkan marker apa saja yang terdeteksi. :)

chegoz mengatakan...

nanya lagi mas...heheh
untuk ganti nama file *.swf bisa gag mas???

Fathah Noor mengatakan...

Maksutnya seperti apa tuh? Tujuannya untuk apa? :-/

*gimana dengan klik kanan dan rename?*

chegoz mengatakan...

gini mas..klo kita udah terlanjur ngasih nama file projectnya,,gantinya gimana yah mas...atau bikin lagi dari awal?? udah di renametapi error mas..hehe...
maaf udah lari dari jdl treatnya mas..

chegoz mengatakan...

mas..klo mau buat file *fla nya gimana yah untuk script di atas..
saya udah coba bikin file .fla nya panggil class FLARManagerExampleLauncher.as tapi koq gag runing ya??
mohon bantuannya mas Fatnah...

Kazuko Blogs mengatakan...

Mas Bro, itu source code nya cuma buat flash develop ye??

bisa ga di buka di adobe flash / adobe flash builder??

thank's b4

Kazuko Blogs mengatakan...

Mas Bro, source code nya cuma buat flashdevelop apa bisa buat yang lain??

chegoz mengatakan...

mau buat user interfacenya yah mas?

saya udah coba bikin di builder mas..
saya bikin projec baru tapi sourcepath nya saya ambil dari project ini.
tapi nemu error...wkwkwk
camera3Dnya gag kedetek.

bisa saling share kayaknya nih mas..

Fathah Noor mengatakan...
Komentar ini telah dihapus oleh pengarang.
Fathah Noor mengatakan...

@Kazuko Blogs & @chegoz:
sourcenya bisa kok dipake dengan IDE apa saja, langkahnya sudah benar dengan mengarahkan source path ke "src" dari project ini. jangan lupa pastikan semua library yang dibutuhkan (*.swc) sudah dimasukkan juga (cari tutorial masing-masing IDE untuk penggunaan library tsb).

Kazuko Blogs mengatakan...
Komentar ini telah dihapus oleh pengarang.
Kazuko Blogs mengatakan...

3D Modeler nya pake apa mas??
Saya Pake Google Sketchup pas di masukin ke program trus dicompile malah error kek diatas, tp klo pake bawan nya mas, yang mario bener

Fathah Noor mengatakan...

3dsMAX dengan eksporter OpenCOLLADA dan ColladaMax 3.05c

Kazuko Blogs mengatakan...

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at away3d.loaders::Collada/deserialize()[/Users/ericsocolofsky/Desktop/lab/flash stuff/_libraries/SWCGenerators/SWC_Away3D_3_6_0/src/away3d/loaders/Collada.as:1201]
at away3d.loaders::Collada/deserialize()
Muncul peringatan kaya diatas di konsole nya mas, kenapa ya??

chegoz mengatakan...

saya pake flash mas...

strukturnya:
*libs
*resource
*src
Satwa.fla
Satwa.as
Satwa.swf

(*=folder)

muncul error

C:\Users\User\Desktop\AR\Satwa.as, Line 204 1046: Type was not found or was not a compile-time constant: FLARMarkerEvent.
C:\Users\User\Desktop\AR\Satwa.as, Line 181 1046: Type was not found or was not a compile-time constant: FLARMarkerEvent.
C:\Users\User\Desktop\AR\Satwa.as, Line 158 1046: Type was not found or was not a compile-time constant: FLARMarkerEvent.

knp ya mas?

Fathah Noor mengatakan...

@Kazuko Blogs: coba dengan model yang simple (misal cube) tanpa animasi bisa lancar gak? udah pake eksporter yang tadi saya sebutkan?

Fathah Noor mengatakan...

@chegoz: itu karena class2nya gak ditemukan, folder src dan libs sudah diset sebagai source?

chegoz mengatakan...

Source path lib sama src udah mas...
tapi muncul error


C:\Users\User\Desktop\AR\src\com\transmote\flar\camera\FLARCamera_Away3D.as, Line 14 1017: The definition of base class Camera3D was not found.

maap mas bnyak nanya..hehe

asyhari harits mengatakan...

mas saya mau tanya klo bikin AR kayak fitting room software yang di butuhkan apa saja ?? maaf masih newbie...

Fathah Noor mengatakan...

@chegoz: ada yang kurang, dia gak menemukan class Camera3D miliknya Away3D

Fathah Noor mengatakan...

@asyhari harits: Paling gampang implementasinya pake Kinect aja. Kalo udah terbiasa dengan Flash bisa pake AIRKinect.

chegoz mengatakan...
Komentar ini telah dihapus oleh pengarang.
chegoz mengatakan...

udah jadi mas...
makasih banyak..hehe

chegoz mengatakan...

Pagi mas..
mau nanya nih untuk fungsi foundMarker yang mas kasih...
variablenya dari FLARMarker atau apa yah?
maap mas masih newbie..
saya mau coba kembangkan marker tombol.

asyhari harits mengatakan...

@ mas fathah ada nggak tuorial AIRKinect trus link download nya dmn ? aq udah cari" masih nggak ketemu ?

Fathah Noor mengatakan...

@chegoz: foundMarker itu cuma nama variabel yang kita buat sendiri :)

alur kasarnya udah pernah saya jelasin di komentar di atas, silakan dicek lagi.

Fathah Noor mengatakan...

@asyhari harits: AIRKinect bisa cek di link ini.

kalau menggunakan FlashDevelop, saya sudah buatkan file projectnya, silakan cari komentar saya di postingan ini. tapi ini masih menggunakan AIRKinect & driver Kinect for Windows yang versi lama.

chegoz mengatakan...

errornya muncul
-1120: Access of undefined property of foundMarker.

harus di kenalkan dulu di private var ya mas?
tapi sy bingung pake FLARMarker atau apa...

Fathah Noor mengatakan...

iya, Boolean aja, ini cuma flag kok... :)

chegoz mengatakan...

wah...
mksih mas..
hehe..

untuk break saya ganti return gpp mas?

muncul warning:
-1008:return value for function 'onMarkerAdd' has no type declaration.

saya tambahin script ky gini mas.

private function onMarkerAdd (markerId:int) {
switch(markerId) {

case 0: {
foundMarker = true;
}
case 1: {
foundMarker1 = true;
}
}
}

private function onEnterFrame (evt:Event) :void {
if (foundMarker && !foundMarker1) {
if (modelContainer.visible == false) {
modelContainer.visible = true;
return;
} else { return;
}
}

if (!foundMarker && foundMarker1) {
if (modelContainer1.visible == false) {
modelContainer1.visible = true;
return;
} else {
return;
}
}

if (this.activeMarker) {
this.modelContainer.transform = AwayGeomUtils.convertMatrixToAwayMatrix(this.activeMarker.transformMatrix);
}
this.view.render();
}

Edmond Ngantung mengatakan...

Alo mas, tau ndak cara mengaktifkan 2 Kinect ke 1 PC ? Boleh tau tipsnya ndak ? Saya pake Open CV 2.4.0 dan pake Linux Ubuntu 12.04

Edmond Ngantung mengatakan...

Alo mas, ada tau ttg 2 kinects untuk 1 PC ndak?

Kazuko Blogs mengatakan...

Mas, klo syntax buat zoomin & zoomout dan rotasi object 3D gmn ya??

Kazuko Blogs mengatakan...

Mas, Kalau syntax zoomin, zoomout dan rotasi objek 3D gmn ya??

Fathah Noor mengatakan...

@Edmond Ngantung: bisa pake AIRKinect 2

Fathah Noor mengatakan...

@Kazuko Blogs: bikin sebuah handler untuk menjalankan aksi ketika (misalnya) suatu tombol di keyboard ditekan. lalu ubah-ubah parameter ini, tambahkan atau kurangi.

modelContainer.scale

Kazuko Blogs mengatakan...

Oya.. mas, kalo ngurangi dan nambah kan bertahap ya mas, nah untuk nilai scala nya gmn?? oy.. di tempati nya dimana mas?? di enterFrame bukan??

Fathah Noor mengatakan...

iya, misalnya seperti ini:

if(scaleUp){
modelContainer.scale++;
}
else if (scaleDown){
modelContainer.scale--;
}

Kazuko Blogs mengatakan...

kondisi scaleUp dan scaleDown nya diambil dari mana mas?? dari marker nya tah?? trus untuk penempatan logic nya dimana?? di onEnterFrame bukan??

Dom'z mengatakan...

om fathah, semangat pagi.
sukses selalu.

mau nanya nich om, kalo bikin aplikasi multimedia enaknya pake software apa?

kalo penggabungan adobe flash cs4 AS.3 dengan flashdevelop gimana?

Fathah Noor mengatakan...

Iya, pake Flash aja.

Tutorial penggunaan FlashDevelop dikombinasikan dengan FLASH IDE (CS versi berapa pun) bisa dilihat di sini

Yosaku&Johnny mengatakan...

Assalamu'alaikum,
mas, minta pencerahan, kalau pakai collada yang punya material lebih dari 1 gimana code nya ya? (away3d)

Fathah Noor mengatakan...

WlkmWrWb, sori baru reply, soalnya di email gak ada notifikasi komentar baru, padahal biasanya ada :)

Kalo file materialnya diembed, maka mau-gak-mau mesti satu-persatu kita assign materialnya seperti pada script line 134.

Ada solusi lainnya yang pernah saya coba di Papervision3D (di Away3D belum coba cara ini): semua file material tidak perlu diembed (yang diembed file colladanya saja), cukup diletakkan terhadap file SWF di posisi relatif yang sama dengan ketika file material tersebut diletakkan terhadap file DAE-nya.

Moh. Zidki Efendi mengatakan...
Komentar ini telah dihapus oleh pengarang.
Moh. Zidki Efendi mengatakan...

Itu klo mau ganti marker pakek marker buatan sendiri gmn mas??Coding baris keberapa yang harus drubah??

Fathah Noor mengatakan...

yang harus diubah bukan script di atas, tapi file flarConfig.xml

silakan ganti patternnya

Moh. Zidki Efendi mengatakan...

Owhh pantesan. .dicari2 kok g ada .patt ny
Makasih mas. .:)

Moh. Zidki Efendi mengatakan...

Owh iya mas kketemu. . :)
Makasih mas

Andri Gusnadi mengatakan...

maaf mas fathah saya mau tanya
biasanya kan yg ditampilkan didalam AR kan objek 3D
klo video bisa gk mas?mohon petunjuknya

Andri Gusnadi mengatakan...

maaf mas fathah saya mau tanya
biasanya kan yg ditampilkan didalam AR kan objek 3D
klo video bisa gk mas?mohon petunjuknya

Fathah Noor mengatakan...

tergantung pake engine apa, biasanya sih bisa. dan untuk Flash (dengan 3D engine Papervision3D/Away3D/dsb), jawabannya: BISA :)

saya pernah bikin tapi barusan search lagi gak nemu tutorialnya. japri aja nanti saya cariin sourcenya di kompi mungkin masih ada.

Andri Gusnadi mengatakan...

ya mas,saya pake flash,gmn caranya?

Moh. Zidki Efendi mengatakan...

ini errorny knp mas?

unable to open 'C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.6\sdks\4.6.0\frameworks\libs\player\10.0\playerglobal.swc'

apa mesti pakek 10.0??punya saya tak liat 11.1

Fathah Noor mengatakan...

Justru sebaliknya, adanya 11.1 tapi di IDE salah set jadi FP 10. Coba dicek lagi :)

lagi geje mengatakan...

mas, terima kasih tutorialnnya, bermanfaat sekali. penanganan objek 3D di flashdevelop itu gimana ya? klo di unity kita memanfaatkan 3dsmax utk 3Dnya yg bisa diexport lalu diimport ke unity,.. :) mohon pencerahannya

Fathah Noor mengatakan...

memang tidak sesimple di Unity (yang berbasis visual), di FlashDevelop mesti fully scripted.

objek 3D di Flash bisa dihandle oleh 3D engine yang tersedia, misalnya: Papervision3D, Away3D, Alternativa3D, Flare3D, dsb.

masing-masing 3D engine menyediakan tools untuk export dari 3dsMax atau 3D modelling software lainnya.

artanisa pratama mengatakan...

Salam mas fathah.. sebelumnya makasih banyak buat materinya ini, berguna banget.
mau tanya ini ada masalah waktu saya coba beberapa objek dae muncul eror seperti ini :

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at examples::CobaMultiMarker/onFlarManagerInited()[C:\FLARManager_v1_1_0\src\examples\CobaMultiMarker.as:185]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at com.transmote.flar::FLARManager/onTrackerComplete()[C:\FLARManager_v1_1_0\src\com\transmote\flar\FLARManager.as:1098]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at com.transmote.flar.tracker::FLARToolkitManager/onTrackerComplete()[C:\FLARManager_v1_1_0\src\com\transmote\flar\tracker\FLARToolkitManager.as:384]
at com.transmote.flar.tracker::FLARToolkitManager/initTracker()[C:\FLARManager_v1_1_0\src\com\transmote\flar\tracker\FLARToolkitManager.as:332]
at com.transmote.flar::FLARManager/onTrackerInited()[C:\FLARManager_v1_1_0\src\com\transmote\flar\FLARManager.as:1080]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at com.transmote.flar.tracker::FLARToolkitManager/checkForInitComplete()[C:\FLARManager_v1_1_0\src\com\transmote\flar\tracker\FLARToolkitManager.as:374]
at com.transmote.flar.tracker::FLARToolkitManager/onPatternsLoaded()[C:\FLARManager_v1_1_0\src\com\transmote\flar\tracker\FLARToolkitManager.as:364]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at com.transmote.flar.pattern::FLARPatternLoader/checkForLoadCompletion()[C:\FLARManager_v1_1_0\src\com\transmote\flar\pattern\FLARPatternLoader.as:205]
at com.transmote.flar.pattern::FLARPatternLoader/onPatternLoaded()[C:\FLARManager_v1_1_0\src\com\transmote\flar\pattern\FLARPatternLoader.as:197]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()

kira2 kenapa ya ? mohon pencerahannya mas, terima kasih :)

Fathah Noor mengatakan...

errornya mengarah ke script tentang apa?

artanisa pratama mengatakan...

alhamdulillah ternyata sudah bisa mas.. cuman salah waktu ngisi material id nya

Yu Chang LI mengatakan...

hi there
I'm trying to implement your code with flarmanager 1.1, however, I got some error massage

Description Resource Path Location Type
abc bytecode decoding failed. FLARMultiMarkerDetector.as /FLARmanager-MultiMarkerMultiCollada/src/org/libspark/flartoolkit/detector Unknown Flex Problem
abc bytecode decoding failed. NyARObjectStack.as /FLARmanager-MultiMarkerMultiCollada/src/jp/nyatla/nyartoolkit/as3/core/types/stack Unknown Flex Problem
unable to resolve '../../resources/assets/mario_testrun.dae' for transcoding MultiMarkerMultiCollada.as /FLARManager/src line 82 Flex Problem
unable to resolve '../../resources/assets/mario_tex_blue-green.jpg' for transcoding MultiMarkerMultiCollada.as /FLARManager/src line 78 Flex Problem
unable to resolve '../../resources/assets/mario_tex_green-red.jpg' for transcoding MultiMarkerMultiCollada.as /FLARManager/src line 75 Flex Problem
unable to resolve '../../resources/assets/mario_tex_red-blue.jpg' for transcoding MultiMarkerMultiCollada.as /FLARManager/src line 72 Flex Problem
Unable to transcode ../../resources/assets/mario_testrun.dae. MultiMarkerMultiCollada.as /FLARManager/src line 82 Flex Problem
Unable to transcode ../../resources/assets/mario_tex_blue-green.jpg. MultiMarkerMultiCollada.as /FLARManager/src line 78 Flex Problem
Unable to transcode ../../resources/assets/mario_tex_green-red.jpg. MultiMarkerMultiCollada.as /FLARManager/src line 75 Flex Problem
Unable to transcode ../../resources/assets/mario_tex_red-blue.jpg. MultiMarkerMultiCollada.as /FLARManager/src line 72 Flex Problem

do i miss something??

Fathah Noor mengatakan...

@Yu Chang LI: did you use FlashDevelop? may be you can recheck/reembed the assets first.

Yu Chang LI mengatakan...

hi there,

Thanks for the reply, I'm use flashbuilder as a edit platform. Do you know what the error massage means??

Plarmanager works perfectly with flashbuilder. Also, could you please tell me that which folder does this file needs to be placed in the flarmanager? As I put MultiMarkerMultiCollada.as in the src, is that correct?

Moh. Zidki Efendi mengatakan...

KLo control object pakek keyboard gmn y mas??
q udah bikin event + kondisiny jg. .
hasilnya ketika keyboard di tekan object udah bisa berubah (misal : scale++),,tapi klo key dlepas object kembali k bntuk semula.gmn y agar object tidak kembali k bntuk smula?
mohon pencerahanya ^^

Fathah Noor mengatakan...

coba kopas ke sini bagian script pas scalingnya :)
biasanya cuma karena lupa bikin variabel atau salah letak.

Moh. Zidki Efendi mengatakan...

private function onMarkerUpdated (evt:FLARMarkerEvent):void{
switch(evt.marker.patternId)
{
case 0:
this.hewan.visible=true;
this.marker0 = evt.marker;
if (rotateLeft){
hewan.scale++;
}
break;


ngeletakiinya emank asal mas ^^. .

Moh. Zidki Efendi mengatakan...
Komentar ini telah dihapus oleh pengarang.
Moh. Zidki Efendi mengatakan...

private function onEnterFrame (evt:Event) :void {
if (this.activeMarker){{ this.modelContainer.transform = PVGeomUtils.convertMatrixToPVMatrix(this.activeMarker.transformMatrix);
if (rotateX){ modelContainer.scale ++;}

rianz mengatakan...

salam mas fathah,,
saya mau minta sarannya utk referensi ttg materi Augmented reality trkait dgn postingan mas,mungkin ada ebook yang bagus..?
kpingin bikin game yg brbasis AR utk TA,biasanya bikin gme 2D dgn actionscript flash+flashdevelop,,mkgn bsa di sharing k email [email protected]
trimakasih..

D4 ITB mengatakan...

selamat siang mas,saya mau tanya bikin marker pke unity,saya punya 2marker dengan 3 objek,marker pertama ada 2 objek,sedangkan marker ke dua hanya 1 objek,nah pas saat di load 2 marker jadi satu nanti marker pertama hanya akan menampilkan 1 objek,objek satunya di hiden,itu gimana ya mas,,,tapi saat marker di load sendiri sendiri objeknya akan tampil..terimakasih sebelumnya.

Fivtatianti Hendajani mengatakan...

Maaf, saya mau menanyakan, apakah dengan AR, kita bisa menvisualisasi video, animasi dengan suara?
kalau iya langkah2nya apa ya? terima kasih banyak

Fathah Noor mengatakan...

@Moh. Zidki Efendi: itu kok yang diubah scalenya hewan dan containernya yha? sebaiknya properti milik container tidak diubah-ubah secara manual karena toh dia bakal ikut matriks transformasi dari si marker.

Fathah Noor mengatakan...

@rianz: kalo untuk game AR mungkin bisa cek buku ini di link ini.
untuk yang menggunakan Flash belum ada referensi tutorial gamenya, tapi mungkin bisa dapat inspirasi dari gamenya Zugara ini, pake motion tracking.

Fathah Noor mengatakan...

@rianz: oiya ada tambahan lagi, mungkin artikel tentang pendeteksian marker ini bisa bermanfaat.

Fathah Noor mengatakan...

@D4 ITB: wah agak OOT dan jawabannya lumayan panjang. coba join ke forum ini, ini, dan itu aja yha. intinya sih kita bikin variable untuk menyimpan flag untuk masing-masing marker ketika terdeteksi atau hilang. nantinya tiap kali sebelum render kita cek kondisi flagnya untuk kemudian show/hide objek yang terkait dengan kombinasi marker yang ada.

«Terlama ‹Lebih tua   1 – 200 dari 220   Lebih baru› Terbaru»
Google+