How to design an efficient Blueprint class and widget in VR

Design an efficient widget

When developing VR apps, a common problem is that when the number of scene objects increases, dropped frames occur. In the following tutorial, we have provided several guidelines to help you design an efficient widget.

Improve Unreal widget performance in VR: Use VRTestApp Menu widget as an example

  1. Set Mobility to static.

    1. In Components tab > EnvironmentInfo select DefaultSceneRoot (SceneComponent).
    2. Go to the Details tab on the right.
    3. Under Transform, set Mobility to Static.
    ../_images/DefaultSceneRoot_Mobility.png

  2. Don’t do redraw every frame.

    1. In the Components tab, select Menu_Widget (Widget Component).
    2. Go to the Details tab on the right.
    3. Under User Interface, set Timing Policy to Game Time. By doing so, it prevents Unreal Engine from simulating skipped ticks when resuming from a pause.
    4. Set Redraw Time to 0.1. If this value is too large, it will look slow updating the FPS info on the menu. In our experience, it’s acceptable to set Redraw Time to 0.1s for a common Menu widget. This value affects the response time of a menu item color change when the mouse hovers over it.
    ../_images/env_menu.jpg

  3. Change the draw size.

    1. In the Components tab, select Menu_Widget (Widget Component).
    2. Go to the Details tab on the right.
    3. Under User Interface, check Draw at Desired Size. This makes the widget automatically adjust the Draw Size according to the text content.
    ../_images/env_menu.jpg
    1. Adjust the actual content appearance of the menu widget. First, select all the text and then under Appearance > Font, change Size from 48 to 12. The entire widget draw size will be reduced accordingly. In the sample below, you’ll see that the draw size was reduced to 302x282 from 1351x1145 when the font size was changed from 48 to 12, roughly a 16x (4x4) performance improvement.
    ../_images/drawsize302x282-2.png ../_images/drawsize1351x1145-2.png

Note

The font size does not change according to Draw Size. To adjust the font size, do it in the widget.

Each time it redraws, it will create a texture for this menu widget based on the draw size. Therefore, the larger the draw size, the greater the burden is on the GPU.

After adjusting the widget font size and Actor draw size, the menu widget will look smaller. To solve this problem, do one of the following:

  • Move the widget Actor closer to the player.
  • Change the Widget Actor’s Scale.

Follow these steps to adjust the Widget Actor’s Scale.

  1. In the Details tab, select EnvironmentInfo Actor.
  2. Under Transform, set Scale to 4.
../_images/ScaleNear.png