---
title: 実戦投入事例！　Niagaraで地球の風をビジュアライズ！
tags:  #ue4 #unreal engine #historia #niagara #enterprise #unreal engine 4 #エンジニア  
author: [株式会社ヒストリア](https://convert.docswell.com/user/historia_Inc)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/54EMYXM6EW.jpg?width=480
description: 2020年9月12日に行われた「出張ヒストリア！ ゲーム開発勉強会2020」にて発表させていただいたスライドです。  イベント詳細 https://historia.co.jp/archives/16322/  講演動画 https://youtu.be/674Gf3GuV00  講演者： 橘内 正貴(株式会社ヒストリア　ヒストリア・エンタープライズチーム　エンジニア)  講演内容： UE4.25にて正式リリースされ、実戦投入が可能になったNiagaraVFXSystem。 ヒストリア・エンタープライズでは早速！　風や海流、波といった地球環境のビジュアライズツールをNiagara用いて製品開発を行い、今夏に放送された番組にて採用されました。 本講演では風のビジュアライズに焦点をあてて、外部データ（計測データ）を元にNiagaraでビジュアライズを行うアップローチ方法や、 Niagaraのモジュールを新たに作成し既存モジュールの不足部分を埋めた実例、その他NiagaraのTipsなど赤裸々にお話します。
published: September 25, 20
canonical: https://convert.docswell.com/s/historia_Inc/5LJ6DZ-niagara-238643062
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/54EMYXM6EW.jpg)

実戦投入事例！
Niagaraで地球の風をビジュアライズ！
2020/09/12
ヒストリア・エンタープライズエンジニア
橘内 正貴
historia Inc.


# Page. 2

![Page Image](https://bcdn.docswell.com/page/ZPER9NVNJ9.jpg)

自己紹介
• 2019/6からヒストリア・エンタープライズにJoin
現在の肩書はエンタープライズエンジニア
• ue4歴は約3年（historia以前は趣味レベル）
こんなものを作ったりしてました
https://www.youtube.com/watch?v=hU1vRI4E6sc
historia Inc.
ちなみに前職は銭湯で受付のアルバイトをしていました


# Page. 3

![Page Image](https://bcdn.docswell.com/page/NP7XQNZ8EX.jpg)

コンテンツ紹介
Youtube：https://youtu.be/QoC4FEGD7fQ
historia Inc.


# Page. 4

![Page Image](https://bcdn.docswell.com/page/637K9N8L7D.jpg)

まえおき
開発Ver：UE4.25.1
講演内容は最適解ではない部分も多々あるか
と思います。参考程度に！
C++やBP関連の実装に関しては割愛します
historia Inc.


# Page. 5

![Page Image](https://bcdn.docswell.com/page/4LJ3WV26J5.jpg)

ビジュアライズってどうやったの？
• Webで公開されている気象データ
UE4外
「GRIB2(圧縮バイナリ)」のダウンロード
• →専門の外部ツールでCSV化
• UE4C++でCSVをテキスト読み込みし、数値配列にパース
UE4C++
&amp;BP
Niagara
historia Inc.
• →数値配列をテクスチャに変換
• →テクスチャをナイアガラへ渡す
• テクスチャの色情報を使ってパーティクルの動き・色を制御


# Page. 6

![Page Image](https://bcdn.docswell.com/page/V8JDK8ZMEG.jpg)

ビジュアライズってどうやったの？ -データ(GRIB2)解説
• 風のデータは緯度経度0.25度
のグリッドでサンプリング
• 緯度方向と経度方向のベクト
ル量が格納されている
historia Inc.


# Page. 7

![Page Image](https://bcdn.docswell.com/page/4VEPK8DQ78.jpg)

• Q：なんでテクスチャ化？
• A：ナイアガラは配列を直接扱えないから
経度180°
緯度
+90°
経度0°
経度
+180°
U0
V0
緯度
0°
緯度-90°
historia Inc.
V1
U1


# Page. 8

![Page Image](https://bcdn.docswell.com/page/L27VVN1P7Q.jpg)

historia Inc.


# Page. 9

![Page Image](https://bcdn.docswell.com/page/Z5JGLK2Q7L.jpg)

Niagaraはなにをやってるの？ -モジュール構成
historia Inc.


# Page. 10

![Page Image](https://bcdn.docswell.com/page/V47QYNPWEP.jpg)

Niagaraはなにをやってるの？ -モジュール構成
• 1、StaticMeshLocationで地
球表面にパーティクルをス
ポーン
• 2、VortexVelocityで地球表面
に沿ってパーティクルを移動
• 3、Colorで透過や色付け
historia Inc.


# Page. 11

![Page Image](https://bcdn.docswell.com/page/DKE4WGY1J1.jpg)

Niagaraはなにをやってるの？
-VortexVelocityの仕事
• Velocity Amount
→風速を計算してパーティクルの速度に変換
• VortexAxis
→風のベクトルを3次元の回転に変換
historia Inc.


# Page. 12

![Page Image](https://bcdn.docswell.com/page/PL71YD65JG.jpg)

パーティクルとテクスチャの関係
Wikipediaより引用
XYZ→lat,lon≒UV
緯度
+90°
経度180°
経度0°
経度
+180°
U0
V0
緯度
0°
緯度90°
historia Inc.
V1
U1


# Page. 13

![Page Image](https://bcdn.docswell.com/page/8G7WGYWWE2.jpg)

どうやってるの？（VertexVelocityでパーティクルを動かす）
• 慣性をつけるための改造
historia Inc.


# Page. 14

![Page Image](https://bcdn.docswell.com/page/W4JZLX52E3.jpg)

どうやってるの？ -補助的に使っているモジュール
• Facingで地球の表面にきちんと沿わせる
• ScaleSpriteSizeBySpeedで速度差による表示ムラを軽減
historia Inc.


# Page. 15

![Page Image](https://bcdn.docswell.com/page/KYE6W4V6EV.jpg)

どうやってるの？ -Rendere設定
• AlignmentをVelocityに設定、移動方向を向かせる
• FacingをCustomに設定、前述のモジュールと連携する
historia Inc.


# Page. 16

![Page Image](https://bcdn.docswell.com/page/5GE5MQD5E4.jpg)

どうやってるの？
-色回り
• ColorCurveを入力に使用、ベクトルの強さで色分け
• 透過はベクトルの強さとLifeTimeでフェード処理
historia Inc.


# Page. 17

![Page Image](https://bcdn.docswell.com/page/V9729P8GJR.jpg)

どうやってるの？（BluePrintとナイアガラの連携Tips）
• BPでテクスチャはナイアガラに受け渡し
• ReinitializeSystemノードを更新したいタイミングで呼ぶ
historia Inc.


# Page. 18

![Page Image](https://bcdn.docswell.com/page/5DJY456G7M.jpg)

ここがよかったよナイアガラ
風の表現の為にとにかく物量が欲しい
→GPUパーティクルでバンバンだせる！
モジュールが自作できる
→思い通りのロジックでパーティクルが動く！
シーケンサーで変数を動的に変更可能
→表現を詰めるイテレーションが早い！
historia Inc.


# Page. 19

![Page Image](https://bcdn.docswell.com/page/2V7NYNZ8E8.jpg)

Niagara 罠Tips 1
• （おそらくGPUパーティクル限定）
パーティクルの後ろのオブジェクトが動くと、変なブ
ラーが発生する
historia Inc.


# Page. 20

![Page Image](https://bcdn.docswell.com/page/GYJ9PRZX73.jpg)

Niagara 罠Tips 1
Youtube：https://youtu.be/1YdmBTW5DvA
historia Inc.


# Page. 21

![Page Image](https://bcdn.docswell.com/page/5GJ8DW19JD.jpg)

Niagara 罠Tips 1
• カメラ側が動く分には影響がなかった
• →カメラを動かすことで一応対策可能
• （この現象を確認した時点で既に地球をガンガン回してシーケンサが作られていたので全て
作り直しに……その節は大変ご迷惑をおかけしました）
historia Inc.


# Page. 22

![Page Image](https://bcdn.docswell.com/page/MLJLMNQMER.jpg)

Niagara 罠Tips 2
• GPUパーティクルだとRibbonRendereが使えない
• 風が尾を引く表現をしたかったが、どうしても直せず。
• 形状や動き、密度で風感を表現する方向にシフトした
historia Inc.


# Page. 23

![Page Image](https://bcdn.docswell.com/page/547MYX167W.jpg)

Niagara 罠Tips 3
• StaticMeshLocationのカリングが効かない問題
historia Inc.


# Page. 24

![Page Image](https://bcdn.docswell.com/page/ZP7R9NLNE9.jpg)

カリング範囲：0.5
スポーンレート：50,000,000
Youtube：https://youtu.be/RfZjx1f2y7w
historia Inc.


# Page. 25

![Page Image](https://bcdn.docswell.com/page/NPJXQNW87X.jpg)

Niagara 罠Tips 3
• StaticMeshLocationのカリングが効かない問題
• → WorldAxisConstraintでパーティクルを多く出せるよ
うに制御しているはずなのに動画出力とするとなぜか
減ってしまう
historia Inc.


# Page. 26

![Page Image](https://bcdn.docswell.com/page/63JK9NVLJD.jpg)

Niagara 罠Tips 3
スポーンした後に減らしてる！？
historia Inc.


# Page. 27

![Page Image](https://bcdn.docswell.com/page/4LE3WVM6E5.jpg)

Niagara 罠Tips 3
• 負荷回避のためのStaticMeshLocation改造
historia Inc.


# Page. 28

![Page Image](https://bcdn.docswell.com/page/V8EDK86M7G.jpg)

カリング範囲：0.5
スポーンレート：120,000
Youtube：https://youtu.be/UZqEqrRRFjE
historia Inc.


# Page. 29

![Page Image](https://bcdn.docswell.com/page/4V7PK8YQJ8.jpg)

実務的な豆知識：動画書き出しの自動化
• 今回は出力するカット数が多かったので、コマンドライ
ンでシーケンサー書き出しを自動化するbatをつくった
• 参考
https://docs.unrealengine.com/ja/Engine/Sequence
r/Workflow/RenderAndExport/RenderingCmdLine/in
dex.html
historia Inc.


# Page. 30

![Page Image](https://bcdn.docswell.com/page/L2JVVNGPJQ.jpg)

実務的な豆知識：動画書き出しの自動化の罠
• 解像度をコマンド（ -ResX=####・-ResY=#### ）で設定で
きるはずなのですが、設定してもなぜかディスプレイ解
像度にひっぱられます
• UE4上のシーケンサー書き出しなら設定解像度で出力
• 恐らくフルスクリーン表示が原因っぽいですが、納期が
それどころじゃなかったのでエンジニア的解決は行えず
historia Inc.


# Page. 31

![Page Image](https://bcdn.docswell.com/page/Z5EGLK8QJL.jpg)

まとめ
• Niagara×データビジュアライズ、結構いける！
• データをナイアガラに渡すパイプラインさえ作ればその
あとの表現部分を詰めるイテレーションもかなり早い！
• 嵌ろう！モジュール自作沼！
historia Inc.


# Page. 32

![Page Image](https://bcdn.docswell.com/page/V4JQYN9W7P.jpg)

巻末付録
プロジェクトの参考にしたサイト
historia Inc.


# Page. 33

![Page Image](https://bcdn.docswell.com/page/DK74WGX1E1.jpg)

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.


# Page. 34

![Page Image](https://bcdn.docswell.com/page/PLJ1YDN5EG.jpg)

ナイアガラを勉強するのに参考にしたサイト
• Niagaraの入門
https://crabpunch.hatenablog.com/archive/categor
y/Niagara
• 新しいエフェクトツール、Niagaraを楽しもう！ ～
Niagara作例のブレイクダウン～
https://www.slideshare.net/EpicGamesJapan/ue4fe
steast2018-niagara
historia Inc.


