Mapbox-gl-js: WebGL: INVALID_OPERATION: texImage2D: ArrayBufferView not big enough for request

[ozeron]

I have to develop map, with multiple styles, like in this example but with additional custom styles.
I add images to map as markers and load them on custom layers. I use 'style.load' event as reliable way to reload layers, after style loaded.(I know, that it's beign deprecated, but havent found better way for updating layers though. I keep track of #4253 )
But in Safari 10.1 and Chrome 57.02 on MacBook Pro (Retina, 15-inch, Mid 2014) / Version 10.12.4 I see this behaviour.

[Warning] WebGL: INVALID_OPERATION: texImage2D: ArrayBufferView not big enough for request (mapbox-gl.js, line 352) at sprite_atlas.js 241
[Warning] WebGL: INVALID_VALUE: texSubImage2D: invalid texture target or level (mapbox-gl.js, line 352) at sprite_atlas.js 253

I see this error constantly, when changing style. On MacBook Pro (13-inch, Mid 2012) / Version 10.12.4 everything works well, though.

It feels like problem with this event and WebGL. After I change 'style.load' to 'load' I can't reproduce error.

How to reload layers after style is done loaded properly? Any other suggestions? sourcedata and data seems to be fired multiple times, when vector tiles are loaded.

EXAMPLE JS BIN
mapbox-gl-js version: 0.34 and 0.45

Steps to Trigger Behavior

1. Get Retina MacBook
2. Open JS Bin
3. Start to change Style

Expected Behavior

Everything works well

Actual Behavior

Markers are broken.

[mollymerp]

Thanks for this report @ozeron! I was not able to reproduce this bug on my Retina macbook or my external monitor, but I will do some digging about this error message. Some initial searching indicates to me that your environment may not have the default GL_UNPACK_ALIGNMENT.

[GuillaumeTS]

Call stack:

sprite_atlas.js:240 WebGL: INVALID_OPERATION: texImage2D: ArrayBufferView not big enough for request
i.bind @ sprite_atlas.js:240
setSymbolDrawState @ draw_symbol.js:141
drawLayerSymbols @ draw_symbol.js:96
drawSymbols @ draw_symbol.js:37
Painter.renderLayer @ painter.js:288
Painter.renderPass @ painter.js:271
Painter.render @ painter.js:225
e._render @ map.js:1388

[sguignot]

@mollymerp I reproduced this issue using the example jsbin provided by @ozeron on both a Retina MacBook Pro 2015 (chrome 58 and firefox 53) and a Surface Pro 4 (chrome 57). I was also able to reproduce with Retina MacBook Pro 2015 (chrome 58) on an external screen which has low resolution (non retina).

It seems to be a general bug regardless the screen device, I guess this issue should not be tagged as "environment-specific". It triggers randomly and I noticed it was much faster to reproduce when switching the map style to satellite (with the jsbin I switch a few times "dark" <=> "satellite").

In the chrome console, I get the same value=3317 for the WebGL flag you talked about in all the configurations above (the value 3317 seems pretty standard to me):
WebGLRenderingContext.UNPACK_ALIGNMENT
3317

This value seems independent from the screen device.

Could you please reproduce this issue on your side and increase its priority?

Thanks!

[mollymerp]

@sguignot @GuillaumeTS @ozeron I was finally able to reproduce the bug but only on my macbook retina, not my external monitor. When I upgraded the jsbin to the newest release of mapbox-gl-js (v0.37.0) I could no longer reproduce so its possible this has been fixed. Can you reproduce the issue on v0.37.0?

[jfirebaugh]

Given that the issue is triggered by addImage and retina screens, I bet it was fixed by 9ddd3cc08ca3b9386bda02bd0cdc76377ecfcfa9.

[sguignot]

@mollymerp thanks! It seems to be fixed in v0.37.0, I cannot reproduce the issue after upgrading the example to 0.37: https://jsbin.com/putexexise/1/edit?html,js,output

[jfirebaugh]

Thanks for verifying @sguignot!