0

我正在尝试使用以下代码从 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 抱怨“错误的图像数据”。在萤火虫中调试显示图像被截断，下载的 png 文件只是原始文件的一部分 - 上半部分。Firefox 还抱怨“图像已损坏或被截断”。原始文件约为 1.8 MB (2048x1024)。可能是什么问题，我该如何解决？

4

1 回答 1

0

您的问题有多种可能的原因，但您可以做一些事情来尝试缩小范围。

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

还可以尝试将纹理保存为 .jpg 并尝试加载。还可以在您选择的图像编辑器中打开您的 png，并尝试保存几种不同的可用 png类型（基于调色板、灰度、RGB、具有透明度的 RGB、RGBA 等），看看它是否会加载。

于 2013-04-04T07:49:22.447 回答