Engine resizing method

[pichou]

Hello everybody!

I have an issue with the resizing method which depends on screen size. When you resize the height of your window, all the elements in the scene are zoom-in or out when the screen height is bigger or smaller. I understand the logic because the bigger your screen is and the more you want to show.

First I wonder why the camera position is unchange when the screen size change because the effect really looks like the camera is going up and down?

Then in my specific case I don't want this effect to happen and need all the elements to keep the same size in the screen whether this is a big one or not. But didn't find a solution yet.
I could set the camera position depending on the height of the screen but it doesn't seem really reliable. 

Thanks for your help! PICHOU

 

[MarianG]

Hi. I think this idea may help you

 

[pichou]

Hum not really,

With your "fitToView" function you can see in the playground that the skull size is still changing when you change the window height.

Then the last suggestion of Ericky14 is actually to update the camera position/radius which I would prefer to avoid because I am not sure I will always have the exact same result depending on screen size with that method.

Thanks for the topic though, the questions are similar indeed!

[royibernthal]

It's a bit of a workaround, but how about simply putting everything in your scene into a mesh container, then scaling that container according to engine._renderingCanvas.width / height or something similar after every engine.resize()?

I suppose you'd have an ideal stage size. Let's say you have idealSize.width and/or idealSize.height. I think you'd have to choose one and scale according to it.

var scale = idealSize.width / engine._renderingCanvas.width;

container.scaling.x = scale;
container.scaling.y = scale;
container.scaling.z = scale;

I didn't really think this through but I think it might be a good place to start.

[pichou]

The thing I use right now is the camera . I simple set the camera position depending on canvas height : 

    window.onresize = () => {
      camera.position.z = -10 - (canvas.height - 500)/50;
    };

And it works, with that simple equation I manage to have the expected behavior. 
But I don't know, I feel like this is not reliable and that the size could still change depending on screens (I have test it only on mine for now).

I have made a playground so that you can see the result : http://playground.babylonjs.com/#ZR8GLF#1