iOS マーカーの基礎

このチュートリアルは、マーカーの作成と画像トラッカーの設定の基礎を紹介します。

このチュートリアルは、マーカーと画像ノードのアセットを使用します。これらのアセットは、こちらからダウンロードできます。

このアセット バンドルには、次のものが含まれます。

  • Kudan Lego Marker – トラッカーによって検出されるマーカー画像です。
  • Kudan Cow – マーカーが検出された場合に表示される画像です。

ファイルをダウンロードしたら、展開してアセットを Xcode プロジェクトに追加します。

画像トラッカブルの設定

画像トラッカブルを作成するには、最初にトラッキングする画像が必要です。マーカーには、iOS でネイティブにサポートされる任意の画像を使用できます。よく使用される形式は、.jpg と .png です。

不適切なマーカー

コンテンツが歪んだり、揺れたり、あるいは全く表示されない場合、一般的な原因は、トラッキングに適していないマーカーが使用されているためです。詳細は、「良いマーカーとは?」ページをご覧ください。

画像トラッカブルを設定するには、最初に ARImageTrackable オブジェクトを作成して、UIImage で初期化します。次に、ARImageTrackerManager を初期化して、トラッカブルを追加します。次のようなコードになります。
ViewController.swiftViewController.m
override func setupContent() {

    // 画像トラッカブルを初期化
    let imageTrackable = ARImageTrackable.init(image: UIImage(named: "Kudan Lego Marker.jpg"), name: "Lego Marker")

    // 画像トラッカー マネージャーの 1 つのインスタンスを取得
    let imageTrackerManager = ARImageTrackerManager.getInstance()
    imageTrackerManager?.initialise()

    // 画像トラッカー マネージャーに画像トラッカブルを追加
    imageTrackerManager?.addTrackable(imageTrackable)
}

- (void)setupContent
{
  // 画像トラッカブルを初期化
  ARImageTrackable *imageTrackable = [[ARImageTrackable alloc] initWithImage:[UIImage imageNamed:@"Kudan Lego Marker.jpg"] name:@"Lego Marker"];

  // 画像トラッカー マネージャーの 1 つのインスタンスを取得
  ARImageTrackerManager *imageTrackerManager = [ARImageTrackerManager getInstance];
  [imageTrackerManager initialise];

  // 画像トラッカー マネージャーに画像トラッカブルを追加
  [imageTrackerManager addTrackable:imageTrackable];
}

ARImageNode をトラッカブルに追加

この時点でアプリを実行すると、マーカーを検出してトラッキングします。しかし、それを確認するには、何らかのフィードバックが必要です。最も簡単な方法は、トラッカブルにノードを追加することです。

ノードにはさまざまなタイプがあり、それぞれが特定のコンテンツ タイプで動作するように設計されています。このチュートリアルでは、2D 画像表示用の ARImageNode を使用します。

バックグラウンド スレッドでコンテンツを追加

AR コンテンツをアプリケーションに追加する場合、バックグラウンド スレッドで追加することを検討すべきです。そうすることで、カメラのフィードがストールするのを防ぐことができます。

ARNode のタイプ

ARNode の異なるタイプについては、API リファレンスまたはノード ページをご覧ください。

ARImageNode を設定して画像トラッカブルに追加するには、次のコードを setupContent メソッドの最後に追加します。

ViewController.swiftViewController.m
// ImageNode を表示させたい画像で初期化
// PNG の場合は拡張子は不要です。
let imageNode = ARImageNode(image: UIImage(named: "Kudan Cow"))

// ARImageTrackable に imageNode を追加
imageTrackable?.world.addChild(imageNode)

// 画像で画像ノードを初期化
// PNG 画像なので、ここではファイル拡張子を含めない
ARImageNode *imageNode = [[ARImageNode alloc] initWithBundledFile:@"Kudan Cow"];
 
// 画像ノードを画像トラッカブルに追加
[imageTrackable.world addChild:imageNode];
アプリを再度ビルドして実行すると、マーカーがトラッカーによって検出され、Lego Marker 上に Kudan Cow が表示されます。正しく表示されていますが、画像がやや小さいです。

 

画像ノードのスケーリング

コンテンツとマーカーのサイズが同じでない場合、ノードをスケーリングしたいと思うことがあるかもしれません。コンテンツとトラッカブルの縦横比が同じである場合、一方の幅をもう一方の幅で割って正しい倍率を得ることができます。そして、この値をノードのスケーリングに使用します。

ここでは、画像をマーカーと同じ幅にスケーリングします。そのためには、次のコードを setupContent メソッドの最後に追加します。

ViewController.swiftViewController.m
// 倍率を特定
let scaleRatio = Float(imageTrackable!.width)/Float(imageNode!.texture.width)
        
// 倍率を ARNode に適用
imageNode?.scale(byUniform: scaleRatio)

// 倍率を特定
float scaleRatio = (float)imageTrackable.width / imageNode.texture.width;

// 倍率を ARNode に適用
[imageNode scaleByUniform:scaleRatio];

画像ノードの 3 つの軸すべてが同じ値でスケーリングされます。各軸を個別にスケーリングすることも可能ですが、そのようなケースはまれです。

アプリを再度実行すると、マーカーに合わせて Kudan Cow のサイズが大きくなったこと (ビット数が増えたこと) が分かります。この手法は、動画や 3D モデルを含む、ほかのコンテンツ タイプにも適用できます。

次のステップ

マーカーレス トラッキング向けの Kudan ArbiTrack 機能の設定の基礎を紹介します。

ArbiTrack の基礎