visgl / deck.gl

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

deck.gl doesn't antialias properly on top of Google Maps #7647

Open smcallis opened 1 year ago

smcallis commented 1 year ago

Description

Here's a current screenshot of the deck.gl/Google maps API example from here

image

As you can see the lines look quite rough.

Flavors

Expected Behavior

Lines/arcs should be antialiased.

Steps to Reproduce

Use code from [here]((https://developers.google.com/maps/documentation/javascript/examples/deckgl-arclayer).

Environment

Logs

No response

smcallis commented 1 year ago

In my app I'm building, if I forcible create a webglOverlayView and set the map to it, then things seem to be antialiased.


     const map = new google.maps.Map(document.getElementById('map'), {
       center: {lat: 0, lng: 0},
       zoom: 2,
       mapId: "<redacted>"
     });

     // Create a WebGL Overlay View instance.
     const webglOverlayView = new google.maps.WebGLOverlayView();

     // Add the overlay to the map.
     webglOverlayView.setMap(map);

     const overlay = new deck.GoogleMapsOverlay({....```
smcallis commented 1 year ago

It looks like the issue is interleaved being true by default, if I disable that, then it's able to draw antialised lines.

smcallis commented 1 year ago

When interleaved is on (the default), it reuses the WebGL context from the map, which seems to not draw antialiased by default. If I set interleaved to false, it looks better, but I get issues with z-fighting or overdraw or something: image

Does anyone have any thoughts on a workaround to enable antialiasing on the google maps context?

merenzo commented 1 year ago

@smcallis - How do you set interleaved to false ?

smcallis commented 1 year ago

I believe you can just set it in the properties when you create the Overlay:

https://github.com/visgl/deck.gl/blob/master/modules/google-maps/src/google-maps-overlay.ts#L26-L42

smcallis commented 5 months ago

This is still an issue on latest Deck.GL FYI:

image

auauwolff commented 1 month ago

Same issue here using interleaved on

image

smcallis commented 1 month ago

Wish I had a resolution to offer but I've given up on it.

On Sun, Aug 18, 2024 at 9:05 PM Felipe Wolff @.***> wrote:

Same issue here using interleaved on

image.png (view on web) https://github.com/user-attachments/assets/50554a65-e741-4665-9150-5321d904d2ae

— Reply to this email directly, view it on GitHub https://github.com/visgl/deck.gl/issues/7647#issuecomment-2295578956, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGEMKW6RUTPUPZ5DNOM7LLZSFOF3AVCNFSM6AAAAAAU5I2LKOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJVGU3TQOJVGY . You are receiving this because you were mentioned.Message ID: <visgl/deck. @.***>