HomeComputer ScienceFoveated Rendering for Mobile XR

Foveated Rendering for Mobile XR

Interactive 3D simulator of gaze-tracked foveated rendering for mobile AR/VR headsets: a moving eye-tracking point sets a high-resolution foveal zone while shading resolution falls off radially into the periphery, with live GPU pixel-cost and bandwidth savings readouts.

Computer Science3DModerate60 FPS📱 Mobile-adapted⇄ 2D version
mobile-extended-reality ↗ Open standalone

Mobile AR/VR headsets have a fraction of a desktop GPU's power but must still hit 90+ fps to avoid motion sickness. Eye-tracked foveated rendering is the trick that makes this possible: an inward-facing IR camera locates the wearer's gaze point tens of times a second, and the renderer shades a full-resolution "foveal" disc around it while quietly dropping resolution in the periphery, where human cone density — and therefore perceived detail — is already far lower. This simulator renders a live 3D tile grid whose per-tile resolution is resampled from the angular falloff function R(θ) around a moving gaze point, with real GPU pixel-cost and bandwidth-savings readouts, a saccade-driven auto mode, and a manual drag mode, plus a foveated/uniform toggle so the savings are visible directly.

⚙ Under the hood

Interactive 3D simulator of gaze-tracked foveated rendering for mobile AR/VR headsets: a moving eye-tracking point sets a high-resolution foveal zone while shading resolution falls off radially into the periphery, with live GPU pixel-cost and bandwidth savings readouts.

XReye trackingrenderingGPU performancemobile VRAR

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)