javascriptfirefoxhtml5-canvaswebglwebgl2

Getting NS_ERROR_FAILURE when loading a large image in Firefox for WebGL2 3D texture


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.


Solution

  • Apparently, Firefox is more strict regarding memory usage. There are limits set for the texture and canvas size. There are several solutions:

    1. Split the textures to more smaller ones and load them one by one
    2. Make sure that the input images are at the minimal format, e.g., for PNG that it is RGB8 for standard non-transparent image and not, e.g., RGBA16
    3. Adjust the browser settings - type 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 Firefox

    This solved my issue!