How to cut render result from buttom to top when canvas resize?

Questions
1

Hi everyone,
I use this.engine.resize(); to fill the canvas, but I find that the render result is cutted from middle to twoside. I wonder if there is any way to cut the image from buttom to top? Here is the example image.

image
image1242Ă—687 68.8 KB 

Thanks!
1 Like
2

Are you using GUI components? or are these meshes that you are rendering?
engine.resize doesn’t cut in any way, it simply adjusts the size of the canvas that is available. It is the camera (or the GUI system) that is in charge of showing what needs to be shown.

Want to reproduce this on the playground for us to understand better?

2 Likes
3

It’s my fault, here is the PG. In fact, there is no any GUI here. When I change the size of the canvas, I find the image is cutting from twoside to middle, like the following image.

image
image1167Ă—795 42 KB

I wonder if any waycould make the image like following, which keeps one part and cutting from another part. The following image shows that the cutting direction is from right to left.

image
image1057Ă—775 35.2 KB

Thanks.

1 Like
4

I guess you can do that with HTML?
set the canvas to fixed size (that it won’t change even on window resize) and set its overflow (x) to hidden. This way the babylon canvas doesn’t resize, but the HTML window does.
Of course there are side effects here, that I am not sure you want. One of them is that the camera is no longer centered.
Otherwise, you will need to move the camera relative to the resize in order to get that to work…

1 Like
5

well, if the camera position cannot be changed, how to make it?
In other words, how to draw only a part of the region in the whole render result? Maybe its also an approach.

6

If you want it to work you will need to change the camera’s position correctly and the camera’s target accordingly. There is no generic solution that I can think of.
I don’t know your use case and why you need that, but it is not natively supported. The camera’s target is fixed and doesn’t change on window resize. the camera’s position - the same. So if the HTML solution doesn’t work for you (i.e. not resizing and keeping the canvas size fixed with overflow-hidden) then you will need to write a custom resize that transforms the camera accordingly.

2 Likes
7

Hey hey.

I thought about trying a different take on this to see if we could try something with the camera. I came up with this prototype.https://playground.babylonjs.com/#UNK2CV#6

Here what I am doing: I recorded the width of the window first when the scene is rendered. Then when the window is resized I take the delta of that width

w = window.innerWidth;
camera.position.x += dw / scaleFactor;
cameraTarget.x += dw / scaleFactor;

and apply that change to the cameras position. You can update the position but should also update the focus target position so it is still looking straight ahead.

After trying this myself. I agree with @RaananW your best bet is going to be something with your HTML and CSS where you just don’t display the overflow.

Fun fact I also discovered that window.addEventListener(“resize”) does not apply in the playground for when you resize the line dividing your scene and the code. I guess that makes sense since its not the window. :sweat_smile:

4 Likes