SingleTileImageryProvider fails to render large images
- Dominant language
- JavaScript
- Stars
- 15.7k
- Forks
- 3.9k
- Avg merge
- 4d 6h
- Merged PRs (30d)
- 34
Description
## Description
Loading large-ish images via the `SingleTileImageryProvider` may fail due to the image exceeding the maximum permitted WebGL texture size (along any dimension). The exact limit depends on the browser configuration. In my tests it was 16k for most Desktop browsers, whereas my Android test devices only support images up to 4k. I have included an image with dimensions of 16385x16385 in the Sandcastle example for ease of reproduction.
Sandcastle example: https://sandcastle.cesium.com/#c=bZDdSsNAEIVfZchVC91dQhWkpkXMhQQELS1KJTebZGzHbnbj7iYllb67SYtQtVfzd74zwzTSQkO4QwtT0LiDGB3VJX859gZpkB/r2GgvSaNNgxF8pRqASrlG2z5b01CBdnIOL0ivFS5JYfJbNTiiALVVk1MGkAYb7ys3EYI4ZRnPjfBX5eLmYy7Cbcge4mu2ClncsiQbbxr2GrI327K5+hzv2X1iQ5YYNl/ySq+723rTw7ALh+FtqoNREDnfKpz9LLujsjLW9wcMOBcey0pJj05kdb5Fz3PnerCXRuIcjQpqgIrphYdArqRz3eS9VmpBe0yDWSQ6/T9UGVl0r3lq0CrZ9rJNOHs8NTnnkejKy6Q3RmXS/nH+Bg
Browser: Chrome 89.0.4389.82
Operating System: macOS Big Sur 11.2.3 (20D91)
Cesium: 1.79.1
Stack trace for completeness (and Google indexing):
```
An error occurred while rendering. Rendering has stopped.
DeveloperError: Width must be less than or equal to the maximum texture size (16384). Check maximumTextureSize.
Error
at new DeveloperError (https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:83:13)
at new Texture (https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:95713:13)
at ImageryLayer._createTextureWebGL (https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:244125:12)
at ImageryLayer._createTexture (https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:244179:24)
at Imagery.processStateMachine (https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:242938:25)
at TileImagery.processStateMachine (https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:243043:20)
at GlobeSurfaceTile.processImagery (https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:242298:45)
at Function.GlobeSurfaceTile.processStateMachine (https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:242231:44)
at GlobeSurfaceTileProvider.loadTile (https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:247389:26)
at processSinglePriorityLoadQueue (https://sandcastle.cesium.com/CesiumUnminified/Cesium.js:252306:20)
```
## Possible solution
A possible fix for this issue would be tiling too-large images on the client side. I have implemented a proof of concept for this feature by copying the requested tiles from the source image to a canvas and returning the canvas in place of the tiles, although there is of course some performance impact. If this is a desirable change let me know and I will clean it up and submit a PR.
Contributor guide
Research direction
Reproduce the 16385x16385 image in the linked Sandcastle example, then start with SingleTileImageryProvider and the ImageryLayer._createTextureWebGL path shown in the stack trace. Check how the source image becomes WebGL textures on devices with 4k and 16k limits. Done means oversized images render without the maximum texture size error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100