Ocean and water shader for Three.js & React Three Fiber

The 3DRise ocean is an animated water surface that stretches to the horizon around the camera. Waves roll in the direction of the wind, crests sharpen and break into whitecaps, the sun lays a glittering path across the water, and the surface reflects the sky above it. It is an ocean shader built on real sea physics, with settings in the terms a sailor would use.

How the waves work

The whole sea state comes from the wind. Wind speed decides how long and how high the waves are, and fetch, the stretch of open water the wind has blown across, decides how big they can grow. That is why a lake in a gale looks nothing like an ocean in one: a short fetch gives small, short, steep waves however hard it blows. The surface is a sum of many wave trains spread around the wind direction, with peaked crests and flat troughs rather than smooth sine waves. Where the surface is squeezed at a crest, foam appears and trails behind the wave that made it.

Water types and presets

Presets are grouped into four kinds of water, each with its own wave character:

• Sea: from Glassy and Light breeze through Moderate sea to Rough and Gale.
• Lake: Still, Ripples, Breeze, Choppy and Wind-blown.
• Storm: Building, Full storm, Hurricane, Squall line and After the storm.
• Shore: Tropical shallows, Rolling swell, Cold coast, Estuary and Lagoon.

Light, colour and shore

The water is lit by the same sun and sky as the rest of the scene, so its colour and glitter follow the time of day. Sun shining through the back of a wave makes its crest glow. Where the ocean meets the terrain, the shoreline is found automatically from the difference between the ground and the water level: the water turns to its shallow colour, foam gathers along the shore, and headlands cast their shadows across the water. Distant water fades into the sky, which is what makes a horizon read as a horizon.

Main settings

• Wind Speed, Wind Bearing and Fetch: the sea state.
• Directional Spread: from neat parallel rows to a confused sea.
• Amplitude Scale, Choppiness, Swell and Steepness: wave height, peaked crests, long low swell and sharper short waves.
• Foam Amount and Foam Decay: the whitecaps and how long they trail.
• Deep Color, Shallow Color and Foam Color.
• Absorption and Clarity: how quickly the water swallows what is beneath it, and how murky it is.
• Specular and Roughness: the sun glitter.
• Shore Depth and Shore Foam: the shoreline.

The ocean sits in the scene like any other object: it is sorted correctly against your models, receives their shadows, takes scene fog, and the clouds are drawn over it correctly.

When to use it

Use it for seascapes, coastal and travel scenes, boats and yachts, island landscapes and calm water backgrounds behind a product.