フラグメントシェーダによるリアルタイムポストエフェクトがすごい! ぜひカメラのある端末で! Webcam Toy

doxas : 2014-11-22 13:45:17

まさに WebGL ならでは!

WebGL はブラウザで実行できるということが大きなメリットですが、その WebGL のメリットを最大限に活かした、すばらしいカメラアプリがリリースされていました。

Webcam Toy と名付けられたこのサービス。

私が想像していたよりもはるかに完成度が高かったです。

エフェクトの種類がすごい

サイトにアクセスすると、まずは Web カメラを有効にするように求められます。

下の画面の中央に、画像ではちょっと文字まで見えないと思いますが、ピンク色のボタンでカメラを有効にする旨を促してきます。

ここは素直にカメラを有効化しましょう。

ここで細かいことですが素晴らしいなあと感じたのは、Chrome の場合、カメラを有効化するかどうかユーザーに尋ねるステータスバーのようなものが画面の上に出るのですが、そこにアニメーションするストライプ状のバーを表示して、ユーザーの注意が向きやすいようにしている点です。

簡単なことのようですが、初めて Web カメラを使うユーザーにとってはすごく親切なインターフェースだなとちょっと感心しました。

カメラを有効にすると、早速リアルタイムにエフェクトが掛かった状態の様子を閲覧することができます。

驚くべきは、そのエフェクトの種類の豊富さ!

画面の下のほうにピンク色のボタンが表示されていて、エフェクトを次々に切り替えていくことができるのですが……

その種類がとんでもなく多いです。

簡単なミラーのようなものから、エッジの検出などのモノクロ表現。

さらには、画面上に GLSL によるエフェクト効果を合成したものまで、実に多彩。

見ていてまったく飽きません。

GLSL のエフェクト実装としても完成度が高く、非常に参考になる点が多いです。

もちろん、当然ながらこれらのエフェクトはリアルタイムにカメラの映像に対して掛かるようになっていて、なかにはエフェクトの効果のほうもアニメーションしているものがいくつかあります。

WebGL と GLSL による高速な画像処理ができるからこその荒業ですね。

とにかく完成度の高いこのウェブサービス。

スマートフォンアプリなどでは割とよくある実装かもしれませんが、Web でこれだけのものを作った例は私の知る限り他にはありません。

ぜひ、この驚きの体験を味わってみてください。

リンク:

Webcam Toy

share

follow us in feedly

search

search

monthly

sponsor

social