ぼっちプログラマのメモ

UE4とかUE5とかについて書いたり書かなかったり。

Frame Grabber機能を使って、レンダリング結果(フレームバッファ)をテクスチャ化する方法について

追記 2022/09/01

4年ぶりにサンプル更新しました。今はUE5.0.3に対応してます。
github.com

はじめに

ゲーム中に今画面に映っている内容をテクスチャ化したいケース、色々あると思います!
バトル画面への遷移演出(画面がパリーンと割れたり、ねじ曲がったり…)で使ったり、セーブ画面でのサムネイルだったり…などなど

上記のようなことをしたい場合、SceneCapture2DアクターやSceneCaptureComponent2Dを使うのが一般的です。
api.unrealengine.com

しかし、SceneCapture系は同じ内容をもう一度描画する必要があるため、かなりの処理負荷が発生します…。そのため、画面をキャプチャしたタイミングでフレームレートが急激に低下し、カクつきが発生してしまう可能性があります。
少し前のバージョンから描画対象のアクターを限定できたり、使用するポストプロセスを制限することは可能になりました。それらを駆使すれば負荷は抑えられますが、見た目が元の描画結果と異なってしまうため、やりたかった演出とは程遠いものになっていまう可能性が出てきます。

近い機能としてスクリーンショット機能があります。しかし、これはテクスチャアセットではなく .pngファイルで出力するため、ゲーム中で使用するのは少し面倒です。処理負荷もそこそこあります。
api.unrealengine.com
pafuhana1213.hatenablog.com

Frame Grabber

そこで今回ご紹介するのがFrame Grabber機能です!
api.unrealengine.com

この機能を使えば、描画結果(フレームバッファ)から直接テクスチャアセットを作成することが可能です!そのため、SceneCapture系のようにもう一度描画する必要がないため、処理負荷を大幅に抑えることが可能です!さらに、ポストプロセス適用後の絵をキャプチャできるので、SceneCapture系であった微妙な色味の違いも回避できる(はず)です!

Frame Grabberを用いたサンプル

ただ…C++が必要になったりで…少し使うのが面倒なので…
今回久々にサンプルを用意しました!
github.com

  • 描画結果をテクスチャ化して、Materialに渡すだけの簡単なサンプルです
  • 1キーを押すとキャプチャ開始します(Level BP参照)
  • 詳細はFrameGrabberActor.cpp / hをご確認くださいまし。
  • UE4.20.2 + PC環境で動作確認済みです。(たぶん、UE4.18, 4.19でも動くはず)
    • Androidでは動作しないため、glReadPixels(RHIReadSurfaceData )を使用する必要があるとのこと
  • 用途に応じて改造すること推奨。雑実装なので…

注意点としましては、UIも含めた描画結果がテクスチャ化されます。これはFrame Grabberの仕様です…。UIを含まない描画結果、つまりポストプロセス適用直後のフレームバッファをキャプチャできるようにするとは聞いています…ご期待下さい…!
(もしお仕事などの関係で早くほしいという方は…ご一報くださいまし)

ではでは~

「出張ヒストリア! ゲーム開発勉強会2018」にてUE4のポストプロセスに関する講演をしました!

atnd.org

2018/8/5に開催された「出張ヒストリア! ゲーム開発勉強会2018」にて、UE4のポストプロセスの使い方・各機能の紹介について講演しました!

www.slideshare.net

ぷちコンなどで「ポストプロセスがデフォルト設定のままでもったいないなぁ」と思うことがしばしばあり、どこかのタイミングで話したいとずっと思っていたので、講演の場を頂いたヒストリアさんには本当に感謝感謝です。今回時間の関係で話さなかったポストプロセスマテリアルについては別の機会で話せたらなぁと思ってます(スライド作るの大変だろうなぁ…(;´∀`))。

この資料が少しでも作品作りの役に立てば幸いです。ではでは~。

(今後は講演スライドを公開したらtwitterだけでなくブログでも書こうと思います。感想や補足など入れつつ…い、いや、決して、更新頻度を、楽に、あげようと、思っている、わけでは…ゴニョゴノニョ)

UE4の標準機能とiPhoneXを使って、簡易フェイシャルキャプチャーシステムを実現してみた

追記

専用アプリが公開されるなど、色々変わったので新たに記事を書きました
pafuhana1213.hatenablog.com


はじめに

iPhoneXの表情検出機能を使ったサンプルである「Face AR Sample」が先日公開されました!検出した表情の情報をカイトくんや「AppleARKitFaceMeshコンポーネントにより生成された3Dモデル」に反映することができます。試しに動作している様子を動画に撮ってみました。
f:id:pafuhana1213:20180727200517p:plain
www.youtube.com

これだけだとよくあるコンテンツなのですが…Face AR Sampleにはなんと

PC上のエディタとの同期機能

が用意されています!!!
つまり、iPhoneXで検出した表情の情報をPCに送ることができます。


そして、エディタを実行しなくても同期処理は行われます!


つまり…Personaのアニメーション録画機能を使えば、

UE4の標準機能とIPhoneXだけで、
フェイシャルアニメーションを作成することができます!

うおおおおおおお!!!!!!!!

ということで、手順を簡単に解説します。
なお、当然ながらiPhoneXは必要なのですが、更にビルド用にMacが必須になります。また、PC - iPhoneX間で通信を行う必要があるため、それぞれを同じネットワーク環境下に置く必要があります。

続きを読む

deploygateを使い始めたことでUE4のモバイル開発・検証が非常に捗った件について

f:id:pafuhana1213:20180623224222p:plain

たぶん凄く今更感のある内容ですが、
最近使い始めてUE4を使ったモバイルコンテンツの開発・検証効率がバク上げしたので!
(あとで気づいたのですが、ヒストリアさんが2016年の時点でオススメしているんですよね…ハハハ)

はじめに

最近UE4のモバイル向け機能の検証をすることが多いのですが、

  • 「開発端末を機材置き場から取り出して」、
  • 「USBケーブル経由でPCに繋いで」
  • 「あ、これUSB TypeCじゃないか!とケーブル繋ぎ直して」
  • ようやく動作確認・検証…「あ、別の端末で再度同じ手順で検証しないと…」

というのが非常に面倒でした。おそらく賢い開発現場ならJenkinsなどのCIツールでパッケージ作成後に一斉配布などをしているかと思いますが、CI環境の構築・保守コストが理由で断念していました…

そんなときに見つけたのが、このdeploygateというサービス!
(ジャパネット●かた的なノリ)
deploygate.com

このサービスを利用したことで、先程挙げた面倒な部分が一気に解決しました!無料のプランもあるので、個人でモバイル開発をしている方は超オススメです!

以下はもう少し具体的な内容について説明

参考サイト
[iOS] TestFlight の特徴 と DeployGate との違い | Developers.IO
DeployGate使ってみました - Intelligent Technology's Technical Blog
DeployGateでAndroidアプリを配布する | ITcowork Staff Blog
DeployGateでiOSアプリを配布する方法

続きを読む

UE4 + Android 実機デバッグのやり方 その2 (AndroidStudio篇)

その1はこちら
pafuhana1213.hatenablog.com

はじめに

その1の最後に書いたとおり、一部の端末ではVisualStudio経由でのデバッグ( run-asコマンドを使用するデバッグ )ができません…。ですので、そういった端末の場合はAndroid Studioを使った実機デバッグをする必要があります。なので、今回はその方法を書きます!

あ、Android Studioのセットアップは説明すると長くなるので各自ググって下さい!
developer.android.com
akira-watson.com

※追記:公式ドキュメントにAndroid Studioでのデバッグ方法がきました
docs.unrealengine.com

続きを読む

UE4 + Android 実機デバッグのやり方 その1 (vsdebugandroidコマンド篇)

f:id:pafuhana1213:20180215000946j:plain

はじめに

以前はNsight Tegraを使った実機デバッグ方法が紹介されていました…
[UE4] 実機でデバックしてみよう!(Android編)|株式会社ヒストリア

…が、実は4.16から別のやり方が追加されています!

Added functionality to use the visual studio mobile projects for debugging. To generate them run "generateprojectfiles.bat -vsdebugandroid" from a command prompt. After you have packaged your game for Development and put it on the device, you can set this new project as the start up project and run/debug the project in Visual Studio.

www.unrealengine.com

今回の記事では↑の機能を使った方法を紹介します。
あ、C++プロジェクト限定な上に、ランチャー版ではなくソースコードからビルドしたUE4が必要です。

続きを読む

UE4でWebカメラの画像を取得する方法について( UE4.18以降 )

f:id:pafuhana1213:20180123150509j:plain

はじめに

UE4.18にてMedia Frameworkが大幅に改良されたのですが、その中にはWebカメラ対応が含まれています。
www.unrealengine.com


f:id:pafuhana1213:20180123150051p:plain
で、試した所、ノートPCのフロントカメラとHTC Viceのフロントカメラで正常動作を確認しました。(Viveの場合はSteamVR設定にてカメラを有効にすることをお忘れなく)

ということで、以前書いた記事の訂正・補足記事をかいた次第でありますです。
pafuhana1213.hatenablog.com

続きを読む