[HeatmapVis] Image with one axis dimension above 2**13 cannot be displayed on Firefox

[loichuder]

Describe the bug

Image with one axis dimension above 2**13 = 8192 cannot be displayed when running H5Web in Firefox.

To Reproduce

1. Go to https://h5web.panosc.eu/?file=issue_1053.h5
2. Click on dataset dim8192
3. See that the image displays fine
4. Click on dataset dim8193
5. See that the image shows the color associated to 0.

Expected behaviour

Images with dimensions above 2**13 should be displayed as in Chrome.

Context

• OS: Ubuntu 20.04
• Browser: FF98
• Version: 3.0.2
• H5Web context: all

[loichuder]

I think I found the source of the problem: WebGL report tells me that the max texture size is 8192 for Firefox but 16384 for Chrome.

The question is: could we work around this ?

[t20100]

Either with TiledHeatmapMesh and subsampling the dataset or by displaying the image as multiple tiles of size below the limit.
I'd go for the first one.

[axelboc]

I've just tried this again in Firefox 129 on Windows and the problem seems to be gone. WebGL Report gives a max texture size of 16384 like Chrome. That being said, the problem still stands of course, just with larger dimensions.

Note that we received a bug report by email from a user experiencing a similar issue with the RGB visualization (which receives a texture three times greater than the Heatmap vis by design) with a dataset of size 2400 x 1200 x 3. I don't think the WebGL error is quite the same as in this issue, though, since it doesn't seem to relate to the size of a single dimension but to the size of the whole texture:

WebGL warning: texStorage(Multisample)?: Requested size at this level is unsupported.

It would be nice to find a way to detect these warnings ahead of time so we can provide users with more useful feedback than a black visualization. Ideally this shouldn't be based on a heuristic but more on feature detection, since it clearly depends on browser/device.

[t20100]

Here is some Python code that checks if a texture can be created for a given format/size configuration:

https://github.com/silx-kit/silx/blob/269d0cb39dd07c2cd591e8c002b952f11be3838f/src/silx/gui/plot/backends/glutils/GLTexture.py#L42-L60

Maybe something similar can be done with TS/three/WebGL 🤷