Hex Grid Interaction Demo (Three.js)

Overview

This is a small interactive Three.js demo created with the assistance of ChatGPU. It renders a large instanced grid of hexagonal (pentagram-like) tiles with real-time elevation, coloring, and post-processing effects.

The demo focuses on efficient GPU instancing, smooth interaction, and modern real-time rendering techniques rather than game logic or assets.

Features

Instanced hex tile grid
- Up to 10,000 tiles rendered efficiently using THREE.InstancedMesh
- Single draw call for the entire grid
Hover-based elevation
- Tiles smoothly rise when hovered
- Height is sampled from a grayscale heightmap
- Optional pulse wave animation propagating outward
Per-instance coloring
- GPU-driven instance colors via custom shader injection
- Color palette selection through UI and mouse wheel
- Smooth interpolation between colors
Post-processing
- Unreal Bloom for glow effects
- Optional SSAO pass
- Linear color space rendering
Lighting and shadows
- Directional light with soft shadow mapping
- Height-based shading enhances depth perception
Camera interaction
- OrbitControls with damping
- Fixed zoom for consistent interaction scale

Technical Highlights

Uses custom onBeforeCompile shader modification to support per-instance colors with MeshStandardMaterial
Heightmap sampling performed on the CPU with smooth interpolation
All transformations applied through instanced matrices for performance
Designed to remain responsive even with large grids

Controls

Mouse move Hover tiles to elevate and recolor them
Mouse wheel Cycle through the color palette
Pulse button Triggers a radial elevation wave across the grid
Reset button Restores all tiles to default height and color

Requirements

Modern browser with WebGL support
Internet access (Three.js is loaded via ES module CDN)

Running the Demo

This demo must be served from a web server due to module imports and asset loading.

Quick local server

python3 -m http.server

Then open:

http://localhost:8000

Files

index.html Main entry point
heightmap.png Grayscale heightmap used for tile elevation

Notes

The demo prioritizes rendering techniques and interaction over visual polish
All geometry, animation, and coloring are procedural
Intended as a rendering and interaction experiment rather than a finished product

License

MIT

2.5 KiB Raw Permalink Blame History