Learning Water Graphics in UE4【UE4 Environment Art Dive 2019】

29.4K Views

June 15, 20

スライド概要

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.

日本語版はこちら
https://www.docswell.com/s/EpicGamesJapan/Z4YNQK-UE4_EnviromentAD19_Water

profile-image

Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

Demo Scene #UE4 | @UNREALENGINE

4.

Cenote Reference pictures #UE4 | @UNREALENGINE

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

Water material #UE4 | @UNREALENGINE

15.

Outside water material #UE4 | @UNREALENGINE

16.

Outside water material #UE4 | @UNREALENGINE

17.

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

18.

Outside water material #UE4 | @UNREALENGINE

19.

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

20.

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

21.

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

22.

Outside water material Distortion Screen UV #UE4 | @UNREALENGINE

23.

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

24.

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

25.

Outside water material #UE4 | @UNREALENGINE

26.

Inside water material #UE4 | @UNREALENGINE

27.

Inside water material #UE4 | @UNREALENGINE

28.

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

29.

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

30.

Cross water material #UE4 | @UNREALENGINE

31.

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

32.

Border material #UE4 | @UNREALENGINE

33.

Border material #UE4 | @UNREALENGINE

34.

Border material Scene Color Borders gradation #UE4 | @UNREALENGINE

35.

Border material Borders gradation #UE4 | @UNREALENGINE

36.

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

37.

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

38.

Border material Scene Color #UE4 | @UNREALENGINE

39.

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

40.

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

41.

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

42.

How I made the water effect #UE4 | @UNREALENGINE

43.

Add elements from nothing. #UE4 | @UNREALENGINE

44.

Water reflection and refraction #UE4 | @UNREALENGINE

45.

Caustics #UE4 | @UNREALENGINE

46.

Color subtraction #UE4 | @UNREALENGINE

47.

God ray #UE4 | @UNREALENGINE

48.

Before #UE4 | @UNREALENGINE After

49.

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

50.

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

51.

Water Reflection and Refraction #UE4 | @UNREALENGINE

52.

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

53.

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

54.

Air Water #UE4 | @UNREALENGINE

55.

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

56.

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

57.

Angle of incidence #UE4 | @UNREALENGINE

58.

Angle of reflection #UE4 | @UNREALENGINE

59.

Angle of refraction #UE4 | @UNREALENGINE

60.

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

61.

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

62.

#UE4 | @UNREALENGINE

63.

Angle of incidence #UE4 | @UNREALENGINE

64.

Angle of reflection #UE4 | @UNREALENGINE

65.

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

66.

90° Critical angle #UE4 | @UNREALENGINE

67.

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

68.

Reproduce total reflection with UE4 #UE4 | @UNREALENGINE

69.

Planar Reflection #UE4 | @UNREALENGINE

70.

Planar Reflection #UE4 | @UNREALENGINE

71.

Calculate critical angle in material #UE4 | @UNREALENGINE

72.

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

73.

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

74.

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

75.

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

76.

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

77.

Outside water material #UE4 | @UNREALENGINE

78.

Outside water material Critical angle mask #UE4 | @UNREALENGINE

79.

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

80.

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

81.

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

82.

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

83.

#UE4 | @UNREALENGINE

84.

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

85.

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

86.

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

87.

How is this pattern made? #UE4 | @UNREALENGINE

88.

Return to the previous picture. #UE4 | @UNREALENGINE

89.

#UE4 | @UNREALENGINE

90.

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

91.

Air Water Ground #UE4 | @UNREALENGINE

92.

Hit water surface #UE4 | @UNREALENGINE

93.

Refract #UE4 | @UNREALENGINE

94.

Hit inside water ground #UE4 | @UNREALENGINE

95.

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

96.

Bright #UE4 | @UNREALENGINE

97.

Bright Dark #UE4 | @UNREALENGINE

98.

Bright #UE4 | @UNREALENGINE

99.

Bright Dark #UE4 | @UNREALENGINE

100.

Let’s make it ! #UE4 | @UNREALENGINE

101.

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

102.

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

103.

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

104.

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

105.

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

106.

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

107.

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

108.

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

109.

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

110.

Setup in UE4 #UE4 | @UNREALENGINE

111.

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

112.

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

113.

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

114.

Light Function Off #UE4 | @UNREALENGINE

115.

Light Function On #UE4 | @UNREALENGINE

116.

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

117.

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

118.

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

119.

Reproduced in post process material. #UE4 | @UNREALENGINE

120.

Post Process Material #UE4 | @UNREALENGINE

121.

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

122.

Post Process Material Depth #UE4 | @UNREALENGINE

123.

Distance from camera #UE4 | @UNREALENGINE

124.

Distance from water plane #UE4 | @UNREALENGINE

125.

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

126.

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

127.

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

128.

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

129.

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

130.

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

131.

Post Process Material Off #UE4 | @UNREALENGINE

132.

Post Process Material On #UE4 | @UNREALENGINE

133.

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

134.

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

135.

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

136.

Volumetric Fog #UE4 | @UNREALENGINE

137.

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

138.

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

139.

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

140.

Volume Material #UE4 | @UNREALENGINE

141.

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

142.

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

143.

Volume Material Color #UE4 | @UNREALENGINE

144.

Niagara Particle #UE4 | @UNREALENGINE

145.

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

146.

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

147.

Volumetric Fog Off #UE4 | @UNREALENGINE

148.

Volumetric Fog On #UE4 | @UNREALENGINE

149.

Other ● Environment Assets ● Lighting #UE4 | @UNREALENGINE

150.

Environment Assets Megascans Library #UE4 | @UNREALENGINE

151.

Environment Assets Megascans Library #UE4 | @UNREALENGINE

152.

Wet material #UE4 | @UNREALENGINE

153.

Wet material #UE4 | @UNREALENGINE Roughness

154.

Wet material #UE4 | @UNREALENGINE

155.

Wet material Get water surface position #UE4 | @UNREALENGINE

156.

Wet material Gradation from water surface #UE4 | @UNREALENGINE

157.

Wet material Multiply to roughness #UE4 | @UNREALENGINE

158.

Wet material Off #UE4 | @UNREALENGINE

159.

Wet material On #UE4 | @UNREALENGINE

160.

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

161.

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

162.

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

163.

Lighting Sun Position Calculator #UE4 | @UNREALENGINE

164.

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

165.

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

166.

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

167.

Lighting Sun Position Calculator #UE4 | @UNREALENGINE

168.

Lighting Sun Position Calculator latitude #UE4 | @UNREALENGINE longitude

169.

Lighting Sun Position Calculator #UE4 | @UNREALENGINE

170.

Thank you! #UE4 | @UNREALENGINE