ウェブカメラを使うサイトが流行ってるのかな? 今度は新年を祝う WebGL デモサイト!
カメラの映像に応じてカメラが動く!
今回ご紹介するのは、完全な偶然ですが、二日連続でのウェブカメラを使ったコンテンツです。
今度のデモは顔の正確な認識まで行っているのかどうかは、正直わからないところもあります。しかし、恐らくある程度のシルエットは少なくとも認識できているようで、カメラを通じて得た情報を元に、インタラクティブにシーンに変化が表れるようになっています。
ただ 3D で見せるだけでなく、一手間掛けて実装するのが、最近の傾向なのかもしれませんね。
美しい景観をローポリゴンで表現
今回のサイトは顔の認識をウェブカメラで行うことで、それをマウスなどのデバイスの代わりに使おうというのがテーマのようです。
まずデモがスタートする前に、カメラの前に顔を映すように促すような形で顔のシルエットをかたどったアイコンが出てきます。カメラへのアクセスを許可し、ちょっとの間だけカメラの前でじっとしていると、認識完了です。
カメラでの認識が終わると、シーンは広大な雪山を描いた場面へと切り替わります。
全体的にローポリゴンながら、白い雪の美しさを感じることができる、なかなかいい感じの仕上がりになっていると思います。
山肌には、新年を祝う巨大なメッセージが張り付いたようになっています。上の画像ではちょっとわかりにくいと思いますが、このメッセージは大きな 3D のオブジェクトとして描かれています。
カメラで認識していることを示すものは何も描かれませんが、体を動かしてみたりすれば、カメラからの入力をきちんと処理しているということがわかるでしょう。
ウェブカメラに近づくと、それに連動するようにシーンを撮影しているカメラの位置もアップになったり、あるいはズームアウトしたりと動きます。
近づくと下から見上げたようなアングルになることも。
個人的には、もう少し軽快に反応してくれたほうが、見ている側にもレスポンスとして受け取れる感動が大きいのかなと思いました。
また、ちょっと気が付きにくいところではありますが、画面内をくまなく見渡してみると、雪山に佇むこの土地の住人を見つけることもできます。
マウスなどでの操作が一切できないので、うまく体を動かしていろいろシーン内を眺めてみるのもいいでしょう。
ひとりポツンと佇むクマさん!
今回のこのデモは、実装者の方が Twitter に投稿されているのを目撃したことで見つけたのですが、その Tweet には「my first demo」と書かれていました。
初めて実装した WebGL コンテンツがこのレベルとは、恐れいりました。
シンプルなデモで、あまりできることは多くありませんが、ウェブカメラと連動した、ただ 3D で描いただけではない面白い作品に仕上がっていると思います。
ぜひチェックしてみてください。