Globe atmosphere does not work on Android/Chrome

[gilmotta]

Hi,

I am testing CesiumJS to use it in my mapping project. CesiumJS works well on my desktop it seems but on my Android Galaxy S21 with Chrome version 102.0.5005 I can't see the globe. I only see a black ball. The same with Firefox version 101.1. on the same device.

I don't know if this is a good comparison but WebGL Earth demo works fine.

Thanks, Gil

[ggetz]

Hi @gilmotta, could you visit https://webglreport.com/ with the android device and take a screenshot of the results?

Also what CesiumJS demo are looking at? Do you have a link?

[AndresPozo]

Hi, I have the same problem in a Samsung Galaxy Tab S7 with Android 12 and an old LG G6 with Android 8. When the viewer is zoomed out to show the full globe it only draws a blue outline and black globe. If the viewer is zoomed in to show a country or smaller areas the visualization is correct. This happens for all the examples in Sandcastle, including the "Hello World" example.

The results of https://webglreport.com/ are attached to this message.

[AndresPozo]

Hi again, I have another clue: I think this problem is related to the GroundAtmosphere effect. After disabling it with "viewer.scene.globe.showGroundAtmosphere = false" the globe gets rendered right. This can also be tested with the example Atmosphere in Sandcastle.

[ggetz]

Thanks @AndresPozo.

@sanjeetsuhag Is it possible this has to do with the latest atmosphere updates?

[sanjeetsuhag]

@ggetz Yeah, it's likely linked to the recent changes.

@AndresPozo In the Atmosphere Sandcastle, in the Ground Atmosphere settings, would you be able to try increasing the values of Lighting Fade Out Distance and Lighting Fade In Distance and see if that affects the result at all.

[AndresPozo]

@AndresPozo In the Atmosphere Sandcastle, in the Ground Atmosphere settings, would you be able to try increasing the values of Lighting Fade Out Distance and Lighting Fade In Distance and see if that affects the result at all.

It doesn't change anything

[sanjeetsuhag]

Based on some additional testing, the problem may be somewhere in core scattering loop of the atmosphere because the rayleighColor and mieColor are both black.

• [ ] Investigate initialization of varyings
• [x] Investigate values of uniforms
• [x] Look into potential bug with the normalize GLSL function in Android

[sanjeetsuhag]

The only problem here seems to arise from the usage of per-fragment ground atmosphere. The following causes have been ruled out:

• [x] passing varyings directly as arguments
• [x] computeEllipsoidPosition failing

[sanjeetsuhag]

Source: https://deviceatlas.com/blog/most-used-smartphone-gpu

From my limited testing so far, this issue affects devices with Adreno GPUs. PowerVR GPUs show up more often, in lower end devices.

In the US, however, Adreno GPUs are slightly more popular.

[andersan]

@sanjeetsuhag any idea how to fix this issue? is there a feature I can turn on/off that will cause this not to happen?

[sanjeetsuhag]

@andersan No fix for this yet. Setting scene.globe.showGroundAtmosphere should disable the atmosphere effect on the terrain.

[andersan]

@sanjeetsuhag thanks, that fixed the bug for my use case! (Android chrome, oneplus android device, using Cesium via Resium+React.js)

[ggetz]

@AndresPozo or @gilmotta, could you give this a try using the latest version? We had some performance improvements go in related to atmosphere

[AndresPozo]

@AndresPozo or @gilmotta, could you give this a try using the latest version? We had some performance improvements go in related to atmosphere

Still does not work using Cesium 1.105.1

[ggetz]

Thanks for testing @AndresPozo!

[epiphyllumbl]

Still does not work using Cesium 1.110.0

[arinmodi]

Facing the same issue, is any one found any fix ? I don't want to disable the showGroundAtmosphere. Thanks

[na9da]

I suspect the drop in precision for structs described here is what is causing it. For affected GPUs, numeric values within a struct have only half the precision of regular non-struct values.

They also have a page which lets you test the struct precision on your devices. My Pixel5a reports 10 for struct floats in fragment shader and 23 for regular float values.

The relevant code path might be especially sensitive to change in precision as it computes exponentials in a few places.

To test the theory, I tried swapping structs with plain fields along the code path and the globe gets rendered ~correctly~. AFAICT the change hasn't short circuited any code path, so must be correctly handling the precision. (You can test the change by building the code and opening the sandcastle home, the globe should be visible if it worked.)

I'm not sure what a correct fix could look like as it also could affect other code paths that are sensitive to precision and replacing structs might not be easy. In this ThreeJS thread they talk about working around by selectively replacing structs with plain fields where they find it to be a problem.

[na9da]

With the changes, although the globe is fully visible - the rayleighColor and mieColor does not match what I see in desktop. So there could be more to it?

desktop:

mobile (with the changes):

[na9da]

I have pushed some more changes to replace the return struct in czm_rayEllipsoidIntersection function and now the rendering in mobile seems to match the desktop.

mobile (with latest changes):