image - WebGL - 如何渲染大纹理？

Question

我正在尝试在 WebGL 中进行一些图像处理。但是，如果我尝试在移动设备上的 GLSL 纹理中加载大图片(来自相机 - 8 MP)，浏览器会崩溃。小图片工作正常。所以我认为它的内存不足。

我用谷歌搜索了很多，但没有找到解决方案。我认为最好的方法是实现“基于平铺”的渲染。将 8 MP 图片拆分成更小的部分，渲染它们并将它们粘在一起。但是会有问题，比如应用模糊效果。您将看到“子渲染”的边缘。所以我必须渲染重叠的像素并将它们“淡化”在一起。没那么好听。

有没有我想不到的解决方案？如何在移动设备上处理真正巨大的纹理？

Answer 1

一张 8mp 图像不太可能超过可用内存。在 RGB(字节)时，它将占用 24mb 的内存。即使是半浮点精度，它也会是 50mb 的内存。 ARM 系统使用统一的内存架构，其中 GPU 和 CPU 共享内存。例如，iPhone 有 1GB 的可用内存。

纹理支持应该达到所需的大小(例如 3264x2248)，这在高端手机上似乎没有问题(81% of mobiles 支持的 4096x4096)。

最大绘图缓冲区大小可能小于支持的最大纹理大小(您可以 query that)。

除此之外，您可能只是遇到了一个令人讨厌的错误。因此，解决这个问题的方法是将图像分割为较小的图块，并一次处理一个图块。

如果您有过滤器内核，有两种方法可以处理边界。

您可以传入 9 个纹理并在纹理查找上分支以解决正确的一个(这可能很慢，某些 GPU 不支持分支并将执行所有代码路径)。边框纹理将只是 2x2，因此内存占用空间很小。请注意，纹理之间不会有插值，因此不要依赖它，也不要替换自己的。

您可以在每个图块周围添加一个半内核大小的边框，在预处理步骤中从相邻图块中获取像素。