What are maximum dimensions of Three.js render can

Question

When I set render canvas size to ~4000x4000px it's ok, however starting from around 4000 (tested 5k, 6k, 8k) it seems that scene is "cut off" in some way. See image below:

So up to ~4k content is properly rendered in the center of canvas and for higher canvas sizes it cuts the content.

1. Is it a Three.js/WebGL limitation?
2. If yes then what are actual maximum canvas dimensions that don't cause any "deformations"?
3. Is there anything I can do about it? I need to get canvas snapshot in high resolution (8k).

Answer 1

Is there anything I can do about it? I need to get canvas snapshot in high resolution (8k).

You can render portions of the scene using Camera.setViewOffset and then assemble the parts into a large image.

Here's library that does this

https://greggman.github.io/dekapng/

I know there is an answer here I wrote that shows how to do this in three.js since I wrote that library because of my answer. Unfortunately 10 minutes of searching didn't bring up >:(

Answer 2

This is not a limitation of three.js but a limitation of the maximum size of the drawing buffer. It's defined by the browser vendor and can't be exceeded by an application. More information in this github issue:

https://github.com/mrdoob/three.js/issues/5194