How to toggle preserveDrawingBuffer in three.js?

Question

Basically, I want the setup where I could go to preserveDrawingBuffer=true, render the scene once, grab the screenshot, and go back. However, this poses two problems:

<

Answer 1

You don't need preserveDrawingBuffer: true to take a screenshot. What you need is to take the screenshot immediately after rendering. A screenshot is guaranteed to work as long as you take it after rendering but before exiting the current event.

So for example this will always work

renderer.render( scene, camera );
var screenshot = renderer.domElement.toDataURL();

Whereas this will only work randomly if you're luck

someElement.addEventListener('click', function() {
   // this is not immediately after rendering. you have no
   // idea when it is relative to rendering.
   var screenshot = renderer.domElement.toDataURL();
});

Most of the THREE.js examples have a render function if you need to take a screenshot when the user requests one you could do this

someElement.addEventListener('click', function() {
   render();
   var screenshot = renderer.domElement.toDataURL();
});

Or you could do this

var takeScreenshot;

function render() {
   ...
   if (takeScreenshot) {
     takeScreenshot = false;
     var screenshot = renderer.domElement.toDataURL();
   }
}

someElement.addEventListener('click', function() {
   takeScreenshot = true;
});

Or any number of other ways to just make sure you take the screenshot immediately after rendering.

Answer 2

I have also encountered this problem.my screenshot is blank in threejs webgl canvas, because not set renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true});, Here is my way to toggle preserveDrawingBuffer.

let canvas = this.renderer.domElement;
    canvas.getContext('webgl' , {preserveDrawingBuffer: true});
this.render();
var data = {
  image: canvas.toDataURL(),
};
canvas.getContext('webgl' , {preserveDrawingBuffer: false});