[WIP] viewport label placement

[ansis]

Switching from tiled label placement to global viewport label placement. #4704 WIP.

This PR dramatically changes our approach to collision detection. Instead of trying to pre-calculate collisions across a range of zooms in the background, we now calculate collisions synchronously in the foreground. Fade animations are no longer tied to zoom level, but instead based on time elapsed since collision occurred. This approach helps solve many problems:

• More reliable collision detection between tiles (buffering/avoid-edges are no longer necessary)
• Collision detection now works on labels from different sources (e.g. a GeoJSON set of labels added on top of a base map)
• Calculating collision boxes at (or near) render time is much more accurate for pitched maps, line labels, sizes based on zoom functions, etc.
• Fade in/out animations are no longer limited to zoom operations (i.e. collisions related to pitch/pan/rotate will all be animated now)

The main structural changes are:

• CollisionTile is now a global object that lives only in the foreground. Insertions/queries into the collision index are now done entirely in viewport coordinates instead of tile coordinates.
• The "placement" step no longer happens in the background thread, and static buffers for symbols are created during the "prepare" step.
• The new foreground "placement" step is primarily responsible for updating a dynamic array of opacities that are used to animate collision states. For each vertex, the opacity state is expressed as an "opacity at time of last update" and a "target opacity". The symbol shaders animate towards the "target opacity" based on an animation start time set for each bucket.
• It's now necessary to place a hard time limit on how long an individual placement call can take, to avoid frame stutter -- so full placement can now be split across multiple frames.
• Collision features for lines are now represented in the collision grid as an array of circles, instead of as an array of boxes. This makes their behavior more stable under pitch/rotation operations.
• Because fading is now tied to "collision time" instead of to zoom level, we need a way to tell when two symbols in tiles of two different zoom levels are "the same symbol", so that we can avoid triggering a fade in/fade out when we cross between zoom levels. This is primarily handled by the new CrossTileSymbolIndex.

TODO:

• Handle re-ordering for overlapping symbols (requires re-generating static buffers on rotation)
• Re-implement symbol-avoid-edges support (?)
• Fix remaining test failures/update tests to reflect new behavior
  • Render tests
  • Query tests
  • Unit tests
• Performance improvements:
  • Don't require full placement when a new tile is added -- instead, start progressive placement for the tile as soon as it's added, but don't start rendering until the first full placement has completed.
  • Allow progressive placement to pause at the bucket level. (Currently placement pauses at the layer level, where a single dense layer of street labels on a large viewport can take ~8ms on my MacBook Pro)
• Implement anti-aliasing for collision circle debugging (need them to look good for Studio)
• Update comments, rationalize class names (e.g. CollisionTile), remove dead code
• Simplify representation of collision boxes/circles used on foreground
• Rebase on master
• Flow-ify changes
• Handle wrapped tiles in CrossTileSymbolIndex
• Figure out home for grid_index_experimental (adds support for circle geometry queries; removes support for cross-thread serialization): either update https://github.com/mapbox/grid-index, make a new library, or just continue to include the code directly.
• Port to gl-native
  • Figure out how to continue doing tile-based collision detection in api-gl

This PR will enable further changes that we're not tackling yet:

• Collision detection for labels with rotation-alignment map.
• Adding collision features with arbitrary geometry
• Cross-fading for layout property changes
• Multiple label placement (Variable text placement for point labels #5038 / https://github.com/mapbox/mapbox-gl-js/tree/multiplace)
• Label density reduction: Reduce density for labels based on distance from camera #5086
• Reduce data usage by creating vector tiles without collision buffers
• Fade out symbols from removed tiles (requires holding on to tile or at least symbol buckets over period of fade animation)

[ansis]

So far I've switched CollisionTile to use viewport units and I've made it possible to switch the tile-specific parts of CollisionTile (matrix, collisionBoxArray). Right now I'm just trying to get to a hacky version of global viewport label placement so that we can unblock other work.

I think steps are:

• Switch to global label placement by using one CollisionTile for all tiles. Create the CollisionTile in Style._redoPlacement and pass it to the source.redoPlacement and tile.redoPlacement functions. @mollymerp want to take this one? I think at a high level it should look like this:

for each symbol layer
    for each source
        for each tile
            if the tile has a bucket for that layer
                collisionTile.setMatrix(matrix); // switch the transform to the current tile
                collisionBox.setCollisionBoxArray(collisionBoxArray);
                bucket.place(...)

I'll work on:

• Only creating the collision tile on the main thread (never doing it in the worker).
• Removing unnecessary code from CollisionTile

[ChrisLoer]

From discussion with @nickidlugash, our current plan is to continue supporting symbol-avoid-edges even though it won't be necessary outside of api-gl. The reasoning is roughly: maintaining consistency between api-gl and gl-native/gl-js is good whenever possible, even as we add features that break consistency (e.g. 3d buildings, viewport collision detection,...)

[ChrisLoer]

Here are the current known caveats for cross-tile symbol fading:

• Symbols with the same name very close to each other at high res won’t always get opacity updates transferred correctly on going to low res (or coming back to high res)
• Symbols that are right at tile boundaries may end up split into two different parent/child hierarchies, in which case updates don’t work correctly
• The “same anchor point” logic depends on rounding anchor locations to a grid that’s normalized between different zoom levels. Anchor points that are right at that grid line can end up rounding to different locations at different zoom levels.
• If you’re zooming in or out quickly, the above issues are more likely to show up because we end up crossing multiple zoom levels at once and the rounding effects are stronger.

When the logic fails, you should just see a label fade out and then fade back in. I think it’s starting to look pretty acceptable… but we can definitely still improve. All of the above caveats can be fixed or at least mitigated (but at the cost of adding code complexity and some computation cost), although ultimately it’s not going to be 100% because “same label text and same anchor point” is just a heuristic.

I'm not at all certain that the four points above account for all of the remaining flicker. My debugging approach so far has been to try to keep an internal data structure logging every cross-tile opacity update operation (keyed by label text), and then when I see flicker for a given label, looking it up in the data structure to see how it arrived at the flickering state.