Three.js From Zero · Article s12-06
S12-06 Stylized Water with Depth-Buffer Foam
Skip to demo
Season 12 · S12-06 · Specialized Production Patterns
Stylized Water with Depth-Buffer Foam
Stylized water is one of the best examples of “cheap but art-direction heavy.” The techniques are straightforward. The hard part is choosing which cues actually sell the surface.
renderingstylizedwater
1. Why this article exists
Season 4 covered ocean water, but a stylized variant with explicit foam logic belongs in the “useful tier” because so many product, game, and portfolio scenes want something more graphic than physically faithful.
2. What we are building in the demo
- A water plane with layered wave motion.
- Foam that appears where depth contrast would plausibly happen.
- A palette-friendly version of the technique that can lean cute or premium.
3. Live demo
The demo below is a compact study model, not a full production system. The goal is to make the article’s mental model tactile: what changes, what matters, and what you would keep when the codebase graduates into a real project.
booting...
Season 12 is deliberately less single-vertical than Season 11. The throughline is still applied production: every demo is framed as a pattern you could reuse in paid work.
4. Implementation sketch
float shoreline = smoothstep(foamStart, foamEnd, depthDelta);
vec3 finalColor = mix(deepColor, shallowColor, fresnel);
finalColor = mix(finalColor, foamColor, shoreline);5. Production notes
Useful companion articles from earlier seasons:
What usually goes wrong first:
- Too much noise reads as TV static.
- Foam placement needs a cue from geometry or the eye stops believing it.
- Stylized does not mean “every value maxed out.”
6. Takeaways
- Stylized water is mostly about picking the right cues, not sim complexity.
- Depth-aware foam is a huge believability gain for little cost.
- A restrained palette carries more than extra math.