mapbox
Downsize images to prevent reaching max hardware texture size on mobile
When I run my react application on Safari or Chrome mobile this message is showed on the console:
WebGL: INVALID_VALUE: texImage2D: width or height out of range
mapbox-gl-js version:
"mapbox-gl": "^1.7.0",
browser: Safari and Chrome Mobile
Device: Ios 13.2.2
Steps to Trigger Behavior
add a overlay source:
map.addSource("overlay", {
type: "image",
url: "https://images.unsplash.com/photo-1573592919522-cb19b002d543",
coordinates: [[], [], []]
});
Link to Demonstration
https://codepen.io/ronaiza_cardoso/pen/YzXGKoq?editors=0010
Expected Behavior
Load overlay image on mobile devices
Actual Behavior
Black image loaded with the fallow msg error on console.log
WebGL: INVALID_VALUE: texImage2D: width or height out of range
It looks like this image is over the hardware restriction size of your mobile device. It's 3344 × 5016, most iOS device have a hardware restriction with gl es with images up to 4096x4096. Have you tried using a smaller resolution image?
the overlay image that I'm using is out of my control, I'm also using google maps and when this image is rendered they resizing it. I was wondered if mapbox could do the same.
I think it would be an appropriate fallback to provide within the library. I'll reword the title so this isn't misinterpreted as a bug.
A better solution would be to tile images from an image source. Our current image source implementation takes an image as is, and tries to render it. However, this leads to problems like the one described by OP. Changing the image source to be tiled (and adding code that generates tiles from images) also means that we could remove some special-cased code in the raster rendering pipeline. Additionally, it'd open the door for reading large TIFF images, or pyramidal TIFFs directly from the server.
