Diegetic Approach to Immersive VR/AR UI Design

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

1. Art direction. Determine the visual style according to genre: sci-fi, fantasy, realistic simulator.
2. Information architecture. Which elements are always visible (attached to hand/weapon), which are contextual (appear on interaction).
3. 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.
4. Export to engine. Formats FBX or glTF. For interactive panels — components for hover, press, feedback.
5. 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?

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

Estimated Timelines & Cost

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.

VR and AR Development

When we first launch a project in a VR headset, most teams face the same thing: technically everything works, but in the headset either motion sickness occurs, or hands 'float' with a delay, or the scene looks jerky at the periphery. These are not bugs in the usual sense — they are a consequence of the fact that VR/AR development requires a different approach to render architecture, interaction, and UX from the very beginning of the project. Our experience: over 7 years in game dev, 15+ completed VR/AR projects for Meta Quest, SteamVR, PSVR2, HoloLens. We work with teams that need not just a prototype but a production‑ready application with a stable frame rate.

Platforms and SDKs

We work with all relevant stacks. We use OpenXR as the base layer wherever possible — it provides cross‑platform compatibility between Meta, Valve Index, HP Reverb and other PC VR devices. On top of OpenXR, we build on the XR Interaction Toolkit (Unity) or VR Expansion Plugin (Unreal). Contact us for a stack assessment tailored to your project.

How to minimize motion sickness in VR locomotion?

Locomotion — the main source of motion sickness for inexperienced VR users. According to research, about 70% of users experience discomfort with improper movement settings Oculus Developer Guidelines. Teleportation — standard navigation method when smooth movement is undesirable.

Components from XR Interaction Toolkit: TeleportationArea, TeleportationAnchor, TeleportationProvider. Basic implementation works out of the box, but for production we refine it in four steps:

1. Setting up XRRayInteractor with a curved ray (Bend Ray) — the teleportation arc looks more natural than a straight ray and is perceived better by users.
2. Adding a valid landing zone — a visual indicator changes color when hovering over an obstacle (red/green).
3. Implementing fade transition — smooth screen fade (black fade) before teleportation reduces disorientation.
4. Rotation snapping — after teleportation we offer snap rotation by 45° or 90° instead of smooth, reducing motion sickness risk.

For projects requiring smooth locomotion (action games, simulators), we use comfort settings: vignetting during movement, reducing FOV during acceleration. Settings are available to the user in the menu — different people have different sensitivity thresholds. The difference between kinematic and physics‑based movement: kinematic gives instant hand following but lets objects pass through walls; physics‑based via Joint provides realistic collisions but requires velocity damping and max joint force tuning. We choose based on the type of interaction.

How to make object grabbing in VR physically realistic?

This is the most underestimated part of VR development. Clients often perceive it as 'just hand animation', but in practice it is a complex system where physical correctness, responsiveness, and comfort conflict.

Grab (grabbing)

XR Interaction Toolkit provides three types of Interactable for grabbing:

• XRGrabInteractable — standard grab, object follows controller via physics joint or direct position/rotation
• XRSimpleInteractable — for objects without physical movement (buttons, levers)
• Custom Interactable by inheriting from XRBaseInteractable

Attach Transform — a frequently ignored detail. Each Interactable must have a properly configured Attach Transform (the point where the hand 'attaches'). Without it, the pistol grip will be at the center of the mesh, not where it is held.

For weapons and tools with two‑handed grab — a separate TwoHandGrab system: leading hand determines position, the second — orientation. XR Interaction Toolkit supports this via XRTwoHandGrabInteractable or custom logic with two Attach Points.

Throw (throwing)

Velocity smoothing is critical for realistic throwing because the Rigidbody.velocity at the moment of controller release reflects instantaneous speed, often incorrect due to tracking discretization. The user makes a quick wrist movement — but the object flies half as fast.

Solution: velocity smoothing over the last N frames (typically 5–10 frames, ~80–160 ms at 60 Hz) before release. XR Interaction Toolkit does this via VelocityEstimator. Additionally, we apply a velocity scaling multiplier — a small speed increase (1.2–1.5×) makes throws subjectively more satisfying. Angular velocity (for objects that should spin in flight) is also averaged similarly.

AR: Plane Tracking and Environment Interaction

AR adds a different class of problems — working with real, unpredictable environment. AR Foundation — a cross‑platform layer on top of ARKit and ARCore. Most basic features (plane detection, raycasting, image tracking, face tracking) are available through a unified API.

Plane Detection

ARPlaneManager detects horizontal and vertical planes. Practical nuances:

• Initialization takes time — the user must look around the room while the system builds a map. An explicit onboarding with instruction 'slowly move the camera across surfaces' is needed.
• Planes are unstable — their boundaries and position are updated as data accumulates. Objects placed on a plane need to be attached via parent to ARPlane, not to world coordinates.
• Plane merging — two detected floor segments may merge into one, moving the anchor. For critical anchors, use ARAnchor instead of direct attachment to the plane.

Image tracking (via ARTrackedImageManager) quality directly depends on the quality of reference images. Images with high detail frequency and contrasting edges (like a QR code but stylish) track more reliably than smooth logos. ARCore Geospatial API — for outdoor AR with real‑world coordinate binding (accuracy up to 10 cm in well‑mapped areas).

Optimization for VR: Frame Rate and Comfort

VR requires stable high frame rate. About 60% of development time in mobile VR goes to optimization, not functionality — retrofit costs twice as much as proper architecture from the first sprint.

Single Pass Instanced Rendering

The main render optimization in VR. Without it, the scene is rendered twice (once per eye), doubling draw calls. Single Pass Instanced renders both eyes in one pass via instancing: geometry is processed once, the shader gets two view/projection matrices through GPU instancing. Enabled in Unity via XR Plug-in Management > Rendering Mode: Single Pass Instanced. Important: custom shaders must support SPI — standard URP/HDRP shaders support it, custom HLSL requires modifications (UNITY_SETUP_STEREO_EYE_INDEX_POST_VERTEX and related macros). Applying this technique reduces draw calls by 40–50%, making it twice as efficient as naive double rendering.

Foveated Rendering

On Meta Quest, Fixed Foveated Rendering (FFR) is available — reducing resolution at the periphery where visual acuity is lower. Configured via OVRManager or Meta XR SDK:

OVRManager.fixedFoveatedRenderingLevel = OVRManager.FixedFoveatedRenderingLevel.High;
OVRManager.useDynamicFixedFoveatedRendering = true;

Dynamic FFR automatically increases the level when frame rate drops — more convenient than fixed in scenes with variable load.

IPD and Comfort Settings

IPD (Inter‑Pupillary Distance) — affects depth perception. At the programmable level on most devices, only reading IPD is available (OVRPlugin.GetSystemDisplayFrequency), physical adjustment is on the headset. For applications requiring precise positioning (medical simulators, training), we account for IPD in scene scale calculations.

Haptics

Haptic feedback — an underestimated tool. Even a simple vibration response when grabbing an object or hitting significantly increases the sense of presence. On average, integrating haptic patterns takes 30–80 hours per project.

XR Haptics via OpenXR:

var hapticImpulse = new UnityEngine.XR.HapticCapabilities();
InputDevice device = InputDevices.GetDeviceAtXRNode(XRNode.RightHand);
device.SendHapticImpulse(0, amplitude: 0.5f, duration: 0.1f);

For complex patterns (tactile 'texture' of a surface when touched, increasing vibration when drawing a bowstring) we use Meta Haptics Studio — allows designing haptic clips visually. This can reduce time spent on manual haptic tuning by about 30%.

What does VR/AR application development include?

When ordering a turnkey project, we provide the following deliverables:

• Architectural document with stack description, render logic, and interaction system
• Working prototype (MVP) for testing on target device
• Integration of necessary SDKs (Meta XR, OpenXR, AR Foundation, etc.)
• Optimization for target frequencies 72/90/120 Hz with draw call and FPS profiling
• Testing on physical hardware (Quest, SteamVR, HoloLens) with user involvement
• Full documentation for build, deployment, and support
• Training for the client's team (workshop on XR Toolkit)
• Warranty support for 1 month after delivery

What affects cost and timeline?

VR/AR projects are more expensive than regular games of similar scope. Iterations are slower — each fix must be tested in the headset, an emulator does not convey the real experience. Motion sickness forces reworking some conceptual decisions after the first playtest. Optimization takes a significant portion of time — for mobile VR (Quest) up to 60–70% of the cycle. For Quest projects, we start optimization from the first sprint. The cost of basic SDK integration (XR Interaction Toolkit) varies depending on the scope of custom Interactable. Typical budgets for a full Quest project range from $25,000 to $80,000 depending on complexity, number of custom interactions, and depth of optimization. Proper architectural planning from sprint one typically saves 40% on later rework compared to fixing performance bottlenecks retroactively.

Get a consultation on your project — we will assess the task, stack, and timelines. Order turnkey VR/AR application development with a guaranteed stable frame rate.