问题描述
我正在编写一个虚拟纹理的应用程序，其中我要获取16384 * 16384（宽度和高度）的纹理。
因此，最初我创建一个空的纹理16384/16384（宽度/高度）。
gl.texImage2d(....,width,height,gl.RGBA,...,null)
我有多个1024 * 1024的jpeg图像，因此能够正确填充图像而没有任何问题。
但是我看到的是当我使用
gl.texSubImage2D(..........,imageelement)需要10到30毫秒
但是如果我使用gl.texSubImage2D(..........,arraybuffer)，则需要0到2毫秒。
我已经经历过link，并尝试更改应用程序中的参数，但性能没有改善。
使用gl.texImage2D或gl.texSubImage2d获取图像（jpgs / bmps / pngs）或arraybuffer（Uint8Array / Uint16Array）后，WebGL在GPU中究竟发生了什么。 是否有任何转换需要花费额外的时间。
解决方法
哪个浏览器？
浏览器的工作取决于浏览器。在最坏的情况下，它还没有解码图像。换句话说，它仍然是压缩的JPG，而不是未压缩的位图。
假设它是位图，您向浏览器询问RGBA / UNSIGNED_BYTE，但是它可能会将图像存储为RGB / UNSIGNED_BYTE，因此它必须将整个图像或其子矩形从一种格式转换为另一种格式分配空间来执行此操作，然后执行此操作，然后调用texImage2D或texSubImage2D，然后重新分配内存
在最佳情况下，图像已经在GPU中，浏览器可以使用着色器将该图像的一部分渲染到纹理中，从而有效地模拟texImage2D / texSubImage2D。我知道Chrome可以做到这一点。我相信，至少从2020年9月起，Firefox或Safari都不会。即使一个或两个都有执行此操作的路径，它们对于是否可以使用该路径当然也存在不透明的条件。与ImageBitmap相比，Image应该有助于使这些情况更容易发生。