how to take a screenshot of the scene?

[j2l]

Reading ThreeJS documentation and forum, I understand that we can take a screenshot of WebGLRenderer (inside the canvas), but I don't get how to relate to the actual WebGLRenderer and when I instantiate a new one I get a black picture Reading https://discourse.threejs.org/t/save-composer-frame-to-jpg/22055 and its response https://jsfiddle.net/a3ns02b5/ I successfully run this script from the editor:

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

function initialize() { 

}

function update(delta) {
    if(Keyboard.keyJustPressed(Keyboard.P))
    {
        screenshot();
    }
}

function screenshot(){
        var screenshot = renderer.domElement.toDataURL("image/jpeg");
        var tmpLink = document.createElement('a');
        var today = new Date();
        var date = today.getDate() + '-' + (today.getMonth() + 1) + '-' + today.getFullYear();
        var time = today.getHours() + "-" + today.getMinutes() + "-" + today.getSeconds();
        var dateTime = date + '_' + time;
        tmpLink.download = '_' + dateTime + '.jpg'; // set the name of the download file 
        tmpLink.href = screenshot;
        tmpLink.type = "image/jpeg";    

        // temporarily add link to body and initiate the download  
        document.body.appendChild(tmpLink);
        tmpLink.click();
        document.body.removeChild(tmpLink); 
}

It takes and saves a screenshot from a new Renderer, an empty one, right? How to refer to the actual one?

I can't read the menu content but I guess program has the WebGLRenderer preserveDrawingBuffer settings, right?

Additionally, I'd like to save it on my server to build a gallery for the user, any idea how to POST the file?

[j2l]

Bump, I hope you're fine. If it's just work piling up, would you please let me know when you'll be available :) Thanks

[tentone]

Hello

Sorry for the late response you should be able to access the rendering canvas in program.canvas

IN nunuStudio should be fairly direct to get a screenshot of the canvas but you will have to set the rendering config to preserveDrawingBuffer in the program object.

function update(delta) {
    if(Keyboard.keyJustPressed(Keyboard.S)) {
        var data = program.canvas.toDataURL("png");
        FileSystem.writeFileBase64("screenshot.png", data);
    }
}

[j2l]

Thank you! Unfortunately, all I get is a transparent PNG, not a screenshot, here it is: Totally transparent

Any idea?

[j2l]

Hello, Happy Easter!

Also need WebGL 1.0 to work Closing

[tentone]

So it is only woking with webgl 1.0 correct?

Thanks a lot Happy easter

[j2l]

Yes, only WebGL 1.0