Learning Water Graphics in UE4【UE4 Environment Art Dive 2019】
35.8K 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
Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/
関連スライド
各ページのテキスト
Learning Water Graphics in UE4 Epic Games Japan / Technical Artist Hiroyuki Kobayashi
Self Introduction Hiroyuki Kobayashi Usually work on UE4 support, such as answering UDN. Twitter / @hannover_bloss #UE4 | @UNREALENGINE
Demo Scene #UE4 | @UNREALENGINE
Cenote Reference pictures #UE4 | @UNREALENGINE
Goal ● Does not break when viewed from both above and underwater. ● Realistic Water Graphic. #UE4 | @UNREALENGINE
Goal ● Does not break when viewed from both above and underwater. ● Realistic Water Graphic. #UE4 | @UNREALENGINE
Does not break when viewed from both above and underwater. Can reproduce the state when the camera is half submerged. #UE4 | @UNREALENGINE
Composition of water mesh Create a surface facing the camera and simulate the submerged state. #UE4 | @UNREALENGINE
Composition of water mesh MeshA For cross #UE4 | @UNREALENGINE
Composition of water mesh MeshB For water surface outside #UE4 | @UNREALENGINE
Composition of water mesh MeshC For water surface inside #UE4 | @UNREALENGINE
Composition of water mesh MeshD For border #UE4 | @UNREALENGINE
Composition of water mesh Four mesh configurations were used, because we wanted to decide the translucent sort order exactly. #UE4 | @UNREALENGINE
Water material #UE4 | @UNREALENGINE
Outside water material #UE4 | @UNREALENGINE
Outside water material #UE4 | @UNREALENGINE
Outside water material Distortion screen UV #UE4 | @UNREALENGINE Scene Color & Depth & fresnel
Outside water material #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. #UE4 | @UNREALENGINE
Water animation Export offset and normal texture sheets from Houdini Ocean. #UE4 | @UNREALENGINE
Water animation Export offset and normal texture sheets from Houdini Ocean. #UE4 | @UNREALENGINE
Outside water material Distortion Screen UV #UE4 | @UNREALENGINE
Outside water material Add Pixel Normal for Screen UV Physically incorrect #UE4 | @UNREALENGINE
Outside water material Scene Color & Depth & Fresnel #UE4 | @UNREALENGINE
Outside water material #UE4 | @UNREALENGINE
Inside water material #UE4 | @UNREALENGINE
Inside water material #UE4 | @UNREALENGINE
Inside water material Total Reflection Distortion Screen UV Scene Color #UE4 | @UNREALENGINE
Inside water material Distortion Screen UV Scene Color #UE4 | @UNREALENGINE
Cross water material #UE4 | @UNREALENGINE
Cross water material The material is simply transparent. Draw on Custom Depth and judge whether it is below the water surface. #UE4 | @UNREALENGINE
Border material #UE4 | @UNREALENGINE
Border material #UE4 | @UNREALENGINE
Border material Scene Color Borders gradation #UE4 | @UNREALENGINE
Border material Borders gradation #UE4 | @UNREALENGINE
Border material Make gradation from UV opened rectangle. #UE4 | @UNREALENGINE
Border material Make gradation from UV opened rectangle h #UE4 | @UNREALENGINE
Border material Scene Color #UE4 | @UNREALENGINE
Border material Distort scene colors using border meshes gradation. #UE4 | @UNREALENGINE
Goal ● Does not break when viewed from both above and underwater. ● Realistic Water Graphic. #UE4 | @UNREALENGINE
Goal ● Does not break when viewed from both above and underwater. ● Realistic Water Graphic. #UE4 | @UNREALENGINE
How I made the water effect #UE4 | @UNREALENGINE
Add elements from nothing. #UE4 | @UNREALENGINE
Water reflection and refraction #UE4 | @UNREALENGINE
Caustics #UE4 | @UNREALENGINE
Color subtraction #UE4 | @UNREALENGINE
God ray #UE4 | @UNREALENGINE
Before #UE4 | @UNREALENGINE After
Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray #UE4 | @UNREALENGINE
Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray #UE4 | @UNREALENGINE
Water Reflection and Refraction #UE4 | @UNREALENGINE
Water Reflection and Refraction Why does water looks like a mirror when inside water? #UE4 | @UNREALENGINE
Angle of incidence Angle of reflection Angle of refraction #UE4 | @UNREALENGINE
Air Water #UE4 | @UNREALENGINE
Ray When the ray comes in ... #UE4 | @UNREALENGINE
Ray Draw a line perpendicular to the surface from the hit point of ray. #UE4 | @UNREALENGINE
Angle of incidence #UE4 | @UNREALENGINE
Angle of reflection #UE4 | @UNREALENGINE
Angle of refraction #UE4 | @UNREALENGINE
Air In the case of air to water Water #UE4 | @UNREALENGINE
In the case of water to air #UE4 | @UNREALENGINE
#UE4 | @UNREALENGINE
Angle of incidence #UE4 | @UNREALENGINE
Angle of reflection #UE4 | @UNREALENGINE
Angle of refraction In the case of water to air, The angle of refraction is greater than the angle of incidence. #UE4 | @UNREALENGINE
90° Critical angle #UE4 | @UNREALENGINE
Total reflection When the angle of incidence exceeds the critical angle, Reflects all ray. #UE4 | @UNREALENGINE
Reproduce total reflection with UE4 #UE4 | @UNREALENGINE
Planar Reflection #UE4 | @UNREALENGINE
Planar Reflection #UE4 | @UNREALENGINE
Calculate critical angle in material #UE4 | @UNREALENGINE
Critical angle In case of water to air About 48.6° 48.6° #UE4 | @UNREALENGINE
Let's check the angle of incidence 48.6° #UE4 | @UNREALENGINE
Vertical line form water plane Replace to Pixel Normal Pixel Normal #UE4 | @UNREALENGINE
Ray vector Replace to Camera Vector Camera Vector #UE4 | @UNREALENGINE
Find if the angle between two vectors is greater than 48.6 degrees. #UE4 | @UNREALENGINE
Outside water material #UE4 | @UNREALENGINE
Outside water material Critical angle mask #UE4 | @UNREALENGINE
Outside water material Find the angle between two vectors by dot product. #UE4 | @UNREALENGINE
Outside water material 臨界角マスク h Critical angle mask #UE4 | @UNREALENGINE
Outside water material Critical angle mask Multiply to scene color #UE4 | @UNREALENGINE
Outside water material Critical angle mask Mirror parameters #UE4 | @UNREALENGINE
#UE4 | @UNREALENGINE
Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray #UE4 | @UNREALENGINE
Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray #UE4 | @UNREALENGINE
Caustics A pattern formed by light converging due to the effects of reflection and refraction. #UE4 | @UNREALENGINE
How is this pattern made? #UE4 | @UNREALENGINE
Return to the previous picture. #UE4 | @UNREALENGINE
#UE4 | @UNREALENGINE
What happens if the water surface is wavy? #UE4 | @UNREALENGINE
Air Water Ground #UE4 | @UNREALENGINE
Hit water surface #UE4 | @UNREALENGINE
Refract #UE4 | @UNREALENGINE
Hit inside water ground #UE4 | @UNREALENGINE
Places where light is concentrated become brighter. #UE4 | @UNREALENGINE
Bright #UE4 | @UNREALENGINE
Bright Dark #UE4 | @UNREALENGINE
Bright #UE4 | @UNREALENGINE
Bright Dark #UE4 | @UNREALENGINE
Let’s make it ! #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini Make wave use Ocean Simuration #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini Make plane grid #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini Transfer normal to plane #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini Calculate refraction vector #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini Move vertex to refraction vector #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini Transfer overlap to Vertex Color #UE4 | @UNREALENGINE
Calculate and make texture sheet in Houdini Rendering to texture sheets #UE4 | @UNREALENGINE
Setup in UE4 #UE4 | @UNREALENGINE
Light Function Texture sheets play in material. Applies to Directional Light. #UE4 | @UNREALENGINE
Light Function Animate the texture sheets created in Houdini with the Flip Book node. #UE4 | @UNREALENGINE
Light Function Animate the texture sheets created in Houdini with the Flip Book node. #UE4 | @UNREALENGINE
Light Function Off #UE4 | @UNREALENGINE
Light Function On #UE4 | @UNREALENGINE
Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray #UE4 | @UNREALENGINE
Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray #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. #UE4 | @UNREALENGINE
Reproduced in post process material. #UE4 | @UNREALENGINE
Post Process Material #UE4 | @UNREALENGINE
Post Process Material Multiply color to scene color Depth Use Custom Depth to judge whether it is below water level. #UE4 | @UNREALENGINE
Post Process Material Depth #UE4 | @UNREALENGINE
Distance from camera #UE4 | @UNREALENGINE
Distance from water plane #UE4 | @UNREALENGINE
Post Process Material Multiply color to scene color #UE4 | @UNREALENGINE
From multiplying color, to scene color #UE4 | @UNREALENGINE
Post Process Material Use Custom Depth to judge whether it is below water level. #UE4 | @UNREALENGINE
Judge whether it is under water surface Draw the cross mesh in Custom Depth. #UE4 | @UNREALENGINE
Judge whether it is under water surface #UE4 | @UNREALENGINE
Judge whether it is under water surface Multiply colors only under the water surface. #UE4 | @UNREALENGINE
Post Process Material Off #UE4 | @UNREALENGINE
Post Process Material On #UE4 | @UNREALENGINE
Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray #UE4 | @UNREALENGINE
Inside water component ● Water reflection and refraction ● Caustics ● Color subtruction ● God ray #UE4 | @UNREALENGINE
God ray in water Light is applied to floating objects, bubbles, and microorganisms in the water, and they appear as lines. #UE4 | @UNREALENGINE
Volumetric Fog #UE4 | @UNREALENGINE
Volumetric Fog If you only put it normally, it will be foggy overall. #UE4 | @UNREALENGINE
Volumetric Fog I want to change the concentration of fog on and off in the water. Low density High density #UE4 | @UNREALENGINE
Volume Material Available for Particle. The density and color of Volumetric Fog can be controlled from Material. #UE4 | @UNREALENGINE
Volume Material #UE4 | @UNREALENGINE
Volume Material Range and density for volume #UE4 | @UNREALENGINE
Volume Material Judge whether it is under water surface #UE4 | @UNREALENGINE
Volume Material Color #UE4 | @UNREALENGINE
Niagara Particle #UE4 | @UNREALENGINE
Niagara Particle Added Particles.SpriteSize to Particle Spawn. Enter the size of the range where you want to adjust the fog. #UE4 | @UNREALENGINE
Niagara Particle Volume material assign in render #UE4 | @UNREALENGINE
Volumetric Fog Off #UE4 | @UNREALENGINE
Volumetric Fog On #UE4 | @UNREALENGINE
Other ● Environment Assets ● Lighting #UE4 | @UNREALENGINE
Environment Assets Megascans Library #UE4 | @UNREALENGINE
Environment Assets Megascans Library #UE4 | @UNREALENGINE
Wet material #UE4 | @UNREALENGINE
Wet material #UE4 | @UNREALENGINE Roughness
Wet material #UE4 | @UNREALENGINE
Wet material Get water surface position #UE4 | @UNREALENGINE
Wet material Gradation from water surface #UE4 | @UNREALENGINE
Wet material Multiply to roughness #UE4 | @UNREALENGINE
Wet material Off #UE4 | @UNREALENGINE
Wet material On #UE4 | @UNREALENGINE
Lighting Light only use directional and sky #UE4 | @UNREALENGINE
Lighting Shadow of Directional Light Cascade Shadow #UE4 | @UNREALENGINE Area Shadow
Lighting Shadow of Directional Light Cascade Shadow #UE4 | @UNREALENGINE Area Shadow
Lighting Sun Position Calculator #UE4 | @UNREALENGINE
Lighting Sun Position Calculator Enter the latitude, longitude, time zone, date and time and calculate the position of the sun. #UE4 | @UNREALENGINE
Lighting Sun Position Calculator #UE4 | @UNREALENGINE Put on level
Lighting Sun Position Calculator Get latitude and longitude from Google Maps. latitude #UE4 | @UNREALENGINE longitude
Lighting Sun Position Calculator #UE4 | @UNREALENGINE
Lighting Sun Position Calculator latitude #UE4 | @UNREALENGINE longitude
Lighting Sun Position Calculator #UE4 | @UNREALENGINE
Thank you! #UE4 | @UNREALENGINE