2

When I try to save an image from a three.js WebGl render it comes out totally blank, but it does return a ton of characters:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAADICAYAAACeY7GXAAADt0lEQ…IF4M2+znB4GcgWgDf7OsPhZSBbAN7s6wyHl4FsAXizrzP8AS/TAMmecuTCAAAAAElFTkSuQmCC

I do have the preserveDrawingBuffer set to true like so:

 renderer = new THREE.WebGLRenderer( { 
    alpha: true,
    antialias: true,
    preserveDrawingBuffer: true
} );

And this is how I am calling the toDataUrl:

var getImageData = false;
function render() {

            //camera.position.x += ( mouseX - camera.position.x ) * .005;
            //camera.position.y += ( - mouseY - camera.position.y ) * .005;

            camera.lookAt( scene.position );

            renderer.render( scene, camera );
             if(getImageData == true){
                imgData = renderer.domElement.toDataURL("image/png");
                window.setTimeout(10);
                console.log(imgData);
                getImageData = false;
            }
            requestAnimationFrame(render);
        }


           getImageData = true;

And here is the what the canvas looks like, before rendered to an image:

Canvas canvas

CanvasCode

<canvas width="175" height="200" style="width: 175px; height: 200px"></canvas>

Honestly I am not sure what else to say other than, any ideas as to why the image is coming up as totally blank? The render() function is the very last thing at the bottom of the code.

gman
  • 83,286
  • 25
  • 191
  • 301
brandon cox
  • 51
  • 9
  • I still can't seem to get it to render the image, I have googled around and tried a few different ways to do it, still all ways make a blank image. – brandon cox Jun 04 '16 at 16:26

1 Answers1

1

WebGL is an asynchronous API. Thus you need either add gl.finish() (which can worsen performance) call before calling toDataUrl() or call it on the next frame. To do so you for example can use setTimeout (you've that, but doing it incorrectly):

if(getImageData == true) {
    window.setTimeout(function () {
        imgData = renderer.domElement.toDataURL("image/png");
        console.log(imgData);
    }, 100);
    getImageData = false;
}
Kirill Dmitrenko
  • 2,964
  • 20
  • 28