ピクセルシェーダ on ofxPostGlitch

導入

紹介動画(公式の動画があるのですが、noteにvimeoが貼れないのと、可愛いサンプル動画を上げている方がいらっしゃったのでリンクさせていただきました。)

 ofxPostGlitchは、oF+GLSLでポストエフェクトを実現するためのアドオンです。アドオンにはいくつかのプリセット的シェーダプログラムが仕込まれているのですが、難しい事はやっていないのでピクセルシェーディングの導入にはかなり使えるんじゃないかと思っています。

ofxPostGlitchの使い方

まずは、アドオン自体の使い方を説明します。ソースコードはこちら

従来のアドオンと同じようにソースコードを追加した後、Shadersフォルダをプロジェクトのdataフォルダ内にコピーしてください。

ofxPostGlitchは、最低2つのクラスを必要としますので、その2つを定義します。

ofFbo myFbo;ofxPostGlitch myGlitch;

ofxPostGlitch本体の他に、Fboのインスタンスを作ります。エフェクトを適用したい映像は、すべてこのFboに描画します。

void testApp::setup(){    myFbo.allocate(640,480);    myGlitch.setup(&myFbo);}

初期化します。先にFboを初期化した後、setupでFboのポインタを渡します。

void testApp::update(){   myGlitch.setFx(OFXPOSTGLITCH_CONVERGENCE,true);}void testApp::draw(){    myGlitch.generateFx();    myFbo.draw(0,0);}

setFxでエフェクトをスイッチします。エフェクトの種類はOFXPOSTGLITCH_XXXXXとして定義されていて、第二引数のbool型でオン・オフを決めます。

Fboに何らかのビジュアルを描画したら、generateFxを呼び出すとFboにエフェクトがかかります。あとは通常通り、Fboを描画してあげればビジュアルが確認できます。

ofxPostGlitchを改造する

と、、ここまではアドオンとしての使い方です。ここからは、postGlitchの改造方法をご紹介します。エフェクトのプログラムはすべてShadersフォルダの中に入っており、このプログラムをいじってあげるとエフェクトを改造することができます。まずは一番シンプルなソースコードinvert.fragをいじってみましょう。

void main (void){	vec2 texCoord = vec2(pos.x , pos.y);	vec4 col = texture2DRect(image,texCoord);	col.r = 1.0 - col.r;	col.g = 1.0 - col.g;	col.b = 1.0 - col.b;	gl_FragColor = col;}

 main関数だけに注目します。初めの2行はテクスチャの色を取得していて、texCoordでテクスチャ座標を取得した後、それを元に変数colへピクセルの色情報が格納されるようになっています。

 ようは変数colに1ピクセル分の色が入り、テクスチャ全部のピクセルについてこのmain関数で定義された処理をする、という仕組みになっています。

invert.fragは、このようにRGBの色を反転するエフェクトなので、RGBの情報について

col.r = 1.0 - col.r;

 とすることで各チャンネルの色を反転してくれています。そうして計算された色情報はまだ変数colに入れっぱなしなので、最終的に出す色は

gl_FragColor = col;

としてgl_FragColorに入れてあげることで確定されます。各チャンネルの色は自由にコントロールできるので、例えば赤と緑をすべて0にしてしまって青だけをスルーしようとすると

	col.r = 0.0;	col.g = 0.0;//	col.b = 1.0 - col.b;

というコードになりこのように青チャンネルだけを取り出すことができます。

もう少しトリッキーな事をしようとすると、先ほど出てきたposという変数には座標情報が含まれているので、

col.r = col.r + sin(pos.y / 10.0);

とすると、pos.yの値に沿ってサイン関数の波が足されるので、このような縞模様ができます。

更にこれを応用して、色々調整してあげると、

float pattern = sin(pos.y / 2.0) / 4.0;col.r = col.r + pattern;col.g = col.g + pattern;col.b = col.b + pattern;

こんな風にテレビの走査線風エフェクトをかけたりもできます。

 ofxPostGlitchはアドオンとしてもわりと便利かなと自分で作っておいて思うのですが、シェーダのサンプルとしてもかなり簡単な事だけで実現しているプログラムが殆どなので、改造して遊べば導入として良いんじゃないかと思っています。

 このように平面の画像を処理する技術をポストプロセッシングと呼びますが、この辺りは色々なノウハウがあったりします。
自分がよく参考にしていたイメージングソリューション等のサイトでアルゴリズムを読み解くと、そこから発展してオリジナルのポストエフェクト等を作ることができます。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

4

ひつじ

oFセミナー資料

2014年 デジタルアートセミナー#3 (oFセミナー)にて、ひつじが担当したプレゼンについての資料まとめです。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。