Prevent background deformation

Using BABYLON When Layer uses images as the background of the scene, stretching the screen will cause the images to deform.I want an effect similar to the background on sketchfab, where the background image remains unchanged no matter how the rendering width is changed




Please pay attention to the icon in the middle, which displays correctly for any width or height
Its background size is 1920 * 1080

Hello @brightMoon , how are you doing?

Are you listening to the window resize event in your application?

I think if handle the resize event and tell the engine to resize correctly you should have the behavior you want:

window.addEventListener("resize", () => { engine.resize(); });

Yes, I have already used resize. I want to use an image as the background, with any screen width or height without causing the background image to deform

Please refer to using BABYLON Example of Layer:

The icon in the middle has been deformed

I seem to have solved it. Find the corresponding proportion to scale the texture, and then perform offset translation

1 Like