Improve rendering performance with many players

[thomasboyt]

With 100+ bots in the world, I've found client-side performance is split fairly evenly between physics simulation and rendering time. While physics are not easily optimizable at the moment, rendering should be much easier.

A significant amount of execution time - around 20% - is spent on each frame iterating through players and rendering each ball. About 10% of the time is literally spent just calling ctx.stroke(), which makes me think rendering the balls needs to be cached in some way. This may involve caching the canvas of each ball just as the terrain line is cached, or something more involved.

The fix for this should be profiled to ensure the execution time is significantly decreased.

[thomasboyt]

I started looking into this and it's really tricky to do with the current "canvas caching" abstractions! Basically that abstraction isn't quite the same as a "sprite" that can be redrawn wherever I want, which is what I'm looking for.

The biggest tricky part is that I need to make sure a ball rendered to a canvas is re-rendered any time the game's scaleFactor changes. I think the API needs to look something like:

function drawBall(ctx, x, y, stroke, fill, scale) {
  if (!ballCache.get(stroke, fill) || scaleChanged(scale)) {
    const canvas = renderBall(stroke, fill, scale);  // returns canvas
    ballCache.set(stroke, fill, canvas);
  }
  ctx.drawImage(canvas, x, y);
}

function renderBalls(ctx, players, scaleFactor) {
  players.forEach((player) => drawBall(ctx, player.x, player.y, strokeColor, player.color, scaleFactor));
}

I also will need to have something to ensure ballCache() removes players who have left from the cache, or at least is cleared between rounds.