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