Introduction

UI Toolkit actually lets developers modify the screen-space position, rotation, and scale of any VisualElement.

Using this, we can fake billboarded, 3D positioned UI.

Cool, how do I do it?

Start by adding a UIDocument component to your scene, and a new script to manipulate the elements. I called mine WorldSpaceUI.

The easiest way to manipulate the positions of VisualElements in a consistent way is to ensure that they are absolutely positioned and completely centered in the middle of the root element. So in my Awake method I create my elements using the following style:

This would result in a label that is set up like so:

After I create my elements I associate them with specific transforms in my scene. Now every frame we need to transform the world space position of those associated Transforms into screen-space and use scaling to fake perspective. The code for this is remarkably simple. First you’ll want to get the center of the screen in screen-space:

Then use this to calculate a delta away from the center of the screen to the associated Transform's world position transformed into screen-space. The scale is one / z distance, with some protection against a divide-by-zero. Make sure to keep the Z value of the ITranform's position at 0 to avoid weirdness:

And that’s it! I believe UI Toolkit clips any pixels that aren’t on the X/Y plane, so for now rotations on anything except the Z axis won’t render correctly. If I find a way around this I’ll write a follow-up.