2600THPranshul Chandhok

Web Ocean 3D

2026 · 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. The project also explores graphics performance across devices.

My role
Creator and graphics engineer
Period
2026
Status
Active open-source experiment
Web Ocean 3D boat moving across a spectral ocean toward a tropical island
Web Ocean 3D · Sailing towards an island in the browser ocean.
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 boat moving across a spectral ocean toward a tropical island
Web Ocean 3D · Sailing towards an island in the browser ocean.
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, and performance checks. I also added repeatable captures to compare changes to the graphics.
Web Ocean 3D · Waves moving around the island environment.
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
  • High-fidelity water and island scenes must remain interactive across widely different GPU and browser capabilities.
Web Ocean 3D interface showing ocean controls, HUD, and buoyancy probes
Web Ocean 3D · 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 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. Then there is the boat: it needs to react to the same water the player is looking at.

Getting it to run on more devices became a substantial part of the project. I worked through the loading path, reduced memory use, and removed unused source assets from the public build. The repository includes the rendering code and capture tools if you want to see how it works.

Go deeper

Sources and links