SPOUTでopenFramewoksの映像をvvvvに送信

概要

vvvvでopenFrameworksやProcessingからの映像を受け取って
出力したいという場合、SPOUT(http://spout.zeal.co/) を使います。
MacでいうところのSyphon(http://syphon.v002.info/) ですね。
SPOUTを使うことで他の言語で生成した映像をvvvvで受信したり、
逆にvvvvで作った映像をopenFrameworksなどに送ることがが可能になります。

この記事ではopenFrameworksで生成した映像をSPOUTを使って送信しvvvvで受信する方法を説明します。

全体図

システムの構成は以下になります。

送信側のopenFrameworksではSPOUTのDLLを使って映像を送信し、
受信側のvvvvではSpout_Receiver.v4pを使って映像を受信します。
vvvvは映像の送信も受信も簡単なんですがopenFrameworksはちょっと面倒でした。
（私がopenFrameworksにあまり詳しくないからかもですが。）

準備　SPOUTのダウンロードとインストール

Spoutのダウンロードは http://spout.zeal.co/ のDownloadをクリックし
SpoutSetup_V2.004-beta.zipを入手します。

ZIPファイルを任意のフォルダに解凍しSpoutSetup_V2.004-beta.exeを実行すると
インストールが始まります。
インストール先はどこでもOKです。展開されたファイルを使うだけなので。
（※イントールの画像は抜粋です。）

インストール先のフォルダを確認するとSpout2のフォルダが以下のように展開されています。

この後に使うのは送信側がSpout2/SPOUTSDK/SpoutSDK/Binaries にあるSpout2.dll、Spout2.lib、SpoutDLL.hです。

受信側はSpout2/VVVV/Receiver/DirectX 9(11でもOK）にあるパッチファイルになります。

openFrameworksの実装については、\Spout2\SPOUTSDK\SpoutSDK\SPOUTDLL\cbSpoutExample\srcのソースをコピペし使います。
これらの場所を覚えておいてください。

openFrameworks（0.9.0）でのSPOUT（Sender)の設定(Visual Studio 2015編)

openFrameworksでは新しいプロジェクトを作成した状態から説明します。
openFrameworksはとっかかりは　http://yoppa.org/ をみればすべて書いてますのでそちらを参考にしてください。偉大です。

次にSpoutを使うための準備をします。Spout2.dll、Spout2.libをopenFrameworksのプロジェクトのbinフォルダにコピーします。
また、SpoutDLL.hをsrcフォルダにコピーします。

SpoutDLL.h　をプロジェクトに追加します。
SolutionExplorerのsrcで右クリックし、Add>Existing Item で先ほど配置したSpoutDLL.hを選択すればOKです。

こんな感じでSolutionExplorerにSpoutDLL.hが追加されます。

次にSpout2.lib　をLinkerに追加します。
Project>Vs2015Test(※プロジェクト名）PropertiesでPropertyPagesを開き
LinkerのInputを選択しAdditional Dependenciesでを選択し「.\bin\Spout2.lib」を
テキストボックスに記載し、OKをクリックします。

これで準備は整いました。

ofApp.hの実装

次に実装です。
main.cppは特別編集は必要ありません。
ofApp.hではSpoutDLL.hをインクルードします。

#include "SpoutDLL.h" // for Spout2 dll

また、ofApp.cppで使う変数を定義しておきます。
ソースはインストール先の\Spout2\SPOUTSDK\SpoutSDK\SPOUTDLL\cbSpoutExample\src\ofApp.hの一部をコピペすればよいです。

void exit();
bool InitGLtexture(GLuint &texID, unsigned int width, unsigned int height);
char sendername[256];           // Shared memory name
GLuint sendertexture;           // Local OpenGL texture used for sharing
bool bInitialized;          // Initialization result
ofImage myTextureImage;         // Texture image for the 3D demo
float rotX, rotY;

ofApp.cppの実装

次にofApp.cppの実装です。
\Spout2\SPOUTSDK\SpoutSDK\SPOUTDLL\cbSpoutExample\src\ofApp.cppを参考に
必要なコードをコピペします。
まずはnamespaceを記載します。

// ====== SPOUT =====
using namespace Spout2;

次にsetup()の実装ですが以下のコードをサンプルからコピペします。
sendernameの文字列はvvvvと共通の文字列にする必要がありますが
適当でOKです。

// ====== SPOUT =====
bInitialized = false;               // Spout sender initialization
strcpy(sendername, "CB Spout Sender");  // Set the sender name
ofSetWindowTitle(sendername);           // show it on the title bar
                                        // Create an OpenGL texture for data transfers
sendertexture = 0; // make sure the ID is zero for the first time
InitGLtexture(sendertexture, ofGetWidth(), ofGetHeight());
// Set the window icon from resources
//SetClassLong(GetActiveWindow(), GCL_HICON, (LONG)LoadIconA(GetModuleHandle(NULL), MAKEINTRESOURCEA(IDI_ICON1)));
// ===================

次にdraw()の実装です。

こちらは、SPOUTで送信したい範囲を
CreateSenderとSendTextureで囲む形になります。

//--------------------------------------------------------------
void ofApp::draw(){

    char str[256];
    ofSetColor(255);

    // ====== SPOUT =====
    // A render window must be available for Spout initialization and might not be
    // available in "update" so do it now when there is definitely a render window.
    if (!bInitialized) {
        bInitialized = CreateSender(sendername, ofGetWidth(), ofGetHeight()); // Create the sender
    }
    // ===================
    //ここから

    ofDrawCircle(100.0, 100.0, 10.0, 15.0);

    //ここまでが送信される。
    // ====== SPOUT =====
    if (bInitialized) {

        if (ofGetWidth() > 0 && ofGetHeight() > 0) { // protect against user minimize

                                                     // Grab the screen into the local spout texture
            glBindTexture(GL_TEXTURE_2D, sendertexture);
            glCopyTexSubImage2D(GL_TEXTURE_2D, 0, 0, 0, 0, 0, ofGetWidth(), ofGetHeight());
            glBindTexture(GL_TEXTURE_2D, 0);

            // Send the texture out for all receivers to use
            SendTexture(sendertexture, GL_TEXTURE_2D, ofGetWidth(), ofGetHeight());

            //ここからの映像は送信されないのでUIとかを表示させてもいいかも

            // Show what it is sending
            ofSetColor(255);
            sprintf(str, "Sending as : [%s]", sendername);
            ofDrawBitmapString(str, 20, 20);

            // Show fps
            sprintf(str, "fps: %3.3d", (int)ofGetFrameRate());
            ofDrawBitmapString(str, ofGetWidth() - 120, 20);

        }
    }
    // ===================
}

あとはwindowResized、exit、InitGLtextureをサンプルからコピペして上書きすると
完了です。

//--------------------------------------------------------------
void ofApp::windowResized(int w, int h) {
    // ====== SPOUT =====
    // Update the sender texture to receive the new dimensions
    // Change of width and height is handled within the SendTexture function
    if (w > 0 && h > 0) // protect against user minimize
        InitGLtexture(sendertexture, w, h);

}

//--------------------------------------------------------------
void ofApp::exit() {

    // ====== SPOUT =====
    ReleaseSender(); // Release the sender

}

// ====== SPOUT =====
bool ofApp::InitGLtexture(GLuint &texID, unsigned int width, unsigned int height)
{
    if (texID != 0) glDeleteTextures(1, &texID);

    glGenTextures(1, &texID);
    glBindTexture(GL_TEXTURE_2D, texID);
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glBindTexture(GL_TEXTURE_2D, 0);

    return true;
}

ちょっと難しいのは最初のSpoutDLL.libの設定とか配置ですかね。。。
結構苦労しました。
コンパイルエラーの連続ですわ。
実装はコピペでいいので特に問題はないですかね。

vvvvでSPOUT（Reviever)

次に受信側のvvvvの実装です。こちらはすこぶる簡単。
Spout2/VVVV/Receiver/DirectX 9/DX9_ReceiverExample.v4pを実行し、Spout_Receiverの
SpoutSenderNameの文字列を送信側の文字列を同じにするだけで受信できます。
今回はサンプルと同じく「CB Spout Sender」に変更してます。
vvvvではTextureが受信できるのであとはFullscreenQuadをかましてRendererにつなげれば
openFrameworksからの映像をvvvvで表示できます。
私は、vvvvでは手軽にエフェクトを変更したり出来るのでメインの映像はopenFrameworksでつくって
エフェクトとか画像の切り替えはvvvvでやるみたいな使い方をしてます。
全部vvvvでやればいいじゃないかって話ですが、まだまだ未熟で描きたい絵がvvvvで描けないので。
あと、openFramewoksでshaderを使った映像をvvvvに送るみたいな使い方をしてます。
するとGLSLSandBoxみたいなGLSLの映像もvvvvで扱えるようになるので。
（HLSLに移植したらいいじゃないって話ではありますが・・・。）

実装はこんな感じです。折角なんでopenFrameworksのHelloWorldともいえる（かどうかは知らんが）
3DPrimitivesExampleの映像をvvvvに送信して表示してみましょう。
vvvvのエフェクトをかけて最終的に出力してます。

こんな感じで、openFrameworksの映像をvvvvに送れるわけです。
ただ、送信側のウィンドウを最小化すると映像が止まってしまうとか、
送信側のウィンドウはプレビュー的に小さくして実際に送る映像は1280×800に
したいんだけどなーという感じがあるんですが解決方法がわからない。
SPOUT、oFに詳しい人がいたら教えてください。

まとめ

vvvvがかなりマニアックなのにもかかわらず、さらにマニアックなSPOUTについての記事を書きました。需要は無いかもしれませんが、Windows環境ではSyphonは使えないので、openFrameworksのコンテンツをvvvvで活用したい人（そんな人いるかしら・・・）なんかのお役に立てれば幸いです。
どちらかというとopenFrameworksの記事ですか？みたいな話しもありますが・・・（汗
最終的にはvvvvを使ってるので良しとｼﾃｸﾀﾞｻｲ。

あと、手さぐりで書いているので、SPOUT導入の正当なやりかたじゃないような気がしてます。
色々、ご指摘いただけると幸いです。また、質問があればどうぞ。

要望があればサンプルコードをGitHubにあげる・・・かもですが、SPOUTのサンプルで事足りる気もしてます。。。