WebGL FFT-Inspired Wave Visualization

Overview

This project is a self-contained WebGL experiment that renders an animated, ocean-like wave surface using a summed sine-wave spectrum inspired by Fast Fourier Transform principles. It demonstrates real-time vertex displacement, custom GLSL shaders, and interactive camera controls without relying on external 3D engines or frameworks.

All logic is implemented directly in a single HTML file using raw WebGL.

Features

Procedural Wave Generation
- Multiple sine waves summed in the vertex shader
- Varying frequencies, amplitudes, and directions
- Time-based animation for continuous motion
Wireframe Grid Surface
- Dynamically generated grid geometry
- Rendered using line primitives for clarity
- Scalable resolution and plane size
Custom GLSL Shaders
- Vertex shader performs wave displacement
- Fragment shader applies height-based coloring
- No fixed-function pipeline usage
Interactive Camera
- Click-and-drag orbit controls
- Mouse wheel zoom
- Spherical camera positioning with limits
Zero Build Step
- Runs directly in the browser
- No bundlers, compilers, or dependencies
- Uses only the WebGL API

Controls

Left mouse button + drag: Orbit camera
Mouse wheel: Zoom in and out

File Structure

index.html Contains:
- HTML layout and minimal styling
- WebGL context initialization
- Shader source code
- Geometry generation
- Camera math and interaction
- Animation loop

Technical Notes

The wave model is FFT-inspired, not a true FFT implementation.
All wave calculations are executed per-vertex on the GPU.
The grid resolution and wave parameters are hard-coded for clarity and experimentation.
Designed for readability and educational inspection rather than maximum performance.

Requirements

A modern browser with WebGL support
JavaScript enabled

Purpose

This project serves as a lightweight rendering and shader experiment, as well as a practical test of rapid WebGL code generation and reasoning.

License

MIT

2.1 KiB Raw Permalink Blame History