Search code examples
three.jswebglrendererorbittodataurl

Use both autoclear and preserveDrawingBuffer in WebGLrenderer

I have a Three.js scene, where I have set renderer's preserveDrawingBuffer:true because I want to use renderer.toDataURL to take a snapshot of what is on the canvas, and I also use renderer.autoClear = false because I am using 2 scenes with one camera each (one renderer of course).

The problem is that when I move the camera with orbitControls, the objects do not animate as they should, their previous states stay on the canvas and they are creating an ugly painting ( they are not erased) because of the preserveDrawingBuffer:true setting.

What can I do to have both the snapshot functionality the 2 scenes/cameras and the orbit controls?

Thank you.

Solution

  • If you are instantiating WebGLRenderer and preserving the drawing buffer like so:

    var renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );

    And if you are setting

    renderer.autoClear = false;

    you will have to call renderer.clear() before rendering like so:

    renderer.clear();
renderer.render( scene, camera );

    three.js r.69