1

I'm working on a game loop and can't get past a specific issue: A bunch of objects start with an incremented delay and should move a certain distance.

The expected behaviour is that all objects should move in an even diagonal line, yet they move in uneven groups.

I realize the issue lies in 16.667ms interval updates which "groups" objects in update cycles. Is it possible to achieve sub-17ms precision?

I have tried separating update and render methods and run the update inside a delta while loop - all to no avail.

Here's the relevant part from the tick function:

function tick() {
  if (this._stopped) return;
  let now = performance.now();

  if (now < this._lastTick + this._interval - 1) {
    this._rafId = requestAnimationFrame(this.tick);
    return;
  }

  this._rafId = requestAnimationFrame(this.tick);
  let frameTime = (now - this._lastTick);
  this._lastTick = now;
  this._delta += frameTime;
  let acc = 0;

  while (this._delta >= this._interval) {
    this._delta -= this._interval;
    //this.update(this._interval);
    acc++;
  }

  this.update(acc * this._interval);
  //this.render(time);   
  this.count++;
}

Here's the codepen.

Would really appreciate any input.

ElSheikh
  • 321
  • 6
  • 28
mk010101
  • 50
  • 6
  • Javascript is single threaded by default. Use a webworker to update positions in a second thread. And use the main loop just to render current positions. – Tschallacka Mar 27 '18 at 08:39
  • I tried that as well, but there are two fundamental issues using web workers: 1. The array is huge and will be hard to represent as a Transferable Object. 2. It doesn't solve the issue of sub-17ms as rendering still happens 16.67ms intervals (at best!) – mk010101 Mar 27 '18 at 08:48
  • You can just push the reference, that goes blazing fast. See https://stackoverflow.com/questions/19152772/how-to-pass-large-data-to-web-workers/30296330#30296330 And if you have more than 90 million data points i'm curious about your setup :-) – Tschallacka Mar 27 '18 at 08:59

0 Answers0