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

Question

我正在使用WebGL执行与图像处理非常相似的操作。我在正视投影中绘制单个四边形，并在片段着色器中执行一些处理。有两个步骤，在第一个步骤中，Quad中的原始纹理在片段着色器中处理并写入帧缓冲区，第二步将数据处理到最终画布。

用户可以缩放和翻译图像。为了让它顺利运行，我需要达到60 fps，否则这会显得迟钝。这在桌面GPU上没有问题，但在硬件较弱且分辨率较高的移动设备上，这会产生问题。

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

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

有没有办法在WebGL中执行此操作？

Answer 1

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