preserveDrawingBuffer false - is it worth the effort?

Question

When using preserveDrawingBuffer for our context we need to take care of clearing the drawing buffer by our self. I use this technique in my app.

I read some article

Answer 1

As I understand, preserveDrawingBuffer=true means WebGL has to flush the pipeline between frames. OpenGL drawing isn't synchronous, and so drawing commands can be still in the pipeline when you finish your frame.

This would be equivalent to placing a flush at the end of your render loop. https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/flush

So that is why the results can vary a lot. If your GPU has buffered a lot of commands, then it will then the program will be forced to stop while all the GPU commands are executed. However, if your GPU is fast, then there might not be much in the buffer, and so things simply continue.

I've seen cases where placing a flush call at the end of the render loop dropped the Fps by 50%.

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

Answer 2

I know this has been answered elsewhere but I can't find it so ....

preserveDrawingBuffer: false

means WebGL can swap buffers instead of copy buffers.

WebGL canvases have 2 buffers. The one you're drawing to and the one being displayed. When it comes time to draw the webpage WebGL has 2 options

1. Copy the drawing buffer to the display buffer.

   This operation is slower obviously as copying thousands or millions pixels is not a free operation

2. Swap the two buffers.

   This operation is effectively instant as nothing really needs to happen except to swap the contents of 2 variables.

Whether WebGL swaps or copies is up to the browser and various other settings but if preserveDrawingBuffer is false WebGL can swap, if it's true it can't.

If you'd like to see a perf difference I'd suggested trying your app on mobile phone. Make sure antialiasing is off too since antialiasing requires a resolve step which is effectively copy operation.