WIP: Pitched label legibility #4682

ChrisLoer · 2017-05-04T22:43:12Z

Splitting changes to improve legibility of curved labels on tilted maps (#3057) out of #4547.

The motivation for these changes is that we want to improve our rendering support for the "navigation" use case, in which:

Tilting the map is important, because in turn by turn directions you want to be able to see ahead
Legibility becomes more important relative to information density or aesthetics, because users of the map need to be able to read labels with a quick glance.
For curved labels with pitch-alignment: viewport: replace "foreshortening" behavior with "legibility expansion" that spaces vertical/tilted glyphs further apart in tile space so that they're still legible in projected space.
Make "legibility expansion" use improved approximation math from https://gist.github.com/ChrisLoer/fb8c22845b6c3216afff0f19dc53f6d6
Make collision box approximation take account of "legibility expansion"
Pack attributes into as little space as possible
Explore max-curvature property (or default) to prevent labels in the distance from ending up with silly geometry (e.g. "horseshoe labels")
Verify text-max-angle logic (see check_max_angle.js) isn't broken

symbols scale relative to the rest of the map as tiles are tilted and panned. - '1' = previous behavior (symbols have same scale as the surrounding features) - '0' = symbols maintain the same size no matter what distance they're at - fraction values = split the difference - Curved labels currently use a broken approximation to determine glyph position. - This approach makes collision detection much more expensive because we pre-calculate collisions over a much greater scale range to account for pan operations changing the effective scale of tiles.

instead of glyph anchors in order to keep all glyphs in sync.

No glyph should be able to show if any one of the glyphs in the label can't show.

…he viewport.

expansion in the distance.

When doing collision detection, assume all labels are scaled the same as the least scaled label in the tile.

Update collision tiles whenever the map moves because tile distance changes.

at render time.

as they move into the distance.

and boxes for collision scale calculation.

(and accessible to color blind folk)

labels now, but make sure the position of the central boxes doesn't change.

Necessary so that we can make collision detection conservative in the near field as well as the far field.

before placement starts.

Must do pitch scaling based on label anchor point, not box anchor point.

…anchor.

…to buffers because their placementScale is above the maxScale for the collision tile.

was unpredictably shared across tiles.

- Don't show boxes over maxScale (it was getting too confusing) - Use green background for test so white boxes are visible.

…thread.

inserted before first CollisionFeature is added to a CollisionBoxArray.

line labels. This could lead to label collisions in the distant field.

… in: #2096 Change some variable names from camel-case to underscore-separated.

perspective to make a significant difference in collision detection.

- Lay out glyphs in tile space so we can use existing curve following logic - Space glyphs out based on the incidence angle of the middle of the label and the orientation of the middle of the label (So that a vertical line in the distance gets spaced out a lot) - Apply glyph rotation in projected space. Significant problems: - "We're out of space on this line" logic is mixed with collision detection logic, and they no longer stay in sync perfectly, so it's possible to have individual glyphs clipped before the whole label is clipped. - The spacing approximation doesn't work for highly curved labels, and you end up with silly looking results.

ChrisLoer · 2017-05-04T22:45:10Z

From #4547 (comment):

I got an initial implementation of the fancy trigonometry for label expansion... kind of working. It looks like it's doing a better job of keeping spacing even on curved labels, but there are two big problems:

There's lots of glyph flicker/duplication around segment junctions. This might be caused by the placement-time calculations working with higher precision angles than the part of the calculation done in the shader (the positioning calculations only have to disagree by a tiny amount between two segments to cause artifacts). It looks bad enough it might just be a matter of me messing up the math.
This approach ties the minZoom and maxZoom for a glyph to the "legibility expansion" calculated for that glyph... which breaks the labelMinScale trick we use at https://github.com/mapbox/mapbox-gl-js/blob/master/src/symbol/quads.js#L218 to make all the glyphs disappear if one of the glyphs has to disappear. To fix this, we'd need to add even more vertex attributes. 😞

Overall, it's feeling like too complicated a solution, but I'll keep poking at it a bit longer to see if I can come up with anything compelling.

Here's a shot showing the algorithm actually doing its thing. This is the kind of label that does poorly with the simple algorithm: the center of the label is at about 45 degrees, while the left side is near vertical and the right side is near horizontal. As a result, the simple algorithm (on the left) squishes the left side and stretches out the right side. The fancy algorithm appears to do a reasonable job of spacing across the length of the label.

ChrisLoer · 2017-05-05T21:42:51Z

/cc @nickidlugash

ChrisLoer · 2017-06-19T16:08:06Z

This work was superseded #4781.

ChrisLoer added 30 commits May 1, 2017 12:22

Debugging changes for text-pitch-scale

c0a7232

'text-pitch-scaling' calculations must be based on label anchors

0fa7793

instead of glyph anchors in order to keep all glyphs in sync.

Fix "labelMinScale" logic in getGlyphQuads:

59e8768

No glyph should be able to show if any one of the glyphs in the label can't show.

Make collision debug more legible for us colorblindies.

ffb62e1

Avoid making collision boxes too narrow for pitched labels close to t…

d16998a

…he viewport.

Make debug collision boxes take account of text-pitch-scale

de939ae

Calculate line collision boxes over a wider range to account for label

fe33752

expansion in the distance.

Make pitched collision detection more conservative:

eaa05d9

When doing collision detection, assume all labels are scaled the same as the least scaled label in the tile.

Fix comment: Tile.coord is a TileCoord, not a Coordinate

27fd05a

Adjust collision tile scale range based on tile distance from camera.

3ca25e0

Update collision tiles whenever the map moves because tile distance changes.

CollisionTile#minimumPitchScaling needs to be serialized since it's used

0495a31

at render time.

'max-camera-distance' style property allows selective hiding of labels

f726efa

as they move into the distance.

'pitch-scale' -> 'pitch-scaling'

0e34868

Remove extra semicolon.

5921f93

Explain obscure difference between collision grid bounding boxes

1e33272

and boxes for collision scale calculation.

Make render test summary failures searchable

d382d55

(and accessible to color blind folk)

Limit redoing placement for collisions to every 300ms.

894b071

Update collision debug tests to new colors.

413fd99

Fix some tests: we create more line collision boxes now at the edge of

259ba28

labels now, but make sure the position of the central boxes doesn't change.

Fix tests: updated CollisionTile constructor

8fbadd2

Keep track of "maximum pitch scaling" as well as minimum pitch scaling

b32aa68

Necessary so that we can make collision detection conservative in the near field as well as the far field.

min/max pitch scaling needs to be calculated over the whole tile

792f1c8

before placement starts.

Get debug collision boxes closer in sync with actual labels:

4bc4c26

Must do pitch scaling based on label anchor point, not box anchor point.

Icon perspective ratio should be based off of label anchor, not icon …

efa1f6a

…anchor.

Bring collision debug boxes into line with symbols that aren't added …

20c5502

…to buffers because their placementScale is above the maxScale for the collision tile.

Eliminate major source of label flicker: "minimum pitch scale" setting

f45f304

was unpredictably shared across tiles.

Update collision debug tests:

be194a8

- Don't show boxes over maxScale (it was getting too confusing) - Use green background for test so white boxes are visible.

Fix query tests -- yStretch calculation wasn't correct on the render …

cf50802

…thread.

Fix unit tests and Flow errors.

7d759f7

ChrisLoer added 11 commits May 1, 2017 21:41

Fix 'symbol-avoid-edges', which relies on edge collision boxes being

a8f0316

inserted before first CollisionFeature is added to a CollisionBoxArray.

Temporarily fix tests by rolling back extended collision boxes for

e98af15

line labels. This could lead to label collisions in the distant field.

Trying to make sense of how line collision boxes work.

5e06300

Make unit test for CollisionFeature account for pitch padding.

6e66906

Standardizing vertex shader precision on "highp" following discussion…

47f02f1

… in: #2096 Change some variable names from camel-case to underscore-separated.

Replace conditional with step. Add infix spacing.

a8c7969

Pitch scaling for icon-rotation-alignment: map.

0a7e169

Standardize order of cameraToCenter vs cameraToTile

f96db38

More detailed explanatory comment for max-camera-distance property.

c293dbc

Only redo placement on pan operations if the map is tilted enough for

f167af0

perspective to make a significant difference in collision detection.

ChrisLoer added the under development label May 4, 2017

ansis mentioned this pull request May 11, 2017

the future of labelling #4704

Closed

ChrisLoer closed this Jun 19, 2017

ChrisLoer deleted the cloer_pitched_legibility branch June 19, 2017 16:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP: Pitched label legibility #4682

WIP: Pitched label legibility #4682

ChrisLoer commented May 4, 2017

ChrisLoer commented May 4, 2017

ChrisLoer commented May 5, 2017

ChrisLoer commented Jun 19, 2017

WIP: Pitched label legibility #4682

WIP: Pitched label legibility #4682

Conversation

ChrisLoer commented May 4, 2017

ChrisLoer commented May 4, 2017

ChrisLoer commented May 5, 2017

ChrisLoer commented Jun 19, 2017