macOSでのopenFrameworksのIDEはQt Creatorが良かった

openFrameworksもv0.10.0がリリースされたことだしと思い、oFを書く時のmacOSIDEを調査&比較してみた。結果はQt Creatorがコード補完の精度と速度、アドオンの扱いやすさの点でベストだと思う。比較したIDEは以下の3つ。

コンピューターの環境

Xcode

macOSのデフォルト開発環境でありoF公式にサポートされているIDEでもあるが、oFの開発において以下のような欠点がある。

  • コード補完がダメダメ
  • やたら重い
  • 設定ファイルがいつの間にか書き換わりがち
  • アドオンの追加がめんどくさい

とにかく使っていてストレスが溜まりがちなIDEであるが、Swift開発だとそこまでではないのがよりイライラさせるIDE

Visual Studio Code

厳密にはIDEではないが、IDEみたいな動きも出来るし悪くない。

  • コード補完いい感じ
  • アドオン追加簡単
  • 新規プロジェクトを作るのが少しめんどくさい

Intel CPUのUbuntuでopenFrameworksをマイクロソフトのVScodeで開発できるように環境を整える - cvl-robot's diary

今回、上記の記事に従ってみたが、プロジェクトのテンプレートを手動でコピーする必要があり、これが少々手間。

Qt Creator

oF公式によるexperimentalなサポートあり。キュートと読む。特徴を簡単にまとめると、

  • コード補完いい感じ
  • アドオン追加簡単
  • 新規プロジェクトも簡単に追加可能
  • 見た目がちょっと……

https://openframeworks.cc/setup/qtcreator/

セットアップは上記リンクから。見た目がうーむなところ以外は欠点なし。

f:id:miso_engine:20180521161537p:plain

最初から入ってるアドオン、ofxGuiも設定ファイルにアドオン名を追記するだけだが、ofxCvも同様で(HEADER_SEARCH_PATHとかの設定が一切いらない)すごく楽だった。このスクリーンショットはofxCvでGaussianBlurとContourFinderによる輪郭操作と描画を実装してみたところ。すぐ実装できてむっちゃ楽だった。

f:id:miso_engine:20180521161904p:plain

設定ファイルは"プロジェクト名.qbs"で、これのof.addonsにアドオン名を書くだけ。

おわりに

というわけでQt CreatormacでoF開発するならオススメなのでは?という現状。しばらく使ってみて、安定性なども見ていく予定。

Beyond Interaction[改訂第2版] -クリエイティブ・コーディングのためのopenFrameworks実践ガイド

Beyond Interaction[改訂第2版] -クリエイティブ・コーディングのためのopenFrameworks実践ガイド

座標をメッシュワープする時の考え方

先日openFramworksでテクスチャのメッシュワープのような形で座標のメッシュワープをすることになったのだが、メッシュワープはメッシュの四角形それぞれの透視変換の集合ではない、という落とし穴にハマった。てっきりそう思ってたので透視変換行列を計算してたのだが、境界で滑らかに座標を移動してくれなくて困ってたら考え方が間違っていた。単純に縦横の比率で計算して出してやればよかった。

具体的には、上辺と下辺で元の比率と同じ場所に点を打ってその点どうしを結び、それを右辺と左辺でも同様にやった交点が変換後の座標になる。図を見てもらったほうが早いと思う。

f:id:miso_engine:20180508171437j:plain

テクスチャのメッシュワープ自体は、OpenGLなど、3Dのフレームワークの基礎なので、特に問題なくofxMeshWarpを利用した。
https://github.com/nariakiiwatani/ofxMeshWarp

GLSLで座標から角度を取得するためのatan2と角度のラップ

座標から角度を求めるatan2

フラグメントシェーダーを使っててある場所とある場所の角度を求めたい時がある。今回はGLSLなんだけど、atanを使えばいいのかな?と思ってやってみると円の反対側も同じ値が返ってきてしまうので微妙に使えない。C言語系統でいうatan2だといけるのだが、GLSLにatan2はないのでググって出てきたスタックオーバーフローの実装を使った。

c++ - Robust atan(y,x) on GLSL for converting XY coordinate to angle - Stack Overflow

float PI = 3.141592653589793;

float atan2(in float y, in float x)
{
    return x == 0.0 ? sign(y)*PI/2 : atan(y, x);
}

角度をラップする関数

角度って難しいので常に-180度 ~ 180度に収めるための関数をopenFrameworksのofWrapDegreesを参考に実装。atan2とあわせて色々ゴニョゴニョとやっていた。

https://github.com/openframeworks/openFrameworks/blob/master/libs/openFrameworks/math/ofMath.cpp

float wrapDegrees(in float value){
    float from = -180;
    float to = 180;
    float cycle = to - from;
    return value - cycle * floor((value - from) / cycle);
}

おわりに

オープンソースのプロジェクトは言語が異なってもコピペで持ってこれることがあるので大変ありがたいですね。みなさんも素敵なシェーダーライフをお送りください。

OpenGL 4.0 シェーディング言語 -実例で覚えるGLSLプログラミング-

OpenGL 4.0 シェーディング言語 -実例で覚えるGLSLプログラミング-