tangrams / tangram

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

Features in inlay style over-draw each other #632

Closed westnordost closed 6 years ago

westnordost commented 6 years ago

So I understood the documentation of the inlay and overlay blend mode to be in concept like opaque, only that it allows alpha within the layer so that it can be interlaced into the scene.

inlay

Now, the outcome is a bit different as expected (for extruded features):

  1. The renderer does not respect any z-order for each feature. It looks like every building here is just drawn on top of each other, as if each building was transparent (which it isn't, it is a solid color)
  2. Even within one building, this is the case

This is something that of course can be expected from the multiply(and add) blend mode, but I find it certainly unexpected from the inlay/ overlayblend mode.

It is even more apparent in this demo scene, where I changed the map background to turqoise: Here is a minimal demo scene You see that the buildings themselves do not appear transparent, but they appear transparent to each other only. (Compare with multiplyand opaqueblend mode.)

So, to recap: As a user, I would expect the blend mode inlay and overlay to draw all the features in the draw rule as opaque (to each other) and fiddle in this layer into the rest of the scene.

I did not check if the same behavior occurs for tangram-ES.

hjanetzek commented 6 years ago

Have you tried blend mode translucent? :) The behavior that you expect needs a two-pass rendering - inlay and overlay are still useful for 2D geometries.

westnordost commented 6 years ago

Ah I see, I did not know about translucent, Tangram play did not show it as an option. So it does exactly that (two-pass-rendering) then(?). Perhaps the tangram documentation could be updated - is there a public repository for that?

tallytalwar commented 6 years ago

Here is the public repo for the docs @westnordost: https://github.com/tangrams/tangram-docs and its updated with blend: translucent (https://github.com/tangrams/tangram-docs/blob/fde623b7a90dfad170f921f4a5a08188ae1e9f98/pages/styles.md#blend)

westnordost commented 6 years ago

Cool, thanks for the hint!