webgl：如何按原样克隆画布

Question

我有一个 webgl 画布。它正在不断更新（模拟）。

现在我想冻结画布的当前内容。我不断获得模拟的更新，我需要不断地向可视化器提供这些更新。所以我实现这一点的想法是将当前 webgl 画布的确切状态克隆到一个新的画布上，并隐藏当前的画布，它会继续更新。然后我可以删除冻结的，并且再次显示实时模拟。

我没能做到这一点，我在网上找到了这样的例子：Any way to clone HTML5 canvas element with its content? 仅适用于 2D 画布。

Google 搜索也没有太大帮助。 这个： how to copy another canvas data on the canvas with getContex('webgl')? 看起来很有希望，但我无法弄清楚如何应用它。

Answer 1

在我看来，克隆画布是一个沉重而奇怪的解决方案。

实现您想要做的最简单的方法是防止帧缓冲区呈现（交换，然后清除）到 HTML 画布。这样做，您只需避免在循环期间调用任何 gl.clear、gl.drawArrays 或 gl.drawElements。

例如，假设您有两个函数，一个运行模拟，另一个运行 GL 绘图：

function simulate() {
  // update simulation here
}

function draw() {
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
   // do drawing stuff here
   gl.drawArrays(gl.TRIANGLES, 0, 12345);
   // etc...
}

从现在开始，如果您想“冻结”画布内容，您只需停止在全局循环中调用“绘制”函数即可。例如：

function loop() {
  simulate();
  if(!freeze) draw();

  requestAnimationFrame(loop);
}

您可以使用其他方法来达到相同的效果。例如，您可以将场景绘制到纹理上，然后在画布上绘制纹理。通过这种方式，您还可以控制纹理何时被清除并再次绘制，而它仍然呈现在画布中。

但是，要实现渲染到纹理的方法，您需要在代码中进行一些更繁重的修改：您需要一个额外的着色器来在屏幕上绘制纹理，并且需要一些时间来使用 frameBuffer和 renderBuffer 对象。