Javascript 您能否/如何使用大于最大纹理大小的纹理？

我在服务器上生成了一个1536×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;

然而，这导致谷歌Chrome抱怨：

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

这显然是事实，因为我的身高远远超出了最大纹理大小的范围

那么现在，在客户机上是否有某种方式可以引用图像的较小部分？也许可以用大的

这个.texture\u Image

图像对象制作我自己的更小的图像对象

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

谢谢

PNG的大小是2.5MB——我不明白为什么内存会成为问题 对于GPU

---

PNG是一种压缩文件格式，未针对随机实时访问进行优化，GPU不支持这样的编码，没有任何扩展，GPU只支持原始像素数据，因此您的图像将扩展到宽度xHeightx4=>1536x47616x4=292552704字节，这是一个巨大的292.553兆字节，即使使用扩展，也会绑定到固定宽度的块编码方案。尽管如此，

MAX\u TEXTURE\u SIZE

与其说是关于内存，还不如说是关于内存的可寻址性，这是无法解决的（在WebGL中），您唯一的选择是使用2D画布将纹理图谱分割成合适的块。

正如@LJ所指出的，您有点运气不佳。问题不在于内存，而在于GPU内部的限制。在WebGL2中，可以使用纹理2D数组。你仍然会达到你的高度限制，但你可以将你的巨大图像加载到一个纹理中的2d图像数组的切片中。仅供参考，我使用pngjs使用javascript解析png数据以获得像素数据，如果知道一些更快的方法，我会很高兴。