Designing Jitter-less UI, for the Oculus Quest
Updated: Aug 14, 2020
This article is part of our series on “Designing for the Oculus Quest”, where we give our readers some tips, tricks and to-do lists on the creating realistic, high-fidelity VR applications for the Oculus Quest. We strongly believe that in the accelerating landscape that is xR, it is important to pay it forward. We acknowledge that we would not be where we are were it not for the largesse of so many among the developers & designers in the xR community. These articles that we put up is attempt at paying back in kind.
The more interactive and engaging you want to make your VR experience, the chances that you’ve had to use text-based elements usually go up. While setting up these text-based callouts, you’re bound to have noticed how much your UI jitters (read “aliases”), especially with thinner font-faces with lower character-spacing settings. This is more so, when you are building to the Oculus Quest.
Now, the very first step to solving these problems are to make sure all your projects are setup correctly from the get-go. Check out our detailed article on solving “Anti-Aliasing for the Quest” for more details on getting those “Project Settings” right.
However, when it comes to UMG Widgets, there are some additional tweaks you need to make sure of, to ensure your UI looks sharp on the Oculus Quest. This is where a UE4 component called Stereo Layer comes in.
It’s important to understand that while Stereo Layers are the single-most important, and straight-forward, components to help you create sharp, alias-free UIs, you must avoid over-using them in your scenes.
Ponder carefully about the requirement of UIs in the first place – try to minimize their usage as far as possible. Avoid having many unique Widget BP Classes clustered together in your scene (thus ensuring that they don’t all appear within your FoV in one frame).
Also, avoid Widgets that have translucent components, as they give performance a bigger hit.
So, how do we set up Stereo Layers?
Create your Widget Blueprint first on the UMG Editor; please make sure you set the height and width of the UI before you start creating it - as shown in the image below.
Next create an Actor Blueprint for this widget; add a widget component and set the Widget Class as your Widget Blueprint and set the height and width on the Draw Size parameter exactly same as the one you set in the Widget Editor.
Now add a Stereo Layer Component and attach it to the root node; make sure the scale matches the widget component exactly, as shown in the image below.
Adjust the following settings in the Details panel linked to your Stereo Layer.
Rotate the Z-Axis of the Widget component by 180°, so that it faces the other way.
Now, in your blueprint editor, add the following code to your Event Tick node.
To put a neat ribbon on it…
Follow all this, and you should be good to go! The edges, and text, on your UI should be quite alias-free once you build your project to the Quest. As a good follow-up, to test whether your Stereo-Layer is working as it should be – build your project (or just launch it) to the Quest, and while in VR, look directly at the UMG and move your head around quickly in different directions. This video from the UE4 documentation channel shows you how. If your UMG “follows” your head movement correctly, without awkward “contrails” and/or frame-drops, you know you’ve done good job and making it work for you!