Cartoon Water Shader in UE4 / UE5

[ad_1]

In the world of video game design, creating realistic water can be a daunting task. But with the power of Unreal Engine 4 (UE4) and the recently released Unreal Engine 5 (UE5), designers can create stunning cartoon water shader that are not only visually appealing but also computationally efficient.

In this article, we will explore the creation of cartoon water shaders in UE4 and UE5. We will delve into the technical aspects of shader creation and provide step-by-step instructions for creating a basic cartoon water shader. We will also discuss the various settings and parameters that can be adjusted to achieve the desired look and feel for your water, as well as some tips and tricks to help optimize performance.

By the end of this article, you will have a solid understanding of how to create your own cartoon water shader in UE4/UE5, opening up a world of creative possibilities for your video game designs.

Cartoon Water Shader in UE4 / UE5

The author of this article was inspired by the visual aesthetics of the game Rime and Simon Trümpler’s talk on the water created by Pablo Fernandez. The article focuses on the process of creating a cartoon water shader in Unreal Engine 4/5.

He was particularly interested in creating an unlit shader that reacts to the sun’s position and generates foam around every object thrown into the water. They used Gerstner waves for the wave generation and changed four main parameters: Wavelength, Amplitude, Steepness, and Speed.

The author also added a light control blueprint for controlling the reflection on the surface and a simple depth fade node for the shallow water coloration. They used a distance field intersection and depth-based intersection for creating foam around objects and implemented buoyancy for objects to float on the water. The article explains the process step-by-step, including the technical details and caveats.

From a point of view of the inspiration, the author was inspired by the stunning visual aesthetics of the game Rime. Upon viewing Simon Trümpler’s presentation on the water simulation developed by Pablo Fernandez, they were intrigued by two aspects. Firstly, they noted that the water in Rime reacts to the Sun’s position, despite the fact that the shader used is unlit. This was interesting because unlit materials are typically self-illuminated and cannot receive light information. Secondly, they were fascinated by the manually placed foam around the shoreline and rocks in the game. The author aimed to create a system where the foam is automatically generated around every object thrown into the water.

The Waterfall

In their presentation, Simon discussed the implementation of waterfalls in the game. They explained that while texture-based vertex-displacement was utilized for the water surface in the game, it could not be used for the foam due to the limitations of mobile devices. To overcome this, they developed a procedural noise option for the foam.

Procedural noise is a technique used in computer graphics to generate complex textures and patterns using mathematical functions. This allowed Simon to create realistic-looking foam around the waterfall without relying on texture-based vertex-displacement.

To ensure that the foam function was usable on mobile devices, Simon specifically designed it to work with the device’s hardware limitations. This enabled the foam to be generated in real-time on mobile devices, providing a consistent and visually pleasing experience for players.

Waves

The author used Gerstner waves to generate the waves in their game. Gerstner waves are a modified sine wave and more information can be found on GPU gems. The author explained that there are four main parameters that can be modified in a wave set: Wavelength, Amplitude, Steepness, and Speed. To set these values, they chose a value for Wavelength and Steepness, and then calculated Speed and Amplitude based on these values.

He then generated multiple sets of waves with different parameters and added them up. For the ocean, they used 12 sets of waves, and for the river and lake, they used 4 sets.

However, there was an issue with the waves in Unreal because the engine cannot decide which big wave to render first. To solve this problem, the author placed another mesh under their water and applied an opaque material to it, making sure that this mesh only writes in the custom depth pass. They then incorporated these nodes into their water material to ensure that the waves were rendered correctly. The author shared a test map that showed the waves generated with one set and 12 sets of waves.

Sun Reflection

The author discussed the sun reflection technique in their talk. The sparks were not particularly noteworthy and were created by using the normal map’s different channels formed into a dot product, followed by some multiplication, clamping, and raising the values to a certain power. However, what is truly fascinating is how an unlit material can receive sun rays on the surface.

To achieve this effect, the author created a light control blueprint that allows users to define their source of sunlight. The blueprint sets a material parameter collection value that is used by the shader to determine the sun direction and control the reflection on the surface. This includes fake Subsurface Scattering color intensity based on the Sun’s orientation. This technique enables even cheaper Unlit materials to receive sun rays on the surface, providing similar reflections as PBR materials.

Color

The author mentioned their process for color in the water. First, they calculate a gradient on the water surface based on the camera position, which is used to blend between the base color and a lighter blue color. Next, they calculate the wave heights from the object position in world space and mask out the wave crest and trough value to blend them with the base color. For shallow water coloration, the author used a simple depth fade node.

Caustic & Wetness Effects

The author explained that the caustic and wetness effects are achieved using a special material. The caustic texture is distorted by another texture and applied to the mesh using triplanar projection. The wetness effect is achieved by coloring the base texture, adjusting the roughness map value, and adding a sine wave animation. The material parameter collection is used to set up a base height for these changes, with everything below 0 receiving the changes and everything above 0 remaining unaffected.

As for reflection, it is achieved using a cubemap, and screen space reflections are available if a PBR version of the water is used. The view angle parameter is set for reflection and refraction using a Fresnel mask. This parameter hides reflections near the player and from very steep angles, reducing overall noise and adding to artistic control.

Interaction with the Objects

There are two ways the water can interact with objects, first is the dynamic foam around every object, the second is buoyancy where objects can float on the water.

For the foam I created two methods – one is called distance field intersection, the other is depth based intersection.

Distance field is basically a volume texture, representing your mesh. It can be used for ambient occlusion, intersection calculation, or shadow casting. There are a few caveats using this method, the biggest one is it only supports DirectX 11 or higher.

You can find out more about distance field in the Unreal Engine documentation.

The depth-based method uses the scene depth calculating the intersection. It doesn’t look as good as distance field (for the water) but it can run on everything, even on mobile. There is a number of cases in which; using this depth method, you could achieve great intersection results such as Winston’s shield in Overwatch.

You can see that the distance field intersection starts to expand on the water surface, while depth-based begins gobbling up those rocks.

[ad_2]

Source link to the tutorial