Guide

World UI and Unity content

A view can draw over the screen, inside a camera's image, on a panel in the scene or into a texture. And a page can show what Unity renders: cameras, models, videos and materials.

Render modes

Render mode	What it is for
Screen Overlay (default)	HUDs and menus over a camera's finished image, after its image effects
Camera	In a camera's image before its image effects, so post-processing (bloom, color grading) applies to the UI too
World	A panel in the scene: name tags, terminals, diegetic screens, VR menus
Render Texture	Into a texture for any material: a monitor in the scene, a curved screen, a page on a mesh

A DevCore App offers the two camera modes, a DevCore 3D View the two texture modes. A page is drawn as one mesh with one material and, almost always, one draw call; only what changed is rewritten and uploaded.

Scale

Constant Pixel Size: Scale screen pixels per CSS pixel.
Scale With Screen Size: the page is laid out for a reference resolution (1920 × 1080 by default) and scaled with the screen; Match blends between fitting the width and the height, like Unity's Canvas Scaler.
Constant Physical Size: a CSS pixel is 1/96 inch on the real screen.

Pages use media queries (@media (max-width: 800px), (orientation: portrait), (pointer: coarse)) to adapt to phones and small windows, and env(safe-area-inset-*) to stay clear of notches.

World panels

A World view is a panel at the GameObject's transform, facing its forward direction like a world-space canvas.

Panel Size in meters and Pixels Per Meter give the page's size in CSS pixels: 1.6 × 0.9 m at 1000 px/m is a 1600 × 900 page.
Pivot places the panel on the transform; Double Sided shows its back.
Resolution is texture pixels per CSS pixel: more for panels seen close up.

The panel is drawn into a mipmapped texture shown on an unlit quad, and the texture is drawn again only when the page changed. Pointers reach it by rays from the view's camera; the mouse and touches work on it as on a screen. For XR controllers, send rays yourself with UiSystem.Input.RayMove, RayDown, RayUp and RayWheel.

For a page on a mesh of any shape, use Render Texture with an Input Collider (a MeshCollider): hits on the collider become positions in the page from their texture coordinates.

Text in world panels stays sharp at any distance with -devcore-text-rendering: sdf.

Unity content in pages

Pages can show what Unity renders, laid out and clipped like any element:

<unity-camera camera="Minimap Camera" fps="30"></unity-camera>
<unity-model src="prefabs/Sword" autorotate></unity-model>
<video src="streaming://intro.mp4" autoplay loop muted></video>
<div style="-unity-material: url(materials/Glow.mat)"></div>

Element	What it shows
`<unity-camera camera="Name" fps="30">`	A scene camera (found by GameObject name, or registered from code) rendered into the element at its size, at most `fps` times a second
`<unity-model src="...">`	A model preview (a prefab from Resources, or registered from code) with its own camera and lights; `autorotate`, and drag to turn
`<video src="...">`	Unity's VideoPlayer (`autoplay`, `loop`, `muted`); the video's size is the element's natural size
`-unity-material: url(...)`	A material drawn every frame into the element's box: animated backgrounds, shader effects

Each is rendered at the size it is shown, only while it is on the screen, and keeps the element's rounded corners, clips, opacity and transforms. Each costs a draw call of its own. The registries are in Unity content and fonts.

Several views

A game can have any number of views: a HUD over the camera, a menu, panels in the world. Each has its own document. UiSystem updates them all once per frame after LateUpdate; input goes to the view under the pointer (pages over a camera first, then world panels along the ray) and keys go to the view last pressed.

The views of one camera are drawn in the order they were enabled, the last one on top, in one pass. For the screen UI itself, prefer one view: see One view or several?