Three.js Water: How to Render Realistic Water

Water rendering in real time is an illusion built from three layers stacked on a flat plane:

1. Wave normals. A scrolling or time-animated normal map (or a procedural noise function) perturbs the surface normal per-pixel, so lighting reacts as if the surface has ripples, without a single extra vertex.
2. Reflection. A second camera renders the scene mirrored across the water plane into a texture, sampled and distorted by the same wave normals. This is what makes water read as water rather than a tinted plane.
3. Refraction and depth-based tinting. Sampling what's under the water (a depth pass or a render of the scene without the water plane) and tinting it darker with distance sells depth: shallow water near shore looks different from the deep end.

Three.js ships a Water addon (three/examples/jsm/objects/Water.js) implementing steps 1 and 2 out of the box. For most projects, start there before reaching for a fully custom shader.

The built-in Water class is the pragmatic default: drop it in, feed it a normal map (the addon ships with a usable one), tune a few uniforms (distortion scale, wave speed, water color), and you have a reflective animated surface in minutes.

A custom shader (GLSL ShaderMaterial or TSL node material) is worth it when you need: stylized non-photorealistic water (toon shading, painterly foam), interaction (ripples from objects entering the water, computed in a compute shader), or refraction alongside reflection for genuinely transparent shallow water. The stock addon does reflection only.

The reflection pass is the expensive part: it's a second full scene render every frame. Common mitigations: render the reflection at a lower resolution than the main view (it's usually blurred by the wave distortion anyway, so detail loss is hard to notice), cull objects unlikely to be visible in the reflection, and skip the reflection pass entirely when the water is off-screen or far from the camera.