実戦投入事例！ Niagaraで地球の風をビジュアライズ！
5.9K Views
September 25, 20
スライド概要
2020年9月12日に行われた「出張ヒストリア！ ゲーム開発勉強会2020」にて発表させていただいたスライドです。
イベント詳細
https://historia.co.jp/archives/16322/
講演動画
https://youtu.be/674Gf3GuV00
講演者：
橘内 正貴(株式会社ヒストリア ヒストリア・エンタープライズチーム エンジニア)
講演内容：
UE4.25にて正式リリースされ、実戦投入が可能になったNiagaraVFXSystem。
ヒストリア・エンタープライズでは早速！ 風や海流、波といった地球環境のビジュアライズツールをNiagara用いて製品開発を行い、今夏に放送された番組にて採用されました。
本講演では風のビジュアライズに焦点をあてて、外部データ（計測データ）を元にNiagaraでビジュアライズを行うアップローチ方法や、
Niagaraのモジュールを新たに作成し既存モジュールの不足部分を埋めた実例、その他NiagaraのTipsなど赤裸々にお話します。
株式会社ヒストリアは、Unreal Engine専門のソフトウェア開発会社です。ゲーム事業とエンタープライズ事業、2 つの軸でソフトウェアの企画、開発を行っています。また、Unreal Engine の学習を目的とした作品制作コンテスト『UE5ぷちコン』や、『出張ヒストリア！ ゲーム開発勉強会』を主催、技術ブログを毎週更新など、Unreal Engine コミュニティを盛り上げる活動も行っております。
関連スライド
各ページのテキスト
実戦投入事例！ Niagaraで地球の風をビジュアライズ！ 2020/09/12 ヒストリア・エンタープライズエンジニア 橘内 正貴 historia Inc.
自己紹介 • 2019/6からヒストリア・エンタープライズにJoin 現在の肩書はエンタープライズエンジニア • ue4歴は約3年（historia以前は趣味レベル） こんなものを作ったりしてました https://www.youtube.com/watch?v=hU1vRI4E6sc historia Inc. ちなみに前職は銭湯で受付のアルバイトをしていました
コンテンツ紹介 Youtube：https://youtu.be/QoC4FEGD7fQ historia Inc.
まえおき 開発Ver：UE4.25.1 講演内容は最適解ではない部分も多々あるか と思います。参考程度に！ C++やBP関連の実装に関しては割愛します historia Inc.
ビジュアライズってどうやったの？ • Webで公開されている気象データ UE4外 「GRIB2(圧縮バイナリ)」のダウンロード • →専門の外部ツールでCSV化 • UE4C++でCSVをテキスト読み込みし、数値配列にパース UE4C++ &BP Niagara historia Inc. • →数値配列をテクスチャに変換 • →テクスチャをナイアガラへ渡す • テクスチャの色情報を使ってパーティクルの動き・色を制御
ビジュアライズってどうやったの？ -データ(GRIB2)解説 • 風のデータは緯度経度0.25度 のグリッドでサンプリング • 緯度方向と経度方向のベクト ル量が格納されている historia Inc.
• Q：なんでテクスチャ化？ • A：ナイアガラは配列を直接扱えないから 経度180° 緯度 +90° 経度0° 経度 +180° U0 V0 緯度 0° 緯度-90° historia Inc. V1 U1
historia Inc.
Niagaraはなにをやってるの？ -モジュール構成 historia Inc.
Niagaraはなにをやってるの？ -モジュール構成 • 1、StaticMeshLocationで地 球表面にパーティクルをス ポーン • 2、VortexVelocityで地球表面 に沿ってパーティクルを移動 • 3、Colorで透過や色付け historia Inc.
Niagaraはなにをやってるの？ -VortexVelocityの仕事 • Velocity Amount →風速を計算してパーティクルの速度に変換 • VortexAxis →風のベクトルを3次元の回転に変換 historia Inc.
パーティクルとテクスチャの関係 Wikipediaより引用 XYZ→lat,lon≒UV 緯度 +90° 経度180° 経度0° 経度 +180° U0 V0 緯度 0° 緯度90° historia Inc. V1 U1
どうやってるの？（VertexVelocityでパーティクルを動かす） • 慣性をつけるための改造 historia Inc.
どうやってるの？ -補助的に使っているモジュール • Facingで地球の表面にきちんと沿わせる • ScaleSpriteSizeBySpeedで速度差による表示ムラを軽減 historia Inc.
どうやってるの？ -Rendere設定 • AlignmentをVelocityに設定、移動方向を向かせる • FacingをCustomに設定、前述のモジュールと連携する historia Inc.
どうやってるの？ -色回り • ColorCurveを入力に使用、ベクトルの強さで色分け • 透過はベクトルの強さとLifeTimeでフェード処理 historia Inc.
どうやってるの？（BluePrintとナイアガラの連携Tips） • BPでテクスチャはナイアガラに受け渡し • ReinitializeSystemノードを更新したいタイミングで呼ぶ historia Inc.
ここがよかったよナイアガラ 風の表現の為にとにかく物量が欲しい →GPUパーティクルでバンバンだせる！ モジュールが自作できる →思い通りのロジックでパーティクルが動く！ シーケンサーで変数を動的に変更可能 →表現を詰めるイテレーションが早い！ historia Inc.
Niagara 罠Tips 1 • （おそらくGPUパーティクル限定） パーティクルの後ろのオブジェクトが動くと、変なブ ラーが発生する historia Inc.
Niagara 罠Tips 1 Youtube：https://youtu.be/1YdmBTW5DvA historia Inc.
Niagara 罠Tips 1 • カメラ側が動く分には影響がなかった • →カメラを動かすことで一応対策可能 • （この現象を確認した時点で既に地球をガンガン回してシーケンサが作られていたので全て 作り直しに……その節は大変ご迷惑をおかけしました） historia Inc.
Niagara 罠Tips 2 • GPUパーティクルだとRibbonRendereが使えない • 風が尾を引く表現をしたかったが、どうしても直せず。 • 形状や動き、密度で風感を表現する方向にシフトした historia Inc.
Niagara 罠Tips 3 • StaticMeshLocationのカリングが効かない問題 historia Inc.
カリング範囲：0.5 スポーンレート：50,000,000 Youtube：https://youtu.be/RfZjx1f2y7w historia Inc.
Niagara 罠Tips 3 • StaticMeshLocationのカリングが効かない問題 • → WorldAxisConstraintでパーティクルを多く出せるよ うに制御しているはずなのに動画出力とするとなぜか 減ってしまう historia Inc.
Niagara 罠Tips 3 スポーンした後に減らしてる！？ historia Inc.
Niagara 罠Tips 3 • 負荷回避のためのStaticMeshLocation改造 historia Inc.
カリング範囲：0.5 スポーンレート：120,000 Youtube：https://youtu.be/UZqEqrRRFjE historia Inc.
実務的な豆知識：動画書き出しの自動化 • 今回は出力するカット数が多かったので、コマンドライ ンでシーケンサー書き出しを自動化するbatをつくった • 参考 https://docs.unrealengine.com/ja/Engine/Sequence r/Workflow/RenderAndExport/RenderingCmdLine/in dex.html historia Inc.
実務的な豆知識：動画書き出しの自動化の罠 • 解像度をコマンド（ -ResX=####・-ResY=#### ）で設定で きるはずなのですが、設定してもなぜかディスプレイ解 像度にひっぱられます • UE4上のシーケンサー書き出しなら設定解像度で出力 • 恐らくフルスクリーン表示が原因っぽいですが、納期が それどころじゃなかったのでエンジニア的解決は行えず historia Inc.
まとめ • Niagara×データビジュアライズ、結構いける！ • データをナイアガラに渡すパイプラインさえ作ればその あとの表現部分を詰めるイテレーションもかなり早い！ • 嵌ろう！モジュール自作沼！ historia Inc.
巻末付録 プロジェクトの参考にしたサイト historia Inc.
CSVのテクスチャ化の際に参考にしたサイト（C++サンプル） • UE4/C++: メッシュのマテリアルやテクスチャーを C++コードで制御する方法 https://usagi.hatenablog.jp/entry/2017/07/26/115603 • Generating Procedural Textures https://www.orfeasel.com/generating-procedural-textures/ historia Inc.
ナイアガラを勉強するのに参考にしたサイト • Niagaraの入門 https://crabpunch.hatenablog.com/archive/categor y/Niagara • 新しいエフェクトツール、Niagaraを楽しもう！ ～ Niagara作例のブレイクダウン～ https://www.slideshare.net/EpicGamesJapan/ue4fe steast2018-niagara historia Inc.