Stabilize AR content with Image tracking + SLAM

🧑‍💻 Technical Support
,
1

Hi everyone,

I am tackling a tracking stability problem with the following use case:

  1. user scans a QR code
  2. user scans a fixed image target on the ground below a real physical door frame
  3. a virtual 3D portal is placed on the ground aligned to the position of the physical door frame allowing the user to enter the portal without the need to point the camera at the image target

I am having issue with the AR content changing mainly rotation and scale across multiple sessions (page reloads), hinting the tracking would not be stable enough to match the virtual portal with the real door frame. Is this precision achievable with image tracking + SLAM? Would VPS be a better option? (I am not aware of the exact shape and complexity of the physical door frame)

The project I am testing this use case on comes from this template Image Target + SLAM Manipulate 3D Model | 8th Wall Playground | 8th Wall

The logic I came up with is in the code snippet below:

  • the content should be placed on the ground slightly further than the image target (entrance) is
  • the rotation of the content should match the image target but the X axis, in which there is 90 degree angle between the image target and the content
  • the position and rotation should be updated whenever the image target is in view to prevent drifting on the ground
const modelSpawnComponent = {
  init() {
    const alignPortalWithImageTarget = ({detail}) => {
      const portalWrapper = document.getElementById('spawned-portal-contents')

      const targetPos = detail.position
      const targetRot = detail.rotation

      portalWrapper.object3D.position.set(targetPos.x, 0, targetPos.z - 1)

      // Align rotation with image target
      const {x, y, z, w} = targetRot
      portalWrapper.object3D.quaternion.set(x, y, z, w)

      // Offset x rotation axis about 90 degrees
      const rotAngleOffset = Math.PI / 2
      portalWrapper.object3D.rotation.x += rotAngleOffset

      portalWrapper.setAttribute('visible', 'true')
    }

    this.el.sceneEl.addEventListener('xrimagefound', alignPortalWithImageTarget)
    this.el.sceneEl.addEventListener('xrimageupdated', alignPortalWithImageTarget)
  },
}

export {modelSpawnComponent}

The current outcome can be seen in this video. Could you please tell me if there is something wrong with my approach? I was also trying testing the Image Target + SLAM Manipulate 3D Model template with similar outcome of changing the rotation and scale when the image target was placed on the ground.

Thank you in advance for checking out this post.

2

Hi @Marketa_Machova1 - if the goal here is to match the virtual portal with the real door frame and consistently have it placed at the same scale/orientation, you’ll probably want to use VPS instead of an image target + SLAM. Can you share a photo of the door frame you want to augment?

1 Like
3

Hi @Evan, thank you for the prompt response - it is good to know that VPS is the better approach for this use case.
Unfortunately I don’t have the info about the expected look of the door frame now, but at least the location around the door frame should have multiple elements (like trees and wooden plank floor), which I hope could make the location more recognizable by the VPS.
Another idea is to put additional markers around or directly onto the door frame that could increase the number of feature points and therefore enhance the VPS scan - do you think this could work?