yoppa.org


Blog

openFrameworks + GLSLでクロマキー合成

screenshot_199

(追記) : すぐに使えるように、addon化してみた! (openFrameworks 0.9.0 〜)

ちょっと仕事でプログラムしていた際に調べたコネタ。

画像やムービー素材を背景に合成して表示したい場合、もとの素材がPNG形式などでアルファ値で透明度が指定されている場合は問題ないのだけれど、背景が黒や緑などの単色ベタ塗りになっていたときには、いわゆる「クロマキー」的な処理をする必要がある。

Shader(GLSL)を知らなかった頃は、画像の全てのPixel情報をとり出して、特定のチャンネルを描画しないなどの力技でやろうとしてみたけど、CPUへの負荷が尋常でないので、大きな画像素材では現実的ではない。

そこで、openFrameworks + GLSLでクロマキー合成をする方法を調べてみた。

WebGL用に実現しているブログがとてもわかり易く理解できた。

こちらを参考に、openFrameworks用に移植してみた。

まずはShaderのソース。vertex shaderは、こんな感じ。

  • chromaKey.vert

こちらは、テクスチャーの情報をfragment shaderに渡してるだけ。

次にfragment shader。

  • chromaKey.frag

キーの色と閾値をuniformにして、外部から指定できるようにしているのがポイント。これで汎用性のあるクロマキー合成用Shaderとして活用できる。

これをopenFrameworks側で利用する方法はこんな感じ。

  • ofApp.h

  • ofApp.cpp

閾値を設定することで、例えばちょっと背景との境界がボケている画像でも。

source

こんな感じできれに合成できる!

screenshot_198

もちろん動画でも簡単!

  • ofApp.h

  • ofApp.cpp

爆発もきれいに合成できました!

screenshot_199