openFrameworksとResolumeで、簡単プロジェクションマッピング


はじめに

こんにちは!メディアアートコースメンターのきゃりーです。Life is Tech ! のAdvent Calendar、7日目です!
みなさんPCで開発してるけど、画面の中だけじゃ物足りなくなってきていませんか?
そこで今日はResolumeを使って、プロジェクションマッピングをする方法を紹介しようと思います!
ちなみにopenFrameworksを使わずに、動画ファイルだけでもできるので、openFrameworks使わない人も是非読んでみてください!

Resolumeとは

Resolumeとは、オーディオヴィジュアルパフォーマンスに使うツールです。ビデオ、オーディオとオーディオヴィジュアルの作品の再生、ミックス、エフェクト効果の適用、ライブパフォーマンスなどに使用できます。
MIDI, DMX,Open Sound Controlなどを用いたインスタレーションにも最適みたいです。
参考

やること

今回は、このような6面体の白い箱にマッピングしていきます!一面には、ResolumeのExampleを、もう一面には、これから入れる動画ファイルとopenFraemworksのプロジェクトをうつします。

Resolumeの準備

まずはResolumeの準備をしましょう!

ダウンロード

ここから体験版をダウンロード&インストールしましょう。
Resolume Download
今回はResolume5で紹介します。

開くとこんな感じ。最初に出てくるExampleを、このまま使用していきます。

ちなみにExampleファイルは、
書類/Resolume Arena 5/compositionsの中に、もともと入っている映像や音源は、アプリケーション/Resolume Arena 5.1.2/media/AVの中にあります。もし、後で消しちゃったけど、もう一回入れたい!って言う時にはここから。

言語設定

分かりやすいように日本語にします。
View/Language/日本語を選択して、Resolumeを再起動します。

openFrameworksの準備

では次にoF側の設定をしましょう!
動画ファイルのみを使用する場合は、とばして大丈夫です。

Addonの準備

以下からAddonをダウンロードし、addonsフォルダへコピーします。
ofxSyphon

プログラム

まずofxSyphonを入れて新規プロジェクトを作成、または既存のプロジェクトにofxSyphonを追加します。(補足:リンク)
次に、SyphonでopenFraemworksのスケッチを送るようにします。
...は省略を意味しています。

ofApp.h
...

#include "ofxSyphon.h"

class ofApp : public ofBaseApp{

...

  ofxSyphonServer mainOutputSyphonServer;
}
ofApp.cpp
void ofApp::setup(){
...

  mainOutputSyphonServer.setName("Screen Output");
}

void ofApp::draw(){
...

  mainOutputSyphonServer.publishScreen();
}

あとは、mainOutputSyphonServer.publishScreen();がdraw()の最後になるように注意しながら、プログラムを書いていきましょう!

出力の準備

縦と横は、Layerとコラムに分かれています。縦に並べた映像は重ねられますが、横に並べたものは同時に選択することはできません。例えば、layer3のコラム1と、layer3のコラム2は、重ねて同時に表示することはできません。
今回は動画とopenFraemworksの映像を、Exampleとは別の面にうつすため、メニューバーからレイヤー->新規を選択し、レイヤーを2つ追加しましょう。layer4には動画ファイルを、layer5にはopenFraemworksのプロジェクトを入れていきます。

動画ファイル

動画ファイルをドラッグ&ドロップで、layer4の好きなところに入れましょう。
mp4は入らないので注意!movなら大丈夫です。

openFrameworks

先ほど書いたプロジェクトを実行しましょう!
すると、右下の枠の中のソースのSyphonの中にプロジェクトが出てくるはずなので、layer5にドラッグ&ドロップしましょう。

出力する

いよいよマッピングです!
プロジェクターと接続してください!接続したらミラーリングを切りましょう。

出力設定

メニューバーの、出力->アドバンススクリーン設定を選択します。

まずScreen1を選択し、右側のデバイスをDisplayにしましょう。プロジェクターにうつったらOKです!

次にスライスを増やします。左側のプラスマークを押し、スライスを選択しましょう。1つのスライスに、1つのレイヤーをのせていきます。

はじめにSlice1の設定をしましょう。入力選択の右側、入力ソースをLayer1にします。出力変形を選択し、ここで映像を図形に合わせていきます。ポイントを編集を選択し、画面とうつしだされたものを見比べながら、点を動かしましょう。

他のスライスも同様にします。

すべての調整ができたら...完成!
保存をして閉じることを忘れずに。

実際にやってみると音のMIXも同時に出来て面白いです!!!

さいごに

Resolumeはもっといっぱい面白いことができます。
体験版だと時々喋るし、ロゴうつっちゃうけど、ぜひ楽しんでください。
そしてもっと色々したいよ〜という方は、こちらもぜひどうぞ。
Resolume Avenue & Arena Manual
Resolume Basics Tutorial

MadMapperも使ってみたい!という人はこちらも。
openFrameworks0.9.~+MadMapper でプロジェクションマッピング

明日はれもん🍋による便利ツール10選です〜!