search

visgl / deck.gl

WebGL2 powered visualization framework
https://deck.gl
MIT License
12.06k stars 2.08k forks source link

[Bug] Icon Layer Borders Transparency #7297

Open carlospg79 opened 1 year ago

carlospg79 commented 1 year ago

Description

I detected a problem with pixel rendering for the borders of Icon layers. Althought the problem is more visible in our custom layer, I can see the same problem at https://deck.gl/docs/api-reference/layers/icon-layer

The problem seems that a weird rendering issue with the pixels colors. in this screen shot, you can see that some borders are displayed white. This is because the basemap has a white theme, but some borders are calculated correctly. image

if I rotate the view for these POIs, the problem is the inverse, and the previous correct border, now is the only "bad" border image

this is a zoom of my icons rendered, showing the basemap road in the icon borders. image

The problem seems as the near the camera (+ z-index, gets rendered and the pixels get the color mixing his transparency/alpha with the basemap, and then, if you have another icon with less z-index, his pixels are not rendered because the first icon will cover the second icon.

Flavors

Expected Behavior

All the icons where displayed without border problems

Steps to Reproduce

Open iconlayer demo https://deck.gl/docs/api-reference/layers/icon-layer, pitch the camera and see the problem. Maybe a full page zoom is needed to make icons greater.

Environment

Logs

No response

felixpalmer commented 1 year ago

The issue here is transparent objects are being rendered in the incorrect order. Deck is always rendering the objects in the same order, but depending on how you move the camera then the first drawn object may be close to, or far from the camera.

What is happening with the white borders is that a label is being drawn and blended with the white basemap in its transparent region. Then another label is drawn behind it, partially obscured, but the first label still has the wrong blended color on the edge.

There is no quick-fix to this that would performantly work in all cases. If your dataset isn't too large (or the camera doesn't rotate) you could sort your data so that the labels furthest from the camera are drawn first. Also you could try to keep transparent regions in your icons to a minimum.