2600th

2026 Case file

Web Ocean 3D

Active open-source experiment

I built an interactive ocean in the browser, with changing weather, underwater views, and a boat that responds to the waves. Getting it to run on more devices became a big part of the project.

My role
Creator and graphics engineer
Period
2026
Bands
Training and simulation
Editorial illustration of a boat crossing the ocean toward a tropical island
Editorial visual based on Web Ocean 3D, with a boat approaching the island.
On this page
OverviewTHE PROJECT

An ocean I could explore in the browser.

For
Graphics developers, technical artists, and product teams exploring high-fidelity browser experiences.
Outcome
An open-source ocean environment with nine presets, boat and camera modes, underwater views, and a WebGL2 fallback for browsers without WebGPU support.
Web Ocean 3D browser scene with its ocean and island environment
Original browser capture from the Web Ocean 3D repository.
The experienceIN USE

Take a boat out, change the weather, or look beneath the surface.

My contribution
I built the rendering and simulation, along with the controls, asset tools, performance checks, and visual capture tools.
Waves moving around the island. Enhanced editorial poster; playback shows the original browser recording.
Technical detailsBUILD CHOICES

How it works.

System
Three spectral wave layers drive the ocean. The renderer combines reflection and refraction with foam and underwater effects. The same wave simulation feeds the boat’s buoyancy and wake.
Key decisions
  • Use repeatable visual captures to compare rendering changes under the same conditions.
  • Maintain WebGPU and WebGL2 paths from the same shader source to reduce differences between them.
  • Keep unused source assets out of the download and optimise the models and textures that the browser actually needs.
Constraints
  • The water and island have to stay interactive on GPUs and browsers with very different capabilities.
Web Ocean 3D interface showing ocean controls, HUD, and buoyancy probes
Original browser capture of ocean settings and the probes used to inspect boat buoyancy.
Looking backPROJECT NOTES

Notes from the project.

  • When people tried the ocean on their own devices, some managed to crash it. I went back to the loading path and memory use, and the next build worked on more devices.

I’ve always enjoyed graphics work, and an ocean is a good way to get absorbed in it. The light, waves, and weather all affect how the scene feels, and the boat has to react to the same water the player is looking at.

The repository includes the rendering code and capture tools if you want to see how it works.