前回の記事の続きです。
もくじ
1. はじめに
こんな感じのを作りました。実行時に必要なのはM5Stackとレンチキュラーレンズシートだけです。
きのうのM5Stack多視点チャレンジの続報です。かなりギリギリ感ありますが立体っぽくなりました pic.twitter.com/WfkcGk02Jz
— 獏星(ばくすたー) / Megumi Baxter (@baku_dreameater) 2019年7月10日
これを作る手順を大まかに紹介します。
2. 前回のあらすじ
本記事のまえにこういう記事を書きました。
この記事では「2枚分の静止画が視点によって切り替わる」という、立体視の前段階みたいな機能までを作っていました。
えー、本日の夏休みの自由研究状況ですが、M5Stackで多視点表示にチャレンジしました。
— 獏星(ばくすたー) / Megumi Baxter (@baku_dreameater) 2019年7月9日
M5Stack上では2枚の絵を合体させた静止画を1枚だけ表示しています。 pic.twitter.com/9CJEXvWtR2
本記事はコチラの「2枚の画像は表示できてます」という状態まで作れていることを前提に進めます。
3. 立体視に必要な追加ステップ
2枚の画像を表示するのと立体視のための画像表示は結構似ているので、絵を差し替えて調整すれば立体視になります。やることは大まかに3ステップ。
- 多視点の画像群を用意
- 多視点の画像群を1枚に合成して調整
- 位相を調整
順に見ていきます。
3.1. 多視点の画像群を用意
当然ですが映すべき画像が必要です。今回の例ではUnityで適当なシーンを作り、X軸方向にカメラを移動しながら向きをあわせてスクショを撮りました。
カメラのFOVは小さめに取るほか、カメラの移動幅は大きすぎないようにします。本記事の例では(CG空間内で)約1mの幅でカメラを動かし、約15cmおきに撮影しています。
3.2. 多視点の画像群を1枚に合成して調整
前回の記事で2枚の絵を合成していたのと同じ要領で画像数を増やします。手元環境の場合、使っているレンチキュラーレンズのピッチ幅がM5Stack液晶画面の約7pixel相当だったため、7視点ぶんの画像を合成しています。
これが元画像で、
並べ直したものがこんな感じ。
ここでの注意として、右側から見たときの絵ほど左側に並べます。なぜ逆向きなのかは前回記事でも紹介した下記資料(のP11付近)で分かるので、ピンと来なければ読んでおきましょう。
また前回の記事と同様、レンズのピッチ幅が少し合っていない分は画像の伸縮で微調整します。
この時点で作成した画像はM5Stackに表示しても立体視できない可能性がありますが、その場合は片目だけで見た目をチェックします。片目で見て絵に不整合が見られる場合、元の画像群を作成したときにカメラを大きく動かしすぎている可能性があるので、前節「多視点の画像群を用意」のステップをやり直します。片目で見て違和感がなければ、そのまま次に進みます。
3.3. 位相を調整
「位相を調整」と言ってますが、要は作った多視点画像を丸ごと横に1ピクセルとか2ピクセル分だけずらすという作業です。
この微調整は何のためにするかというと、M5Stackを真正面から見たときに「真正面から見た絵」がちゃんと出るようにするためのものです。1ピクセルずつずらしていくと、真正面から見ているときの絵が「左から見た絵」「右から見た絵」「右から見た絵と左から見た絵の切り替わり部分(※両目で見るとヘンに見える部分)」などに変化していきます。これをなるべく真ん中で正しく映るようにします。
ここまでやった結果が冒頭の動画です。
きのうのM5Stack多視点チャレンジの続報です。かなりギリギリ感ありますが立体っぽくなりました pic.twitter.com/WfkcGk02Jz
— 獏星(ばくすたー) / Megumi Baxter (@baku_dreameater) 2019年7月10日
4. さいごに
実装都合とかもあって7視点という控え目な構成でのチャレンジだったのですが、前記事とあわせての作業時間(10hくらい)にしては結構いい線行ったという手応えです。
M5Stackは手軽に扱えるわりにLCDが結構細かいため、こういう用途でも強いなあと思いました。
