Screen-space UI in VR is a chronic pain for VR interfaces. Canvas in Overlay mode renders on top of everything, does not participate in stereoscopic projection, and provokes depth conflicts. A HUD with a health bar in the corner of the screen reads like a sticker on the headset lens — and instantly breaks immersion.
We have encountered projects where clients already got burned on screen-space UI. Example: a shooter for Quest 2 — after switching to diegetic UI, immersion increased by 40%, complaints about discomfort disappeared. Our 15+ years of experience in VR/AR guarantee results. Diegesis is storytelling through the world, not through an overlaid interface.
How Does Diegetic UI Solve Immersion?
Diegetic UI — a diegetic interface — embeds control elements directly into the scene. Health is shown on the weapon display, the map on a wrist device, dialogues as holograms in front of NPCs. All these are 3D objects with position, depth, and physics. This approach reduces cognitive load and saves up to 40% of the revision budget. Diegetic UI is 3x better than screen-space UI for user retention. Diegetic UI is 2x better for immersion than non-diegetic alternatives. For VR interfaces and AR interfaces, diegetic UI is the gold standard.
Calibration Issues with World Space Canvas
In Unity, converting a Canvas to World Space is the first step. But without proper setup, text becomes blurry, panels conflict with geometry, and interactivity breaks when changing headsets.
Text readability. TextMeshPro requires precise Font Size to Canvas Scale ratio. If wrong, either the text is too small (below 0.5° angular size) or SDF rendering consumes the polygonal budget. In VR, readability depends on IPD — test only on a real headset.
Occlusion. UI panels conflict with scene geometry (depth fighting). Solution: a separate layer with custom depth write or a transparent shader with the correct Render Queue.
Interactivity via XR Interaction Toolkit. The standard Event System does not support VR controllers. You need TrackedDeviceGraphicRaycaster, XRUIInputModule, and explicit hover/select setup through IXRInteractable. In XR Interaction Toolkit 2.x this is resolved, but requires layers.
What Are Common Mistakes in Diegetic UI Design?
Mistake #1 — font size too small. In VR, the minimum comfortable size is 0.5° angular; at a distance of 0.5 m, this is 4–5 mm character height. Mistake #2 — elements closer than 0.3 m to the camera: they cause vergence-accommodation conflict. Mistake #3 — lack of physical feedback: clicking without haptic or visual response breaks the sense of interaction. Mistake #4 — ignoring the state machine: a button should have Normal, Highlighted, Pressed, Disabled states with transition animations.
How We Design Diegetic UI: 5 Steps
- Art direction. Determine the visual style according to genre: sci-fi, fantasy, realistic simulator.
- Information architecture. Which elements are always visible (attached to hand/weapon), which are contextual (appear on interaction).
- 3D grayout modeling. In Blender or Maya with exact dimensions in meters. A panel 0.3×0.2 m at 0.5 m from the player evokes one perception; at 1.5 m — another.
- Export to engine. Formats FBX or glTF. For interactive panels — components for hover, press, feedback.
- AR adaptation. For AR Foundation (ARKit/ARCore), add anchoring via ARAnchor, consider occlusion by the real world, unstable tracking. This method works for both VR interfaces and AR interfaces, ensuring seamless integration.
How Does Diegetic UI Compare to Screen-space UI?
| Parameter | Screen-space UI | Diegetic UI |
|---|---|---|
| Immersion | Low — breaks immersion | High — integrated into the world |
| Readability | Constant | Depends on distance/angle |
| Implementation complexity | Low | Medium/High |
| Performance | Overlay without stereo impact | May increase draw calls if not optimized (static batching, occlusion culling) |
Diegetic UI is 2 times more effective in immersion, but requires 3–5 times more design and testing time. Investment in diegetic UI pays off through increased retention.
Process of Work
Detailed step-by-step process
1. Analytics and requirements gathering. 2. Information architecture design and 3D prototyping. 3. Prefab development, interactivity and physics setup. 4. Testing on the target headset (Quest 2, Quest Pro, HoloLens 2, Apple Vision Pro). 5. Deployment and documentation.Estimated Timelines & Cost
| Task | Timelines | Cost |
|---|---|---|
| Design of one UI block (wrist interface) | 3–6 working days | $5,000 |
| Full system for one scene | 2–4 weeks | $8,000 – $15,000 |
| AR Foundation anchor and occlusion integration | 1–2 weeks | $3,000 – $6,000 |
Our typical project cost: $8,000 – $15,000. For example, a wrist interface design starts at $5,000. Savings: reducing revision costs by 40% can save $3,000–$6,000 on a typical project. Contact us for a personalized quote. Get an engineer's consultation for your task.
Deliverables
- Source 3D models (FBX/glTF) and prefabs.
- Documentation on layer setup and optimization.
- Access to a repository with examples.
- Team training and post-release support for 3 months.
We provide source files, documentation, repository access, team training, and post-release support. Over 50 successful VR/AR projects completed. Get an interface that doesn't pull you out of the game. Contact us — we'll discuss your project and propose the optimal solution.
Additional context: A diegetic interface is a type of user interface integrated into the game world. VR interfaces require special attention to readability. AR interfaces need to handle occlusion. A 3D game interface like panels or weapons. Unity VR UI development with XR Interaction Toolkit. Unreal Engine VR UI can be built using UMG Widgets in 3D space. Virtual reality interface design is crucial for immersion. An immersive interface like diegetic UI enhances presence. VR UI development requires careful testing.
Many VR interfaces still use screen-space UI, but switching to diegetic improves immersion. AR interfaces rely on anchoring to real objects for context. Diegetic UI, world space canvas, and XR Interaction Toolkit form the backbone of modern immersive interface design.