書籍転載：Intel RealSense SDKセンサープログラミング（7）
openFrameworksで作成するメディアアート入門
― Chapter 10 openFrameworksで作る「メディアアート」アプリケーション ―
インテル 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-2 openFrameworksの環境設定
まず、openFrameworksの環境設定から始めましょう。開発環境はVisual Studio 2013 Community Editionを使うので、ビルドが通るようにopenFrameworksの環境設定をします。
10-2-1 openFrameworksのダウンロード
以下のWebサイトからopenFrameworksをダウンロードします。
Webサイトにアクセスし、［windows］の欄にある［visual studio］のリンクからダウンロードします。Zipファイルでダウンロードされるので、適当な場所に展開してください。
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のような画面が表示されます。
まずはそのまま、右下の［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行目を修正します。
|
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;
}
|
|
if (ofGetGLProgrammableRenderer()){
supportVAOs = true;
}
|
この修正をすると、コンパイルは通るのですが、リンク時に図10.5のようなエラーが大量に出ます。
ここで、10-2-2項でダウンロードしたライブラリを使います。openFrameworks-VS2013\libs\pocoのフォルダをof_v0.8.4_vs_release\libs\pocoに上書きコピーします。再びビルドをすると成功し、実行するとopenFrameworksを使ったアプリケーションが立ち上がります。しかし、この時点では中身に何も書いていないので、図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-3 大量のパーティクルを操るアプリを作る
いよいよ、openFrameworksを使って、アプリを作っていきます。あらかじめ用意されているサンプルを確認して、それをインテルReal Sense SDKでカスマタマイズして進めていくことにします。
10-3-1 ofGPUParticlesを使ったopenFrameworksアプリのプロジェクトの作成
10-2-3項で使ったProject Generatorを再び起動します。Addonsの文字の所をクリックするとAddOnの選択画面に移るので、「ofGPUParticles」を選択します（図10.8）。
アプリケーションの名前は「mySketch2」にしておきます（図10.9）。
この状態で、［GERERATE PROJECT］をクリックすると、ofGPUParticlesを使えるプロジェクトmySketch2が生成されます。
10-3-2 ofGPUParticlesのサンプルを実行してみる
ここで、追加したofGPUParticlesに用意されているサンプルを見てみましょう。下記の場所にあります。
of_v0.8.4_vs_release\addons\ofxGpuParticles\example
Visual Studioで開いて実行すると、マウスカーソルにパーティクルが集まってきます。これを、今回はRealSenseで手を認識し、そこにパーティクルが集まってくるようにして、さらに手の開閉度で集まる範囲を変化させてみます。
10-3-3 ofGPUParticlesのサンプルアプリからのコード移植の設定
まずは10-3-1項で生成したプロジェクトでofGPUParticlesが動くようにした後に、インテル RealSense SDKで手を認識する機能を追加します。「Chapter 5 手指の検出」（※転載対象外）で解説した機能を使います。
なお、ここで挙げるコードは10-3-2項のサンプルのプロジェクトに含まれているコードなので、そこからコピーできます。
>ofApp.hの編集
ofGPUParticlesを使うため、下記のようにofApp.hのコードを追加します。
|
#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; // ……追加
}
|
>ofApp.cppの編集
続いて、openFrameworksのアプリ本体に機能を追加していきます。
● setup() の編集
openFrameworksアプリの初期化をする関数setup()にリスト10.4のコードを追加します。
|
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);
|
● update() の編集
update()はフレームごとの処理をする関数です。update()にリスト10.5のコードを追加します。
|
ofSetWindowTitle(ofToString(ofGetFrameRate(), 2));
particles.update();
|
● onParticlesUpdate() の追加
particlesについてフレームごとの処理をする関数onParticlesUpdate()を追加します（リスト10.6）。ここではマウスの位置を変換して、シェーダーの変数にセットしています。また、ofGetLastFrameTime()を使って経過時間をセットしています。
|
// 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);
}
|
● draw() の編集
draw()は描画の処理をする関数です。draw()にリスト10.7のコードを追加します。これでGPUParticleを動かすコードの追加はおしまいです。
|
cam.begin();
ofEnableBlendMode(OF_BLENDMODE_ADD);
particles.draw();
ofDisableBlendMode();
cam.end();
|
● シェーダーの追加
コードの追加が済んだので、いざ実行！ とやってみると、エラーがコンソールに出続け、openFrameworksのアプリ画面はマウスを動かしても変化せず、何も描画されません（図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
改めて実行すると、パーティクルが表示され、マウスについてくるようになりました。
■
次回は、今回に続き、RealSenseとopenFrameworksを使ったサンプルアプリケーションを実際に作成してみます。いよいよ転載最終回です。
※以下では、本稿の前後を合わせて5回分（第4回～第8回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
5. WPF（Visual Studio）＋RealSenseで作る表情感知アプリ
インテル RealSenseを活用したサンプルアプリケーション開発の第2弾として、Visual StudioとRealSenseを組み合わせる方法を紹介する。
6. Visual Studioで活用するRealSenseセンシング機能
RealSenseとVisual Studioを使ったサンプルアプリケーションで、RealSenseのセンサーから情報を取得してみる。
7. 【現在、表示中】≫ openFrameworksで作成するメディアアート入門
インテル RealSenseを活用したサンプルアプリケーション開発の第3弾として、openFrameworksとRealSenseを組み合わせる方法を紹介する。
8. openFrameworksによるメディアアートとRealSenseを組み合わせよう！
RealSenseとopenFrameworksを使ったサンプルアプリケーションで、RealSenseのセンサーから情報を取得してみる。
