AR Quick Look, meet Object Capture

ハイライト

Object Capture API を使用すると、3D モデリングの経験がなくても、誰でも iPhone で撮影した写真から USDZ モデルを生成し、Reality Composer でインタラクティブな動作を追加して、AR Quick Look を通じてアプリや Web ページに表示できます。

主な内容

これまで3D表示するのは大変でしたか？

アプリや Web サイトで製品の 3D モデルを表示したい場合、これまでは 3D モデラーを見つけて、Maya または Blender を使用して手動でモデリングする方法しかありませんでした。これらのソフトウェアは高価であり、習得に時間がかかるため、小規模なチームがそれらを購入するのは困難です。構築されたモデルは USDZ 形式にエクスポートしてから、アプリまたは Web ページに埋め込む必要があります。プロセス全体には高度な専門的要件があり、サイクルが長く、コストが高くなります。

オブジェクト キャプチャ + AR クイック ルックの新しいパス

この状況を変えたのが、WWDC2021 で発表された Object Capture API です。iPhone または iPad で物理オブジェクトのマルチアングル写真を撮影し、Mac でオブジェクト キャプチャを実行するだけで、高品質の USDZ ファイルが自動的に生成されます。(01:38)

この USDZ ファイルは、AR Quick Look で直接表示できます。AR Quick Look は iOS システムに組み込まれた AR ビューアであり、Safari、メッセージ、ファイルなどのシステム アプリケーションですでにサポートされています。わずか数行のコードで、アプリや Web サイトに同じエクスペリエンスを統合できます。(00:18)

モデルにインタラクティブな動作を追加する必要がある場合は、Reality Composer を使用できます。たとえば、モデルをクリックして、さまざまなスタイルを切り替えたり、音声解説を再生したり、アニメーションをトリガーしたりできます (02:01)

デモンストレーション: 多肉植物の e コマース シナリオ

デモでは、完全な e コマース シナリオが示されています。売り手は手作りの土鍋と多肉植物の鉢を持っており、注文する前に買い手にさまざまな植物の組み合わせの効果をプレビューしてもらいたいと考えています。(02:21)

プロセスは次のとおりです。

1. 土鍋の写真をさまざまな角度から撮影し、オブジェクト キャプチャを使用して USDZ を生成します
2. 3 種類の多肉植物の写真を撮り、それぞれの USDZ を生成します。
3. Reality Composer で土鍋をベースとして使用し、その上に 3 つの植物を積み重ねます
4. インタラクティブな動作を追加します。現在のプラントをクリックして次のプラントに切り替え、ループで表示します。 5.AR クイック ルックで表示するために単一の USDZ ファイルにエクスポートします

購入者は AR Quick Look を開いた後、デスクトップ上に仮想植物を配置し、クリックしてさまざまな品種を切り替え、最も適合する植物を見つけることができます。(02:43)

＃＃詳細

オブジェクト キャプチャのエクスポート設定の選択

オブジェクト キャプチャには、視覚的な品質とファイル サイズの間のトレードオフを提供する 3 つの詳細設定が用意されています。(04:56)

設定	ファイルサイズ	該当するシナリオ
縮小	最小限	Web ページ配信、複数モデルの組み合わせシナリオ
中	中	複雑なオブジェクト、ローカルに保存されたアプリ
高	最大	最高の品質要件

キーポイント:

• どの設定が選択されているかに関係なく、オブジェクト キャプチャでは、メッシュの単純化とテクスチャのダウンサンプリングの程度が異なるだけで、同じ基礎となる再構築アルゴリズムが使用されます。
• 最初に「縮小」と「中」の設定をエクスポートし、視覚効果を比較してから決定することをお勧めします。
• Reduced は、ほとんどのシナリオ、特に Web ページが分散され、複数のモデルが結合されているシナリオに適しています。
• Medium は、複雑なオブジェクト (何百枚もの写真を再構築する必要がある) や、モデルがすでにデバイスにプリインストールされているアプリに適しています。
• 同じシーン内で複数の中設定のモデルを結合しないでください。ファイル サイズが大きくなりすぎます。
• さまざまな iOS ハードウェアで互換性とパフォーマンスを必ずテストしてください

撮影品質に関する提案

オブジェクト キャプチャの出力品質は、入力写真の品質によって異なります。(07:21)

• 写真は鮮明で、モーションブラーを避ける必要があります
• 隣接する写真間に少なくとも 70% の重なりがある
• フレームをオブジェクトで埋める
• 再構成ノイズを軽減するために、中立的な背景に対して撮影します。

AR クイック ルックをアプリに統合する

AR Quick Lookをアプリに統合するには、次のことを実装するだけです。QLPreviewControllerDataSourceプロトコル。(08:02)

import QuickLook
import ARKit

func presentARQuickLook() {
    let previewController = QLPreviewController()
    previewController.dataSource = self
    present(previewController, animated: true)
}

// MARK: QLPreviewControllerDataSource
func previewController(
    _ controller: QLPreviewController,
    previewItemAt index: Int
) -> QLPreviewItem {
    let previewItem = ARQuickLookPreviewItem(fileAt: fileURL)
    return previewItem
}

キーポイント:

• QLPreviewControllerQuick Look フレームワークによって提供される標準のプレビュー コントローラーです
• ARQuickLookPreviewItem特に AR コンテンツの場合、ローカル ファイル URL を受け取ります
• 成し遂げるQLPreviewControllerDataSourceプロトコル。どのコンテンツをプレビューするかをシステムに指示します。
• システムはUSDZファイルを自動的に認識し、ARモードを有効にします。

コンテンツのスケーリングを無効にする:

デフォルトでは、ユーザーは AR モードでピンチ ジェスチャを使用してモデルをズームインまたはズームアウトできます。モデルを常に実際のスケールで表示したい場合は、スケーリングを無効にすることができます。(08:37)

let previewItem = ARQuickLookPreviewItem(fileAt: fileURL)
previewItem.allowsContentScaling = false

キーポイント:

• allowsContentScalingユーザーが AR モードでモデルをズームできるかどうかを制御します
• に設定false、モデルは常に実際のスケールで環境に配置されます。
• 家具、靴などの実物大の商品の展示に適しています。

AR クイック ルックを Web ページに統合する

AR Quick Look を Web ページに統合するにはバンドのみが必要ですrel="ar"プロパティのリンク。(08:54)

<a rel="ar" href="https://example.com/model.usdz">
    <img src="thumbnail.jpg" alt="3D Model">
</a>

キーポイント:

• rel="ar"この属性は AR バッジ アイコンをサムネイルに追加し、ユーザーにクリックして AR 効果を確認するよう促します。
• USDZ ファイルは HTTPS 経由で提供する必要があります
• USDZ ファイルの URL へのリンク

ウェブ上でズームを無効にする:

<a rel="ar" href="https://example.com/model.usdz#allowsContentScaling=0">
    <img src="thumbnail.jpg" alt="3D Model">
</a>

キーポイント:

• URL フラグメント経由#allowsContentScaling=0ズームを無効にする
• Web ページは Apple Pay とカスタム アクション ボタンもサポートしており、AR プレビューで直接購入プロセスを完了できます。

実際の応用シナリオ

電子商取引。AR Quick Look の最も一般的なアプリケーション シナリオ。ユーザーは靴、フォトフレーム、家具などの商品を自分のスペースに置いてプレビューすることができます。GOAT Apps チームは、Object Capture を使用して Fragment Design x Air Jordan 3 の 3D モデルを作成し、ユーザーが購入前に詳細を 360 度表示できるようにしました。(10:23)

博物館。歴史的な遺物は保護カバーの中に保管されていることが多く、あらゆる角度から見るのが困難です。オブジェクト キャプチャでアーティファクトをスキャンした後、閲覧者は自分のデバイスで詳細な仮想レプリカを表示できます。メトロポリタン美術館は、音声解説を加えてこのようにセミ像を展示しています。(11:10)

教育。従来の図やビデオは 2D であり、3D の概念を伝えるのが難しい場合があります。AR を使用すると、実際に 3 次元空間に入り込んで教育を行うことができます。Qlone アプリを使用すると、子供たちはお気に入りのおもちゃや芸術作品をスキャンし、3D モデルを生成し、AR で表示して共有できます。(12:04)

重要ポイント

• やるべきこと: ハンドメイド/インディーズ ブランドの 3D 製品ディスプレイを構築する

• 実行する価値がある理由: オブジェクト キャプチャを使用すると、3D モデリングの経験のない販売者でも製品モデルを作成でき、AR クイック ルックを使用すると、ユーザーは購入前に物理的な効果をプレビューできるため、返品率が削減されます。

• 開始方法: iPhone で製品の写真を撮り、Mac で実行しますPhotogrammetrySessionUSDZ を生成し、サーバーにアップロードし、Web リンクまたはアプリ統合を通じて表示します。

• 内容: インタラクティブな製品コンフィギュレーターを作成する

• 実行する価値がある理由: Reality Composer はクリックによる非表示/表示動作をサポートしており、ユーザーは同じシーン内で異なる色、スタイル、またはアクセサリを切り替えることができます。

• 開始方法: バリアントごとに独立した USDZ を作成し、Reality Composer でシーンに結合し、タップ トリガー + 非表示/表示アクションのインタラクション チェーンを追加します。

• やるべきこと: 博物館や展示会の AR ツアーを作成する

• 実行する価値がある理由: オブジェクト キャプチャは文化遺物の詳細を正確に復元でき、音声解説を使用すると、リモート訪問も没入型になります。

• 開始方法: 展示物をスキャンして USDZ を生成し、Reality Composer を使用して音声動作を追加し、Web 埋め込みまたはアプリ経由で訪問者に提供します。

• 内容: 子供向けの 3D スキャン作成ツールを開発します。

• 実行する価値がある理由: Qlone の例は、子供たちも独立してスキャンと作成を完了できることを証明しています。このようなツールには大きな教育的価値があります

• 開始方法: アプリに統合しますPhotogrammetrySession、写真撮影ガイダンス インターフェイスを提供し、スキャン完了後に自動的に Reality Composer にジャンプしてインタラクションを追加します。

• やるべきこと: AR + Apple Pay を e コマース Web サイトに統合し、ワンクリックで購入できるようにします

• 価値がある理由: AR Quick Look の Web バージョンは、Apple Pay とカスタム アクション ボタンをサポートしています。ユーザーは AR プレビューを視聴した後、直接支払いを行うことができるため、購入までの時間が短縮されます。

• 開始方法: Web ページに埋め込みますrel="ar"リンク。Apple Pay ボタンを設定するか、予約ボタンをカスタマイズするには、Apple のドキュメントを参照してください。

関連セッション

• Object Capture を使用して現実世界のオブジェクトをキャプチャおよびスキャン — Object Capture API を使用して写真から 3D モデルを作成する方法を学びます
• USD を使用して 3D ワークフローを作成する — USD ワークフローとツール チェーンの概要
• RealityKit 2 の詳細 — RealityKit 2 の新機能
• AR Quick Look を使用してオンライン ショッピング — Web ページに AR Quick Look と Apple Pay を統合します