Learning path · 7 lessons · about 4 hours

Realistic water and sky

You will: an ocean with waves, foam and sun glitter, and clouds you can fly through. For: learners who finished the basics and want game-quality effects.

These are the Plus lessons that build the two most requested outdoor effects. The ocean series goes from a sum of sine waves to a surface with Fresnel reflection, sun glitter, foam and haze. The cloud series moves noise into three dimensions, marches through the volume and lights it from inside. Reading the pages is free; playing the lessons needs Plus.

Start lesson 1

What you will be able to do

  • Build an animated ocean surface from waves
  • Reflect the sky with the Fresnel effect and add sun glitter
  • Render volumetric clouds with ray marching
  • Light and shade a cloud so it looks soft

The lessons, in order

  1. 1
    Ocean 1: a surface made of wavesPlus

    Write waveH(): the sum of five moving sine waves. Show it from above as a color map.

    Play
  2. 2
    Ocean 2: standing in the seaPlus

    Ray march the waves from a camera above the sea, light them with the sun, and fill the sky with a flat color.

    Play
  3. 3
    Ocean 3: sky, Fresnel and sun glitterPlus

    Give the sea a real sky with a sun, mix the water and the reflected sky with a Fresnel factor, and add the…

    Play
  4. 4
    Ocean 4: foam, fine ripples and hazePlus

    Add two small high-frequency waves, whitecap foam with lacy edges, and distance haze to the finished sea.

    Play
  5. 5
    Clouds 1: noise in three dimensionsPlus

    Show a moving slice through 3D fractal noise: white clouds on a blue sky.

    Play
  6. 6
    Clouds 2: marching through the volumePlus

    Fly the camera forward through a cloud layer. Walk each ray in 44 steps, track how much light is blocked…

    Play
  7. 7
    Clouds 3: light and shadow inside the cloudPlus

    Light the cloud: for every step inside the cloud, sample the density towards the sun to get a shadow, and…

    Play

Ideas you will meet

Short explainers with a live example for each:

See all learning paths