Aquatic Surface is a well optimized advanced material that implements configurable water effect.

Features

• Water clip line effect 
• Underwater and over water surface
• Underwater post-process volume
• Two types of static reflection/refraction projections (box projection. spherical projection)
• Translucency effect support for underwater particles and meshes
• Water holes for boats
• Example 4 types of basic configurations: lake/reef/pool/waste
• Animated caustics based on decals
• Standard UV mapping, vertex color flow, and texture color flow maps
• Over 100 parameters like translucency, fog depth, mapping, reflective, refraction, scattering, wet color.
• Multiple material switches enable/disable some of the effects to increase quality/efficiency
• Separated onto 4 materials: overwater surface, underwater surface, in water post-process volume, caustics decal. Each of them can be used with other water systems.
• Very fast and GPU friendly. 120-160 instructions depend on used effects.
• Quality/Efficiency adjustment. cinematic (realistic reflections) and standard (fast static box projected cube-map)
• Water edge implemented without using the distance fields
• Specular effect and glittering on waves
• Simplified underwater scattering
• Implemented as the unlit translucent material
• Interactions & Buoyancy components
• Fast simulated interactions with moving area
• More options and switches to customize/optimize than you can try during your whole life 🙂

Gallery

Release changelog

Documentation

Get started

In Aquatic Surface package the water visualization is divided into multiple specialized material effects. Each layer of the effect can be separately configured to achieve incredible effects and can be used individually.

• Overwater surface (M_AquaticOverWater)
• Underwater surface (M_AquaticUnderWater)
• Pre-translucent volume water (M_AquaticVolume)
• Post-process screen water (M_AquaticScreen)
• Caustics decal (M_AquaticCaustic)
• Waterplane holes for boats (M_AquaticHole)
• Material function fo translucent meshes (MF_AquaticTranslucent)

Demo folder contains all assets prepared to showcase the example Maps. Check the example maps to see the possibilities of the Aquatic Surface system.

Each example map uses its own template of water materials located in Template folder like Like/Reef/Pool. A template is a group of material instances created from Aquatic Surface master materials. For example, in folder Demo/Lake you can find material instances of materials used on LakeMap. Those materials can be easily edited to achieve another visualization of lake water.

You can create your own material instances of water by duplicating the chosen template content or by using the editor option “Create Material Instance” on master materials located in Material directory.

Few simple steps to start using Aquatic Surface:

1. Chose the template of Aquatic Surface water that you want to use on your map. For example AquaticSurface/Demo/Templates/Reef.
2. Drop the blueprint (/Demo/Templates/Reef/BP_AquaticSurface_Reef) of water on your level.
3. Modify the parameters of the blueprint to adjust the water to your map. Especially it is important to set up bounds of reflection overwater/underwater and post-process volume size. A detailed description can be found in Aquatic Surface Blueprint section.

Aquatic Surface Blueprint

The BP_AquaticSurfce is a combination of underwater overwater and post-process materials that provides a user-friendly interface to configure water.

Pay attention that M_AquaticScreen material should be set in PostProcess component in PostProcessMaterials array.

Over Water Surface

The M_AquaticOverWater is the material effect visible from over the water reflection refraction fresnel and depth. This material should be used on plane meshes aligned horizontally with normals directed upward.

1. Find the M_AquaticOverWater* material that you want to modify from the example library of materials.
2. Click right select duplicate option on the material. Rename to your water. It is good practice to have a clean naming convention like M_AquaticOverWater+River/Lake/Ocean.
3. Put on your scene flat plane surface and apply the newly created material.
4. Open created material and edit parameters to customize for your scene.

Under Water Surface

The M_AquaticUnderWater is a waterplane surface rendered from under the water. This material mainly represents the effect of refraction and reflection under the water. This material should be used on plane meshes aligned horizontally with normals directed down.  

1. Find the M_AquaticUnderWater* material that you want to modify from the example library of materials.
2. Click right select duplicate option on the material. Rename to your water. It is good practice to have a clean naming convention like M_AquaticUnderWater+River/Lake/Ocean.
3. Put on your scene flat plane surface and apply the newly created material.
4. Open created material and edit parameters to customize for your scene.

Pre-translucent volume water

The M_AquaticVolumeWater is a custom post-process effect rendered before translucent. Ths material visualizes the underwater ‘fog’ and wet surface.

The fog parameters should be set in BP_AquaticSurfce blueprint because these parameters are shared between multiple materials (like translucent).

Post-process water

The M_AquaticScreenWater a post-process effect that visualizes the distortion vignette and water plane clipping line. This material should be used in the post-process volume.

Caustics decal

The M_AquaticCausticDecal material is the effect of caustics projected on the ground. The effect is animated using a simplified method based on animated textures. Caustics animation using a looped cycle based on 16 frames. Caustics decal should be used wich blueprint BP_AquaticCausticDecal prepared especially to update the animation.

1. Find the M_AquaticCaustic* material that you want to modify from the example library of materials.
2. Click right select duplicate option on the material. Rename to your water. It is good practice to have a clean naming convention like M_AquaticUnderWater+River/Lake/Ocean.
3. Drag and drop Blueprints/BP_AquaticCausticDecal on your scene.
4. Set created material to the Dynamic Material parameter in BP_AquaticCausticDecal on your scene.
5. Open created material and edit parameters to customize for your scene.

UV mapping and normals

Wave effect is based on two moving normal maps. The system supports two types of wave effect animation in UV Transform and Water Flow. To switch between these two types of UV just change Use Flowmap option in the material. UV animation is supported by overwater surface as well as the underwater surface.

UV transform

UV Transform mode is the fastest and simpler method just moving and scaling the normal map layers UV coordinates in time. This mode is enabled when UseFlowMap is set to false. In this mode, two scaled layers of normal maps are moving linearly in a defined direction. The configuration of movement speed and scale can be changed in UV Move Sale 1 and UV Move Sale 2 parameter.

Water Flow

Water flow is one of the coolest methods of water animation, first introduced in Portal 2 presented on SIGGRAPH 2010.
The basic idea in this method is to move the UV of the water textures according to direction vectors drawn on the surface.

This package supports rendering water witch two methods of flow colors, vertex color, and flow map texture. Each method has some advantages and disadvantages described below:

Flow-tools

Texture-based flow mode uses textures that can be prepared in an external tool like FlowMap Painter. Those textures should be loaded as vector displacement maps because of data precision that is important to achieve the best possible visual effect. There will be a special tool for creating flow map textures in Unreal Engine Editor in the future version of the Aquatic Surface package.

Vertex-based flow mode is the more interesting feature because does not require any additional textures only mesh used for effect should be tesselated (divided on multiple triangles). You have to decide how many verticles do you need to draw your flow on the mesh.

Editing vertex flow

The process of editing water flow per-vertex is a little inconvenient because there is no tool for this in UE4 editor. I didn’t want to transform this package into a vertex-flow editor plugin because it’s not the idea of Aquatic Surface. I’ve decided to use Vertex Paint editor and create additional tools for previewing the results of changes that make the whole process a little more convenient.

1. Switch the option UseFlowMap to true to use the flow map feature on water.
2. Change mesh density according to your requirements of precision. If the material is not reacting on vertex color brush then probably you should use mesh with higher density and select the mesh component to paint.
   
3. Switch the option UseFlowmapToolthe to true in the overwater material to see debug vertex flow preview.
4. Select the mesh to paint on.
5. Chose Vertex Paint tool in the UE4 editor
6. Setup the paint color R and G according to the table of vectors below:
   

   (0.0, 1.0,)	UP (0.5, 1.0)	(1.0, 1.0)
   LEFT (0.0, 0.5,)	ZERO (0.5, 0.5)	RIGHT (1.0, 0.5)
   (0.0, 0.0)	DOWN (0.5, 0.0)	(1.0, 0.0)

7. Paint on the mesh
8. Use random  value on the blue channel to force noisy transition between normalmaps.
9. After finished work, you have to propagate changes to mesh to save the data.
   

   Unreal Engine 4 has some troubles with using dynamic vertex colors on actors so propagation is required to run vertex colors in the standalone version of the game. It’s inconvenient because you will have to do copies of every water surface that using vertex flow. You can speed up resolving this issue by voting on my bug fix request: https://issues.unrealengine.com/issue/UE-64354

Translucent under the water

The Aquatic Surface package supports translucent materials. This effect is very limited by the material system and requires to add special material node MF_AquaticSurface to the translucent material that will be used on an object in the water. This effect is implemented by fading the translucent objects depends on the distance from the camera.

There are three examples of material created for use under the water:

• M_TranslucentAdvanced – Advanced translucent effect calculated per pixel. It can be slow but very accurate.
• M_TranslucentFast – This material is using Vertex Interpolation. It’s a fast method to implement this effect.
• M_TranslucentDither – Traditional dither material used in UE4.
  

  

Reflections

Aquatic Surface supports multiple types of reflections. Table below shows differences between all approaches:

The type of material is specified in the Parent attribute of the material used as OverWaterMaterial in BP_AquaticSuraface.  It’s good practice to use _Unlit, _Lit, _SSR post-fix in water surface material names.  

Static cube-map reflections

All BP_AquaticSurface actors use the same shared Render Target reflection texture so it is not possible to generate the textures for multiple water reflections at the same time. However, the system can be set to use static pre-baked cube maps and it solves that problem.

Step by step how to create and use the static cubemaps:

1. Select the water actor on the scene.
2. Find the reflection tab in the properties of water actor
3. Clear the Static Reflection Cubemap value if is set. This will force the system to render reflection into the cube-map texture.
4. Click reconstruct button to refresh the texture.
5. Find /Game/AquaticSurface/Textures/Cubemaps/RT_AquaticCubemap
6. Click right button on the RT_AquaticCubemap and from the context menu chose the Create Static Texture
7. Set the newly created texture into the Static Reflection cube-map parameter in an Aquatic Surface actor.
8. Repeat all steps for all Aquatic Surface actors on the scene.

Probably you have some questions. For example WHY the hell I have to do this? Thanks to using static cube map textures your game will load and work very fast even on mobile and VR. It’s far better solution than dynamic reflections used in other water systems.

Dynamic planar reflections

Aquatic Surface can be easily set to use dynamic planar reflections.

1. Select BP_AquaticSurface on your map.
2. Switch UsePlaneReflection attribute to true.
3. Change OverWaterMaterial attribute to material that supports dynamic reflections (with post-fix _SSR or _LIT (for example MI_AquaticOverWaterOcean_LIT)
4. Open project settings and search for “Planar Reflections” switch the  “Support global clip plane for Planar Reflections” to true.
5. Save and restart the editor.

Hole in water plane

There is a simple solution for holes in water planes that can be used for boats. You just have to create a mesh that will be rendered inside the boat and use material M_AuaticHole. Check the example boat.

This feature requires screen color sampling so it is not supported on mobile platform.

Interactions

Aquatic surface supports the interactive surface effect based on physics simulation in a quality comparable to current-gen games. The basic configuration is presented in the video below (LakeMap):

1. Set UseInteraction=true parameter in the overwater/underwater material used in the water surface. 
2. Drag and drop BP_AquaticSimulation actor on the scene.
3. Set parameters of the BP_AquaticSimulation. Add the BP_AquaticSurface from the scene to the AquaticSurface list.
4. Add the BP_AquaticInteration component to the actor that is going to interact with water.

Aquatic simulation reacts on two types of interactions:

1. Component-Based – Actors that contains BP_AquaticInteration will be registered in the water surface and make waves when moving. Check the example Character blueprint with left/right foot interactions connected to the foot bones in the construction script.
2. Event-Based – Interaction can be generated on the event for example hit/explosion by executing the AddInteraction function on Simulation blueprint. The simple example presented in LakeMap level blueprint.
   

How fast it is where is a bottleneck? It takes about 0.06ms per frame for render the simulation in 256×256 texture that result is reasonable even for VR games. Update of the interaction component is the biggest bottleneck of the algorithm because of the slow math evaluation in the blueprints. That is why you should consider minimization the number of interaction components in actors or aquatic simulation blueprint nativization.

Buoyancy

Aquatic Surface supports a fast simplified buoyancy system for physics actors.  An example of using buoyancy is presented in the BP_AquaticBuoyancyActor.

1. Add BP_AquaticBuoyancy  to your physics-based actor
2. Set the parameters of an added component

Main references to create Anime Toon Shading was “Gravity Rush” and “Dragon Ball FighterZ” so if you want to achieve this kind of feeling with dynamic cartoon lighting in your game, then this package will be a perfect starter for you.

Anime Toon Shading is a post-process independent approach to cartoon style effect, which means it uses geometry based shading model that allows customizing every character on the scene to specific lighting conditions and works perfectly in the forward rendering mode.

Package contains a full lighting system that supports single dynamic directional light and multiple dynamic point lights. Perfect choice for VR games as well as mobile.

Features

• Advanced material configuration instanced per object specular/shading/outline
• Dynamic directional light support
  Multiple dynamic point lights that can affect actors
• Very fast and GPU friendly
• Material function, which can be used as an unlit/lit material
• Tested on meshes from paragon (great for stylizing assets)
• Geometry based shading. No need to use post-process uses, forward rendering mode works in VR and mobile.
• Interface for an easily combined dynamic toon lighting system with any actor
• Outline shell mesh (material for additional mesh rendered from inside)
• Multiple parameters designed with thinking of customizing toon shading on characters
• Anisotropic specular (hairs), specular matcaps support (Eyes, Metal)
• Easy to integrate with external post-process.
• Toon specular parameters: Specular size, color, and translucent, softness
• Toon shadow parameters: Glossy effect
• Aberration effect, softness, width, two shading methods (texture and smoothstep function), multiple shading textures
• Toon outline parameters: width, softness, color, and translucency

Gallery

Release changelog

Documentation

Geometry based shading

There are two types of packages on the marketplace that supports toon/cel-shading in UE4. Post-process based (other packages) and Geometry based (this package). Both have cons and pros and It is important to understand the difference to know with them chose. A table below shows basic differences and possibilities that will be supported or blocked depending on what you choose.

Probably there will be support for the post-process shading model in future versions of this package but in the current state, I’m focused on geometry-based shading.

Get started with material

This part of the documentation covers the basics of creating material in Anime Toon Shading. The system is divided into two types of material that can be used on geometry lit and unlit. Both types of material support similar functionalities and parameters but there is a small difference:

• Unlit (M_ToonShadingUnlit) – Very fast but can’t receive shadows.
• Lit (M_ToonShadingLit) Little slower but allow to receive shadows.

To start working with Anime Toon Shading you need to create material for your mesh:

1. Chose the material type that will be used on mesh for example M_ToonShadingLit.
2. Click right and select “create new material instance”.
3. Open material and set up parameters of new material as you like to see an object on the scene.
4. Apply created material to your mesh.

Using directional light

Directional light can be used for setting up global lighting that will be affecting all objects on the scene. Just drag and drop BP_ToonDirectionalLight on scene and setup parameters.

Using multiple point lights

Anime Toon Shading supports multiple point lights that are combined into second directional light data and applied to the base shading model. That functionality can be used for light flashes like explosions, some additional lighting on the scene, and shadowing in darker places where the directional light should not affect the object.

The dynamic light will only affect objects that implement properly BI_ToonShading interface. You can use an example implementation and inherit a base class of static mesh (BP_ToonStaticMesh) and skeletal mesh (BP_ToonSkeletalMesh)

1. Content Browser -> Crete Actor
2. Select BP_ToonStaticMesh or BP_ToonSkeletalMesh
3. Setup default mesh in the blueprint.
4. Set Toon Shading material on the mesh (Get Started section describes how to create new material).
5. Drag and drop created actor to your level.
6. Drag and drop BP_ToonPointLight to your level. Set up parameters:
   

   BP_ToonPointLight
   Intensity	Light color and shadow multiplier.
   Light Color	Color of direct lighting.
   Shadow Color	Color of indirect lighting.
   Position	The position of the light.
   Scale (radius)	The radius of lighting.
   Base Light Weight	How base directional light color affects meshes in this light. 0 means additive, 1 means override the base light.
   Base Shadow Weight	How base directional light shadow affects meshes in this light. 0 means override the base light direction 1 for no change.
   Scene	Will be updated automatically after adding light to the scene.

7. Drag and drop BP_ToonScene to your level.
8. Select BP_ToonScene and add Lights and Actors that should be managed by the lighting system.

Custom character interface

Sometimes there is no possibility to inherit example actors (BP_ToonStaticMesh, BP_ToonSkeletalMesh, ThirdPersonCharacter) that contains the implementation of dynamic lighting. Fortunately “Anime Toon Shading” is very extendable, you can modify your own character to be affected by dynamic Toon Shading lighting as well. It’s a bit complicated but believe me, I did everything I could to make it user-friendly.

1. Open Character blueprint. Add BP_ToonScene reference attribute to your actor. Variables->Add:
   • Variable Name Scene
   • Variable Type BP_ToonScene
2. Add a new component BP_ToonShadingComponent that will be used to communicate with the scene.
3. Add a new function Toon Shading that will be evaluated to update lighting on the object. Functions->Add.
   
4. Add ApplyShading evaluation for every mesh in pawn that should be affected by lighting. In this case, the character contains one Mesh.
   
5. Call function in the constructor to activate lighting on start.
   
6. Implement the ToonShading interface. Open Class Settings and add interface BI_Toon_Shading to list.
   
7. Call toon shading update on events BeginPlay and IToonShading
   

Remember! This modification creates dynamic material instances to communicate with the scene manager, you should use them instead of creating a new one. Custom character interface

External post-process

It’s a good practice to combine two types of toon shading systems for example by using “Anime Toon Shading” for characters and post-process material for the environment.

Post-process based toon shading should support excluding the shading materials that using “Anime Toon Shading”. Generally in this kind of problem full-screen mask tells the post-process shader where to live pixel is not changed. It can be implemented easily by using a custom depth stencil mask. This is a simple example of how to integrate this package with post-process material.

1. Set up your project to use the stencil buffer. This functionality is required because we need an additional buffer to mark pixels rendered by AnimToonShader.
   
2. Select mesh that is using “Anime Toon Shading” material and set stencil mask value:
   

   Remember: It is just an example configuration of the mask. If you already using custom depth stencil for outlines then you should reserve one bit for “Anime Toon Shading” masking.

3. Use MF_PostProcessMask material function as a mask on your post-process effect:
   

Outline shells

The outline effect for forward rendering can be realized by creating a second expanded mesh with front face culling (rendered from inside). “Anime Toon Shading” contains tricky material that can do it for you. You can find an example of this part of the documentation in Demo/Characters/ThirdPersonCharacter blueprint.

1. Duplicate mesh component in your character and rename to ‘Shell’.
2. Initialize Shell in construction script
   
3. You can add the attribute ShellColor to your blueprint or use MakeVector. The alpha value in this vector is responsible for the outline width.
4. The shell material supports the vertex color alpha multiplier. You can locally control the width of the shell by painting (alpha channel) on the vertex color of the mesh. It is a cool feature used in the current generation games.

Flat surfaces

Questions & Answers

SDF Robo Progress Bars is an advanced master material usable for creating a wide range of customized progress bars. Package contains over 50 predefined excellent styles easy to use for various types of games. Material supports advanced customization that covers most of the possible design requirements. Thanks to using SDF functions instead of huge textures all created progress bars always stay sharp, well aliased.

Features

• Two types of shape circle bar/rectangular bar. Fully callable and extendable for more shapes.
• Signed distance functions based rendering. The shape is generated from mathematical functions that give the quality of ‘Vectorized’ graphics without using huge resolution textures.
• Configurable for all resolutions.
• KISS – One mesh per bar.
• Can be mixed with SDF and standard textures.
• Rounded corners of shape colors patterns and progress bar showing.
• GPU friendly, one draw call per bar.
• 23 different example themes that can be adjusted to requirements.
• Unlimited user-defined themes can be created easily using the available properties.
• Multiple advanced effects of progress bar – burning/fade.
• Easy to integrate witch UMG.
• Supported reparenting of themes between different shapes.
• Flexible modification options, each bar presented in this package can be created directly from another.

Gallery

Release notes

Documentation

Showcase and material parameters

Creating a new bar

1. Select bar from group ExamplesSurface/ExamplesUmg. Find a bar that looks closest visual to effect that you would like to achieve (all bars share the same functionalities so can be modified one to another but it’s faster to start from some point).
   
2. Create duplicate or material instance from the selected bar.
3. Set the name for the newly created instance of material. It’s good practice to start name from MI_Surface or MI_Umg. Open material and modify parameters.
4. Modify the parameters of the new bar according to your requirements.

Basic types of bars

All bars used in the game should be created as Material Instance that derives from the build in types of materials. Multiple combinations of bars are possible based on bar shape and bar type. The base bar instance name is constructed according to the specified naming convention:

MI_ + BarType + BarShape + Bar

BarType – System is divided into two separate material instances that allow using this system on the surface meshes as well as on UMG widgets.

• Umg – material can be used on hud controls (widget elements).  
• Surface – material used on regular meshes (planes in 3d space). Check ExamplesSurface folder to see all examples prepared for surface bars. UseInterface switch set false (for optimization). 

BarShape – Allow to chose the basic method of bar visualization.

• Rect – classic rectangular bard that fills from on side to another.
• Circle – advanced bar that fills the circle.

Check ExamplesUmg, ExamplesSurface, ExamplesUmgCircle, ExamplesSurfaceCircle, folder to see all examples.

Using Robo Bars in UMG

1. First place the Image widget on the hud widget.
2. Then apply the progress bar material onto your image widget by setting the parameter Brush->Image as presented below:
3. Setup the material parameter called “Progress” in blueprint graph. You have to get dynamic material instance from the widget and set the parameter value.
   

4. Progress is a basic value parameter in the master material  in range between 0.0 (empty) and 1.0(fully filled) used for setting how much progress bar is filled.

Debug options override the behavior of progress bar by default to visualize the effect of changes in the preview. Find material that you used in your progress bar and disable the debug option by setting:
Progress->ProgressDebug = false

A simple example of using Robo Bars is presented in the demo (Demo/Blueprints/BP_Hud)

Signed Distance Fields

Signed Distance Field is an image where each pixel contains the distance to the nearest point on the boundary. An additional sign of distance allows determining if the pixel is inside or outside rendered shape. SDF image that looks like gradient can be loaded from a file or generated by mathematical functions called Signed Distance Functions.

One of the biggest benefits of using this method is very cheap and configurable antialiasing effect. The same method is used to render outlined/smooth high-quality fonts in Unreal Engine 4 based on low-resolution textures. 

Package SDF Robo Progress Bars uses this method to render all bars in multiple ways.

• drawing smooth outlines, shadows, edges
• configurable division on bars
• combining multiple shapes
• round corners using smooth min function

Master material parameters

The progress bar is divided into 4 basic layers that are combined into one using translucent blending. Each layer is configurable and implements some additional effects.

• Outline layer (white)
• Shape layer (black)
• Progress layer (red)
• Pattern layer (blue) 

Outline layer

The outline effect is very common in progress bars, it’s a great tool to highlight the shape or separate bar from the background to make it more readable. Outline layer is represented by the base shape. In final effect, it can be rendered as shape, filled background or stay invisible.

Shape layer

Shape layer is to describe the shape of the bar and it is represented by combined signed distance functions. Shape layer is always active.

Progress layer

Progress layer is used for drawing current progress (how much shape is filled by color/texture/effect).

Pattern layer

Pattern layer describes the scheme of a division the bar into two colors.

Layers antialiasing

Each layer of bar contains parameters designed especially to control antialiased and smooth edges. This functionality allows to set up hard or soft blending between lower and higher layer. 

From UMG to Surface

Sometimes there is a need to change Surface material into UMG to render on hud without loss of all parameters set in the material. This operation is well supported by UE4.

1. Open material that needs to be changed to support UMG/Surface mode,
2. Find option General->Parent and change to MI_Umg*Bar/MI_Surface*Bar depends on your needs.

Explanation of UE4 mechanism. There are two differences between UMG and Surface materials:

UMG does not support vertex interpolators so UseInterface needs to be set false in materials used in UMG. Surface allows for vertex interpolators so it is used as an optimization.

Questions & Answers