Odd behaviour from CatmullRomCurve3

Questions
, ,
1

To create a smooth coaster track I am creating the XZ paths separately (custom bspline script) and combining them with the changes in the Y axis.

  let cords = [];
  let cxz, cy, pr;
  let pi2 = Math.PI * 2;
  for (let t = 0; t < 1; t += 0.001) {
    cxz = bspline(t * xzMaxT, xzDegree, xzPoints);
    pr = t * pi2;
    cy = Math.cos(pr * 10) * 2 + Math.sin(pr * 17) * 2 + 5;
    cords.push(vector.set(cxz[0], cy, cxz[1]).clone().multiplyScalar(2.5));
  }

  return new THREE.CatmullRomCurve3(cords, true, "chordal", 0);

I found this creates a really smooth track
smooth demo: https://unl0hl.csb.app/

However, it has a big drawback. The bspline script Im using is set to create closed path. If the distance between the last point and the first point is far, the Y between those points seems to be getting stretched and results in the last section of track being long and flat (see pic below)

image
image1491×542 90.4 KB

To try and fix this issue, I extended CatmullRomCurve3:

(function () {
  class TrackCurve extends THREE.CatmullRomCurve3 {
    constructor(points, closed, curveType, tension) {
      super(points, closed, curveType, tension);
      this.pi2 = Math.PI * 2;
    }

    getPointAt(t, optionalTarget = new THREE.Vector3()) {
      super.getPointAt(t, optionalTarget);
      let pr = t * this.pi2;
      optionalTarget.y = Math.cos(pr * 10) * 2 + Math.sin(pr * 17) * 2 + 5;
      return optionalTarget.multiplyScalar(2.5);
    }
  }
  THREE.TrackCurve = TrackCurve;
})();

and used it like so:

function buildCurve() {
  // The number of control points without the last repeated
  // points
  let xzOriginalNumPoints = xzPoints.length - (xzDegree + 1);
  let xzMaxT = 1.0 - 1.0 / (xzOriginalNumPoints + 1);

  let cords = [];
  let cxz;
  for (let t = 0; t < 1; t += 0.001) {
    cxz = bspline(t * xzMaxT, xzDegree, xzPoints);
    cords.push(vector.set(cxz[0], 0, cxz[1]).clone());
  }

  return new THREE.TrackCurve(cords, true, "chordal", 0);
}

This solves the issue of the long flat section of track but it creates violent bumps in the curve and I have no idea why:
bumpy demo: https://1xk2ej.csb.app/

My goal is to solve the long flat section of track issue and have a really smooth ride without removing the use of the bspline script. I have exhausted solutions with my limited knowledge base.

Thanks in advance for any help

2

I’m not at a machine right now but have you tried visually debugging the curve points? It may be worth adding back your axes helpers with numbered sprites to check the order is correct, this may be useless but may also help recognise a pattern in the anomalies

3

I stripped away the coaster generation and removed the custom bspline code. I am now using very basic coordinates and very simple custom Curve:

var xzPoints = [
  [-10.55879030632168, 48.55164905831707],
  [8.46234001958139, 42.37130917081811],
  [17.229762955362933, 24.395428244834765],
  [28.122543655663463, 7.6220168859262785],
  [46.24869939639646, -0.8303483488877106],
  [44.85356992151396, -20.781629354084195],
  [26.582660768661945, -28.916362215600202],
  [9.62169884553342, -18.317976930936112],
  [-1.5621592238815296, -34.898728382036936],
  [-21.56215922388153, -34.89872838203693],
  [-22.260149157931554, -14.910911841655015],
  [-20.517034302978388, 5.012982120179895],
  [-6.374898679247433, 19.155117743910843],
  [13.031015846272496, 14.316679831917487],
  [12.33302591222248, -5.671136708464427],
  [-2.0537700945505417, -19.564304117644376],
  [-12.354531592751632, -36.70765013168662],
  [-31.026140122695665, -29.540291140780617],
  [-45.65321415507907, -15.900323939530645],
  [-45.65321415507907, 4.0996760604693545],
  [-28.332706079390295, 14.099676060469353],
  [-19.880340844576306, 32.22583180120235],
  [-0.9699693325899688, 38.73719489034548],
  [18.95392462924494, 36.994080035392315],
  [25.794327495758317, 18.20022761967415],
  [26.841046620617195, -1.7723630754173278],
  [45.862176946520265, -7.952702962916276],
  [41.70394313016508, -27.51565497759239],
  [22.57784801090437, -33.363089072047124],
  [8.191052004131345, -47.25625648122707]
];

var vector = new THREE.Vector3();
var xzDegree = 3;

function buildCurve() {
  let cords = [];
  let cxz;
  for (let t = 0; t < xzPoints.length; t++) {
    cxz = xzPoints[t];
    cords.push(vector.set(cxz[0], 0, cxz[1]).clone());
  }

  return new THREE.TrackCurve(cords, true, "chordal", 0);
}

(function () {
  class TrackCurve extends THREE.CatmullRomCurve3 {
    constructor(points, closed, curveType, tension) {
      super(points, closed, curveType, tension);
      this.pi2 = Math.PI * 2;
    }

    getPointAt(t, optionalTarget = new THREE.Vector3()) {
      super.getPointAt(t, optionalTarget);
      let pr = t * this.pi2;
      optionalTarget.y = Math.sin(pr * 17) * 2 + 5;
      return optionalTarget.multiplyScalar(2.5);
    }
  }
  THREE.TrackCurve = TrackCurve;
})();

Sadly the results of drawing a simple line are still weird bumps:

image
image754×462 11.9 KB

If you ride the coaster you can see the two arrows towards the end of the track.
demo: https://0f3lh6.csb.app/