TRNVIZ - Procedural Terrain Engine

A sophisticated 3D terrain visualization engine built with WebGL, featuring advanced procedural generation, real-time controls, and interactive animation systems.

Demo

Features

• Procedural Terrain Generation using Ken Perlin's improved noise algorithm
• Real-time Interactive Controls with comprehensive parameter adjustment
• Multiple Visualization Modes including wireframe, water simulation, and cross-section analysis
• Advanced Animation System with keyframe support and multiple easing functions
• Custom Color Palettes with interactive gradient editor
• Quality Presets from Low (20x20) to 4K Ultra (200x200)
• Responsive Camera System with orbital controls and auto-orbit mode

Technical Specifications

Component	Technology	Details
Rendering	WebGL 1.0	Custom vertex/fragment shaders, depth testing
Noise Algorithm	Ken Perlin's 2002	256-element permutation table, fractal noise
Terrain Resolution	20x20 to 200x200	Configurable grid with quality presets
Animation System	RequestAnimationFrame	60fps smooth interpolation
Browser Support	Modern browsers	Chrome, Firefox, Safari, Edge
Memory Management	GPU Buffers	Efficient vertex/index buffer management
File Size	~15KB	Minified JavaScript bundle

Installation

Prerequisites

• Modern web browser with WebGL support
• No additional dependencies required

Quick Start

1. Clone the repository:

git clone https://github.com/arshlibruh-code/trnviz.git
cd trnviz

2. Open index.html in your web browser:

# Using Python (if installed)
python -m http.server 8000
# Then visit http://localhost:8000/index.html

# Or simply double-click index.html

File Structure

trnviz/
├── index.html             # Main application file
├── js/
│   ├── main.js           # Core application logic (TerrainEngine)
│   ├── terrain.js        # Terrain generation system
│   ├── noise.js          # Perlin noise implementation
│   ├── controls.js       # UI and interaction management
│   └── config.js         # Configuration constants
└── media/                # Assets directory
    ├── gifs/
    └── videos/

Controls

Mouse Controls

• Left Click + Drag: Orbit camera around terrain
• Mouse Wheel: Zoom in/out
• Right Click: Prevent context menu

Keyboard Shortcuts

• Shift + I: Toggle terrain animation
• Shift + O: Toggle auto-orbit camera
• Shift + P: Hide/show control panel

Parameter Controls

• Pattern Zoom: Adjust terrain detail scale (0.001-0.5)
• Height Multiplier: Control vertical scaling (1-50)
• Octaves: Number of noise layers (1-8)
• Lacunarity: Frequency multiplier between octaves (1.0-5.0)
• Persistence: Amplitude multiplier between octaves (0.01-1.0)
• Resolution: Grid size (20-200)
• Seed: Randomization seed (0-1000)
• Water Level: Sea level height (-20 to 20)
• Domain Warp: Terrain deformation strength (0-10)

Customization

Color Palettes

• Viridis: Scientific color scheme (purple to yellow)
• Grayscale: Black to white gradient
• Heatmap: Red to yellow thermal mapping
• Custom: Interactive gradient editor with draggable color stops

Animation Presets

• Random: Smooth cubic easing
• Sine/Cosine: Wave-based transitions
• Sawtooth: Linear progression
• Triangle: Triangular wave pattern
• Bounce: Elastic bounce effect
• Elastic: Spring-like motion
• Pulse: Rhythmic pulsing

Quality Settings

Preset	Resolution	Use Case
Low	20x20	Fast preview, mobile devices
Medium	50x50	Balanced performance/quality
High	100x100	Detailed visualization
4K Ultra	200x200	Maximum detail, powerful hardware

Development

Architecture Overview

TerrainEngine (main.js)
├── NoiseGenerator (noise.js)
├── TerrainGenerator (terrain.js)
├── ControlManager (controls.js)
└── CameraController (main.js)

Key Classes

• TerrainEngine: Main application controller
• TerrainGenerator: Handles mesh generation and GPU uploads
• NoiseGenerator: Implements Perlin noise algorithms
• ControlManager: Manages UI interactions and animations
• CameraController: Handles 3D camera transformations

Adding New Features

1. New Noise Types: Extend NoiseGenerator class
2. Custom Shaders: Modify shader source in setupShaders()
3. UI Controls: Add to controls array in ControlManager
4. Animation Presets: Extend getAnimationCurve() method

Performance

Optimization Features

• Efficient GPU buffer management
• Optimized draw calls with element arrays
• RequestAnimationFrame-based rendering
• Memory-efficient noise calculations

Recommended Settings

• Mobile: Low quality (20x20), disable animations
• Desktop: Medium quality (50x50), enable animations
• High-end: High quality (100x100), all features enabled
• 4K Display: Ultra quality (200x200), maximum settings

Troubleshooting

Common Issues

1. WebGL not supported: Update browser or enable hardware acceleration
2. Poor performance: Reduce quality settings or disable animations
3. Controls not responding: Check browser console for JavaScript errors
4. Terrain not rendering: Verify all JS files are loaded correctly

Browser Compatibility

• Chrome 56+
• Firefox 51+
• Safari 10+
• Edge 79+

License

MIT License - see LICENSE file for details

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

Acknowledgments

• Ken Perlin for the Perlin noise algorithm
• Adrian's Perlin Noise Tutorial for comprehensive noise implementation guidance
• WebGL Terrain Visualization Tutorial for 3D rendering techniques
• WebGL community for rendering techniques
• Contributors and testers

---

TRNVIZ - trnviz & arshlibruh