Canvas WebGL-发送arraybuffer与从CPU向GPU发送图像/画布/位图

我正在写一个虚拟纹理的应用程序，其中的纹理是16384*16384（宽度和高度）

因此，最初我创建了一个16384/16384（宽度/高度）的空纹理

gl.texImage2d（..，宽度，高度，gl.RGBA，…，空）

我有多个1024*1024的jpeg图像，因此我能够正确地填充图像而没有任何问题。 但我看到的是当我使用

gl.texSubImage2D（…….，imageelement）

需要10-30毫秒

但是如果我使用

gl.texSubImage2D（……，arraybuffer）

，则需要0-2毫秒

我已经经历了这一过程，并尝试在我的应用程序中更改参数，但没有任何性能改进

使用gl.texImage2D或gl.texSubImage2d拍摄图像（jpgs/bmps/pngs）或阵列缓冲（Uint8Array/Uint16Array）后，WebGL在GPU中究竟发生了什么。 是否有需要额外时间的转换。

哪个浏览器

浏览器的功能取决于浏览器。在最坏的情况下，它还没有解码图像。换句话说，它仍然是一个压缩的JPG，而不是一个未压缩的位图

假设它是一个位图，您要求浏览器输入RGBA/无符号字节，但它可能将图像存储为RGB/无符号字节，因此它必须将整个图像或其子矩形从一种格式转换为另一种格式，这意味着分配空间来执行此操作，然后执行此操作，然后调用texImage2D或texSubImage2D，然后释放内存

在最佳情况下，图像已经在GPU中，浏览器可以使用着色器将该图像的一部分渲染到纹理中，从而有效地模拟texImage2D/texSubImage2D。我知道Chrome有办法做到这一点。我相信，至少到2020年9月，Firefox和Safari都没有。即使其中一个或两个都有路径，它们也肯定有不透明的条件来决定是否可以使用该路径

ImageBitmap

被认为有助于使这些情况更容易发生，而

Image

的可能性较小。

哪个浏览器

浏览器的功能取决于浏览器。在最坏的情况下，它还没有解码图像。换句话说，它仍然是一个压缩的JPG，而不是一个未压缩的位图

假设它是一个位图，您要求浏览器输入RGBA/无符号字节，但它可能将图像存储为RGB/无符号字节，因此它必须将整个图像或其子矩形从一种格式转换为另一种格式，这意味着分配空间来执行此操作，然后执行此操作，然后调用texImage2D或texSubImage2D，然后释放内存

---

在最佳情况下，图像已经在GPU中，浏览器可以使用着色器将该图像的一部分渲染到纹理中，从而有效地模拟texImage2D/texSubImage2D。我知道Chrome有办法做到这一点。我相信，至少到2020年9月，Firefox和Safari都没有。即使其中一个或两个都有路径，它们也肯定有不透明的条件来决定是否可以使用该路径

ImageBitmap

应该有助于使这些情况比不太可能发生的情况更容易发生。

我在使用Google Chrome，我也在探索gl.compressedTexture2D，但它只需要arraybuffer、Image/bitmap/canvas不允许你的机器、操作系统、gpu是什么？它是i5、windows、，英特尔520硬盘驱动器只是一个猜测，如果有一个快速的路径，它不会采取这种组合。在任何情况下，您至少应该确保使用的是

ImageBitmap

，而不是

Image

。但是如果你看不出有什么不同的话，我没有任何其他的建议。我们有没有其他技术可以更快地完成这项工作？例如：WebGPUI我正在使用谷歌Chrome，我也在探索gl.compressedTexture2D，但它只需要阵列缓冲、图像/位图/画布，不允许使用什么是您的机器、操作系统、gpu？它是i5、windows、intel 520 HDU。我只是猜测，如果有一条快速路径，它就不会在这种组合中使用。在任何情况下，您至少应该确保使用的是

ImageBitmap

，而不是

Image

。但是如果你看不出有什么不同的话，我没有任何其他的建议。我们有没有其他技术可以更快地完成这项工作？例如：WebGPU