The browser supports WebGL, but initialization failed (mobile)

[jl...@georgetown.edu]

1. A concise explanation of the problem you're experiencing.

Fairly simple. Developing an app with Cesium view on Android and the viewer was loading properly until this morning, when I randomly received this error: "The browser supports WebGL, but initialization failed" and relatedly saying it has failed to create the Cesium Widget.

Issue is similar to this: https://groups.google.com/forum/#!topic/cesium-dev/RGbPxa4t4gY

However I am able to see the spinning cube, so there is no WebGL issue.

Any ideas on what to try?

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

I'm loading a built version of Cesium as an asset in Android Studio, which I inject into a Webview in React Native. Again, this all worked well until recently, and there were no relevant changes to that part of the code. Also, this works fine on iOS.

4. The Cesium version you're using, your operating system and browser.

Cesium: 1.7.1
Android Galaxy S7 8.0 Oreo
Browser is default Android (Chrome, I believe)

[Omar Shehata]

Can you show the output you get from http://webglreport.com/ for WebGL 1?

That's peculiar that it suddenly stopped working. Does the error/stack trace give any more info on what check might be failing that would be causing it to throw that error?

Cesium 1.7.1 is pretty old at this point. I wonder if the same issue is in the latest Cesium. We'd definitely like to know if you have a chance to test that. 

[jl...@georgetown.edu]

Sure. I've attached screenshots of the main error as well as what is displayed when I click on the WebGL check. I can confirm that I tried updating to the latest version of Cesium and am receiving the same exact error, so it's not a matter of updating.

I'm not sure what to make of the error, but perhaps it will mean something to you:

error at new t (file:///android_asset/cesium/Cesium) ... etc..

followed by:

error at new B

error at new Ee

then A, J and keeps going...

I'll attach a screenshot of that as well as the WebGL report in a moment.

[Jordan Estes]

Omar, here are the attachments showing the Android errors.

Jordan

[Omar Shehata]

Can you try http://webglreport.com/ ? (Not get.webgl.org).

Looks like it's failing to get the context:

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Renderer/Context.js#L213-L217

It must be an Android specific issue. This seems relevant: https://github.com/mrdoob/three.js/issues/5793#issuecomment-100657954

[jl...@georgetown.edu]

I've resolved this issue. My solution was to add "allowUniversalAccessFromFileURLs={true}" to the React Native Webview. Android/Chrome throws a CORS error when you try to request JS from assets ('file://' vs http or https), but you can disable it by adding this property.

This is not what causes the initial error, which I was never able to isolate, but you can get around that error by firing a reload command to the Webview when the component loads (in React, on componentDidMount). That reload command will throw a CORS error unless you follow the step above, which should put you in the clear.

Hope this helps someone else!

[Omar Shehata]

Awesome, this is definitely going to be a useful resource for anyone else running into this. Thanks so much for digging into it and posting your solution!