Не загружаются текстуры в webgl. чтение и управление с 2D-холста, сохранение в массиве

Я пытаюсь (новичок) создать приложение в webgl. Я дошел до того, что хочу загрузить массив изображений и выполнить некоторые манипуляции с пикселями. Я пытаюсь получить первый столбец пикселей каждого изображения в массиве и создать с ним новое изображение. затем поместите это вновь сгенерированное изображение в другой массив. (затем переход к следующему столбцу и т. д.)

Я выполняю это, рисуя изображения на 2D-холсте, а затем считывая пиксели. После пары рекурсий я получаю нужное изображение и записываю его с использованием кодировки base64 (и библиотеки PNGlib.js) обратно в массив.

проблема в том, что все текстуры остаются черными при загрузке страницы. Это так, пока я вручную не перезагружу страницу.

http://home.scarlet.be/~cornetp/ (проверено только в Firefox 4)

Я хочу, чтобы изображения появлялись немедленно, если кто-то может взглянуть на них,

Благодарность,

    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();
        toSagitaal();   
    }   
    function toSagitaal(){
        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:imagef/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";
    }

javascript html webgl textures getimagedata
person user702387    schedule 12.04.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ваша проблема в том, что, например, строка

   imageArray[0].src = "./data/data0000.png";

инициирует загрузку изображения, но не ждет ее. Поэтому, когда вы сразу вызываете toSagitaal(), изображения еще не загружены.

Обычно вам нужно указать обработчик, который что-то делает при загрузке изображения. Для этого вы назначаете функцию свойству onload.

Если вы реорганизуете так, чтобы у вас был function toSagitaal(i), который обрабатывает i-е изображение, вы можете добавить строку вроде

   imageArray[0].onload = function(){toSagitaal(0);} ;

после назначения imageArray[0].src и аналогично для двух других изображений.

Причина, по которой ваш текущий пример работает при перезагрузке, заключается в том, что к тому времени браузер уже загрузил изображения, поэтому тот факт, что вы не ждете, не имеет значения.

person brainjam    schedule 14.04.2011