Unreal Engine x TouchDesigner x StreamDiffusion：画像生成AIを活用したスタイライズ表現

こんにちは
リアルタイムグラフィックスを制作しているビジュアルディレクターの工藤です。

スタイライズ表現とは、フォトリアリスティックな質感とは異なり、絵画やイラストなどの質感を模した視覚効果のことを指します。通常、3DCGでスタイライズな質感を表現する場合は、3DCGソフトウェアのシェーダーやポストプロセスの機能を使います。

この記事では、AIを活用して、シェーダーやポストプロセスを使った方法とは異なるアプローチで、手書き風の表現はできないだろうか？という発想から、
TouchDesignerとStreamDiffusionを使ってテクスチャー画像を生成し、Unreal Engineで3Dモデルにマッピングすることで、リアルタイムに変化するスタイライズ表現を実装する試みを紹介します。

下記がワークフローになります。
1. TouchDesignerとStreamDiffusionを使い、スタイライズ画像を生成する。
2. TouchDesignerで生成した画像を、NDIを使い、Unreal Engineへ受け渡す。
3. Unreal Engineで受信した画像を、3Dモデルにテクスチャーマッピングする。
4. プロンプトはUnreal EngineのUIから入力した文字列を、OSC通信を使ってTouchDesignerへ受け渡す。

TouchDesignerで画像生成AIを使いたい

TouchDesignerで画像生成AIを描画したい場合、
主に下記の3つのカスタムコンポーネントを使用する方法があるようです。

・computerender
・TouchDiffusion
・StreamDiffusionTD

今回は、Patreonの有料メンバーシップ登録でダウンロードできるStreamDiffusionTDを使用します。
https://www.patreon.com/collection/565003?view=expanded

Image to Imageという方法で、入力されたイメージとプロンプトをもとに、リアルタイムにAI画像を生成することができます。

入力するイメージは、TOPのNoiseノードで作ったアニメーションするカラーノイズを使います。

StreamDiffusionTDのプロンプトには、下記のようなテキストを入力してみました。
・OilPainting (油絵)
・BrushStroke（筆運び）
・Vivid（鮮やか）
・Turbulence（乱流）
・Texture（質感）

リアルタイムに変化する油絵スタイルのイメージが生成されました！

生成画像をシームレスなテクスチャーにする

生成された画像は、タイリングすると繋ぎ目が見えてしまうため、
TOPのTileノード、Cropノードを使って、シームレスなテクスチャーを作成します。
TileノードのOverlap U, Overlap Vの値を0.5にしてブレンド、Output Resolutionを2Xで出力し、Cropノードで中心エリアを切り出しています。

TouchDesignerからUnreal Engineへテクスチャーを受け渡す

テクスチャーの受け渡しには、NDI（ネットワークを介して映像機器を接続するためのオープン規格）を使用します。

TouchDesigner側では、NDI Out TOPノードを使用して、テクスチャーを映像信号として送信します。

Unreal Engine側では、NDI SDK for Unreal EngineというSDKをインストールして、NDI IO Pluginというプラグインを有効にすることで、NDIの映像信号を受信できるようになります。

https://ndi.video/for-developers/ndi-unreal-engine-sdk/

Unreal Engineのマテリアル作成

NDIで受信したテクスチャーを3Dモデルにマッピングします。

一般的なテクスチャーマッピングではモデルのUVを使用しますが、UV展開の仕方により、適切にレイアウトされたテクスチャーでないと繋ぎ目ができてしまうことがあります。そのため、今回はTriplanarというマッピング方法を用います。Triplanarマッピングのマテリアルの組み方は下記の記事を参考にさせて頂きました。

https://qiita.com/aa_debdeb/items/44557b3689f1a393d104

Unreal EngineからTouchDesignerへプロンプトを受け渡す

画像生成の際に使用するプロンプトは、Unreal EngineのUIから入力して、OSC通信を使ってTouchDesignerへ送信します。

Unreal EngineでOSCを使用する場合は、プラグインのOSC (Open Sound Control)を有効にすることで、数値や文字列を送信できるようになります。

TouchDesignerでは、DATのOSC Inノードを使って、文字列を受信します。

プロンプトを入力してみる

実際にプロンプトを入力してみます。

入力したプロンプトがスタイライズな質感として、3DCGに反映される仕組みができました！

今回紹介したワークフローは、処理負荷は重めですが、画像生成AIを活用して様々なスタイルの質感をリアルタイムにビジュアライズすることが可能になります。

Unreal EngineやTouchDesignerなど、異なるソフトウェアを組み合わせることで表現の幅が格段に広がると思いますので、ご興味のある方は参考にしてみてください！！

ありがとうございました。