Problems with clamped polygons on mobile devices

[moisesrbd]

Based on several posts that have been generated during the last few months and carrying out new tests with various mobile devices on Android, we have detected a problem with the polygons campled to ground over 3D tiles or Terrain. Polygons don't draw well when viewed on mobile devices.
When approaching (close) you can notice that areas of the polygon disappear.
More details can be seen in @tonycedeno post
https://community.cesium.com/t/problems-with-clamped-polygons-on-mobile-devices/14627

Sandcastle examples:
Original Sandcastle
In the following link from sandcastle you can see that when zoom-in near the polygon “Draw Polygon” option also has this erratic behavior

You can see this behavior on this Story hosted in Cesium ION:
Story

Related issues already closed:
Some posts that could be related and that are closed: #7273 #8953 #6735

On the other hand I have noticed that using 3d-tiles with classification have a similar behavior.

Browser: Google Chrome
Operating System: Android 10

Devices tested:

• Samsung S20+
• Samsung S20 Ultra
• Huawei P20 Lite
• Samsung Galaxy Tab

CesiumJS version 1.83

Any type of help that you can offer us to solve this issue will be very helpful since the functionality of showing clamped to ground entities is one of the main ones to visualize on mobile phones.

Best
Moses

[rober72hv]

Yes, apparently it is not very easy to solve. ​But the community doesn't seem to have a solution or explanation for this yet.

A proposal, while this issue is resolved, could make a tool that allows obtaining polygons not clamped from the clamped. ​I mean if you could create a grid and get the ground points including the height (I have no idea how to do it yet, but I imagine they can be obtained). Then with those points create a substitute Polygon that is not clamped. Of course, this polygon will not have the quality of the original.
Perhaps the community may have some other ideas to help solve these use cases that, as you say, is super relevant, because visualization on mobile devices is a great need.
Important as you mention about the classification, I have tried sandcastle and it happens as you say, mainly when using a Textured Material.
Therefore, it not only impacts the clamped polygons, but also the classification of 3Dtiles and Terrain.

Cheers

[antoniocedeno]

Yes @moisesrbd, in fact we are facing this problem, in both, polygons and using 3d-tiles with classification. I have tried this sandcastle with a polygon over a tileset.

As @rober72hv mentions, while this issue is resolved, it is possible to implement a custom clampToGround solution for polygons, but we have no idea how to solve or create something like 3d-tiles with classification.

Cheers

[lilleyse]

One thing to try is to switch to a WebGL 2 context.

var viewer = new Cesium.Viewer("cesiumContainer", {
  contextOptions: {
    requestWebgl2: true
  }
});

The clamping implementation works best when gl_FragDepth is available which is always true in the WebGL 2 context. Some mobile devices don't support the EXT_frag_depth extension in the WebGL 1 context.

If that doesn't help it may be a harder problem related to fragment shader precision issues for some mobile devices.

[moisesrbd]

Thanks @lilleyse I will test this option and get back to you with results.

[moisesrbd]

I did a group of tests using the option suggested by @lilleyse , the results are:

• When using Chrome the scene fails, the screen flashes white constantly. It must be that the version that i use (92.0.4515.115) does not support this context.
• Using Firefox, an improvement is noticeable, perhaps I notice a little less performance but the scene looks much better, the polygons do not disappear.

It would be interesting to know how to detect if the browser supports this context.
I'll keep researching these points, but if anyone in the community knows about it, it would be great.
Thanks
Moises

[moisesrbd]

New updates.
When use

var viewer = new Cesium.Viewer("cesiumContainer", {
  contextOptions: {
    requestWebgl2: true
  }
});

3D tiles and CZML entities that have opacity less than 1 are not shown on mobile devices with Android 10.
All entities that have transparency and 3D tiles disappear from the scene. If we don't use webgl 2, the clamped polygons disappear and the entities with opacity display correctly.
Any other ideas?

See sandcastle

Best regards

[moisesrbd]

Tested using CesiumJS 1.84.
Same problems.

Using Android and Firefox

var viewer = new Cesium.Viewer("cesiumContainer", {
  contextOptions: {
    requestWebgl2: true
  }
});

• Clamped Polygons OK
• 3D Tiles and Entities with opacity < 1 disappear

Not using requestWebgl2: true

• Clamped Polygons don't work
• 3D Tiles and Entities with opacity < 1 OK