Scale on resize

[vsh91]

Hello everyone, this is my first time posting here and I am incredibly new to babylon
.I've scoured the net looking for a solution to this problem with none yet.

I'm using engine.resize() on window resize listener and this seems to work when I resize the window vertically.

However, there seems to be no horizontal scaling available and when resizing the window horizontally, the image gets cut off instead of shrinking.

Anybody have a solution?

[NasimiAsl]

hi welcome

please share any source or part of you code?

[vsh91]

Hey thank you for replying. I think the best example of what I am trying to do is from a previous project I was working on with three.js.

http://people.ucsc.edu/~vshahbaz/boardGame/strat_game.html

Notice that resizing with window in either the width or height will not cut out any of the graphics, but instead resize everything within the scene.

Now in comparison, this is how my resize function currently works in Babylon, http://www.babylonjs-playground.com/#1GM4YQ

Resizing the width of the window will not re-scale the objects within it but instead keep them center. The code I'm running is posted below and seems pretty standard for all graphical applications.

window.addEventListener('resize', function(){
	engine.resize();
});

Do you think the solution I posted in the picture can be converted from THREE to BABYLON? Considering that the engine.resize() code is abstracted so much, I'm having a lot of difficulty finding the variables or functions I can use to manually change scaling of the scene.

Another question I have is if I should even care about horizontal scaling, considering that this form of resizing seems pretty standard.

I hope this clarifies what I'm trying to achieve, I'm still pretty new to all this and my terminology might be off.

And thank you to anyone that's taking the time to read through this. Any form of potentially time saving knowledge is much appreciated.

[NasimiAsl]

maybe your canvas element dom or parent style is wrong

[Wingnut]

Hi guys.  I built a little home demo (no playground gui in the way)... and yep, I see this.  BabylonJS (by default) scales the scene per the height of the canvas, and ignores the width.  Mesh on upper and lower screen edges... is always fine.  Mesh on far right or left... goes off-screen easily (using window corner-drag). 

I have not yet tried adjusting camera horizontal field-of-view (fov), but maybe I will experiment with that today.

I think camera.fovMode = camera.FOVMODE_VERTICAL_FIXED;   ...will do just the opposite.  Early tests on that... show that the far left/right mesh stay in view, but no promises for far top/bottom.  vsh actually needs a FOVMODE_BOTH_FIXED (doesn't yet exist or maybe not possible).   hmm.  Still thinking.  Interesting challenge!

[digEmAll]

Any news on this topic ?

[paleRider]

Hi everybody!

Is this issue going to be solved with a new release of the engine?

Best regards.

[GameMonetize]

I have no open issue for it so I guess so

[paleRider]

Ok Deltakosh.

This way I understand it must be implemented by means of:

myEngine.fovMode=FOVMODE_VERTICAL_FIXED;

and

myEngine.fovMode=FOVMODE_HORIZONTAL_FIXED;

As explained in this other thread of this forum.

Best regards.