Ben Portfolio
Case Study: Toon Water Shader for a Fully 3D Portfolio World
The Challenge
This portfolio was designed as a fully 3D, game-like website where visitors could traverse an entire map and move between different spaces instead of clicking through a traditional flat interface. My role focused on creating a stylized water shader that felt at home in that world while still performing well inside an interactive web experience.
Starting Point
This clip shows the initial state I started with. At that stage, the surface had very little water-like motion or stylization, and the body of water did not yet feel like a convincing toon water element within the larger 3D world.
Built for a Traversable 3D Map
Because users could move through the portfolio like an interactive game world, the water had to feel alive from multiple viewpoints and distances. I built the effect using WebGL shaders, adding ripples, water mist, and shoreline-like atmospheric breakup so the surface felt more stylized and reactive. A key detail was making the water mist wrap around immersed objects like the player, rocks, and other scene elements, which helped the water body feel much more integrated into the world instead of behaving like a flat plane.
Final Outcome
This final demo shows the completed toon-style water shader inside the 3D portfolio world. It captures the look I was aiming for with ripples, fog, stylized motion, and scene cohesion, all working together as part of an explorable, game-like website.
The Outcome
Technology Stack
React
TypeScript
Three.js
Shaders
Conclusion
This project highlights my work on real-time shader development inside a fully 3D portfolio experience. By focusing on a toon-style water shader with ripples, fog, and environmental cohesion, I helped make the world feel more immersive and memorable as users explored it.