UE4でプロシージャル田植え【UE4 Environment Art Dive 2019】

11.6K Views

December 18, 19

スライド概要

講演動画はこちら
https://www.youtube.com/watch?v=ED79QtVBXCQ

発表者:斎藤修(Epic Games Japan)
本スライドは2019年12月15日に行われた勉強会「 UE4 Environment Art Dive」の講演資料となります。

profile-image

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

シェア

またはPlayer版

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

関連スライド

各ページのテキスト
1.

UE4でプロシージャル田植え ~MegascansとHoudiniEngineを添えて~ Epic Games Japan Dev Rel Tech Artist 斎藤 修

2.

自己紹介 斎藤 修 Epic Games Japan/Dev Rel Tech Artist https://twitter.com /shiba_zushi ● 2019年6月からEpicに入りました ● それまでは規模大きめのコンソール開発してました ● その前は漫画とか描いてました ● UE4とHoudiniが好物です #UE4 | @UNREALENGINE

3.

はじめに #UE4 | @UNREALENGINE

4.

はじめに 田んぼって いいですよね… #UE4 | @UNREALENGINE

5.

はじめに というわけで #UE4 | @UNREALENGINE

6.

はじめに #UE4 | @UNREALENGINE

7.

はじめに #UE4 | @UNREALENGINE

8.

はじめに ←棚田 水田→ #UE4 | @UNREALENGINE

9.

はじめに ←棚田 作りました! 水田→ #UE4 | @UNREALENGINE

10.

今日話すこと #UE4 | @UNREALENGINE

11.

今日話すこと ・UE4でのMegascansの おいしい使い方 #UE4 | @UNREALENGINE

12.

今日話すこと ・UE4でのMegascansの おいしい使い方 ・UE4でのHoudiniEngineの おいしい使い方 #UE4 | @UNREALENGINE

13.

Megascans? #UE4 | @UNREALENGINE

14.

Megascans? https://www.unrealengine.com/ja/blog/unreal-engine-4-24-to-ship-with-free-quixel-megascans-unreal-studio-features-and-more #UE4 | @UNREALENGINE

15.

Megascans? #UE4 | @UNREALENGINE

16.

Megascans? これが無料 #UE4 | @UNREALENGINE

17.

Megascans? #UE4 | @UNREALENGINE

18.

Megascans? ぜんぶ無料 #UE4 | @UNREALENGINE

19.

Megascans? #UE4 | @UNREALENGINE

20.

Megascans? #UE4 | @UNREALENGINE

21.

Megascans? #UE4 | @UNREALENGINE

22.

Megascans? #UE4 | @UNREALENGINE

23.

Megascans? #UE4 | @UNREALENGINE

24.

Megascans? #UE4 | @UNREALENGINE

25.

Megascans? https://quixel.com/blog/2019/11/12/quixel-joins-forces-with-epic-games 無料化前に購入していた分については 返金されるそうです #UE4 | @UNREALENGINE

26.

HoudiniEngine? #UE4 | @UNREALENGINE

27.

HoudiniEngine? https://www.sidefx.com/products/houdini-engine/plug-ins/unreal-plug-in/ #UE4 | @UNREALENGINE

28.

HoudiniEngine? HoudiniEngine For Unreal #UE4 | @UNREALENGINE

29.

HoudiniEngine? 無料 HoudiniEngine For Unreal 無料 #UE4 | @UNREALENGINE

30.

HoudiniEngine? HoudiniEngineを使用するには上記のHoudiniライセンスか HoudiniEngineライセンスが必要です #UE4 | @UNREALENGINE

31.

HoudiniEngine? 各ツールのプラグインは Houdiniインストール時にインストール可能です #UE4 | @UNREALENGINE

32.

HoudiniEngine? Ver指定が結構厳しいのでお気をつけください #UE4 | @UNREALENGINE

33.

HoudiniEngine? 自前でEngineビルドしている場合は プラグインも自前でビルドする必要があります #UE4 | @UNREALENGINE

34.

HoudiniEngine? こちらもver指定が厳しいです マイナーverは適宜書き換えると良いと思います #UE4 | @UNREALENGINE

35.

HoudiniEngine? HoudiniEngineプラグインを入れると ←これらの基礎機能がすぐ使用可能です 便利です #UE4 | @UNREALENGINE

36.

Megascans & HoudiniEngine #UE4 | @UNREALENGINE

37.

Megascans & HoudiniEngine アセット 効率化 #UE4 | @UNREALENGINE レイアウト 効率化

38.

Rice Fields さてでは まずこちらの水田から #UE4 | @UNREALENGINE

39.

Rice Fields 皆さん #UE4 | @UNREALENGINE これ 田んぼに見えますよね?

40.

Rice Fields Megascansには2500を超える植物があります #UE4 | @UNREALENGINE

41.

Rice Fields でも 稲はなかった… #UE4 | @UNREALENGINE

42.

Rice Fields 高品質なMegascansアセットから 無理やり稲を作れないものか #UE4 | @UNREALENGINE

43.

Rice Fields 稲はないけど #UE4 | @UNREALENGINE 雑草はいっぱいあります

44.

Rice Fields Lemongrass #UE4 | @UNREALENGINE

45.

Rice Fields ウィキペディアの執筆者. “レモングラス”. ウィキペディア日本語版. 2019-07-11. https://ja.wikipedia.org/w/index.php?title=%E3%83%AC%E3%83%A2%E3%83%B3%E3%82%B0%E3%83%A9%E3%82%B9&oldid=73430212, (参照 2019-07-11). #UE4 | @UNREALENGINE

46.

Rice Fields ウィキペディアの執筆者. “レモングラス”. ウィキペディア日本語版. 2019-07-11. https://ja.wikipedia.org/w/index.php?title=%E3%83%AC%E3%83%A2%E3%83%B3%E3%82%B0%E3%83%A9%E3%82%B9&oldid=73430212, (参照 2019-07-11). #UE4 | @UNREALENGINE

47.

Rice Fields Houdiniに読み込んで見たらいけそう #UE4 | @UNREALENGINE

48.

Rice Fields 葉っぱ単位で切り分けて整列 #UE4 | @UNREALENGINE

49.

Rice Fields 考え方 #UE4 | @UNREALENGINE

50.

Rice Fields 地面と交差する点を中心に #UE4 | @UNREALENGINE 一番高い頂点を基準点に

51.

Rice Fields 並べていく #UE4 | @UNREALENGINE

52.

Rice Fields 同時にバウンズ判定もして倒れ具合も記録 #UE4 | @UNREALENGINE

53.

Rice Fields 種をばら撒いて #UE4 | @UNREALENGINE

54.

Rice Fields 稲っぽーくなるように生やす #UE4 | @UNREALENGINE

55.

Rice Fields 枯れてる部分とかもちょっと欲しい #UE4 | @UNREALENGINE

56.

Rice Fields 混ぜちゃえ #UE4 | @UNREALENGINE

57.

Rice Fields 同じ方法で枯れ草部分を作成 #UE4 | @UNREALENGINE

58.

Rice Fields 根本がいい感じに見えるように調整 #UE4 | @UNREALENGINE

59.

Rice Fields 大体できました #UE4 | @UNREALENGINE

60.

Rice Fields 稲(っぽいなにか) #UE4 | @UNREALENGINE

61.

Rice Fields 次にこいつ #UE4 | @UNREALENGINE

62.

Rice Fields 次にこいつ #UE4 | @UNREALENGINE

63.

Rice Fields ウィキペディアの執筆者. “アオウキクサ”. ウィキペディア日本語版. 2014-10-30. https://ja.wikipedia.org/w/index.php?title=%E3%82%A2%E3%82%AA%E3%82%A6%E3%82%AD%E3%82%AF%E3%82%B5&oldid=53375131, (参照 2014-10-30). #UE4 | @UNREALENGINE

64.

Rice Fields もちろんない… #UE4 | @UNREALENGINE

65.

Rice Fields クローバーを強引に分解 #UE4 | @UNREALENGINE

66.

Rice Fields 茎を切り取り #UE4 | @UNREALENGINE

67.

Rice Fields 大きさを合わせて整列 #UE4 | @UNREALENGINE

68.

Rice Fields これをいい感じにばら撒きます #UE4 | @UNREALENGINE

69.

Rice Fields 田んぼ(っぽいなにか) #UE4 | @UNREALENGINE

70.

Rice Fields と、こんな感じで かなり強引ですが Megascansの高品質アセットを要素別に分解して再構成すると 幅広い可能性を作り出す事ができます #UE4 | @UNREALENGINE

71.

Rice Fields 今回は使用していませんが 例えば岩なんかもHoudiniを使用して 別パターンを作ることができます #UE4 | @UNREALENGINE

72.

Rice Fields アセットは大体できたので レイアウトへ #UE4 | @UNREALENGINE

73.

Rice Fields #UE4 | @UNREALENGINE

74.

Rice Fields 今画面にあるものは 全てHoudiniEngineで レイアウトされてます #UE4 | @UNREALENGINE

75.

Rice Fields Tips: ScreenPercentage上げると テンション上がります #UE4 | @UNREALENGINE

76.

Rice Fields https://qiita.com/EGJ-Osamu_Saito/items/709de40aa6b29fdc9033 #UE4 | @UNREALENGINE

77.

Rice Fields 1: https://qiita.com/advent-calendar/2019/ue4_egj1 2: https://qiita.com/advent-calendar/2019/ue4_egj2 3: https://qiita.com/advent-calendar/2019/ue4_egj3 4: https://qiita.com/advent-calendar/2019/ue4_egj4 #UE4 | @UNREALENGINE

78.

Rice Fields #UE4 | @UNREALENGINE

79.

Rice Fields #UE4 | @UNREALENGINE

80.

Rice Fields https://www.sidefx.com/docs/unreal/index.html HoudiniEngineはモデルだけではなく マテリアルやLOD、コリジョンなど 数多くの設定をUE4に持ってくることが可能です #UE4 | @UNREALENGINE

81.

Rice Fields #UE4 | @UNREALENGINE

82.

Rice Fields unreal_instance unreal_instance_color unreal_material unreal_material_parameter unreal_lightmap_resolution lod lod_screensize collision #UE4 | @UNREALENGINE simple unreal_uproperty socket complex ucx

83.

Rice Fields unreal_instance #UE4 | @UNREALENGINE

84.

Rice Fields HoudiniEngine For Unreal #UE4 | @UNREALENGINE

85.

Rice Fields HoudiniEngine For Unreal #UE4 | @UNREALENGINE

86.

Rice Fields HoudiniEngine For Unreal #UE4 | @UNREALENGINE

87.

Rice Fields HoudiniEngine For Unreal #UE4 | @UNREALENGINE

88.

Rice Fields HoudiniEngine For Unreal #UE4 | @UNREALENGINE

89.

Rice Fields HoudiniEngine For Unreal #UE4 | @UNREALENGINE

90.

Rice Fields HoudiniEngine For Unreal #UE4 | @UNREALENGINE

91.

Rice Fields HoudiniEngine For Unreal #UE4 | @UNREALENGINE

92.

Rice Fields フォリッジでも良くない? #UE4 | @UNREALENGINE

93.

Rice Fields #UE4 | @UNREALENGINE

94.

Rice Fields ノイズベースで自然に散布 #UE4 | @UNREALENGINE

95.

Rice Fields 外側ほどスケールを小さく #UE4 | @UNREALENGINE

96.

Rice Fields 稲と重ならないけど 自然に多くなるように判定 #UE4 | @UNREALENGINE

97.

Rice Fields 不必要なオーバーラップをしないように調整 #UE4 | @UNREALENGINE

98.

Rice Fields それらを自動で 広範囲に #UE4 | @UNREALENGINE

99.

Rice Fields ベイクすれば微調整もできます #UE4 | @UNREALENGINE

100.

Rice Fields #UE4 | @UNREALENGINE

101.

Rice Fields https://www.sidefx.com/tutorials/game-tools-physics-painter/ #UE4 | @UNREALENGINE

102.

Rice Fields シミュレーションを利用して自然に配置できます #UE4 | @UNREALENGINE

103.

Rice Fields https://qiita.com/EGJ-Osamu_Saito/private/9119a343dde9c61e2ce0 実はUE4でもできます #UE4 | @UNREALENGINE

104.

Rice Fields https://qiita.com/EGJ-Osamu_Saito/private/9119a343dde9c61e2ce0 是非アドカレ見てみて下さい #UE4 | @UNREALENGINE

105.

Rice Fields #UE4 | @UNREALENGINE

106.

Rice Fields せっかくなら動かしたいですよね #UE4 | @UNREALENGINE

107.

Rice Fields https://docs.unrealengine.com/ja/Engine/Content/Tools/PivotPainter/PivotPainter1/index.html #UE4 | @UNREALENGINE

108.

Rice Fields ContentExamplesにサンプルがあります #UE4 | @UNREALENGINE

109.

Rice Fields Pivot Painterのイメージ #UE4 | @UNREALENGINE

110.

Rice Fields 各パーツごとのPivot位置を作り #UE4 | @UNREALENGINE

111.

Rice Fields それを頂点カラーやUVに格納 #UE4 | @UNREALENGINE

112.

Rice Fields マテリアルでそれらを引っ張ってきて #UE4 | @UNREALENGINE

113.

Rice Fields いい感じに頂点オフセットさせる #UE4 | @UNREALENGINE

114.

Rice Fields Pivot Painter専用ノードあります #UE4 | @UNREALENGINE

115.

Rice Fields EpicからはMAXScriptの提供のみ #UE4 | @UNREALENGINE

116.

Rice Fields https://www.sidefx.com/tutorials/game-tools-pivot-painter/ Houdini版あります☺ #UE4 | @UNREALENGINE

117.

Rice Fields 枝と葉のグループ分けしておくだけで #UE4 | @UNREALENGINE

118.

Rice Fields 自動でそれぞれにPivotを入れてくれて便利です #UE4 | @UNREALENGINE

119.

Rice Fields いい感じ #UE4 | @UNREALENGINE

120.

Rice Fields 水面も動かしたい #UE4 | @UNREALENGINE

121.

Rice Fields FlowMapを使いたくなりますよね #UE4 | @UNREALENGINE

122.

Rice Fields UE4にはFlowMapのマテリアル関数があります #UE4 | @UNREALENGINE

123.

Rice Fields FlowMapはどう作ろう? #UE4 | @UNREALENGINE

124.

Rice Fields https://www.unrealengine.com/ja/events/gdc-2017-content-driven-multipass-rendering-in-ue4 #UE4 | @UNREALENGINE

125.

Rice Fields UE4で塗れたりします #UE4 | @UNREALENGINE

126.

Rice Fields https://www.sidefx.com/ja/tutorials/flowmap/?collection=50 Houdiniなら自動生成できます #UE4 | @UNREALENGINE

127.

Rice Fields 稲との接触判定を取って #UE4 | @UNREALENGINE

128.

Rice Fields FlowMapを自動生成 #UE4 | @UNREALENGINE

129.

Rice Fields ビジュアライズもできます #UE4 | @UNREALENGINE

130.

Rice Fields できました #UE4 | @UNREALENGINE

131.

Rice Fields レイアウトは大体できたので #UE4 | @UNREALENGINE 絵作りへ

132.

Rice Fields ライティングはDirectionalとHDRIBackdropのみ #UE4 | @UNREALENGINE

133.

Rice Fields http://noemotionhdrs.net/hdrday.html HDR画像は橋本さんに教えて頂いたこちらのサイトから #UE4 | @UNREALENGINE

134.

Rice Fields クリエイティブ・コモンズ・ライセンスで 使いやすくて有り難いです☺ #UE4 | @UNREALENGINE

135.

Rice Fields 注:高解像度のHDR非圧縮画像は重いです #UE4 | @UNREALENGINE

136.

Rice Fields HDRCompressedにしましょう #UE4 | @UNREALENGINE

137.

Rice Fields サイズが1/8になります #UE4 | @UNREALENGINE

138.

Rice Fields https://qiita.com/advent-calendar/2019/ue4_egj2 是非アドカレ #UE4 | @UNREALENGINE

139.

Rice Fields 次にマテリアル調整 #UE4 | @UNREALENGINE

140.

Rice Fields 個人的に簡易HSV調整をよくします #UE4 | @UNREALENGINE

141.

Rice Fields ただしHueShiftにはご注意を #UE4 | @UNREALENGINE

142.

Rice Fields 赤をHueShiftしてみると #UE4 | @UNREALENGINE

143.

Rice Fields HSV計算 ちゃんとしたやつ 本来のHue調整と合わない #UE4 | @UNREALENGINE

144.

Rice Fields HSV計算 ちゃんとしたやつ 黄色 もっと合わない #UE4 | @UNREALENGINE

145.

Rice Fields HueShiftの中身は 座標変換 #UE4 | @UNREALENGINE

146.

Rice Fields 赤(1,0,0)の座標が 回転して… #UE4 | @UNREALENGINE

147.

Rice Fields こんな感じで色が変わる #UE4 | @UNREALENGINE

148.

Rice Fields 黄(1,1,0)にしたいけど長さが足りない #UE4 | @UNREALENGINE

149.

Rice Fields HSV計算 ちゃんとしたやつ 長さが足りないとこが暗い #UE4 | @UNREALENGINE

150.

Rice Fields 逆に黄(1,1,0)の場合は #UE4 | @UNREALENGINE

151.

Rice Fields 赤(1,0,0)にしたくても 長いし角度も合わない #UE4 | @UNREALENGINE

152.

Rice Fields HSV計算 ちゃんとしたやつ 長すぎるので明るくなる #UE4 | @UNREALENGINE

153.

Rice Fields HSV計算 ちゃんとしたやつ 長さと角度が合うとこは合う #UE4 | @UNREALENGINE

154.

Rice Fields 精度は微妙なので… 簡易調整にどうぞ☺ #UE4 | @UNREALENGINE

155.

Rice Fields Desaturationに関して #UE4 | @UNREALENGINE

156.

Rice Fields https://qiita.com/dgtanaka/items/f7fa2cb38e58bbe5f4a6 素晴らしい記事が #UE4 | @UNREALENGINE

157.

Rice Fields 素晴らしい記事が #UE4 | @UNREALENGINE

158.

Rice Fields #UE4 | @UNREALENGINE

159.

Rice Fields https://qiita.com/yoya/items/96c36b069e74398796f3 グレースケール化について #UE4 | @UNREALENGINE とても素晴らしい記事

160.

Rice Fields https://qiita.com/yoya/items/96c36b069e74398796f3 オススメです #UE4 | @UNREALENGINE

161.

Rice Fields Luminance Factorsを調整してもOKです #UE4 | @UNREALENGINE

162.

Rice Fields 次は水面のマテリアル #UE4 | @UNREALENGINE

163.

Rice Fields とても簡素 #UE4 | @UNREALENGINE

164.

Rice Fields Fresnel使ってます #UE4 | @UNREALENGINE

165.

Rice Fields https://qiita.com/dgtanaka/items/f7fa2cb38e58bbe5f4a6 素晴らしい記事が #UE4 | @UNREALENGINE

166.

Rice Fields #UE4 | @UNREALENGINE

167.

Rice Fields #UE4 | @UNREALENGINE

168.

Rice Fields #UE4 | @UNREALENGINE

169.

Rice Fields 自分で作っちゃうのも良いかもしれませんね #UE4 | @UNREALENGINE

170.

Rice Fields 反射 #UE4 | @UNREALENGINE

171.

Rice Fields PlanarReflectionです #UE4 | @UNREALENGINE

172.

Rice Fields 2回レンダリングされます #UE4 | @UNREALENGINE 重いですね!

173.

Rice Fields Clip処理も追加されるのでご注意を #UE4 | @UNREALENGINE

174.

Rice Fields 根本のぶっ刺し感を緩和したい #UE4 | @UNREALENGINE

175.

Rice Fields 橋本さんオススメの #UE4 | @UNREALENGINE Pixel Depth Offset

176.

Rice Fields 橋本さんオススメの #UE4 | @UNREALENGINE Pixel Depth Offset

177.

Rice Fields Megascansのアセットには いい感じの頂点カラーが入ってます #UE4 | @UNREALENGINE

178.

Rice Fields Megascansのアセットには いい感じの頂点カラーが入ってます #UE4 | @UNREALENGINE

179.

Rice Fields こいつを使っていい感じに馴染ませ #UE4 | @UNREALENGINE

180.

Rice Fields めだか #UE4 | @UNREALENGINE

181.

Rice Fields Niagaraです #UE4 | @UNREALENGINE

182.

Rice Fields 超素晴らしい講演 #UE4 | @UNREALENGINE

183.

Rice Fields https://www.youtube.com/watch?v=-UPZuuikYZ0 Niagaraでの魚群の作り方を解説されてます #UE4 | @UNREALENGINE

184.

Rice Fields ありがとうArran #UE4 | @UNREALENGINE

185.

Rice Fields ポスプロは特に変わったことはしてません #UE4 | @UNREALENGINE

186.

Rice Fields あるとき #UE4 | @UNREALENGINE ないとき

187.

Rice Fields r.Tonemapper.Sharpen Rebirthでも使われています #UE4 | @UNREALENGINE

188.

Rice Fields あるとき #UE4 | @UNREALENGINE ないとき

189.

Rice Fields 処理はPostProcessTonemap.usfの このあたりです #UE4 | @UNREALENGINE

190.

Rice Fields という感じで… #UE4 | @UNREALENGINE

191.

Rice Fields #UE4 | @UNREALENGINE

192.

Rice Fields というわけで 完成! #UE4 | @UNREALENGINE

193.

Rice Terraces ←棚田 水田→ #UE4 | @UNREALENGINE

194.

Rice Terraces 本当は くっつけたかった… #UE4 | @UNREALENGINE

195.

Rice Terraces Houdini Engineはランドスケープにも対応しています #UE4 | @UNREALENGINE

196.

Rice Terraces Houdiniでハイトフィールドとして作れば そのままランドスケープになります #UE4 | @UNREALENGINE

197.

Rice Terraces https://twitter.com/shiba_zushi/status/1197932882783686656?s=20 #UE4 | @UNREALENGINE

198.

Rice Terraces https://twitter.com/shiba_zushi/status/1197932882783686656?s=20 #UE4 | @UNREALENGINE

199.

Rice Terraces https://twitter.com/shiba_zushi/status/1197932882783686656?s=20 #UE4 | @UNREALENGINE

200.

Rice Terraces https://twitter.com/shiba_zushi/status/1197932882783686656?s=20 #UE4 | @UNREALENGINE

201.

Rice Terraces https://twitter.com/shiba_zushi/status/1197932882783686656?s=20 #UE4 | @UNREALENGINE

202.

Rice Terraces https://twitter.com/shiba_zushi/status/1197932882783686656?s=20 #UE4 | @UNREALENGINE

203.

Rice Terraces https://twitter.com/shiba_zushi/status/1197932882783686656?s=20 #UE4 | @UNREALENGINE

204.

Rice Terraces ハイトフィールドはマスクも簡単に取れるので 指定した場所に石をばら撒くとかも楽チンです #UE4 | @UNREALENGINE

205.

Rice Terraces 個人的にレンズフレアに 情報量の多いテクスチャを入れるのが好きです #UE4 | @UNREALENGINE

206.

Rice Terraces #UE4 | @UNREALENGINE

207.

Rice Terraces 完成! #UE4 | @UNREALENGINE

208.

Rice Terraces 次までにくっつけときます☺ #UE4 | @UNREALENGINE

209.

Rice Terraces ちなみに4.24でランドスケープでレイヤー使えたり BPブラシで形作ったりできます #UE4 | @UNREALENGINE

210.

まとめ #UE4 | @UNREALENGINE

211.

まとめ #UE4 | @UNREALENGINE

212.

まとめ Megascansは非常に高品質なアセットです #UE4 | @UNREALENGINE

213.

まとめ Megascansは非常に高品質なアセットです さらに分解、再構成してみると 楽しいかもしれません #UE4 | @UNREALENGINE

214.

まとめ Megascansは非常に高品質なアセットです さらに分解、再構成してみると 楽しいかもしれません HoudiniEngineはとても強力なツールです #UE4 | @UNREALENGINE

215.

まとめ Megascansは非常に高品質なアセットです さらに分解、再構成してみると 楽しいかもしれません HoudiniEngineはとても強力なツールです 便利な機能を使うだけでも お得感があるかもしれません #UE4 | @UNREALENGINE

216.

まとめ #UE4 | @UNREALENGINE

217.

まとめ http://historia.co.jp/archives/13600/ #UE4 | @UNREALENGINE

218.

ご清聴 ありがとうございました #UE4 | @UNREALENGINE