Learning Water Graphics in UE4

Learning Water Graphics in UE4
Epic Games Japan / Technical Artist
Hiroyuki Kobayashi

#UE4 | @UNREALENGINE
Self Introduction
Hiroyuki Kobayashi
Usually work on UE4 support,
such as answering UDN.
Twitter / @hannover_bloss

Demo Scene

Cenote
Reference pictures

Goal
● Does not break when viewed from both above and underwater.
● Realistic Water Graphic.

Does not break when viewed from both above and underwater.
Can reproduce the state when the
camera is half submerged.

Composition of water mesh
Create a surface facing the camera and simulate the submerged state.

MeshA
For cross

MeshB
For water surface outside

MeshC
For water surface inside

MeshD
For border

Four mesh configurations were used,
because we wanted to decide the translucent sort order exactly.

Water material

Outside water material

Distortion screen UV
Scene Color & Depth & fresnel

Opacity and Refraction pin are not used,
Translucent expression by inserting Scene Color in
Emissive.
Waves create texture sheets in Houdini.

Water animation
Export offset and normal texture sheets from Houdini Ocean.

Distortion Screen UV

Add Pixel Normal for Screen UV
Physically incorrect

Scene Color & Depth & Fresnel

Inside water material

Scene Color
Total Reflection

Scene Color

Cross water material

Cross water material
The material is simply transparent.
Draw on Custom Depth and judge whether it is below
the water surface.

Border material

Border material
Borders gradation
Scene Color

Border material
Borders gradation

Border material
Make gradation from UV opened rectangle.

Border material
Make gradation from UV opened rectangle
h

Border material
Scene Color

Border material
Distort scene colors using border meshes gradation.

How I made the water effect

Add elements from nothing.

Water reflection and refraction

Color subtraction

Before After

Inside water component
● Water reflection and refraction
● Caustics
● Color subtruction
● God ray

Water Reflection and Refraction

Water Reflection and Refraction
Why does water looks like a mirror when inside water?

Angle of incidence
Angle of reflection
Angle of refraction

Air
Water

Ray
When the ray comes in ...

Draw a line perpendicular
to the surface from the
hit point of ray.
Ray

Angle of incidence

Angle of reflection

Angle of refraction

In the case of air to water
Air
Water

In the case of water to air

Angle of refraction
In the case of water to air,
The angle of refraction is
greater than the angle of
incidence.

Critical angle
90°

Total reflection
When the angle of
incidence exceeds the
critical angle,
Reflects all ray.

Reproduce total reflection with UE4

Planar Reflection

Calculate critical angle in material

About 48.6°
Critical angle
In case of water to air
48.6°

Let's check the
angle of incidence
48.6°

Vertical line form
water plane
Replace to Pixel Normal
Pixel
Normal

Ray vector
Replace to
Camera Vector
Camera
Vector

Find if the angle between
two vectors is greater
than 48.6 degrees.

Critical angle mask

Find the angle between two
vectors by dot product.

臨界角マスク
h
Critical angle mask

Multiply to scene color
Critical angle mask

Mirror parameters
Critical angle mask

Caustics
A pattern formed by light converging due to the
effects of reflection and refraction.

How is this pattern made?

Return to the previous picture.

What happens if the water surface is wavy?

Air
Water
Ground

Hit water surface

Hit inside water ground

Places where light is
concentrated become
brighter.

Bright
Dark

Let’s make it !

Calculate and make texture sheet in Houdini

Make wave use Ocean Simuration

Make plane grid

Transfer normal to plane

Calculate refraction vector

Move vertex to refraction vector

Transfer overlap to Vertex Color

Rendering to texture sheets

Setup in UE4

Light Function
Texture sheets play in material.
Applies to Directional Light.

Light Function
Animate the texture sheets created in Houdini with the Flip Book node.

Light Function Off

Light Function On

Water absorbs red light.
As light travels through the water, red light is absorbed, leaving blue.
Water and shallow water in cups appear colorless and transparent due to low absorption.

Reproduced in post process material.

Post Process Material

Depth
Use Custom Depth to
judge whether it is below
water level.
Multiply color to scene color

Depth

Distance from camera

Distance from water plane

Multiply color to scene color

From multiplying color, to scene color

Use Custom Depth to
judge whether it is below
water level.

Judge whether it is under water surface
Draw the cross mesh in Custom Depth.

Multiply colors only under the water surface.

Post Process Material Off

Post Process Material On

God ray in water
Light is applied to floating objects, bubbles, and microorganisms in the water,
and they appear as lines.

Volumetric Fog

Volumetric Fog
If you only put it normally, it will be foggy overall.

Volumetric Fog
I want to change the concentration of fog on and off in the water.
High density
Low density

Volume Material
Available for Particle.
The density and color of Volumetric Fog can be controlled from Material.

Volume Material

Volume Material
Range and density for volume

Volume Material

Volume Material
Color

Niagara Particle

Niagara Particle
Added Particles.SpriteSize to Particle Spawn.
Enter the size of the range where you want to
adjust the fog.

Niagara Particle
Volume material assign in render

Volumetric Fog Off

Volumetric Fog On

Other
● Environment Assets
● Lighting

Environment Assets
Megascans Library

Wet material

Wet material
Roughness

Wet material
Get water surface position

Wet material
Gradation from water surface

Wet material
Multiply to roughness

Wet material Off

Wet material On

Lighting
Light only use directional and sky

Lighting
Shadow of Directional Light
Cascade Shadow Area Shadow

Lighting
Sun Position Calculator

Lighting
Enter the latitude, longitude, time zone,
date and time and calculate the position of
the sun.

Lighting
Sun Position Calculator Put on level

Lighting
Get latitude and longitude from
Google Maps.
latitude longitude

Lighting
latitude longitude

Thank you!

Learning Water Graphics in UE4

More Related Content

What's hot

Similar to Learning Water Graphics in UE4

More from エピック・ゲームズ・ジャパン Epic Games Japan

Recently uploaded

Learning Water Graphics in UE4