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