使用未渲染的像素数据的 webgl 纹理

Question

在 webgl 中使用像素数据绘制纹理时，不会渲染纹理。对象改为显示为白色。有人可以指出以下代码中的错误吗？

 function handleLoadedTexture(texture ) {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 16,16,0, gl.RGBA, gl.UNSIGNED_BYTE, texture.data);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.bindTexture(gl.TEXTURE_2D, null);
    try{
    }
    catch(e){       
            console.log("Error : "+ e.name + "\n"+ e.message);
            console.log(gl.getError());
    }
}


var neheTexture;
var data;
function initTexture() {
    neheTexture = gl.createTexture();

    data =[];
    for(var i=0;i<256*4;i++)
    {       
            if(i%4==0 || i%4==3)
                    data[i] = 1;
            else data[i] =0;
    }
    neheTexture.data =  new Uint8Array(data);

}

Answer 1

问题几乎肯定出在你的绘图代码中，所以也请发布，但我想指出一件事：

您正在使用设置为 1 的红色和 alpha 通道初始化纹理，但我很确定这并没有按照您的想法进行。像这样的纹理数据以字节为单位进行描述，其取值范围为 0-255。这意味着 1，而不是您可能认为的“完全强度”，实际上是 1/256 强度（0.004，从 0 到 1）。这意味着您的代码正在生成几乎完全透明且只有轻微红色的纹理。

如果你想要完全不透明的红色，你实际上会想要这样循环：

for(var i=0; i<256*4; i++) {       
        if(i%4==0 || i%4==3)
            data[i]=255;
        else 
            data[i]=0;
}