My First Multi Marker Multi Collada (PV3D)


Saya sedang mencoba belajar tentang AR. Library yang saya coba pertama kali adalah ARToolKit. Tutorial ARToolKit yang cukup lengkap untuk pemula dapat ditemukan di sini. Tetapi melihat keterbatasan dari ARToolKit dan pengembangannya, akhirnya saya mencari-cari lib lain yang dapat saya pelajari. Akhirnya saya menemukan FLARToolKit.
Selanjutnya saya mulai mempelajari FLARManager, framework yang di dalamnya telah ada lib untuk tracking sekaligus ada 3D framework. FLARManager mendukung FLARToolKit sebagai tracking lib dan beberapa 3D framework untuk rendering model 3D yang ingin saya tampilkan.
Alat yang saya gunakan adalah:

  1. FlashDevelop sebagai IDE
  2. Adobe Flex sebagai compiler
  3. FLARManager sebagai framework untuk AR

Sesudah instalasi FlashDevelop, anda perlu meletakkan Adobe Flex di dalam direktori Tools yang ada di direktori tempat FlashDevelop terinstall (beri nama folder flexsdk). FLARManager yang saya gunakan saya dapatkan di sini. FLARManager tersebut telah mendukung multi marker dengan multi collada. Pemilik blog menggunakan Away3D.

Pada awalnya saya menggunakan source code yang saya dapatkan mentah-mentah, namun hasilnya tidak memuaskan. Warna dasar dari collada yang saya gunakan tidak dapat ditampilkan dengan baik. Solusinya harus membuat tekstur material untuk ditempelkan di collada.

Teman saya menganjurkan untuk menggunakan method load() yang dimiliki class DAE. Tetapi masalahnya, class DAE adalah milik Papervision (PV3D), sementara source code menggunakan Away3D. Setelah berpusing ria memodifikasi kode MultiMarkerMultiCollada.as yang awalnya menggunakan Away3D, untuk diubah menjadi menggunakan Papervison, akhirnya saya menyerah.

Saya mencoba solusi lain:
Di dalam folder Example dari FLARManager, ada contoh kode yang digunakan untuk papervision, yaitu FLARManagerTutorial_Collada_PV3D.as. Saya mencoba memodifikasi kode di dalamnya, yang awalnya hanya untuk 1 marker menjadi multimarker, menggunakan acuan kode di dalam MultiMarkerMultiCollada.as, dan berhasil… Akhirnya saya bisa menampilkan multi collada menggunakan multi marker dengan PaperVision.
Kode hasil modifikasi saya mirip dengan yang ada di lOOney dOOdle. Karena MultiMarkerMultiCollada.as yang saya jadikan acuan adalah hasil modifikasi dari kode lOOney dOOdle.

Kuncinya ada di fungsi-fungsi berikut:

        private function onMarkerAdded (evt:FLARMarkerEvent) :void
       {
            trace(“[“+evt.marker.patternId+”] added”);
           
            //this.modelContainer.visible = true;
            //this.activeMarker = evt.marker;
           
            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”);
            //this.modelContainer.visible = true;
            //this.activeMarker = evt.marker;
           
            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”);
            //this.modelContainer.visible = false;
            //this.activeMarker = null;
           
            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 = PVGeomUtils.convertMatrixToPVMatrix(this.activeMarker.transformMatrix);
            }
           
            if (this.activeMarker1) {
                this.modelContainer1.transform = PVGeomUtils.convertMatrixToPVMatrix(this.activeMarker1.transformMatrix);
            }
           
            if (this.activeMarker2) {
                this.modelContainer2.transform = PVGeomUtils.convertMatrixToPVMatrix(this.activeMarker2.transformMatrix);
            }
           
            // update the Papervision3D view.
            this.renderEngine.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;
                    }
                }
            }
        }

File collada yang saya gunakan sebagai contoh saya dapatkan dari internet, untuk objek mario saya masih menggunakan contoh collada dari sini

Thanks to: Phat Cool atas sharing ilmunya

4 Comments

  1. New Blog 2009 January 22, 2012 11:42 am  Reply

    Tlong diperjelas dong tutorialnya,. step-Bystepkalo bisa dikasih skrensot jg,.masih bingung,. maklum newbie

  2. Lafran_pane April 26, 2012 5:25 am  Reply

    om, itu load DAE nya gmn ya?? kok gw unknown asset type terus ya??? pake kek gini ni load modelnya[Embed(source="../resources/assets/assets/models/earthlg.dae", mimeType="application/octet-stream")]private var earth:Class;var model:DAE = new DAE();model.load(earth);kok g bisa di load ya model nya?? itu knp?? -___-

  3. chegoz June 8, 2012 4:51 pm  Reply

    kalo pke PV3D colladanya lebih jelas ya?

  4. andria fox July 17, 2012 12:38 am  Reply

    Mas, Bisa diupload file lengkapnya . .yang udah diGanti dari Away3D jadi Papervision3D . .Terima kasih . .

Leave a comment

Your email address will not be published. Required fields are marked *