VideoShader をオープンソース化しました
2015.04.09
昨年 iTunes ストアで公開し、オースチンの SXSW でもブースを持ってデモをした VideoShader ですが、このたび一周年を記念して、エンジン部分のソースコードをすべてオープンソース化しました。
https://github.com/snakajima/videoshader
Instagram などが行っている写真のフィルター（「Toy Cameraフィルター」や「アニメフィルター」）は、複数のフィルターを組み合わせて実装しますが、カメラから入ってくる映像をリアルタイムで処理する際には、高速に動作するフィルターをパイプライン上に繋げて実行する必要があります。
数年前までは、高性能なパソコンでしか無理でしたが、GPU 性能の向上により、ようやくスマフォでもそんな処理が可能になりました。
VideoShader は、スクリプト言語 VSScript を使ってビデオパイプラインを記述できるという手軽さを持ちながらも、実行時にはそれを OpenGL の GLSL にまでコンパイルして落とし込み、CPU をほとんど使わず、大半の処理を GPU に並列処理させるという設計により、iPhone5 で 720p/30fps の処理を可能にしています。
アニメフィルターを VSScript で記述すると、以下のようになります（VideoShader Composer を使って、インタラクティブにフィルターを作ることも可能です）。
"title":"Cartoon I",
"pipeline":[
{ "filter":"boxblur", "ui":{ "primary":["radius"] }, "attr":{"radius":2.0} },
{ "control":"fork" },
{ "filter":"boxblur", "attr":{"radius":2.0} },
{ "filter":"toone", "ui":{ "hidden":["weight"] } },
{ "control":"swap" },
{ "filter":"sobel" },
{ "filter":"canny_edge", "attr":{ "threshold":0.19, "thin":0.50 } },
{ "filter":"anti_alias" },
{ "blender":"alpha" }
]
}
これを VideoShader で実行すると、世の中の景色をアニメ化して見ることができるのです。下のビデオは VideoShader を使ったサンプルです。
OpenGL をいかに効率的に使うか、iOS 上でカメラから取り込んだ動画をいかに CPU を介さずに GPU に渡して処理させるかなど、さまざまなノウハウがぎっしりと詰まったソースコードなので、OpenGL や AVFoundation の勉強にも持ってこいだと思います。
【追記】Node.js アプリケーションを iPhone/iPad 上で動かすための neunode もフルにオープンソース化したので、こちらもよろしくお願いします（https://github.com/snakajima/neunode）。こちらには、iOS 上で HTTP サーバーを走らせるためのノウハウが詰まっています。
Comments