Vuforia Spatial Toolboxを使ってARを体験する

# Vuforia Spatial Toolboxとは
PTC Reality Labが提供するARを使った空間コンピューティングのオープンソースです。
[Introducing Vuforia Spatial Toolbox](https://www.ptc.com/en/thingworx-blog/introducing-vuforia-spatial-toolbox)
>PTC Reality Labによって作成されたVuforia Spatial Toolboxは、開発者が産業用モノのインターネット（IoT）、拡張現実（AR）、空間コンピューティングプロトタイプの開発を加速し、リアルタイム空間の機能を進歩させるオープンソースプロトタイピング環境です。


スマホなどアプリでARコンテンツを重畳表示することも一般的になってきましたが、大半のものはマーカーもしくは平面に表示をする感じだと思います。
実用的にARを使うためには現実世界で意味のある場所にコンテンツを表示することが重要ですが、現在は表示位置も含めてパソコンの開発ツールで設定するため、狙った場所にコンテンツを表示させるのは難しいと思います。
Vuforia EngineのArea Targetのように３Dスキャンした空間データを使って適切な位置を知りながらコンテンツをレイアウトする、またはハードウェア（LiDAR、Kinect）もしくはソフトウェアで空間情報を把握しながらそこにコンテンツを配置するといったことが一般的になるとARコンテンツ作成が容易になると感じます。
**Vuforia Spatial Toolboxはこの様な切り口でのARコンテンツ作成ができる様になるツールだと、思います。**

## どんなことができるのか？
Vuforia Spatial Toolboxがどんなのかを知るのは、AR in Actionの動画（１３：4０くらいから）を見るのが早いと思います。
**[Spatial Context: The AR Killer Application | Valentin Heun | ARIA 2020](https://www.youtube.com/watch?v=V9zfcmBnbpA)**
iPhoneのアプリを使って空間上にARで部品を配置し、各部品やIoTでつながってるハードウェアをつないでプログラムやら操作できる処理を作ってしまおうぜ、という感じです。

### システム構成
ざっくり２つの部品で構成されてます。(5/5時点)
**1. Vuforia Spatial Edge Server**
    - PCにインストールしたNode.jsで動かすサーバ側の機能
    - ハードウェア（IoT機器等）と接続するためのインターフェースを管理する
    - 画像ファイル、Vuforia Object Scannerでスキャンしたデータ、またはArea Target Generatorで作成したエリアターゲットを使って現実と紐付けるための*Object*を作成する
    - 
**2. Vuforia Spatial Toolbox**
    - App StoreからiPhoneにインストールするツール（現在はiPhoneのみサポート。iPadはまだ）
    - ポケットに入っているToolsを選んで空間に配置する
    - Toolsなどの*Node*を繋ぐ
*Object*に関連づけて配置したToolsや*Node*はVuforia Spatial Edge Serverに勝手に保存されてました

機能を使うためには、上記の２つは同一のネットワークにつながっていて、さらにWi-Fiがマルチキャストができる必要があります。

## インストールして動かしてみる
2020/4/6(?)にベータ版が公開されていたので、GW（aka ステイホーム週間）に触ってみました。
- **[vuforia spatial toolboxのウェブサイト](https://spatialtoolbox.vuforia.com/)**
     こちらトップページみたいで、フォーラム、ダウンロード、チュートリアルなど必要な情報が全部あります

####Vuforia Spatial Edge Serverのインストール
私はMacとWindows10の両方に試しでインストールしましたが、手順に特に違いはなく簡単でした。
私がterminalを使ってインストールした流れは以下ですが、手順が更新されるかもしれないので詳しくは**[ここ](https://github.com/ptcrealitylab/vuforia-spatial-edge-server)**のInstallationのセクションをご参照ください。
1. Node.js をインストール(https://nodejs.org/en/)
2. GitHubからvuforia-spatial-edge-serverをとってくる
    `git clone https://github.com/ptcrealitylab/vuforia-spatial-edge-server.git`
3. npm installする
`    cd vuforia-spatial-edge-server
    npm install`
4. addonをnpm installする
    `git submodule update --init --recursive
    cd addons/vuforia-spatial-core-addon
    npm install
    cd ../..`
6. npm startでサービスを動かす
    `node index.js`

ここまで成功していると、ブラウザから*http://localhost:8080/*でサービスにアクセスすると以下が表示されます。
![スクリーンショット 2020-05-02 11.43.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/a2aa0787-e725-51d8-2cae-b72dc630a71e.png)
※複数枚のNICとか、VPNを使っていると、en0以外にも表示されるので、iPhoneのIPを確認した上で同じセグメントのものを選ぶ必要があると思います。


####Vuforia Spatial Toolboxのインストール
基本、App Storeで検索してインストールだけです。
iPhone 6s以降で、iOSが12か13なら大丈夫ですが、いちおう対応情報はこちらの[Platform Compatibility](https://spatialtoolbox.vuforia.com/docs/download)から確認した方が良さそうです。

####イメージターゲットを使って、本の表紙をターゲットにしてToolを配置する
以降では**[チュートリアル](https://spatialtoolbox.vuforia.com/docs/develop/spatial-tools/tutorial)**にならって、Vuforia Spatial Edge ServerでObjectを追加して、Vuforia Spatial Toolboxでいじってみたいと思います。

1. Vuforia Spatial Edge ServerのAdd Objectを押下し、任意の名前"test"をつけてAddする
    ![スクリーンショット 2020-05-06 17.24.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/d0e943f5-b83f-389c-428e-fcd0697ef0e2.png)

2. 下に自分のつけた名前のオブジェクt"test"が作成されるので、Add Targetを押してターゲットとして使いたい写真をドロップ
    ![スクリーンショット 2020-05-06 17.28.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/2088bdfc-f7d8-7458-ba87-7647b141f591.png)

3. 写真をドロップして作成されたイメージターゲット（簡易版）のAdd Toolを押下し、"interface"と名前をタイプしてAddを押下する
   これをやることで、イメージターゲットを補足した際に青色のカーソルがARで表示されます。
   ![スクリーンショット 2020-05-06 17.34.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/65463f05-106a-dae6-7420-3fb4eb288bf6.png)

4. ここでiPhoneにインストールしたVuforia Spatial Toolboxを起動します
    ![IMG_0664.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/205c4478-b857-2f84-e79a-15df009e9137.png)

5. Vuforia Spatial Toolboxの画面にカメラを通した映像が映し出されるので、カメラをイメージターゲットに指定した本の表示をに向けると、バッチリとカーソルが表示されます。
    ![IMG_0663.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/e650c9eb-5cbb-f4ea-da52-561a1b7e6a8b.png)

6. 右側メニューでポケットを選ぶと利用できるToolsが表示されます。
   その隣にスライダーの様なスクロールがあるので、タッチして上下させると左側のToolsリストが上下します。
　　今回の例では①のSphereオブジェクトと②のスライダーを使ってみます。
    ![IMG_0665.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/7bca2720-93de-e423-1ab9-7bd4c7db0d7c.png)

7. 任意のツールをホールドし、置きたい場所で指を離します。
　　Objectに関連づけるにはブルーのカーソルが表示された状態で配置する必要がありました。
    ![IMG_0667.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/766064eb-a1d3-5032-42d9-566adb641d24.png)

8. Toolsが配置できたので、Nodeでつないで連動させます。
    右側メニューでポケットの上にあるNodeアイコンを押すと画面表示が切り替わり、接続可能なNodeが表示されるのでFromの点をHoldして、Toの点までドラッグ、ドロップします。
    ![IMG_0669.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/ea3cb00d-4981-3120-3c21-069c428a2ca0.png)

9. 右側メニューで一番上を選択してNodeを非表示にした状態でスライダーを上下に動かすと、それに連動する形でSphereの色が変化します。
    ![IMG_0670.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/434a1dea-4456-2276-6653-14e5cc40568c.png)

10. この段階でブラウザに表示したVuforia Spatial Edge Serverをリフレッシュすると、手順6以降で追加したToolsが追加されています。
    <img width="925" alt="スクリーンショット 2020-05-06 18.43.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449477/31d4b0b9-41f1-9538-2063-10eb20895ea9.png">

=-=-=-=-=
(追加:2020/5/9)
このように追加したToolsは次回以降はターゲットの認識に伴い、配置した場所に表示されます。
=-=-=-=-=

今回は画像ファイルを直接イメージターゲットにしましたが、本家のVuforia Developer Portalで作成したImageTarge、ObjectTarget、AreaTargetなどもObjectのターゲットに使うことができます。

簡単に（自作）部品を組み合わせてARコンテンツを作ったり、空間に直接ARコンテンツを配置することができるので、面白いと思います。
まだv0.1.1のツールなので動きが安定してないところもありそうですが、Vuforiaブランドの一つなので、これからの発展に期待して注目したいと思います。

##この先は
IoT機器との接続やToolの作成方法についてチュートリアルがあるので、その辺りをもっと読んで試したいと思います。
また、感染症予防対策で在宅勤務している人たちでも試せる様に以下の接続アドオンが提供されていました。
1. Philips hue
2. Lego Boost
3. Arduino
幸い私の家にはLego Boostがあるので、今度はVuforia Spatial Toolboxとの接続についてを書きたいと思います。

ご精読ありがとうございました！