[Bug] Could not find a 3d context

[Tak1za]

Description

Sometimes when loading the map, we encounter this error:

I did some googling around and found that it could be because of the browser's hardware acceleration being turned off.

I did turn it on, restarted my browser but still encountered this same error sometimes.

I'm not sure if this dependency with 3d context is for supporting deck.gl, but if it is, is there a way I can exclude that so I don't get this error anymore?

EDIT: Turns out vector maps require Web GL (Hardware acceleration) to be switched on for the browser. The google maps documentation also mentions that it automatically falls back to a Raster map if for some reason a Vector map cannot be rendered. So, if a user has their hardware acceleration off, the map is gonna fallback to a raster map.
I've seen this happening sometimes when we test our service on some VDIs with hardware acceleration off.

I think that the library (if handling) is not handling this fallback scenario well because when I see this happening, I'm sometimes returned an empty map with nothing on it. Like a blank off-white screen with nothing on it.

Steps to Reproduce

Try rendering a map view with some markers keeping hardware acceleration off in your browser settings. You need a map id with Vector (tilt, rotation) enabled in order to check the scenario well. The map might load sometimes well, and also give an error in console saying "Attempted to load vector, but falling back to raster" (something along these lines). And sometimes, after you refresh, it'll simply fail and return an error without falling back to Raster.

Environment

• Library version: "@vis.gl/react-google-maps": "^0.5.4"
• Google maps version: weekly
• Browser and Version: Chrome: 122.0.6261.128 (Official Build) (64-bit)
• OS: Windows

Logs

No response

[usefulthink]

Yeah, that is something in the google maps API that we have no influence on. I think the maps API should have a fallback in this case, but that seems to fail under some conditions.

The webgl based renderer is used in google maps at least for all vector-based maps (not sure if also the raster maps are using webgl for rendering), but there should be a fallback there.

Question would be, how can we implement a fallback in case this fails.
If we're lucky this exception is thrown in the context of the map constructor, but from the stack-trace in your screenshot it looks like there are no frames of our library on the stack, so no way to catch that exception (except for maybe hacking something with window.onerror or something like that).

[Tak1za]

Umm.. I actually investigated a little further, and used their sample app in Cloud Shell they provide which uses the Web GL renderer.
Here's the link for that: https://developers.google.com/maps/documentation/javascript/examples/webgl/webgl-overlay-simple

Use the Google Cloud Shell in the link above to give it a try. Turn the map into a satellite one and if you refresh multiple times, it will throw the same error I have attached but it still loads the map and does not fail the map loading.

Whenever this lib is used though, the map load always fails.

EDIT: I actually did give it another try and found it happens without this library too, for example when we switch between map types and then refresh the map view a few times. I've raised an issue on Google's issue tracker for the same.

[downeyfe]

@Tak1za can you please link me to the issue on Google's side? I'm encountering the same issue when switching to satellite if graphics acceleration is disabled.

[Tak1za]

@downeyfe https://issuetracker.google.com/issues/330098647
Here it is, but they didn't respond unfortunately.

I ended up informing my users that they need to keep 3D acceleration on in their browser and there is a chance for intermittent failures.

[downeyfe]

@Tak1za that's frustrating, but thanks for sharing!