CODEWITHSUNDEEP
javascriptthree.jswebglgetimagedata
brandon cox
brandon cox

Reputation: 41

Three.js toDataUrl blank

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.

Upvotes: 2

Views: 2197

Answers (1)

Kirill Dmitrenko
Kirill Dmitrenko

Reputation: 3629

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;
}

Upvotes: 1

Related Questions