Question

我正在尝试使用以下代码从png创建纹理：

...
var texture = gl.createTexture();
var img = new Image();
img.onload = function () {
    gl.activeTexture(gl.GL_TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    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);
}
img.src = "/path/to/image.png"

我的问题是WebGL抱怨“图像数据不好”。在firebug中调试显示图像被截断，下载的png文件只是原始文件的一部分 - 上半部分。 Firefox也抱怨“图像已损坏或被截断”。原始文件大约1.8 MB（2048x1024）。可能是什么问题，我该如何修复它？

Answer 1

您的问题可能有多种原因，但您可以采取一些措施来缩小范围。

尝试将图像大小调整为2048x2048和1024x1024，以防问题是基于您具有非方形纹理的事实。

还尝试将纹理保存为.jpg并尝试加载。还可以在您选择的图像编辑器中打开您的png并尝试保存几个不同的png types（基于托盘，灰度，RGB，RGB透明，RGBA等）以查看它是否会加载。

从png创建纹理时截断的图像

1 个答案: