1

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:

enter image description here

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).
user606521
  • 14,486
  • 30
  • 113
  • 204

2 Answers2

4

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. You can look at this sample where it renders the image in 4 separate parts. In that example it makes 4 renderers but for your case you'd only need one and just render->capture canvas->render->capture canvas-> repeat until you get all parts. Then you need a way to stitch those parts together. You could use gIMP or Photoshop for example.

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 >:(

gman
  • 100,619
  • 31
  • 269
  • 393
3

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

Mugen87
  • 28,829
  • 4
  • 27
  • 50