GUI image scaling

Hi everyone,

i have troubles scaling a babylon-gui-image properly within a viewport that doesn’t cover the whole rendercanvas. here is a playground: https://www.babylonjs-playground.com/#K60448#39

so maybe it is not possible to scale it properly, because it is projected to a fullscreen ui texture?

Greets,
Sophie

EDIT: i need a solution that works for more than one viewport with different aspectRatios, because that GUI image is displayed from different angles with different cameras and those cameras have varying sizes…

Something like this?
https://www.babylonjs-playground.com/#K60448#42

or this:

https://www.babylonjs-playground.com/#K60448#43

Hi Rah, thanks for your response! That would be the right approach if i would have only one viewport that shows the GUI image, but i have two ones with different aspectRatios, so it would be always stretched in one of those :confused:

1 Like

i am just having an idea - maybe i can use: beforeCameraRender and use your code to set the right aspectRatio for the camera that is about to render. i will test that and give feedback if it worked. it is probably not very performant though, so if someone has a better idea it would be very welcomed :slight_smile:

2 Likes

so it does work more or less - i am using:

this._scene.onBeforeCameraRenderObservable.add( camera => {…});

and as long as the changes are valid for both cameras that are used to render the ui it is all fine and working. (that was a success! :slight_smile: ) but as soon as they have varying aspect ratios (the camera-viewports) and i try to apply different sizes to the ui elements by adding the option

if (camera.name === ‘Name_of_the_first_camera_that_should_render_the_UI_elements’){// do stretching according to aspectRatio of the given camera}

i am facing very strange effects… i can try to create a playground example if someone is interested

I am :slight_smile:

1 Like

:slight_smile: nice - so here it is:

this is working: https://www.babylonjs-playground.com/#K60448#44
this is not working: https://www.babylonjs-playground.com/#K60448#45

in the playground it doesn’t show the effects that i am facing in my project - in my project the gui elements are jumping around - but the main issue is that the resizing doesn’t work (with my implementation) in both the project and the playground. i was playing around with the width as well: https://www.babylonjs-playground.com/#K60448#46 but i didn’t get the required results yet.

So first make sure to use latest version of bjs (4.0 alpha32 currently)

The trick to make it work is to invert your test actually :slight_smile: because the image change won’t happen before next frame (so I need to test for right to affect left values):
https://www.babylonjs-playground.com/#K60448#47

1 Like

thanks!! here is one last pg with same sized gui elements: https://www.babylonjs-playground.com/#K60448#48

Is there an issue in that pg?

no, it is all working now

OK I wanted to be sure:)