Viro: Is it possible to do multiple image marker detection in ViroReact?

[linuissac]

Hello i'm doing image marker in ViroReact. Is there any way to do multiple image marker recognition in a single session? I need to recognize multiple markers and add multiple models according to the detection. If there is any sample code or example it would be a great help.
Thanks and regards

[achuvm]

Hi @linuissac,

Sure, just add additional ViroARImageMarker components to your scene:
https://docs.viromedia.com/docs/viroarimagemarker

Then add your model components as children of the ViroARImageMarker components. When the system "finds" the target for that ViroARImageMarker, you'll get an onAnchorFound callback on that particular ViroARImageMarker and the children components will be unhidden and rendered relative to the image.

Here's a sample code with 1 ViroARImageMarker component, but you can add many more: https://github.com/viromedia/viro/blob/master/js/ARCarDemo/ARCarDemo.js

[linuissac]

What do i do if i'm developing this as a client side app and i want to add new marker and new augmentation
1 .)Do I want to rebuild the app each time on client requirement?
2 .)Do they need to update the app on every change ?
If suppose i'm adding 100 ImageMarker and deployed the app and if client need to add 10more markers ,every time i need to write the code ?
Or can I make the changes dynamically . Is there anyway to do that?

[dthian]

Hey @linuissac, you should be able to make changes dynamically to your scene. For example here is some pseudo code that iterates through an array of markers to then render in a scene, dynamically, and you can then expand on the number of markers in that array:

render: function() {
    return (
      <ViroScene ...> 
     {this._loadAllMarkers()}
     </ViroScene>
     );
}, 

_loadAllMarkers(){
   var views = [];
   for (i = 0; i < markersSize; i ++){
      // Iterate through your marker data here to 
      views.push((
         <ViroARImageMarker target={this.state.markers[i]} ...../>
      ));
   }
   return views;
}

[faisal3413]

Hi @dthian @linuissac

How to create multiple targets e.g through loop or API response. I tried through multiple ways but did not succeed.

here pseudo code of what I tried.

apiModelsData.map((item) => {
    let target = {};
    ViroARTrackingTargets.createTargets({
    target : {
         source : { uri: item.ImageUrl } ,
         orientation : "Up", 
         physicalWidth : 5
        }})
    targetImages.push(target);
 });

for (i = 0; i < apiModelsData.length; i++) {
        let target_[i] = {
        source : { uri: apiModelsData[i].ImageUrl } ,
        orientation : "Up", 
        physicalWidth : 5
   }
     ViroARTrackingTargets.createTargets({
     target_[i] 
 })

}

[VikAdvani]

Hi @faisal3413,
Try something like this(the below works for dynamic materials and should work for dynamic image targets):

export function createImageTarget(name, source_uri) {
  let targetName = name;
  let targets= {};
  targets[targetName] = {
    source: source_uri,
    orientation: "Up",
   physicalWidth: 5,
  }

  ViroARTrackingTargets.createTargets(targets);
}

To use do something like:

const mySource ={ uri: mydynamictarget };
const myName = 'dyanamicName';
this.createImageTarget(myName,mySource)

[faisal3413]

Hi @vadvani,

Thank you very much for your great help. It worked like a charm.

[yashank09]

Hello,
I tried using @vadvani's method but I get an error saying Attempt to invoke interface method boolean on a null object reference. The resulting targets{} seems to be exactly what createTargets expects so im not sure what's going on. Any ideas ?

UPDATE
This error goes once I use the require method on my source. Is there anyway to not force this method or any suggestions on how to add this to a json object ?

[skizzo]

Hi, were you able to track multiple markers? Of yes, does it work with more than 50 markers you think, or is the performance suffer too much? Thanks for some insights 😊