solved Fitting the scene to canvas?

[agmcleod]

Hi there. I'm working on a 3d piece for a client project where there will be both desktop & mobile users. The scene itself is a landscape setup, so it sits wider than it is tall. I have an on resize event to call the engine.resize(). The canvas is set to width: 100vw; height: 100vh, and does resize quite well. However once i shrink it so the bottom of the scene is touching the bottom of the window, and then shrink it horizontally, the scene gets cut off. I've tried playing with the fovMode, but that hasn't helped. Is there a way for me to allow to be more fluid to the canvas size, even though it will look skewed? I think it's more varying sizes of mobile screens that I need to adapt for, so it shouldnt be too much of a negative effect, or at least i hope not. Main thing is that we noticed things would appear off screen on our phones, but only by a little.

[GameMonetize]

Hello!

are you calling engine.resize() when the canvas size changes?

[agmcleod]

I am yep! I have it in the handler for the window resize event. On first load the scene seems to fit in the canvas, but on changing the size it no longer does. Though I have doubts on first load the mouse clicks will work properly.

Here's a gif:

 

[GameMonetize]

No worry we've got you covered

https://www.babylonjs-playground.com/#PCR8K3

 

Check line #30

[agmcleod]

I indeed gave that a try yesterday, though i would never see the right green wall on screen. Like it was hard to keep the scene within the viewport at all. But it did some what solve the above issue. With your playground link, I can also tell that it clips the viewport when shrinking vertically. I dont think we'd lose too much with that, but If dice get cut off by landing higher or lower on the screen, that's bad. I realize this is a tricky thing, as perspective usually fixes one of the two directions for FOV.

 

[agmcleod]

Here's one with horizontal:

 

[agmcleod]

Not really an answer to the original question, but kind of a solution. Since changing horizontally, it does solve the landscape problem, clearly the camera just needs to see more of the scene. So I pulled the camera up about 5 units. I also adjust the FOV angle depending on aspect ratio. Definitely seems to operate better than before.

[GameMonetize]

Makes sense