Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UE4でTranslucencyやUnlitに影を落としたい!

6,401 views

Published on

第7回VFX技術者交流会で講演しました資料になります
https://atnd.org/events/101394

サンプルプロジェクト
https://bit.ly/2PeIfuz

Published in: Engineering
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

UE4でTranslucencyやUnlitに影を落としたい!

  1. 1. 第7回VFX技術者交流会 UE4でTranslucencyやUnlitに 影を落としたい!
  2. 2. Slideshare用壁紙
  3. 3. Slideshare用壁紙
  4. 4. 自己紹介 ● Twitter: @com04 ● ゲームプログラマー ● UE4歴: UE4.4~ ● 作ったものとかは大体twitterモーメントに ○ https://twitter.com/i/moments/847072031048814594 ○ https://twitter.com/i/moments/986364547098275840 4
  5. 5. 自己紹介 ● マーケットプレイスに出品しました − ComMaterialTools - マテリアル検索の便利ツール ● https://www.unrealengine.com/marketplace/commaterialtools ● UE4勉強会 in 大阪 の管理者やってます − 講演したスライド ● マテリアル基礎・初級: https://www.slideshare.net/com044/ue4-80326829 ● UE4でのチーム製作: https://www.slideshare.net/com044/4ue4-in-ue4 ● アニメーション基礎: https://www.slideshare.net/com044/ue4-in-91056422 ● もっとアニメーションBP: https://www.slideshare.net/com044/ue4-in-bp ● UE4 LODs for Optimization -Beginner-: https://www.slideshare.net/com044/lods-for-optimization-beginner ● Volumetric Fogで空間を演出する!: https://www.slideshare.net/com044/ue4-volumetric-fog ● エンジンの内部挙動について: https://www.slideshare.net/com044/ue4-in 5
  6. 6. はじめに 今回のスライドと、サンプルプロジェクトは後日配布します。 (公式のJapanフォーラム辺りで)
  7. 7. もくじ ● 何故TranslucencyやUnlitで影を受ける必要があるのか ● UE4のおさらい ○ Opaque / Translucency, DefaultLit / Unlitの影 ○ Translucencyについて ● Unlitフェイク実装 ● Component単位での簡易的な影 ● DistanceFieldを用いた影 ● ShadowMapでの影 ● さいごに ● 巻末資料 version: UE4.21.0
  8. 8. もくじ ● 何故TranslucencyやUnlitで影を受ける必要があるのか ● UE4のおさらい ○ Opaque / Translucency, DefaultLit / Unlitの影 ○ Translucencyについて ● Unlitフェイク実装 ● Component単位での簡易的な影 ● DistanceFieldを用いた影 ● ShadowMapでの影 ● さいごに ● 巻末資料
  9. 9. 何故TranslucencyやUnlitで影を受ける必要があるのか リアリティ。木の陰をリアルに落とす。
  10. 10. 何故TranslucencyやUnlitで影を受ける必要があるのか 紫とか茶色とか日向に合わせて調整していると、日陰だと 暗過ぎるので調整したい デフォルト
  11. 11. 何故TranslucencyやUnlitで影を受ける必要があるのか 紫とか茶色とか日向に合わせて調整していると、日陰だと 暗過ぎるので調整したい 日陰色調整
  12. 12. 何故TranslucencyやUnlitで影を受ける必要があるのか エミッシブだと、影でも色味は出せるけどシェーディングが 消えてしまう エミッシブで調整
  13. 13. 何故TranslucencyやUnlitで影を受ける必要があるのか 一例です(良い例が作れないのでアートさんお願いします ……)
  14. 14. もくじ ● 何故TranslucencyやUnlitで影を受ける必要があるのか ● UE4のおさらい ○ Opaque / Translucency, DefaultLit / Unlitの影 ○ Translucencyについて ● Unlitフェイク実装 ● Component単位での簡易的な影 ● DistanceFieldを用いた影 ● ShadowMapでの影 ● さいごに ● 巻末資料
  15. 15. UE4のおさらい - Opaque / Translucency, DefaultLit / Unlitの影 Opaque / TranslucencyとDefaultLit / Unlit Blend Mode Shading Model 他メッシュのキャストシャ ドウ 自身のキャストシャ ドウ Opaque Default Lit 受けれる 受けれる Opaque Unlit 受けれない 受けれない Translucency Default Lit Lighting ModeがForward Shadingなら受けれる 受けれる Translucency Unlit 受けれない 受けれない
  16. 16. もくじ ● 何故TranslucencyやUnlitで影を受ける必要があるのか ● UE4のおさらい ○ Opaque / Translucency, DefaultLit / Unlitの影 ○ Translucencyについて ● Unlitフェイク実装 ● Component単位での簡易的な影 ● DistanceFieldを用いた影 ● ShadowMapでの影 ● さいごに ● 巻末資料
  17. 17. UE4のおさらい - Translucencyについて Lighting Mode
  18. 18. UE4のおさらい - Translucencyについて - Lighting Mode TranslucencyのLighting Mode →Translucencyのライティング類の計算方法
  19. 19. UE4のおさらい - Translucencyについて - Lighting Mode Translucency+DefaultLitの場合は、LightingMode次第で 影を受けれる
  20. 20. UE4のおさらい - Translucencyについて - Lighting Mode Translucency+DefaultLitの場合は、LightingMode次第で 影を受けれる
  21. 21. UE4のおさらい - Translucencyについて - Lighting Mode ● Shadine Model: Default Lit ● Lighting Mode: Surface ForwardShading にするとOpaque+DefaultLitのように影を受ける事が出来 る
  22. 22. UE4のおさらい - Translucencyについて - Lighting Mode これでええやん!
  23. 23. UE4のおさらい - Translucencyについて - Lighting Mode ただし、ここ専用でForwardレンダリングに近い描画するの で重い
  24. 24. UE4のおさらい - Translucencyについて - Lighting Mode Forward/Deferredレンダリングに関して知りたい方は下記 資料を! ● 第5回VFX技術者交流会 なぜなにリアルタイムレンダリング - も んしょさん ○ https://www.slideshare.net/SatoshiKodaira/ss-69311865
  25. 25. UE4のおさらい - Translucencyについて - Lighting Mode 他のLightingModeに関しては巻末資料に
  26. 26. UE4のおさらい - Translucencyについて - Lighting Mode Surface ForwardShading ● メリット ○ DefaultLitと同じような影を受けれる ● デメリット ○ 重い ■ 特にパーティクル枚数が多くなってくると顕著
  27. 27. UE4のおさらい - Translucencyについて Lighting Volume
  28. 28. UE4のおさらい - Translucencyについて - Lighting Volume Shading ModelがDefault Litなら周囲の環境の色が反映 される 若干他より暗くなってる
  29. 29. UE4のおさらい - Translucencyについて - Lighting Volume Shading ModelがDefault Litなら周囲の環境の色が反映 される
  30. 30. UE4のおさらい - Translucencyについて - Lighting Volume 明るさの差が大きければ有る程度影の中に居る感は出る
  31. 31. UE4のおさらい - Translucencyについて - Lighting Volume ただし、距離が離れると消え る
  32. 32. UE4のおさらい - Translucencyについて - Lighting Volume → これは Translucent Lighting Volume 半透明ライティング用のボリューム ● 各ライトからの影響をランタイムで計算している
  33. 33. UE4のおさらい - Translucencyについて - Lighting Volume 各ライトに「Affeft Translucent Lighting」フラグが存在 ● この半透明ライティング用のボリュームに影響を与える か
  34. 34. UE4のおさらい - Translucencyについて - Lighting Volume ● コンソールコマンド ○ r.TranslucentLightingVolume ■ 0 で無効 ○ r.TranslucencyLightingVolumeDim ■ ボリュームの解像度。16~128 ○ r.TranslucencyLightingVolumeInnerDistance ○ r.TranslucencyLightingVolumeOuterDistance ■ ボリュームの開始~終了距離。調整してゲームに合った距離を探る
  35. 35. UE4のおさらい - Translucencyについて - Lighting Volume 描画負荷、掛かります GPU Profile上で…… ● ライトの可動性:ムーバブル ○ Inject Translucent Volume ● ライトの可動性:ステーショナリー ○ Filter Translucent Volumeで纏めて →必要無ければライト単位で設定をOFF に →ボリュームの解像度の調整も
  36. 36. UE4のおさらい - Translucencyについて - Lighting Volume Translucent Lighting Volume ● メリット ○ それっぽい日陰やライトの色味が付く ○ デフォルトでON ● デメリット ○ 遠方は消えてしまう ○ 精度や距離を上げようとすると負荷が高くなる ○ 境目でのくっきりした影は出せない
  37. 37. UE4のおさらい - Translucencyについて Self Shadow
  38. 38. UE4のおさらい - Translucencyについて - Self Shadow Translucencyにはセルフシャドウを行う機能がある (セルフシャドウ=    自分自身の影を受ける)
  39. 39. UE4のおさらい - Translucencyについて - Self Shadow Self Shadowなし
  40. 40. UE4のおさらい - Translucencyについて - Self Shadow Self Shadowあり 陰影が濃くなって立体感が 出てる
  41. 41. UE4のおさらい - Translucencyについて - Self Shadow 1. メッシュやパーティクルシステムの 「Lighting」項目の下記にチェックを入 れる ● Cast Shadow ○ 影を落とすか ● Volumetric Translucent Shadow ○ Translucencyなボリュームシャドウを落 とすか
  42. 42. UE4のおさらい - Translucencyについて - Self Shadow 2. マテリアルのLighting Modeを下記のうちどれかにする ● Volumetric NonDirectional ● Volumetric Directional ● Surface Translucency Volume
  43. 43. UE4のおさらい - Translucencyについて - Self Shadow パラメーターの調整はマテリアル内の詳細欄の 「Translucency Self Shadowing」項目
  44. 44. 参考 ● Lit Translucency - 公式ドキュメント ○ https://docs.unrealengine.com/en-us/Engine/Rendering/LightingAndSh adows/LitTranslucency ● Material Properties - 公式ドキュメント ○ https://docs.unrealengine.com/en-us/Engine/Rendering/Materials/Mate rialProperties ●
  45. 45. もくじ ● 何故TranslucencyやUnlitで影を受ける必要があるのか ● UE4のおさらい ○ Opaque / Translucency, DefaultLit / Unlitの影 ○ Translucencyについて ● Unlitフェイク実装 ● Component単位での簡易的な影 ● DistanceFieldを用いた影 ● ShadowMapでの影 ● さいごに ● 巻末資料
  46. 46. Unlitフェイク実装 陰影付けたくないのでUnlitにしたい! けど他のActorの影を受けたい! な時のフェイク実装。
  47. 47. Unlitフェイク実装 もしUnlitに設定している理由が陰影を出したくない、の問 題のみならこちらの方法が使えます。 (この章の方法はTranslucencyでは使えません Default LitUnlit
  48. 48. Unlitフェイク実装 DefaultLitだと影を受けれる。 ただし、ライティングによる陰影が出てしまう Default Lit
  49. 49. Unlitフェイク実装 このDefaultLitのままで、「ライティングによる陰影」をかき 消せばUnlitっぽい見た目で影は拾える Default Lit
  50. 50. Unlitフェイク実装 ちなみに、エミッシブカラーに色を繋ぐだけだと陰影は消え ますが影はあんまり受けれません。 スペキュラーが消える位です。 Default Lit
  51. 51. Unlitフェイク実装 「ライティングによる陰影」は誤差を恐れずに簡略化する と、 ● ライト方向 * 法線 + Indirect ○ Indirectは今回省略します ライト方向 法線
  52. 52. Unlitフェイク実装 ライト方向はどの頂点、ピクセルでも一定。 (今回はディレクショナルライトのみを考慮) ● ライト方向(固定値) * 法線(ピクセル単位でバラバラ) ○ →ピクセル単位で陰影付く
  53. 53. Unlitフェイク実装 ● ライト方向(固定値) * 法線(ピクセル単位でバラバラ) ○ →ピクセル単位で陰影付く ライト方向 法線
  54. 54. Unlitフェイク実装 ● ライト方向(固定値) * 法線(ピクセル単位でバラバラ) ○ →ピクセル単位で陰影付く 1.0 0.0 0.0 -1.0 0.5 0.5 ライト方向*法線
  55. 55. Unlitフェイク実装 すべてのピクセルにおいて、法線を同じ方向に向ければ陰 影は無くなる ● ライト方向(固定値) * 法線(固定値) ○ 陰影=固定値
  56. 56. Unlitフェイク実装 ● ライト方向(固定値) * 法線(ピクセル単位でバラバラ) ○ →ピクセル単位で陰影付く この法線を…… ライト方向 法線
  57. 57. Unlitフェイク実装 ● ライト方向(固定値) * 法線(固定値) ○ 陰影=固定値 ライトの方向に捻じ曲げる! ライト方向 法線
  58. 58. Unlitフェイク実装 ● ライト方向(固定値) * 法線(固定値) ○ 陰影=固定値 全ての頂点、ピクセルで法線が 同じ値になるので、 ライティング結果が同じ値に ライト方向 法線
  59. 59. Unlitフェイク実装 ● ライト方向(固定値) * 法線(固定値) ○ 陰影=固定値 Default Litでも陰影を無くせました 1.0 1.0 1.0 1.0 1.0 ライト方向*法線 1.0
  60. 60. Unlitフェイク実装 法線をライトの方向に捻じ曲げる方法。 マテリアル出力の「ノーマル」で、各ピクセルの法線を全て 同じ方向に向けます
  61. 61. Unlitフェイク実装 Customノードでライト方向を取得できます ● 参考 ○ マテリアルエディタのCustomノードあれこれ - @dgtanakaさん ■ https://qiita.com/dgtanaka/items/13e643fafeb007961601
  62. 62. Unlitフェイク実装 先程のライト方向はワールド空間。 マテリアル出力の「ノーマル」はTangent空間。 なので「TransformVector」ノードで変換します
  63. 63. Unlitフェイク実装 どこから見ても陰影は無くなります(Self Shadowで自身の 影は付いてしまいますが……)
  64. 64. Unlitフェイク実装 他のメッシュからの影も受けることが出来ます
  65. 65. Unlitフェイク実装 ただし、Unlitと違い、ライトの色味の影響は受けてしまいま す
  66. 66. Unlitフェイク実装 他のデメリット GBufferに格納される法線が正常ではなくなります PostProcessMaterial等で使用している場合はおかしくな るかも 元の法線 弄った法線
  67. 67. Unlitフェイク実装 メリット ● ノード2つだけなのでお手軽 ● Opaque/Maskedなら描画負荷的影響も少ない デメリット ● Translucencyには使えない ● PostProcess周りの法線が狂う 両方 ● ライトの色味の影響を受ける
  68. 68. もくじ ● 何故TranslucencyやUnlitで影を受ける必要があるのか ● UE4のおさらい ○ Opaque / Translucency, DefaultLit / Unlitの影 ○ Translucencyについて ● Unlitフェイク実装 ● Component単位での簡易的な影 ● DistanceFieldを用いた影 ● ShadowMapでの影 ● さいごに ● 巻末資料
  69. 69. Component単位での簡易的な影 Component単位=1メッシュ、1パーティクル単位 で影かどうかを判定します
  70. 70. Component単位での簡易的な影 →ピクセル単位のきっちりした影は出ない 日向か日陰か、で大雑把に色味を調整したい。 逆に影の境界線が出てほしくない。とか。
  71. 71. Component単位での簡易的な影 BPでコンポーネントの座標からライト方向に遮蔽物チェッ ク。 遮蔽物ある(=影の中) 遮蔽物がない(=日向) その結果をマテリアルに設定します 遮蔽物 チェック
  72. 72. Component単位での簡易的な影 BPでコンポーネントの座標からライト方向に遮蔽物チェッ ク。 遮蔽物ある(=影の中) 遮蔽物がない(=日向) その結果をマテリアルに設定します 遮蔽物 チェック 何かに遮蔽された =影の中
  73. 73. Component単位での簡易的な影 遮蔽されているかは、BPでLineTraceByChannel等で チェックします Componentの位置 Componentの位置 +ライトの方向 *チェックする距離
  74. 74. Component単位での簡易的な影 結果をSetScalarParameterValueOnMaterials等でマテリ アルに渡します。 ● 遮蔽チェックのReturnValueがTrue=当たった=影 ● False=当たったのは無い=日向 マテリアルの 「ComponentShadow」 パラメーターに設定
  75. 75. Component単位での簡易的な影 マテリアルでは影パラメーターを受け取って、日向色と影色 をブレンドします 先程設定した 「ComponentShadow」 に値が設定されます
  76. 76. Component単位での簡易的な影 ただし、コンポーネント全体での陰影付けになり細かい影 は付けれません
  77. 77. Component単位での簡易的な影 LineTraceはちょっとだけ負荷が掛かります →発生時、Spawnされた時一回のみのチェックにすればマ シに
  78. 78. Component単位での簡易的な影 ケースバイケースで、常時大きく動くようなものに関して反 映させたい場合は、 Tick等で都度更新するように出来ます
  79. 79. Component単位での簡易的な影 この時、影との境目でパッと切り替わってしまうのが気にな る
  80. 80. Component単位での簡易的な影 その場合はBP側で補間します
  81. 81. Component単位での簡易的な影 前フレームの結果を保存していておいて、徐々に遷移させ ます
  82. 82. Component単位での簡易的な影 メリット ● 負荷的に軽い ● Opaque/Translucency, DefaultLit/Unlit全部に使える デメリット ● メッシュ単位でしか判定出来ない
  83. 83. もくじ ● 何故TranslucencyやUnlitで影を受ける必要があるのか ● UE4のおさらい ○ Opaque / Translucency, DefaultLit / Unlitの影 ○ Translucencyについて ● Unlitフェイク実装 ● Component単位での簡易的な影 ● DistanceFieldを用いた影 ● ShadowMapでの影 ● さいごに ● 巻末資料
  84. 84. DistanceFieldを用いた影 DistanceFieldとは
  85. 85. DistanceFieldを用いた影 各メッシュからの距離が保存されたバッファがあるような感 じ シーン配置
  86. 86. DistanceFieldを用いた影 各メッシュからの距離が保存されたバッファがあるような感 じ DistanceField メッシュからの距離を可視化
  87. 87. DistanceFieldを用いた影 UE4のDistance Field機能としては、 ● Ray Traced Distance Field Shadow ○ 遠方の影がCascade Shadowよりも綺麗に ● Distance FIeld Ambient Occlusion ○ 細かい所がScreen Space Ambient Occlusionよりも綺麗に などなど
  88. 88. DistanceFieldを用いた影 マテリアルでは、下記のノードが動作するようになります ● Distance to Nearest Surface ○ 指定した座標から1番近いメッシュの距離を得る ● Distance Field Gradient ○ 指定した座標から1番近いメッシュへのVectorを得る
  89. 89. DistanceFieldを用いた影 使用するにはプロジェクト設定で有効にしなければいけま せん(デフォルトOFF)
  90. 90. DistanceFieldを用いた影 影に戻って……
  91. 91. DistanceFieldを用いた影 先ほどの「Distance to Nearest Surface」の機能を使って マテリアル内で影を判定していきます。 手法的にはRayMarchのような形です。
  92. 92. DistanceFieldを用いた影 今描画する座標(緑色の点) ライト
  93. 93. DistanceFieldを用いた影 ライトの方向にちょっとオフセット。 ここを調べる座標とする。 ライト
  94. 94. DistanceFieldを用いた影 Try1.ここから「Distance to Nearest Surface」で一番近い メッシュの距離を取得 ライト
  95. 95. DistanceFieldを用いた影 Try1.距離が一定以上離れてるので、壁に埋まってはいな い ライト
  96. 96. DistanceFieldを用いた影 Try1.先程の距離分を、調べる座標からライト方向にオフ セット ライト
  97. 97. DistanceFieldを用いた影 Try2.再度「Distance to Nearest Surface」で一番近いメッ シュの距離を取得 ライト
  98. 98. DistanceFieldを用いた影 Try2.距離が一定以上離れてるので、壁に埋まってはいな い。ライト方向に移動 ライト
  99. 99. DistanceFieldを用いた影 Try3.再度「Distance to Nearest Surface」で一番近いメッ シュの距離を取得 ライト
  100. 100. DistanceFieldを用いた影 Try3.距離が一定以上離れてるので、壁に埋まってはいな い。ライト方向に移動 ライト
  101. 101. DistanceFieldを用いた影 Try4.再度「Distance to Nearest Surface」で一番近いメッ シュの距離を取得 ライト
  102. 102. DistanceFieldを用いた影 Try4.距離が一定以上離れてるので、壁に埋まってはいな い。ライト方向に移動 ライト
  103. 103. DistanceFieldを用いた影 Try5.再度「Distance to Nearest Surface」で一番近いメッ シュの距離を取得 ライト
  104. 104. DistanceFieldを用いた影 Try5.距離が小さいので壁に衝突した判定! ライト 壁のなかにいる!
  105. 105. DistanceFieldを用いた影 ライト方向に壁があるので、今描画するピクセルは影の中に いる ライト 壁のなかにいる! 影の中!
  106. 106. DistanceFieldを用いた影 もし壁がなかったら……
  107. 107. DistanceFieldを用いた影 指定回数繰り返す or 指定距離進んでも壁が無ければ ライト 壁に当たらず進んでる
  108. 108. DistanceFieldを用いた影 そこは日向 ライト 日向!
  109. 109. DistanceFieldを用いた影 一定回数/一定距離繰り返し行い、その間に壁判定が有れ ば日陰、最後まで到達しても何もなければ日向になりま す。
  110. 110. DistanceFieldを用いた影 実装。ループ処理を使うのでマテリアルのCustomノードで 対応しました。
  111. 111. DistanceFieldを用いた影 実装。ループ処理を使うのでマテリアルのCustomノードで 対応しました。 // ライト方向 const float3 LightVector = ResolvedView.DirectionalLightDirection; // 初回距離 const float StartLength = 30.0f; // しきい値(これ以下の距離は壁の中にいる) const float ShadowThreshold = 1.0f; // 検索最大距離(これ以上検索したら日向にする) const float MaxSearchLength = 10000.0f; // 検索する座標 float3 Position = GetWorldPosition(Parameters) + LightVector * StartLength; // 検索した距離 float SearchLength = StartLength; // 10回分検索する for (int Index = 0 ; Index < 10 ; ++Index) { // 近いメッシュの距離 float Nearest = GetDistanceToNearestSurfaceGlobal(Position); // 日陰かどうか if (Nearest <= ShadowThreshold) { return 0.0; } // 検索距離限界 SearchLength += Nearest; if (SearchLength >= MaxSearchLength) { break; } // Next Trace Position += Nearest * LightVector; } return 1.0;
  112. 112. DistanceFieldを用いた影 ソフトシャドウの対応も簡単です
  113. 113. DistanceFieldを用いた影 一定値以下の場合は影、としていましたが距離で補間しま す
  114. 114. DistanceFieldを用いた影 Customノードを修正して、ループの中で調べていく中で1 番小さい(=影が濃い)数値を取って補間します // 10回分検索する for (int Index = 0 ; Index < 10 ; ++Index) { // 近いメッシュの距離 float Nearest = GetDistanceToNearestSurfaceGlobal(Position); // 日向~日陰具合 float SoftRate = saturate((Nearest - ShadowThreshold) / Smoothness); // 一番の日陰を取る Sunny = min(Sunny, SoftRate); // 検索距離限界 SearchLength += Nearest; if (SearchLength >= MaxSearchLength) { break; } // Next Trace Position += Nearest * LightVector; } return Sunny; // ライト方向 const float3 LightVector = ResolvedView.DirectionalLightDirection; // 初回距離 const float StartLength = 30.0f; // しきい値(これ以下の距離は壁の中にいる) const float ShadowThreshold = 1.0f; // 検索最大距離(これ以上検索したら日向にする) const float MaxSearchLength = 10000.0f; // 検索する座標 float3 Position = GetWorldPosition(Parameters) + LightVector * StartLength; // 検索した距離 float SearchLength = StartLength; // 日向-1.0、日陰-0.0 float Sunny = 1.0;
  115. 115. DistanceFieldを用いた影 マテリアルのノード少しだけで実装出来てお手軽ですが、 デメリットも……
  116. 116. DistanceFieldを用いた影 デメリット1 Distance Fieldを有効にする必要があります。 Distance Fieldの機能自体で 幾分かの処理負荷、幾分かのメモリを持っていかれます
  117. 117. DistanceFieldを用いた影 描画負荷を調べる。「ProfileGPU」コマンドで 「UpdateGlobalDistanceFieldVolume」項目
  118. 118. DistanceFieldを用いた影 メモリ使用量を調べる。 Static Mesh一つ一つにメモリが乗っかってきます。 エディターで開いて左上 「距離フィールド」が 使用メモリです。
  119. 119. DistanceFieldを用いた影 メモリ使用量を調べる。 シーン全体の使用量。 コマンドで「stat MemoryStaticMesh」
  120. 120. DistanceFieldを用いた影 デメリット2 影の出来がDistance Fieldの正確さに依存します。 Distance Fieldを高解像度にすれば影も綺麗になります が、処理負荷やメモリも増えます
  121. 121. DistanceFieldを用いた影 デフォルトだと距離が離れると判定が上手く取れなくなりま す
  122. 122. DistanceFieldを用いた影 ワールドセッティングの「Global DistanceField View Distance」から調整可能。 数値を上げると遠くまで適用可能
  123. 123. DistanceFieldを用いた影 細かい所が上手く出ない時。精度を上げたい場合は下記コ ンソールコマンド ● r.AOGlobalDFResolution 128 256
  124. 124. DistanceFieldを用いた影 負荷は上がります 128 512
  125. 125. DistanceFieldを用いた影 デメリット3 Skeletal MeshはDistance Fieldを持ちません。 ですので、Skeletal Meshからは影を受けません
  126. 126. DistanceFieldを用いた影 メリット ● 既にDistance Fieldを使用しているとお手軽に実装出 来る。 ● 細かい形状のメッシュ影も反映出来る デメリット ● Distance Fieldを使用していないプロジェクトの場合、 有効にするためにそこそこのメモリ、処理負荷が掛かる ● 精度の問題が発生する
  127. 127. DistanceFieldを用いた影 参考 ● メッシュディスタンス フィールド ○ http://api.unrealengine.com/JPN/Engine/Rendering/LightingAndShadows/MeshDistanceFields/ ● メッシュ ディスタンス フィールド設定のリファレンス ○ http://api.unrealengine.com/JPN/Engine/Rendering/LightingAndShadows/MeshDistanceFields/ Reference/index.html ● RayTraced Distance Field Soft Shadows ○ http://api.unrealengine.com/JPN/Engine/Rendering/LightingAndShadows/RayTracedDistanceFi eldShadowing/index.html ● ディスタンス フィールド アンビエント オクルージョン ○ http://api.unrealengine.com/JPN/Engine/Rendering/LightingAndShadows/DistanceFieldAmbient Occlusion/
  128. 128. もくじ ● 何故TranslucencyやUnlitで影を受ける必要があるのか ● UE4のおさらい ○ Opaque / Translucency, DefaultLit / Unlitの影 ○ Translucencyについて ● Unlitフェイク実装 ● Component単位での簡易的な影 ● DistanceFieldを用いた影 ● ShadowMapでの影 ● さいごに ● 巻末資料
  129. 129. ShadowMapでの影 通常のShadowと同じようにShadowMapから影を取ります
  130. 130. ShadowMapでの影 ShadowMapとは? (ざっくり説明)
  131. 131. ShadowMapでの影 ライトの位置からの距離をテクスチャにレンダリング。 このテクスチャ=シャドウマップ ライト シャドウマップ (ライトから見た図) ライトから見たカ メラ
  132. 132. シャドウマップ (ライトから見た図) ShadowMapでの影 シーンの描画時に、今から描画する座標のライト距離とシャ ドウマップに保存された距離を比較 シーンの描画 今から描画 する座標 今から描画 する座標
  133. 133. ShadowMapでの影 シャドウマップの方が距離が短ければ、他のメッシュに遮蔽 されている シャドウマップに保存されて いるライトからの距離 今描画しようとしている ライトからの距離
  134. 134. ShadowMapでの影 難しいね!
  135. 135. ShadowMapでの影 (きっちり話すると終わらないので参考サイト) ● 3Dグラフィックス・マニアックス - 影の生成(5)~デプスシャドウ技 法 ○ https://news.mynavi.jp/article/graphics-24/
  136. 136. ShadowMapでの影 But! UE4ではエンジン改造無しではShadow Mapへアク セス出来ません
  137. 137. ShadowMapでの影 ですので自前で別途Shadow Mapを生成します
  138. 138. ShadowMapでの影 ライト方向からのシャドウマップをレンダリングします。 メインビューとは別に画面をレンダリングする SceneCapture2Dを使います
  139. 139. ShadowMapでの影 (BP構築をざっくり解説……詳細は配布するプロジェクトを 参照してください。 中身を全部把握するには数学的な知識も必要になります)
  140. 140. ShadowMapでの影 1. 描画先のテクスチャのアセットを作成 ● 右クリックから「描画ターゲット」
  141. 141. ShadowMapでの影 2. アセットを開いて設定変更 ● SizeX/Yでいい感じの解像度に ● AddressをClampに ○ レンダリング範囲外は端で丸める ● フォーマットはR16f ○ 1チャンネルのみ、floatを扱う
  142. 142. ShadowMapでの影 3. 先に、シャドウ計算用のマテリアルパラメーターコレク ションを作成。 ● 右のようなパラメーター4つ作成 ● 半透明メッシュ描画時に 使います
  143. 143. ShadowMapでの影 4. BPを作成。Actorを親クラスに指定 ● 右クリックから「ブループリントクラス」
  144. 144. ShadowMapでの影 5. 開いてコンポーネント「Scene Capture Component 2D」を追加
  145. 145. ShadowMapでの影 6. コンポーネントを選択してProjection設定を変更 ● Projection Typeを「Orthographic」 ● Ortho Widthをいい感じの数値に ○ パースが無いカメラ設定 ○ この数値が撮影する範囲に
  146. 146. ShadowMapでの影 7. 各種設定 ● 「TextureTarget」に(1)で作成した描画ターゲットを指定 ● 「Capture Source」は距離=深度を描くのでScene Depth in R
  147. 147. ShadowMapでの影 8. BP実装。ライトからの距離をテクスチャに書き込むの で、ディレクショナルライトから撮影するTransformを取得し てBPに設定
  148. 148. ShadowMapでの影 9. 同時に(3)で作成したマテリアルパラメーターコレクション に座標、軸ベクトルを渡します
  149. 149. ShadowMapでの影 10. 毎フレームキャプチャーする場合は「Capture Every Frame」にTrueを、1回だけキャプチャーする場合は 「Capture Scene」関数を呼び出してください
  150. 150. ShadowMapでの影 以上でライトからの距離をテクスチャに書き込む処理は終 わりです。 ここからはメッシュ描画時のマテリアルで、そのライトへの 距離と、先程の距離テクスチャとを比較します
  151. 151. ShadowMapでの影 (数学……行列、座標変換周りの計算が入ります……ここ で全部説明しても収まらないので計算式の説明は省きます ……お近くの僕やエンジニアを捕まえてください……)
  152. 152. ShadowMapでの影 1. ワールド座標をライト空間の座標に変換
  153. 153. ShadowMapでの影 2. シャドウマップのサイズ、アスペクト比でUVを生成
  154. 154. ShadowMapでの影 3. 今描画する座標のライト距離とシャドウマップを比較して 結果を取得
  155. 155. ShadowMapでの影 長かった……
  156. 156. ShadowMapでの影 結果
  157. 157. ShadowMapでの影 Distance Field時の弱点だったSkeletal Meshの影もきっ ちり受けれます
  158. 158. ShadowMapでの影 デメリット、あります
  159. 159. ShadowMapでの影 デメリット1 シャドウマップを生成する際にレンダリングしているので、 かなり大きな描画負荷が掛かります
  160. 160. ShadowMapでの影 こちらは必要な時だけシャドウマップを作り直す形にすれ ば、そのタイミングだけの負荷になります 作り直しタイ ミング 毎フレーム 必要な時だけ 負 荷 負 荷
  161. 161. ShadowMapでの影 例えば、Levelのロードが終わったタイミングやプレイヤー が一定エリア進んだ時など 暗転中に処理してしまうなど
  162. 162. ShadowMapでの影 ただ負荷のスパイク、ヒッチ(一瞬負荷が上がる現象)にも 注意。 ユーザーに、いつもここに入るとカクつくなぁという印象が
  163. 163. ShadowMapでの影 ● 毎フレーム、シャドウマップ作る ○ Movable、動くようなオブジェクト、プレイヤーの影も落とすこと が出来る ○ 常に負荷が掛かる ● 必要な時だけ、シャドウマップ作る ○ 作成時のメッシュ配置になる ■ 作った後、動いたオブジェクトは反映されない ○ 作成した1フレームだけの負荷で済む
  164. 164. ShadowMapでの影 Scene Capture Componentの「Capture Every Frame」が Onなら毎フレーム作成されます。 Offにした状態で、「Capture Scene」を呼び出す事で、その フレームのみ生成することが出来ます。
  165. 165. ShadowMapでの影 他にも、SceneCaptureの機能で指定したActorだけ書き込 むShowOnlyActorがあります。
  166. 166. ShadowMapでの影 この機能を使って遮蔽したいメッシュだけを設定すれば少 しはシャドウマップ作成負荷がマシに……
  167. 167. ShadowMapでの影 また、ライトマップのように事前にキャプチャーして作成して しまえば、ランタイムの負荷が掛かりません。 ただし、Staticなオブジェクトのみのシャドウマップになりま す。
  168. 168. ShadowMapでの影 デメリット2 綺麗さがシャドウマップの解像度依存になります。
  169. 169. ShadowMapでの影 シャドウマップ解像度128と2048 128 2048
  170. 170. ShadowMapでの影 シャドウマップ解像度128と2048 128 2048
  171. 171. ShadowMapでの影 綺麗にしようと解像度を上げると、テクスチャメモリや作成 時の描画負荷を大きく持っていかれます
  172. 172. ShadowMapでの影 また、広い範囲のシャドウマップを作成しようとすると、解像 度がどうしても必要になってきます
  173. 173. ShadowMapでの影 メリット ● スケルタルメッシュの影も反映出来る ● 条件次第で、Movableなオブジェクトの影も反映出来る ● プロジェクトに合わせて、負荷の掛かり具合を調整出来 る デメリット ● 実装にBPが必要等、ある程度知識と手間が掛かる ● 負荷とメモリの問題が発生する
  174. 174. もくじ ● 何故TranslucencyやUnlitで影を受ける必要があるのか ● UE4のおさらい ○ Opaque / Translucency, DefaultLit / Unlitの影 ○ Translucencyについて ● Unlitフェイク実装 ● Component単位での簡易的な影 ● DistanceFieldを用いた影 ● ShadowMapでの影 ● さいごに ● 巻末資料
  175. 175. さいごに シャドウマップ法、色々書いたけどこれ1から実装するの ……? 理解して調整、実装するの大変じゃない……?
  176. 176. さいごに - Plugin作ってる →プラグイン作りました作ってます
  177. 177. さいごに - Plugin作ってる (今回、手法を色々試していたけど、今の所ShadowMapを どうにかするのがシーン毎/プロジェクト毎に調整しやすい 方法だと思いました。ので、それをどうにか使いやすくする 為のプラグイン)
  178. 178. さいごに - Plugin作ってる ボリュームを配置したエリアを囲うShadowMap処理する
  179. 179. さいごに - Plugin作ってる (年内目処で……出来たら公式UE4フォーラム辺りで配布 します)
  180. 180. さいごに - 影の色つけ また、今回の下記手法はマテリアル内で影の具合を拾う事 が出来ます。 ● Component 単位影 ● Distance Field影 ● ShadowMap
  181. 181. さいごに - 影の色つけ 通常のDefault LitやTranslucency+Surface ForwardShadingですと、エンジン内部で影付けを 行われるのでマテリアルでその係数を拾う事が出来ません。 ですが、先程のはマテリアル内で影の具合を拾えますので、 色味を自分で調整する事が出来ます。
  182. 182. さいごに - 影の色つけ 純粋に暗くするだけではなく、影の中の明るさや彩度も調整し たり…… 一例です
  183. 183. さいごに - 影の色つけ NPRセルルックでキャストシャドウの係数としても使えます。 一例です
  184. 184. さいごに - 屋根チェック またライトの方向とは関係なく、影チェックする方向を決める 事も出来ます。 真上(0,0,1)にすることで、屋根に遮られている等を検出出来 ます
  185. 185. さいごに - 屋根チェック 結果をオパシティマスクに繋いで、屋根以下を消すように。 雨が屋根の中に落ちないように等 消せる!
  186. 186. さいごに エンジン改造を回避して、これら色々出来るようになるかと 思います。
  187. 187. さいごに まとめ
  188. 188. さいごに - まとめ 手法 メリット デメリット Unlitフェイク ・負荷的に軽い ・PostProcessで法線狂う Component ・負荷的に軽い ・メッシュ単位の影ON/OFFしか取れない Distance Field ・元々Distance Field有効 なら負荷的に軽い ・元々Distance Field無効だった場合はONに すると負荷激増 ・Skeletal Meshから影を受けれない Shadow Map ・解像度次第で精密な影 ・事前に焼き込めばランタ イムは軽い ・解像度次第でメモリを喰う ・Movableなメッシュから影を受けようとすると 処理負荷高い
  189. 189. さいごに - まとめ どれもこれも一長一短。 これらはどれを使えばいい、という訳でなく、プロジェクトや シチュエーションに合った手法を使うのが良いと思います。
  190. 190. さいごに - まとめ 例)インゲーム中は負荷もメモリも限界! → Component単位の影付けで軽く でもカットシーンは余裕がある! → カットシーンだけはShadowMap作って品質上げる
  191. 191. さいごに - まとめ 例)映像でレンダリングして使うので描画負荷はそこまで問 題にはならない → ShadowMapで解像度を上げて品質を上げる
  192. 192. さいごに - まとめ 制作物、またその中のシチュエーション毎に色々組み合わ せれると思います
  193. 193. さいごに (今回、処理的にロジック的な内容が多くてすみませ ん。。。)
  194. 194. もくじ ● 何故TranslucencyやUnlitで影を受ける必要があるのか ● UE4のおさらい ○ Opaque / Translucency, DefaultLit / Unlitの影 ○ Translucencyについて ● Unlitフェイク実装 ● Component単位での簡易的な影 ● DistanceFieldを用いた影 ● ShadowMapでの影 ● さいごに ● 巻末資料
  195. 195. 巻末資料 - TranslucencyのLightingModeについて TranslucencyのLightingModeについて
  196. 196. 巻末資料 - TranslucencyのLightingModeについて マテリアルTranslucencyのLighting Mode https://docs.unrealengine.com/en-us/Resources/ContentExamples/MaterialProp erties/1_3
  197. 197. 巻末資料 - TranslucencyのLightingModeについて ● PerVertex系 ○ LightVolumeの方向計算を頂点単位で行う ■ PerVertexが付いていないのはピクセル単位 ○ Volumetric Translucent Shadowが効かない ○ PerVertex付いてる方が軽い(ハズ) ● Directional / NonDirectional ○ NonDirectionalはライト方向によるシェーディングをしない ○ NonDirectionalの方が軽い(ハズ) ● Surface系 ○ リフレクションが使える(Metallic, Roughnessが使える) VolumetricPerVertexNonDirectional が一番描画負荷軽そう
  198. 198. 巻末資料 - TranslucencyのLightingModeについて ● テストシーン 可動性:Static 可動性:Movable Boxは8頂点
  199. 199. 巻末資料 - TranslucencyのLightingModeについて ● Volumetric NonDirectional ○ ピクセル単位でLightingVolumeから算出。ライト方向を考慮しない
  200. 200. 巻末資料 - TranslucencyのLightingModeについて ● Volumetric Directional ○ ピクセル単位でLightingVolumeから算出。ライト方向を考慮する シェーディングが 付く
  201. 201. 巻末資料 - TranslucencyのLightingModeについて ● Volumetric PerVertex NonDirectional ○ 頂点単位でLightingVolumeから算出。ライト方向を考慮しない 頂点単位なので ポイントライトの範囲 に頂点が無いBoxは 色付かない
  202. 202. 巻末資料 - TranslucencyのLightingModeについて ● Volumetric PerVertex Directional ○ 頂点単位でLightingVolumeから算出。ライト方向を考慮する
  203. 203. 巻末資料 - TranslucencyのLightingModeについて ● Surface TranslucencyVolume ○ VolumetricDirectionalと同じ計算+ImageBasedReflectionLightingを行う Volumetric Directional とほぼ同じ
  204. 204. 巻末資料 - TranslucencyのLightingModeについて ● Surface TranslucencyVolume ○ VolumetricDirectionalと同じ計算+ImageBasedReflectionLightingを行う 違いはメタリック、 ラフネスで リフレクションを適 用できる
  205. 205. 巻末資料 - TranslucencyのLightingModeについて ● Surface ForwardShading ○ Forwardレンダリングのライティング計算を行う ほぼ完全な シェーディング。 キャストシャドウも受け れる
  206. 206. 巻末資料 - TranslucencyのLightingModeについて シェーダーの定義で下記defineが設定される。 ○ 興味ある人はEngine/Shader/以下の.usf, .ushを検索! ● VolumetricNonDirectional ○ #define TRANSLUCENCY_LIGHTING_VOLUMETRIC_NONDIRECTIONAL ● VolumetricDirectional ○ #define TRANSLUCENCY_LIGHTING_VOLUMETRIC_DIRECTIONAL ● VolumetricPerVertexNonDirectional ○ #define TRANSLUCENCY_LIGHTING_VOLUMETRIC_PERVERTEX_NONDIRECTIONAL ● VolumetricPerVertexDirectional ○ #define TRANSLUCENCY_LIGHTING_VOLUMETRIC_PERVERTEX_DIRECTIONAL ● Surface TranslucencyVolume ○ #define TRANSLUCENCY_LIGHTING_SURFACE_LIGHTINGVOLUME ● Surface ForwardShading ○ #define TRANSLUCENCY_LIGHTING_SURFACE_FORWARDSHADING
  207. 207. 巻末資料 - TranslucencyのLightingModeについて GetTranslucencyVolumeLighting とかVertexShader辺り で処理が変わる
  208. 208. 以上!

×