azure-mapsazuremapscontrol

Azure Maps Control disable back face culling for transparent polygon extrusion layers


I currently have a polygon extrusion layer in my Azure Maps Control project containing multiple shapes that are partially transparent and others that have a solid color. Due to the back-face culling mechanism, the faces of the solid shapes are not visible through the transparent shapes. Is there any way to disable the culling mechanism, or is this a restriction of the graphics pipeline?

See screenshot as context:

enter image description here


Solution

  • I'm fairly certain back face culling is done on everything within the map for performance reasons, as well as occlusion culling/clipping. I'm not aware of any way to disable this. It looks like this was added back in 2018. I have rarely came across anyone using opacity with extruded polygons, and this is the first time I have heard of anyone wanting to disable back face culling. With that in mind, I doubt this is something that would be added any time soon.

    That said, if this is something you absolutely need, there are a couple of things you could try.

    1. If you read through that old PR you will see that winding order of the coordinates matter. I did try simply reversing the winding order and that didn't make a difference, neither did adding a second polygon with the reverse coordinates. However, I did find that if I take the exterior coordinate ring, make a copy of it and reverse that, and add it as a second ring (inner ring) of the polygon, it does render the inside face of the polygon extrusion. However, you don't have a top to the polygon anymore since we collapsed the inside of it. That can however be addressed with a second, thin extrusion being added at the top. Here is a simple example:
    var ring1 = [[-122.132815, 47.636661], [-122.133631, 47.636676], [-122.133636, 47.63652], [-122.133523, 47.63651], [-122.133545, 47.636361], [-122.133759, 47.636361], [-122.133759, 47.636173], [-122.132703, 47.63617], [-122.132713, 47.636343], [-122.13303, 47.636347], [-122.133035, 47.636528], [-122.13281, 47.636528], [-122.132815, 47.636661]];
    
    var ring2 = [...ring1];
    
    datasource.add(new atlas.data.Polygon([ring1, ring2]))
    
    1. Another option is to use a custom WebGL layer and create your own polygon extrusions using a library like tree.js or babylon.js. This would give you complete control over how the models are created and rendered (e.g. you could use materials for texturing).