GUI image scaling

Questions
1

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…

2

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

or this:

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

3

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
4

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
5

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

6

I am :slight_smile:

1 Like
7

: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.

8

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
9

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

10

Is there an issue in that pg?

11

no, it is all working now

12

OK I wanted to be sure:)