HomeRendering & Computer GraphicsGaze-Contingent Foveated Rendering

Gaze-Contingent Foveated Rendering

Interactive VR foveated-rendering simulator: drag the gaze point across a virtual headset display and watch per-tile render resolution fall off with retinal eccentricity, with live GPU pixel-savings readouts.

Rendering & Computer Graphics3DModerate60 FPS📱 Mobile-adapted
virtual-reality-advanced ↗ Open standalone

This simulator visualizes gaze-contingent foveated rendering, the technique eye-tracked VR headsets use to cut GPU shading cost by rendering full detail only where the eye is actually looking. A grid of instanced tiles stands in for a headset's render target; each tile's height and brightness encode its local resolution scale, computed live from its retinal eccentricity — the angle between the eye's line of sight to the gaze point and to that tile — using a cone-density-style falloff model. Drag the gaze marker to relocate the high-resolution foveal disk, tune the foveal radius, falloff steepness and peripheral resolution floor, or trigger an auto-saccade sequence, while live readouts report the fraction of native pixels actually rendered and the resulting GPU shading speedup.

⚙ Under the hood

Drag the gaze point across a virtual VR headset display and watch per-tile render resolution fall off with retinal eccentricity, with live GPU pixel-savings and shading-speedup readouts.

virtual-realityrenderingeye-trackinggpu-optimizationperceptionthree.js

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

What did you find?

Add reproduction steps (optional)