-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Fix 1-pixel flickering between tiles on dark styles #12145
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
704f05c
to
0c3f040
Compare
329af1c
to
c6768ae
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM + some minor comments
src/geo/projection/globe_util.js
Outdated
const tileHeight = n - s; | ||
const toUv = 1.0 / GLOBE_VERTEX_GRID_SIZE; | ||
const x = tileWidth * toUv; | ||
const y = -tileHeight / GLOBE_LATITUDINAL_GRID_LOD_TABLE[latitudinalLod]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
how about toUvX
and we could also refactor 1 / GLOBE_LATITUDINAL_GRID_LOD_TABLE(..)
to toUvY
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it's unnecessary to have a separate variable toUv
anymore
const xScale = padding / tileWidth + 1; | ||
const yScale = padding / tileHeight + 1; | ||
const padMatrix = [xScale, 0, 0, 0, yScale, 0, -0.5 * padding / x, 0.5 * padding / y, 1]; | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The code here has now become more complicated, perhaps we could add a comment along the lines of:
// latLon = gridMatrix * (p_grid + scale * (p_grid - grid_center)) which implies
// latLon = grdiMatrix * (p_grid + scale * p_grid - scale * grid_center)
// and the part in parentheses is another transformation which results in:
// latLon = gridMatrix * padMatrix * p_grid
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is fairly trivial transformation matrix composition. Perhaps I could add a comment or two about coordinate spaces.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
indeed I was trying to capture the transformation from spaces as I think that might not be trivial at all for a person encountering it for the first time.
c6768ae
to
c3407d7
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me! I wonder if we should add a more specific render test that has white gaps in pre-PR rendering?
The greenish looking render test |
This pull request fixes the flickering issue between tiles (#11858) by extruding vertices of globe tiles slightly towards the neighbouring tiles. Based on empirical testing I found
0.5
pixels to be enough to stitch seams on all of my test devices using different pixel ratios. It should be noted that the texture sampling is unaffected even though tiles are scaled up by a tiny amount. Any possible extra fragments will have their uvs clamped to range[0, 1]
.Fixes #11858
Launch Checklist
@mapbox/map-design-team
@mapbox/static-apis
if this PR includes style spec API or visual changes@mapbox/gl-native
if this PR includes shader changes or needs a native portmapbox-gl-js
changelog:<changelog>Fix pixel flickering between tiles on darker styles in globe view.</changelog>