Developed a custom toon water shader using GLSL for the client’s portfolio page, achieving a stylized and vibrant water effect.
Overview
The client required a custom low-poly water component for their interactive 3D portfolio website, designed to integrate with their existing environment seamlessly. The water needed a stylized, toon-like aesthetic while complementing the overall visual theme. A reference example provided was Coastal World, which showcased a similar interactive water system. The challenge was to achieve this effect through a custom GLSL shader while ensuring smooth real-time rendering within the 3D scene.
Challenges
Depth Texture Issues
Implementing depth-based effects in the toon water shader presented multiple challenges. Selecting the appropriate filter type—nearest or linear—required experimentation to balance performance and visual quality. Additionally, the depth values were stored in a logarithmic format, which had to be linearized for accurate shading. Another issue was the low resolution of the depth texture, which introduced aliasing artifacts, affecting the overall clarity of the water effect.
UV Packing Anomalies
The original water mesh, imported from a GLTF model, had unusual UV packing, making it difficult to apply the shader as intended. This required adjustments and workarounds to correctly map the shader effects across the surface while maintaining consistency with the rest of the scene.
Unexpected Player Collision
Despite explicitly removing all colliders from the water mesh, the player was still able to walk on top of the surface. Debugging this issue involved checking for unintended physics interactions and ensuring that no residual colliders or invisible geometry were interfering with the expected behavior.
Results
Depth Texture Refinement
To address the issues with depth texture resolution and logarithmic depth values, the resolution was increased to improve clarity and reduce aliasing artifacts. Additionally, the depth values were linearized using the near and far plane values of the camera, ensuring accurate shading and depth-based effects in the toon water shader.
Custom Water Mesh with Standard UV Mapping
The original water mesh from the GLTF model had unconventional UV packing, which made shader mapping inconsistent. To resolve this, a custom plane mesh was created with standard UV packing, allowing for proper shader application and ensuring a smooth, uniform water effect.
Fixing Player Collision Issues
The unintended player collision with the water surface was traced back to the original water mesh still being considered when setting colliders for the island. The solution was to remove the water mesh from the GLTF model entirely, preventing any interference with the physics system and ensuring the player could interact with the environment as expected.
Increasing the depth texture resolution removes Anti Aliasing and the foam is rendered correctly.
Corrected UV ensures proper shading. The gradient shows that the UVs are changing values from -1 to 1 along the X-Y axes.
Colliders were fixed and the player submerges in the water as it should.
Learnings
This project strengthened my skills in GLSL and React Three Fiber (R3F) while reinforcing key concepts in depth textures, UV mapping, and physics interactions. I gained hands-on experience in writing toon shaders, handling depth-based effects, and optimizing custom meshes for shader application. Debugging unexpected collisions also highlighted the importance of inspecting imported models and managing physics interactions. Through this, I refined my ability to integrate custom shaders, optimize rendering, and solve complex 3D challenges efficiently.
Let’s bring your ideas to life with interactive 3D experiences, immersive web designs, and high-performance applications. Whether it’s React, Three.js, or custom animations, I’ve got you covered—let’s build something amazing together!
