講演動画はこちら https://youtu.be/symBuKS8ArM スライドデータはこちらからダウンロード可能です https://epicgames.box.com/s/9e14xua1u96rsb7nvmem4sql18ybug46 発表者：宮本 浩司さま（株式会社スクウェア・エニックス） 本スライドは2020年7月5日に行われた勉強会「 UE4 VFX Art Dive Online」の講演資料となります。

1. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
株式会社スクウェア・エニックス 宮本 浩司
デ ジ タ ル 水 遊 び

2. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
略称について
・『Unreal Engine 4』をスライド内では『UE4』と記載しています

3. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
スライドは後日公開します

4. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
宮本 浩司(Miyamoto koji)
自 己 紹 介
株式会社スクウェア・エニックス
VFXアーティストとして、インゲーム
カットシーンのエフェクトを作成しています
趣味は旅行兼釣り

5. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
今回のテーマ

6. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

7. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

8. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
VAT(Vertex Animation Texture)
Fluid(流体)に焦点を当てていきます

9. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
VATって何？
という方も試してみたくなるように
お話しますので安心してください

10. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
※開発タイトルとは全く関係ありません

11. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• アジェンダ
お品書き

12. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• VAT(Fluid)の簡単な説明
• 水をスロー撮影してみる
• DCCツールでモデルデータを作成
• DCCツールで流体データを作成
• 流体データ作成方法を模索

13. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• DCCツールで流体データを調整
• VATデータを書き出す
• UE4エフェクト作成事例
• VATの所感

14. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• アジェンダ
VAT(Fluid)の簡単な説明

15. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
VAT(Vertex Animation Texture)

16. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
DCCツールで作成したジオメトリからテクスチャに情報を格納し
ゲームエンジン等でテクスチャを元にデータを再構築するもの

17. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
VATの使用用途として
• ソフトボディ
• リジッドボディ
• フルイド(今回説明)
• スプライト
・・・柔らかな物体のシミュレーション
・・・剛体シミュレーション
・・・流体シミュレーション
・・・パーティクルシミュレーション

18. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
VATのワークフローで必要な
テクスチャとメッシュ
これらはDCCツールで作成します

19. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
DCCツール → テクスチャ出力 → UE4で再構成

20. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
テクスチャにどんな情報が格納されているのか

21. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
・Rチャンネル : posX
・Gチャンネル : posY
・Bチャンネル : posZ
・Aチャンネル : normal
頂点(緑の●)の位置と法線
情報がRGBAチャンネルに格納されている
※1pixelに1頂点の情報

22. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
D C C ツ ー ル 説 明 の 前 に
内容を把握した所で早速VAT出力に
行きたい所ですがはやる気持ちを抑えつつ
流体を実際に撮影してみました

23. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• アジェンダ
水をスロー撮影してみる

24. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
撮 影 準 備
手持ちのスマホに960fpsの
スロー撮影機能があったので撮影開始
さぁ スローモーションの世界へ

25. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
スマホでスロー撮影出来るなんていい時代になりました
あと 体を動かすとモチベーションが上がりますよね

26. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
今回用意したもの
• スマホカメラ(スロー撮影出来るもの)
• 水(シャワー)
• バケツ
• 小物類いろいろ

27. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
それでは撮影

28. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

29. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
水をはったバケツに
身近な小物を投げ込んでいきました

30. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
身の回りにあるもの

31. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
六 角 錘 ( 4 0 号 )
サビキ仕掛け、胴突き仕掛けでに最適な六角錘
投入する角度で色々な表情をみせてくれます
良い仕事してますね

32. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
ナ ツ メ 錘 ( 3 0 号 ) + フ ッ ク
最近脚光を浴びているナツメ錘
フックを付けるとエサ無しで魚が釣れます
フックの影響あるのか？

33. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
ス パ イ ク 錘
ノマセ釣りならスパイク錘
トーラスより複雑！？
水しぶきがダイナミック

34. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
エ ギ ( ル ア ー )
イカ釣りルアーのエギ
しっぽのカンナが水を掴んで良い感じ
今回のダークホースか！？

35. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
指 で 弾 く
これはこれでいい感じ
お手軽です

36. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
とにかく
流体は魅力的ですよね

37. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
実際に物を投げ込んでみて

38. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
上から物を落とすと二回目の水ハネがあり
水面が物に押し込められて凹む程
第2波が大きくなるようです
CGでこれを消すのは厄介そうですが
尖った水ハネが出来がちなので
その結果が欲しい場合は利用するのもアリ

39. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
この大きさの流体になるとポリゴン数はさすがに多そう これ結構重要!!
ローポリで絵がガビガビになるくらいだったら別にVATじゃなく
テクスチャでなんとかする等 違うアプローチが求めれらそうです

40. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
CGで作りから始めるとサイズ感が掴みにくいので
実物をみるとサイズ感がつかめて良いですね
粘性が高い液体の場合は結果が違って面白そう

41. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• アジェンダ
おまけ

42. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
花の水やり風景
これはメテオか何かを彷彿をさせますね
「いいですとも！」

43. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
最後はやっぱり忘ちゃいけないコレですね
無事びしょびしょになりました

44. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
体を動かすとモチベーションあがりますよね
さて これらをCGでやります

45. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
では 机に向かいましょう

46. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• アジェンダ
DCCツールでモデルデータを作成

47. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
流 体 に 投 入 す る モ デ ル を 考 え る
Houdiniの豚 ラバートイ 甲殻類の様なイカ
シンプルにプリミティブ球体やボックス
このようなモデル達にお声をかけようかと迷いましたが

48. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
せっかくなのでモデリングしました

49. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
六角錘

50. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
スパイク錘

51. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
エギ(3号想定)

52. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• アジェンダ
DCCツールで流体データを作成

53. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
今回はHoudiniを使っていきます
VATが吐き出せる環境であればなんでもいいと思います
環境を整えれば色々なDCCツールで
作成可能かと思いますが VATの出力するまで
ある程度ツールが用意されているのが良いですね
H o u d i n i で 進 め て い く

54. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
Fluid作成からUE4出力迄一通りサポート
SideFX Labs(旧Game Development Toolset)
ツールが用意されているのでそれを利用します

55. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
SideFx LabsタブからVATを選択して
vertex_animation_texturesを呼び出す
ノードが用意されています
ありがたいですね

56. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
VAT出力に関する情報が詰め込まれています
・soft
・rigid
・Fluid
・sprite
以上 4点の項目がすでに用意されています
後はFluidデータを用意するだけですね

57. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• アジェンダ
水ハネ シブキ(Fluid)データを作成する

58. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
六 角 錘
六角錘を水面に投げ込む

59. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
ス パ イ ク 錘
スパイク錘を水面に投げ込む

60. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
エ ギ ( ル ア ー )
エギ(ルアー)を水面に投げ込む

61. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
水 面 か ら 飛 び さ せ て み る

62. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
実写と見比べても割と良い感じの
結果になりました

63. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• アジェンダ
流体データ作成方法を模索

64. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
Substanceデータを利用する

65. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
Substanceデータ＋フォースを利用してメッシュを作成

66. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
Substanceデータはアニメーション出来るので
色々な工夫が出来そうです

67. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
Megascansを利用する

68. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
Megascansのデータを投げ込みたくなりますよね
最終的な成果物がUE4で使われていれば使用出来るようですが
今回は“物”をUE4に持っていかないので使用しませんでした

69. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• アジェンダ
DCCツールで流体データを調整

70. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
F l u i d 調 整 削 除
・パーティクルを座標で削除
・パーティクルをオブジェで削除
・パーティクルをIDで削除
・パーティクルを寿命で削除

71. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
座 標 で 削 除
Ｙ軸でしきい値を設定して削除しました

72. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
オ ブ ジ ェ で 削 除
オブジェを使えば要らないパーティクルの調整に便利
急にパーティクルが削除されない様に削除範囲を設定しています

73. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
I D で 削 除
ＩＤで選別すれば指定したパーティクルを追いかけて残したり
削除する事が出来ます

74. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
寿 命 で 削 除
実際の水では起こりえないですが
パーティクルの寿命で削除

75. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
これらの方法を組み合わせれば 狙った範囲の
最適なパーティクルを抜き出せると思います

76. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
F l u i d 調 整 メ ッ シ ュ 作 成
パーティクルメッシュ化について

77. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
パ ー テ ィ ク ル を メ ッ シ ュ 化
大体のメッシュの形の調整はメッシュ作成時のパラメーターで調整

78. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
F l u i d 調 整 最 適 化
・ラティスで調整
・小さいメッシュを取り除く
・尺調整
・ポリゴンを削減(PolyReduce)
・ポリゴンをスムージング

79. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
ラ テ ィ ス で 調 整
ラティスで微調整したり、大きくグニャっとやってしまったり

80. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
小 さ い メ ッ シ ュ を 取 り 除 く
Delete_small_partsノードでメッシュ化時の小さなメッシュを削除

81. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
尺 調 整
timewarpノードでデータ出力の尺を調整

82. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
ポ リ ゴ ン を 削 減 ( Po l y Re d u c e )
PolyReduceノードでポリゴンをリダクション

83. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
パ ー テ ィ ク ル や ポ リ ゴ ン を ス ム ー ジ ン グ
ポリゴンのリダクション時にガタついた箇所をスムースで調整

84. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• アジェンダ
VATデータを書き出す

85. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
VATデータを書き出す

86. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• アジェンダ
UE4エフェクト作成事例

87. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
とりあえずシンプルにデータを出力

88. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
六 角 錘 出 力
一番手は六角錘
環境マップ＋屈折入れてます

89. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
ス パ イ ク 錘
ダイナミックさのスパイク錘
期待を裏切らないですね

90. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
エ ギ ( ル ア ー ) 出 力
まさかエギで作成したとは誰も思わないだろう。。

91. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
アレンジしてみる

92. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
発 光 さ せ て 出 力
発光させると一気にファンタジックになりますね

93. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
S u b s t a n c e の ぐ る ぐ る 出 力
粒の追加とフレネルと屈折と発光

94. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
地 面 を 這 う 衝 撃
エギが倒れる水しぶきを利用

95. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
炎 の 輪
ポリゴン数とパターン数が気になるので
パーティクルを新たに付け加えて見た目を上手く補間する

96. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
炎 の 輪 ( 地 面 )
炎の輪を1/4にしてエディター上でぐるりと複製して節約

97. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
噴 水 / 間 欠 泉
VATのみだとエッジが立って小規模な表現に見えてしまうので
水しぶきが霧散するように補助エフェクトを加えています
水玉はある程度大きくなると分裂するので無理のない範囲で要調整
規模が大きくなればなるほどテクスチャに頼る割合が増えていく

98. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
UE4エフェクト作成事例紹介は以上です

99. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• アジェンダ
VATの所感

100. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
VAT の 所 感
楽しいよっ！！
DCCツールで形や挙動が自由に調整できるのも良い
ちょっとデータ表示まで調整が必要だけど。。。

101. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
VAT の 所 感
様々なパラメーターをテクスチャに格納出来るので
他にも色々な使い方が出来そう

102. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
VAT の 所 感
良くも悪くも毎回同じ挙動
なるべくループ感を無くす工夫をするか
バリエーションが欲しい
同じ挙動なのでカットシーンでは逆に都合が良い場合もある

103. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
VAT の 所 感
データ容量について
Fluidは他の3種類のVAT(soft,rigid,sprite)に比べて
常にトポロジの変化するのでデータ量が増える傾向がある
そもそもVATのテクスチャはHDRテクスチャを使用するので
大規模な物への使用は現実的でない印象

104. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
• アジェンダ
最後に

105. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
今回VAT(VertexAnimationTexture)のFluid(流体)を
紹介させて頂きましたが流体の独特な挙動は魅力的であります
しかしながら 現行機ではまだまだ大規模なVAT流体は
処理容量の関係でガンガン使える様な状況ではありません
未来に夢を託しつつ現状は小技を駆使してエフェクトのスパイスに
扱うのが適当かなと思います
本登壇が皆様の少しでもお役にたてれば幸いです

106. ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
ご清聴ありがとうございました！
UNREAL ENGINEはエピック・ゲームズ・インコーポレーテッド商標または登録商標です。
その他掲載されている会社名、商品名は、各社の商標または登録商標です。