Question

我在服务器上生成了一个1536 x 47616像素的PNG文件。 PNG是调色板，有20个条目。 PNG的大小是2.5MB - 我不明白为什么内存可能是GPU的问题。

这个大图像文件基本上包含许多小纹理的组合。这个大文件里面的每个纹理，每个都是128px宽，512px高。这意味着基本上这个大图像包含3 * 372 = 1116个图像（1536/512 =每行3个图像，每列47616/128 = 372个）

我把它们放在同一张图片中，因为否则最终用户需要单独请求1116个图像，并且请求和处理标题 - 这是要处理的大量图像。要求单个大量图像要快得多。

gl.getParameter(gl.MAX_TEXTURE_SIZE);  // this gives me 16384 for my browser. My texture's height of 47616 is a lot higher than this.

目前我尝试将纹理绑定到缓冲区：

this.texture_image = new Image();
var parent = this;
this.texture_image.addEventListener("load", function(e) {
        parent.tinfo.width = parent.texture_image.width;
        parent.tinfo.height = parent.texture_image.height;
        parent.gl.bindTexture(parent.gl.TEXTURE_2D, parent.tinfo.texture);
        parent.gl.texImage2D(parent.gl.TEXTURE_2D, 0, parent.gl.RGB, parent.gl.RGB, parent.gl.UNSIGNED_BYTE, parent.texture_image);
});
this.texture_image.src= texture_image_url;

然而，这会导致Google Chrome抱怨：

main.js:5118 WebGL: INVALID_VALUE: texImage2D: width or height out of range

显然是这种情况，因为我的身高超出了MAX_TEXTURE_SIZE范围。

所以现在，客户端是否有可以参考图像的较小部分？也许从大的this.texture_image Image对象中创建自己的较小的Image对象？

我想我可以使用Canvas和drawImage，但更喜欢基于WebGL的解决方案。因为我稍后会用WebGL对它做一些其他的影响。

感谢。

Answer 1

PNG的大小是2.5MB - 我不明白为什么内存可能成为一个问题对于GPU

PNG是一种未针对随机实时访问进行优化的压缩文件格式，GPU不支持这样的编码，如果不使用任何扩展，GPU只支持原始像素数据，因此您的图像将扩展为WIDTHxHEIGHTx4 =＆gt; 1536x47616x4 = 292552704字节为292.553兆字节，即使使用扩展名，您也将受限于固定宽度块编码方案。那就是说MAX_TEXTURE_SIZE并不是关于内存而是它的可寻址性，没有办法（在WebGL中），你唯一的选择是使用2D画布将纹理图集拆分成合适的块。 / p>

你能/如何使用大于MAX_TEXTURE_SIZE的纹理？

1 个答案: