Shaky / Jumpy - Camera Interpolation Along Curve

Questions
1 
const routeProgressRef: RefNumberType = useRef(0);

const SINE_INOUT = "sine.inOut";

const DampVector3 = (
  target: Vector3,
  to: Vector3,
  step: number,
  delta: number,
): void => {
  target.x = MathUtils.damp(target.x, to.x, step, delta);
  target.y = MathUtils.damp(target.y, to.y, step, delta);
  target.z = MathUtils.damp(target.z, to.z, step, delta);
};

const animateRouteProgress = (
  targetRef: RefNumberType,
  from: number,
  to: number,
  duration: number,
  onUpdate: () => void,
) => {
  gsap.fromTo(
    targetRef,
    { current: from },
    {
      current: to,
      overwrite: true,
      duration: duration,
      onUpdate: onUpdate,
      ease: SINE_INOUT,
    },
  );
};

animateRouteProgress(
        routeProgressRef,
        direction ? 0 : 1,
        direction ? 1 : 0,
        duration,
        () => {
          playerCameraActivePosition.copy(
            route.getPointAt(routeProgressRef.current),
          );
        },
);


useFrame((state, delta) => {
        DampVector3(
          playerCameraReference.position,
          playerCameraActivePosition,
          1,
          delta,
        );
})

I can’t really share more than this code, but based on this I’m wondering what I’m doing wrong to get “shaky” or “stuttery” camera jumping while it’s interpolating along the bezier curve. I have the gsap easing + dampening.

My frame rate sometimes can jump from 57 to 63 quickly - but I should be getting smooth interpolation. the “1” step. I’ve changed around a bunch.

2

It is hard for me to guess what might cause this effect, because I’m not sure that exactly “shaky” means (many things can be labeled “shaky”) and I cannot run the code to debug it.

(it is like you say "my car makes strange sounds … here is a picture of the engine. what is wrong?)

Would it be possible for you to make a CodePen with just the trajectory curve and the motion along that curve? There is no need to share the full original code.

Possible reasons for shakiness are:

  • the trajectory is geometrically shaky
  • the coordinates are too big (numbers in GPU are with small precision)
  • the motion along the curve is not smooth
  • the camera lookAt direction is not changed smoothly
  • something else

Most likely this is not a performance issue, as FPS 57 to 63 should deliver smooth motion.

Here is an example of camera motion along a curve, does it shake?

https://codepen.io/boytchev/pen/poxpGZN

image