Control Screenshot Perspective

Questions
1

I’m trying to render screenshots of the same scene, same exact perspective, at different resolutions.
This works great when I increase/decrase the width and height of the shot by the same factor.

Original resolution (3840x2160):

0_1x1_final
0_1x1_final3840×2160 1.19 MB

Half resolution (1920x1080)

0_2x2_final
0_2x2_final1920×1080 336 KB

However, if I render the scene with mixed factors, the perspective changes.
Mixed resolution raw (3840x1080). We see an increased horizontal FOV:

0_1x2_final
0_1x2_final3840×1080 438 KB

Mixed resolution in the scene aspect ratio (3840x1080):

0_1x2_final
0_1x2_final3840×2160 896 KB

How can I control the camera perspective, canvas or screenshot settings such that the mixed resolution image looks exactly like the other two?

2

you can change the fog using the camera api : Camera - Babylon.js Documentation

fovMode is useful when you want fixed fov based on screen width or screen height and independant of the other.

4

There does not appear to be a way in that API to defined horizontal and vertical fov independently. So that doesn’t solve the issue.

5

can you share a repro? I think you should use CreateScreenSHotUsingRenderTarget to be able to control the ratio

6

I’m using both CreateScreenshot and CreateScreenshotUsingRenderTarget depending on my shader rendering mode, as that was the only way I found to toggle on/off the rendering pipeline for the screenshots.

async function screenshot(scene) {
  let canvas = scene.getEngine().getRenderingCanvas()

  for (let rx of [1, 2, 4])
    for (let ry of [1, 2, 4]) {
      canvas.style.height = `${2160/ry}px`
      canvas.style.width = `${3840/rx}px`

      for (let [i, name] of modes.entries()) {
        scene.renderMode = i
        electron.ipcRenderer.send('screenshot', {
          image: i == 0 ?
            await scene.whenReady() && await BABYLON.Tools.CreateScreenshotAsync(scene.getEngine(), scene.activeCamera, {precision: 1}) :
            await BABYLON.Tools.CreateScreenshotUsingRenderTargetAsync(scene.getEngine(), scene.activeCamera, {width: 3840/rx, height: 2160/ry}),
          mode: `${rx}x${ry}_${name}`,
          source: scene.source,
        })
      }
    }

  canvas.style.height = null
  canvas.style.width = null
  scene.renderMode = 0
}
7

ok so It will require a repro to help further

8

Here you go:

9

Sorry I meant in the playground