Stop the resize! How?

Questions
1

I’m looking to overlay a babylonjs scene on top of other HTML content, however when I match the size of the other content babylon loves(!#%&^&!@) :smiley: resizing I believe the “FOV” is based on the height of the canvas… (yeah there is an option to change it to camera.fovMode = horz) however I don’t want that either… Would like ZERO perspective change so it should be independent of the size of the canvas…

Just like as if you made an HTML div width:100%; height:100%; overflow: auto;
Then resized the window, the content size of the div would stay the same, however the amount of ‘clipping’ area of the content became larger, without resizing the content of the div.

Take a look at what babylon does with this scene…
https://www.babylonjs-playground.com/#2D6WP8

Resize the divider on that playground and you will see the scene skew. Resize the height of the window smaller and you’ll see the scene squish like a pancake. Both options are HORRIBLE :smiley: Lets make the resize just clip the viewable area and not change the zoom, or dimensions of the objects in the scene… can someone show me how to do so?

I figure one bad solution is to make the canvas a larger size and then just put that in a scrollable div so the canvas never resizes so it doesn’t run into this problem, however then my best guess tells me babylon will have to render the entire scene even the offscreen content just to then clip it out of view… so I guess i need the canvas size to act like a left top aligned viewport to the scenes actual viewport :confused:

2

Use of :

canvas.onresize = function() {
    engine.resize();
};
window.onresize = function() {
    engine.resize();
};

https://www.babylonjs-playground.com/#2D6WP8#1

1 Like
3

That is what causes babylon to distort the output, as you can see in your playground that has zero effect

4

You have to adapt the orthographic dimensions of the camera based on the canvas ratio:

https://www.babylonjs-playground.com/#2D6WP8#2

5

@Evgeni_Popov ALMOST, now it doesn’t skew when you move the divider, however it shrinks when you resize the canvas still.

6

You can try this:

https://www.babylonjs-playground.com/#2D6WP8#3

7

@Evgeni_Popov even closer! It’s almost perfect, now just gotta align top left, its prob something like orthTop += (starth - h) * ratio
orthBottom += (starth - h) * ratio

8

Well, I left it as an exercise for the reader, then, as I don’t know what to do more :slight_smile:

1 Like
9

@Evgeni_Popov I touched up your fantastic work a tad and this seems to be the working solution… :crazy_face: I’ll change this from onBeforeRenderObservable to the window resize event so it doesn’t have to keep calculating. Thanks a bunch!

    let startw = 300, // scene origin width 
        starth = 600; // scene origin height
    scene.onBeforeRenderObservable.add(() => {
        const w = engine.getRenderWidth(), h = engine.getRenderHeight();
        const hOffset = 5 * (w - startw) / startw;
        const vOffset = 5 * (h - starth) / starth;
        const hSizeDiff = 5 * w / startw;
        const vSizeDiff = 5 * h / starth;
        camera.orthoLeft = hSizeDiff - hOffset;
        camera.orthoRight = -hSizeDiff - hOffset;
        camera.orthoTop = vSizeDiff - vOffset;
        camera.orthoBottom = -vSizeDiff - vOffset;
    });
1 Like