My texture loading approach is working fine in Chrome or Opera but I got a problem only with Firefox. I am using WebGL2 and loading a 3D texture in a form of one big image where the layers are stored one after another. When I run this simplified example:
<script>
window.onload = function(){
var image = new Image();
image.onload = function()
{
var temp = document.createElement('canvas');
temp.width = 1280;
temp.height = 720 * 64;
var tempCtx = temp.getContext('2d');
tempCtx.drawImage(image, 0, 0);
// The problem is with the line below
var data = new Uint8Array(tempCtx.getImageData(0, 0, temp.width, temp.height).data.buffer);
console.log("loaded");
};
image.src = "test.png";
}
</script>
The image is loading but then I get an error:
Uncaught NS_ERROR_FAILURE: onload <here is a reference to the marked line in the code above>
I have no idea what is wrong. The code is called after all GL initialization and shader compilations but it does not seem to be related to WebGL at all. Any advice is much appreciated!
After some experiments I noticed, that smaller images can be loaded. Is this some kind of a memory limit in Firefox? The image I need is indeed pretty large. I tried to edit dom.max_script_run_time
and image.cache.size
in about:config
but no luck.
Apparently, Firefox is more strict regarding memory usage. There are limits set for the texture and canvas size. There are several solutions:
about:config
to the address, hit enter, Accept the Risk and Continue, type gfx.canvas.max-size
to the search bar and change its value to the one you need or maximal (2147483647) if you're not sure, do the same with gfx.max-texture-size
, restart FirefoxThis solved my issue!