Unity 3D Shader
Stylized Water Shader
Stylized Water Shader
Overview
Overview
This shader was made in Unity and using Universal Render Pipeline, almost entirely on Shader Graph with a glimpse of HLSL. It includes color variation depending on depth, foam on surfaces intersections, vertex displacement to simulate waves and water distortion on submerged surfaces.
The system is built around Depth Fade, which samples depth difference between the shader mesh and what is rendered behind to generate a gradient used for both the color and the foam amount.
This shader features a lot of modularity, being able to manipulate the colors, foam cutoff values and the noise parammeters on foam, vertex displacement and water distortion.
This shader is well-suited for toon-stylized games with unlit elements or custom lighting shaders, such as toon shaders.
This shader was made in Unity and using Universal Render Pipeline, almost entirely on Shader Graph with a glimpse of HLSL. It includes color variation depending on depth, foam on surfaces intersections, vertex displacement to simulate waves and water distortion on submerged surfaces.
The system is built around Depth Fade, which samples depth difference between the shader mesh and what is rendered behind to generate a gradient used for both the color and the foam amount.
This shader features a lot of modularity, being able to manipulate the colors, foam cutoff values and the noise parammeters on foam, vertex displacement and water distortion.
This shader is well-suited for toon-stylized games with unlit elements or custom lighting shaders, such as toon shaders.
This shader was made in Unity using Universal Render Pipeline, Shader Graph and HLSL, and supports additional lights and shadows. It uses a stylized cel-shading lighting model focused on clear visuals and artistic modularity.
The system is built around lighting bands, and is extended to support multiple additional light sources and shadow interactions. It also handles highlights in areas where light is strongest, along with view-dependent effects such as specular lighting and rim lighting, all designed to work consistently within the banded approach.
A key aspect of the shader is its modularity. Features such as the number of lighting bands, highlights, specular and rim lighting can be adjusted or disabled depending on the desired style, allowing the shader to range from simple flat shading to more refined and stylized results.
This shader is especially well-suited for toon-stylized games, and can work effectively alongside other shaders and post-processing effects to create a visually appealing world.
Depth Fade
Depth Fade
To better test the shader, we initially created two simple meshes: a pond mesh to demonstrate how the shader behaves along shorelines, and a sphere mesh to showcase how the shader reacts around edges and intersections. Both meshes use unlit materials to keep the focus entirely on the shader itself.
As our first step, we define the Depth Fade effect, which consists of sampling the scene depth relative to the shaded mesh from the camera’s perspective. This generates a gradient that becomes softer near intersections and more intense in deeper areas. A Depth Maximum Distance parameter can be used to control how the Depth Fade gradient is distributed, reaching its maximum intensity once the sampled depth equals this value.
This Depth Fade gradient can then be used to lerp between a shallow color and a deep color. By setting the shader to transparent and using the alpha values of these colors as the shader alpha, we already obtain a visual base for shader.
To better test the shader, we initially created two simple meshes: a pond mesh to demonstrate how the shader behaves along shorelines, and a sphere mesh to showcase how the shader reacts around edges and intersections. Both meshes use unlit materials to keep the focus entirely on the shader itself.
As our first step, we define the Depth Fade effect, which consists of sampling the scene depth relative to the shaded mesh from the camera’s perspective. This generates a gradient that becomes softer near intersections and more intense in deeper areas. A Depth Maximum Distance parameter can be used to control how the Depth Fade gradient is distributed, reaching its maximum intensity once the sampled depth equals this value.
This Depth Fade gradient can then be used to lerp between a shallow color and a deep color. By setting the shader to transparent and using the alpha values of these colors as the shader alpha, we already obtain a visual base for shader.
Depth Foam
Depth Foam
In addition to the main light, the shader supports additional light sources. The maximum number of additional lights is defined by the URP Asset settings.
Each additional light is evaluated in a similar way to the main light, contributing its own light intensity based on the surface orientation. These contributions are then combined to produce the final lighting result, ensuring that all light sources affect the object in a coherent way.
To maintain physically consistent behavior, each light’s influence is reduced over distance using distance attenuation. This ensures that nearby lights have a stronger impact, while distant lights gradually fade out.
All additional light contributions pass through the same banding process, preserving the stylized look regardless of how many lights are present. This allows the shader to scale well with multiple light sources without breaking the visual consistency of the banded lighting system.
In addition to the main light, the shader supports additional light sources. The maximum number of additional lights is defined by the URP Asset settings.
Each additional light is evaluated in a similar way to the main light, contributing its own light intensity based on the surface orientation. These contributions are then combined to produce the final lighting result, ensuring that all light sources affect the object in a coherent way.
To maintain physically consistent behavior, each light’s influence is reduced over distance using distance attenuation. This ensures that nearby lights have a stronger impact, while distant lights gradually fade out.
All additional light contributions pass through the same banding process, preserving the stylized look regardless of how many lights are present. This allows the shader to scale well with multiple light sources without breaking the visual consistency of the banded lighting system.
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Depth Foam Normals Amplification
Depth Foam Normals Amplification
Shadows are integrated directly into the lighting calculation to ensure they remain consistent with the banded style. Each light contribution is modulated using shadow attenuation, which reduces or removes light in areas that are occluded. This means that shadowed regions naturally fall into the darkness.
Shadow calculations in this system are handled by URP, which provides built-in support for both main light and additional light shadows. Shadow data is accessed through URP lighting functions and corresponding shader keywords, while custom boolean properties in Shader Graph are used to control whether this shadow data is applied in the final lighting calculation.
Shadow quality is influenced by the resolution settings defined in URP: main light shadows depend on shadow resolution, while additional lights rely on the shadow atlas resolution. These values should be adjusted based on the needs of the project and the desired visual quality, as higher resolutions improve shadow detail but also come at a higher performance cost.
Shadows are integrated directly into the lighting calculation to ensure they remain consistent with the banded style. Each light contribution is modulated using shadow attenuation, which reduces or removes light in areas that are occluded. This means that shadowed regions naturally fall into the darkness.
Shadow calculations in this system are handled by URP, which provides built-in support for both main light and additional light shadows. Shadow data is accessed through URP lighting functions and corresponding shader keywords, while custom boolean properties in Shader Graph are used to control whether this shadow data is applied in the final lighting calculation.
Shadow quality is influenced by the resolution settings defined in URP: main light shadows depend on shadow resolution, while additional lights rely on the shadow atlas resolution. These values should be adjusted based on the needs of the project and the desired visual quality, as higher resolutions improve shadow detail but also come at a higher performance cost.
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Ripple Foam
Ripple Foam
The highlight is implemented as a custom high-level light band that represents the areas where light has the strongest influence. It acts similar as an additional lighting band on top of the existing band system, with its own intensity and threshold parameters, allowing precise adjustment of the brightest regions without affecting the rest of the lighting levels.
Unlike true specular lighting, this highlight is view-independent, meaning it does not change based on the camera angle and position. In real lighting models, such a band does not exist, as bright spots are influenced by viewer position. Here, it is intentionally designed to approximate specular behavior in a simplified way. This makes it more stable and easier to read, avoiding distraction that can come from view-dependent effects.
This approach is especially useful in less realistic or more cartoonish styles, where clarity is more important than physical accuracy.
The highlight is implemented as a custom high-level light band that represents the areas where light has the strongest influence. It acts similar as an additional lighting band on top of the existing band system, with its own intensity and threshold parameters, allowing precise adjustment of the brightest regions without affecting the rest of the lighting levels.
Unlike true specular lighting, this highlight is view-independent, meaning it does not change based on the camera angle and position. In real lighting models, such a band does not exist, as bright spots are influenced by viewer position. Here, it is intentionally designed to approximate specular behavior in a simplified way. This makes it more stable and easier to read, avoiding distraction that can come from view-dependent effects.
This approach is especially useful in less realistic or more cartoonish styles, where clarity is more important than physical accuracy.
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Vertex Displacement
Vertex Displacement
Specular lighting is implemented as a view-dependent effect that represents the reflection of light toward the camera. It is calculated using the half-vector (Blinn-Phong) approach, as it provides an efficient and stable way to approximate reflective highlights in real-time rendering.
Unlike the highlight band, specular lighting depends on the view direction, meaning it changes as the camera moves. Making the specular dependent on lighting intensity is more accurate and realistic, but keeping a consistent intensity across surfaces can produce a cleaner and more visually appealing result, especially in stylized contexts.
This approach is especially useful for adding controlled visual accents and reinforcing material definition without breaking the clarity of the banded system and complementing lighting bands rather than competing with them.
Specular lighting is implemented as a view-dependent effect that represents the reflection of light toward the camera. It is calculated using the half-vector (Blinn-Phong) approach, as it provides an efficient and stable way to approximate reflective highlights in real-time rendering.
Unlike the highlight band, specular lighting depends on the view direction, meaning it changes as the camera moves. Making the specular dependent on lighting intensity is more accurate and realistic, but keeping a consistent intensity across surfaces can produce a cleaner and more visually appealing result, especially in stylized contexts.
This approach is especially useful for adding controlled visual accents and reinforcing material definition without breaking the clarity of the banded system and complementing lighting bands rather than competing with them.
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Screen Space Distortion
Screen Space Distortion
Rim lighting is implemented as a view-dependent effect that highlights the edges of a surface based on its orientation relative to the camera. It represents how surfaces become more visible at grazing angles and is approximated using a simple linear gradient derived from the view direction and surface normal, increasing from the center toward the silhouette.
Because it depends on the view direction, the effect changes as the camera moves. Similar to specular, it can be made band-dependent for better consistency with the lighting system. However, keeping it independent from the bands often results in a stronger and more noticeable effect, and this independence tends to be more visually striking than in specular, making rim lighting a powerful stylistic tool.
Rim lighting is useful for improving readability, especially in darker areas, and for emphasizing silhouettes. It helps separate objects from the background and works particularly well in stylized and toon-oriented visuals where shape clarity is important.
Rim lighting is implemented as a view-dependent effect that highlights the edges of a surface based on its orientation relative to the camera. It represents how surfaces become more visible at grazing angles and is approximated using a simple linear gradient derived from the view direction and surface normal, increasing from the center toward the silhouette.
Because it depends on the view direction, the effect changes as the camera moves. Similar to specular, it can be made band-dependent for better consistency with the lighting system. However, keeping it independent from the bands often results in a stronger and more noticeable effect, and this independence tends to be more visually striking than in specular, making rim lighting a powerful stylistic tool.
Rim lighting is useful for improving readability, especially in darker areas, and for emphasizing silhouettes. It helps separate objects from the background and works particularly well in stylized and toon-oriented visuals where shape clarity is important.
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Combining Highlight, Specular, and Rim Lighting
Combining Highlight, Specular, and Rim Lighting
When combining highlight, specular, and rim lighting, it is important to maintain a clear visual hierarchy within the banded lighting system. The highlight already acts as a custom high-level band, representing the strongest areas of light, and because of this, using highlight and specular together can easily lead to overlapping bright regions that compete for attention and reduce readability.
In most cases, it is recommended to use one or the other, depending on the desired style. The highlight provides a stable, view-independent indication of strong lighting, while specular introduces a dynamic, view-dependent response. If both are desired together, it is recommended to keep the highlight at a lower intensity than the specular, ensuring the specular reads as the primary reflective spot and maintaining visual coherence.
When combining highlight, specular, and rim lighting, it is important to maintain a clear visual hierarchy within the banded lighting system. The highlight already acts as a custom high-level band, representing the strongest areas of light, and because of this, using highlight and specular together can easily lead to overlapping bright regions that compete for attention and reduce readability.
In most cases, it is recommended to use one or the other, depending on the desired style. The highlight provides a stable, view-independent indication of strong lighting, while specular introduces a dynamic, view-dependent response. If both are desired together, it is recommended to keep the highlight at a lower intensity than the specular, ensuring the specular reads as the primary reflective spot and maintaining visual coherence.
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Specular lighting is most effective when working with a low number of lighting bands (between 1 - 2). In these scenarios, the base lighting is quite simple, and specular helps reintroduce detail and variation without breaking the stylized look. It adds a sense of material response and movement as the camera changes, making surfaces feel more dynamic and visually engaging. This is useful in flat or minimal lighting setups, where specular can act as the primary source of visual interest.
However, as the number of bands increases, the lighting becomes smoother and more detailed on its own, reducing the visual impact of specular. In these cases, specular can feel less noticeable or even redundant, so its use should be more subtle or omitted depending on the desired style and level of visual complexity.
Specular lighting is most effective when working with a low number of lighting bands (between 1 - 2). In these scenarios, the base lighting is quite simple, and specular helps reintroduce detail and variation without breaking the stylized look. It adds a sense of material response and movement as the camera changes, making surfaces feel more dynamic and visually engaging. This is useful in flat or minimal lighting setups, where specular can act as the primary source of visual interest.
However, as the number of bands increases, the lighting becomes smoother and more detailed on its own, reducing the visual impact of specular. In these cases, specular can feel less noticeable or even redundant, so its use should be more subtle or omitted depending on the desired style and level of visual complexity.
Rim lighting is the most flexible of the three and integrates well in almost any configuration. It consistently enhances silhouettes and improves readability regardless of the number of bands or the presence of other effects. Because it is driven by the view direction rather than the light direction, it remains stable across different lighting setups and continues to provide clear visual feedback even in low-light or high-contrast scenes.
This makes it especially useful as a complementary effect, since it does not compete directly with lighting bands, highlights, or specular reflections. Instead, it reinforces the outer shape of objects, helping them stand out from the background and from one another. Its impact is immediate and easy to perceive, making it particularly valuable in visually dense environments where clarity is essential.
Rim lighting is the most flexible of the three and integrates well in almost any configuration. It consistently enhances silhouettes and improves readability regardless of the number of bands or the presence of other effects. Because it is driven by the view direction rather than the light direction, it remains stable across different lighting setups and continues to provide clear visual feedback even in low-light or high-contrast scenes.
This makes it especially useful as a complementary effect, since it does not compete directly with lighting bands, highlights, or specular reflections. Instead, it reinforces the outer shape of objects, helping them stand out from the background and from one another. Its impact is immediate and easy to perceive, making it particularly valuable in visually dense environments where clarity is essential.
Extras & Recommendations
Extras & Recommendations
As you might have seen in some pictures, mesh quality plays an important role in how this shader behaves. Since lighting is calculated per pixel using surface normals, low-quality meshes or poorly smoothed normals can produce visible artifacts when using shadows.
An extra level of control can be achieved by applying a power function to the final lighting value. By adjusting an exponent, it is possible to intensify how light affects the surface. Values greater than 1 increase contrast by making bright areas more pronounced and darker areas dimmer, while values below 1 compress the range, making lighting appear more uniform. This provides a simple but effective way to tune the final visual without modifying the number of bands.
As you might have seen in some pictures, mesh quality plays an important role in how this shader behaves. Since lighting is calculated per pixel using surface normals, low-quality meshes or poorly smoothed normals can produce visible artifacts when using shadows.
An extra level of control can be achieved by applying a power function to the final lighting value. By adjusting an exponent, it is possible to intensify how light affects the surface. Values greater than 1 increase contrast by making bright areas more pronounced and darker areas dimmer, while values below 1 compress the range, making lighting appear more uniform. This provides a simple but effective way to tune the final visual without modifying the number of bands.
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Connect to Content
Add layers or components to make infinite auto-playing slideshows.
Albedo also plays a key role when used in conjunction with this shader. In most cases, using a simple albedo without internal shading or gradients works best, as it allows the banded lighting to define all light variation and avoids conflicts between texture shading and the lighting model.
In addition, this shader benefits greatly from being combined with other materials and effects. For example, using an outline shader alongside it can significantly improve object definition and separation, especially in toon-stylized projects. Post-processing effects can further enhance the final look, with bloom being particularly effective, as it amplifies bright regions such as highlights, specular, and rim lighting, giving them a shiny glow.
Albedo also plays a key role when used in conjunction with this shader. In most cases, using a simple albedo without internal shading or gradients works best, as it allows the banded lighting to define all light variation and avoids conflicts between texture shading and the lighting model.
In addition, this shader benefits greatly from being combined with other materials and effects. For example, using an outline shader alongside it can significantly improve object definition and separation, especially in toon-stylized projects. Post-processing effects can further enhance the final look, with bloom being particularly effective, as it amplifies bright regions such as highlights, specular, and rim lighting, giving them a shiny glow.
Ultimately, achieving the desired visual style depends heavily on fine-tuning the shader parameters. Small adjustments to values such as the number of lighting bands, rim intensity, specular intensity and even the blending mode can drastically change the final appearance.
For instance, using a single lighting band can create a strong toon-like aesthetic with sharp transitions, while increasing the number of bands produces smoother and more realistic shading. Likewise, changing transparency and blending settings, such as additive blending, can transform the shader into effects suited for energy, holograms, or glowing particles. Because of this flexibility, the same core shader can be adapted to a wide variety of artistic directions through parameter configuration.
Ultimately, achieving the desired visual style depends heavily on fine-tuning the shader parameters. Small adjustments to values such as the number of lighting bands, rim intensity, specular intensity and even the blending mode can drastically change the final appearance.
For instance, using a single lighting band can create a strong toon-like aesthetic with sharp transitions, while increasing the number of bands produces smoother and more realistic shading. Likewise, changing transparency and blending settings, such as additive blending, can transform the shader into effects suited for energy, holograms, or glowing particles. Because of this flexibility, the same core shader can be adapted to a wide variety of artistic directions through parameter configuration.
Connect to Content
Add layers or components to make infinite auto-playing slideshows.