Problems with large screenshots

[EdwardMoyse]

This was reported to me by Katarina Anthony from CERN

"For me, while it works perfectly for the default size, whenever I try to up the size I get very strange exports which are either fully zoomed in or have a lot of black space. Attached are 2 examples. I tried on both Chrome and Firefox to the same result. Any idea what I'm doing wrong?"

I could reproduce this in firefox with my macbook M1 Pro. Safari seems fine.

[sponce]

The current implementation of screenshots make the assumption that they can be rendered in one go by three.js, that is that they do not exceed the max canvas size. If you exceed it, then the bugs reported here match what people are reporting on the web.

There are 2 things we can do :

• in a first step, we can check the max size (maxTextureSize capability of the renderer in three.js) and forbid higher size
• in a second step, we can overcome that limitation by
  • splitting the image we want to create in tiles using setViewOffset feature of three.js (https://threejs.org/docs/#api/en/cameras/PerspectiveCamera.setViewOffset)
  • render each tile one by one independently and save the results in separate raw buffers
  • rebuild the final image in a second step from the buffers
    This approach is explained on this stackoverflow topic : https://stackoverflow.com/questions/53518155/what-are-maximum-dimensions-of-three-js-render-canvas and they even point to a library handling the image rebuild for us