VRM立体視ディスプレイ

https://www.youtube.com/watch?v=J34XGL1XUJE&feature=youtu.be

概要

見る位置によって3Dモデルの見える向きが変わるディスプレイです。

運動視差を利用して立体感を提示しています。

ディスプレイ上部のWebカメラによってヘッドトラッキングを行い、頭の位置に合わせてモデルを回転させています。

両眼視差は提示できないため裸眼で近くで見るとあまり立体に見えません。

正直こういったディスプレイはn番煎じですが、奥行き知覚の面白さがありました。

立体視、奥行き知覚

ヒトなどが物体を立体的に認識し、奥行きを知覚する要素の一つとして「視差」があります。

両眼視差

両眼視差は左右の目の位置の差による像の差異です。

一つの物体を見ているとき左右の目で見える像には違いがあります。この違いによって奥行きを知覚することができます。

例）3Dメガネ

運動視差

運動視差は視点の位置の変化による像の差異です。

一つの物体を見ているときでも、見る位置によって物体の像は変化します。この違いによって奥行きを知覚することができます。

今回はこの運動視差を利用しました。

仕組み

仕組みはかなり単純です。

1. 3Dモデルを描画する

2. Webカメラで顔の位置を検出する

3. 顔の位置によって3Dモデルを回転させる

これをブラウザ上で動かします。

1. 3Dモデルを描画する

作ってあったものを流用しました。

2. Webカメラで顔の位置を検出する

顔のスクリーン座標と大きさを求める機能が最近追加されたようなので使ってみました。

code:js

JEEFACETRANSFERAPI.get_positionScale()

3. 顔の位置によって3Dモデルを回転させる

顔の位置によってカメラを移動させるのが自然だと思いますが、カメラを手動で動かして調節したかったので今回はモデルの方を回転させています。揺れ物の兼ね合いもあるのでカメラを移動させた方が良いとは思います。

モデルを回転させる場合、顔のx座標の応じてy軸を回転させます。

コードはこんな感じです。

code:js

const positionScale = JEEFACETRANSFERAPI.get_positionScale();

// ±10° で回転させる

hoge.rotation.x = modelRoteateX;

hoge.rotation.y = modelRoteateY;

完成！

顔の前にスマホを持ってきて動画を撮影するとこんな感じになります。

https://www.youtube.com/watch?v=J34XGL1XUJE&feature=youtu.be

個人の感想であり根拠を持ちません。

肉眼で見るよりカメラを通した方がそれっぽい

当たり前といえばそうなんですが、カメラを通して動画にすると両眼視差による奥行き知覚による違和感がなくなり、より立体感が増します。

裏を返せば肉眼で見るとそこまで立体に見えないです。片目で見ると立体感が増します。

真面目に言うとそれだけ奥行き知覚における両眼視差の影響が大きいということでしょうか？

複数人で見れない

仕組み上複数人で見れません。一人だけです。

グリッドを出した方がわかりやすい

グリッドというのは床に格子状に表示されている枠線のことです。

変化する情報が増えることと、遮蔽による奥行き知覚の影響だと思います。

Looking Glass

https://youtu.be/CfHw8NA75Xc

ルッキンググラスはレンチキュラーレンズによって見る角度ごとに違う映像を表示させることで両眼視差と運動視差の提示を実現しています。

また複数人でも同時にそれぞれの角度から立体視をすることができます。

Looking Glassは実物を見た方が良いです。

動画だとあまり意味がないのはこの立体ディスプレイをつくってよくわかりました。

余談

発端

Looking Glassの実物を見たけしごむ

参考