1

I have a webgl canvas. It is being continuously updated (simulation).

Now I want to freeze the current content of the canvas. I am continuously getting updates for the simulation which I need to keep feeding to the visualizer. So my idea of achieving this is to clone the exact state of the current webgl canvas on to a new one, and hide the current one, which continues to get updated. Then I can remove the frozen one and the live simulation is being shown again.

I haven't been able to achieve this, and examples I've found on the web like this one:Any way to clone HTML5 canvas element with its content? only apply to 2D canvases.

Google search didn't help much either. This one: how to copy another canvas data on the canvas with getContex('webgl')? seemed promising but I haven't been able to figure out how to apply it.

2
  • 1
    While possible this would be quite the brute force approach, how about just storing the state of the simulation?
    – LJᛃ
    Sep 24, 2017 at 1:49
  • I had thought of this in the first place, but my approach didn't work. Revisiting it, it actually DID. If you want to provide it as an answer, you're welcome Sep 25, 2017 at 21:27

1 Answer 1

1

Cloning the canvas appear to me to be an heavy and weird solution.

The simplest way to achieve what you want to do is to prevent the frame buffer to be presented (swapped, then cleared) to HTML canvas. Do do so, you simply have to avoid calling any gl.clear, gl.drawArrays or gl.drawElements during your loop.

For example suppose you have two functions, one running your simulation, the other your GL draw:

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...
}

From this point, if you want to "freeze" the canvas content, you simply have to stop calling the "draw" function within your global loop. For example:

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

  requestAnimationFrame(loop);
}

You may uses other methods to achieve the same effect. For example, you can draw your scene to a texture, then draw the texture on the canvas. By this way, you also can control when the texture is cleared and drawn again, while it still rendered in the canvas.

However, to implements the render-to-texture method, you will have some more heavy modification to done in your code: you'll need an additionnal shader to draw the texture on screen, and take some time to play with frameBuffer and renderBuffer objects.

5
  • Confused about this answer. You don't need preserveDrawingBuffer: true just to stop drawing and have the canvas stay as is.
    – gman
    Sep 25, 2017 at 1:36
  • I don't have deep tested, but as far as i know, without preserveDrawingBuffer the browser automatically clears and swaps the buffers (canvas), even without an explicit call to "gl.clear": khronos.org/registry/webgl/specs/latest/1.0/#2.2 You could achieve the same goal by stopping the requestAnimationFrame loop, but faboolous wants its "simulation" to continue behind the scene.
    – user1501157
    Sep 25, 2017 at 6:35
  • the browser only clears if you call clear or draw??? so no need for preserveDrawingBuffer: true
    – gman
    Sep 25, 2017 at 9:31
  • Ok, I well read the specs and you right. WebGL "automated" behavior is sometimes weird to me comparing to OpenGL (where we have full control of frame buffer). I will edit my answer.
    – user1501157
    Sep 25, 2017 at 14:21
  • While this looks like a possible approach, I am using a third-party library, where I don't have access to the inner workings; upvoted the answer but can't accept it for my case. Thanks nonetheless Sep 25, 2017 at 21:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.