Understanding Unlimited Image Targets

Technical Support
1

I’ve cloned and customized the “A-Frame: Unlimited Image Targets” project and am running into a problem.

What I already know:

  1. I can autoload 5 of the image targets with “World Tracking” enabled AND 10 images can be autoloaded with “World Tracking” disabled. My test project uses 12 images.
  2. Images can’t be larger that 2048px and must be at least 480x640px. Mine are limited to 2048.
  3. All of my images are unique and have enough detail to properly work as targets. All of my images fall within the required specs for detailed, image targets.

The problem? The only images that work are the 5, autoloaded images I created when programming the app. I have used “xrweb=“disableWorldTracking: true”” to disable World Tracking, Seems to have no effect.

I’ve noticed that the cloned program focuses on scanning images in a specific order. It offers the recognition of 5, autoloaded images, but is limited to the order in which the images are scanned or programmed. I’m looking for a way to not worry about the order in which users scan the images. The order should have nothing to do with the images scanned.

Please advise,

MC

2

Check your Image Targets and try to spot if some of them are automatically downloaded. They are marked with “auto” in the top right corner.

If you’re continuously setting the new image targets with a combination of setTimeout and XR8.XrController.configure({imageTargets: imageTargets}), you should see the images constantly downloaded in Network (even from cache) when you’re debugging using Chrome.

Try cleaning the cache on the phone. Sometimes, the phone has cached old images.

1 Like
3

@Matthew_Campagna If you check the project you will find a config-target.js file which configures multiple image targets in the form of an array. This is a component that takes names of all the target images uploaded to your project as seen in the body.html. You can load sets of 10 image targets at any given time, thus creating unlimited sets of targets. The trick is to off auto loading image targets to use the config-target component.

As far your code is concerned it should be
xrweb=“disableWorldTracking: true” you have extra quotation marks. This should probably fix your issue.

1 Like
4

The image target UI will only allow you to mark 5 image targets as “autoloaded” - it has no visibility into how you might later write your code (and if world tracking is enabled/disabled)

Assuming you have set disableWorldTracking=true in your code, to load 10 image targets you’ll need to
call XR8.XrController.configure() and pass in the list of the 10 targets you want activated.

Example:
XR8.XrController.configure({imageTargets: ['image', 'image2', 'image3', 'image4', 'image5', 'image6', 'image7', 'image8', 'image9', 'image10']})

If you have more than 10 image targets in your library, you’ll need some sort of logic as mentioned above to determine which set (of up to 10) you want the user’s phone to look for - this could be done in a number of ways: URL param, UI, or even rotate through different sets with a setTimeout(), etc

1 Like
5

Hi Rickard,

  1. I have 5 targets that are marked “auto.”
  2. I will check to see if the images are constantly downloading during debugging.
  3. I’m not sure the cache is the issue, but I will see how I can empty the cache to make sure that is not the issue.

Thank you for your suggestions,
MC

6

Hi Mihir,

  1. If you check the project you will find a config-target.js file which configures multiple image targets in the form of an array.
    -I saw that and changed the cloned project file name to the files names I’m using.

  2. This is a component that takes names of all the target images uploaded to your project as seen in the body.html.

  • I comprehended that concept and adjusted my programming to take that into consideration.
  1. You can load sets of 10 image targets at any given time, thus creating unlimited sets of targets.
  • I get that concept.
  1. The trick is to off auto loading image targets to use the config-target component.
  • If you mean that I should turn of auto loading, then that might be the issue I’m running into.
  1. As far your code is concerned it should be
    xrweb=“disableWorldTracking: true” you have extra quotation marks. This should probably fix your issue.
  • I think the formatting in my post/question is just an issue with my post. I was trying to include programming in a post with proper quotes, but I probably just made a mistake in the post/question. With that said, I will check my programming for that issue.

Thank you for your suggestions,
MC

1 Like
7

Hi Tony,

Always a pleasure to hear from you.

  1. The image target UI will only allow you to mark 5 image targets as “autoloaded” - it has no visibility into how you might later write your code (and if world tracking is enabled/disabled)
  • Good to know. Now I have to remember that. LOL
  1. Assuming you have set disableWorldTracking=true in your code, (I did) to load 10 image targets you’ll need to
    call XR8.XrController.configure() and pass in the list of the 10 targets you want activated.

Example:
XR8.XrController.configure({imageTargets: ['image', 'image2', 'image3', 'image4', 'image5', 'image6', 'image7', 'image8', 'image9', 'image10']})

-So the ‘XR8.XrController.configure({imageTargets: this.data.targets})’ should be changed to match your example, correct?

If you have more than 10 image targets in your library, you’ll need some sort of logic as mentioned above to determine which set (of up to 10) you want the user’s phone to look for - this could be done in a number of ways: URL param, UI, or even rotate through different sets with a setTimeout(), etc

  • I think I understand what you mean here. In my project, I have 12 targets. I suppose I’ll need to make 2 different sets of 10.

Is there any advantage to repeating certain targets to help limit the amount of searching the app needs to do?
Example: [1,2,3,4,5,6,7,8,9,10], [12,11,10,9,8,7,6,5,4,3] vs [1,2,3,4,5,6,7,8,9,10], [11,12]

Thank you in advance,
MC

1 Like
8

this.data is a reference to the schema of an AFrame component. If you are passing the list of image targets to an AFrame component as a parameter called targets then that is how you’d get the list:

Otherwise, you can simply pass the list explicitly as in the example code provded.

Yes, your “overlap” strategy will help.

If you switch between [1,2,3,4,5,6,7,8,9,10] and [12,11,10,9,8,7,6,5,4,3] the phone will be looking at all times for 2 slightly different sets of 10 image targets, so you’ll have more “uptime”, if you will, on detection of images 3-10 since they belong to both groups.

Note: The engine is smart enough to know if there is overlap between current and new set, so in reality it’s just swapping out 1-2 for 11-12 because it knows the other ones (3-10) are shared between both lists. You can verify this by looking at the network inspector calls.

If you switch between [1,2,3,4,5,6,7,8,9,10] and [11,12], then for half the time the phone will look for 10 targets, and then other half only for 2.

Sounds like first option is better to me!

9

What’s the reasoning for reversing the second array? I’m curious because I’m having difficulty finding targets when I switch between two arrays with 10 different images, where I have no issue with only 5 targets.

[edit] Now I spotted that @Matthew_Campagna wrote the arrays like that. Anyway, the question is: Does it make any difference where an image target is in the array? If the device lags because of compute-heavy calculations, will an image target at the end of the array have a “lower” priority?

10

No reason, order doesn’t matter. I simply copy/pasted what was in the original question.

2 Likes
11

@TonyT any reason to cap the targets to 10? why not give the capability to increase this number to some more threshold?

12

@mihir_m main reason was device memory and compatibility. Image tracking runs locally, on device, in browser - at runtime, the end user’s phone downloads a smaller, grayscale version of the source image target and loads it into memory. Something that can potentially be revisited in the future if it’s safe to increase the limits while still maintaining broad compatibility with a wide array of devices (particularly older phones)

13

When I went through the project demo, I noticed that it was very linear. Meaning, it worked well if you went in the order of the pictures. If you reversed your way through the images, after the rooster trigger image, the original array of images would not reload (I understand why.) If you skipped images, you ran the risk of not triggering images that existed in the image library.

I adjusted my code using the “rooster” image trigger idea. I can now switch between 2 arrays of 10 images using the following code concept…

      if (detail.name === 'image_name') {

Even though I can do this for a small number of images, i’d like to know how one would approach a project using 100+ image targets, like you might find in a self guided museum tour. It’s just a concept now, but I might do a project like that in the near future.

Suggestions?

Thank you in advance for your time.

1 Like
14

  1. Are the paintings in different rooms?

  2. Also, what will happen when the user scans an image target.

You can always use QR codes if the effect doesn’t have to appear on top of the image target. You can scan an indefinite number of QR codes. A huge downside I noticed when changing the image targets using setTimeout is that it drains a lot of battery and makes the whole app sluggish. It often takes a lot of time (20+ sec) to recognize an image target, even if you only switch between 10+10 image targets every second (NOTE: for my implementation, anyways).

15

@Matthew_Campagna in our Endless Image Targets demo, the order of the initial set of 10 images shouldn’t matter. All 10 are active at the start of the experience.

The trigger specifically to load the next set is when you scan “rooster”: Endless Image Targets | 8th Wall | 8th Wall

At that point the original set of image targets are no longer active, with the exception of ‘rooster’ because it’s in both sets. That’s what’s happening here:

scene.setAttribute('config-targets', {targets: 'rooster, roadrunner, penguin, ostrich'})

To @Rickard_Elimaa point, if you have a large set of images, then you’ll need some logic as to which set to activate and when. I agree that continual swapping of image targets isn’t ideal. If the paintings are in different rooms, or if there is signage in front of each individual painting, then a QR code approach (with an embedded URL param) is a great solution.

Depending on the URL param, it would load a different set, e.g.:

* https://mycompany.8thwall.app/project/?room=1
* https://mycompany.8thwall.app/project/?room=2
* https://mycompany.8thwall.app/project/?room=3
* https://mycompany.8thwall.app/project/?painting=7
* https://mycompany.8thwall.app/project/?painting=8
* https://mycompany.8thwall.app/project/?painting=900
etc...

Based on the URL param provided you’d then call XR8.XrController.configure() to load the appropriate set of image targets.