Wikitude

Multiple Image Recognition - the best way

Hi all,

I've read the different topics about Multiple Image Recognition, but did not find the solution.

If you have a lot of images you want to recognize and add in RA big image size, you should not use an example like this, because of memory use :

========================================================================

// Initialize Tracker

// Important: If you replace the tracker file with your own, make sure to change the target name accordingly.

// Use a specific target name to match only a certain target or use a wildcard to match any or a certain group of targets.

this.tracker = new AR.Tracker("assets/magazine.wtc", { onLoaded: this.worldLoaded });

// Create overlay for page one var imgOne = new AR.ImageResource("assets/imageOne.png");

var overlayOne = new AR.ImageDrawable(imgOne, 1, { offsetX: -0.15, offsetY: 0 });

var pageOne = new AR.Trackable2DObject(this.tracker, "*", { drawables: { cam: overlayOne } });

// Create overlay for page two var imgTwo = new AR.ImageResource("assets/imageTwo.png");

var overlayTwo = new AR.ImageDrawable(imgTwo, 0.5, { offsetX: 0.12, offsetY: -0.01 });

var pageTwo = new AR.Trackable2DObject(this.tracker, "pageTwo", { drawables: { cam: overlayTwo } });

========================================================================

 

So what is the best way ?

It is written in a some topics to use wildcards :

I tried this code but it s not working :

 

========================================================================

 

        this.tracker = new AR.ClientTracker("assets/tracker.wtc", {

            onLoaded: this.worldLoaded

        });

 

        var img = ;

        var overlay = ;

        var page = ;

 

        // loop through Synapses-information and create an AR.GeoObject (=Marker) per POI

        for (var i = 0; i < synData.length; i++) {

            var singleData = {

                "id": synData.id,

                "Nom": synData.Nom,

            };

 

            page = new AR.Trackable2DObject(this.tracker, "*", {

                onEnterFieldOfVision: function onEnterFieldOfVisionFn(targetName) {

 

                      this.drawables.removeCamDrawable();

                        if (targetName.substring(0, 1) == "A") {img = new AR.ImageResource("assets/image1.jpg"); }

                        if (targetName.substring(0, 1) == "G") {img = new AR.ImageResource("assets/image2.png"); }

                        if (targetName.substring(0, 1) == "T") {img = new AR.ImageResource("assets/image3.png"); }

 

                      this.drawables.addCamDrawable (new AR.ImageDrawable(img, 0.7, { offsetX: 0, offsetY: 0}));

                 },

 

                 onExitFieldOfVision: function onExitFieldOfVision(targetName) {

                      drawables.removeCamDrawable();

                 },

 

                drawables: {

                    cam:

                         

               },

            });

        }

========================================================================

 

What s wrong with my code ?

 

 

The solution is found but it seems to have a memory leak : 

 

=====================================

var World = {

loaded: false,

 

init: function initFn() {

this.createOverlays(myJsonDataSyn);

},

 

createOverlays: function createOverlaysFn(synData) {

        this.tracker = new AR.ClientTracker("assets/tracker.wtc", {

            onLoaded: this.worldLoaded

        });

 

            var img = new AR.ImageResource("assets/picto.png");

            var camNew = new Array(new AR.ImageDrawable(img, 1, { offsetX: 0, offsetY: 0 }));

 

            var page = new AR.Trackable2DObject(this.tracker, "*", {

                onEnterFieldOfVision: function onEnterFieldOfVisionFn(targetName) {

 

this.drawables.removeCamDrawable(camNew);

img = new AR.ImageResource("assets/"+ targetName + ".png");

 

camNew.length = 0;

camNew = new Array(new AR.ImageDrawable(img, 1, { offsetX: 0, offsetY: 0 }));

 

            this.drawables.addCamDrawable(camNew);

 

                 },

 

                 onExitFieldOfVision: function onExitFieldOfVision(targetName) {

                      this.drawables.removeCamDrawable(camNew);

                 },

            });

            

},

 

worldLoaded: function worldLoadedFn() {

} 

};

 

World.init();

=====================================

But after 13 images recognition, the system cannot recognize any tracker anymore.

Is there a memory leak ?

 

 

Solution found, you have to destroy the img obj !!!!:

 

Hope this help

 

var World = {

loaded: false,

 

init: function initFn() {

this.createOverlays(myJsonDataSyn);

},

 

createOverlays: function createOverlaysFn(synData) {

        this.tracker = new AR.ClientTracker("assets/tracker.wtc", {

            onLoaded: this.worldLoaded

        });

 

            var img = new AR.ImageResource("assets/test.png");

            var camNew = new Array(new AR.ImageDrawable(img, 1, { offsetX: 0, offsetY: 0 }));

 

            var page = new AR.Trackable2DObject(this.tracker, "*", {

                onEnterFieldOfVision: function onEnterFieldOfVisionFn(targetName) {

 

this.drawables.removeCamDrawable(camNew);

// You have to destroy the img object otherwise there s a memory leak

img.destroy();

img = new AR.ImageResource("assets/"+ targetName + ".png");

camNew.length = 0;

camNew = new Array(new AR.ImageDrawable(img, 1, { offsetX: 0, offsetY: 0 }));

 

            this.drawables.addCamDrawable(camNew);

 

                 },

 

                 onExitFieldOfVision: function onExitFieldOfVision(targetName) {

                      

                      this.drawables.removeCamDrawable(camNew);

                 },

            });

            

},

 

worldLoaded: function worldLoadedFn() {

} 

};

 

World.init();