you/how 可以使用大于 MAX_TEXTURE_SIZE 的纹理吗？

Question

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

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

我将它们放在同一张图片中，否则最终用户将需要分别请求 1116 张图片，并且需要请求和处理 headers - 要处理的图片很多。请求单个海量图像的速度要快得多。

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 图片 object 制作我自己的小图片 object？

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

谢谢。

Answer 1

The size of the PNG is 2.5MB - i dont see why memory can be an issue for the GPU

PNG 是一种未针对随机实时访问进行优化的压缩文件格式，GPU 不支持此类编码，不使用任何扩展 GPU 仅支持原始像素数据，因此您的图像将扩展为 WIDTHxHEIGHTx4 => 1536x47616x4 = 292552704 字节，这是一个巨大的 292.553 兆字节，即使使用扩展，您也会被固定宽度的块编码方案所束缚。话虽这么说 MAX_TEXTURE_SIZE 与其说是关于内存，不如说是它的可寻址性，没有办法解决这个问题（在 WebGL 中），你唯一的选择是使用 2D canvas 将你的纹理图集分成合适的块。

you/how 可以使用大于 MAX_TEXTURE_SIZE 的纹理吗？

Can you/how to use textures that are larger than MAX_TEXTURE_SIZE?

javascript

image

webgl