🌊 Ocean Sim — Real-Time Spectral Ocean Simulation

---

📖 Description

Ocean Sim is a real-time physically inspired ocean surface simulation built using Three.js and spectral wave modeling.

Unlike simple texture-based oceans, this project generates waves using real-world fluid dynamics principles, evolving the ocean surface over time in the frequency domain using Fourier analysis.

The result is an ocean renderer with:

• Dynamic wave motion
• Physically correct dispersion behavior
• HDR sky reflections
• Professional PBR shading + animated ripples

---

✨ Features

✅ Real-time deep-water wave simulation using Fourier spectrum
✅ Time-evolving wave motion based on dispersion physics
✅ Inverse FFT height reconstruction
✅ Dynamic vertex displacement mesh rendering
✅ Physical-based shading (PBR Water)
✅ HDR environment reflections and sun glints
✅ Dual animated normal maps for micro ripples
✅ Infinite ocean tiling illusion
✅ Orbit camera controls with realism limits
✅ Looping ocean ambience sound + mute/play UI

⚙️ Installation

Clone the repository:

git clone https://github.com/yourusername/ocean-sim.git
cd ocean-sim

Install dependencies:

npm install

Run the development server:

npm run dev

Build for production:

npm run build

---

▶️ Usage

Start the simulation:

npm run dev

Open your browser at:

http://localhost:5173

Controls:

• Left Mouse → Rotate camera
• Scroll Wheel → Zoom in/out (limited)
• Sound Button → Toggle ocean ambience

---

🌍 Physics & Core Logic

Ocean Sim is based on spectral ocean simulation, a technique used in:

• AAA games
• Film VFX oceans
• Scientific wave modeling

Instead of manually animating vertices, the ocean surface is generated through wave energy distribution in the frequency domain.

---

🌊 Ocean Surface Representation

The surface height is modeled as a sum of sinusoidal waves:

$$ h(x,t)=\sum_k H(k,t)e^{i(k\cdot x)} $$

Where:

• $h(x,t)$ = height at position $x$ and time $t$
• $k$ = wave vector (frequency + direction)
• $H(k,t)$ = spectral wave amplitude
• $e^{i(k\cdot x)}$ = Fourier basis function

---

🌬 Initial Wave Spectrum

The simulation begins with an initial random spectrum:

$$ H_0(k)=\frac{1}{\sqrt{2}}(\xi_r+i\xi_i)\sqrt{P(k)} $$

• $\xi_r,\xi_i$ = Gaussian random noise
• $P(k)$ = wave energy spectrum

---

📌 Phillips Wave Spectrum

Ocean energy depends on wind direction and wavelength:

$$ P(k)=Ae^{-1/(k^2L^2)}\frac{(k\cdot w)^2}{k^4} $$

• $A$ = amplitude constant
• $w$ = wind direction vector
• $L = \frac{V^2}{g}$
• $g$ = gravity
• $V$ = wind speed

This ensures large waves dominate naturally.

---

⏱ Time Evolution

Waves evolve over time via dispersion physics:

$$ H(k,t)=H_0(k)e^{i\omega t}+H_0(-k)^*e^{-i\omega t} $$

---

🌊 Dispersion Relation (Deep Water Waves)

Wave angular frequency follows:

$$ \omega(k)=\sqrt{g|k|} $$

Meaning:

• Small waves travel faster
• Large swells move slower

---

🔄 Inverse Fourier Transform (Surface Reconstruction)

After evolving $H(k,t)$, the height map is reconstructed using:

$$ h(x,t)=IFFT(H(k,t)) $$

This gives per-vertex displacement values for rendering.

---

🏗 Technical Architecture (Rendering Pipeline)

Ocean Sim follows a professional real-time rendering pipeline:

---

1️⃣ Spectrum Generation

File: initialWave.ts

Generates $H_0(k)$ from Phillips spectrum.

---

2️⃣ Frequency Evolution

File: timeEvolution.ts

Applies dispersion equation:

Ht = H0 * exp(i * omega * t);

---

3️⃣ Height Map Reconstruction

File: map.ts

Performs inverse FFT:

heightMap = IFFT(Ht);

---

4️⃣ Vertex Displacement

File: updateOceanMesh.ts

Updates geometry vertices:

positions[i + 1] = height * scale;
geometry.computeVertexNormals();

---

5️⃣ Physically Based Water Shading

Uses MeshPhysicalMaterial:

const material = new THREE.MeshPhysicalMaterial({
  roughness: 0.02,
  clearcoat: 1.0,
  envMapIntensity: 2.2,
});

---

6️⃣ HDR Environment Reflections

new RGBELoader().load("/hdri/4k.hdr", (texture) => {
  scene.environment = envMap;
});

Provides:

• Sky reflections
• Sun glints
• Realistic brightness response

---

7️⃣ Micro Ripple Flow (Normal Maps)

Two normal maps animated in opposite directions:

normalMap.offset.x += 0.0003;
clearcoatNormalMap.offset.x -= 0.00015;

---

8️⃣ Infinite Ocean Illusion

The mesh follows the camera:

ocean.position.x = camera.position.x;
ocean.position.z = camera.position.z;

Creates endless ocean without huge geometry.

---

🧮 Primary Equation (Rendering)

Ocean shading approximates the Rendering Equation:

$$ L_o(p,\omega_o)=\int_{\Omega} f_r(p,\omega_i,\omega_o)L_i(p,\omega_i)(n\cdot \omega_i)d\omega_i $$

Where:

• $f_r$ = BRDF reflectance function
• $L_i$ = incoming light
• $L_o$ = outgoing reflected radiance

This governs realistic reflections and water highlights.

---

🧠 Key Algorithms

• Fourier Transform Surface Reconstruction (IFFT)
• Phillips Wave Spectrum
• Dispersion Physics Evolution
• Physically Based Rendering (PBR)
• Infinite Surface Tiling
• Animated Normal Flow

---

🛠 Tech Stack

• TypeScript
• Three.js
• WebGL
• HDR Environment Lighting
• Spectral Wave Physics
• FFT-Based Ocean Simulation

---

📷 Screenshots & Diagrams

Ocean Output Placeholder:

---

📌 Roadmap

Planned improvements:

• GPU FFT via Compute Shaders
• Foam & crest detection
• Beaufort wind control scaling
• Underwater scattering model
• Ship wake interactions

---

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

---

👨‍💻 Author

Built by Sudhanshu Mani A physically inspired ocean simulation combining:

• Mathematics
• Fluid wave physics
• Modern real-time graphics