Based on example Locar and ThreeJS. The model drifts when the device is rotated.

[AR-Go-Coder]

Hello.
Please help, I have implemented a simple scene with one object similar to the example. But the model will drift when the device rotates, without walking. It looks like deviceOrientationControls.update() is slowly updating.

locar version - master
threejs - 0.175.0

import * as THREE from 'three'
import * as LocAR from 'locar'
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.175.0/examples/jsm/loaders/GLTFLoader.js'

...

const camera = new THREE.PerspectiveCamera(80,window.innerWidth / window.innerHeight,0.1,1000)

const renderer = new THREE.WebGLRenderer({antialias: true,logarithmicDepthBuffer: true})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()

const locar = new LocAR.LocationBased(scene, camera)

window.addEventListener('resize', e => {
  renderer.setSize(window.innerWidth, window.innerHeight)
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
})

const cam = new LocAR.Webcam({
  idealWidth: isIOS || isAndroid ? window.innerHeight : window.innerWidth, //1024,
  idealHeight: isIOS || isAndroid ? window.innerWidth : window.innerHeight, //768,
  onVideoStarted: texture => {
    scene.background = texture
  }
})

let firstLocation = true
let mainModelWorldPos = new THREE.Vector3()

const deviceOrientationControls = new LocAR.DeviceOrientationControls(camera)
const loader = new GLTFLoader()

locar.on('gpsupdate', (pos, distMoved) => {
  if (firstLocation) {
    loader.load(
      modelUrl,
      gltf => {
        const model = gltf.scene
        model.scale.set(...modelScale)
        model.rotation.set(
          THREE.MathUtils.degToRad(modelRotation[0]),
          THREE.MathUtils.degToRad(modelRotation[1]),
          THREE.MathUtils.degToRad(modelRotation[2])
        )
        locar.add(model, targetLon, targetLat)
        model.position.y = -1.6
        model.getWorldPosition(mainModelWorldPos)
      },
      undefined,
      error => console.error('Loading model error:', error)
    )

    firstLocation = false
  }
})

locar.startGps()

renderer.setAnimationLoop(animate)

function animate () {
  const delta = clock.getDelta()
  deviceOrientationControls.update()

  renderer.render(scene, camera)
}

I also tried moving the sensor processing to the interval, but the behavior remained the same

setInterval(() => {
  deviceOrientationControls.update()
}, 1)

link to video for visual demonstration of the problem

Is there any way to make the model stand more stable?
Thanks.

[nickw1]

Hi,

It looks like there are two factors here.

The lagging is likely partly a consequence of the app receiving many sensor readings, and applying each in turn. The app is not applying the readings fast enough to keep up with the stream of new sensor data, hence it lags.

The jittering when the device stays still can be minimised with the smoothingFactor. The smoothingFactor (k in the equation below) is a value between 0 and 1 which is used to combine the previous and new sensor readings. The smaller k is, the more effect the previous angle will have, which reduces the effect of noise (anomalous readings which can cause jitter).

smoothedAngle = k * newValue + (1 - k) * previousSmoothedAngle

You can apply the smoothingFactor when you create your DeviceOrientationControls, e.g.

const controls = new LocAR.DeviceOrientationControls(camera, { smoothingFactor: 0.05 });

The lag (the first issue) can likely be solved by adding an additional parameter to the DeviceOrientationControls to only process new sensor readings every so many milliseconds or if the new sensor readings are more than X degrees different to the old one.

Let me look into this when I have a moment. (As always no guarantee of time scale, will do when I can).

[garthhenning]

There is also possibly some physical drift due to GPS uncertainty and (on iOS devices for sure) some compass drift. I've noticed significantly elevated compass drift when in a more urban area -- maybe due to steel/iron in the buildings? I've just used the plain iOS compass app to test and you can see the compass lose calibration when the device pitches or yaws.

[coopbri]

There is also possibly some physical drift due to GPS uncertainty and (on iOS devices for sure) some compass drift. I've noticed significantly elevated compass drift when in a more urban area -- maybe due to steel/iron in the buildings? I've just used the plain iOS compass app to test and you can see the compass lose calibration when the device pitches or yaws.

Likely. Have you heard of multipath? https://www.u-blox.com/en/technologies/multipath-mitigation

This is where solutions like SLAM and VPS (for precise anchoring) come in as shining stars, which I'm exploring loosely with @nickw1 for LocAR.js. I'm experimenting with the tech, I'll let you know if I come up with anything cool. Early days!!!