Home▸Rendering & Computer Graphics▸Gaze-Contingent Foveated Rendering (2D)

Gaze-Contingent Foveated Rendering (2D)

Interactive 2D foveated-rendering simulator: drag the gaze point across a schematic VR headset display, tune foveal radius, falloff steepness, eye relief and peripheral floor, and watch a live eccentricity chart, eye-to-panel geometry view and GPU pixel-savings readouts respond in real time.

Rendering & Computer Graphics2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-virtual-reality-advanced ↗ Open standalone

This 2D 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 tiles stands in for a headset's render target; each tile's size and brightness encode its local resolution scale, computed live from its retinal eccentricity — the angle a tile subtends at a fixed virtual eye position behind the panel, relative to the gaze direction — using a cone-density-style falloff model identical to the one driving the 3D version of this simulator. Drag the gaze marker to relocate the high-resolution foveal disk, tune the foveal radius, falloff steepness, peripheral resolution floor, eye relief and grid density, or trigger an auto-saccade sequence, while a live curve panel and a top-down eye/panel schematic make the underlying geometry explicit alongside the pixel-fraction and GPU-speedup readouts.

⚙ Under the hood

Interactive 2D foveated-rendering simulator: drag the gaze point across a schematic VR headset display, tune foveal radius, falloff steepness, eye relief and peripheral floor, and watch a live eccentricity chart, eye-to-panel geometry view and GPU pixel-savings readouts respond in real time.

virtual-realityrenderingeye-trackinggpu-optimizationperception2d-canvas

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)