World Space UI scale to fit screen

Unity Engine
1

Hi,

I’m creating a UI for the Rift, so as far as I know this means Screen Space is out and I must use World Space canvas.

I want to have a dark, slightly transparent background overlay the screen when menu is displayed. But I can’t get my canvas to fit the screen properly. I’m currently setting RectTransforms sizeDelta property to match Screen.width/Screen.height, but this doesn’t seem to work. I’ve tried placing the canvas in front of camera , and played with various scale and pos Z values. I’ll get it to fit at one resolution, but then it displays completely differently at other res’. As you can see from screen cap, canvas size matches reported screen size in stats but doesn’t fit the screen properly.

How can I get World Space Canvas to fit screen?

Thanks

1880979--120975--screencap.jpg
1880979--120975--screencap.jpg1336×720 160 KB

1 Like
2

why does it need to be world? try camera or overlay? those both stretch to screen automatically

1881002--120976--upload_2014-12-10_12-7-41.png

3

It’s for the rift. Setting it to Screen Space will only render to one camera. Afaik I need to use World Space so both cameras see it. Of course I may be wrong… maybe there is some way of getting Screen Space to work with the dual camera setup of the rift?

4

but you can set which camera
1881015--120984--upload_2014-12-10_12-28-59.png

1 Like
5

Yes I know, but it only lets you set a single camera. The rift uses two cameras. One for each eye. Everything I’ve tried with Screen Space only displays in one of the cameras, so only shows in one eye.

6

I would recommend writing code for generation of a UI for both screens and two canvases then. Just write actions and listeners that interact with both cameras’ canvases via the event system. The canvas event system is very robust and allows this functionality.

7

So there are two options for you

  1. would be the way you’re trying to go about it now with the world canvas and getting it sized to screen. to do that you need to calculate the frustum size at a given distance from the camera. Mainly
float camHeight;
            if (m_Camera->GetOrthographic ())
                camHeight = m_Camera->GetOrthographicSize () * 2;
            else
                camHeight = 2.0 * m_PlaneDistance * tan(Deg2Rad (m_Camera->GetFov () * 0.5));
               
            scale = (camHeight / screenSize.y) * m_ScaleFactor;

NOTE this is c++ code it will need to be converted to C#.

  1. if you can wait for one of the next beta’s where i’ve fixed the Camera.Render() issue not having the canvas. Once that fix it public you can then wait for end of frame, switch the canvas’s camera to the other camera, call render, switch back to original camera.
3 Likes
8

Hi, this might help you. I got this from some other forum post a few weeks ago. If you setup your canvas as screen space in the editor, then when the app starts set it to world space, it will keep the same scale and position and fill the screen exactly. It works great for me.

canvas.renderMode = RenderMode.WorldSpace;

I use this because I want to be able to move the camera around to show the game, then show the UI, etc. Works really well.

13 Likes
9

The C# if any one is looking for it
2.0f * distanceToMain * Mathf.Tan(Mathf.Deg2Rad * (Camera.fieldOfView * 0.5f))

3 Likes
10

Is this up2date? Cos I need a canvas in world space fit to the view of a cardboard camera! Can I use this code for this? The unity dev mentioned smth about waiting for another beta but its a while ago already…

11

I still use the same block of code in my projects no issues of note with the current unity main build or the current beta build.

12

Sorry for my stupidness,
But I can’t understand what distanceToMain refer to …
I want to know what I can do with this code to fit world canvas to the screen

13

distanceToMain is the distance of the canvas from the main camera.

distanceToMain = Vector3.Distance(mainCameraTransform.position, canvasTransform.position)

/Parth

14

I’m a complete newbie when it comes to this, so I’m wondering if any kind soul would care to paste a complete example on how to fit a world space canvas inside a camera?

I do not understand why you’d only need “camHeight”, as aspect ratios should be different with various Screen.width and Screen.height combinations (which is what you use to see the size of the main camera, I hope).

15

I know this is old but its the first google option. Heres what I did:

playerGameController.playerUIGameObject.GetComponent<Canvas>().renderMode = RenderMode.WorldSpace;
            UnityEngine.XR.Management.XRGeneralSettings.Instance.Manager.InitializeLoaderSync();
            UnityEngine.XR.Management.XRGeneralSettings.Instance.Manager.StartSubsystems();

//main code starts below
//resets position of worldspace camera after switch to be in front of our face as origin
            playerGameController.playerUIGameObject.transform.localPosition = new Vector3(0, 0, 0);
//below sets the distance from face
            playerGameController.playerUIGameObject.transform.localPosition += new Vector3(0, 0, 0.5f);
            playerGameController.playerUIGameObject.transform.localScale *= 2.0f * playerGameController.playerUIGameObject.transform.localPosition.magnitude * Mathf.Tan(Mathf.Deg2Rad * (playerGameController.playerCamera.fieldOfView * 0.5f));
            playerGameController.playerUIGameObject.transform.localScale /= playerGameController.playerCamera.scaledPixelHeight;
            playerGameController.playerUIGameObject.transform.localScale *= VRUIScaleFactor;

            playerGameController.playerUIGameObject.transform.localRotation = Quaternion.identity;

Where playerGameController.playerUIGameObject is the worldspace canvas’ gameobject.
It is a child of the players camera which is why playerGameController.playerUIGameObject.transform.localPosition.magnitude is used. Scaled pixel height is what the other poster had when doing screenSize.y above in C++. VRUIScale Factor is simple a variable I set to fine tune the size to my desired settings.

The few lines are me changing the canvas to world space and switching dynamically to VR.

16

doesn’t work for me with 2019 version, canvas just offset to upper right corner

17

necro revival, but indeed this doesnt take aspect size into account. Currently searching for this exact behaviour, where I have a moving non-orthographic camera and need some world space UI to keep its relative scale. The above code works, though when my camera gets further away the UI gets slightly bigger, thus its not perfect. I assume aspect ratio is the problem here.

My code so far:

        float _scaleFactor = 0.1f;

        private void Scale()
        {
            if (_mainCamera)
            {
                float camHeight;
                if (_mainCamera.orthographic)
                {
                    camHeight = _mainCamera.orthographicSize * 2;
                }
                else
                {
                    float distanceToCamera = Vector3.Distance(_mainCamera.transform.position, transform.position);
                    camHeight = 2.0f * distanceToCamera * Mathf.Tan(Mathf.Deg2Rad * (_mainCamera.fieldOfView * 0.5f));
                }
                float scale = (camHeight / Screen.width) * _scaleFactor;
                transform.localScale = new Vector3(scale, scale, scale);
            }
        }

Edit:
Actually, the Screen.width part of things messed it up for me. I wanted to have the UI stay the same size, no matter the aspect ratio. Instead of doing:

float scale = (camHeight / Screen.width) * _scaleFactor;

…I just removed the division by Screen.width, leaving me with this:

float scale = camHeight * _scaleFactor;

This still causes my UI to get slightly bigger when my camera is far away, but I can’t seem to find out why that’s the case.

18

@Fressbrett

Disclamer … this is just as I understand it and is meant to add to the conversation nothing more.

Some additional info based on assumptions of what issue your reporting

1st the question as to why we only care about height
FOV is an angle representing the verticle field of view so we calcualte the verticle

The scale is the same on all axis so

var scale = Vector3.one * (camHeight / Screen.width) * _scaleFactor;

Would give you a Vector3 scale

Thus if you wanted a world canvas to fit a 16:9 screen perfectly then you would set its pixle resolution to be some multiple of 16:9 i.e. 1920 by 1080 for example and then when you set its scale not its reoslution it will scale to keep that fit.

So if your needing to fit the screen then you need to change scale by distance from camera and resolution to match screen resolution.

2nd you said it gets a little bigger as it gets further away … this is either due to projection or rounding.

What I think you might be seeing in terms of width is due to projection

Having a wider screen like my 32:9 vs a 21:9 vs a 16:9 etc. will cause distortion as you approch the left and right extent of the screen this is due to the projection.

In short a perspective camera is applying a projection matrix that causes a distortion toward the left and right edges of the screen. This effect gives you a since of depth and angle.

If you want to see this in its extreem just turn the FOV up really hgih … put a cube in the middle of the screen and now rotate the camera on its Y axis so your looking left and right … you will notice that as the box moves toward the edge of the screne even though its distance from the camera remains a constant that it appears to stretch.

As to the rounding point … your starting at 0.1 float gets sloppy with very small and very large numbers so if your scale starts to get into 0.000001 youll notice it switches to notation in display and starts to lose some precision as you keep goign … same issue that makes cameras shake further from origin (0,0,0) and that make shaddows flicker fruther from origin (0,0,0)

If I assumed what you where saying wrong sorry.
The math provided is correct in that it find the relative scaler that is the apparent difference in size of an object based on its distance from the screen and the FOV of the camera. Things that will make it less than perfect are as I noted being off center of the screen and having a higher FOV, and I suppose at extream values (very small scale or very large scale) floating point could be an issue

1 Like
19

Today I wanted to get back to this weird problem of my world-space-canvas appearing bigger when closer the the screen edge. I tested out multiple FOVs, and it actually appears to be a projection-distortion problem - the formula seems to be correct. The scale adjusts accordingly as it should depending on camera distance, but the wider the FOV, the bigger the canvas appears when closer to the screen-edge.

As of yet I haven’t found a workaround to compensate for this scale-distortion. It would be nice if I could calculate a distortion factor based on my screen position and the FOV, which I could then apply to my relative scaling logic. I will post an update if I find anything.

20

You can get at the camera projection matrix (Camera.projectionMatrix) but I am not sure what use that will be for you … I would need to understand your use case better.

If you want a “world space” UI then you want it to respond to the projection matrix that is the distortion as it approaches the edge of the screen is desired.

If you do not want that then I dont think you want a “world space” UI I think you want a “screen space” UI that simply locates its self over top the world object … that is a MUCH simpler question …

Point in case fighter jet HUD, you know the lock-on icons that appear over targets … those are Screen Space elements that are simply located to be over top the world space target. Thus they do not distort based on the screen and they maintain a constant size on screen
Same applies for health bars and similar in most games they are actually screen space elements that are simply mapping there position to the screen space projection of some world space object.

Now there is another style where you have a truly world space UI that is, it is effected by projection and thus has a since of “depth” and very often we will scale these objects up and down so they remain readable regardless of depth. This however doesn’t attempt to remove the distortion of projection only to scale up and down such that the world space UI element often a chat bubble or similar remains readable even at distance. With this sort of UI element we often do have it scale up and down so as to not negate the since of depth we simply clamp it at a max up and a min down to insure it remains readable regardless of great distance and that it doesn’t flood the screen when right up on the camera.

PS:
If you wanted to create a world space UI that appeared like a screen space UI it would have to be a curved UI such that it wrapped around the camera to be “perfect”. Again this is odd but as I recall there is an asset that does that on the asset store. A flat UI will always present a distortion as the FOV is projecting that curved field of view to give a since of depth and angle.

1 Like