Wikitude

Multiple Targets - Multiple 3D Objects (Phonegap, iOS)

Hello,

based on the HelloImageRecognition sample project I tried to display a 3D model whenever one of the targets in my collection is visible. Everything works well when I use only one of the images in the collection but if I try to make more than one image trackable only the first one gets recognized.

 

Here is my modified imagerecognition.js file:

var World = {
    loaded: false,

    init: function initFn() {
        this.createOverlays();
    },

    createOverlays: function createOverlaysFn() {
        // Initialize Tracker
        this.tracker = new AR.Tracker("assets/CDWTargets.wtc", {
            onLoaded: this.worldLoaded
        });
        
        
        
        this.modelD = new AR.Model("assets/Saegeblatt1.wt3",{
                                   onLoaded: this.loadingStep,
                                   scale: {
                                   x: 0.0005,
                                   y: 0.0005,
                                   z: 0.0005
                                   }
                                   });
        
        var objectD = new AR.Trackable2DObject(this.tracker, "BildD", {
                                               drawables: {
                                               cam: this.modelD
                                               }
                                               });
        
        
        
        
        
        this.modelA = new AR.Model("assets/Saegeblatt2.wt3",{
                                   onLoaded: this.loadingStep,
                                   scale: {
                                   x: 0.0005,
                                   y: 0.0005,
                                   z: 0.0005
                                   }
                                   });
        
        var objectA = new AR.Trackable2DObject(this.tracker, "BildA", {
                                               drawables: {
                                               cam: this.modelA
                                               }
                                               });
        
        
        
        
        

        this.modelG = new AR.Model("assets/Saegeblatt3.wt3",{
                                    onLoaded: this.loadingStep,
                                    scale: {
                                    x: 0.0005,
                                    y: 0.0005,
                                    z: 0.0005
                                    }
                                    });
        
        var objectG = new AR.Trackable2DObject(this.tracker, "BildG", {
            drawables: {                                               
                cam: this.modelG
            }
        });
    },

    worldLoaded: function worldLoadedFn() {
        document.body.removeChild(document.getElementById('loadingMessage'));
    },

    clickedClose: function clickedCloseFn() {
        document.location = 'architectsdk://actionButton?action=close';
    },

    clickedHide: function clickedHideFn() {
        document.location = 'architectsdk://hideButton?status=hide';
    }
};

World.init();

 

Any help on this one is highly appreciated.

Hi Patrick,

Did you added all three reference images to your .wtc file? Please make also sure that your target names are exactly as they are in the .wtc file.

I just made a test run with circular saw blades. The images that I used got only 1 Star so they might not be very good targets.

My suggestion is that there is something wrong with your .wtc file.

 

Best regards

Andreas 

Hi Andreas,

yes I added all three target images. The images which I used were all rated very good and I double checked the target names several times. I will give it another try once I finished the project I am currently working on. As long as I know that this should be working and the problem is somewhere in my code or my assets it's OK for the moment.
I showed the demo I made with one 3D object and one target image to my customer and he likes it a lot. He will decide within the next days if he wants to start a project using your SDK.

Regards,
Patrick.

Hi Patrick,

you can send your ARchitect World source (including all assets) to ios-sdk@wikitude.com (subject: Circular Saw Targets). I can then have a look at it and provide you more detailed feedback.

 

Best regards

Andreas 

Thanks! I will try to figure out what's wrong next week. If I can't find the problem I will send you the files.
I just received your newsletter. Do you know when a new version of the phonegap plugin is scheduled which contains the new features and the improved tracking? I would love to give it a try.

Regards,
Patrick.

Hi Philipp,

I have a similar problem. In my case, only the first two images are recognized. The last one for some reason I can't figure out is not working.

I intend to have about twenty markers by the end of my app development.

this is my code:

var World = {

loaded: false,

 

init: function initFn() {

/* Disable all sensors in "IR-only" Worlds to save performance. If the property is set to true, any geo-related components (such as GeoObjects and ActionRanges) are active. If the property is set to false, any geo-related components will not be visible on the screen, and triggers will not fire.*/

AR.context.services.sensors = false;

this.createOverlays();

},

 

createOverlays: function createOverlaysFn() {

// Initialize Tracker

var tracker = new AR.Tracker("assets/trackimage.wtc", {

onLoaded: this.worldLoaded

});

 

// Create play button

var playButtonImg = new AR.ImageResource("assets/playButton.png");

var playButton = new AR.ImageDrawable(playButtonImg, 0.3, {

enabled: false,

onClick: function playButtonClicked() {

video.play(1);

video.playing = true;

},

offsetY: -0.1

});

 

// Create video drawable

var video = new AR.VideoDrawable("assets/video.mp4", 0.65, {

offsetY: playButton.offsetY,

onLoaded: function videoLoaded() {

playButton.enabled = true;

},

onPlaybackStarted: function videoPlaying() {

playButton.enabled = false;

video.enabled = true;

},

onFinishedPlaying: function videoFinished() {

playButton.enabled = true;

video.playing = false;

video.enabled = false;

},

onClick: function videoClicked() {

if (video.playing) {

video.pause();

video.playing = false;

} else {

video.resume();

video.playing = true;

}

}

});

 

var pageOne = new AR.Trackable2DObject(tracker, "imageone", {

drawables: {

cam:

},

onEnterFieldOfVision: function onEnterFieldOfViewFn() {

if (video.playing) {

video.resume();

}

},

onExitFieldOfVision: function onExitFieldOfView() {

if (video.playing) {

video.pause();

}

}

});

 

 

 

var playButtonImg2 = new AR.ImageResource("assets/playButton.png");

var playButton2 = new AR.ImageDrawable(playButtonImg2, 0.3, {

enabled: false,

onClick: function playButtonClicked2() {

video2.play(1);

video2.playing = true;

},

offsetY: -0.1

});

 

// Create video drawable

var video2 = new AR.VideoDrawable("assets/video.mp4", 0.65, {

offsetY: playButton2.offsetY,

onLoaded: function videoLoaded2() {

playButton2.enabled = true;

},

onPlaybackStarted: function videoPlaying2() {

playButton2.enabled = false;

video2.enabled = true;

},

onFinishedPlaying: function videoFinished2() {

playButton2.enabled = true;

video2.playing = false;

video2.enabled = false;

},

onClick: function videoClicked2() {

if (video2.playing) {

video2.pause();

video2.playing = false;

} else {

video2.resume();

video2.playing = true;

}

}

});

 

var pageThree = new AR.Trackable2DObject(tracker, "poster", {

drawables: {

cam:

},

onEnterFieldOfVision: function onEnterFieldOfViewFn2() {

if (video2.playing) {

video2.resume();

}

},

onExitFieldOfVision: function onExitFieldOfView2() {

if (video2.playing) {

video2.pause();

}

}

});

 

 

 

 

var playButtonImg1 = new AR.ImageResource("assets/playButton.png");

var playButton1 = new AR.ImageDrawable(playButtonImg1, 0.3, {

enabled: false,

onClick: function playButtonClicked1() {

video1.play(1);

video1.playing = true;

},

offsetY: -0.1

});

 

// Create video drawable

var video1 = new AR.VideoDrawable("assets/vid1.mp4", 0.65, {

offsetY: playButton1.offsetY,

onLoaded: function videoLoaded1() {

playButton1.enabled = true;

},

onPlaybackStarted: function videoPlaying1() {

playButton1.enabled = false;

video1.enabled = true;

},

onFinishedPlaying: function videoFinished1() {

playButton1.enabled = true;

video1.playing = false;

video1.enabled = false;

},

onClick: function videoClicked1() {

if (video1.playing) {

video1.pause();

video1.playing = false;

} else {

video1.resume();

video1.playing = true;

}

}

});

 

var pageTwo = new AR.Trackable2DObject(tracker, "try", {

drawables: {

cam:

},

onEnterFieldOfVision: function onEnterFieldOfViewFn1() {

if (video1.playing) {

video1.resume();

}

},

onExitFieldOfVision: function onExitFieldOfView1() {

if (video1.playing) {

video1.pause();

}

}

});

 

 

 

 

 

},

 

worldLoaded: function worldLoadedFn() {

document.body.removeChild(document.getElementById('loadingMessage'));

//var cssDivLeft = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";

//var cssDivRight = " style='display: table-cell;vertical-align: middle; text-align: left;'";

//document.getElementById('loadingMessage').innerHTML =

//"<div" + cssDivLeft + ">Scan Red Bulletin Target:</div>" +

//"<div" + cssDivRight + "><img src='assets/surfer.png'></img></div>";

}

};

 

World.init();

 

Would really appreciate your help, tnx

Hi,

Did you create a new .wtc file which includes the 'try' target that you have referenced in your js file? Can you verify that the target is not recognized if you create a new .wtc file which contains only this specifiy target image? Have you read the section about image targets in the SDK documentation to verify that the image is trackable?

 

best regards

Andreas

All the images i used are included in the .wtc file, the image is trackable and works well individually. I have read the documentation and am familiar with it..