Camera LookAt jitter issues

CesiumJS
1

Hi, I am facing jittery issues with lookat in cesiumjs. The camera is looking at a moving aircraft, in theory it should be smooth and moving with the aircraft but on certain section of the flight path it isn’t. I have tried manually shifting the coordinates to all around the globe but the jitter issue still persist. The earth’s horizon can be see jittering while looking at the aircraft (therefore indicating that the camera rotates around the aircraft erratically, which isn’t supposed to).

I would appreciate any advice on this or perhaps possible ways to debug this issue. After multiple investigations I could not pinpoint the root, it could be the math calculations or interpolation algorithm that interferes with the camera, or camera render delays, etc. but I’m not sure as I did not look indepth to how cesium computes behind the scenes.

Apologies that I am unable to provide any code as this is a proprietary project I am working on. Many thanks in advance

2

Hi @dan711,

Thank you for your question and welcome to the community! :grinning: :rocket:

From my understanding, you are updating the position of the Camera object based upon the position of the aircraft. Is that correct? Further, it seems like you are updating the position of the aircraft based on points generated by an interpolation algorithm. I recommend that you take a second pass on your interpolation algorithm and ensure that it is working properly. You may want to add additional interpolation points in certain sections as well. My best guess is that the root cause of this issue is not with the backend of the Camera object. Looking forward to learning more.

Best,
Sam

3

Are you using CZML animation? If so, see this:

function track(clock) {
    if (endTime && JulianDate.greaterThan(clock.currentTime, endTime)) {
      cancel()
    }
    const _position = entity.position
    const position = _position.getValue(clock.currentTime)
    if (!position) return
    const nextSecond = JulianDate.addSeconds(clock.currentTime, 0.2, new JulianDate())
    const nextPosition = _position.getValue(nextSecond)
    if (!nextPosition) return
    const heading = getHeading(position, nextPosition)

    viewer.camera.lookAt(
      position,
      new HeadingPitchRange(heading, CesiumMath.toRadians(pitch), range)
    )
  }

  viewer.clock.onTick.addEventListener(track)