Blog Archives

作ってみよう。AR Cut and Paste

話題の技術を実装して試してみて、面白い使い方を考えてみましょう。

今回ご紹介するのは、

AR Cut and Paste

です。

スマホのカメラで撮影したモノがPhotoshopのなかに吸い込まれていきます。作ってみた動画をご覧ください。

オリジナルはこちら。https://twitter.com/cyrildiagne/status/1256916982764646402

この魔法のような動きに感動して作ってみました。何がどうなってこうなっているのか?どうすれば作れるのか?気になっている方に説明します。(現在は、研究中のプロトタイプなので、まだアプリをインストールすれば自分のPhotoshopでもかんたんに出来る!と言うわけにはいかないのでご注意ください。)

早速作ってみましょう!手順は5つです。

1.Photoshopのリモート接続を設定
2.BASNetを外部サーバとして構築
3.ローカルサーバを設定
4.モバイルアプリを設定

5.カットアンドペースト

1.Photoshopのリモート接続を設定

まずは、Photoshopのリモート接続のパスワードを設定します。

Photoshop->環境設定->プラグイン…

環境設定で「リモート接続を有効にする」にチェックを入れて、パスワードを入力します。サービス名はなんでも構いません。

環境設定

2.BASNetを外部サーバとして構築

「BASBet」とは「境界を意識した立体物検出技術」です。

https://github.com/NathanUA/BASNet(画像はgithubから)

BASNetと学習データを外部サーバに入れた後、httpアクセスをするためのラッパ(https://github.com/cyrildiagne/basnet-http)を動かします。ニューラルネットワークフレームワークのTorchを使うので、CUDA 互換のNvidia カードと6Gb以上のRAMを搭載したマシンで実行することが推奨されています。

AWSのEC2であれば、P2インスタンスが良いでしょう。1時間100円くらいで使えるのでテストには十分かと思います。

AWSのEC2でp2インスタンス起動

IPv4パブリックIPを控えておいてください。

dockerの使い方も書かれているのですが、私が試したところ権限がなく使えなかったので、ソースからビルドしました。WebサーバはApacheで立てました。

BASNet-http起動画面

3.ローカルサーバを設定

続いてローカルマシン上にBASNetにアクセスするためのローカルサーバの設定をします。コードはこちら https://github.com/cyrildiagne/ar-cutpaste

OpenCVを用いて,画像のセントロイドを別の画像に投影するscreenpointを使っています。ですので、Photoshopで新規作成する際には、指定されたサイズ通りに作らないとうまく動きません。

server/src/ps.py

DOC_WIDTH = 2121 
DOC_HEIGHT = 1280 
def paste(filename, name, x, y, password='123456'):

ローカルサーバはPython3.6以上でないと動きません。Macにデフォルトで入っているPythonは2系なので競合しないように仮想環境を使いましょう。

virtualenv -p python3.7 venv 
source venv/bin/activate 
pip install -r requirements.txt

先ほど控えたEC2のIP(ポート8080を忘れずに)とPhotoshopのパスワードを書き替えて起動します。ホスト名は省略可能です。

python src/main.py --basnet_service_ip="http://13.113.28.46:8080" --photoshop_password 123456

 

ローカルサーバ起動画面

4.モバイルアプリを設定

先にMacのローカルIPを確認します。システム環境設定->ネットワークでIP addressをメモします。

システム環境設定->ネットワーク

/appディレクトリにて

npm install

設定ファイルcomponents/Server.tsxにローカルIPアドレスを記述

const URL = "http://192.168.2.106:8080";

開始

npm start

 

モバイルアプリ起動画面

expoアプリを入れた状態でQRコードを読み取るとモバイルアプリが起動します。入れてない場合は、アプリ検索でexpoと入力すれば見つかります。

5.カット&ペースト

対象物に向かって画面を押すと撮影。指は離さないでください。
四角い点滅がしばらく待つと消えるので指をスクリーンに押したまま、Photoshop画面へスマホを向けます。
画面に近づいたら指を離します。しばらく待つと四角い点滅が消えて先ほど撮影したモノが、背景のトリミングをした状態で現れます。

たくさんキャプチャして遊びましょう♪

まとめ

構築は以上です。お疲れ様でした!

まだプロトタイプなので動かすまでにやることが多くて大変ですが、これが進化してストアからインストールするだけで良くなれば、デザインのトリミング作業がだいぶ楽になりそうですね。

なんですけど、私この技術を面白そうと感じたのは他の理由があって、今までARといえば、現実世界にバーチャルのオブジェクトを重ねるイメージが強かったのです。ですが、これはその逆のアプローチで、現実をオブジェクト化してバーチャルに転送しています。まだスキャン精度は荒いのですが、精度が高まればどうでしょう?

いまの感覚で言えば写真を撮りまくってクラウドに上げまくる感じで、自分の身の周りのあらゆるものをスキャンしてオブジェクト化してバーチャルな空間にアップしまくる。写真であればアルバムのように2次元の空間に並べるという形の保存しかできなかったわけですが、これが3Dオブジェクトをスキャンできるようになれば3次元に保存できる。アバターや自分の部屋を豊かにしていく感覚の次元が一つ上がる。そしてその空間をVRで歩いて回る。楽しそうじゃないですか?

つい先頃、iPadPro2020モデルにLiDARが搭載されたことが話題になりました。これによって現実空間をスキャンする精度が上がりました。まだ荒いですが3Dスキャンが出来ます。このLiDARがiPhoneに搭載されればさらに市場も広がり、現実をスキャンしたいユーザのニーズを喚起できるチャンスが増えていきそうです。

今回ご紹介したAR Cut and Pasteは、ARとVRの融合の夢が見れる未来を感じる技術でした。

関連記事

コメントは利用できません。
ページ上部へ戻る