Hex Grid

An interactive WebGL-based hexagonal grid visualization with procedural noise animation. Created as a background effect for the website of a hackathon held by Fon Digital.

Overview

This project renders an animated hexagonal grid using WebGL and GLSL fragment shaders. Hexagons dynamically appear and disappear based on procedural Perlin noise, creating a somewhat organic breathing-like effect. The grid responds to mouse movements and automatically adapts to window resizing.

Technical Details

Tech

• HTML5 Canvas with WebGL
• Shaders:
  • Vertex shader: Simple passthrough shader for screen-space positioning
  • Fragment shader: Complex procedural rendering with hexagon geometry and noise functions, the effect requires 2 render passes to achieve smooth animations
• JavaScript: Animation loop with a fixed framerate, mouse tracking, and render texture management

Key Parameters (in shader.frag)

• grid_scale: Number of hexagons that fit in screen height (default: 15)
• border_width: Width of hexagon borders in some unknown unit (default: 30, it doesn't seem to correspond to anything physical e.g. pixels)
• seconds_per_cycle: Duration of one animation cycle (default: 30s)
• highlights_per_cycle: Number of highlight pulses per cycle (default: 3)

Usage

Simply open index.html in a modern web browser with WebGL support.

# Open in your default browser (Linux/Mac)
xdg-open index.html
# or
open index.html

No build process or dependencies required, it's literally just HTML, CSS, and JavaScript, the shaders are embedded within the HTML file inside a script tag.

Browser Compatibility

Requires a modern browser with WebGL support:

• Chrome/Chromium 8+
• Firefox 4+
• Safari 5.1+
• Edge (all versions)

Files

• index.html - Main HTML document and inline shaders
• script.js - WebGL setup, rendering loop, and input handling
• style.css - Canvas styling and layout
• shader.frag - Main part of the fragment shader, separated just to make it easier to work with, not connected to the HTML file in any way
• README.md - This file

How It Works

1. Initialization: WebGL context is created and render textures are allocated
2. Animation Loop: Runs at 60 FPS
3. First Pass: Computes hexagon visibility based on noise function, storing results in a render texture, see comment in shader.frag on line 145 for details about what each channel of the texture is used for
4. Second Pass: Uses data from the fist pass to render the actual hexagons with borders and highlights, essentially interperts the raw hex data from the first pass and turns it into a visual representation that can be drawn on the canvas
5. Texture Swap: Ping-pongs between render textures for temporal effects (animations)
6. Display: Final result is rendered to screen

Performance

The visualization runs at 60 FPS on most devices. Performance is excellent because:

• All geometry is procedurally generated in the shader
• No vertex data or mesh geometry to upload
• Efficient use of texture memory with ping-pong rendering
• Minimal CPU overhead (mostly GPU-bound)

License

See LICENSE file for details.