紋理不加載webgl。閱讀和操作從2D畫布，存儲在陣列

Question

我想（新手）在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"; 
    } 

Answer 1

你的問題是例如，該行

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

發起一個圖像加載，但不會等待它。因此，當您立即致電toSagitaal()圖像尚未加載。

通常你必須指定一個處理程序，它在圖像加載時執行某些操作。爲此，您可以爲onload屬性指定一個函數。

如果重構，讓你有一個function toSagitaal(i)處理該i圖像，那麼你可能在imageArray[0].src分配後添加一行

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

和類似的其他兩個圖像。

你現在的例子在重新加載的原因是，瀏覽器已經加載了圖像，所以你沒有等待的事實並不重要。