メインコンテンツへスキップ

Image Targets

Bring signage, magazines, boxes, bottles, cups, and cans to life with 8th Wall Image Targets. 8th Wall Web can detect and track flat, cylindrical and conical shaped image targets, allowing you to bring static content to life.

Not only can your designated image target trigger a web AR experience, but your content also has the ability to track directly to it.

Image targets can work in tandem with our World Tracking (SLAM), enabling experiences that combine image targets and markerless tracking.

You may track up to 5 image targets simultaneously with World Tracking enabled or up to 10 when it is disabled.

Up to 5 image targets per project can be "Autoloaded". An Autoloaded image target is enabled immediately as the page loads. This is useful for apps that use 5 or fewer image targets such as product packaging, a movie poster or business card.

The set of active image targets can be changed at any time by calling XR8.XrController.configure(). This lets you manage hundreds of image targets per project making possible use cases like geo-fenced image target hunts, AR books, guided art museum tours and much more. If your project utilizes SLAM most of the time but image targets some of the time, you can improve performance by only loading image targets when you need them. You can even read uploaded target names from URL parameters stored in different QR Codes, allowing you to have different targets initially load in the same web app depending on which QR Codes the user scans to enter the experience.

Note: Custom Image Targets are not currently previewable in the Simulator.

Image Target Types​

| | -|-|- Flat|FlatTarget| Track 2D images like posters, signs, magazines, boxes, etc. Cylindrical|CylindricalTarget| Track images wrapped around cylindrical items like cans and bottles. Conical|ConicalTarget| Track images wrapped around objects with different a top vs bottom circumference like coffee cups, etc.

Image Target Requirements​

  • File Types: .jpg, .jpeg or .png
  • Dimensions:
    • Minimum: 480 x 640 pixels
    • Maximum length or width: 2048 pixels.
      • Note: If you upload something larger, the image is resized down to a max length/width of 2048 , maintaining aspect ratio.
  • Hosting: All image targets must be uploaded to your 8th Wall project before they can be used. You can self-host the rest of your Web AR experience (if on an Enterprise or Legacy Pro plan) but the source image target is always hosted by 8th Wall. Please see below for instructions on creating/uploading flat or curved image targets.

Image Target Quantities​

There is no limit to the number of image targets that can be associated with a project, however, there are limits to the number of image targets that can be active in the user's browser at any given time.

  • Active image targets per Project: 32

Manage Image Targets​

Click the Image Target icon in the left navigation or the "Manage Image Targets" link on the Project Dashboard to manage your image targets.

ManageImageTargets

This screen allows you to create, edit, and delete the image targets associated with your project. Click on an existing image target to edit. Click the "+" icon for the desired image target type to create a new one.

ManageImageTargets2

Create Flat Image Target​

  1. Click the "+ Flat" icon to create a new flat image target.

ImageTargetFlat1

  1. Upload Flat Image Target: Drag your image (.jpg, .jpeg or .png) into the upload panel, or click within the dotted region and use your file browser to select your image.

  2. Set Tracking Region (and Orientation): Use the slider to set the region of the image that will be used to detect and track your target within the WebAR experience. The rest of the image will be discarded, and the region which you specify will be tracked in your experience.

SetTrackingRegion

  1. Edit Flat Image Target properties:
  • (1) Give your image target a name by editing the field at the top left of the window.
  • (2) IMPORTANT! Test your image target: The best way to determine if your uploaded image will make a good or bad image target (see Optimizing Image Target Tracking) is to use the Simulator to assess tracking quality. Scan the QR code with your camera app to open the simulator link, then point your device at the screen or physical object.
  • (3) Click Load automatically if you want the image target to be enabled automatically as the WebAR project loads. Up to 5 image targets can be loaded automatically without writing a single line of code. More targets can be loaded programnatically through the Javascript API.
  • (4) Optional: If you would like to add metadata to your image, in either Text or JSON format, click the Metadata button at the bottom of the window.

EditFlatImageTarget

  1. Changes made on this screen are automatically saved. Click Close to return to your image target library.

Create Cylindrical Image Target​

  1. Click the "+ Cylindrical" icon to create a new flat image target.

ImageTargetFlat1

  1. Upload Flat Image Target: Drag your image (.jpg, .jpeg or .png) into the upload panel, or click within the dotted region and use your file browser to select your image.

  2. Set Tracking Region (and Orientation): Use the slider to set the region of the image that will be used to detect and track your target within the WebAR experience. The rest of the image will be discarded, and the region which you specify will be tracked in your experience.

  1. Edit Cylindrical Image Target properties:
  • (1) Give your image target a name by editing the field at the top left of the window.
  • (2) Drag the sliders until the shape of your label appears as expected in the simulator, or input the measurements directly.
  • (3) IMPORTANT! Test your image target: The best way to determine if your uploaded image will make a good or bad image target (see Optimizing Image Target Tracking) is to use the Simulator to assess tracking quality. Scan the QR code with your camera app to open the simulator link, then point your device at the screen or physical object.
  • (4) Click Load automatically if you want the image target to be enabled automatically as the WebAR project loads. Up to 5 image targets can be loaded automatically without writing a single line of code. More targets can be loaded programnatically through the Javascript API.
  • (5) Optional: If you would like to add metadata to your image, in either Text or JSON format, click the Metadata button at the bottom of the window.

EditCylindricalImageTarget

  1. Changes made on this screen are automatically saved. Click Close to return to your image target library.

Create Conical Image Target​

  1. Click the "+ Conical" icon to create a new flat image target.

ImageTargetFlat1

  1. Upload Conical Image Target: Drag your image (.jpg, .jpeg or .png) into the upload panel, or click within the dotted region and use your file browser to select your image. The uploaded image should be in "unwrapped", aka "rainbow" format, cropped like so:

conical rainbow image

  1. Set Large Arc Alignment: Drag the slider until the red line overlays the uploaded image's large arc.

set large arc

  1. Set Small Arc Alignment: Do the same for the small arc. Drag the slider until the blue line overlays the uploaded image's small arc.

  2. Set Tracking Region (and Orientation): Drag and zoom on the image to set the portion of the image that is detected and tracked. This should be the most feature rich area of your image.

set tracking

  1. Edit Conical Image Target properties:
  • (1) Give your image target a name by editing the field at the top left of the window.
  • (2) Drag the sliders until the shape of your label appears as expected in the simulator, or input the measurements directly.
  • (3) IMPORTANT! Test your image target: The best way to determine if your uploaded image will make a good or bad image target (see Optimizing Image Target Tracking) is to use the Simulator to assess tracking quality. Scan the QR code with your camera app to open the simulator link, then point your device at the screen or physical object.
  • (4) Click Load automatically if you want the image target to be enabled automatically as the WebAR project loads. Up to 5 image targets can be loaded automatically without writing a single line of code. More targets can be loaded programnatically through the Javascript API.
  • (5) Optional: If you would like to add metadata to your image, in either Text or JSON format, click the Metadata button at the bottom of the window.

EditConicalImageTarget

  1. Changes made on this screen are automatically saved. Click Close to return to your image target library.

Edit Image Targets​

Click on any of the image targets under My Image Targets to view and/or modify their properties:

  1. Image Target Name
  2. Sliders / Measurements (Cylindrical/Conical image targets only)
  3. Simulator QR Code
  4. Delete Image Target
  5. Load Automatically
  6. Metadata
  7. Orientation and Dimensions
  8. Autosave status
  9. Close
TypeFields
Flatflat target
Cylindricalcylindrical target
Conicalconical target

Changing Active Image Targets​

The set of active image targets can be modified at runtime by calling XR8.XrController.configure()

Note: The set of currently active image targets will be replaced with the new set passwd to XR8.XrController.configure().

Example - Change active image target set​

XR8.XrController.configure({imageTargets: ['image-target1', 'image-target2', 'image-target3']})

Optimizing Image Target Tracking​

To ensure the highest quality image target tracking experience, be sure to follow these guidelines when selecting an image target.

DO have:

  • a lot of varied detail
  • high contrast

DON'T have:

  • repetitive patterns
  • excessive dead space
  • low resolution images

Color: Image target detection cannot distinguish between colors, so don't rely on it as a key differentiator between targets.

For best results, use images on flat, cylindrical or conical surfaces for image target tracking.

Consider the reflectivity of your image target's physical material. Glossy surfaces and screen reflections can lower tracking quality. Use matte materials in diffuse lighting conditions for optimal tracking quality.

Note: Detection happens fastest in the center of the screen.

Good MarkersBad Markers
good logobad logo
movie posterbad pattern

Image Target Events​

8th Wall Web emits Events / Observables for various events in the image target lifecycle (e.g. imageloading, imagescaning, imagefound, imageupdated, imagelost) Please see the API reference for instructions on handling these events in your Web Application:

Example Projects​

https://github.com/8thwall/web/tree/master/examples/aframe/artgallery

https://github.com/8thwall/web/tree/master/examples/aframe/flyer