Camera view framed to a suface (FOV calculation ?)

Hello everyone,

I’ve been playing around for a few days with babylonJS (and cannonjs) and I must say I enjoy both the engine the community that goes with it ! :smiley:

I found here most of my issues but here is a problem I can’t figure out :
I need to frame my viewport to a wall so that we can only see the wall (and the whole width of the wall). I could do this manually but as we are on a responsive webpage I need to adapt my camera so it will always cover the whole wall.

What I was thinking a bout is to adapt the camera FOV to the width of the wall but I can’t find the formula to start from a width and a camera position to end up with the right FOV. Any idea on this ?

I’m not sure if my question is clear but I hope I can find some help !

Hey,
I think I figured out a way to get the right angle of the fov. But depending on the viewport width it doesn"t work properly… I guess the problem comes from the internal resize of the viewport according to the canvas ? Maybe if I could force the engine resize to be only horizontal ?

Here is the PG I made so far : https://www.babylonjs-playground.com/#I86S0I#10

You might try a 2 camera approach, if you are not doing any camera rotation, only pan & zoom in the scene. If you are, might not be realistic.

Camera 1, just a normal camera to handle everything other than the wall. This is the camera which gets attached.

Camera 2, orthogonal. This is the camera to display the wall. It probably needs to be created first, so that it renders first & makes it a background. Render has nothing to do with physics, so probably no issue.

The trick is to use layer masks for camera 2, lights for the wall, & the wall. see, https://doc.babylonjs.com/how_to/layermasks_and_multi-cam_textures. Here the example is a gun sight that is always in front. I have only done stuff where the ortho cam was in front, but maybe with the restrictions cam 1, it can work being in the back.

Unfortunately, the pg no longer works. an error in JSON. Did this years ago. Have no idea what that is. Fortunately, there is code in doc page.

Thanks a lot @JCPalmer for your help.

I’m not sure I understand perfectly what you mean but I updated the PG so it fits more closely to my problem : https://www.babylonjs-playground.com/#I86S0I#12

So my “wall” is in fact a big pile of cubes (that for some unknown reason ends up crashing but I like it :smiley:) and I would like to always show only the wall on the page. So I need to frame my camera to the wall no matter the viewport width. I focus on the width only with the intention to adapt the canvas height accordingly later.

The good news is that the camera will not have to move. It always stays still.


https://www.babylonjs-playground.com/#I86S0I#13

line19-23 use hor fovMode
line42 offset to cube centroid :astonished:

1 Like

Thank you so much @ycv !

The fovmode solved the problem, and your calculation is more accurate. :wink: