Max Screenshot size

Hello

I’m trying to find the max possible screenshot size.

This playground attempts to create a screenshot in 12800x7200, which works fine in Safari but the final png is only 7680 × 4320 in Chrome

(Click on the canvas to download)

7680 × 4320 = 33K
32,767 is the biggest number of a short int
Browsers impose different canvas size limitations, but these limitations often change based on the platform and hardware available.
You may test the maximum canvas size online here - canvas-size - Determine the maximum area, height, width, and custom dimensions of an HTML canvas element.

In case it helps :

I never did it in BabylonJS, but using Blender, I happened several times to be in need of huge render size, for some graphics stuffs. There is a known trick which is using camera shifting. It results in capturing a portion of the field of view, by keeping the same projection. That way you can join several renders (screenshots…) seamlessly.

Here is a (quick & dirty) drawing :


In the example above, the FOV is cut into 4 portions horizontally. Doing the same in the vertical FOV results in 16 different renders, and for each render you can choose whatever size (in pixels…)

So, putting everything in a script, you can render whatever image size, it’s just a matter of render time.


In Blender here is the Camera Shifting param :
Screencast from 12-09-2024 14:36:48


In BabylonJS I never did this, maybe it’s not implemented, in that case, a custom projection matrix would be needed…

++
Tricotou

1 Like

Thanks - I’ve tried in multiple browsers, seems like both Safari and Chrome (Windows and mac) can create a 16300x16300 canvas, so issue must be somewhere else

1 Like

That makes sense. Good suggestion

This page explains how to do the shifted/off-axis camera projection quite well. He has some other useful pages about matrices as well.

1 Like