パララックス（視差効果）を使った動画ライクな画像の表示を試してみる
目次
デモ画像
マウスのカーソルを画像の上で動かすと、奥行きがあるように見えます。
パララックス・視差効果とは？
視差効果という言葉を聞いたことがある方もいらっしゃると思います。
右目と左目の見え方の違いを想像するとわかりやすいかもしれません。
片方の目を手で押さえながら、右目と左目それぞれで”物体”を見ると少し位置がずれて見えると思います。
普段はあまり気にすることはありませんが、
この”少し位置がずれて見える効果”を”奥行き”として認識できるように大脳が処理をしています。
このような効果を付けることをパララックスと呼んでいたりします。
また最近では、スマートフォンに２つのカメラを搭載してこの視差効果を活用し、
奥行きの計算をして、
効果的なぼかしを付加することができるようになったりしています。
デジタル処理にて確認するための色々な方法
- WEB処理を行う
- テレビの３D表示機能を使用する
- VRなどを活用する
- ３DCGを活用する
WEB処理を行う
実際に見ていただいた、このページのような表示の仕方になります。
今回、結構これを実現するのに時間がかかってしまいました。その話は後々するとして、
まず必要なのは、
・基礎的なプログラミング知識
・基礎的なWEBコーディング知識
・JavaScriptとは？
の三つです。あとはグーグル先生を講師に招いて実装していきますｗ
なぜ実装に時間がかかってしまったのかというと一点目が、
・このHPにアップロードした画像が実装したときに、そもそも見れないという問題を抱えていました。
（コードがうまくいっても、画像が見れないのでうまくいってるかどうかも分からない）
※なぜなのかはただいま確認中で、今後の課題です。
二点目が、
・このページは、WORDPRESSにて構築されていますが、WORDPRESSに応じた独特の記載方法があり結構難航ｗ
というこの二点を解決するのに時間がかかってしまいました。
実装方法については、また別の記事にするとして、実装にあたっては
Javascriptでコードを組んで表示させています。
３D表示機能を使用する
３Dといわれると、これ！みたいに一般的になりましたが映画やテレビで３D眼鏡などをかけてみる方法です。
その方式などはここでは詳しく説明しませんが、簡単にいうと、
右目用と左目用に映像を分けて表示をして、それを脳に視差情報として処理させるということになると思います。
VRなどを活用する
これも基本的な表示技術は、３D表示機能と大差はありません。大きく違うのは、表示する装置【ゴーグル】にセンサーを内蔵していて、頭を動かした情報に応じて映像を連動させることができるといったものになります。
３DCGを活用する
奥行きがあるように見えるためには、実際に奥行きを作ってしまえばいい！ということです。
実際の風景などを、すぐさま３DCGにするのにはコストや手間がかかってしまいますが、
仮想空間においてそれを実現するのは比較的容易です。
ゲームなどを想像するとわかりやすいでしょう。
２D画像に奥行きデータを付加する
さて実際に２D画像に奥行き感をもたせるためにはどうすればよいのでしょうか。
デプスマップを作成する。
その答えが、「デプスマップ」です。こちらの画像をみてください。
今回最初にみてもらった、画像のデプスマップになります。
色の濃淡によって、奥行き情報を付加していきます。この画像は手前がホワイトで無限遠が黒というデータになっています。
iphoneなどは、２つのカメラを使用してこのデプスマップを画像の情報として持つことができます。
また一般的な３DCGソフトはレンダリングを行うときにデプスマップも出力することができます。
今回の画像には、もともとデプスマップが存在していなかったので画像加工ソフトで作成しています。
2D元画像とデプスマップを紐づける
このデプスマップと元の画像を、
ソフトウェアやVRゴーグル、プログラム処理することによって、あたかも奥行きがあるような表示をすることができます。
ただ気を付けなければいけないのは、
もともと２D画像なので、
そもそも奥行きを持っていない為、無理をすると違和感が出てしまいます。
なので表示を確認しつつ調整する必要があります。
まとめ
さていかがだったでしょうか。簡単にかいつまんで説明してきましたが、
実際目にするととても興味を引く視覚効果だと思います。
みなさんもいろいろ調べてみるといかがでしょうか。いつか実装編もご紹介したいと思います。