PreserveDrawingBuffer false - is it worth it?

Question

When using preserveDrawingBuffer for our context, we need to take care to clear the drawing buffer ourselves. I use this technique in my application.

I read an article that says: setting this flag to false can lead to better results.

In my application, when set to false, in some cases I need to take care of clearing the front buffer from myself, because when no drawing occurs, we can still see what was painted before.

My question is, is it worth turning the application up now and closing all cases to get the best results? Is this really improving?

Is there any demo that shows different metrics when this flag is true (and does gl.clear(..) ) compare to false?

Answer 1

I know this was answered elsewhere, but I cannot find it like that ....

 preserveDrawingBuffer: false 

means that WebGL can replace buffers instead of copy buffers.

WebGL canvases have 2 buffers. The one you are drawing and being displayed. When it comes time to draw a web page, WebGL has 2 options

• Copy the drawing buffer to the display buffer.

  This operation is slower because copying thousands or millions of pixels is not a free operation.

• Change two buffers.

  This operation is effective instantly, since nothing should happen except to exchange the contents of two variables.

Regardless of whether exchanging or copying WebGL in the browser and other other parameters, but if preserveDrawingBuffer is false , WebGL can change if it cannot true .

If you want to see the difference in perfection, I suggested trying your application on a mobile phone. Make sure that anti-aliasing is turned off, because anti-aliasing requires a resolution step that effectively copies the operation.

Answer 2

As I understand it, preserveDrawingBuffer=true means that WebGL should clear the pipeline between frames. OpenGL drawing is not synchronous, and therefore drawing commands can remain in the pipeline when you finish your frame.

This will be equivalent to placing the flush at the end of the rendering cycle. https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/flush

This is why the results can vary greatly. If your GPU has buffered many instructions, then the program will be stopped until all GPU instructions have been executed. However, if your GPU is fast, then there may not be much in the buffer, and so everything just goes on.

I have seen cases where placing a flash call at the end of a visualization cycle reduced Fps by 50%.

I would avoid preserveDrawingBuffer=true because it will hurt performance when you need it most.