Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Learning Water Graphics in UE4

1.324 visualizaciones

Publicado el

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.

Publicado en: Medio ambiente
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Learning Water Graphics in UE4

  1. 1. Learning Water Graphics in UE4 Epic Games Japan / Technical Artist Hiroyuki Kobayashi
  2. 2. #UE4 | @UNREALENGINE Self Introduction Hiroyuki Kobayashi Usually work on UE4 support, such as answering UDN. Twitter / @hannover_bloss
  3. 3. #UE4 | @UNREALENGINE Demo Scene
  4. 4. #UE4 | @UNREALENGINE Cenote Reference pictures
  5. 5. #UE4 | @UNREALENGINE Goal ● Does not break when viewed from both above and underwater. ● Realistic Water Graphic.
  6. 6. #UE4 | @UNREALENGINE Goal ● Does not break when viewed from both above and underwater. ● Realistic Water Graphic.
  7. 7. #UE4 | @UNREALENGINE Does not break when viewed from both above and underwater. Can reproduce the state when the camera is half submerged.
  8. 8. #UE4 | @UNREALENGINE Composition of water mesh Create a surface facing the camera and simulate the submerged state.
  9. 9. #UE4 | @UNREALENGINE Composition of water mesh MeshA For cross
  10. 10. #UE4 | @UNREALENGINE Composition of water mesh MeshB For water surface outside
  11. 11. #UE4 | @UNREALENGINE Composition of water mesh MeshC For water surface inside
  12. 12. #UE4 | @UNREALENGINE Composition of water mesh MeshD For border
  13. 13. #UE4 | @UNREALENGINE Composition of water mesh Four mesh configurations were used, because we wanted to decide the translucent sort order exactly.
  14. 14. #UE4 | @UNREALENGINE Water material
  15. 15. #UE4 | @UNREALENGINE Outside water material
  16. 16. #UE4 | @UNREALENGINE Outside water material
  17. 17. #UE4 | @UNREALENGINE Outside water material Distortion screen UV Scene Color & Depth & fresnel
  18. 18. #UE4 | @UNREALENGINE Outside water material
  19. 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. 20. #UE4 | @UNREALENGINE Water animation Export offset and normal texture sheets from Houdini Ocean.
  21. 21. #UE4 | @UNREALENGINE Water animation Export offset and normal texture sheets from Houdini Ocean.
  22. 22. #UE4 | @UNREALENGINE Outside water material Distortion Screen UV
  23. 23. #UE4 | @UNREALENGINE Outside water material Add Pixel Normal for Screen UV Physically incorrect
  24. 24. #UE4 | @UNREALENGINE Outside water material Scene Color & Depth & Fresnel
  25. 25. #UE4 | @UNREALENGINE Outside water material
  26. 26. #UE4 | @UNREALENGINE Inside water material
  27. 27. #UE4 | @UNREALENGINE Inside water material
  28. 28. #UE4 | @UNREALENGINE Inside water material Distortion Screen UV Scene Color Total Reflection
  29. 29. #UE4 | @UNREALENGINE Inside water material Distortion Screen UV Scene Color
  30. 30. #UE4 | @UNREALENGINE Cross water material
  31. 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. 32. #UE4 | @UNREALENGINE Border material
  33. 33. #UE4 | @UNREALENGINE Border material
  34. 34. #UE4 | @UNREALENGINE Border material Borders gradation Scene Color
  35. 35. #UE4 | @UNREALENGINE Border material Borders gradation
  36. 36. #UE4 | @UNREALENGINE Border material Make gradation from UV opened rectangle.
  37. 37. #UE4 | @UNREALENGINE Border material Make gradation from UV opened rectangle h
  38. 38. #UE4 | @UNREALENGINE Border material Scene Color
  39. 39. #UE4 | @UNREALENGINE Border material Distort scene colors using border meshes gradation.
  40. 40. #UE4 | @UNREALENGINE Goal ● Does not break when viewed from both above and underwater. ● Realistic Water Graphic.
  41. 41. #UE4 | @UNREALENGINE Goal ● Does not break when viewed from both above and underwater. ● Realistic Water Graphic.
  42. 42. #UE4 | @UNREALENGINE How I made the water effect
  43. 43. #UE4 | @UNREALENGINE Add elements from nothing.
  44. 44. #UE4 | @UNREALENGINE Water reflection and refraction
  45. 45. #UE4 | @UNREALENGINE Caustics
  46. 46. #UE4 | @UNREALENGINE Color subtraction
  47. 47. #UE4 | @UNREALENGINE God ray
  48. 48. #UE4 | @UNREALENGINE Before After
  49. 49. #UE4 | @UNREALENGINE Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray
  50. 50. #UE4 | @UNREALENGINE Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray
  51. 51. #UE4 | @UNREALENGINE Water Reflection and Refraction
  52. 52. #UE4 | @UNREALENGINE Water Reflection and Refraction Why does water looks like a mirror when inside water?
  53. 53. #UE4 | @UNREALENGINE Angle of incidence Angle of reflection Angle of refraction
  54. 54. #UE4 | @UNREALENGINE Air Water
  55. 55. #UE4 | @UNREALENGINE Ray When the ray comes in ...
  56. 56. #UE4 | @UNREALENGINE Draw a line perpendicular to the surface from the hit point of ray. Ray
  57. 57. #UE4 | @UNREALENGINE Angle of incidence
  58. 58. #UE4 | @UNREALENGINE Angle of reflection
  59. 59. #UE4 | @UNREALENGINE Angle of refraction
  60. 60. #UE4 | @UNREALENGINE In the case of air to water Air Water
  61. 61. #UE4 | @UNREALENGINE In the case of water to air
  62. 62. #UE4 | @UNREALENGINE
  63. 63. #UE4 | @UNREALENGINE Angle of incidence
  64. 64. #UE4 | @UNREALENGINE Angle of reflection
  65. 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. 66. #UE4 | @UNREALENGINE Critical angle 90°
  67. 67. #UE4 | @UNREALENGINE Total reflection When the angle of incidence exceeds the critical angle, Reflects all ray.
  68. 68. #UE4 | @UNREALENGINE Reproduce total reflection with UE4
  69. 69. #UE4 | @UNREALENGINE Planar Reflection
  70. 70. #UE4 | @UNREALENGINE Planar Reflection
  71. 71. #UE4 | @UNREALENGINE Calculate critical angle in material
  72. 72. #UE4 | @UNREALENGINE About 48.6° Critical angle In case of water to air 48.6°
  73. 73. #UE4 | @UNREALENGINE Let's check the angle of incidence 48.6°
  74. 74. #UE4 | @UNREALENGINE Vertical line form water plane Replace to Pixel Normal Pixel Normal
  75. 75. #UE4 | @UNREALENGINE Ray vector Replace to Camera Vector Camera Vector
  76. 76. #UE4 | @UNREALENGINE Find if the angle between two vectors is greater than 48.6 degrees.
  77. 77. #UE4 | @UNREALENGINE Outside water material
  78. 78. #UE4 | @UNREALENGINE Critical angle mask Outside water material
  79. 79. #UE4 | @UNREALENGINE Outside water material Find the angle between two vectors by dot product.
  80. 80. #UE4 | @UNREALENGINE 臨界角マスク Outside water material h Critical angle mask
  81. 81. #UE4 | @UNREALENGINE Outside water material Multiply to scene color Critical angle mask
  82. 82. #UE4 | @UNREALENGINE Outside water material Mirror parameters Critical angle mask
  83. 83. #UE4 | @UNREALENGINE
  84. 84. #UE4 | @UNREALENGINE Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray
  85. 85. #UE4 | @UNREALENGINE Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray
  86. 86. #UE4 | @UNREALENGINE Caustics A pattern formed by light converging due to the effects of reflection and refraction.
  87. 87. #UE4 | @UNREALENGINE How is this pattern made?
  88. 88. #UE4 | @UNREALENGINE Return to the previous picture.
  89. 89. #UE4 | @UNREALENGINE
  90. 90. #UE4 | @UNREALENGINE What happens if the water surface is wavy?
  91. 91. #UE4 | @UNREALENGINE Air Water Ground
  92. 92. #UE4 | @UNREALENGINE Hit water surface
  93. 93. #UE4 | @UNREALENGINE Refract
  94. 94. #UE4 | @UNREALENGINE Hit inside water ground
  95. 95. #UE4 | @UNREALENGINE Places where light is concentrated become brighter.
  96. 96. #UE4 | @UNREALENGINE Bright
  97. 97. #UE4 | @UNREALENGINE Bright Dark
  98. 98. #UE4 | @UNREALENGINE Bright
  99. 99. #UE4 | @UNREALENGINE Bright Dark
  100. 100. #UE4 | @UNREALENGINE Let’s make it !
  101. 101. #UE4 | @UNREALENGINE Calculate and make texture sheet in Houdini
  102. 102. #UE4 | @UNREALENGINE Calculate and make texture sheet in Houdini
  103. 103. #UE4 | @UNREALENGINE Calculate and make texture sheet in Houdini Make wave use Ocean Simuration
  104. 104. #UE4 | @UNREALENGINE Calculate and make texture sheet in Houdini Make plane grid
  105. 105. #UE4 | @UNREALENGINE Calculate and make texture sheet in Houdini Transfer normal to plane
  106. 106. #UE4 | @UNREALENGINE Calculate and make texture sheet in Houdini Calculate refraction vector
  107. 107. #UE4 | @UNREALENGINE Calculate and make texture sheet in Houdini Move vertex to refraction vector
  108. 108. #UE4 | @UNREALENGINE Calculate and make texture sheet in Houdini Transfer overlap to Vertex Color
  109. 109. #UE4 | @UNREALENGINE Calculate and make texture sheet in Houdini Rendering to texture sheets
  110. 110. #UE4 | @UNREALENGINE Setup in UE4
  111. 111. #UE4 | @UNREALENGINE Light Function Texture sheets play in material. Applies to Directional Light.
  112. 112. #UE4 | @UNREALENGINE Light Function Animate the texture sheets created in Houdini with the Flip Book node.
  113. 113. #UE4 | @UNREALENGINE Light Function Animate the texture sheets created in Houdini with the Flip Book node.
  114. 114. #UE4 | @UNREALENGINE Light Function Off
  115. 115. #UE4 | @UNREALENGINE Light Function On
  116. 116. #UE4 | @UNREALENGINE Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray
  117. 117. #UE4 | @UNREALENGINE Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray
  118. 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. 119. #UE4 | @UNREALENGINE Reproduced in post process material.
  120. 120. #UE4 | @UNREALENGINE Post Process Material
  121. 121. #UE4 | @UNREALENGINE Post Process Material Depth Use Custom Depth to judge whether it is below water level. Multiply color to scene color
  122. 122. #UE4 | @UNREALENGINE Post Process Material Depth
  123. 123. #UE4 | @UNREALENGINE Distance from camera
  124. 124. #UE4 | @UNREALENGINE Distance from water plane
  125. 125. #UE4 | @UNREALENGINE Post Process Material Multiply color to scene color
  126. 126. #UE4 | @UNREALENGINE From multiplying color, to scene color
  127. 127. #UE4 | @UNREALENGINE Post Process Material Use Custom Depth to judge whether it is below water level.
  128. 128. #UE4 | @UNREALENGINE Judge whether it is under water surface Draw the cross mesh in Custom Depth.
  129. 129. #UE4 | @UNREALENGINE Judge whether it is under water surface
  130. 130. #UE4 | @UNREALENGINE Judge whether it is under water surface Multiply colors only under the water surface.
  131. 131. #UE4 | @UNREALENGINE Post Process Material Off
  132. 132. #UE4 | @UNREALENGINE Post Process Material On
  133. 133. #UE4 | @UNREALENGINE Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray
  134. 134. #UE4 | @UNREALENGINE Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray
  135. 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. 136. #UE4 | @UNREALENGINE Volumetric Fog
  137. 137. #UE4 | @UNREALENGINE Volumetric Fog If you only put it normally, it will be foggy overall.
  138. 138. #UE4 | @UNREALENGINE Volumetric Fog I want to change the concentration of fog on and off in the water. High density Low density
  139. 139. #UE4 | @UNREALENGINE Volume Material Available for Particle. The density and color of Volumetric Fog can be controlled from Material.
  140. 140. #UE4 | @UNREALENGINE Volume Material
  141. 141. #UE4 | @UNREALENGINE Volume Material Range and density for volume
  142. 142. #UE4 | @UNREALENGINE Volume Material Judge whether it is under water surface
  143. 143. #UE4 | @UNREALENGINE Volume Material Color
  144. 144. #UE4 | @UNREALENGINE Niagara Particle
  145. 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. 146. #UE4 | @UNREALENGINE Niagara Particle Volume material assign in render
  147. 147. #UE4 | @UNREALENGINE Volumetric Fog Off
  148. 148. #UE4 | @UNREALENGINE Volumetric Fog On
  149. 149. #UE4 | @UNREALENGINE Other ● Environment Assets ● Lighting
  150. 150. #UE4 | @UNREALENGINE Environment Assets Megascans Library
  151. 151. #UE4 | @UNREALENGINE Environment Assets Megascans Library
  152. 152. #UE4 | @UNREALENGINE Wet material
  153. 153. #UE4 | @UNREALENGINE Wet material Roughness
  154. 154. #UE4 | @UNREALENGINE Wet material
  155. 155. #UE4 | @UNREALENGINE Wet material Get water surface position
  156. 156. #UE4 | @UNREALENGINE Wet material Gradation from water surface
  157. 157. #UE4 | @UNREALENGINE Wet material Multiply to roughness
  158. 158. #UE4 | @UNREALENGINE Wet material Off
  159. 159. #UE4 | @UNREALENGINE Wet material On
  160. 160. #UE4 | @UNREALENGINE Lighting Light only use directional and sky
  161. 161. #UE4 | @UNREALENGINE Lighting Shadow of Directional Light Cascade Shadow Area Shadow
  162. 162. #UE4 | @UNREALENGINE Lighting Shadow of Directional Light Cascade Shadow Area Shadow
  163. 163. #UE4 | @UNREALENGINE Lighting Sun Position Calculator
  164. 164. #UE4 | @UNREALENGINE Lighting Enter the latitude, longitude, time zone, date and time and calculate the position of the sun. Sun Position Calculator
  165. 165. #UE4 | @UNREALENGINE Lighting Sun Position Calculator Put on level
  166. 166. #UE4 | @UNREALENGINE Lighting Get latitude and longitude from Google Maps. latitude longitude Sun Position Calculator
  167. 167. #UE4 | @UNREALENGINE Lighting Sun Position Calculator
  168. 168. #UE4 | @UNREALENGINE Lighting Sun Position Calculator latitude longitude
  169. 169. #UE4 | @UNREALENGINE Lighting Sun Position Calculator
  170. 170. #UE4 | @UNREALENGINE Thank you!

×