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

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

2 голосов
/ 12 апреля 2011

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

Я выполняю это, рисуя изображения на двухмерном холсте, а затем считываю пиксели.После нескольких рекурсий я получаю желаемое изображение и записываю его, используя кодировку 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";
    }

1 Ответ

0 голосов
/ 14 апреля 2011

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

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

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

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

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

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

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

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

...