Start a new topic
Solved

Augmenting simple images on multiple target images instead of 3D models (.wt3)

 Hi,

I would like to augment simple png images on multiple target images. The sample "MultipleTargets" works with 3D models of dinosors. How can I use simple images instead 3D models? 

I have changed the existing sample (multiplesimultaneoustargets.js) bellow and by creating AR.ImageDrawable()s to augment on different targets, but it didn't work. Can someone please help me out. 

var World = {
    loaded: false,
    dinoSettings: {
        diplodocus: {scale: 0.4},
        spinosaurus: {scale: 0.004},
        triceratops: {scale: 0.4},
        tyrannosaurus: {scale: 0.4}
    },

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

    createOverlays: function () {
          
        var tracker = new AR.ImageTracker(targetCollectionResource, {
            maximumNumberOfConcurrentlyTrackableTargets: 5, 
             Disables extended range recognition.
              extendedRangeRecognition: AR.CONST.IMAGE_RECOGNITION_RANGE_EXTENSION.OFF,
            onTargetsLoaded: this.worldLoaded,
            onError: function (errorMessage) {
                alert(errorMessage);
            }
        });

        var one = new AR.ImageResource("assets/diplodocus.png");
        var two = new AR.ImageResource("assets/spinosaurus.png");
        var three = new AR.ImageResource("assets/triceratops.png");
        var four = new AR.ImageResource("assets/tyrannosaurus.png");
        
        new AR.ImageTrackable(tracker, "*", {
            onImageRecognized: function (target) {
                var overlays = new AR.ImageDrawable("assets/" + target.name+".png" , {
                     scale: World.dinoSettings[target.name].scale,
                     translate: {
                       x: -0.15
                     }
                });

                this.addImageTargetCamDrawables(target, overlays);

                World.removeLoadingBar();
            },
            onError: function (errorMessage) {
                alert(errorMessage);
            }
        });
    },

    removeLoadingBar: function () {
        if (!World.loaded) {
            var e = document.getElementById('loadingMessage');
            e.parentElement.removeChild(e);
            World.loaded = true;
        }
    },

    worldLoaded: function worldLoadedFn() {
        var cssDivInstructions = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";
        var cssDivTyrannosaurus = " style='display: table-cell;vertical-align: middle; text-align: left; padding-right: 15px; width: 38px'";
        var cssDivTriceratops = " style='display: table-cell;vertical-align: middle; text-align: left; padding-right: 15px; width: 38px'";
        var cssDivSpinosaurus = " style='display: table-cell;vertical-align: middle; text-align: left; padding-right: 15px; width: 38px'";
        var cssDivDiplodocus = " style='display: table-cell;vertical-align: middle; text-align: left; padding-right: 15px;'";

        document.getElementById('loadingMessage').innerHTML =
            "<div" + cssDivInstructions + ">Scan one of the dinosaur targets:</div>" +
            "<div" + cssDivTyrannosaurus + "><img src='assets/tyrannosaurus.png'></div>" +
            "<div" + cssDivTriceratops + "><img src='assets/triceratops.png'></div>" +
            "<div" + cssDivSpinosaurus + "><img src='assets/spinosaurus.png'></div>" +
            "<div" + cssDivDiplodocus + "><img src='assets/diplodocus.png'></div>";
    }
};

World.init();

 Also, I have tried to test the sample "01_ImageTracking_2_DifferentTargets". It recognises only one image at a time. I would like to recognise multiple targets and augment them with the related content. Your suggestions are appreciated. Thanks


Hello Eld,


Unfortunately we cannot go through your whole code but I can tell you that there are some things missing. For example, I do not see anywhere in your code loading your .wtc file. So what I would strongly suggest, is first have a very thorough look at our documentation in order to understand how our SDK works. Then, you should follow exactly the sample we provide on Multiple Targets and replace the AR.Model with the AR.ImageTrackable. Again, you will find all relevant information in our documentation.


Thanks

Eva

Thanks, I got it.
Login or Signup to post a comment