[WebGL/JS] textures zwart na laden. hard-refresh nodig

[Verwijderd]

Hallo,

Ik ben bezig een webgl applicatie te schrijven om een dataset met 2D slices om te zetten naar een 3D beeld. Ik loop tegen volgend probleem aan: Als de pagina laadt, dan blijven de textures allemaal zwart. Pas ne een refresh werkt alles. Ik ben een beginneling in javascript/webgl, maar na 48 uur google/debuggen kan ik het probleem niet vinden.
Ik ga als volgt te werk.
- Laden van de image Array.
- Elk beeldje wordt getekend op een canvas (2D) element.
- De correcte pixels worden uitgelezen.
- De pixels worden in een buffer geschreven (PNGlib library)
- Na de bewerkingen schrijf ik het nieuwe beeldje in een array.
- Ik bind het beeldje aan de juiste texture. (initTexture();)

Ik heb al uitvoerig zitten testen/klo*ien met img.onload events, maar daar werkt het ook niet mee. In tegendeel, dan werkt het juist minder/niet.

Als iemand mij kan helpen, hoogstwaarschijnlijk zit(ten) de fout(en) in de naarSagitaal() functie, maar ik heb ze nog niet gevonden.

Bedankt,

JavaScript:

var crateTextures = Array();
    var crateArray = Array();
    var imageArray = Array();
    var crateImage
    var elem;
    var context;
    var r;
    var g;
    var b;
    function initTexture() {            
            cratefunction();
            for (var t=0; t < 3; t++) {
            var texture = gl.createTexture();
            texture.image = crateArray[t];
            crateTextures.push(texture);            
        }

        crateArray[0].onload = function () {
            handleLoadedTexture(crateTextures)
        }

    }
    function cratefunction(){
        initImages();
        naarSagitaal(); 
    }   
    function naarSagitaal(){
        elem = document.getElementById('myCanvas');
        context = elem.getContext('2d');
        for(var z=0; z<3; z++){
            context.drawImage(imageArray[z], 0, 0);
                
            var p = new PNGlib(256, 256, 256); // construcor takes height, weight and color-depth
            var background = p.color(1, 1, 0, 1); // set the background transparent
            var canvasData = context.getImageData(0, 0, elem.width, elem.height);
            for (var i = 0; i < 256; i++) {
                    for (var j = 0; j < 256; j++) {
                            var idx = (j * canvasData.width + i) * 4;
                                r = canvasData.data[idx + 0];
                                g = canvasData.data[idx + 1];                           
                                b = canvasData.data[idx + 2];                           
                                p.buffer[p.index(255-i, j + 0)] = p.color(r, g, b);
                    }
            }
        crateImage = new Image();
        crateImage.src = "data:image/png;base64,"+p.getBase64();
        crateArray.push(crateImage);        
        }
    }   
    function initImages() {
                imageArray[0] = new Image();
        imageArray[0].src = "./data/data0000.png";
                imageArray[1] = new Image();
        imageArray[1].src = "./data/data0001.png";
                imageArray[2] = new Image();
        imageArray[2].src = "./data/data0002.png";
    }