[UE4] ネコぱらいぶ☆で使われた技術

先日のエイプリルフールに NEKO WORKs 様より公開されました「ネコぱらいぶ☆」にて、開発を担当させていただきました。

ネコぱらいぶ☆ 特設ページ
http://nekovr.club/

VRモード/非VRモードでの実行ファイルに加え、360度動画としても公開されております。
360度動画はこちら。

コンテンツの内容に関しては特設ページを参照して頂いた方が良いかと思いますが、クオリティアップの為にいくつか技術的な試みを行ったので簡単に紹介させて頂きます。

ネコぱらいぶ☆で検証/実装した内容

ネコぱらいぶ☆は UE4.11 Preview7 で作られています。
本来は製品にPreview版を用いるのは良くないのですが、当初からエンジンを拡張して使用する構想があり、更にワークフローの主軸として検討していた シーケンサー について4.10版と4.11版をソースコードレベルで解析した結果、4.11の方が圧倒的に安定性が良く拡張しやすい作りとなっていたため、多少の懸念があったとしても4.11版で作っていった方がクオリティを出していけるという判断からです。
以下、ネコぱらいぶ☆で検証/実装した内容のリストです。

GDCでも目玉機能として紹介されたシーケンサーを用いた複数人並行作業
シーケンサーからマテリアルパラメータコレクションのプロパティ変更及びプレビューできるようにするエンジン拡張
AfterEffectsで作成したモーショングラフィックス用の連番ファイルをFlipbookで再生
通常のライティングは行わず、トゥーンレンダリング用にマテリアルを構成し、照明と同期してキャラや背景の色を変える仕組み
InstancedStaticMeshを用いた軽量サイリウム描画
ShowDownデモで用いられたフェイクシャドウ（板ポリと減算マテリアルによる足影）
マテリアルパラメータコレクションによる複数SceneCaptureの切り替えと負荷対策
半透明や加算、マスクを使用せず、どうしても必要な部分に関してはポリゴン化することによる負荷対策
スクリーンショット付きTwitter投稿機能
PNG生データを加工してロゴを上乗せする機能
360度動画対応

こうやってリスト化すると結構ありますね…！
また、実装したけど今回は必要が無くなったのでオミットした内容として、「VR表示における安定した輪郭線描画手法」や「リミテッドアニメーション」というのもあったりします。
特筆はしませんが目線を合わせてカメラ切り替えや、3DサウンドといったVRに必要な要素も組み込んであります。

実作業的としてはそれほど長い期間を取ることができなかったのですが、ネコぱら自体がとても魅力的なコンテンツであったため、モチベーションも高く最後まで走り切ることができたプロジェクトでした。
今回はそれぞれ簡単にスクリーンショット付きでご紹介させて頂きます。
全てを細かく書くと長くなってしまうため、今回は紹介程度とします。
詳細な実装内容/手法に関しては追って別記事や講演の場等で発表させて頂ければと思います。

GDCでも目玉機能として紹介されたシーケンサーを用いた複数人並行作業

UE4を開発する Epic Games 様が GDCで発表された内容の中に シーケンサー という機能があります。
これは主にデモ/カットシーン用のタイムラインエディタで、元々使われていたマチネに置き換わる新しいツールとして期待されています。
シーケンサーがマチネより優れている点としては、ざっと思いつく限りでも以下のものがあります。

サブトラックという名前で別のLevelSequenceアセットをタイムラインに乗せる事ができるため、複数人での作業が簡単になる
シーケンサーエディタを開いた状態でもゲームプレイを開始したり、保存することができる
キーを打つ作業がマチネと比べて直感的

ネコぱらいぶ☆はプログラマが一人、アーティストが一人、ピンポイントで何名かに少し手伝ってもらったくらいの少人数プロジェクトです
ただ、そんな中でもサブトラックの存在はとても大きく、各人の作業待ち時間をほとんど無くしてくれました。

シーケンサーはいいぞ

シーケンサーからマテリアルパラメータコレクションのプロパティ変更及びプレビューできるようにするエンジン拡張

各マテリアルの中でグローバルに設定できるプロパティとして使えるマテリアルパラメータコレクションという機能があります。
こちらはとても強力で特に映像コンテンツを制作する場合には有効活用することで作品のクオリティを上げるために役立ちます。
ただ、標準機能ではマテリアルパラメータコレクションのプロパティをシーケンサー上からコントロールする機能が用意されていなかったため、エンジンを拡張して独自に実装しました。
上記動画ではシーケンサー上からマテリアルパラメータコレクションのプロパティ変更をプレビューできることが確認できます。

AfterEffectsで作成したモーショングラフィックス用の連番ファイルをFlipbookで再生

ネコぱらいぶ☆では演出の一つとしてモーショングラフィックスを組み込んでいます。
モーショングラフィックスは下記のように AfterEffects を用いて連番ファイルとして作成し、Flipbookを用いて再生しています。

AfterEffects の編集画面

出来上がった連番ファイル

通常のライティングは行わず、トゥーンレンダリング用にマテリアルを構成し、照明と同期してキャラや背景の色を変える仕組み

今回はUE4が得意とする物理ベースレンダリングを使ってもコンテンツに合わないため、背景の一部以外はライティングを行わずにマテリアル側でのパラメータ調整によりトゥーンレンダリングを実現しています。
この時にマテリアルパラメータコレクションを用いてキャラや背景等の別オブジェクトの色や明るさが同期されるようにもしています。
ちなみに最終的にシーン上からライトは完全に排除されました。

InstancedStaticMeshを用いた軽量サイリウム描画

今回はVR対応プロジェクトであり、できるだけ描画負荷を下げたいという目的があったため、大量のサイリウム描画には InstancedStaticMesh を使用しました。
上記画像では100本近くのサイリウムが表示されておりますが、MeshDrawCall はたったの 6 です。
しかし、StaticMeshなのでボーンを入れてアニメーション制御することはできません。
そのためマテリアル側で WorldPositionOffset を使用し、マテリアルパラメータコレクションからプロパティを制御することで、シーケンサー上からサイリウムの動きを付けられるように実装しました。

ShowDownデモで用いられたフェイクシャドウ（板ポリと減算マテリアルによる足影）

公開されている ShowDown デモの中で使用されているフェイクシャドウをネコぱらいぶ☆でも参考に実装致しました。
これにより影を表示するための描画コストを削減しています。
公式の解説ページはこちらになります。

マテリアルパラメータコレクションによる複数SceneCaptureの切り替えと負荷対策

マテリアルパラメータコレクションのプロパティから表示する元のRenderTargetを切り替えられるようにして、シーケンサー制御できるように実装しました。
これにより演出の調整がしやすくなっています。
ただ、SceneCaptureは描画回数が増えるため、描画負荷軽減のために必要のないものはキャプチャーしないようにする対応等も行っています。
また、プレビューでは合わせ鏡のように連続して写り込んでしまっている所も、再生時にはそうならないようにHidden設定を行って対応しています。

半透明や加算、マスクを使用せず、どうしても必要な部分に関してはポリゴン化することによる負荷対策

今回はフェイクシャドウによる足影以外では半透明や加算、マスクを使用していません。
上記はインゲームでのシェーダー複雑度ですが、シーン全体として単純化されているのがわかるかと思われます。
演出のクオリティは保ちつつも、できるだけパフォーマンスを向上させるために細かく調整してあります。

スクリーンショット付きTwitter投稿機能
PNG生データを加工してロゴを上乗せする機能

個人制作のプラグインですが、WebApiプラグインでOAuth認証に対応し、スクリーンショット付きTwitter投稿機能を実装しました。
更に撮影したスクリーンショット（PNG形式）を投稿する直前にデータを直接書き換え、右下にロゴが上乗せされるようにしてあります。

360度動画対応

冒頭でも取り上げましたが、実行ファイルとは別にYoutubeにて360度動画を公開しています。
こちらは公開されているプラグインが不安定だったため、フォーラム等を参考に別のやり方で実装しました。
そちらも機会があれば公開していければと思います。

最後に

エイプリルフールネタとして終わらせるには勿体無いくらいのクオリティは出せたのではないかと思ってます。
短い期間の中でしたが、弊社からの要望や確認依頼を迅速に対応して頂けた NEKO WORKs 様にはとても感謝しております。
関係者の皆様、大変お疲れ様でした。

ネコぱらはいいぞ