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


  • 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 🙂


Release changelog

Aquatic Surface Roadmap

List of features planned in a future version of the package. Sorted by priorities:

  • Per-vertex wave animation (oceans)
  • 2D Platformer water clip plane effect
  • Better coast effect, waves with foam 
  • Far distance cube-map for large-scale maps
  • Reflection plane support
  • Character swimming
  • In boat underwater volume clipping
  • Underwater post-process blur
  • Postprocess water drops on the screen when leaving the water
  • The wet material on the character drying effect.
  • River and sloping surfaces
  • Wet sand footprints
  • Caustics generator
  • Wave noise texture generator
  • Flow mesh/flow map generator

If you have any suggestions please mail me or leave a comment.

Version 1.2 (05.11.2018)

  • Fast simulated water interaction effect (single RT update 0.05 ms). 
  • Added water interaction component that can be connected to every dynamic actor.
  • Added Lit water material template (no SSR only reflection captures).
  • Added caustics distortion
  • Water interaction works on underwater planes too
  • Lake map interaction example
  • Added underwater coast effect.
  • Fixed underwater refraction quality
  • Fixed lit material normal-map transform
  • Fixed texture flowmap UV

Version 1.1 (08.10.2018)

New features:

  • Mobile Support
  • VR support
  • HTML support O_O
  • Simple fast buoyancy component
  • Better fast material lighting


  • Distance Fade disabled in axis z
  • Locked Blueprint scale Z (please modify parameters to change height)
  • Water coast fixes
  • Better refraction effect
  • Optimizations in materials and ticks
  • Changed translucent material to precomputed alpha
  • Better autoexposure blend

Version 1.0 (27.09.2018)

  • Aquatic surface package released


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.

Example materials in Aquatic Surface package.

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.

Reconstruct Click to refresh the reflection texture and material parameters. Reconstruct the object.
Over Water Material The material instance used on over the water surface.
Under Water Material The material instance used on under the water surface.
Volume Material Material instance used as fog volume of water.
Near Plane Distance Clip plane distance. By default 10.
Volume Box Extend Underwater pre-translucent volume box size.
Volume Box Location Underwater pre-translucent volume box location.
Volume Fog Density The density of the underwater fog  
Volume Fog Base The distance of underwater fog near plane
Reflection External External blueprint of reflection that can be shared between multiple water surfaces.
Reflection Cubemap Static cube map reflection.
Hidden In Reflection List of actors not rendered to reflection.
Reflection Capture Delay Allows capturing reflection after start witch some small delay (after the content is loaded). The -1 value – never recapture.
Reflection Source Location The point where the reflection capture was taken.
Reflection Box Over Extend The size of the box used for surrounding cubemap used as over water.
Reflection Box Over Location The central location of the box used for surrounding cubemap used in the underwater material.
Reflection Box Under Extend The size of the box used for surrounding cubemap used as over water.
Reflection Box Under Location The central location of the box used for surrounding cubemap used in the underwater material. 

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.
Overwater surface.


Overwater Base Color  
Fog Base Specifies the covering at which fog should starts. 
Fog Density Cover by fog depending on depth change.
Fog Color Fog color when a mesh is fully covered.
Use Fog Exp 2

The exponential types provide more depth, more natural-looking fog, and make the edges appear smoother. When disabled fog works in linear mode.

Scattering Color Fog color near the coast
Shadow Color The color multiplier on the ground from water shadow.
Wet Color The color multiplier on the ground for simulating the wet material.

Overwater Refraction

EmissiveReflection 0.0 Reflection will be applied to the base color when 1.0 it will be added to emissive. Parameter allows controlling how much sun color can affect the reflection.
Refraction Color Surface refraction color multiplier.
Use Shlick Reflection Enables physical-based Shlicks fresnel calculations. Otherwise uses dot(camera, normal) based scale.
Reflection Exp Exponential reflection. In the Shlick’s model of reflection, it is 5.
Box Projection Extend Size of box projection.
Use Box Projection Allows using box projection mapping. If disabled then the system uses standard spherical cube-map projection. 
Cubemap Cubemap texture used on objects. By default connected to render target. Textures should be prebaked and saved in content.
Use Multireflection Blocks reflected rays from sampling the cube-map under the water, reflects the ray again. It gives better results when using very high waves.
Overwater Sun  
Use Sun Allows using second normal texture source.
Use Sun Half Vector An alternative method of calculating specular reflection based on half vector instead of reflection. Little different result.
Sun Color Color fo highlights.
Sun Intensity The intensity of highlights.
Sun Shininess The shininess specifies how small the highlights are: the shinier, the smaller the highlights.
Glittering Power High power of glittering increases lighting points intensity.
Glittering From Sun How the position of the sun affects the Glittering effect.
Glittering Clamp Max glittering emissive value.
Overwater Translucent  
Refraction Simplified refraction effect based on UV shifting on waves.
Translucency Alpha blend translucency on the coast. Should be very low it conflicts with the refraction effect.
Use Coast Foam Activates additional coast foam effect.
Coat Foam Color Coast foam color multiplier. Width in the alpha channel.
Use Distance Fade Activates translucent fade effect on the horizon.
Distance Fade Min Minimum distance from the camera to start fade.
Distance Fade Width The width of a fading area.

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.
Underwater surface material.

Underwater Refraction

Refraction Refraction coefficient <1.0, 2.0>.
Refraction Color Surface refraction color multiplier.
Box Projection Extend Size of box projection.
Use Box Projection Allows using box projection mapping. If disabled then the system uses standard spherical cube-map projection. 
Cubemap Cubemap texture used on objects. By default connected to render target. Textures should be prebaked and saved in content.
Screen Refraction A coefficient of screen color refraction. Makes that meshes close to the camera can be seen from underwater.
Use Sun Specular Allows using sun specular effect.
Sun Specular Shininess Shininess parameter of the sun.
Sun Color Sun color multiplier. Scale encoded in the alpha parameter.

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 fog  
Use Fog Allows using the build-in fog effect.
Fog Color Sets the color of fog.
Fog Density Cover by fog depending on depth change. 
Fog Base Specifies the covering at which fog should starts. 
Use Fog Exp 2 The exponential types provide more natural-looking fog and make the edges appear smoother. When disabled fog works in linear mode.
Use Fog Scattering Allow to using the second color of fog near the water surface.
Fog Color Scattering The second color of fog near the water surface
Fog Scattering Scale Scale config of the scattering color effect.
Fog Scattering Shift Shift config of the scattering color effect.
Fog Scattering Width Width config of the scattering color effect.
Use Fog Wet Surface A color multiplier of the wet geometry near the surface fo water.
Fog Wet Color Surface A color multiplier of the wet geometry near the surface fo water.
Fog Wet Color Color multiplier f the wet geometry.
Pre-translucent fog volume effect.

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.

Postprocess volume water line.
Post-process waterline  
Use Water Line Allows displaying waterline effect. Can be disabled to optimize if you are not going to display the waterline (for example when the game is located fully underwater).
Use Water Line Refraction Allows displaying water line distortion effect.
Use Water Line Exp Allows using exponential waterline cover and distortion.
Use Water Line Noise Additional noise from full-screen texture can be used on the waterline (experimental).
Water Line Color The color multiplier for waterline effect.
Water Line Refraction Waterline refraction scale (better results with small negative values).
Water Line Refraction Width The width of the refraction effect. Fade in distance from the waterline.
Water Line Width

The width of the water line on the screen.

Post-process Screen  
Use Texture Distortion Allows using underwater full-screen distortion effect.
Use Vignette Allows using underwater vignette effect.
Use Vignette Distortion Allows using underwater vignette distortion effect.
Vignette Distortion Vignette distortion scale.
Vignette Dark The scale of vignette dark color.
Vignette Edge Hard/soft edge of vignette color

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.
Underwater caustics effect.



Light source  Decal casting direction. Directional light from the scene.
Textures List of textures used in decal animation. Animated caustics.
Animation Speed Caustics animation speed (frames per second).
Dynamic Material The material of caustic M_AquaticCaustic to use. 
UV Scale Caustics texture UV scale.
UV Move Caustics texture UV movement in time.
Color Caustic color multiplier. Saturation power encoded in the alpha channel.
Blur Max Castaic maximal mipmap level used near the coast.
Blur Width Caustics blending width from Max (near water plane) to 0(deep in water)
Emissive Additional emissive lighting effect in the shape of caustics.
Shadow Darkening around the caustics (water plane shadow)
Shadow Fade Width Transition length from No shadow(near water plane) to shadowed (deep in water).
Sun Fade Scale Only faces directed in front of the sun will be covered by caustics. This parameter allows scaling the disappearing.
Sun Fade Shift Only faces directed in front of the sun will be covered by caustics. This parameter allows shifting the start point of disappearing.
Saturation The saturation of caustics texture.
Use Wet Reflection Allows using specular reflection on the wet ground.
Wet Reflection The intensity of specular reflection on the wet ground.
Use Water Hight Clip Allows using clipping the decal effect by water plane. Fixes visibility when the decal projection is the higher than the water plane.
Water Height Waterplane height on the scene.
Water Height Fade Fade of decal near the water plane.

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.

UVMapping parameters


Use Flowmap

Refraction coefficient <1.0, 2.0>.

Use Flowmap Texture

Use the flow-map texture instead of vertex colors.

Flowmap UV Config

R and G is an X and Y axis speed of layers. The directions can be inverted as negative. Parameter B is the time scale of a flow map cycle. Parameter A scales the flow map UV.

UV Move Sale 1

The parameters R and G represent the movement on axes X and Y of UV map 1. The parameter B scales the UV.

UV Move Sale 2

The parameters R and G represent the movement on axes X and Y of UV map 2. The parameter B scales the UV.

Use UV Tex Coord/Use UV Tex Coord 1

Use UV Texture coordinates instead of world space position. Can be useful for rivers witch specific mapping.

UseBlendNormalAdvanced, UseBlendNormalUDN

Changes the normal map blending types. There are three types of normal map waves blending. Standard linear (fast), advanced whiteout /UDN. Read more: Blending modes.

Normal mapping  
Normal Scale Scales the normal vectors. Allow making waves higher or more flat (change B value to higher to make it flat).
Normal Texture Normal texture source.
Use  Normal Texture 2 Allows using second normal texture source.
Normal Texture 2  Second normal texture source.

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:

  Vertex-based Texture-based
Efficiency High Low
Requirements Additional mesh divisions Additional texture per object
Editor UE4 vertex painter -it is not  External Tool


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.

Vertex-Based flow editing tool preview.

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:

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.

MF_AquaticTranslucent node in materials. Fog is stored in vertex coordinates that allow moving calculations into vertex shader.

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.
    Translicent example, particles(fast) and box (accurate).


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

Reflection type Efficiency World Scene type Material type
Cube-map Very fast Static closed area, lakes pools M_AquaticSurface_Unlit, M_AquaticSurface_LIT
Reflection capture Fast Static all M_AquaticSurface_LIT
SSR Slow Dynamic all M_AquaticSurface_SSR
Planar reflection Slow Dynamic all M_AquaticSurface_SSR, M_AquaticSurface_LIT

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.

Hole in water plane example boat.

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


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.
AreaSize Size of simulation area.
AquaticSurfaces List of surfaces managed in the simulation.
Interp Speed The speed of simulation area interpolation to important place on the map (where something is moving in water).
DrawDebug Preview the are of simulation.
Animation Rate FPS of simulation.
Wave Travel Speed Simulated wave speed.
Wave Damping Simulated wave sampling
Wave Normal Scale Normal-map wave vector scale.
Materials Three render target textures used for rendering the simulation. Can be replaced by textures with a higher resolution.

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.
Dynamic Noise added when actor stays in place.
Force How much location change generates waves.
Torque How much rotation change generates the waves.
Radius The radius of the interactive object
Height Fade Fade out of interaction when it is far from the surface.
Importance Bigger importance means that the region should be moved to show the effect.
Max Velocity Max velocity of waves generated from this interaction. Allow clapping the forces.
Max Distance Max distance from interaction to the center of the simulation area. Useful for a player that should always interact with water.

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.


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
Shape The shape of the object that will be reacting to water.  Cone shape is the best choice for Boats – if deeper is object the force of buoyancy will be higher.
Shape Radius Used for calculating the density of the object.
Linear/Angular Damping Allow controlling how much object is slowing down in the water.
Center of mass The position where the force is applied to the object. Boats should transfer the center of the upper higher to be more stable.
Force scale Scales the force applied to the physics object.


Sometimes we need to render outlines without using post process. For example on mobile devices and VR full-screen post-process calculations are too heavy so we have to find another solution. This short article presents geometry based outlines, very old and tricky method that I’ve used in the Anime Toon Shading package. Continue reading Backface culling based outlines

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.


  • 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


Release changelog

Version 1.3 (06.08.2018)

  • Translucent and mask
  • Two-dimensional gradients
  • Gradient texture generator 

Read more

Version 1.2 (12-06-2018)

  • Light receiver positioning (4 modes available in ToonComponent - mesh/actor/bounds/toon)
  • Added anisotropic specular (hairs)
  • Added matcaps support (Eyes, Metal)
  • Updated dynamic lighting combine function/transition
  • Added material function for masking "Anime Toon Shading" in post process "MF_ToonShadingPostprocessMask"
  • UseDynamicLighting flag (faster rendering of objects that uses only the direction of light)
  • Example map updated

Version 1.1 (20-05-2018)

  • Bugfixing and optimizations
  • Example map updated

Version 1.0 (09-05-2018)

  • The first version of the package released.


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.


Post-process based toon shading (Other packages*)

Geometry based toon shading (This package)


uses the final image generated by ue4 to translate scene colors on cartoon stylized images.

uses the material system and meshes and is applied per object.


PC (full post-process in forward rendered scenes is problematic)

All platforms VR/PC/Mobile. Just works, this is the old-school method.


Full scene effect in one click.

Need to be applied per object/per material.


Easy to use just plug and play.

A lot of work to configure materials. Little complicated, need a setup for meshes.

Tweaking per object

Hard to customize shader per character. Tweaking parameters for one mesh can destroy the effect on others.

Very functional and useful in setting up character shading. Easy to customize. Just open material and modify shading/ outline/colors/specular.


Easy to change the visual effect of the environment on the full scene.

Global tweaking can be done by using shared material instances by multiple materials.

Receiving shadows

Supported by default.

Not supported.

Dynamic lighting

Supported UE4 lights. It looks strange when you use more lights than 1 light.

Implemented an independent dynamic lighting model.


Not supported

Supported by default.

Fog effects

Not supported

Supported by default.


Not supported

Supported by default.


Full scene

Applied per model as shell mesh.


Not supported

Supported by default.


Not supported

It looks properly in reflections.


Not supported

Supported by default.

Receiving shadows

Supported by default.

Supported only partially by Lit material in forward rendering mode of older engine version.

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.



Base Distortion

Distortion of shadow on all RGB channel

Base Shift

The offset of the base shadow.

Base Texture

(UseBaseTexture) texture color multiplied by base color.


Gloss effect. Changes the direction of the shadow to the camera.

Gradient Texture

(UseGradientTexture) Gradient texture used for shadow. Allow changing stepping mode of shading.

Normal Map Scale

Scale normal map vector. Active only in UseUlitNormalmap mode.

Normal Map Texture

The texture is used as a normal map.

Outline Color

Color of the outline. Alpha channel contains a width.

Outline Coverage

Setting a translucent outline

Outline Smooth

The smooth edge of the outline can be used as a fresnel too.

Use Outline

Enable/disable outline effect.

Specular Color

Color of specular. Alpha channel used for specular size change.

Specular Smooth

Smooth specular effect.

Use Specular

Enable/disable the specular effect.


Whether to use specular matcaps textures


Expose the specular texture color shininess.


Specify specular texture. Example matcaps can be found in matcaps folder. Matcap is a texture that is mapping on the mesh faced to the camera it is useful to initiate some metal gloss.


There are two types of specular texture UV Mapping. The local UV mapping is the specular mapping calculated in space of the camera. Non-local is world space mapping.


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.

Rotation Direction of light
Light Color Color of direct lighting.
Skylight ambient Color of indirect lighting.
Tick Interval Frequency of updating the values. If the light will be static then set it to -1.
Example map – Shading model and directional light

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:
    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.


Example map – Scene and point light/shadow

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

Anime Toon Shading is a tool prepared for characters shading and it was never designed to be used on hard-edged and flat surfaces. To achieve the best result on flat surfaces it’s worth taking into consideration some changes:
  1. Disable UseOutline in material
    The reason is simple – it is problematic to implement a fully functional outline effect using only data in the mesh. An outline needs to be stimulated by external mechanisms. 
  2. Try to prepare meshes with rounded corners
    It will make your shading look more smooth with the soft transition on the edges.
  3. Use outline shell
    A detailed description of the method can be found in the chapter “Outline shells”.

Questions & Answers


Dynamic lights? how it works in forward and deferred?

It is based on the observation that toon shading don’t need to be based on realistic lighting model. Anime Toon Shading material supports two directional lights. First one is global directional light shared by all objects on the scene. The second one is dynamic light calculated per mesh as the sum of closest point lights. The tricky part is to combine this two lights in the material to not destroy the shading on the mesh.

Does it work on mobile and VR? Forward rendering is supported?

Yes, it should work fine on this platforms. The standard unlit version of the material uses about 110 instructions (green complexity), cheapest can be lowered to 70 by setting flags useSpecular=false, useOutline=false, I don't have the mobile device to test so it'is hard to be sure but the materials are optimized for mobile.

Do the materials self-shadow?

Nope self shadowing is not available because this method uses material emissive color. However you can add dynamic light that will absorb directional lighting to simulate walking into shadow. Receiving shadows is supported only in forward rendering.

This shader works with post processing?

This implementation is geometry based. Material function can be injected in any material you want to add functionality of this shader. For full scene toon shading you should use another package.

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.


  • 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.


Release notes

Version 1.1 (05.03.2018)

  • circle bar mode
  • 10 new presets of bars
  • additional demo room

Version 1.0 (22.01.2018)

  • Releases basic version


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

Example star SDF texture.

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.

Example progress bar with colored layers of the bar outline (white), shape (black), progress (red), pattern (blue).
  • 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.

Outline layer  
Use Outline Switch that determinates whether the background outline should be rendered. When disabled then the background is filled by one color.
Outline Color Color of outline/background layer. To make it fully invisible change color alpha to 0.

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.

Shape layer  
Use Shape Texture Allow using SFD texture as shape description.
Use Shape Color Texture Fill the shape by texture color multiplied by shape color.
Shape Color 1/2 Colors of divides shape.
Shape Edge X/Y Edge scale allows fitting bar into different aspect ratio.
Shape Scale X/Y Scaling the visual part of the bar to fit into the mesh model.
Shape Slope X/Y Allows you to create inclined progress bars
Use Shape Round 1/2 Enable/Disable round corners on shape.
Shape Round Strength of round corners in shape.

Progress layer

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

Progress layer  
Progress Parameter used to steering fill of the progress bar. Active only when Debug is disabled.
Progress Debug Debug options override the behavior of progress bar by default to visualize the effect of changes in the preview.
ProgressAnimU/V Sets animated UV of progress bar texture.
ProgressUV Define progress texture UV mapping. XY- Position, ZW-scale.
ProgressColor1/2 Sets separate colors of the pattern used on the bar. 
Use Progress Color texture Allow to use progress color texture.
Progress Color Texture

Texture of progress bar sampled based on ProgressAnimU/V. The final color of the bar is calculated by the multiplication of Colors and Texture. This option is useful for an additional effect like gloss/shadow.

Progress Direction

Two functionalities in one parameter. Allow changing the direction of progression by setting positive-negative value. The negative value means that the bar will be filled from left to right and the positive from right to left. The absolute value of this value represents the blending of the progress bar into the shape layer. Big value = hard edge/small value = soft edge.

Progress Slope

leaning of progress bar lines.

Use Progress Round

Allow to use round corners on the progress bar.

Progress Round

Represents the roundness of progress bar corners.

Use Progress Move

If true then progress texture will be moved when Progress parameter changes.

Pattern layer

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

Pattern layer  
Use Divisions Allow using automatic division of the bar on two colored patterns.
Divisions Jump Hard Hard jumping between progress values. Round to closest.
Divisions Jump Soft Soft jumping between progress values.
Divisions Count Number of divisions on the bar.
Divisions Gaps Distance between divisions bars.
Use Pattern Texture Allow using texture as the division of the bar into two colored patterns.
Use Pattern Texture Progress Allow using texture as the division of the progress bar on two colored patterns.

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. 


Width Range of smoothness. Bigger value allows making smooth edges of the layer.
Shift Parameter shift is related to zero position on SFD. Determinates the edge size of the layer. Can be used to set up outlines.

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.

  MI_SurfaceRectBar MI_SurfaceCircleBar MI_UmgRectBar MI_UmgCircleBar
UseInterface false true
MaterialDomain Surface User Interface

Questions & Answers

How would I go about changing the number of stars

Just modify the material of stars that you want to change.
To change from 6 to 5 stars you should change the UV mapping of pattern
for example:

PatternUV = (R=0.000000,G=-0.100000,B=5.000000,A=1.200000)

Why I can’t control the progress value?

It's because of the debug option "Debug Progress" is enabled by default in all bars. That is very useful in testing and previewing bars. Open your bar material and change Debug Porgress=false.

Is there a second layer of bar usually called ‘buffer’?

The easiest way to do this in Robo Bars system is by creating two bars:

  1. Background bar with buff.
  2. Foreground top layer bar where: Outline color and shape Colors are set to fully transparent. (only progress will be rendered)

Fast Stylized Procedural Sky is a unique dynamic sky material and advanced weather system that is perfectly balanced between quality and efficiency. Designed and optimized specially for Mobile, Virtual Reality, and stylized PC/Console games.


  • GPU friendly works efficiently even on VR/Mobile. Unlit material without blending uses one draw call
  • Over 60 parameters to customize
  • Network replication supported
  • Clouds lighting with scattering and shadows changes depending on sun position
  • Clouds shadow casting, height fog, and static and dynamic skylight cubemaps
  • Configurable sun and moon, lens effect, eclipse and stars scintillation
  • Atmospheric sky gradient with tilting in sun direction
  • Customizable automatic clouds UV calculation
  • Moon normal-mapping and lighting calculated based on relative sun and moon position
  • Time of day curves and advanced preset system
  • Multilayered clouds
  • Wind direction and clouds speed
  • Smooth transitions between weather states based on preset system
  • Landscape backgrounds interleaved with clouds, static clouds, and stars layer
  • Skydome and skysphere mode
  • The material is based on the new unpublished before method for fast calculation of procedural clouds lighting. You will not find this solution anywhere else!

Technical details

  • Sky material  (ONLY 150 instructions! and ONLY 4 texture samplers used!)
  • Directional light shadow material.
  • 1 blueprint that uses material and implements time of day and preset system
  • 1 static skylight cubemap recapture helper blueprint
  • 1 Sky shadow material
  • 3 Skydome and Skysphere meshes
  • 10 tilled clouds textures 512×512 with encoded four depth traces on channels
  • 1 Moon normal map texture 512×512
  • 1 Background equirectangular texture 2048×1024 (R-stars, G-Background clouds, B-Distortion clouds)
  • 8 Color curves for simulating the day and night on Earth
  • 12 presets of weather (sunny, cloudy, foggy, snowy, smoky, stormy, clean, rainy, half sunny, gloomy, blizzard, overcast)
  • 3 time of day presets
  • 3 Landscape backgrounds textures 4096×1024 for skydome (depth encoded as alpha)
  • 1 Landscape background textures 4096×2048 for skysphere (depth encoded as alpha)
  • 4 example static cubemaps for default skylight


Release notes

Version 1.6

  • Time of day exposed to the cinematic, editable  sky  in the sequencer
  • Added UVHorizon parameter that changes the horizon from flat to round
  • Time Cycle Duration - useful you need to set day-night cycle duration.
  • Added the lightning effect with clouds scattering and skylight intensity
  • Changed background clouds color from additive to translucent (more customization options)
  • Updated weather presets and color curves
  • Added  directional light fog scattering color
  • Added moon scattering
  • Material cleanup
  • Documentation moved to WordPress
  • Added new example map (stylized anime, event-driven lighting and weather)

Version 1.5 (16.06.2018)

  • Added time of day presets system and example color presets
  • A second configurable layer of clouds (optional because uses 50 instructions)
  • Added versioning (current version 15) - my future changes in the system should not affect your current state of work since now ;]
  • Parameter: UseExternalSunDirection - allow to use direction calculated in external system.
  • Fixed clouds movement on the ground when sun direction is changed manual.
  • New weather preset “WP_Stylized”
  • Added flag for syncing moon and sun rotation around the planet
  • Fixed replication of recapture skylight, shadow casting, and directional lighting

Version 1.4 (26.03.2018)

  • Added replication of sky parameters and presets. (server changes the weather)
  • Added Clouds Bloom parameter.
  • Added Switch for sky transformation world/local space. Sky can be properly attached to objects now.
  • Fixed moon transformation (360 degrees = 1 day)
  • Added MoonVisibleDuartion parameter
  • Added SunVisibleDuartion parameter.

Version 1.3 (17.01.2018)

  • optimization: UV calculations moved to vertex shader (10 instruction less in main shader no quality loss)
  • support for precomputed blended cubemaps

Version 1.2 (03.12.2017)

  • casting clouds shadow on ground
  • supported change between skysphere/skydome
  • 10 additional textures of clouds
  • lens flare (experimental)
  • additional moon movement
  • tone mapping added for Mobile ES2 (same look like on PC)

Version 1.1 (17.11.2017)

  • Static world backgrounds interleaved with clouds (mountains, city, big planet, ring).
  • Sky light interaction recapture frequency based on time and preset change
  • Height fog interaction (color change)
  • Sun eclipse and stars scintillation added
  • Stars/Moon Brightness multipliers added
  • Lighting on scene based on preset
  • Time control function (set time with transition duration and ease function)
  • Presets can change scene lighting, it's dark when we select cloudy weather

Version 1.0 (08.11.2017)

  • The first version of the package released.

Remember that your positive rating and comments are motivating me to do the next update.


Get started

The easiest way to start working with Fast Stylized Procedural Sky is to For start watching the tutorial that shows how to use basic parameters of the blueprint:

  1. Unpack FastStylizedProceduralSky into Content in your project.  
  2. Open project and you should see a FastStylizedProceduralSky package with the following content:
  3. Drag & Drop BP_FastStylizedProceduralSky on your scene. (Remember to remove the old  sky that you used before on your scene you don’t need this anymore)
  4. Select FastStylizedProceduralSky blueprint that you just put on the scene and set up lights in the external tab:
    Sun Light External directional light used for lighting from the sun. The system will automatically change the direction and color of this light during the time update.
    Moon Light External directional light used for lighting from the moon. The system will automatically change the direction and color of this light during the time update.
     Sky Light External skylight used for global lighting on the scene. System recapture during the update. The frequency of recapture can be changed by.
    Height Fog External fog used for cover the scene by fog. System changes the color of fog based on time of day.

  5. Press play and enjoy the show.

Remember! Only movable light can be changed by Fast Stylized Procedural Sky

Remember! Enable dynamic lighting (no lightmaps) in projects settings to fully exploit the  abilities of the time of day cycle.

Sky system

Fast Stylized Procedural Sky is divided into a few basic systems that can work in cooperation as well as in separation either systems can stay inactive for manual customization.

External data Constant external variables that are not managed by the system. Externa data can be modified during gameplay.
Time of day system Responsible for the passage of time calculations celestial movement and sampling curves of colors over time-based on sun height. Can be updated based on curves or presets.
Weather system The preset system manages the weather preset selection and allows interpolation between all presets.
Cubemap capture Allow capturing cubemaps of the sky. Usable optimization to avoid update the skylight dynamically.

All default properties of Fast Stylized Procedural Sky blueprint are editable only if Weather Preset System and Time of Day System is disabled. Three steps are needed to disable both systems:

  • (Time Of Day) Use Time Of Day Curves = false, 
  • (Time Of Day)  Time Of Day Change Mode = BlueprintDefaults
  • (Weather Preset) Weather Change Mode = BlueprintDefaults

From this time all default properties of the sky can be manually customized for specific weather and time of day conditions.

External data

External options in Fast Stylized Procedural Sky blueprint allows stylizing final result for wide range types of games.

Saturation Changes in the color saturation of the sky allow making the scene more colorful.
Clouds bloom Changes the emissive of clouds.
UV Scale Scales UV coordinates of clouds. Used for changing the size of clouds on the sky.
UV Layers Size Scales UV coordinates of separate clouds layers (xy – first layer, zw-second layer)
Clouds Layer1 The texture of clouds in the first layer.
Clouds Layer2 The texture of clouds in the second layer.
Horizon Tilt Tilting of horizon color into the sun direction. Better color gradient when the Sun is near the horizon
Wind Force Multiplies speed and direction of clouds by the force of the wind
Sun Radius Size of the sun.
Sun Shine Shine effect around the sun.
Sun Max Altitude Max vertical angle of the sun in the middle of the day.
Sun Azimuth The direction where the sun appears on the horizon.
Day Duration Allow changing the day duration. Depends on Sun Max Altitude (better results is lower than 90)
Moon Radius Size of the Moon.
Moon Shine Shine effect around the moon.
Moon Roll Moon rotation in a roll.
Moon Rotation Rotation of moon direction on the sky. Yaw Azimuth, Altitude, and Zenith.
World Rotation Speed Background stars and clouds rotation in time.
World Layer Texture The texture used as the background landscape. Texture requires encoding depth value (distance from the camera) in the alpha channel.
World Layer Fog The landscape layer hides in the fog.
World Layer Depth Scale depth in the landscape layer allows for interleaving with clouds.
World Layer Color Landscape world layer color multiplier.   

Fast Stylized Procedural Sky supports casting shadows from the sun on the ground.

External Parameters  
Grounds Shadow Material  Shadow material is mapped on the ground by light function in directional light. Example material instance in package MI_DefaultGroundShadow.
Ground Shadow Scale parameter scales the UV mapping of shadow.
Ground Shadow-Soft Blurs the edge of clouds shadow on the ground.

This effect is implemented based on Light Function material that unfortunately is not supported on mobile.

Time of Day system

The time of day system is responsible for the passage of time calculations celestial movement and sampling curves of colors over time-based on sun height.

Time Of Day The current time of day in hours. Range: <00:00-24:00>
Time Change Speed Speed of change the time in time day cycle in minutes. 1 real second = 1 minute in the game. Set 0 to stop the time.
Moon Change Speed Speed of change the moon direction on the sky during the update. Yaw Azimuth, Altitude, and Zenith.
Use Time Of Day Curves Activates TimeOfDay curves. When enabled overrides default parameters of blueprint
Time Of Day Curves List of curves used by the system to override colors in curve mode.
Time Of Day Settings (Struct) The current list of settings precalculated from preset or curves.
Time Of Day Preset List List of presets used by the system to override colors in preset mode.
Time Of Day Preset Change Configuration of the preset system for time of day.

Time of day system changes a number of parameters of the sky based on time of the day like sun color, clouds colors, fog colors etc. The system can be updated in two modes:

  • curve system
  • preset system

Both modes exclude each other to change between these modes use flag Use Time Of Day Curves. Here is the list of  parameters that can be controlled by each of the systems:

Time Of Day Settings (Struct)  
Sky Upper Color Upper color of the sky
Sky Lower Color Lower horizon color of the sky. Horizon falloff intensity in the alpha channel
Clouds Upper Color Color of  Upper dynamic clouds
Clouds Lower Color Color of Lower dynamic clouds
Clouds Secondary Color Clouds color multiplier for the second layer.
Clouds Background Color Color of static background layer of clouds
Sun Color Sun color. Alpha channel stores the intensity.
Moon Color Moon color. Alpha channel stores the intensity.
Stars Color Stars color. Alpha channel stores the intensity.
Fog Color Height fog color.

Time of day curves

List of all Time Of Day settings can be controlled by curves. The curve system is active only when Use Time Of Day Curves = true. All defined curves are sampled based on the sun height. Mapping from time to sun height:

Time of day Sun Height (curve sample position)
00:00 -1
06:00 0
12:00 1
18:00 0

If the curve is not defined in the Time Of Day system then sky uses the default parameters from the time of day preset.

A simple example that shows how to change the horizon color using the time of day system:

  1. Find curve to change in sky blueprint: Blueprint->SkyLowerColorCurve
  2. You can edit the existing C_SkyLowerColor or duplicate the curve and replace a value of the SkyLowerColorCurve parameter in the blueprint.

Time of day presets

Basically the preset is a collection of predefined Time Of Day parameters that can be loaded to the sky. The preset system allows interpolating between these parameters and load custom settings for specific conditions. Time of day presets library can be found in TimeOfDay directory there are three basic examples presets BloodyMidnight, BlueNight, Pinky.

Time of Day Preset System  
Time Of Day Curves Determines whether the system uses curves or preset systems to update the time of day. Set false to use presets.
Time Of Day Settings Currently loaded settings of time of day.
Time Of Day Preset List List of presets from the library to use in the project.
Time Of Day Preset Change Defines how the preset will change during the game.

Time of day preset system is active only when Use Time Of Day Curves = false.

Time of Day Preset Change  
Selected Index of selected preset from the list. Should be smaller than the length of the Preset List.
Reload Selected Reload checkbox/button. Click to reload the selected preset and see results in the UE4 editor preview.
Transition Func Transition type of interpolation between the time of day presets.
Speed The speed of interpolation to the next preset.
Duration Duration of transitions between presets.
Mode Defines how the preset will change in time. (more details about modes below)
Change After Time How long the system will way to automatic change to the next preset.

There are multiple methods to activate preset in the project that can be defined in Change Mode:

Preset Change Mode  
Default Properties

The Time of Day Preset System is disabled and sky uses properties from the blueprint. In this mode, the designer is able to change each parameter manually in blueprints. There are few functions that can be used for steering presets in this mode:  

  • Set Preset Change Mode – Allow to change mode and duration of preset that is used in modes other than Blueprint Default.
  • Set Preset External – Sets the preset from the library. Transition duration is how long the preset will be in transition.
  • Set Preset External – Sets the preset from the list of presets by index. Transition duration is how long the preset will be in transition.
Selected Preset Preset System uses an index of preset that I currently selected. In this mode, the designer is able to manually select the preset used by the game.
Random On List In this mode, the preset is automatically selected from the list by random function after a time defined in Change After Time attribute.
Next Preset On List In this mode, the preset is automatically selected by jumping to the next preset on the Preset List. You can prepare your chain of presets that changes during the day. 

Adding a new preset to the library

The library of time of day presets can be easily extended. Few steps are needed to create and customize a new preset:

  1. Open Select TimeOfDay directory and preset that will be extended.
  2. Click right and select the option Create Child Blueprint Class.
  3. Set the name and attributes in default properties of the newly created class.
  4. Now preset is ready to use. Add preset to Time Of Day preset List in Fast Stylized Procedural Sky blueprint and start using as described in the section dedicated using a standard library of preset.
  5. There is no preset editor. Just edit preset settings in the blueprint on the scene. Results of your changes you will see in the scene preview. After preset is finished just copy preset settings group and paste to your preset class.

Preset settings are stored in structure so you can copy current settings of the sky to your new preset. Change in preview and then copy to preset – It is the easiest way to tweak parameters for preset. The other method to updating the presets is by modifying a preset that is set as “selected” and click “reload selected” after finishing the modifications to see the result.

Event-driven time

Fast Stylized Procedural Sky has external functions that allow controlling the time of day for example from the level blueprint.

External functions  
SetTime Changes the time of day with interpolation at specific duration.
SetTimeOfDayByIndex Sets the time of day preset by index.
SetTimeOfDayExternal Sets the time of day external preset.
SetTimeOfDayChangeMode Sets the time of day change mode and duration.

Weather system

Fast Stylized Procedural Sky comes with a library of presets for different types of weather: cloudy, sunny, clean, rainy, stormy, foggy, overcast, half sunny, glowy, blizzard, stylized. Each preset is just a list of predefined parameters that will be loaded to the sky after activation. The preset system manages the weather preset selection and interpolation between them.

Build in prests library.
Preset system parameter  
Weather Preset List List of presets from the library to use in the project.
Selected Weather Preset Index of selected preset from the list. Should be smaller than the length of the Weather Preset List.
Reload Selected Reload checkbox/button. Click to reload the Selected Weather sky preset and see results in the UE4 editor preview.
Weather Change Transition Transition type of interpolation between weather states.
Weather Change Speed Speed of interpolation to next preset.
Weather Duration Time to start another preset based on current change mode.
Weather Change Mode Defines how the weather will change in time.  (more details about modes below)

There are multiple methods to activate preset in the project that can be defined in Weather Change Mode:

Weather Change Mode  
Default Properties

Weather Preset System is disabled and sky uses properties from the blueprint. In this mode, the designer is able to change each parameter manually in blueprints.

Selected Preset Weather Preset System uses the index of preset that is currently selected. In this mode, the designer is able to manually select the weather used for the gameplay state.
Random On List In this mode, the preset is automatically selected from the list by random function after a time defined in Weather Change After Time attribute.
Next Preset On List In this mode, the preset is automatically selected from the list by the incrementation function. You can prepare your weather cycle chain that changes during the day. Example:

Event-driven weather

Fast Stylized Procedural Sky system can be configured to changing presets by events from the game. There are a few functions that can be used for steering presets:

  • Set Preset Change Mode – Allow to change mode and duration of preset that is used in modes other than Blueprint Default.
  • Set Preset External – Sets the preset from the library. Transition duration is how long the weather will be in transition.
  • Set Preset External – Sets the preset from the list of presets by index. Transition duration is how long the weather will be in transition.


Adding a new preset to the library

Sometimes the game requires unique conditions for the specific situation in the game. The library of presets is expandable and weather designers can create their own presets and share parameters with other users of the system. Each preset is defined as Blueprint Class that extends from WeatherPreset class.

Creating a preset:

  1. Select preset that will be extended.
  2. Click right and select the option Create Child Blueprint Class.
  3. Set the name and attributes in default properties of the newly created class.
  4. Now preset is ready to use. Add preset to Weather preset List in Fast Stylized Procedural Sky blueprint and start using as described in the section dedicated using a standard library of preset.
  5. There is no preset editor. Just edit weather preset settings in the blueprint on the scene. Results of your changes you will see in the scene preview. After the preset is finished just copy the weather preset settings group and paste it to your preset class.
Weather preset settings  
Clouds Scale The scale of clouds layers multiplier. Resize clouds per preset
Clouds Density The density of clouds. Covers cover of the sky by clouds
Clouds Harness The hardness of clouds color layer.
Clouds Translucent Translucency from cloud to background
Clouds Blend Scale smooth blending of clouds edge
Clouds Distortion Distortion of clouds color layer
Clouds Scattering Sun scattering through the clouds
Clouds Upper Brightness Light intensity in upper parts of clouds
Clouds Lower Brightness Light intensity in lower parts of clouds
Clouds Ambient Impact of sky color on clouds lighting
Clouds Shadow Size Size of shadow under the clouds
Clouds Soft The softness of shadow under the clouds
Clouds Background Background clouds color intensity
Clouds Horizon Density The density of clouds on the horizon
Clouds Horizon Alpha The fade of clouds on the horizon
Clouds Horizon Scattering Scattering of clouds on the horizon
Horizon Falloff Falloff of horizon color
Wind Force Scale Wind force multiplier. Controls speed of clouds per preset
Wind Dynamic Scales relative movement between layers of clouds
Wind Dispersing Rotates relative movement between clouds layers
Skylight Brightness Sun brightness multiplier
Second Layer Color The color multiplier for the second layer of clouds.
Second Layer Alpha Translucency multiplier for the second layer of clouds.
Second Layer Scale Scale multiplier for the second layer of clouds.
Second Layer Wind Wind multiplier for the second layer of clouds.

Lightning effect

Fast Stylized Procedural Sky supports new lightning system since update 2.1. The example of using a lightning system is presented in the demo map Demo/Maps/AnimeLightningMap.

Lightning effect visible on clouds.

Basically, the BP_LightningController actor is responsible for controlling attributes like lightning source location/rotation/area/frequency and update of sky settings. 

Step by step explained how to use BP_LightningController:

  1. Place BP_LightningController on your map. 
  2. Setup the location of the actor to location above the scene (X=0.000000,Y=0.000000,Z=50000.000000). The volume of the actor presents the area of the lightning effect.
  3. Change the External Parameter Sky to BP_FastStylizedProceduralSky actor from your map.
  4. Select BP_FastStylizedProceduralSky to find Sky Material and open. Switch the UseLightning value in the material to true.
  5. Run the game I watch the lighting effect.

Lightning Activation

The BP_LightningController is automatically active on the map but can be activated by events as well.  Set the activation loops value to 0 to control the activation by yourself. Then use Activate and deactivate events in your game to run the effect during the storm.

Lightning Fast

Lightning Fast is powerful combination materials and blueprints that implement a wide range of realistic and stylized electricity effects this external package can be easily integrated with Fast Stylized Procedural Sky.

Only a few steps are needed to integrate Lightning Controller with lightning Bolt from Lightning Fast:

  1. Drag and drop LightningFast/Blueprints/BP_LightningBolt blueprint n the scene where Lightning Controller works.
  2. Scale the lightning bolt actor to be visible from a large distance: Try to use Scale (50,50,50)
  3. Set Activation Loops in Lightning Bolt blueprint to 0. It will disable auto-activation and allow you to control the lighting effect using a controller.
  4. Implement your lightning effect trigger by binding to OnActivated delegate from Lightning Controller.

After these few steps lightning bolt effect will be shown at location and rotation randomized in Lightning Controller just after the lightning activation.

Lightning Fast use case is just an example, you can play sound or even spawn other effects/particles using activation event.

Skylight update

The Skylight actor captures the distant parts of the scene and using result data to compute lighting.  This actor can be very well integrated with Fast Stylized Procedural Sky. There are two methods to update the sky during changing the weather and time:

Method Settings Effect
Dynamic Skylight.SourceType = SLS_Capure_Scene The system captures the scene lighting every few seconds depending on the time change and preset change. Try to avoid this method because it is very slow
Precaptured Skylight.SourceType = SLS_Specified_Cubemap Uses precalculated static cubemaps that will be interpolated during the time change.

Fast Stylized Procedural Sky allows configuring skylight update to minimalize the costs.

Skylight parameters  
Sky Light External skylight scene actor used for global lighting on the scene. System recapture during the update. The frequency of recapture can be changed by.
Sky Light Recapture Delay The time between updates of the skylight. A bigger value makes that system run faster but the frame rate will jiggle every time the update is evaluated.
Sky Light Static Cubemaps

List of cube maps used as precalculated (fast) skylight blended in time.  The time between midnight to midday is divided into a number of cubempas on this list. The first cubemap corresponds to midnight and the last cubemap is midday.
Active when Skylight->SourceType = SLS Specified Cubemap

Sky Light Cubemaps Time Driven If true use time of day to select cubemaps. When false uses the height o the sun to select cubemap.

Using sky spheres

Fast Stylized Procedural Sky supports rendering on skydome as well as sky sphere. Skydome is set as the default option. It is required to do a few important steps to switch sky into Skysphere mode:

  1. Switch material to sky sphere UV: Open SkyData/IM_DefaultSky  and change UseSkydomeUV = False.
  2. Set the sky sphere mesh in the blueprint:

    Open BP_FastStylizedProceduralSky and find SkyMesh component.  
    Change StaticMesh=SM_Skysphere or SM_SkysphereFlat (Flat is deformed but looks better with height fog).

  3.  Change world layer texture used on the sky to the sky sphere:
    Select BP_FastStylizedProceduralSky
    Change WorldLayerTexture=T_SkysphereMoon

Additional material effects

There are few features in Fast Stylized Procedural Sky that are disabled in default material. It is because not all users need these advanced options and hitches on efficiency are not good enough to enable all of them by default.

To change these parameters you can create your own instance of sky material from M_BaseSky as well as modify SkyData/IM_DefaultSky. Reference to sky material instance can be set in sky blueprint parameter: External->SkydomeMaterial.

Switch Parameters  
Flare Experimental Enable experimental flare effect (about 20 additional instructions in the shader).
Use Clouds Texture1 Force sky to use only one texture of clouds during sampling. Good for mobile because you will get one free sampler after enabling this option.
Use Skydome UV Use this option to switch mapping to skysphere mode (false).  (Read how to using sky spheres in paragraph 4)
Use Star Scintillation Enable stars blinking in the sky.
Use Sun Eclipse Sun can be covered by the moon when this option is enabled.
Use World Layer Optimization. Whether world layer texture should be used on the sky. (optimization).
Use WorldSpace Rotation Optimization that forces shader to use world space rotation of sky mesh in calculations of sun/moon and clouds.
Use Clouds Bloom Fake bloom effect on clouds. Useful for mobile.
Use Multilayered Clouds Activate the second layer of clouds. It’s very expensive (over 50 additional instructions).

Moon movement

Shading of the Moon is always calculated based on the position relative to the  Sun it is hard to set up at first but results are very realistic. This is automatic so there is no need to care about the direction of shading on the Moon. There are a few important parameters that allow setting the moon movement:

Moon movement  
Moon Change Speed Rotator that describes how many degrees the moon should move during one day. A realistic model should be about 13 degrees per day.
Moon Synced To Sun Force synchronization between the Moon and the Sun. In realistic mode, it should be checked as true. 
Moon Rotation The start position of the Moon in the sky should be set at midnight.

Questions & Answers

How to switch on/off the background mountains

This feature can be disabled for optimization so you will have to switch it in the material instance used by the sky.

  1. Select the Sky blueprint on the map
  2. Find Sky Material used by blueprint open.
  3. Switch UseWorldLayer=true/false.

I Have a question …

Cool! You can always ask! I’m ready to support and add some new useful features to my product. Feel free to comment and rate my package too 🙂

Can I use skysphere instead of skydome?

Skysphere is supported by sky but you need do some simple steps to start using this feature.  Check “Using skyspheres” in the documentation.

Is there any support for stars blinking?

Open the  material instance that you use in the sky (by default M_DefaultSky) and change flag:

Use Stars Scintillation = True

This option is activated by static switch because costs additional calculations on material that some users don’t need and the author is not satisfied with final effect so the feature is still under development.

Why the sky appears locked-in-place even though the the rotation of blueprint has changed?

The sky is calculated in world space for optimization but this is optional and can be changed.

MI_DefaultSky->UseWorldSpaceRotation = false (fixes material rotation)

BP_Sky->UseWorldSpaceRotation = false (fixes rotation of clouds shadow mapped on ground)

About 10 shader instructions lost on this operation. Use this options only when you need.

Why there are two materials of sky instance after update?

I've changed the name of "M_DefaultSky" into "MI_Default" to stay consistent with Assets Naming Convention - Epic. M_DefaultSky Should not exist in the project anymore.

I've started to use parameters collections in the new version and old parameters are not updated anymore that is why the old material is incorrect. Best way to fix this is to remove the package from the project and download the current version of the FSPS again.

If you created any presets or day-night curves you should copy them before this operation and paste into your project. It should work fine.

Why my scene is black on mobile?

Probably you have used clouds shadow material on your blueprint. This functionality is not supported by UE4 mobile rendering. There is no function to check platform specific settings in UE4 to automatic disable this feature so it needs to be disabled manually. If you are working on mobile just clear ground shadow material.

How to achieve more realistitc effect?

The sky system is non-realistic/nonphysical based but there is a lot of options to tweak the results to make it look reliable.

Can I fly throw clouds? Is it volumetric ?

Nope. The material is not based on volumetric principles, the rendered sky is flat with the illusion of depth based on shading so the best results you will get from the ground.