Updated: August 2026 • Verified v1.2

Hexagonal Grid Field of View (FOV) & Shadowcasting Calculator

Creative & DesignNew

Local Browser Execution: Your input is processed locally in your browser and is not sent to UTL servers.
Ray(A, B) = [CubeRound(Lerp(A, B, i/N)) for i in 0..N]; Visible = No Opaque in Ray(1..N-1)
Was this calculation helpful?

Understanding Your Results

Renders an interactive HTML5 hex grid canvas allowing users to click and toggle wall obstacles, computes line-of-sight raycasts to all tiles within radius R, and exports visible axial (q, r) tile coordinates in JSON format.

Practical Guidance & Next Steps

Hexagonal line drawing uses fractional cube coordinate linear interpolation (Lerp) rounded to the nearest integer cube vector (satisfying x + y + z = 0). If any intermediate tile along the ray is opaque, the target tile is obscured.

What is this?

A game development math utility that calculates line-of-sight and field of view on hexagonal grids with interactive obstacle testing.

How does it work?

1. Adjust vision radius (2 to 6 hex tiles). 2. Click on hex tiles to toggle wall obstacles or load presets. 3. View illuminated vs shadowed tiles and export visible coordinates.

Why use it?

Provides game designers with instant visual verification of hexagonal line-of-sight algorithms for fog of war and tactical range.

Technical Scope & Calculation Limitations

Point-to-point discrete hex raycast shadowcasting model.

Frequently Asked Questions

Line of sight casts a ray between the center player tile and every potential target tile. If the ray passes through an opaque obstacle tile, all tiles behind it are cast into shadow.
Windows Desktop & Widget Options

Want this capability on your Windows desktop?

All Windows widgets
Desktop Widget
9.4/10

Rainmeter Desktop Customization Engine

Powerful open-source desktop customization framework for hardware monitors, clocks, and audio visualizers.

FreeMedium InstallLow RAM
By Rainmeter Team (Open Source)View Widget
Complementary Utilities

Related Tools for Your Workflow

All Creative & Design tools
HTML5 / React / TypeScriptStatic Utility
HTML5 / React / TypeScriptStatic Utility
HTML5 / React / TypeScriptStatic Utility
HTML5 / React / TypeScriptStatic Utility