【Unite Tokyo 2019】SPARKCREATIVE始動で見えてきた最新VFX動向とSPARKGEARの最新機能について

ラストクラウディア×SPARKGEAR 「3D」あるいは「超2D≠3D」の話 株式会社アイディス 和泉森人 P. 1

自己紹介 和泉 森人 株式会社アイディス デザイン部 リードVFXデザイナー izumi@aidis.co.jp 略歴： ・代表作 ※1 ・ブレイブ フロンティア (VFX) ・ファイナルファンタジーブレイブエクスヴィアス ※2 (VFX) ・現在は「ラストクラウディア」のVFXのディレクション と制作、後進の育成に従事 ※1 ※2 ©Alim Co., Ltd. All Rights Reserved. © 2015-2019 SQUARE ENIX CO., LTD. All Rights Reserved. Developed by Alim Co., Ltd. P. 2

ラストクラウディアの特徴 タイトル ：ラストクラウディア ジャンル ：RPG 配信日 ：2019年4月15日 公式サイト ：https://www.lastcloudia.com/ 公式Twitter：https://twitter.com/lastcloudia ・リリース4ヶ月で７０万ユーザー突破 ・様々な技術のMIX ・2Dキャラ+3D背景のMIX ・ドット、2D、3D、ハイクオリティなムービー ・海外展開を前提としたアート ・3D造形差による好みを回避するドット ・日本で受け入れられるテイストのキャラ ・特殊な装備アイテム「アーク」 ・詰め込まれたこだわりと遊び P. 3

• https://www.lastcloudia.com/
• https://twitter.com/lastcloudia

パレットテクスチャで実現したフレキシブルデザイン ＜「シャープ」と「ソフト」のいいとこどり＞ パレットテクスチャの活用によって、 アルファクランチ表現によるシャープな輪郭も、発光感のあ るボケ足の長いソフトな表現も、自由自在 専用テクスチャの作成も不要 ヒットエフェクト パレットテクスチャのオフセットによるアルファクランチ表現 グレースケールテクスチャとパレットテクスチャの組み合わ せでシャープにもソフトにも自由に設定できる さらにパレットの適用度をオフセットさせることで アルファクランチも可能 アルファチャンネルの推移の幅を狭めれば、よりシャープに + 派手さを担保しつつ、視認性を考慮して、発生後、 余韻を残しつつ中央から晴れていくデザイン 特殊スキルエフェクト その他… 派手さ、発光感を要求されるところでは、シャープなエッジと ボケ足の長い加算エフェクトを併用 セルルックな見た目を要求されるところでは、アルファチャンネ ルの0～255の幅を短くしたり、あえてマッハバンド的なパレット を使用したり… P. 4

「超2D≠3D」3Dエフェクトと2Dイラストの融合 ＜イラストを活かし「命」を吹き込む＞ アーク 2Dのイラストが動き出すまで 元イラスト 5層に分解 SPARK Spine SPARK 古代文明の遺物という設定の装備品 「スノードーム」がモチーフ Spine ユニット詳細 完成 SPARK 元イラストを、描画順、回り込 みなどを考慮して、SPARK3層、 Spine2層の計5層に分解 イラストを元にした、ユニット（プレイヤーキャラ）のアニ メーションが鑑賞できる P. 5

「超2D≠3D」3Dエフェクトと2Dイラストの融合 ＜Spineとの連携で3Dと2Dを融合＞ Spineで制作された キャラクターの アニメーションに SPARKのエフェクトの 動きを合わせたい ボーンアタッチ機能活用例 キャラクターの持つ 杖の先端の宝玉の光 謎の少女ティリア Spineボーンアタッチ機能 モンスターの口から 流れるヨダレ 後ろの人物の持つ剣自体はSpineだが、 表面の虹模様のアニメーションはSPARK (虹模様をUVスクロールさせ剣の形でマスク、 ボーンアタッチ機能を使用して剣の動きに同期) P. 6

「超2D≠3D」3Dエフェクトと2Dイラストの融合 ちなみに… パーティクル種「ポリライン」を使用 鳥の翼や… モンスターの口から流れるヨダレ 設定によりバネやヒモのような挙動ができ、 慣性を表現できるパーティクル種 火炎放射など、応用次第で様々な状況で 活用できる P. 7

「超2D≠3D」3Dエフェクトと2Dイラストの融合 ＜元イラストを「超2D化」する＞ ■マスク付きディストーションマップ 元イラスト 黒キ死神メルザ イラストの形にあわせた メッシュを作成 Z投影用UVと、ディス トーション用のUVを作成 する RGBのBチャンネルの成分がある 箇所にだけディストーションがか かる 完成！ P. 8

おまけ… ラストクラウディア開発初期… まだSpine担当デザイナーがいない頃 「このキャラを、SPARKGEARを使って 『動かして』くれないか」 と言われて渡されたのが左のイラスト 動かせと言われても Spineのようなメッシュ変形は使えないし… ボーンとかないし… そもそもそういうツールじゃないし… 体の各パーツのメッシュつくるの面倒くさいなぁ… とはいえまぁディストーションとか使えばそこそこまぁ… 氷の刹姫セヴィア とりあえずやってみるか… P. 9

おまけ… できちゃった…♥ ↑これ全部SPARKGEAR P. 10

株式会社SPARK 代表取締役 岡村雄一郎 取締役副社長CTO 広本則行 SPARKGEARの 最新機能について

SPARKGEARとは？

SPARKGEARの概要

SPARKGEARの概要 • VFXを作るためのミドルウェア • Windows用のオーサリングツールとSDKから構成 • Unity他メジャーなゲームエンジンに対応済み • パーティクルツールではなくタイムラインやギミック機能も はいったVFX統合ツール

対応プラットフォーム

Unity SDKでの 対応プラットフォーム • Windows(DirectX9/DirectX11/DirectX12/OpenGL/Vulkan) • OSX(OpenGL/Metal) • Android(OpenGLES/Vulkan) • iOS(OpenGLES/Metal) • Universal Windows Platform(DirectX11) • WebGL • PlayStation 4 • Nintendo Switch

Unity SDKでの 対応機能 • ScriptableRenderPipeline • LWRP(2018.3) • LWRP(2019.1) • アセットバンドル • Prefab • フレームバッファエフェクト • 深度バッファエフェクト • Culling Maskによるカメラ毎のレンダリング

SPARGEARのVFXを Unityで扱う

Unity向けのバイナリ出力

インポートとPrefab

Unity上で出来る事 • Transformを使った移動回転拡縮 • Culling Maskを用いた描画対象のカメラの切り分け • D&D時に自動的にPrefab化される • VFXデータへのアクセスはSPFXInstanceコンポーネントで操作を行う • Unityフォグの影響を受ける • Unityライトの影響を受ける • Unityコリジョンとの衝突判定 • 再生速度の操作

SPARKGEARのコンフィグ

フレームバッファの利用

深度バッファの利用

バインダー

コリジョン

SPARKGEAR VER.2

SPARKGEAR VER.2 • 2019年9月よりご希望の会社様への提供を開始 • VER.1のデータは基本的にそのまま開くことが出来る • 対応プラットフォームは Windows/OSX/Android/iOS/PlayStation4/NINTENDO Switch/WebGL • 対応ゲームエンジンは Unity他 • DirectX12に対応 • Vulkanに対応 • テクスチャの管理をよりシンプルに • バイナリの出力オプションをよりシンプルに

UNITY • DirectX12に対応（Unity2019.1より、Windows) • Vulkanに対応（Unity2019.1より、Windows/Android) • LWRPに対応（Unity2018.3より）

プロシージャルモデル

概要 ● ● ● ノードベースでエディットできるモデル ノードの状態をリアルタイムにVFXに反映 モデルをFBXファイルに出力可能

組み込み済みの ジオメトリノード ● ● ● ● ● ● ● ● ● 円盤 球 円筒 竜巻 円盤 ドーナツ モーションパス 平面 正二十面体

モデルノード ● ● 他のモデルをジオメトリノードにできる プロシージャルモデルもジオメトリノード にできる

サブディビジョンノード ピクサー社の 『OpenSubdiv』を使用

ディスプレイスメントマップ ノード テクスチャーをディスプレイスメントマップとして 変形

プロシージャルテクスチャ

概要 ● ● ● ノードベースでエディットできるテクスチャ ノードの状態をリアルタイムにVFXに反映 テクスチャをTGAファイルに出力可能

GPUパーティクル • GPUを用いて大量のパーティクルを 発生させるためのシステム • GPUが対応していない場合は CPUでのエミュレーションに切り替わる • フローマップを使ったMotionVectorにも対応

流体 • Stable Fluidsベースの流体シミュレーション • そのまま実機上で出せるのはCS5.0と ボリュームテクスチャが使える環境のみ • レンダリングしてフリップブックとして使う想定 • フローマップのレンダリングにも対応

流体テクスチャペインター • StableFluidを用いた流体ペインター • 上下左右が連続してつながっており 画像が必ずループするようになって いる

モーションベクター フローマップを使った Houdiniなどから出力した モーションべクターパー フローマップを使って少 ティクルをGPUパーティ ない枚数でもフリップ クルの機能として対応 ブックを綺麗に

頂点アニメーションテクスチャ 位置情報などをテクス チャに焼き付けて複雑な メッシュアニメーション が出来る機能 Houdiniなどから出力した VATデータの再生ができる ようになりました

粒子流体 • こちらはまだ開発中 • GPUを用いた粒子ベースの流体シミュレーション • こちらもグリッドべースの流体と同様にVATデータでの出力を行ってモバイルでも 動作するように開発中

実演

今後のバージョンアップ について

今後のバージョンアップについて • ノードベースのマテリアルエディター • プロシージャルテクスチャのノードの順次追加 煙や炎などのボリュームレンダリング系の開発が進行中 • プロシージャルモデルのノードの順次追加 ブール演算と破砕の開発が進行中 • 流体のシミュレーション結果のキャッシュ • 流体のVertexAnimationTexture出力対応 • GPUパーティクル／流体用のベクターフィールドエディター • 不透明パーティクルのシャドウキャスト • NativeRenderingPluginを用いないバージョンの開発

Ｑ＆Ａ