ARToolKit を使って iPhone で NFT(Natural Feature Tracking) を行う

5年以上ぶりに ARToolKit を使ったのでせっかくなので記事を書きます。

学生の頃に[工学ナビ](http://kougaku-navi.net/ARToolKit/index.html)というサイトで頑張って勉強したのが懐かしい思い出です。

## 概要

AR とそれを取り扱うための ARToolKit の説明と、物体を認識する方式である NFT をざっくり説明します。

AR とは日本語で拡張現実と言われる技術で [wikipedia](https://ja.wikipedia.org/wiki/%E6%8B%A1%E5%BC%B5%E7%8F%BE%E5%AE%9F) では以下のように説明されています。

> 拡張現実（かくちょうげんじつ、英: Augmented Reality、AR）とは、人が知覚する現実環境をコンピュータにより拡張する技術、およびコンピュータにより拡張された現実環境そのものを指す言葉。

[拡張現実](https://www.google.co.jp/search?q=%E6%8B%A1%E5%BC%B5%E7%8F%BE%E5%AE%9F&source=lnms&tbm=isch) などで画像検索するとイメージが掴めると思います。

今回紹介する [ARToolKit](http://artoolkit.org/) はその AR 技術を自分のプログラムに組み込むためのライブラリです。

NFT とは自然特徴点を使って物体を表示する位置を認識する方式のことです。

NFT で無い場合は物体を表示する位置を以下のような四角いマーカーを使って認識します(これは hiro.patt と言われるものです)。

![hiro.patt](https://qiita-image-store.s3.amazonaws.com/0/17704/d03cd558-6f97-279e-2081-b6b13c25f1db.png)

一方 NFT の場合は風景画像やイラストなどの我々の日常にあるものの画像を認識して物体を表示します。

例えば ARToolKit では以下の画像を認識して物体を表示するサンプルが含まれています。

https://github.com/artoolkit/artoolkit5/blob/master/doc/Marker%20images/pinball.jpg

先に述べた四角いマーカーを用いないため NFT のことをマーカーレスと呼ぶ場合があります。

## 今回のゴール

1. ARToolKit の iOS SDK を使って NFT で物体を表示させ AR の技術に触れます
  - これはサンプルを動かすだけです
2. 自分の好きな画像をマーカーとして使用する方法を習得します

## 早速やってみよう

### SDK のダウンロード

まずは SDK をダウンロードします。 下記のリンクから iOS 用のものをダウンロードして下さい。 執筆時点では `	ARToolKit5-bin-5.3.2-iOS.tar.gz` が最新版です。

http://artoolkit.org/download-artoolkit-sdk

※ SDK: Software Development Kit, ソフトウェア開発キット, ソフトウェア(プログラム)の開発に使用するもの。

### サンプルプログラムの実行 & 動作の確認

サンプルプログラムを実行してお手持ちの iPhone でちゃんと動くかを確認します。

※ カメラが必要なため iPhone の実機が必要になります。

先ほどダウンロードした SDK をダブルクリックして解答すると以下の様なフォルダができます。

![image](https://qiita-image-store.s3.amazonaws.com/0/17704/7dc9c5c3-e80f-0ee3-bcf2-bec27b22e2ee.png)

これの `ARToolKit5iOS.xcodeproj` をダブルクリックして Xcode を起動してください。

起動時に以下のようなダイアログが出てきても気にせず `Open` をクリックして起動してください。

![image](https://qiita-image-store.s3.amazonaws.com/0/17704/af0022fd-ea03-6735-c0e7-a7cbbe247713.png)

起動するとこんな画面が出てきます。

NFT のサンプルプロジェクトをお手持ちの iPhone で動かすためにまずは iPhone を Mac に接続します。

次に先ほどの画像の赤矢印の `AR` と表示されている部分をクリックします。

![image](https://qiita-image-store.s3.amazonaws.com/0/17704/6bb019ca-8967-f0c3-99a7-885ff443bec0.png)

そして `ARAppNFT` -> `自分の iPhone の名前` となっている部分を選択します。

<img width="559" src="https://qiita-image-store.s3.amazonaws.com/0/17704/a968dd99-568e-f115-2654-01de48f1d9a5.png">


次に画面左上の実行ボタン(▶)を押して実行します。起動までに少し時間がかかるので待ちます。

起動したらカメラの使用を許可しますか？ と最初の１回だけ聞かれるので許可(OK)します。

<img width="320" alt="IMG_0021.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/17704/101fea39-7d79-9bc6-18ab-d66a68287e51.png">

するとカメラの画像が表示された状態になるので下の画像が映してみます。

<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/17704/ab027b0e-d097-230a-3bc3-e68f48bddb22.jpeg">

すると以下の画像のようにポリスボックスが画像の上に表示されます。 カメラを動かして色々な位置から撮影して見てください。 

![IMG_0025.PNG](https://qiita-image-store.s3.amazonaws.com/0/17704/97700860-95b9-71f8-0164-04b9424c693a.png)

長くなりましたがこれでサンプルプログラムでの動作確認は終了です。

### 画像を解析してマーカーデータを作る

次に自分の好きな画像をマーカーとして使用する方法を説明してその画像上に物体を表示させます。

手順としては画像を作業しやすいディレクトリ(今回は SDK の bin) において、コマンドラインツールを使ってマーカーデータを作成します。

今回は以下のうどんを茹でるお湯が沸くのを待っている時の画像を使って説明をしたいと思います(皆さんは好きな画像を使ってください)。

<img width="320" src="https://qiita-image-store.s3.amazonaws.com/0/17704/a25286a1-4fd7-bf33-143e-cef81e253cfc.jpeg">

※ 使用する画像はなんでも良いですが特徴点が多そうなもの(=色々なものが書いてある画像)にしてください。 シンプル過ぎる画像は特徴点が無いため画像を解析してもマーカーとして使用することができません。

用意した画像を先ほどの SDK の bin ディレクトリの中に入れます。 画像の拡張子が jpg である必要があるので png の場合などは変換が必要です。

![貼り付けた画像_2016_05_15_14_10.png](https://qiita-image-store.s3.amazonaws.com/0/17704/80571f5c-d17c-dd1b-a174-9ec99a75edfc.png)

そして画像を解析してマーカーのデータを作成します。

ここからはコマンドラインでの作業になるので terminal を起動します。 mac の Spotlight (画面右上の虫眼鏡のやつ) に terminal と入力して起動するのが簡単です。

ターミナルを起動したら先程の SDK の bin ディレクトリに移動します。

ターミナルの操作に慣れていない人はとりあえず `cd` と打ち込んでから下の画像のように `bin` ディレクトリをドラッグすると簡単に入力されます。 この状態でエンターキーを押せば `bin` ディレクトリに移動完了です。

<img width="1171" alt="スクリーンショット_2016-05-15_13_54_37.png" src="https://qiita-image-store.s3.amazonaws.com/0/17704/0292718e-5a5d-e658-af4a-d50ec87dd091.png">

`bin` ディレクトリの中にある `genTexData` コマンドを作ってマーカーデータを作成します。

ターミナルに `./genTexData MarkerImage.jpg` と打ち込んでエンターを押してください(MarkerImage.jpg は先ほど保存した画像ファイル名に読み替えてください)。

すると色々入力を求められるので下の画像の赤矢印のところでエンターキーを入力、数字が書いてあるところは数字を入力してエンターキーを押してください。

全て入力が終わると画像の解析が始まります。 これには暫く時間がかかる場合がありますのでのんびりと待ってください。

<img width="652" alt="貼り付けた画像_2016_05_15_14_16.png" src="https://qiita-image-store.s3.amazonaws.com/0/17704/8d57b07a-3906-69ca-8866-4056d16b672b.png">

解析が終わると以下の3つのファイル(fset, fset3, iset)が作られます(ファイル名は画像ファイルによります)。

```
MarkerImage.fset
MarkerImage.fset3
MarkerImage.iset
```

これでマーカーデータの作成は完了です。

どのように特徴点が生成されたのかは `dispFeatureSet` コマンドで確認ができます。

例えば今回のマーカーデータを確認したい場合は `/dispFeatureSet MarkerImage` と実行すると以下の様な画面が開いて確認できます(閉じるときはターミナルで control と c を同時押し)。

![image](https://qiita-image-store.s3.amazonaws.com/0/17704/12377f99-1c12-3d5b-9842-77791282b69e.png)

### マーカーデータを組み込んで動作確認

作成したマーカーデータを先ほどのサンプルプログラムに組み込んで画像の上に物体を表示させます。

まずは Xcode にマーカーデータをコピーします。

Xcode の左側のツリーから `example -> ARAppNFT -> DataNFT` を展開してきます。 似たような名前のものが沢山有るので気をつけてください。

展開したら先ほどの3つのファイル(fset, fset3, iset)をドラッグしてコピーします。

<img width="1060" alt="貼り付けた画像_2016_05_15_14_28.png" src="https://qiita-image-store.s3.amazonaws.com/0/17704/abacd869-a678-9cc8-19a3-74bd3ec43371.png">

こんな感じになっていれば大丈夫です。

![image](https://qiita-image-store.s3.amazonaws.com/0/17704/6bbe9829-9b84-4bdc-f4ee-1c55f9460c0c.png)

最後にマーカーの設定ファイルを編集します。

`Data2` の中にある `markers.dat` をクリックして開きます。

`../DataNFT/pinball` と書いてある行を編集します。

今回の例では `../DataNFT/MarkerImage` と編集して保存すればよいです。

<img width="1072" alt="貼り付けた画像_2016_05_15_14_32.png" src="https://qiita-image-store.s3.amazonaws.com/0/17704/cb9fe1ee-8b6b-ff8e-7efa-0eb090868566.png">

こんな感じです。

![image](https://qiita-image-store.s3.amazonaws.com/0/17704/289b8d16-09bd-d318-4306-1f56c901f5d8.png)

ようやく最後のステップです。 実行ボタン(▶)を押して実行します。

先ほど用意した画像を映すと物体が表示されると思います。

![IMG_0026.PNG](https://qiita-image-store.s3.amazonaws.com/0/17704/1bc86e21-f3b1-526d-03ca-bfccb0d9e732.png)

これで今回の作業は全て終了です。 最後までありがとうございます。

## まとめ

今回は ARToolKit の NFT の機能を使って自分の好きな画像をマーカーとして使用することができました。

`./genTexData` の使い方さえ分かってしまえば簡単です。

より詳しい情報は [こちらの公式情報](http://artoolkit.org/documentation/doku.php?id=3_Marker_Training:marker_nft_training) を参照してください。

今後の課題としては ARToolKit は複数のマーカーを同時に登録することができるのでそれを行う方法を紹介したいと思います。

物体の表示の代わりにマーカー上に動画を再生させることも可能なのでその方法についても紹介したいと思います(すぐに試したい人はサンプルの中の ARAppMovie を実行してみてください)。

オブジェクトも Blender などのフリーソフトを使用することで作成することができますので知識のある方は試してみてください(僕は勉強中です)。

それでは最後までありがとうございました。