Water Demo

Realistic water rendering featuring Gerstner wave simulation, Fresnel-based reflections, procedural foam, and underwater caustics.

Live Demo

Interactive — drag to rotate

View Source Code

Get Started with Water

Features Demonstrated

Gerstner WavesFresnel ReflectionsScreen-Space ReflectionsUnderwater CausticsProcedural FoamDepth-Based Coloring

Gerstner Waves — Realistic wave motion with circular particle paths
Fresnel Reflections — Angle-dependent reflectivity
Screen-Space Reflections — Real-time scene reflections
Underwater Caustics — Light patterns on submerged surfaces
Procedural Foam — Foam at wave peaks and shorelines
Depth-Based Coloring — Darker color in deeper areas

Code Example

import { Canvas } from '@react-three/fiber';
import { AdvancedWater, ProceduralSky } from '@strata-game-library/core';
import { OrbitControls } from '@react-three/drei';

function WaterDemo() {
  return (
    <Canvas camera={{ position: [0, 20, 50], fov: 60 }}>
      <ProceduralSky sunPosition={[100, 50, 100]} />
      <ambientLight intensity={0.4} />
      <directionalLight position={[50, 100, 50]} intensity={1} />

      <AdvancedWater
        size={500}
        depth={30}
        waveHeight={2}
        reflections
        caustics
        foam
      />

      <OrbitControls />
    </Canvas>
  );
}

Interactive Controls

Control	Action
Left Click + Drag	Rotate camera
Scroll	Zoom in/out

Key Parameters

Parameter	Effect
`waveHeight`	Height of waves
`waveSpeed`	Speed of wave animation
`reflections`	Enable/disable reflections
`caustics`	Enable/disable caustic patterns
`foam`	Enable/disable wave foam
`foamThreshold`	Wave height for foam to appear

Performance Notes

Reflections use a lower resolution render target
Caustics are calculated efficiently in the shader
Disable reflections on mobile for better performance
The demo adapts quality based on device capability