When I add a bunch of objects to the scene I am getting a dark shaded area (see pic) that encompasses (most of) the added objects when viewing on mobile devices. I do NOT see this dark shaded area when viewing on a PC.
I have tested and see this behavior on iPad 2, iPhone 6s, Samsung Galaxy 4 Tab…
This effect occurs whether I add entity.ellipsoid objects or entity.point objects or ellipsoidgeomtry objects (added via scene.primitives.add or via viewer.entities.add).
Any suggestions on what might be causing this or more importantly what I can do to prevent this shaded area from displaying?
We’re using Cesium 1.15. We have been using Cesium for a while, but unfortunately we’ve never run sites on mobile devices that have a bunch of objects added like this (up until now we had only viewed sites like this on a PC).
What’s interesting is that we do have sites that add maybe 5 to 20 similar objects over a much smaller area that don’t exhibit this problem. Below is a screen capture from the same iPad of a site that is adding about 8 or 10 ellipsoidgeometry objects via a primitive collection and there is no shaded area around these.
Hmm, that is interesting.
Could you possibly post a code sample or some sample data that causes this to happen? That would make it easier for us to look into the problem since we’ve never come across this before.
My initial assumption was wrong. It is not the ellipsoids being added that is causing the shading.
There is a geo-referenced image being added as a layer using a SingleTileImageryProvider. The rectangle is being defined using the data from the image’s world file.
The screen captures I posted show the shaded area that is visible when the web site is viewed on mobile devices. But the exact same web site does not have the shaded area when viewed on a PC.
Does anyone have any ideas what might be causing this shaded area on mobile devices when displaying a geo-referenced image as a SingleTileImageryProvider layer?
The screen captures above are of the exact same web site. The picture with the shaded area is captured from an iPad while the picture without the shaded area is captured from a PC.
Sorry for not following up with you on this. I haven’t had a chance to test it on a mobile device myself yet so I still don’t know what would be causing this to happen.
Could you paste a code sample of how you’re adding the SingleTileImageryProvider layer? That would make it easier for us to track down the problem.
// Determine bounds based on image size and data from world file
var west = parseFloat(wParams[4]);
var south = parseFloat(wParams[5]) + (img.height * parseFloat(wParams[3]));
var east = parseFloat(wParams[4]) + (img.width * parseFloat(wParams[0]));
var north = parseFloat(wParams[5]);
var imgRect = Cesium.Rectangle.fromDegrees(west, south, east, north);
// Adjust bounds to use for centering view
west = west - 0.15;
south = south - 0.15;
east = east + 0.15;
north = north + 0.15;
var viewRect = Cesium.Rectangle.fromDegrees(west, south, east, north);
var newLayer = layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : baseURL + fileName + urlEXT,
rectangle : imgRect
}));
// Center view on overlay
if (blnCenterOnImage) {
scene.camera.setView({destination: viewRect});
}
}
``
I know we had issues 6 or 8 months ago when we were trying to add “overlays” like this. The problem had to do with creating a rectangle big enough for the SingleTileImageryProvider but not too big. For some if we created a rectangle with bounds that exactly matched the image then it was large enough.
However, this code works as is when viewed on a PC via Chrome or IE. So not sure why we’re having the issue on mobile devices.
I’ve attached the image (and supporting files) that we’re using.
Great, thank you, this is very helpful. I don’t have access to a mobile device right now, but I’ll see if someone else on the team can take a look at it. If not, I’ll be able to test it myself in a few weeks and get back to you.
I decided to give this a try using Sandcastle. I created a Sandcastle example hard-coding the rectangle bounds and URL reference to the PNG file. As expected the example ran fine on a PC.
I then created the same example in Sandcastle using the iPad. When I tried to run the example I got the following error message…
An error occurred while rendering. Rendering has stopped.
undefined
DeveloperError: Width must be less than or equal to the maximum texture size (4096). Check maximumTextureSize.
DeveloperError@https://cesiumjs.org/Cesium/Source/Core/DeveloperError.js:43:28
…
Is this indicating that the maximum texture size capability on the iPad is being exceeded?
