Three.js From Zero · Article s12-06
Stylized Water with Depth-Buffer Foam
Stylized Water with Depth-Buffer Foam is Article s12-06 of Three.js From Zero, a MasterAllArts free interactive lesson for artists learning creative 3D on the web.
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.
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.
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.