「すけすけゴーグルくん」アプリの記事を見て「あ、これなら私にも作れるかも」って思ったので作り始めた。 画像処理の勉強も兼ねようと思ったので、「実践コンピュータビジョン」(O’REILLY) を見ながら進めた。

作る前の準備

まず、どう作るか考えた。

透過なしの場合の描画内容

ーーーー  ← メガネのフレーム画像
ーーーー  ← カメラで取得した画像

透過する場合の描画内容

ーーーー  ← レンズ部分に透過画像をはめ込んだ画像
ーーーー  ← メガネのフレーム画像
ーーーー  ← カメラで取得した画像

ここまでで、透過前、透過後、そしてメガネの画像が必要そうなのがわかった。
で、必要な素材を「いらすとや」さんで探してきた。

いらすとや さん、ありがとう！
次に、適当な Web カメラがないのに気づいたので、最寄りのビックカメラで一番安いやつを買ってきた。

なんだろな、ここまで準備がガバガバだと、「本当に思いつきで始めたんだなー」って自分で客観視できて良いです。

作り始めた

私が勉強していく過程でわかったこととかを説明し直すのは面倒なので、作業途中のスクリーンショットだけ貼っていきます。

同じ画像で SIFT 特徴量を用いたマッチングをしたはずなのに、対応位置がずれてショックを受けたときのスクリーンショット。

ふて寝した後で見なおしたら、あっさり修正できたときのスクリーンショット

ホモグラフィーとか RANSAC を使って、モニタをカメラで撮った画像に対して検出できた画像の枠を青色で描画してみたときのスクリーンショット。 それなりに動作してちょっと嬉しかった。

最後に、眼鏡内に透過後の画像をはめ込むようにして、実際に動作させたときのスクリーンショット。 縮小してない画像に SIFT を適用して処理が激遅だったり、アフィン変換が RGB 画像だと失敗する理由がわからなくて、透過画像が白黒になったりしている。

とりあえず、動作したことにした！

まとめ

• 実践コンピュータビジョンの内容に沿って進めたら、それなりに動作して嬉しかった。
• ちゃんと動くものを作るなら、何かの AR ライブラリを利用して作るのが簡単だと思う。
• 和牛の垂れ幕が透けても、あまり嬉しくないのがわかった。

今回の記事のソースコードとかは、以下にあります。
https://bitbucket.org/satofumi/transparent_glasses