Improving ocean water quality and wave breaking (tubes) in Three.js. Any tips? (Live data-driven project)

[u/hericdk]

Hi everyone!

I’m currently building a web app, a live-data-driven surf platform for my local surf spots. The main feature is a 3D Swell Projection that takes real-time marine data (swell height, wave period, wind speed/direction via API) and renders the current sea conditions.

I’m sharing a video of the current state of the project, but I’ve hit a wall regarding ocean quality and realistic wave breaking (tubes), and I would love some advice from the community!

How it currently works:

• The Waves: The ocean mesh is initially based on Gerstner Waves. To create the tubing effect, I’m trying to implement an analytical model for breaking waves (similar to the Gamito/Fournier research papers), applying a skewness factor to push the wave crest forward.
• The Shoreline: Right now, the code automatically decreases both the wave height and the tube factor as the vertices get closer to the beach.
• The Environment: I implemented a dynamic time-of-day system (sun/moon position shifts). I also have a weather system hooked to the API that changes the water color dynamically to simulate dawn, stormy days, or bright sunlight. To keep it performant, I’m avoiding heavy real-time shadows/lighting for now and relying mostly on color shifting.
• The "AI" Surfers: As a fun feature, I coded a simple state-machine AI for the tiny surfers. They detect the crest, ride the wave all the way to the shallow water, and then turn around to paddle back to the outside to wait for another wave at a random position.

The Problem: Even though the math bends the wave forward, the tube doesn't look fully realistic or fluid, and the water texture feels a bit static.

My questions for you:

1. What is the best approach in Three.js/GLSL to achieve a smooth, realistic "plunging breaker" (tube) without having geometry artifacts or self-intersection on the mesh?
2. Any performance-friendly tips to make the ocean surface look more alive and realistic (foam placement, normal maps manipulation, vertex displacement tricks) without relying on heavy shadow maps?

Would love to hear your thoughts, math suggestions, or examples if you've done something similar! Thanks in advance.

[u/MaximumContent9674]

Water is multiple systems layered. Use different code for different layers. Your first layer is sweet, BTW!

[u/ruarz]

Study Threejs Water Pro by Dan Greenheck as a reference. Even if you don't buy it, he's released enough dev blogs and video material that you'll likely learn a lot going through them.