tangrams / tangram

WebGL map rendering engine for creative cartography
https://tangram.city
MIT License
2.22k stars 290 forks source link

Mask non-`opaque` proxy tiles with stencil buffer #704

Closed bcamper closed 5 years ago

bcamper commented 5 years ago

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 https://github.com/tangrams/tangram/compare/f7a10c1...8bfc5d0.

burritojustice commented 5 years ago

\o/

bcamper commented 5 years ago

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.