「ちょっと作ってみました」的な内容です。
もくじ
1. はじめに
成果物はこちらの動画のツイートです。
えー、本日の夏休みの自由研究状況ですが、M5Stackで多視点表示にチャレンジしました。
— 獏星(ばくすたー) / Megumi Baxter (@baku_dreameater) July 9, 2019
M5Stack上では2枚の絵を合体させた静止画を1枚だけ表示しています。 pic.twitter.com/9CJEXvWtR2
いわゆる多視点表示とかレンチキュラーと呼ばれますが、上記ツイートのレベルだと見る向きで色が変わるシールと言っちゃった方がイメージしやすいですね。
本記事ではコレを作る流れを大まかに紹介します。
2. 必要なもの
物理的に必要なもの
- M5Stack
- Micro SDカード
- レンチキュラーレンズのシート
- SDカードが読み書きできる、M5Stackの開発用PC
手元ではM5Stack Basicを使っています。M5Stickだと画面サイズ的にしんどいと思います。
なお、レンチキュラーレンズのシートがどこで買えるかは私は知りません。ハッカソンの参加賞で貰ったからです。
物理的ではない必要なもの
- M5Stackの開発環境
- 画像処理できる何かのソフト
- レンチキュラーレンズの基礎知識
M5Stackの開発環境はググれば見つかるので省略します。
画像処理についてはOpenCVとか使うのが良いですが、今回は簡単な使い方なので、ビットマップ操作が出来れば最悪どうにかなります。
レンチキュラーレンズの基礎知識は下記などで勉強できます。
なお上記資料はLooking Glass勉強会というイベントの資料です。
Looking Glassをもし知らない方が本記事を読んでいたら、こちらもあわせてご覧下さい。
3. 作り方
まずM5Stackの開発環境を整えて、ハローワールドとか、SDカードに画像ファイルを入れて表示できる事をチェックします。ここは多視点とあまり関係ないので基本割愛しますが、一点だけ注意を。
本記事で紹介している実装ではArduino IDEを用い、画像表示にM5.Lcd.drawJpgFile関数を使っています。手元環境ではM5.Lcd.drawBmpFileを試してもうまく動きませんでした。
なぜdrawBmpFileが動かなかったのかは詳細まで調べていませんが、もしメモリ起因の問題なら深追いしても仕方ないかな？と、一旦諦めています。
ともかく、今回は絵を出せればいいので、M5Stackで最終的に使うArduino IDE上のコードはこうなりました。開発環境が違う場合は適宜読み替えて下さい。
#include <M5Stack.h>
void setup(){
M5.begin();
M5.Lcd.clear();
M5.Lcd.drawJpgFile(SD, "/lenna_cat.jpg");
}
void loop() {
M5.update();
}
ここからが本記事に特有の実装ステップです。
まずレンチキュラーレンズを貼ります。M5Stackの場合、レンズの向きが液晶画面に対して真っすぐタテになるよう貼れます。
先ほど紹介した参考資料では「レンズはふつう斜めに貼る」とありますが、M5Stackの表示方式ではレンズがタテになっててもOKです。また、レンズの表裏についてはPC画面の白い所にあててRGB縞が出る当て方が正しいです。
恥ずかしい話ですが、私は最初しばらくレンズの表裏を間違えて「あれ？うまく映らないな～」ってやってました…。
無事にレンチキュラーレンズを貼ったら、適当に2枚の画像を用意します。今回はlennaと猫のフリー写真を使いました。
M5StackのLCDが320x240なのでサイズを合わせてあります。手法的には絵が3枚以上あってもいいですが、最初は2枚で表示がキレイになるところをゴールにすると無難です。
これらの画像は横方向に縮めて短冊状にブチブチ区切り、並べ直すことで合成します。具体的なコードは割愛しますが、操作イメージとしてはlennaをこうして
猫をこうして
二つを合わせるだけです。最悪手作業でも出来ますが、時間がかかるのでオススメしません。
短冊状にする部分の太さは下記のように、各画像のブツ切りがすべて1回ずつ出てくるピクセルの幅と、レンズの幅が一致するように合わせます。
数値の例を出すと、手元のレンチキュラーレンズではレンズのピッチが0.9mmだったので
- M5Stack BasicはDPIが約
192→1ピクセルの幅が(25.4 / 192)≒0.13mm - 約
0.9mmのレンチキュラーレンズにおさまるピクセル数は(0.9 / (25.4 / 192))≒6.8
みたいな計算でピクセル数が求まります。したがって2枚の画像を合わせるなら、例えば4ピクセルと3ピクセルの短冊状に区切って順番に並べれば7ピクセル幅となり、だいたいOKです。
ただし、これでも数値がまだ少しズレているため、いわゆる「うねり」が観察できます。
ふたつの画像が交互に見えちゃってますね。うねりが見えるのは調整がほぼあっている証拠でもあります。
この後は画像全体をちょっとずつ横に伸縮したものを入れてみて、ピッタリ来る値を探すことで、キレイに見える絵が得られます。この状態が、冒頭でツイートした下記動画の内容です。
えー、本日の夏休みの自由研究状況ですが、M5Stackで多視点表示にチャレンジしました。
— 獏星(ばくすたー) / Megumi Baxter (@baku_dreameater) July 9, 2019
M5Stack上では2枚の絵を合体させた静止画を1枚だけ表示しています。 pic.twitter.com/9CJEXvWtR2
4. 知見とまとめ
最初は「M5Stackの解像度だと厳しいかな？」と思っていたのですが、M5Stackが192DPIあるので思ったよりは行けそうなことが分かりました。
静止画や低FPSな動画でも見栄えがするので、M5Stackと相性がよい使い方だと考えられます。
ただ、多視点にチャレンジしてみた本来の動機としては「M5Stackで裸眼立体視って出来るかな？」という所からスタートしているので、せっかくなら立体視っぽい所まで進めたいと思っています。
立体視らしい所まで漕ぎつけたらまた記事になるので、続報にご期待下さい。
