Postprocessing: Download high res image with post processing applied

[torinmb]

I followed this thread to download a high-resolution image from a three.js scene.
The problem is that the exported image doesn't have the post-processing effects applied to it.
The above approach involves getting the renderer.domElement.toDataURL('image/png').
I tried using the composer.renderer instead, but the downloaded image still didn't have the fx applied on top of it.

Any ideas would be greatly appreciated!

[vanruesc]

Hi,

The problem is that the exported image doesn't have the post-processing effects applied to it.

Then your post processing setup is probably misconfigured in some way. There are also a few things to be aware of when downloading screenshots programmatically:

• It's important to set the preserveDrawingBuffer flag of your renderer to true.
• Data URLs can't be used for large amounts of image data. Use Blobs instead.

Here's a working example: https://jsfiddle.net/jt3p0bw8/

⚠️ Please note that downloading a large image takes a while.

This is just a quick example of how it could be done. Depending on your actual use case, you might want to use a second renderer to render high-resolution screenshots off-screen.

[torinmb]

Thanks so much for the quick and detailed response!
Looks like it was a combo of needing preserveDrawingBuffer and Blobs.

Your js fiddle worked like a charm! Hopefully, anyone else who's looking to download high-resolution images will find this for reference!

[torinmb]

Hey is there any way to ensure the BlurPass effect stays consistent at different screen resolutions? When I export at a high resolution or change the resolution at all with the BlurPass applied the overall intensity changes.

You can easily recreate this by using the browser to zoom in/out the page on this demo

I tried using your most recent updates to BlurPass, where I used Scale and kept Resolution at 1, but still ran into problems exporting.

[vanruesc]

Hey is there any way to ensure the BlurPass effect stays consistent at different screen resolutions?

This one might be tricky. Blurring is resolution-dependent, so these results are to be expected. However, I can see the issue and also think it's worth investigating whether or not the BlurPass can be changed to produce consistent results at different resolutions.

A simple fix might be to allow an absolute size for the internal blur render targets.

I'm short on time right now, but I'll be back on Sunday or Monday (EU time) to look at this in more detail.

[torinmb]

Sounds good. I'm glad you also see the value in it!
Keep me updated on the changes. Finding a more exact solution would be great, but let me know if there's an approximation that might work also!

[vanruesc]

A simple fix might be to allow an absolute size for the internal blur render targets.

After testing different approaches, I found that this is the best solution after all.

You can find an example of the solution here: https://jsfiddle.net/jvktf9r0/1/
Try changing the height of the right output pane or zoom in and out to see the difference.

~It would be great if you could also test this solution with the following code snippet in your project:~

// A fixed blur height.
const blurHeight = 720;

/**
 * Sets the internal render resolution of the given blur pass to a fixed size.
 *
 * @param {BlurPass} blurPass - A blur pass.
 * @param {Number} height - The absolute height of the blur render targets.
 * @param {Number} aspect - The screen aspect ratio (screen width / screen height).
 */

function setFixedBlurSize(blurPass, height, aspect) {

    const width = height * aspect;

    // Hack: these are private fields.
    blurPass.renderTargetX.setSize(width, height);
    blurPass.renderTargetY.setSize(width, height);
    blurPass.convolutionMaterial.setTexelSize(1.0 / width, 1.0 / height);
    blurPass.ditheredConvolutionMaterial.setTexelSize(1.0 / width, 1.0 / height);

}

[vanruesc]

Fixed size blurring has been implemented in [email protected].

Here is an updated example: https://jsfiddle.net/v7eft3kg/ (line 85 is the important bit.)
If there are any other issues, feel free to reopen or create a new issue.

[torinmb]

This worked great! Thanks so much!!