How to set the aspect ratio of the scene to 1:1 and keep it in all environments

Questions
1

Hi.
We are creating a scene which is designed to a 1:1 aspect ratio.

This ratio should always be maintained, no matter in which environment the script is loaded.
My understanding so far is, that the canvas scales to certain parameters, e.g. put into an html page.
We dont have control over the displaying end but want to make sure, that the aspect ratio of the scene is always 1:1.
I guess it has something to do with the canvas and the correct behavior/scaling?

Can we define that in our script, so that no matter where the scene is viewed (device, monitor etc.) where it is implemented (html, div, body etc.) fullscreen or windowed , so that it always keeps the 1:1 ratio without changing the camera, content aso?
So it needs to scale to the maximum, is it either height or width and the other axis of the ‘canvas’ is scaled to maintain the 1:1 ratio.
We are not doing anything special like gui.

Thanks for answers.
Best. Werner

1 Like
2

Hey hey!

What exactly is 1:1 ratio? do you mean that your height and width are equal?
If that’s the case - On a default viewport babylon will fill your canvas. Control your canvas’ aspect ratio, and you control your scene’s aspect ratio. Otherwise you will need to calculate the viewport (i.e. check what % of the height/width the other one is, and set it in your camera’s viewport). But css is much simpler in that case, and doesn’t involve to much code :slight_smile:

3

hi.
Yes I mean height equals width.
How and where would I do that?
Would we create a canvas in the script and set the aspect ratio?

cheers

4

Hey. I am still not sure how to do that.
If looking at the templates with an html pages, I can modify the css elements.
I guess that is what you are referring to.
Can I use css in the .js main script as well like I would do it in html?
Or do I need to do some other things to control the canvas element?
Best. Werner

5

there are many ways of making sure your html element stays in the same perspective. My favorite trick is to use vw or vh units (depending on your needs) on both width and height of the element.

But this is just one of many, and it really depends on your use case and the page structure.

6

Right.
In my case I do not have any page structure.

The scene is implemented in pages, which we do not know. So it can go in a body, div, iframe, what ever and so on.

So I want to make the canvas always to stay 1:1 no matter in which environment it will be loaded.
That is the important part.
And I am wondering if that works.

function resizeCanvasToDisplaySize(canvas) {
    // Lookup the size the browser is displaying the canvas in CSS pixels.
    const displayWidth  = Math.min(window.innerWidth, window.innerHeight);
    const displayHeight = displayWidth;

    // Check if the canvas is not the same size.
    const needResize = canvas.width  !== displayWidth ||
                       canvas.height !== displayHeight;

    if (needResize) {
      console.log(resizing canvas from ${canvas.width} x ${canvas.height} to ${displayWidth} x ${displayHeight});

      // Make the canvas the same size
      canvas.width  = displayWidth;
      canvas.height = displayHeight;
    }

}

This somehow seems to do what I am thinking of.

7

Sure, that seems to do the trick. have you tried it? is it not working?

8

It is working for most of the cases.
Funny enough, there where we need it, its not. uhm.
But might be, that this environment is doing something weird re. css or so what we dont know.

But I might be able to get the info.

9

Hello @yamaciller just checking in, was your question answered?