How To Build Stylized Water Shader: Design & Implementation For Nimue
NimueIntroductionFor three semesters, our student team has been hard at work on the prototype for Nimue, a 3D platformer in which you play an enchanted princess who lost her memories. She needs to find her way through the castle ruins on a misty lake to uncover her past. Water is a visual core element of this game prototype, so we took extra care in its development. In this article, we will take an in-depth look at the design and technical implementation of a lake water material.The first prototype of Nimue can be played on itch.io soon. A link to our shader for use in your own projects can be found at the end of this article.Taxonomy of WaterBefore we dive into the design decisions and technical implementation, we present a simplified taxonomy of visual water components to better understand the requirements of its representation:RiMEWind WavesWaves generated by wind, which form on an open water surface, can be divided into capillary waves and gravity waves. Capillary waves, or ripples, are small, short-wavelength waves caused by weak winds affecting surface tension in calm water. They can overlap longer and larger gravity waves. How these physically complex wave types are represented in stylized video games varies depending on the respective style. Both types are usually heavily simplified in form and motion, and capillary waves are sometimes omitted entirely to reduce detail.Sea of ThievesFoam PatternsFoam patterns refer to white foam crests that form on a water surface without breaking against an obstacle or shoreline. In reality, this effect occurs when different water layers collide, and waves become steeper until their peaks collapse, and the resulting bubbles and drops scatter the sunlight. Stylized foam patterns can be found in many video game water representations and can easily be abstracted into patterns. Such patterns contribute to a cartoon look and can sometimes even replace waveforms entirely.The Legend of Zelda: The Wind WakerFoam LinesFoam lines are a very common water element in video games, represented as white graphical lines surrounding shorelines and obstacles like rocks. They typically reference two different water phenomena: foam forming around obstacles due to wave breaking, and foam along shorelines, resulting from wave breaking and the mixing of algaes with organic and artificial substances.Foam lines can have different visual appearances depending on the surface angle: The shallower the angle, the wider the foam effect. Due to the weaker waves, distinctive foam lines are rarely observed on natural lakes, but they can be included in a stylization for aesthetic purposes. Animal Crossing: New HorizonsReflectionsWhen light hits a water surface, it can either be reflectedor transmitted into the water, where it may be absorbed, scattered, or reflected back through the surface. The Fresnel effect describes the perceived balance between reflection and transmission: at steep angles, more transmitted light reaches the eye, making the water appear more translucent, while at shallow angles, increased reflection makes it appear more opaqueIn stylized video games, implementations of water reflections vary: RiME, for example, imitates the Fresnel effect but does not reflect the environment at all, only a simple, otherwise invisible cube map. Wind Waker, on the other hand, completely foregoes reflection calculations and renders a flat-shaded water surface.RiMETranslucencyAs an inhomogeneous medium, water scatters some of the transmitted light before it can be reflected back to the surface. This is why water is described as translucent rather than transparent. Some scattered light is not reflected back but absorbed, reducing intensity and shifting color toward the least absorbed wavelengths, typically blue, blue-green, or turquoise. Increased distance amplifies scattering and absorption, altering color perception. Modern real-time engines simulate these effects, including absorption-based color variation with depth. However, stylized games often simplify or omit transmission entirely, rendering water as an opaque surface.RiMERefractionAn additional aspect of water transmission is refraction, the bending of light as it transitions between air and water due to their differing densities. This causes light to bend toward the normal upon entering the water, creating the apparent distortion of submerged objects. Refraction effects also commonly appear in stylized water rendering. Kirby's Forgotten Land, for example, showcases two key visual characteristics of refraction: distortion increases with steeper viewing angles and is amplified by ripples on the water's surface.Kirby and the Forgotten LandCausticsCaustic patterns form when light rays are focused by a curved water surface, projecting bundled light patterns onto underwater surfaces or even back to surfaces above water. These patterns are influenced by the clarity of the water, the depth of the water, and the strength of the light source. They contribute greatly to the atmosphere of virtual worlds and are often found in stylized games, although only as simplistic representations.The Legend of Zelda: Ocarina of Time 3DDesign DecisionsDue to the fact that the setting of Nimue is a lake with a calm overall atmosphere, the decision was made to use very reduced gravity waves, as a calm water surface underlines this atmosphere. Capillary waves have too high a level of detail for the stylistic requirements of Nimue and were, therefore, not implemented.NimueShapesThe mood in Nimue can be summarized as calm and mystical. The design language of Nimue is graphic, rounded, and elegant. Shapes are vertically elongated and highly abstracted. Convex corners are always rounded or have a strong bevel, while concave corners are pointed to prevent the overall mass of objects from becoming too rounded.ColorsNimue uses mostly broken colors and pastels to create a serene, reflective mood and highlight the player's character with her saturated blue tones. Platforms and obstacles are depicted with a lower tonal valueto increase their visibility. Overall, the game world is kept in very unsaturated shades of blue, with the atmospheric depth, i.e., the sky and objects in the distance, falling into the complementary orange range. Shades of green and yellow are either completely avoided or extremely desaturated. The resulting reduced color palette additionally supports the atmosphere and makes it appear more harmonious.Color gamut & value/tone tests Hue, Tone & SaturationSince the color of the water, with its hue, tone, and saturation, is technically achieved by several components, a 2D mockup was first designed to more easily compare different colors in the environment. Here it could be observed that both the low and the high tonal value formed too great a contrast to the rest of the environment and thus placed an undesirable focus on the water. Therefore, the medium tone value was chosen.The hue and saturation were tested in relativity to the sky, the player character, and the background. Here, too, the color variant that harmonizes the most with the rest of the environment and contrasts the least was chosen.Foam LinesFor the design of the foam lines, we proceeded in the same way as for the color selection: In this case, a screenshot of the test scene was used as the basis for three overpaints to try out different foam lines on the stones in the scene. Version 3 offers the greatest scope in terms of movement within the patterns. Due to this, and because of the greater visual interest, we opted for variant 3. Following the mockup, the texture was prepared so that it could be technically implemented.ReflectionThe reflection of the water surface contributes to how realistic the water looks, as one would always expect a reflection with natural water, depending on the angle. However, a reflection could also contribute to the overall appearance of the water becoming less calm. The romantic character created by the reflection of diffuse light on water is more present in version 1.In addition, the soft, wafting shapes created by the reflection fit in well with the art style. A reflection is desirable, but the reflections must not take up too much focus. Ideally, the water should be lighter in tone, and the reflections should be present but less pronounced. Reflection intensityRefraction & CausticsEven though most light in our water gets absorbed, we noticed an improvement in the believability of the ground right underneath the water's surface when utilizing refraction together with the waveforms. When it comes to caustics, the diffuse lighting conditions of our scene would make visible caustic patterns physically implausible, but it felt right aesthetically, which is why we included it anyway.Technical Realization in Unreal Engine 5When building a water material in Unreal, choosing the right shading model and blend mode is crucial. While a Default Lit Translucent material with Surface Forward Shading offers the most control, it is very costly to render. The more efficient choice is the Single Layer Water shading model introduced in Unreal 4.27, which supports light absorption, scattering, reflection, refraction, and shadowing at a lower instruction count. However, there are some downsides. For example, as it only uses a single depth layer, it lacks back-face rendering, making it less suitable for underwater views. And while still quite expensive by itself, its benefits outweigh the drawbacks of our stylized water material.WaveformsStarting with the waveforms, we used panning normal maps to simulate the rather calm low-altitude gravity waves. The approach here is simple: create a wave normal map in Substance 3D Designer, sample it twice, and continuously offset the samples' UV coordinates in opposing directions at different speeds. Give one of the two samples a higher speed and normal intensity to create a sense of wind direction. This panning operation does not need to run in the fragment shader, you can move it to the vertex shader through the Vertex Interpolator without quality loss and thereby reduce the instruction count.Texture RepetitionTo reduce visible tiling, we used three simple and fairly efficient tricks. First, we offset the UVs of the Wave Samplers with a large panning noise texture to dynamically distort the wave patterns. Second, we used another sampler of that noise texture with different tiling, speed, and direction to modulate the strength of the normal maps across the surface. We sampled this noise texture four times with different variables in the material, which is a lot, but we reused them many times for most of the visual features of our water. Third, we sampled the pixel depth of the surface to mask out the waves that were far from the camera so that there were no waves in the far distance.Vertex DisplacementWhile these normal waves are enough to create the illusion of altitude on the water surface itself, they are lacking when it comes to the intersections around objects in the water, as these intersections are static without any actual vertex displacement. To fix that, two very simple sine operationswere added to drive the World Position Offset of the water mesh on the Z-axis. To keep the polycounts in check, we built a simple blueprint grid system that spawns high-res plane meshes at the center in a variable radius, and low-res plane meshes around that. This enables the culling of non-visible planes and the use of a less complex version of the water material for distant planes, where features like WPO are not needed.ColorThe general transmission amount is controlled by the opacity input of the material output, but scattering and absorption are defined via the Single Layer Water material output. The inputs Scattering Coefficients and Absorption Coefficients, which are responsible for reproducing how and how far different wavelengths travel through water, are decisive here. We use two scattering colors as parameters, which are interpolated depending on the camera distance. Close to the camera, the blue scattering colordominates, while at a distance, the orange scattering colortakes over. The advantage is a separation of the water's color from the sky's color and, thus, higher artistic control.Reflections & RefractionReflections in the Single Layer Water shading model are as usual determined by the inputs for Specularand Roughness. In our case, however, we use Lumen reflections for their accuracy and quality, and as of Unreal 5.4, the Single Layer Water model’s roughness calculation does not work with Lumen reflections. It forces mirror reflections, no matter the value input, leaving the specular lobe unaffected. Instead, it only offsets the reflection brightness, as the specular input does.For our artistic purposes, this is fine, and we do use the roughness input to fine-tune the specular level while having the specular input as the base level. A very low value was set for the specular value to keep the reflection brightness low. We further stylized the reflections by decreasing this brightness near the camera by using the already mentioned masking method via camera to interpolate between two values. For refraction, the Pixel Normal Offset mode was used, and a scalar parameter interpolates between the base refraction and the output of the normal waves.CausticsFor the caustic effect, we created a Voronoi noise pattern by using Unreal's Noise node and exporting it with a render target. In Photoshop, the pattern was duplicated twice, rotated each, colored, and blended. This texture is then projected on the objects below by using the ColorScaleBehindWater input of the Single Layer Water Material output. The pattern is dynamically distorted by adding one of the aforementioned panning noise textures to the UV coordinates.FoamlinesWe started by creating custom meshes for foam lines and applied the earlier texture pattern, but quickly realized that such a workflow would be too cumbersome and inflexible for even a small scene, so we decided to do it procedurally. Two common methods for generating intersection masks on a plane are Depth Sampling and Distance Fields. The first works by subtracting the camera's distance to the water surface at the current pixelfrom the camera's distance to the closest scene object at that pixel. The second method is to use the node "DistanceToNearestSurface" which calculates the shortest distance between a point on the water surface and the nearest object by referencing the scene's global distance field. We used both methods to control the mask width, as each alone varies with the object's surface slope, causing undesirable variations. Combining them allowed us to switch between two different mask widths, turning off "Affect Distance Field Lighting" for shallow slopes where narrower lines are wanted.The added mask of all intersections is then used for two effects to create the foam lines: "edge foam"and "edge waves". Both are shaped with the noise samplers shown above to approximate the hand-drawn foam line texture.Foam PatternsThe same noise samplers are also used to create a sparkling foam effect, loosely imitating whitecaps/foam crests to add more visual interest to the water surface. Since it only reuses operations, this effect is very cheap. Similarly, the wave normals are used to create something like fake subsurface scattering to further distinguish the moving water surface. Interactive RipplesA third type of foam is added as interactive waves that ripple around the player character when walking through shallow water. This is done through a Render Target and particles, as demonstrated in this Unity tutorial by Minions Art. The steps described there are all easily applicable in Unreal with a Niagara System, a little Blueprint work, and common material nodes. We added a Height to Normal conversion for better visual integration into our existing wave setup. Finally, here are all those operations combined for the material inputs:NimueBest PracticesUse Single Layer Water for efficient translucency, but note it lacks back-face rendering and forces mirror reflections with Lumen;For simple low-altitude waves, pan two offset samples of a normal map at different speeds; move panning to Vertex Shader for better performance;Break up texture tiling efficiently by offsetting UVs with a large panning noise, modulating normal strength, and fading distant waves using pixel depth;Sampling one small noise texture at different scales can power this and many other features of a water shader efficiently;If high-altitude waves aren't needed, a simple sine-based WPO can suffice for vertex displacement; implement a grid system for LODs and culling of subdivided water meshes;Blend two scattering colors by camera distance for artistic watercolor control and separation from sky reflections;Combining depth sampling and distance fields to derive the foam lines allows for more flexible intersection widths but comes at a higher cost. Further ResourcesHere are some resources that helped us in the shader creation process:General shader theory and creation: tharlevfx, Ben Cloward;Interactive water in Unity: Minions Art;Another free stylized water material in Unreal by Fabian Lopez Arosa;Technical art wizardry: Ghislain Girardot.ConclusionWe hope this breakdown of our water material creation process will help you in your projects.If you want to take a look at our shader yourself or even use it for your own game projects, you can download the complete setup on Gumroad. We look forward to seeing your water shaders and exchanging ideas. Feel free to reach out if you have any questions or want to connect.Kolja Bopp, Academic SupervisorLeanna Geideck, Concept ArtistStephan zu Münster, Technical Artist
#how #build #stylized #water #shader
How To Build Stylized Water Shader: Design & Implementation For Nimue
NimueIntroductionFor three semesters, our student team has been hard at work on the prototype for Nimue, a 3D platformer in which you play an enchanted princess who lost her memories. She needs to find her way through the castle ruins on a misty lake to uncover her past. Water is a visual core element of this game prototype, so we took extra care in its development. In this article, we will take an in-depth look at the design and technical implementation of a lake water material.The first prototype of Nimue can be played on itch.io soon. A link to our shader for use in your own projects can be found at the end of this article.Taxonomy of WaterBefore we dive into the design decisions and technical implementation, we present a simplified taxonomy of visual water components to better understand the requirements of its representation:RiMEWind WavesWaves generated by wind, which form on an open water surface, can be divided into capillary waves and gravity waves. Capillary waves, or ripples, are small, short-wavelength waves caused by weak winds affecting surface tension in calm water. They can overlap longer and larger gravity waves. How these physically complex wave types are represented in stylized video games varies depending on the respective style. Both types are usually heavily simplified in form and motion, and capillary waves are sometimes omitted entirely to reduce detail.Sea of ThievesFoam PatternsFoam patterns refer to white foam crests that form on a water surface without breaking against an obstacle or shoreline. In reality, this effect occurs when different water layers collide, and waves become steeper until their peaks collapse, and the resulting bubbles and drops scatter the sunlight. Stylized foam patterns can be found in many video game water representations and can easily be abstracted into patterns. Such patterns contribute to a cartoon look and can sometimes even replace waveforms entirely.The Legend of Zelda: The Wind WakerFoam LinesFoam lines are a very common water element in video games, represented as white graphical lines surrounding shorelines and obstacles like rocks. They typically reference two different water phenomena: foam forming around obstacles due to wave breaking, and foam along shorelines, resulting from wave breaking and the mixing of algaes with organic and artificial substances.Foam lines can have different visual appearances depending on the surface angle: The shallower the angle, the wider the foam effect. Due to the weaker waves, distinctive foam lines are rarely observed on natural lakes, but they can be included in a stylization for aesthetic purposes. Animal Crossing: New HorizonsReflectionsWhen light hits a water surface, it can either be reflectedor transmitted into the water, where it may be absorbed, scattered, or reflected back through the surface. The Fresnel effect describes the perceived balance between reflection and transmission: at steep angles, more transmitted light reaches the eye, making the water appear more translucent, while at shallow angles, increased reflection makes it appear more opaqueIn stylized video games, implementations of water reflections vary: RiME, for example, imitates the Fresnel effect but does not reflect the environment at all, only a simple, otherwise invisible cube map. Wind Waker, on the other hand, completely foregoes reflection calculations and renders a flat-shaded water surface.RiMETranslucencyAs an inhomogeneous medium, water scatters some of the transmitted light before it can be reflected back to the surface. This is why water is described as translucent rather than transparent. Some scattered light is not reflected back but absorbed, reducing intensity and shifting color toward the least absorbed wavelengths, typically blue, blue-green, or turquoise. Increased distance amplifies scattering and absorption, altering color perception. Modern real-time engines simulate these effects, including absorption-based color variation with depth. However, stylized games often simplify or omit transmission entirely, rendering water as an opaque surface.RiMERefractionAn additional aspect of water transmission is refraction, the bending of light as it transitions between air and water due to their differing densities. This causes light to bend toward the normal upon entering the water, creating the apparent distortion of submerged objects. Refraction effects also commonly appear in stylized water rendering. Kirby's Forgotten Land, for example, showcases two key visual characteristics of refraction: distortion increases with steeper viewing angles and is amplified by ripples on the water's surface.Kirby and the Forgotten LandCausticsCaustic patterns form when light rays are focused by a curved water surface, projecting bundled light patterns onto underwater surfaces or even back to surfaces above water. These patterns are influenced by the clarity of the water, the depth of the water, and the strength of the light source. They contribute greatly to the atmosphere of virtual worlds and are often found in stylized games, although only as simplistic representations.The Legend of Zelda: Ocarina of Time 3DDesign DecisionsDue to the fact that the setting of Nimue is a lake with a calm overall atmosphere, the decision was made to use very reduced gravity waves, as a calm water surface underlines this atmosphere. Capillary waves have too high a level of detail for the stylistic requirements of Nimue and were, therefore, not implemented.NimueShapesThe mood in Nimue can be summarized as calm and mystical. The design language of Nimue is graphic, rounded, and elegant. Shapes are vertically elongated and highly abstracted. Convex corners are always rounded or have a strong bevel, while concave corners are pointed to prevent the overall mass of objects from becoming too rounded.ColorsNimue uses mostly broken colors and pastels to create a serene, reflective mood and highlight the player's character with her saturated blue tones. Platforms and obstacles are depicted with a lower tonal valueto increase their visibility. Overall, the game world is kept in very unsaturated shades of blue, with the atmospheric depth, i.e., the sky and objects in the distance, falling into the complementary orange range. Shades of green and yellow are either completely avoided or extremely desaturated. The resulting reduced color palette additionally supports the atmosphere and makes it appear more harmonious.Color gamut & value/tone tests Hue, Tone & SaturationSince the color of the water, with its hue, tone, and saturation, is technically achieved by several components, a 2D mockup was first designed to more easily compare different colors in the environment. Here it could be observed that both the low and the high tonal value formed too great a contrast to the rest of the environment and thus placed an undesirable focus on the water. Therefore, the medium tone value was chosen.The hue and saturation were tested in relativity to the sky, the player character, and the background. Here, too, the color variant that harmonizes the most with the rest of the environment and contrasts the least was chosen.Foam LinesFor the design of the foam lines, we proceeded in the same way as for the color selection: In this case, a screenshot of the test scene was used as the basis for three overpaints to try out different foam lines on the stones in the scene. Version 3 offers the greatest scope in terms of movement within the patterns. Due to this, and because of the greater visual interest, we opted for variant 3. Following the mockup, the texture was prepared so that it could be technically implemented.ReflectionThe reflection of the water surface contributes to how realistic the water looks, as one would always expect a reflection with natural water, depending on the angle. However, a reflection could also contribute to the overall appearance of the water becoming less calm. The romantic character created by the reflection of diffuse light on water is more present in version 1.In addition, the soft, wafting shapes created by the reflection fit in well with the art style. A reflection is desirable, but the reflections must not take up too much focus. Ideally, the water should be lighter in tone, and the reflections should be present but less pronounced. Reflection intensityRefraction & CausticsEven though most light in our water gets absorbed, we noticed an improvement in the believability of the ground right underneath the water's surface when utilizing refraction together with the waveforms. When it comes to caustics, the diffuse lighting conditions of our scene would make visible caustic patterns physically implausible, but it felt right aesthetically, which is why we included it anyway.Technical Realization in Unreal Engine 5When building a water material in Unreal, choosing the right shading model and blend mode is crucial. While a Default Lit Translucent material with Surface Forward Shading offers the most control, it is very costly to render. The more efficient choice is the Single Layer Water shading model introduced in Unreal 4.27, which supports light absorption, scattering, reflection, refraction, and shadowing at a lower instruction count. However, there are some downsides. For example, as it only uses a single depth layer, it lacks back-face rendering, making it less suitable for underwater views. And while still quite expensive by itself, its benefits outweigh the drawbacks of our stylized water material.WaveformsStarting with the waveforms, we used panning normal maps to simulate the rather calm low-altitude gravity waves. The approach here is simple: create a wave normal map in Substance 3D Designer, sample it twice, and continuously offset the samples' UV coordinates in opposing directions at different speeds. Give one of the two samples a higher speed and normal intensity to create a sense of wind direction. This panning operation does not need to run in the fragment shader, you can move it to the vertex shader through the Vertex Interpolator without quality loss and thereby reduce the instruction count.Texture RepetitionTo reduce visible tiling, we used three simple and fairly efficient tricks. First, we offset the UVs of the Wave Samplers with a large panning noise texture to dynamically distort the wave patterns. Second, we used another sampler of that noise texture with different tiling, speed, and direction to modulate the strength of the normal maps across the surface. We sampled this noise texture four times with different variables in the material, which is a lot, but we reused them many times for most of the visual features of our water. Third, we sampled the pixel depth of the surface to mask out the waves that were far from the camera so that there were no waves in the far distance.Vertex DisplacementWhile these normal waves are enough to create the illusion of altitude on the water surface itself, they are lacking when it comes to the intersections around objects in the water, as these intersections are static without any actual vertex displacement. To fix that, two very simple sine operationswere added to drive the World Position Offset of the water mesh on the Z-axis. To keep the polycounts in check, we built a simple blueprint grid system that spawns high-res plane meshes at the center in a variable radius, and low-res plane meshes around that. This enables the culling of non-visible planes and the use of a less complex version of the water material for distant planes, where features like WPO are not needed.ColorThe general transmission amount is controlled by the opacity input of the material output, but scattering and absorption are defined via the Single Layer Water material output. The inputs Scattering Coefficients and Absorption Coefficients, which are responsible for reproducing how and how far different wavelengths travel through water, are decisive here. We use two scattering colors as parameters, which are interpolated depending on the camera distance. Close to the camera, the blue scattering colordominates, while at a distance, the orange scattering colortakes over. The advantage is a separation of the water's color from the sky's color and, thus, higher artistic control.Reflections & RefractionReflections in the Single Layer Water shading model are as usual determined by the inputs for Specularand Roughness. In our case, however, we use Lumen reflections for their accuracy and quality, and as of Unreal 5.4, the Single Layer Water model’s roughness calculation does not work with Lumen reflections. It forces mirror reflections, no matter the value input, leaving the specular lobe unaffected. Instead, it only offsets the reflection brightness, as the specular input does.For our artistic purposes, this is fine, and we do use the roughness input to fine-tune the specular level while having the specular input as the base level. A very low value was set for the specular value to keep the reflection brightness low. We further stylized the reflections by decreasing this brightness near the camera by using the already mentioned masking method via camera to interpolate between two values. For refraction, the Pixel Normal Offset mode was used, and a scalar parameter interpolates between the base refraction and the output of the normal waves.CausticsFor the caustic effect, we created a Voronoi noise pattern by using Unreal's Noise node and exporting it with a render target. In Photoshop, the pattern was duplicated twice, rotated each, colored, and blended. This texture is then projected on the objects below by using the ColorScaleBehindWater input of the Single Layer Water Material output. The pattern is dynamically distorted by adding one of the aforementioned panning noise textures to the UV coordinates.FoamlinesWe started by creating custom meshes for foam lines and applied the earlier texture pattern, but quickly realized that such a workflow would be too cumbersome and inflexible for even a small scene, so we decided to do it procedurally. Two common methods for generating intersection masks on a plane are Depth Sampling and Distance Fields. The first works by subtracting the camera's distance to the water surface at the current pixelfrom the camera's distance to the closest scene object at that pixel. The second method is to use the node "DistanceToNearestSurface" which calculates the shortest distance between a point on the water surface and the nearest object by referencing the scene's global distance field. We used both methods to control the mask width, as each alone varies with the object's surface slope, causing undesirable variations. Combining them allowed us to switch between two different mask widths, turning off "Affect Distance Field Lighting" for shallow slopes where narrower lines are wanted.The added mask of all intersections is then used for two effects to create the foam lines: "edge foam"and "edge waves". Both are shaped with the noise samplers shown above to approximate the hand-drawn foam line texture.Foam PatternsThe same noise samplers are also used to create a sparkling foam effect, loosely imitating whitecaps/foam crests to add more visual interest to the water surface. Since it only reuses operations, this effect is very cheap. Similarly, the wave normals are used to create something like fake subsurface scattering to further distinguish the moving water surface. Interactive RipplesA third type of foam is added as interactive waves that ripple around the player character when walking through shallow water. This is done through a Render Target and particles, as demonstrated in this Unity tutorial by Minions Art. The steps described there are all easily applicable in Unreal with a Niagara System, a little Blueprint work, and common material nodes. We added a Height to Normal conversion for better visual integration into our existing wave setup. Finally, here are all those operations combined for the material inputs:NimueBest PracticesUse Single Layer Water for efficient translucency, but note it lacks back-face rendering and forces mirror reflections with Lumen;For simple low-altitude waves, pan two offset samples of a normal map at different speeds; move panning to Vertex Shader for better performance;Break up texture tiling efficiently by offsetting UVs with a large panning noise, modulating normal strength, and fading distant waves using pixel depth;Sampling one small noise texture at different scales can power this and many other features of a water shader efficiently;If high-altitude waves aren't needed, a simple sine-based WPO can suffice for vertex displacement; implement a grid system for LODs and culling of subdivided water meshes;Blend two scattering colors by camera distance for artistic watercolor control and separation from sky reflections;Combining depth sampling and distance fields to derive the foam lines allows for more flexible intersection widths but comes at a higher cost. Further ResourcesHere are some resources that helped us in the shader creation process:General shader theory and creation: tharlevfx, Ben Cloward;Interactive water in Unity: Minions Art;Another free stylized water material in Unreal by Fabian Lopez Arosa;Technical art wizardry: Ghislain Girardot.ConclusionWe hope this breakdown of our water material creation process will help you in your projects.If you want to take a look at our shader yourself or even use it for your own game projects, you can download the complete setup on Gumroad. We look forward to seeing your water shaders and exchanging ideas. Feel free to reach out if you have any questions or want to connect.Kolja Bopp, Academic SupervisorLeanna Geideck, Concept ArtistStephan zu Münster, Technical Artist
#how #build #stylized #water #shader
·52 Ansichten