ProcessingとUnrealの連携

2021年8月17日

Processingは2001年に公開されてから、開発の容易さと、豊富なライブラリーの存在もあって、様々なメディアアートプロジェクトに使用されてきました。私自身もオブジェクト指向プログラミングはProcessingで習得できましたし、People Forestや流線ノートといった作品でも採用しています。

この記事では、ProcessingからUnrealEngineにUDPを用いてデータを送信する際にテストしたプロセスを備忘録として公開します。

今回のサンプルでは単純にマウス座標を送信するだけですが、実際にはセンサー処理や画像認識などをProcessingで行い、その結果をUnrealEngnieに送信するような事につながればと思います。

参考事例としてこちらのサンプルを紹介します。これはProcessingでセンサー処理、UnrealEngineで大量のパーティクル発生。という連携になっています。

Processing

RealSenseの深度データを取得
OpenCVでOpticalFlowを計算
blobDetectionで輪郭の座標検出
上のデータをUnrealEngineに送信

UnrealEngine5

Processingからデータを取得
NiagaraにてOpticalFlow情報に基づいてパーティクル制御
Niagaraにて輪郭を描画

IPアドレスの確認

まずUDP送信のために、UnrealEngineを起動させるコンピューターのIPアドレスの確認が必要となります。

Windowsの場合

コマンドプロンプトを開き「ipconfig」と打ち込んでネットワークの情報が表示させましょう。その中の「IPv4アドレス」に表記されているアドレスが重要になりますので、メモしておきましょう。

Macの場合

システム環境設定＞ネットワークを開き、使用するネットワーク情報を表示させるとIPアドレスが表示されます。

Processing

公式サイトからProcessingをダウンロードします。その後、スケッチメニュー＞ライブラリをインポート…から「UDP」をダウンロードします。UDPライブラリのリファレンスはこちらにありますので参考にしながらコーディングしましょう。

下記のコードはマウスカーソルの位置（x,y）を送信するものです。カーソル位置はint型なので、byte型の配列に変換しているのがポイントになります。変数targetIPにはUnrealEngineが起動しているPCのIPアドレスを入力します。（ipConfigで調べたもの）

import hypermedia.net.*;
UDP udp;

String targetIP="192.168.2.199";
int targetPort=8888;
int ownPort=10000;

void setup(){
  size(960,540);
  udp = new UDP( this, ownPort );
}

void draw(){
  background(0);
  fill(255,0,0);
  noStroke();
  circle(mouseX,mouseY,30);
  sendData();
}

void sendData(){
    byte[] mx = intToByteArray(mouseX);
    byte[] my = intToByteArray(mouseY);
    byte[] bytes = concat(mx, my);
    udp.send(bytes,targetIP,targetPort);
}

byte[] intToByteArray(int value) {
  return new byte[] {
  (byte)(value >>> 24),(byte)(value >>> 16),
  (byte)(value >>> 8),(byte)value
  };
}

UnrealEngine

今回は二つのプラグインを使用しました。一つは有料プラグインの「Simple UDP TCP Socket Client」です。とてもシンプルな実装でUDPやTCPの通信ができるので、導入の価値があると判断しました。

もう一つはDMX Engine（無料）です。本来は舞台機材の制御などを想定されたものですが、byte型をint型に変換できる機能があったので、使ってみることにしました。

ブループリントアクターの作成

今回は汎用性を考慮してブループリントアクターを2つ作成してUDPを受信することにしました。下記の二つを作成してレベルに追加します。

BP_UDP_Receiver … UDPデータを受信するアクター
BP_MouseBall … UDPデータを利用するアクター

(1)BP_UDP_Receiver

UDPを受信するためだけのブループリントアクターです。汎用的に使うために、受信したデータをそのままイベントディスパッチャーで送信します。それ以外の機能は一切持たせないのがポイントです。

(2)BP_MouseBall

受信データを実際に使用する例としてのブループリントアクターです。UDP_UDP_Receiverのイベントディスパッチャーをバインドしてデータを受け取り、自身の座標を制御しています。

Byte Array to Intはデータの変換のために作成した関数です。次の項で説明します。

作成した「Byte Array to Int」関数内ではDMXプラグインのノード「Bytes to Int」を使用して、Byte型の配列をInt型の整数に変換しています。こうした変換には様々な方法があると思うのですが、ひとまず今回はこの手法が手軽そうだったので採用しました。高速化するためにはもっと他の方法があるかもしれません。