Screen Space vs World Space Canvas in Unity: Key Differences and Usage

In Unity, a Screen Space canvas renders UI elements directly on the screen overlay or camera view, making them fixed in screen pixels. A World Space canvas places UI elements as objects in the 3D world, allowing interaction with scene objects and perspective changes.

Quick Comparison

Here is a quick comparison of Screen Space and World Space canvases in Unity based on key factors.

Factor	Screen Space Canvas	World Space Canvas
Render Mode	Renders UI on screen overlay or camera	Renders UI as 3D objects in the scene
Positioning	Fixed to screen pixels	Positioned using world coordinates
Interaction	UI always faces camera, no depth	UI can be occluded and affected by lighting
Use Case	HUD, menus, fixed UI	In-world UI like signs, VR interfaces
Performance	Generally faster for simple UI	May cost more due to 3D rendering
Scaling	Scales with screen resolution	Scales with world units and camera distance

Key Differences

Screen Space canvases are designed to display UI elements that stay fixed on the player's screen regardless of the 3D scene. They can be set to Screen Space - Overlay, which draws UI on top of everything, or Screen Space - Camera, which renders UI through a camera but still fixed to screen space. This makes them perfect for HUDs, menus, and buttons that should not move with the game world.

World Space canvases, on the other hand, are placed as objects inside the 3D scene. They behave like any other 3D object, meaning they can be rotated, scaled, and occluded by other objects. This allows UI to exist naturally in the game world, such as floating health bars, interactive panels, or VR interfaces that players can walk around and interact with.

Because World Space canvases are part of the 3D environment, they require careful positioning and scaling to remain readable. They also respond to lighting and camera perspective, unlike Screen Space canvases which ignore these factors. Choosing between them depends on whether the UI should be part of the scene or fixed on the screen.

Code Comparison

This example shows how to create a simple button in a Screen Space - Overlay canvas using C# in Unity.

csharp

using UnityEngine;
using UnityEngine.UI;

public class ScreenSpaceCanvasExample : MonoBehaviour
{
    void Start()
    {
        // Create Canvas
        GameObject canvasGO = new GameObject("ScreenSpaceCanvas");
        Canvas canvas = canvasGO.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;

        // Add CanvasScaler for resolution scaling
        canvasGO.AddComponent<CanvasScaler>();
        canvasGO.AddComponent<GraphicRaycaster>();

        // Create Button
        GameObject buttonGO = new GameObject("Button");
        buttonGO.transform.SetParent(canvasGO.transform);

        Button button = buttonGO.AddComponent<Button>();
        Image image = buttonGO.AddComponent<Image>();
        image.color = Color.cyan;

        // Set button size and position
        RectTransform rect = buttonGO.GetComponent<RectTransform>();
        rect.sizeDelta = new Vector2(160, 40);
        rect.anchoredPosition = Vector2.zero;
    }
}

Output

A cyan button appears fixed at the center of the screen overlay.

World Space Equivalent

This example creates the same button but places it in World Space so it exists as a 3D object in the scene.

csharp

using UnityEngine;
using UnityEngine.UI;

public class WorldSpaceCanvasExample : MonoBehaviour
{
    void Start()
    {
        // Create Canvas
        GameObject canvasGO = new GameObject("WorldSpaceCanvas");
        Canvas canvas = canvasGO.AddComponent<Canvas>();
        canvas.renderMode = RenderMode.WorldSpace;

        // Set canvas size and position in world
        RectTransform canvasRect = canvasGO.GetComponent<RectTransform>();
        canvasRect.sizeDelta = new Vector2(300, 150);
        canvasGO.transform.position = new Vector3(0, 1, 2);
        canvasGO.transform.rotation = Quaternion.Euler(0, 180, 0);

        // Add CanvasScaler and GraphicRaycaster
        canvasGO.AddComponent<CanvasScaler>();
        canvasGO.AddComponent<GraphicRaycaster>();

        // Create Button
        GameObject buttonGO = new GameObject("Button");
        buttonGO.transform.SetParent(canvasGO.transform, false);

        Button button = buttonGO.AddComponent<Button>();
        Image image = buttonGO.AddComponent<Image>();
        image.color = Color.cyan;

        // Set button size and position
        RectTransform rect = buttonGO.GetComponent<RectTransform>();
        rect.sizeDelta = new Vector2(160, 40);
        rect.localPosition = Vector3.zero;
    }
}

Output

A cyan button appears as a 3D object positioned at (0,1,2) in the scene, visible from the camera.

When to Use Which

Choose Screen Space canvas when you want UI elements that stay fixed on the player's screen, like health bars, menus, or HUDs. It is simpler to set up and ensures UI is always visible and readable regardless of the scene.

Choose World Space canvas when you want UI to be part of the 3D world, such as interactive panels, floating labels, or VR interfaces. This allows UI to interact with scene lighting, perspective, and occlusion, creating immersive experiences.

In summary, use Screen Space for traditional 2D UI and World Space for UI integrated into the game world.

Key Takeaways

Screen Space canvases render UI fixed on the screen, ideal for HUDs and menus.

World Space canvases place UI in the 3D scene, allowing interaction with objects and perspective.

Screen Space is simpler and faster for standard UI, World Space suits immersive or in-world interfaces.

World Space UI requires careful positioning and scaling to remain readable.

Choose based on whether UI should stay on screen or exist within the game world.