ディスプレイ用の特殊なレンズを使用したメガネメーカーが送るアイトラッキング機能付き WebGL アプリがすごい!
ウェブカメラを利用した面白い技術
今回ご紹介するのはとあるメガネメーカーのサイトです。
初めてこのサイトを見た時は、その雰囲気から新作ゲームのティザーサイトか何かかなと思ったのですが、調べてみたらびっくり、なんとメガネ用のレンズを作っているメーカーではないですか。
どうやら、いわゆるブルーライトカットのような、デジタル製品のディスプレイ用に開発された特殊なレンズを使ったメガネが主力商品の企業のようです。
ブラウザでアイトラッキングを行う驚きのゲームコンテンツが公開されています。
アイトラッキングはすごいが精度はまだ微妙かな?
このコンテンツの凄いところ、最も注目すべきポイントはなんといってもアイトラッキングをブラウザで実現していることだと思います。
アイトラッキングを使ったブラウザゲームなんて、本当にその試みのチャレンジ度数がまずすごいなあと感心しました。
正直なところ、その精度はまだまだこれから最適化されていくものかなという感じなのですが、機能としては完全に動いてます。
またサイトの雰囲気がすごくかっこいいですね。ほんとにコンシューマなどの新作ゲームのティザーサイトではないかと錯覚するほどの作りこみです。
WebGL の実装部分が始まる前のステップとして、PRO MODE と呼ばれるウェブカメラによるアイトラッキングを行うか、マウスで操作するモードでプレイするかを選択します。
ウェブカメラが搭載されている端末であれば、プロモードのほうを選択することで、アイトラッキングのためのチェックページへ行くことができますので、一度体験してみるのもいいでしょう。
ウェブカメラがない場合は、マウスでもコンテンツを楽しむことはできますので、下のビギナーモードを選択すればいいですね。
アイトラッキングのチェックページでは、ウェブカメラへのアクセスを許可してあげましょう。画面の中央にカメラからの映像が映るので、そこに顔が映るようにしてやります。
すると、自動的に顔認識、と言うかこの場合は瞳の部分を検出しているのだと思いますが、トラッキングのためのチェックが行われます。
正しく認識できているのかどうかは、上の画像のようにチェックするフェーズが設けられているので、そこで確かめることができます。
正直なところ、私の環境ではアイトラッキングしたカーソルが高速で動きすぎてしまう感じがあり、あんまりうまくいきませんでした。視線と一緒に顔を動かしてしまうと、全体的に移動が大振りになるような印象でしたが、カメラの位置などによっても微妙に様子が変わってくるのかなという感じがしました。
マウスでプレイする場合でも、アイトラッキングでプレイする場合でも、まず最初にチュートリアル的な内容からスタートします。
マウスカーソルか、もしくはアイトラッキングした視線の先に、スコープのようなサークルが出てくるので、これで登場するオブジェクトを次々と捕捉していきます。
背景にはなぜか青白く照らされた男性の顔が怪し気に浮かんでいるのですが……視線をテーマにしたコンテンツなので、彼が動くことによって、視線がどのようにゲーム内で動いているのかを表現しようとしているのでしょうね。
VR のゲームで、HMD の傾きを検知しつつ、視線の先にフォーカスしたオブジェクトを破壊するといった内容のものがありますよね。あれと同じような感じで、アイトラッキングで見つめた先にあるオブジェクトが何かしらの反応を示すようになっています。
青いオブジェクトは破壊することができ、黄色いオブジェクトは一定時間、少し長めに見つめることで破壊できるのかな?
私の環境ではあまりアイトラッキングがうまくいかなかったのでマウスでプレイしていたのですが、結構スピーディーな展開なので難易度は高めですね……
スコアも集計してくれますし、ワールドランキングのようなバックエンドの仕組みも実装されているみたいです。
EYEZEN というこのメガネのメーカー、日本には支社もないようですが世界中に展開している企業のようです。
上の画像は、そんな世界中の EYEZEN の支店を可視化したもののようで、インフォメーションとしてもこれだけリッチな WebGL コンテンツを用意しているというのは、なんともすごいです。
サイト全体の雰囲気の良さ、そして javascript を使ってブラウザでアイトラッキングするというそのチャレンジ精神、いずれも素晴らしいですね。
今回のケースのような、マウスやキーボードといった一般的な入力デバイスではない、新しい入力方式がウェブにやってくるというのはいろいろな可能性を感じさせますね。
とても素晴らしいサイトに仕上がっていますので、ぜひチェックしてみてください。