120 lines
2.5 KiB
Markdown
120 lines
2.5 KiB
Markdown
|
|
||
|
|
# 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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
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
|