Skip to content
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

Mask non-opaque proxy tiles with stencil buffer #704

Merged
merged 3 commits into from
Feb 20, 2019

Conversation

bcamper
Copy link
Member

@bcamper bcamper commented Feb 13, 2019

This PR eliminates a long-standing, nasty artifact that occurs with features rendered with non-opaque blend modes when zooming -- as one or more levels of proxy tiles are rendered on top of each other (and/or with the new tile that is loading to replace them), the compounding alpha causes a flickering effect.

This PR avoids these artifacts using the stencil buffer: proxy tiles are drawn from front to back, with the stencil buffer adjusted for each level (e.g. zoom ancestor or descendant level) such that proxies will only draw pixels not previously covered by a previous level. Note, it's important that pixels from proxies are allowed to overwrite other pixels from the same proxy level, for overlapping geometries to render properly; we just want to mask out pixels from other, previously draw proxy tile levels.

(The translucent blend mode already avoided this problem, also by using the stencil buffer, though tailored for the particular "x-ray" effect of that blend mode, where backfaces are eliminated from translucent geometry.)

Before 😭
tangram-video-1550023010504

After 😌
tangram-video-1550022276650

Note: this PR builds on the commits of #703 for convenience (changed similar code). The specific changes for this feature are f7a10c1...8bfc5d0.

@bcamper bcamper added this to the v0.18.0 milestone Feb 13, 2019
@burritojustice
Copy link

\o/

@bcamper
Copy link
Member Author

bcamper commented Feb 13, 2019

There's an issue when applying this technique to points/text features: unlike polygons/lines, which represent "fixed" geometry in space (thus the proxy tile and foreground tile geometries tend to "line up" and represent the same objects), points and text labels have purely transparent pixels (e.g. for transparent pixels in sprites) and/or partial transparency that unintentionally obscure geometries from other proxy (or foreground) levels. This causes a "cut out" or "x-ray" effect (also typical when mixing depth and alpha). For example:

tangram-1550085912532

The original problem this PR solves is much more acute for polygon geometries, especially because of the large tile-shaped chunks which cause an obvious "pop" It is much less of an issue for point features (at least in current use cases). So for now, this PR disables the proxy stencil technique for points/text (keeping it for polygons/lines). Further solutions for points can be researched for the future.

@bcamper bcamper merged commit 66f72a2 into draw-blend-order Feb 20, 2019
@bcamper bcamper deleted the blend-stencil-mask branch February 20, 2019 03:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants