How to set aspect ratio of cameras?

Questions
1

Hi everyone, I’m looking for some example of how to set the camera’s aspect ratio, which should be the output for the viewer’s eye, but I’m looking in vain, probably wrong. For example, I want an aspect ratio of project: 16:9 or 4:3, 4:5… So I’m looking for how to set the camera’s aspect ratio? I have the project in an iframe with, CSS setts: “width” at 100% and “height” can be variable according to the aspect ratio set in babylon.js. My width is as default: 1170px and the height is calculated automatically at: 585px. But I need/prefer to have height at a width of 1170px at a size of 658px. Of course, the width and height must change in the browser depending on the size of the browser window, the iframe. What I need is to choose the rendered aspect ratio. Thanks for your time.

2

I believe there’s a bit of confusion around this. One thing is the screen/window size and ratio. Another is the scene capture from the camera. A camera does not have an aspect ratio in itself. The aspect ratio you can get on a camera (I mean a real one) comes from a combination of the lens size and field of view (+ focal distance and the lens shape). The ones you can get on i.e. a digital camera or a smartphone come from an extrapolation of these values. Same for the cameras in apps. Though, I think BJS does not have this implemented (unless I overlooked it). I believe a good way to start playing with this aspect ratio from the camera to get a panoramic vs 4:3 view would be to play with the FOV and lensSize (a property you can set from the rendering pipeline along with focal distance). That is for a camera in perspective mode. I have little knowledge about the use of the orthographic camera. May be someone else who knows better will kick-in.

1 Like
3

I think you can play with the fov and fovMode properties to achieve this?

4

I also think it is necessary to set the aspect ratio attribute of the camera

5

Not sure if I get it right. But I read of iframe and fov in this thread. Remembers me of my project on itch.io, see: Mayhem: Relaunched - remake of a QBasic game

The levels of my game can possibly have different widths/heights and the output iframe width/height could be everything. I have never found out if Babylonjs offers an easier solution for this.

Check out: