GUI Advanced Dynamic Texture - scaleTo or change the size of the texture after initial creation

Questions
1

I have a UI card that I’d like to be able to scale with a gizmo. The card setup is as follows

  • Card - a box mesh - the parent object for the card
  • Plane - a plane placed just off the surface of the box
  • Advanced Dynamic Texture drawn on the surface of the plane
  • GUI content - in this case, just a grid with some placeholder rects.

I added a BoundingBoxGizmo gizmo to the card so I can scale it. This works but it is easy to scale the card in a way that breaks the aspect ratio of the texture/GUI. I added onScaleBoxDragEndObservable to adjust the texture after the card is scaled, but this is where I’m running into issues.

It seems like I need to use advancedTexture.scaleTo() with new width and height values, but when I use method this the texture disappears.

It seems like anytime I call scaleTo() after the initial time that the scene has started to a plane, it ends up disappearing on me.

Here is a playground. The card is setup as described above. A timeout of 3 seconds will try to call scaleTo() which will cause the texture to disappear. You can disable line 99 to remove this timeout. Using the scale gizmo on the card will also trigger the issue.

Is it possible to adjust the scale or aspect ratio of Advanced Dynamic Texture while a scene is running? Am I using the wrong method or using scaleTo() incorrectly?

2

cc @DarraghBurke

3

Hi, thanks for bringing this to our attention! You are using scaleTo() correctly. Under the hood, scaleTo creates a brand new texture at the new resolution. The issue is that the GUI is not automatically re-rendering onto this new texture, leaving you with an empty texture.

The easy fix for this is to call advancedTexture.markAsDirty() after you complete the scale.This tells the GUI that it needs to re-render.
Advanced Dynamic Texture - scaleTo fix | Babylon.js Playground (babylonjs.com)

However, we should almost certainly be doing this by default on calls to scaleTo(). I’m going to open a PR to do this.

1 Like
4

Got it! I still have some math to work out for scaling the texture correctly, but this solution works for me. Thanks for the help.

1 Like
5

PR is merged: [GUI] Mark as dirty after calls to scale and scaleTo by darraghjburke · Pull Request #11941 · BabylonJS/Babylon.js (github.com) Thanks again for the report!

3 Likes