javascript - 纹理未加载到 webgl 中。从 2D Canvas 读取和操作，存储在数组中

Question

我正在尝试(新手)在 webgl 中构建应用程序。我已经到了想要加载图像数组并对其进行一些像素操作的地步。我正在尝试获取数组中每张图片的第一个像素列，并用它构建一张新图片。然后将这张新生成的图片推送到另一个数组中。 (然后进入下一栏等等。)

我通过在 2D Canvas 上绘制图像，然后读回像素来完成此操作。经过几次递归后，我得到了所需的图像，并使用 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 属性。

如果你重构了一个函数 toSagitaal(i) 来处理第 i 个图像，那么你可以添加一行

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

在 imageArray[0].src 赋值之后，其他两幅图像也是如此。

您当前的示例在重新加载时起作用的原因是浏览器到那时已经加载了图像，因此您没有等待这一事实并不重要。