Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
書籍転載:Intel RealSense SDKセンサープログラミング(7)

書籍転載:Intel RealSense SDKセンサープログラミング(7)

openFrameworksで作成するメディアアート入門
― Chapter 10 openFrameworksで作る「メディアアート」アプリケーション ―

2015年9月8日

インテル RealSenseを活用したサンプルアプリケーション開発の第3弾として、openFrameworksとRealSenseを組み合わせる方法を紹介する。

谷口 直嗣
  • このエントリーをはてなブックマークに追加

 前々回前回は、インテル RealSense SDKとVisual Studioを使ったサンプルアプリケーションを実際に作成してみました。

書籍転載について

 本コーナーは、翔泳社発行の書籍『Intel RealSense SDKセンサープログラミング』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。

 

 『Intel RealSense SDKセンサープログラミング』の詳細や購入は翔泳社のサイト目次ページをご覧ください。プログラムのダウンロードも、翔泳社のサイトから行えます。

ご注意

本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。

 この章では、メディアアートでよく使われる「openFrameworks」でインテル RealSense SDKを使う例について解説します。

10-1 本章で作成するデモについて

 図10.1のような、GPUを使ってパーティクルを動かすデモをopen FrameworksのaddOnを使って開発する手順を解説します。このサンプルではパーティクルを100万個動かします。シェーダーを使いGPU上でパーティクルの動きを計算することにより、多数のパーティクルでもリアルタイムに動かすことができます。Chapter 5(転載対象外)で解説した手の動きをトラッキングするテクニックとopenFrameworksのコミュニティで数多く作られているaddOnを使うことで、RealSenseを使ったインタラクティブなデモを作ることができます。

図10.1 本章で作成する100万個のパーティクルを手の動きで操作するデモ

10-2 openFrameworksの環境設定

 まず、openFrameworksの環境設定から始めましょう。開発環境はVisual Studio 2013 Community Editionを使うので、ビルドが通るようにopenFrameworksの環境設定をします。

10-2-1 openFrameworksのダウンロード

 以下のWebサイトからopenFrameworksをダウンロードします。

 Webサイトにアクセスし、[windows]の欄にある[visual studio]のリンクからダウンロードします。Zipファイルでダウンロードされるので、適当な場所に展開してください。

図10.2 WebサイトからVisual Studio向けをダウンロードする

図10.2 WebサイトからVisual Studio向けをダウンロードする

10-2-2 ライブラリのダウンロード

 このままVisual Studio 2013でopenFrameworksのアプリをビルドすると、リンクエラーが出てしまいます。それを解消するためのライブラリを入手しましょう。下記のリポジトリから、Visual Studio 2013でビルドが通るopenFrameworksをダウンロードして、それに含まれるビルド済みのライブラリを使います。

 [Download ZIP]をクリックすると、ZIPで固められたファイルがダウンロードされるので、それを使います。

10-2-3 openFrameworksのプロジェクトを作ってみる

 openFrameworksには「ProjectGenerator」という便利なツールがついているので、それを使ってプロジェクトを作りつつ、VisualStudio2013でビルドが通るようにしていきます。

 Project Generatorは、下記のように展開したフォルダの内にあります。

  of_v0.8.4_vs_release\projectGenerator\projectGenerator.exe

 Project Generatorを起動すると図10.3のような画面が表示されます。

図10.3 Project Generatorの起動画面

図10.3 Project Generatorの起動画面

 まずはそのまま、右下の[GENERATE PROJECT]をクリックしてください。すると、プロジェクトが下記の場所に生成されます。

  of_v0.8.4_vs_release\apps\myApps\mySketch

 生成されたフォルダの中には、下記のようなファイルやフォルダができています。

  • bin
  • src
  • addons.make
  • icon.rc
  • mySketch.sln
  • mySketch.vcxproj
  • mySketch.vcxproj.filters
  • mySketch.vcxproj.user

 この中の「mySketch.sln」をダブルクリックすると、Visual Studioが起動します。そのままビルドをすると図10.4のようにエラーが出るので、ofVbo.cppの329~331行目を修正します。

図10.4 ビルドでエラーが生じる
C++
if (!vaoChecked){
  // || glewIsSupported("GL_ARB_vertex_array_object");<- this should work
  // but has false positives on some cards like emulation in vm's
  supportVAOs = ofGetGLProgrammableRenderer();
  vaoChecked = true;
}
リスト10.1 修正前のofVbo.cpp(329~331行目)
C++
if (ofGetGLProgrammableRenderer()){
  supportVAOs = true;
}
リスト10.2 修正後のofVbo.cpp(329~31行目)

 この修正をすると、コンパイルは通るのですが、リンク時に図10.5のようなエラーが大量に出ます。

図10.5 リンクのエラーが大量に発生する

 ここで、10-2-2項でダウンロードしたライブラリを使います。openFrameworks-VS2013\libs\pocoのフォルダをof_v0.8.4_vs_release\libs\pocoに上書きコピーします。再びビルドをすると成功し、実行するとopenFrameworksを使ったアプリケーションが立ち上がります。しかし、この時点では中身に何も書いていないので、図10.6のようなグレー表示のみの画面が表示されます。

図10.6 中身のないアプリケーションが起動する

図10.6 中身のないアプリケーションが起動する

10-2-4 ofGPUParticlesのダウンロード

 openFrameworksのユーザーコミュニティでは、たくさんの追加機能(addOn)が作られています。今回は「ofGPUParticles」という、GPUを使って大量のパーティクルを動かすaddOnを使います。以下のリポジトリからofGPUParticlesをダウンロードします。

 ダウンロードしたら、openFrameworkのaddOnのフォルダ(of_v0.8.4_vs_release\addons)にofxGpuParticlesのフォルダをコピーします。その際にフォルダの名前をofxGpuParticles-masterからofxGpuParticlesに変えておくとよいでしょう。コピーすると図10.7のようなフォルダ構成になります。

図10.7 追加したofGPUParticlesフォルダ

10-3 大量のパーティクルを操るアプリを作る

 いよいよ、openFrameworksを使って、アプリを作っていきます。あらかじめ用意されているサンプルを確認して、それをインテルReal Sense SDKでカスマタマイズして進めていくことにします。

10-3-1 ofGPUParticlesを使ったopenFrameworksアプリのプロジェクトの作成

 10-2-3項で使ったProject Generatorを再び起動します。Addonsの文字の所をクリックするとAddOnの選択画面に移るので、「ofGPUParticles」を選択します(図10.8)。

図10.8 ProjectGeneratorでAddOnを選択する

図10.8 ProjectGeneratorでAddOnを選択する

 アプリケーションの名前は「mySketch2」にしておきます(図10.9)。

図10.9 プロジェクトの設定

図10.9 プロジェクトの設定

 この状態で、[GERERATE PROJECT]をクリックすると、ofGPUParticlesを使えるプロジェクトmySketch2が生成されます。

10-3-2 ofGPUParticlesのサンプルを実行してみる

 ここで、追加したofGPUParticlesに用意されているサンプルを見てみましょう。下記の場所にあります。

  of_v0.8.4_vs_release\addons\ofxGpuParticles\example

 Visual Studioで開いて実行すると、マウスカーソルにパーティクルが集まってきます。これを、今回はRealSenseで手を認識し、そこにパーティクルが集まってくるようにして、さらに手の開閉度で集まる範囲を変化させてみます。

図10.10 パーティクルが集まってくるサンプル

図10.10 パーティクルが集まってくるサンプル

10-3-3 ofGPUParticlesのサンプルアプリからのコード移植の設定

 まずは10-3-1項で生成したプロジェクトでofGPUParticlesが動くようにした後に、インテル RealSense SDKで手を認識する機能を追加します。「Chapter 5 手指の検出」(転載対象外)で解説した機能を使います。

 なお、ここで挙げるコードは10-3-2項のサンプルのプロジェクトに含まれているコードなので、そこからコピーできます。

>ofApp.hの編集

 ofGPUParticlesを使うため、下記のようにofApp.hのコードを追加します。

C++
#pragma once

#include "ofMain.h"
#include "ofxGpuParticles.h"  // ……追加

class ofApp : public ofBaseApp{

  public:
    void setup();
    void update();
    void draw();
    void initializeHandTracking(); // ……追加
    void updateHandFrame();        // ……追加

    void keyPressed(int key);
    void keyReleased(int key);
    void mouseMoved(int x, int y );
    void mouseDragged(int x, int y, int button);
    void mousePressed(int x, int y, int button);
    void mouseReleased(int x, int y, int button);
    void windowResized(int w, int h);
    void dragEvent(ofDragInfo dragInfo);
    void gotMessage(ofMessage msg);

private:                                      // ……追加
  // set any update uniforms in this function // ……追加
  void onParticlesUpdate(ofShader& shader);   // ……追加
                                              // ……追加
  ofxGpuParticles particles;                  // ……追加
  ofEasyCam cam;                              // ……追加

}
リスト10.3 追加後のofApp.h
>ofApp.cppの編集

 続いて、openFrameworksのアプリ本体に機能を追加していきます。

 setup() の編集

 openFrameworksアプリの初期化をする関数setup()にリスト10.4のコードを追加します。

C++
ofBackground(0);
ofSetFrameRate(60);

// 1,000,000 particles
unsigned w = 1000;
unsigned h = 1000;

particles.init(w, h);

// initial positions
// use new to allocate 4,000,000 floats on the heap rather than
// the stack
float* particlePosns = new float[w * h * 4];
for (unsigned y = 0; y < h; ++y)
{
  for (unsigned x = 0; x < w; ++x)
  {
    unsigned idx = y * w + x;
    particlePosns[idx * 4] = 400.f * x / (float)w - 200.f;     // particle x
    particlePosns[idx * 4 + 1] = 400.f * y / (float)h - 200.f; // particle y
    particlePosns[idx * 4 + 2] = 0.f;                          // particle z
    particlePosns[idx * 4 + 3] = 0.f;                          // dummy
  }
}
particles.loadDataTexture(ofxGpuParticles::POSITION, particlePosns);
delete[] particlePosns;

// initial velocities
particles.zeroDataTexture(ofxGpuParticles::VELOCITY);

// listen for update event to set additonal update uniforms
ofAddListener(particles.updateEvent, this, &ofApp::onParticlesUpdate);
リスト10.4 アプリの初期化処理(ofApp.cpp)
 update() の編集

 update()はフレームごとの処理をする関数です。update()にリスト10.5のコードを追加します。

C++
ofSetWindowTitle(ofToString(ofGetFrameRate(), 2));
particles.update();
リスト10.5 フレームごとの処理(ofApp.cpp)
 onParticlesUpdate() の追加

 particlesについてフレームごとの処理をする関数onParticlesUpdate()を追加します(リスト10.6)。ここではマウスの位置を変換して、シェーダーの変数にセットしています。また、ofGetLastFrameTime()を使って経過時間をセットしています。

C++
// set any update uniforms in this function
void ofApp::onParticlesUpdate(ofShader& shader)
{
  ofVec3f mouse(ofGetMouseX() - .5f * ofGetWidth(), 
                .5f * ofGetHeight() - ofGetMouseY(),
                0.f);
  shader.setUniform3fv("mouse", mouse.getPtr());
  shader.setUniform1f("elapsed", ofGetLastFrameTime());
  shader.setUniform1f("radiusSquared", 200.f * 200.f);
}
リスト10.6 particlesについてのフレームごとの処理(ofApp.cpp)
 draw() の編集

 draw()は描画の処理をする関数です。draw()にリスト10.7のコードを追加します。これでGPUParticleを動かすコードの追加はおしまいです。

C++
cam.begin();
ofEnableBlendMode(OF_BLENDMODE_ADD);
particles.draw();
ofDisableBlendMode();
cam.end();
リスト10.7 描画処理(ofApp.cpp)
 シェーダーの追加

 コードの追加が済んだので、いざ実行! とやってみると、エラーがコンソールに出続け、openFrameworksのアプリ画面はマウスを動かしても変化せず、何も描画されません(図10.11)。

図10.11 マウスを動かしても何も変化しない……

図10.11 マウスを動かしても何も変化しない……

 これを解決するために、サンプルのシェーダーをコピーして配置します。of_v0.8.4_vs_release\addons\ofxGpuParticles\example\bin\dataから、下記4つのファイルをof_v0.8.4_vs_release\apps\myApps\mySketch2\bin\dataにコピーします。

  • draw.frag
  • draw.vert
  • update.frag
  • update.vert

 改めて実行すると、パーティクルが表示され、マウスについてくるようになりました。

図10.12 パーティクルがマウスについてくる

図10.12 パーティクルがマウスについてくる

 次回は、今回に続き、RealSenseとopenFrameworksを使ったサンプルアプリケーションを実際に作成してみます。いよいよ転載最終回です。

※以下では、本稿の前後を合わせて5回分(第4回~第8回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

書籍転載:Intel RealSense SDKセンサープログラミング(7)
4. Unity+RealSenseで作るノンゲームアプリ「スマイルトレーニング」

インテル RealSense SDKとUnityを使ったサンプルアプリケーションを実際に作成してみる。

書籍転載:Intel RealSense SDKセンサープログラミング(7)
5. WPF(Visual Studio)+RealSenseで作る表情感知アプリ

インテル RealSenseを活用したサンプルアプリケーション開発の第2弾として、Visual StudioとRealSenseを組み合わせる方法を紹介する。

書籍転載:Intel RealSense SDKセンサープログラミング(7)
6. Visual Studioで活用するRealSenseセンシング機能

RealSenseとVisual Studioを使ったサンプルアプリケーションで、RealSenseのセンサーから情報を取得してみる。

書籍転載:Intel RealSense SDKセンサープログラミング(7)
7. 【現在、表示中】≫ openFrameworksで作成するメディアアート入門

インテル RealSenseを活用したサンプルアプリケーション開発の第3弾として、openFrameworksとRealSenseを組み合わせる方法を紹介する。

書籍転載:Intel RealSense SDKセンサープログラミング(7)
8. openFrameworksによるメディアアートとRealSenseを組み合わせよう!

RealSenseとopenFrameworksを使ったサンプルアプリケーションで、RealSenseのセンサーから情報を取得してみる。

サイトからのお知らせ

Twitterでつぶやこう!