使用 WebGL 绘制 2D 时重用前一帧的部分内容

Question

我正在使用 WebGL 做一些与图像处理非常相似的事情。我在正交投影中绘制了一个 Quad，并在片段着色器中执行了一些处理。有两个步骤，第一个步骤是在片段着色器中处理来自 Quad 的原始纹理并写入帧缓冲区，第二个步骤将数据处理到最终画布。

用户可以缩放和翻译图像。为了使其顺利运行，我需要达到 60 fps，否则会明显变慢。这在桌面 GPU 上不是问题，但在硬件较弱且分辨率更高的移动设备上，这会出现问题。

翻译案例是最引人注目和最成问题的，用户将鼠标指针或手指拖到屏幕上，图像滞后。但翻译也是一种情况，理论上我可以重用前一帧的大量数据。

理想情况下，我会从最后一帧复制画布，将其平移 x,y 像素，然后仅在片段着色器中对已翻译的前一个画布未覆盖的画布部分进行整个图像处理.

有没有办法在 WebGL 中做到这一点？

Answer 1

如果要访问前一帧，则需要绘制附加到帧缓冲区的纹理。然后将该纹理绘制到已翻译的画布中。