mapbox / mapbox/mapbox-gl-js

Some symbols disappear in globe projection between zoom levels 5 and 6

Open
#12,645 3 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

3d :triangular_ruler: bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

**mapbox-gl-js version**: 2.13.0

**browser**: Chrome 111

### Description
Symbols of these types:
1. Line labels
2. Point labels with variable anchors
3. Symbols with both `text-variable-anchor` and `icon-text-fit` set

are not rendered in globe projection between `GLOBE_ZOOM_THRESHOLD_MIN` and `GLOBE_ZOOM_THRESHOLD_MAX`.

### Steps to Trigger Behavior

1. Go to https://codepen.io/osvodef/pen/povExxg
2. Zoom in

### Link to Demonstration
https://codepen.io/osvodef/pen/povExxg

### Expected Behavior
All labels stay visible while crossing zoom levels 5–6

### Actual Behavior
3 labels disappear, 1 stays

### Additional info
I did a bit of detective work myself on this issue, hope this helps.

I tracked the bug down to symbol vertex shaders and `u_zoom_transition` uniform. Forcing its value to 0 makes the labels appear, but on wrong positions on the screen, as if no globe→mercator transition is happening.

In the shaders, I found this line that hides the labels when `u_zoom_transition > 0`:
```
#if defined(PROJECTED_POS_ON_VIEWPORT) && defined(PROJECTION_GLOBE_VIEW)
projection_transition_fade = 1.0 - step(EPSILON, u_zoom_transition);
#endif
```

However, just removing this line doesn’t fix the issue since the screen coordinates calculated by the shader are also wrong when `u_zoom_transition > 0`, usually putting the symbol completely off-screen.

The `projection_transition_fade` line suggests that this was done intentionally, however, I couldn’t find any relevant discussion in PRs/issues here so I decided to report it anyway.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodePen reproduction and inspect the symbol vertex shaders around u_zoom_transition, GLOBE_ZOOM_THRESHOLD_MIN/MAX, and projection_transition_fade. Compare the globe-to-Mercator transition calculations for line labels, variable-anchor point labels, and symbols using text-variable-anchor with icon-text-fit. Done means all affected labels remain visible and correctly positioned while crossing zoom levels 5–6.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics, data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.