Reduce Allocations for GraphicsGroup Draw Calls

[blakearoberts]

Context

I am trying to render thousands of tiles to the screen. I use a GraphicsGroup to "chunk" draw calls. If I profile a static scene, the JS heap will grow before performing a GC that impacts frame rate:

I did a memory allocation profile over 15 seconds, and get localBounds allocated about 60 MB.

Looking at that method, I notice a few allocations:

• let bb = new BoundingBox();
• bb = member.localBounds.combine(bb);
• bb = graphic.localBounds.translate(pos).combine(bb);

Proposal

Is it possible to reduce the number of allocations of get localBounds by this.members.length by reusing bb in combine?

public get localBounds(): BoundingBox {
  let bb = new BoundingBox();
  for (const member of this.members) {
    if (member instanceof Graphic) {
      member.localBounds.combine(bb, bb); // use bb as dest to avoid allocation
    } else {
      const { graphic, offset: pos, useBounds } = member;
      const shouldUseBounds = useBounds === undefined ? true : useBounds;
      if (graphic) {
        if (shouldUseBounds) {
          graphic.localBounds.translate(pos).combine(bb, bb); // use bb as dest to avoid allocation
        }
      } else {
        this._logger.warnOnce(`Graphics group member has an null or undefined graphic, member definition: ${JSON.stringify(member)}.`);
      }
    }
  }
  return bb;
}

[eonarheim]

@blakearoberts Great suggestion! Let's do it, 1 allocation over many is way better