ウェブデザインとスーパーのチラシの共通点
今週の週刊 Life is Beautiful:12月3日号

OpenGLだと数千行になる動画処理を、数行で記述出来る Video Shader Script

Gpu-performance

Apple が iPhone 5s の発表会で見せたグラフが示す様に、モバイルデバイス向けのGPUの性能の向上は著しい。GPU を上手に活用すると、3Dゲームだけでなく、画像処理などの科学技術計算が大幅に高速化出来るのだが、開発環境が整っていない点が大きな問題だ。

私自身もカメラから取り込んだ動画をリアルタイムで画像処理するアプリケーションを OpenGL を使って開発していたのだが、(はっきり言って時代錯誤の API である)OpenGLでのプログラミングは苦痛極まりない上に、GPU を効率良く使うためにはさまざまな工夫が必要である。OSを開発した経験のある私としては、ここはなんとかしなければいけないと強く感じた。

そこで、OpenGL プログラミングの煩雑さに煩わせずにGPUを使った画像・動画処理が出来る様な開発環境 Video Shader を開発することにしたのだが、それがようやく公開出来る段階に至ったので、簡単に紹介する(詳しくは、12月8日のイベントで解説する)。

画像処理と言えば、Photoshop が定番である。例えば、撮影した写真を美味しく見せようとすれば、全体を少し明るめにした上で、赤を若干強調し、色情報を強め、さらに「テカリ」を強調するために全体をシャープにする。Photoshop の機能としては、「レイヤー」、「イメージ・フィルター」、「レイヤーのブレンド」を組み合わせて使うことになる。

Photo 1-7 copy Photo 2-6 copy

Video Shader も基本的には同じ仕組みで動く。唯一違うのは、「レイヤーを分ける」「フィルターをかける」「二つのレイヤーをブレンドする」などの一連の操作を手作業で行うのではなく、あらかじめ Video Shader Script(VSScript) と呼ぶ中間言語でプログラミングしておき、カメラから取り込んだ動画の一コマ一コマをGPUを活用してパイプライン処理する点である。

例えば、上に書いた「食べ物を美味しく見せるビデオ・フィルター」を Video Shader Script で記述するとこうなる。

{
    "title":"Delicious",
    "pipeline":[
        { "filter":"lighter", "attr":{ "ratio":1.1 } },
        { "filter":"enhancer", "attr":{ "red":[0.0, 0.9] } },
        { "filter":"saturate", "attr":{ "ratio":0.15 } },
        { "control":"fork" },
        { "filter":"gaussianblur", "attr":{ "radius":2.0 } },
        { "blender":"differentiate", "attr":{ "ratio":2.0 } },
    ]
}

JSON をベースにした言語なので、ソースを見ただけで大体想像できると思うが、"pipeline" とうい名前の配列に並べた shader を上から順番にパイプライン処理して行く、というシンプルな構造である。

上の例だと、"lighter" filter が全体を10%明るくし、"enhancer" filter が赤を強調し、"saturate" filter が全体の色味を強調する。"fork" がレイヤーを二つに分け、片方に"guausian blur" filter でぼかした上で、"differenciate" blender で二つのレイヤーをブレンドしている。

iPhone5s のGPUを使えば、この処理を 720p/30fps の動画にリアルタイムで施すことが出来る(iPhone 4s だと 720p/30fps は少し厳しく、VGA/30fps か 720p/15fps になる)。

開発環境をオープンソースで提供することも考慮したが、より多くの人に楽しんでもらうために、開発環境そのものを iPhone アプリとして配布することにした。実際のアプリのリリースは12月中旬〜1月前半の予定だが、12月8日のイベントにはベータ版を配布できると考えている。 

Comments

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name is required. Email address will not be displayed with the comment.)