Build an ocean one component at a time

Large waves, small waves, reflection, foam and depth

Suggested reading time: about 8 minutes. This is an editorial production guide. Generation, performance and pricing comparison experiments have not been run.

Learning goals

• Separate an ocean’s appearance into individual elements.
• Distinguish visual appeal from physical accuracy.
• Balance Web performance with the purpose of the page.

Add effects only after their dependencies

1. 1Position and time
2. 2Wave height
3. 3Deformed surface
4. 4Matching normals
5. 5Light and color

1. 1Water and shore depth
2. 2Contact condition
3. 3Foam mask
4. 4Foam appearance

This original dependency diagram separates the wave path from the shore-contact path. Reflection, refraction and foam each need their own inputs; the accompanying introductory lab implements waves and approximate lighting, not all those effects.

Who does this work?

• Realtime VFX artist: dynamic effects such as water and foam.
• Graphics engineer: rendering and performance.
• Web designer: readability and guiding attention.

Inputs

• The purpose and page where the ocean will be used.
• Target devices and performance goals.
• Wave amplitude, wavelength and speed.
• The areas where reflection and foam are required.

Production workflow

1. Display a solid-colored plane and camera.
2. Deform vertices with one wave.
3. Combine several waves and correct their normals.
4. Add color, reflection and small waves one at a time.
5. Add shore geometry and foam if needed.
6. Measure on actual devices while displaying the page UI as well.

Outputs

• An ocean scene with controls.
• Settings and comparisons between stages.
• Performance records and a still-image fallback.

Separate an ocean image into five elements

Treat large swells as geometry, small ripples as normals, the sky and sun appearing on the surface as reflection, distortion of the underwater view as refraction, and white areas at the shore or wave crests as foam. Implementing everything at once makes it difficult to identify which element causes a problem. Start with a solid-colored plane.

Understand a single wave

A minimal educational model uses a sine wave based on position and time. Amplitude changes height, wavelength changes the distance between crests, and speed changes how quickly they travel. Combining a few waves with different directions reduces the curtain-like motion of a single direction. This is a simplified model for learning about appearance, not a fluid simulation or an accurate reconstruction of ocean phenomena.

Check normals before adding more reflection

If vertices move while the lighting normals remain those of the original plane, shape and light no longer agree. Provide a normal visualization and check that the normals follow the deformation first. Approximating shoreline foam by making shallow areas white requires additional information, such as the depth relationship between the water and shore. Simply adding white noise does not represent contact with the shore.

Quality requirements for a landing-page ocean

An ocean background fails its purpose if it makes the main text or buttons hard to read. Provide controls to stop motion, a reduced-motion setting and a still-image alternative. Rendering resolution, mesh subdivisions, reflection passes, shadows and postprocessing affect the workload, so measure them individually on actual devices. Looking smooth on a computer alone is not evidence of mobile support.

Quality checklist

• The scene works as a still image when paused.
• Normals agree with moving geometry.
• Text and controls remain readable.
• Camera changes do not expose seams or edges.
• Record device, resolution and measurement duration.

Diagnose failures

Symptom	Likely cause	Next step
The water looks like jelly.	Amplitude and speed are too large for the use case.	Separate large and small waves and adjust from a reference scale.
Foam floats in the air.	Its relationship to the shore or water surface is undefined.	Visualize and inspect depth, coordinates and contact conditions.
The scene is slow on a phone.	High resolution and extra rendering passes increase the workload.	Lower one setting at a time, such as resolution or reflections, measure again and provide a still-image fallback.

Exercise: An ocean in three stages

Status: not run (not-run). This is a planned exercise, not a measured result.

Task: Design a demo that switches between three states: plane, waves and waves with reflection. Record appearance and frame time separately for each state.

Deliverable: A staged ocean comparison and a measurement table.

Completion criteria: Show what each added element improves and what workload it adds, distinguishing measured results from unmeasured conditions.

Related Catalog candidates and practice

Prerequisite chapters: Shaders and how appearance is calculated

• Animated ocean hero background (Catalog candidate: three-ocean-hero)
• Shoreline shader with shallow water and foam (Catalog candidate: three-shore-foam)
• Transparent water with reflection and refraction (Catalog candidate: three-water-refraction)
• Underwater light and suspended particles (Catalog candidate: three-underwater)

The browser-local ocean shader lab uses Three.js 0.186.1 with WebGLRenderer and a local vendored module; it makes no model API calls. Its stages are a flat plane, vertex waves, and approximate light and color. It does not implement physical ocean simulation, true reflection or refraction, or shoreline foam. Opening it does not complete the comparison exercise or establish performance on other devices.

Open the procedural ocean shader lab

The original native WebGL water demo is also available. Adjust amplitude and speed, show the grid, pause the motion, and export a record of observations you actually made. It illustrates an approximate water surface; device performance and model comparisons still require separate measurements.

Open the native WebGL water demo

Use the experiment worksheet for your plan and evidence

Open the experiment notebook

Primary sources

• Three.js ShaderMaterial — verified: 2026-10-03
• Three.js Water — verified: 2026-10-03
• MDN Lighting in WebGL — verified: 2026-10-03
• MDN requestAnimationFrame — verified: 2026-10-03

Source scope checked on 2026-10-04

Three.js Water is a flat reflective effect for WebGLRenderer; the docs name WaterMesh for WebGPURenderer. Neither name establishes a fluid simulation or the full shoreline exercise in this chapter.

The linked ocean lab is a separate practice asset. Keep its version, device and actual stage names with any later measurements. The chapter’s planned exercises and capstones remain not run.