イメージ・ターゲット

看板、雑誌、箱、ボトル、カップ、缶などを8th Wall イメージ・ターゲットで生命を吹き込みます。 8th Wall Webは、平面、円筒形、円錐形のイメージ・ターゲットを検出・追跡することができ、静的なコンテンツに命を吹き込むことができます。

指定したイメージ・ターゲットがWeb AR体験を引き起こすだけでなく、コンテンツもそこに直接トラッキングできるようになっています。

イメージ・ターゲットは、当社のワールドトラッキング (SLAM) と連携することができ、イメージターゲットとマーカーレストラッキングを組み合わせた体験を可能にします。

ワールド・トラッキングが有効な場合は最大5つのイメージ・ターゲットを同時にトラッキングでき、無効な場合は最大10つのイメージ・ターゲットをトラッキングできます。

1プロジェクトにつき最大5つのイメージ・ターゲットを**"オートロード"**可能。 オートロードされたイメージ・ターゲットは、ページがロードされるとすぐに有効になります。 商品パッケージや映画ポスター、名刺など、使用するイメージ・ターゲットが5枚以下のアプリに有効です。

アクティブなイメージ・ターゲットのセットは、 XR8.XrController.configure()を呼び出すことでいつでも変更することが可能です。 これにより、プロジェクトごとに数百のイメージ・ターゲットを管理することができ、ジオフェンスによるイメージ・ターゲットハント、ARブック、ガイド付き美術館ツアーなどの使用例が可能になります。 プロジェクトでSLAMを使うことが多く、イメージ・ターゲットを使うことが多い場合、必要なときだけイメージ・ターゲットをロードすることでパフォーマンスを向上させることができます。 また、異なるQRコードに格納されたURLパラメータから、アップロードされたターゲット名を読み取ることもできます。これによりユーザーがどのQRコードをスキャンして体験に入るかによって、同じWebアプリでも異なるターゲットを初期ロードすることができます。

イメージ・ターゲットの種類

平面
曲面
円錐形

イメージ・ターゲットの条件

• ファイル形式： .jpg、 .jpeg or .png
• 寸法：
  • 最小： 480×640ピクセル
  • 最大縦または横： 2048ピクセル.
    • 注意：これより大きな画像をアップロードした場合、縦横比を維持したまま最大2048サイズにリサイズされます。)

イメージ・ターゲット量

プロジェクトに関連付けられるイメージ・ターゲットの数に制限はありませんが、任意の時間にアクティブにできるイメージ・ターゲットの数には制限があります。

ワールド・トラッキング (SLAM) が有効な状態で、最大5つのイメージターゲットを同時にアクティブにすることができます。 ワールド・トラッキング (SLAM) が無効の場合 ("disableWorldTracking: true "設定) 、最大10個のイメージ・ターゲットを同時にアクティブにすることができます。

• プロジェクトごとにアクティブな画像 (ワールド・トラッキングが有効) ： 5
• プロジェクトごとにアクティブな画像 (ワールド・トラッキングが無効) ： 10

イメージ・ターゲットの管理

左ナビゲーションの「イメージ・ターゲット」アイコンか、プロジェクト ダッシュボードの「イメージ・ターゲットの管理」リンクをクリックします。

この画面では、プロジェクトに関連するイメージ・ターゲットの作成、編集、削除を行うことができます。 編集する場合は既存のイメージ・ターゲットをクリックします。 新規に作成する場合は、希望するイメージ・ターゲットタイプの「＋」アイコンをクリックします。

平面イメージ・ターゲットの作成

1. "+平面"アイコンをクリックし、平面イメージ・ターゲットを新規作成します。

2. 平面イメージ・ターゲットのアップロード対象: アップロードパネルに画像 (.jpg, .jpeg, .png) をドラッグするか、点線部分をクリックしてファイルブラウザで画像を選択してください。

3. トラッキング領域 (および方向) の設定：スライダーを使用して、WebAR体験内でターゲットを検出し追跡するために使用される画像の領域を設定します。 画像の残りの部分は破棄され、指定された領域がAR体験で追跡されます。

4. 平面イメージ・ターゲットのプロパティ編集：

• (1) ウィンドウ左上のフィールドを編集して、イメージ・ターゲットに名前を付けます。
• (2) **重要！**イメージ・ターゲットをテストしてください：アップロードした画像が良いイメージ・ターゲットになるか悪いイメージ・ターゲットになるかを判断する最善の方法は、シミュレーターを使ってトラッキングの品質を確認することです ( イメージ・ターゲット・トラッキングの最適化を参照ください) 。 カメラアプリでQRコードをスキャンしてシミュレーターのリンクを開き、端末をスクリーンまたは物理的なオブジェクトに向けます。
• (3) WebARプロジェクトのロード時にイメージ・ターゲットを自動的に有効にしたい場合は、 自動読み込み をクリックします。 1行もコードを書くことなく、最大5つのイメージ・ターゲットを自動的に読み込むことができます。 さらに多くのターゲットをJavaScript APIを通じてプログラム的に読み込むことができます。
• (4) オプション：画像にテキストまたはJSON形式のメタデータを追加したい場合は、ウィンドウ下部の「 メタデータ 」ボタンをクリックします。

5. この画面で変更した内容は、自動的に保存されます。 閉じる をクリックすると、イメージ・ターゲット・ライブラリに戻ります。

曲面イメージ・ターゲットの作成

1. "+曲面 "アイコンをクリックし、新しい画像ターゲットを作成します。

2. 画像のアップロード対象: アップロードパネルに画像 (.jpg, .jpeg, .png) をドラッグするか、点線部分をクリックしてファイルブラウザで画像を選択してください。

3. トラッキング領域 (および方向) を設定：スライダーを使用して、WebAR体験内でターゲットを検出し追跡するために使用される画像の領域を設定します。 画像の残りの部分は破棄され、指定された領域がAR体験で追跡されます。

4. 曲面イメージ・ターゲットのプロパティ変更：

• (1) ウィンドウ左上のフィールドを編集して、イメージターゲットに 名前を付けます。
• (2) ラベルの形状がシミュレータで期待通りに表示されるまでスライダーをドラッグするか、 値を直接入力します。
• (3) 重要！ イメージ・ターゲットをテストしてください：アップロードした画像が良いイメージ・ターゲットになるか悪いイメージ・ターゲットになるかを判断する最善の方法は、シミュレーターを使ってトラッキングの品質を確認することです (イメージ・ターゲット・トラッキングの最適化を参照ください) カメラアプリでQRコードをスキャンしてシミュレーターのリンクを開き、端末をスクリーンや物理的なオブジェクトに向けます。
• (4) WebARプロジェクトのロード時にイメージターゲットを自動的に有効にしたい場合は、自動読み込みをクリックします。 1行もコードを書くことなく、最大5つのイメージターゲットを自動的に読み込むことができます。 さらに多くのターゲットをJavaScript APIを通じてプログラム的にロードすることができます。
• (5) オプション：画像にテキストまたはJSON形式のメタデータを追加したい場合は、ウィンドウ下部の「 メタデータ 」ボタンをクリックします。

5. この画面で変更した内容は、自動的に保存されます。 閉じるをクリックすると、イメージ・ターゲット・ライブラリに戻ります。

円錐形のイメージ・ターゲットを作成

1. "+円錐形"アイコンをクリックして、新しいイメージ・ターゲットを作成します。

2. 円錐画像アップロード対象: アップロードパネルに画像 (.jpg, .jpeg, .png) をドラッグするか、点線部分をクリックし、ファイルブラウザで画像を選択します。 アップロードする画像は、「アンラップド」別名「レインボー」フォーマットでこのようにトリミングしてください：

3. Large Arc Alignmentの設定: 赤いラインがアップロードされた画像の大きな円弧に重なるまでスライダーをドラッグします。

4. Set Small Arc Alignment：小円弧の場合も同様に行います。 青のラインがアップロードされた画像の 小さな弧に重なるまでスライダーをドラッグしてください。

5. トラッキング領域 (および方向) を設定します：画像上でドラッグ＆ズームして、検出・追跡する部分を設定します。 これは、画像の中で最も特徴が豊富な領域である必要があります。

6. 円錐状イメージ・ターゲットのプロパティを編集する：

• (1) ウィンドウ左上のフィールドを編集して、イメージ・ターゲットに 名前を付けます。
• (2) ラベルの形状がシミュレータで期待通りに表示されるまでスライダーをドラッグするか、 値を直接入力します。
• (3) 重要！ イメージ・ターゲットをテストしてください：アップロードした画像が良いイメージ・ターゲットになるか悪いイメージ・ターゲットになるかを判断する最善の方法は、シミュレーターを使ってトラッキングの品質を確認することです (イメージ・ターゲット・トラッキングの最適化を参照ください) 。 カメラアプリでQRコードをスキャンしてシミュレーターのリンクを開き、端末をスクリーンや物理的なオブジェクトに向けます。
• (4) WebARプロジェクトのロード時にイメージ・ターゲットを自動的に有効にしたい場合は、 自動読み込みをクリックします。 1行もコードを書くことなく、最大5つのイメージ・ターゲットを自動的に読み込むことができます。 さらに多くのターゲットをJavaScript APIを通じてプログラム的にロードすることができます。
• (5) オプション：画像にテキストまたはJSON形式のメタデータを追加したい場合は、ウィンドウ下部の「 メタデータ 」ボタンをクリックします。

7. この画面で変更した内容は、自動的に保存されます。 閉じるをクリックすると、イメージ・ターゲット・ライブラリに戻ります。

イメージ・ターゲットを編集する

マイ・イメージ・ターゲットにあるイメージ・ターゲットをクリックすると、そのプロパティを表示したり変更したりすることができます：

1. イメージ・ターゲット名
2. スライダー／測定（円筒／円錐イメージターゲットのみ）
3. シミュレーターQRコード
4. イメージ・ターゲットを削除する
5. 自動読み込み
6. メタデータ
7. オリエンテーションとディメンション
8. オートセーブの状態
9. 閉じる

タイプ	フィールド
フラット
円筒形
円錐形

アクティブのイメージ・ターゲットの変更

アクティブなイメージ・ターゲットのセットは、実行時に XR8.XrController.configure()を呼び出して変更することができます。

注意：現在アクティブなイメージ・ターゲットセットは、新しいセットのpasswdで XR8.XrController.configure()に置き換えられます。

例）アクティブのイメージ・ターゲットセットを変更する

XR8.XrController.configure({imageTargets: ['image-target1', 'image-target2', 'image-target3']})

イメージ・ターゲット・トラッキングの最適化

イメージ・ターゲットを選択する際には、以下のガイドラインにしたがって、最高品質のイメージ・ターゲット・トラッキングを体験してください。

良い例：

• 特徴量が多い
• はっきりしたコントラスト

悪い例：

• 同じパターンの繰り返し
• デットスペースがある
• 低解像度画像

色：イメージ・ターゲット検出は色の区別ができないので、ターゲット間の重要な差別化要因としては使用しないでください。

イメージ・ターゲット・トラッキングでは、平坦な面、円筒形、円錐形の面上の画像を使用すると効果的です。

イメージ・ターゲットの物理的な素材の反射率を考慮してください。 光沢のある表面や画面の反射は、トラッキング品質を低下させます。 トラッキング品質を最適化するために、拡散した照明条件下でマット素材を使用します。

注意：画面中央では最も速く検出されます。

良いマーカー	悪いマーカー

イメージ・ターゲット イベント

8th Wall Webは、イメージ・ターゲットのライフサイクルにおける様々なイベント (例：imageloading, imagescaning, imagefound, imageupdated, imagelost) に対してEvent / Observableを発行します。これらのイベントをWebアプリケーションで扱うための手順は、APIリファレンスをご覧下さい：

• AFrameイベント
• BabylonJS Observables
• PlayCanvasのイベント
• XrControllerのディスパッチイベント

プロジェクト例

https://github.com/8thwall/web/tree/master/examples/aframe/artgallery

https://github.com/8thwall/web/tree/master/examples/aframe/flyer