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.