JavaScriptでヘッドトラッキング

最終更新日

ヘッドトラッキングで地球儀をぐるぐる回すよ!
d3glob

example

Gunma.web #14で発表してきた内容の一つ、Canvasを使ったヘッドトラッキングライブラリを使って作成したデモです。
カメラに対する頭(顔)の位置で、地球儀の回転する方向(X軸)が変わります。
当然のことながらWebカメラがないPCでは動きません。また、Chromeでしか動作確認していません。
上記ページを開くと「Webカメラの使用」の許可/拒否を利かれるので、利用の際は許可を選択してください。
全てクライアントサイドで処理を行うため、サーバー側にデータを送ることはありませんが、気になる人はWebカメラ使用の許可を出す前にソースを調べてください。

headtrackr.js

上記ライブラリは、Webカメラからの入力されたデータを解析して顔の位置を検出します。ちなみに、正面でしか検出できません。
また、検出後のトラッキングはエッジと肌の色を元に追跡するようなので、肌の色と背景の色に差があまりないと見失うことが多いです。
また、部屋が暗すぎたりしても駄目。
クライアント端末のスペックによっては、顔座標を検出するまでに結構時間がかかります。
使いどころが難しいライブラリですが、簡単にヘッドトラッキングを実装できるので、試してみると面白いかもしれません。

地球儀自体はD3.jsを使って描画しています。

【D3.js】 SVGで地球儀を描く

サンプル

headtrackr.jsを読み込みます。

input用・output用のキャンバスと、webカメラからデータを読み込むためのvideoタグを用意します。

ヘッドトラッキング処理は以下。

1件のコメント