Click here to watch the video of this speech. https://www.youtube.com/watch?v=Wr974MCYHSU Presented by Hiroyuki Kobayashi (Epic Games Japan) This slide is a presentation material from a study session "UE4 Environment Art Dive" held on December 15, 2019.

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

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

3. #UE4 | @UNREALENGINE
Demo Scene

4. #UE4 | @UNREALENGINE
Cenote
Reference pictures

5. #UE4 | @UNREALENGINE
Goal
● Does not break when viewed from both above and underwater.
● Realistic Water Graphic.

6. #UE4 | @UNREALENGINE
Goal
● Does not break when viewed from both above and underwater.
● Realistic Water Graphic.

7. #UE4 | @UNREALENGINE
Does not break when viewed from both above and underwater.
Can reproduce the state when the
camera is half submerged.

8. #UE4 | @UNREALENGINE
Composition of water mesh
Create a surface facing the camera and simulate the submerged state.

9. #UE4 | @UNREALENGINE
Composition of water mesh
MeshA
For cross

10. #UE4 | @UNREALENGINE
Composition of water mesh
MeshB
For water surface outside

11. #UE4 | @UNREALENGINE
Composition of water mesh
MeshC
For water surface inside

12. #UE4 | @UNREALENGINE
Composition of water mesh
MeshD
For border

13. #UE4 | @UNREALENGINE
Composition of water mesh
Four mesh configurations were used,
because we wanted to decide the translucent sort order exactly.

14. #UE4 | @UNREALENGINE
Water material

15. #UE4 | @UNREALENGINE
Outside water material

16. #UE4 | @UNREALENGINE
Outside water material

17. #UE4 | @UNREALENGINE
Outside water material
Distortion screen UV
Scene Color & Depth & fresnel

18. #UE4 | @UNREALENGINE
Outside water material

19. #UE4 | @UNREALENGINE
Outside water material
Opacity and Refraction pin are not used,
Translucent expression by inserting Scene Color in
Emissive.
Waves create texture sheets in Houdini.

20. #UE4 | @UNREALENGINE
Water animation
Export offset and normal texture sheets from Houdini Ocean.

21. #UE4 | @UNREALENGINE
Water animation
Export offset and normal texture sheets from Houdini Ocean.

22. #UE4 | @UNREALENGINE
Outside water material
Distortion Screen UV

23. #UE4 | @UNREALENGINE
Outside water material
Add Pixel Normal for Screen UV
Physically incorrect

24. #UE4 | @UNREALENGINE
Outside water material
Scene Color & Depth & Fresnel

25. #UE4 | @UNREALENGINE
Outside water material

26. #UE4 | @UNREALENGINE
Inside water material

27. #UE4 | @UNREALENGINE
Inside water material

28. #UE4 | @UNREALENGINE
Inside water material
Distortion Screen UV
Scene Color
Total Reflection

29. #UE4 | @UNREALENGINE
Inside water material
Distortion Screen UV
Scene Color

30. #UE4 | @UNREALENGINE
Cross water material

31. #UE4 | @UNREALENGINE
Cross water material
The material is simply transparent.
Draw on Custom Depth and judge whether it is below
the water surface.

32. #UE4 | @UNREALENGINE
Border material

33. #UE4 | @UNREALENGINE
Border material

34. #UE4 | @UNREALENGINE
Border material
Borders gradation
Scene Color

35. #UE4 | @UNREALENGINE
Border material
Borders gradation

36. #UE4 | @UNREALENGINE
Border material
Make gradation from UV opened rectangle.

37. #UE4 | @UNREALENGINE
Border material
Make gradation from UV opened rectangle
h

38. #UE4 | @UNREALENGINE
Border material
Scene Color

39. #UE4 | @UNREALENGINE
Border material
Distort scene colors using border meshes gradation.

40. #UE4 | @UNREALENGINE
Goal
● Does not break when viewed from both above and underwater.
● Realistic Water Graphic.

41. #UE4 | @UNREALENGINE
Goal
● Does not break when viewed from both above and underwater.
● Realistic Water Graphic.

42. #UE4 | @UNREALENGINE
How I made the water effect

43. #UE4 | @UNREALENGINE
Add elements from nothing.

44. #UE4 | @UNREALENGINE
Water reflection and refraction

45. #UE4 | @UNREALENGINE
Caustics

46. #UE4 | @UNREALENGINE
Color subtraction

47. #UE4 | @UNREALENGINE
God ray

48. #UE4 | @UNREALENGINE
Before After

49. #UE4 | @UNREALENGINE
Inside water component
● Water reflection and refraction
● Caustics
● Color subtruction
● God ray

50. #UE4 | @UNREALENGINE
Inside water component
● Water reflection and refraction
● Caustics
● Color subtruction
● God ray

51. #UE4 | @UNREALENGINE
Water Reflection and Refraction

52. #UE4 | @UNREALENGINE
Water Reflection and Refraction
Why does water looks like a mirror when inside water?

53. #UE4 | @UNREALENGINE
Angle of incidence
Angle of reflection
Angle of refraction

54. #UE4 | @UNREALENGINE
Air
Water

55. #UE4 | @UNREALENGINE
Ray
When the ray comes in ...

56. #UE4 | @UNREALENGINE
Draw a line perpendicular
to the surface from the
hit point of ray.
Ray

57. #UE4 | @UNREALENGINE
Angle of incidence

58. #UE4 | @UNREALENGINE
Angle of reflection

59. #UE4 | @UNREALENGINE
Angle of refraction

60. #UE4 | @UNREALENGINE
In the case of air to water
Air
Water

61. #UE4 | @UNREALENGINE
In the case of water to air

62. #UE4 | @UNREALENGINE

63. #UE4 | @UNREALENGINE
Angle of incidence

64. #UE4 | @UNREALENGINE
Angle of reflection

65. #UE4 | @UNREALENGINE
Angle of refraction
In the case of water to air,
The angle of refraction is
greater than the angle of
incidence.

66. #UE4 | @UNREALENGINE
Critical angle
90°

67. #UE4 | @UNREALENGINE
Total reflection
When the angle of
incidence exceeds the
critical angle,
Reflects all ray.

68. #UE4 | @UNREALENGINE
Reproduce total reflection with UE4

69. #UE4 | @UNREALENGINE
Planar Reflection

70. #UE4 | @UNREALENGINE
Planar Reflection

71. #UE4 | @UNREALENGINE
Calculate critical angle in material

72. #UE4 | @UNREALENGINE
About 48.6°
Critical angle
In case of water to air
48.6°

73. #UE4 | @UNREALENGINE
Let's check the
angle of incidence
48.6°

74. #UE4 | @UNREALENGINE
Vertical line form
water plane
Replace to Pixel Normal
Pixel
Normal

75. #UE4 | @UNREALENGINE
Ray vector
Replace to
Camera Vector
Camera
Vector

76. #UE4 | @UNREALENGINE
Find if the angle between
two vectors is greater
than 48.6 degrees.

77. #UE4 | @UNREALENGINE
Outside water material

78. #UE4 | @UNREALENGINE
Critical angle mask
Outside water material

79. #UE4 | @UNREALENGINE
Outside water material
Find the angle between two
vectors by dot product.

80. #UE4 | @UNREALENGINE
臨界角マスク
Outside water material
h
Critical angle mask

81. #UE4 | @UNREALENGINE
Outside water material
Multiply to scene color
Critical angle mask

82. #UE4 | @UNREALENGINE
Outside water material
Mirror parameters
Critical angle mask

83. #UE4 | @UNREALENGINE

84. #UE4 | @UNREALENGINE
Inside water component
● Water reflection and refraction
● Caustics
● Color subtruction
● God ray

85. #UE4 | @UNREALENGINE
Inside water component
● Water reflection and refraction
● Caustics
● Color subtruction
● God ray

86. #UE4 | @UNREALENGINE
Caustics
A pattern formed by light converging due to the
effects of reflection and refraction.

87. #UE4 | @UNREALENGINE
How is this pattern made?

88. #UE4 | @UNREALENGINE
Return to the previous picture.

89. #UE4 | @UNREALENGINE

90. #UE4 | @UNREALENGINE
What happens if the water surface is wavy?

91. #UE4 | @UNREALENGINE
Air
Water
Ground

92. #UE4 | @UNREALENGINE
Hit water surface

93. #UE4 | @UNREALENGINE
Refract

94. #UE4 | @UNREALENGINE
Hit inside water ground

95. #UE4 | @UNREALENGINE
Places where light is
concentrated become
brighter.

96. #UE4 | @UNREALENGINE
Bright

97. #UE4 | @UNREALENGINE
Bright
Dark

98. #UE4 | @UNREALENGINE
Bright

99. #UE4 | @UNREALENGINE
Bright
Dark

100. #UE4 | @UNREALENGINE
Let’s make it !

101. #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini

102. #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini

103. #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini
Make wave use Ocean Simuration

104. #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini
Make plane grid

105. #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini
Transfer normal to plane

106. #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini
Calculate refraction vector

107. #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini
Move vertex to refraction vector

108. #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini
Transfer overlap to Vertex Color

109. #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini
Rendering to texture sheets

110. #UE4 | @UNREALENGINE
Setup in UE4

111. #UE4 | @UNREALENGINE
Light Function
Texture sheets play in material.
Applies to Directional Light.

112. #UE4 | @UNREALENGINE
Light Function
Animate the texture sheets created in Houdini with the Flip Book node.

113. #UE4 | @UNREALENGINE
Light Function
Animate the texture sheets created in Houdini with the Flip Book node.

114. #UE4 | @UNREALENGINE
Light Function Off

115. #UE4 | @UNREALENGINE
Light Function On

116. #UE4 | @UNREALENGINE
Inside water component
● Water reflection and refraction
● Caustics
● Color subtruction
● God ray

117. #UE4 | @UNREALENGINE
Inside water component
● Water reflection and refraction
● Caustics
● Color subtruction
● God ray

118. #UE4 | @UNREALENGINE
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.

119. #UE4 | @UNREALENGINE
Reproduced in post process material.

120. #UE4 | @UNREALENGINE
Post Process Material

121. #UE4 | @UNREALENGINE
Post Process Material
Depth
Use Custom Depth to
judge whether it is below
water level.
Multiply color to scene color

122. #UE4 | @UNREALENGINE
Post Process Material
Depth

123. #UE4 | @UNREALENGINE
Distance from camera

124. #UE4 | @UNREALENGINE
Distance from water plane

125. #UE4 | @UNREALENGINE
Post Process Material
Multiply color to scene color

126. #UE4 | @UNREALENGINE
From multiplying color, to scene color

127. #UE4 | @UNREALENGINE
Post Process Material
Use Custom Depth to
judge whether it is below
water level.

128. #UE4 | @UNREALENGINE
Judge whether it is under water surface
Draw the cross mesh in Custom Depth.

129. #UE4 | @UNREALENGINE
Judge whether it is under water surface

130. #UE4 | @UNREALENGINE
Judge whether it is under water surface
Multiply colors only under the water surface.

131. #UE4 | @UNREALENGINE
Post Process Material Off

132. #UE4 | @UNREALENGINE
Post Process Material On

133. #UE4 | @UNREALENGINE
Inside water component
● Water reflection and refraction
● Caustics
● Color subtruction
● God ray

134. #UE4 | @UNREALENGINE
Inside water component
● Water reflection and refraction
● Caustics
● Color subtruction
● God ray

135. #UE4 | @UNREALENGINE
God ray in water
Light is applied to floating objects, bubbles, and microorganisms in the water,
and they appear as lines.

136. #UE4 | @UNREALENGINE
Volumetric Fog

137. #UE4 | @UNREALENGINE
Volumetric Fog
If you only put it normally, it will be foggy overall.

138. #UE4 | @UNREALENGINE
Volumetric Fog
I want to change the concentration of fog on and off in the water.
High density
Low density

139. #UE4 | @UNREALENGINE
Volume Material
Available for Particle.
The density and color of Volumetric Fog can be controlled from Material.

140. #UE4 | @UNREALENGINE
Volume Material

141. #UE4 | @UNREALENGINE
Volume Material
Range and density for volume

142. #UE4 | @UNREALENGINE
Volume Material
Judge whether it is under water surface

143. #UE4 | @UNREALENGINE
Volume Material
Color

144. #UE4 | @UNREALENGINE
Niagara Particle

145. #UE4 | @UNREALENGINE
Niagara Particle
Added Particles.SpriteSize to Particle Spawn.
Enter the size of the range where you want to
adjust the fog.

146. #UE4 | @UNREALENGINE
Niagara Particle
Volume material assign in render

147. #UE4 | @UNREALENGINE
Volumetric Fog Off

148. #UE4 | @UNREALENGINE
Volumetric Fog On

149. #UE4 | @UNREALENGINE
Other
● Environment Assets
● Lighting

150. #UE4 | @UNREALENGINE
Environment Assets
Megascans Library

151. #UE4 | @UNREALENGINE
Environment Assets
Megascans Library

152. #UE4 | @UNREALENGINE
Wet material

153. #UE4 | @UNREALENGINE
Wet material
Roughness

154. #UE4 | @UNREALENGINE
Wet material

155. #UE4 | @UNREALENGINE
Wet material
Get water surface position

156. #UE4 | @UNREALENGINE
Wet material
Gradation from water surface

157. #UE4 | @UNREALENGINE
Wet material
Multiply to roughness

158. #UE4 | @UNREALENGINE
Wet material Off

159. #UE4 | @UNREALENGINE
Wet material On

160. #UE4 | @UNREALENGINE
Lighting
Light only use directional and sky

161. #UE4 | @UNREALENGINE
Lighting
Shadow of Directional Light
Cascade Shadow Area Shadow

162. #UE4 | @UNREALENGINE
Lighting
Shadow of Directional Light
Cascade Shadow Area Shadow

163. #UE4 | @UNREALENGINE
Lighting
Sun Position Calculator

164. #UE4 | @UNREALENGINE
Lighting
Enter the latitude, longitude, time zone,
date and time and calculate the position of
the sun.
Sun Position Calculator

165. #UE4 | @UNREALENGINE
Lighting
Sun Position Calculator Put on level

166. #UE4 | @UNREALENGINE
Lighting
Get latitude and longitude from
Google Maps.
latitude longitude
Sun Position Calculator

167. #UE4 | @UNREALENGINE
Lighting
Sun Position Calculator

168. #UE4 | @UNREALENGINE
Lighting
Sun Position Calculator
latitude longitude

169. #UE4 | @UNREALENGINE
Lighting
Sun Position Calculator

170. #UE4 | @UNREALENGINE
Thank you!