Black stripes on 3D mode over iOS devices

CesiumJS
1

Hey!

I’m developing a map App using OpenLayers (version 4) and CesiumOL for 3D features for iOS devices using WKWebView.

The first time I implement CesiumOL, I was using UIWebView and when I do zooming or sometimes panning, could see black stripes (strip on tiles). After that, I was researching a little about this issue and found that perhaps the problem was caused by UIWebView render. So I need migrate to WKWebView… When I complete migrate from UIWebView to WKWebView, still could see the black stripes on the map…

Could be a WebGL issue? Any ideas?

Any kind of comment or help will be greatly appreciated!

Thanks!

gastonmz

IMG_0342.PNG
IMG_0342.PNG1024×768 548 KB

IMG_0343.PNG
IMG_0343.PNG1024×768 506 KB

IMG_0341.PNG
IMG_0341.PNG1024×768 705 KB

2

Can you get this to happen in a normal web browser outside of the webview? It’s possible it could be a webgl issue, but it’s hard to tell. Is it always the same tiles that end up black or does it change randomly? Does it happen right away, or after the application is running for a while?

I’m not sure what version of Cesium the open layers project is using, but it’s also possible that you are running into a bug we previously fixed. If you can provide some more details, or provide a way for us to reproduce it on our end, we can look further into it.

Thanks

3

Hey Matthew,

Yes, happen on Chrome or Safari for iOS outside the App too. Are not always the same tiles, are randomly, I think is regarding the zooming… generally when you zoom in. Yes, it’s happen right away.

The Cesium version is 1.27. I will try to provide you a link of my map, so you could check the issue personally.

Thanks a lot!

4

I would highly recommend updating to the latest version of Cesium, 1.33, and see if you can still reproduce the problem. We definitely had a bug like this at one point which has since been fixed; but I’m not sure of what version that happened in. If it still happens with 1.33, then I public link we can use to reproduce it on our end would be a big help.

Also, are you on the latest version of iOS? Safari on iOS9 had all sorts of bugs that were fixed in iOS10.

FYI, it doesn’t matter if you run Chrome/Firefox/Safari on iOS,it’s actually all Safari under the hood, Apple does not allow other browser rendering engines so Chrome/Firefox are just a webview wrapper.

Thanks

5

Yes Matthew, I’m using the latest iOS version (10.3.2) and right now I’m updating to Cesium 1.33 in order to test it!

As soon I have an answer I will let you know quickly.

Thanks again!

6

Matthew:

Here is an example with Cesium 1.33, OL 4.1.1 and OLCesium 1.27. It uses the bing base map (jpg) and additional png layers (labels, bathy, currents, altimetry). As more png layers are added, black tiles increase. Zooming in and tilting the map will create black tiles with less png layers turned on. If you switch the mode to a 2D view, all of the layers work successfully at all zoom levels.

Check it at: http://gastonmz.com/cesium/ios/testios.html

7

Good news/bad news. I tested out your link on my iPhone 7 and everything appears to work great, no black tiles. What model iPhone have you been testing on?

One possible explanation is that this is a WebGL/memory issue (mobile devices have notorious hidden limits for GPU memory and WebGL). If you’re running out of GPU memory, then texture allocation could be failing, resulting in black tiles. One way to try this is to disable a couple of the layers (don’t even add them to imageryLayers and see if the problem goes away. If it is, that points to a hardware limitations with the number of layers you’re using. There are some workaround if that’s the case, so let me know what you find out and I’ll go into more details.

Thanks

8

Hey Matthew, thanks for your testing.

I have an iPhone 6 Plus, 6s and iPad Air 2 where I tested it. All have the black stripes. I have not an iPhone 7 with me yet, but I will try to test it on this device.

Could you please tell me about yours workaround?

Thanks a lot!

9

Hey Matthew!

I’ve updated the sample site adding a background map selector:

  • Bing

  • OpenLayers

  • None

Now, you can select any of these options in order to compare the memory consumption between background layers. Indeed, Bing map baselayer is the best memory eater, followed by the OpenLayers default basemap, and also, you have the option of remove the background map layer and will see how fine is working…

Hope this give you a better sight of the situation. I will much appreciate any kind of opinion and walkaround you could have.

The new url is: http://gastonmz.com/cesium/ios/index.html

Thanks again.

IMG_2438.PNG
IMG_2438.PNG576×1024 422 KB

IMG_0360.PNG
IMG_0360.PNG1024×768 1000 KB

10

Assuming it is a memory/GPU issue, there are only 3 things I can see helping. Normally, I wouldn’t recommend trying to detect iOS, but in this case I would only apply these changes if problem devices are detected somehow. Here they are in my preferred order of usage (no need to use all 3).

  1. If it is a GPU issue, then the root problem is the number of layers you are showing at once. Simply show less layers on problem iOS devices. Not really a “workaround”, but more a fact of limited hardware. Also make sure that layers not being used are completely removed from Cesium and not just hidden.

  2. Set scene.globe.maximumScreenSpaceError to a higher value when iOS is detected, the default is 2, try 2.5 or 3. This will cause lower resolution tiles to be loaded depending on the view, but will also use less memory.

  3. Set viewer.resolutionScale as low as you can without seeing loss of quality on iPhone (0.5 or lower may be good), this will cause Cesium to render at half it’s normal resolution but use less memory. Here’s a Sandcastle demo you can play with: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=38b8671d1bfb0e78941b8c5fbb68f126

I hope this helps. I still haven’t been able to reproduce the problem myself; but I can’t think what else it could be.