Rendering only portion of a scene / stitching it back together for real high-resolution exports

Questions
,
1

Hey, everyone!

I’m using three.js for multiple projects where the end result has to get printed in rather large formats. This means I have to create PNG or JPG frames that have to have resolutions of upwards of 10.000pixels in width and height.

I’ve experimented with multiple approaches to exporting high-res images from three.js (or any canvas-based graphic for that matter) but always run into memory limitations by the browser. For three.js specifically I’m using an approach where I pause the animation, resize the canvas to a desired size, render one frame and then export the BLOB or Base64 as a JPEG/PNG - similar to this approach: What is the alternative to take high resolution picture rather than take canvas screenshot - #8 by looeee

But again, this only gets me so far. So I was thinking: I could maybe solve the problem by splitting the three.js canvas into multiple sections, rendering them one by one and then stitching the final image back together for the super high resolutions that I need. I however could not find anything in the documentation that would allow me to do this. Is there a way to tell three.js to for example only render the upper left quadrant of a scene? Or maybe just the left 50% of a scene? Or scale a scene to a portion / fraction of the scene?

If you have any ideas or alternative approaches to generating high-resolution images, your input is very much valued :slight_smile:

Thanks everyone !

2

Hello! You can move camera and take screenshot, send it to server and at the end, stitch images at server side. Some code here: Export part of scene like .bmp - #9 by Jelena_Lukic

3

I’m worried that moving the camera would create seams at the edges – did you try your recommendation? Is that an issue?

Also, wouldn’t moving the camera also change the perspective?

4

I think need use OrthographicCamera and canvas width=1000 height=1000 (quad)

5

I think you can render only portion of the viewport, no need to move camera. This example might be helpful to start with

4 Likes
6

Wow, thanks a million for that link - that was the missing link :slight_smile:

I can now create very high resolution exports by creating multiple “slices” of the scene and then stitching those back together on a high-resolution canvas. The magic function is camera.setViewOffset which makes this super simple.

I did multiple tests and it is surprisingly fast. Per this documentation you can see that the “physical” limit for a canvas element in Chrome, Firefox and Safari is 32,767 pixels width or 32,767 pixels of height (that would equal a maximum area of 16,384 x 16,384 if we rendered a square scene) : <canvas>: The Graphics Canvas element - HTML: HyperText Markup Language | MDN

So I can’t go beyond that limit if I want to save the resulting export in one file but using the same technique one could actually generate multiple “slices” of that size and then stitch them back together in Photoshop or something.

Again, thanks a million. This problem has been on my mind for over two years and now it finally works

1 Like