Canvas ScreenShot not working

Question

Some time ago, I was able to take screenshot from my webGL 3D model using the toDataURL function, but suddenly this stopped working , and now I am not able to get an image from any 3D model.

Please see bellow for more insights:

ThreeJS examples:

• http://threejs.org/examples/webgl_animation_cloth.html
• http://threejs.org/examples/webgl_buffergeometry.html

WebGL example:

• http://madebyevan.com/webgl-water/

basic example:

• http://stemkoski.github.io/Three.js/HelloWorld.html
• http://learningwebgl.com/lessons/lesson01/index.html

In all previous examples I didn't get the image, I get either a black or transparent image

2D:

• http://jsfiddle.net/m7sA9/show/

Only the 2D exemple gave back the correct image

In all previous examples I use this simple method to get the image.

document.getElementsByTagName('canvas')[0].toDataURL();

Any idea of what I am doing wrong?

---

I've tried this on a MacBook Pro: Chrome and FireFox, and on FireFox on Windows 8.1 and I got the same result

following is a animation on how I made the tests on Chrome

Answer 1

I've found a fix for this problem in my Threejs app, the solution was as simple as putting a flag to true, so in my threejs instanciation I added preserveDrawingBuffer :

var renderer   = new THREE.WebGLRenderer({
  preserveDrawingBuffer   : true   // required to support .toDataURL()
});

And this is it for the model that uses ThreeJs, so I think the problem is related to a configuration setting and there must be some option for using plain WebGl or other libraries.

Thank you for reading, and I hope this helps someone in future.