How to toggle preserveDrawingBuffer in three.js?
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:
- there is no method in renderer to dispose all the buffers,
-
canvas goes black if I do
renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true});
How do I do this properly?
EDIT: I did not find the way to toggle this, so I had to clone scene and create second renderer instead to make the screenshot. See https://github.com/mrdoob/three.js/issues/189
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.