78 lines
2.1 KiB
Markdown
78 lines
2.1 KiB
Markdown
|
|
|
|
# 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 |