ストリーミングはほとんどのブラウザと
Developerアプリで視聴できます。
-
ARKit 5の詳細
ARKit 5で次世代のAR Appを構築しましょう。ロケーションアンカーをさらなる地域で使用したり、ロケーションベースのAR体験に人々をより簡単に参加させる方法を紹介します。フェイストラッキングとモーションキャプチャについても詳しく説明します。また、ARコンテンツを現実世界に配置するためのベストプラクティスを紹介します。また、App Clip CodeをAR Appに組み込むことで、バーチャルコンテンツを簡単に見つけ、正確に配置する方法も紹介します。
リソース
- ARKit
- Explore the ARKit Developer Forums
- Human Interface Guidelines: App Clip Codes
- Interacting with App Clip Codes in AR
- Tracking Geographic Locations in AR
関連ビデオ
WWDC22
WWDC21
WWDC20
WWDC19
-
ダウンロード
こんにちは ARKitチームの エンジニア デビッドです クリストファーと一緒に 幅広いARKit5の― 改善点を共有します iOS15に導入される変更に ついてもお話しします 今年は全面的に アップグレードされた 数多くの機能について 説明します その前にLiDARで みなさまが構築してきた 体験を紹介したいと 思います LiDAR対応Appは シーン再構築や Depth APIによって 生産性向上や 写真フィルター効果に エンターテイメントなど リビングで遊べるゲームまで 波及しています ARKitコミュニティは 創造性と機知に 富んでいて本当に うれしいです みなさんがAppを作成している間 世界最高の― ARフレームワークを提供すべく 懸命に取り組み 限界に挑戦しています ARKit5で適用される変更点に ついて見ていきましょう まず現実世界における AR体験を可能にする ロケーションアンカーの更新点と ベストプラクティスを いくつかご紹介します 次にApp Clipコードに ついて説明します App Clipを見つけるのに 最適な方法で コンテンツをAR化する こともできます フェイストラッキングの いくつかの改善点として 新しいiPad Proで 超広角フロントカメラを 使ったものを紹介し またARKitのモーション キャプチャ機能についても お話しします まず 地域のサポートの拡大 およびその質の向上のために 取り組んできた ロケーションアンカー から始めます また App作成のための ベストプラクティスも ご紹介します ロケーションアンカーは特定の 緯度と経度にARコンテンツを 配置できるよう 昨年導入されました 目的は地理的な場所に 関連付けられた― AR体験の作成を 可能にすることです 例を見てみましょう これはロケーションアンカー APIを使用して構築された ScavengAR Appの 新しい自然体験です ScavengARは現実世界の場所に 応じたARコンテンツをホストし バーチャルパブリックアートの 配置と関連するアクティビティ の提供をしています これは世界が再開する ときにロケーションアンカーが 屋外体験をどのように 強化できるかを示す例です マップAppはiOS15で このAPIを使用する 新しいAR機能も 導入します 見てみましょう 今年マップではターンバイ ターンの徒歩ルートを ロケーションアンカーAPIに よりARで表示できるようになります いくつかの推奨するプラクティスを 組み込んでいて 素晴らしいAppの 構築のための それらの詳細については後ほど 説明します いくつかのサンプルを見たので ロケーションアンカーを 作成する方法を GeoTrackingConfigurationの 設定ステップから確認していきます まず機能がデバイスで サポートされていることを確認 ロケーションアンカーには A12チップ以降と― セルラーとGPSサポートが 必須です 次に起動する前に その場所で機能が 利用可能であることを 確認します カメラと位置情報の権限が デバイスの所有者によって 承認される必要があります ARKitから必要に応じて 権限の承認を求めます ARKit4とサンプルプロジェクト “ARで位置の追跡”を― 紹介する昨年の プレゼンテーションで すべてのトピックとAPIの 使用法について説明しています どちらも目を通して おくことを お勧めします このコードサンプルは 前のスライドの― チェック方法を示しています デバイスのサポートを照会し その機能が現在位置で GeoTrackingConfigurationを 実行する前に 利用可能かどうかを 確認します その後GeoAnchorsは 他のアンカーと同様に― ARSessionに追加可能になります 緯度と経度の座標および オプションで高度が指定できます GeoTrackingConfiguration のステータスを監視して 機能がローカライズされて いるかどうかを確認し 未解決の不具合を 見極めます 開発者用サンプルには ステータスの更新を― 受信するメソッドを実装する 方法の例が含まれます ジオトラッキングを使用して Appを起動するには デバイス位置の近くでの 可用性の確認が重要です より多くの地域をサポートする ために常に取り組んでいます ロケーションアンカーは 最初のリリースでは５つの 大都市圏に制限されて いましたが それ以降 サポートは全米の25を超える 都市に拡大しています また世界中の都市にロケーション アンカーを導入するために 懸命に取り組んでいます 米国外初の場所を 発表できることを 嬉しく思います ロケーションアンカーが ロンドンに対応します 今後も新しいリージョンの 追加に取り組んでいきます サポートされている大都市圏に 住んでいない場合でも ロケーションアンカーの実験を 開始できます 録画とリプレイの使用によって 可能となり セッション後半で 詳細を説明します サポートされているリージョンの リストについては ARGeoTrackingConfigurationの オンラインドキュメントを 参照してください ロケーションアンカーがより 多くの地域で利用可能に なるにつれて共通の視覚的 言語を持つ必要性に 気付かされました 一貫したオンボーディングを支援する ためにARCoachingOverlayViewに 新しい.geoTracking ゴールを追加しました ワールドトラッキング用の 既存のオーバーレイと同様に アニメーション表示で 優れた体験を実現します コーチングオーバーレイは マップを含む多くの異なる AR Appで使用されているため 人々はすでに ある程度精通しており その対応方法が知られています この機能の学習曲線を 簡単なものにするためにも コーチングオーバーレイを 含めることをお勧めします コーチングオーバーレイを 使用している場合でも トラッキングステートに関する 詳細な情報が含まれるため .geoTrackingステータスを 監視することをお勧めします .geoTrackingコーチング オーバーレイの表示がこちらです UIにはデバイスを地面から 離してから建物の正面に― 向ける指示が表示されます 数秒後にトラッキングは成功し Appでジオトラックされた コンテンツを配置できます アニメーションを表示するための コードは他のオーバーレイに 使用されるコードと 非常によく似ています 特有な点はオーバーレイに .geoTrackingゴールが 導入されたことです 正しいガイドを表示するには 必ずこのゴールを設定してください コーチングオーバーレイが どのように統一的な プロセスを作成できるかを 確認しました 次にベストプラクティスに ついて説明します ジオトラックAR体験を 作成するのに役立ちます 最初の推奨事項は開発を 迅速化するために― 録画とリプレイを利用 することです ARKitセッションは App Storeから入手できる Reality Composerにより デバイスに記録できます ロケーションアンカーに 特に有効です テストのために頻繁に外に 出る必要はありません 離れた場所にいる クリエイターとのコラボも可能 録画はXcodeを使用して デバイスでリプレイできます 非互換性の問題を回避 するために 同じデバイスとiOSバージョンを 使用することをお勧めします 他のタイプのARKit App でも同様です リプレイはロケーション アンカーだけのものではありません 録画をする プロセスを見ていきましょう 録画するには Reality Composerを 開いて右上のその他の オプションをタップ 次にペインを開き を選択 位置情報サービスが有効に なっていることを確認してください 赤いボタンをタップして 録画を開始および停止します 再生するにはデバイスを Xcode実行中の Macに接続します をクリックして 実行設定の を設定 次にAppを実行します 録画とリプレイは開発の スピードアップに役立ちますが コンテンツの配置には他にも 推奨される方法があります それを示す動画が こちらです ARコンテンツが大きく はっきりと見えること 環境内の構造物に オーバーレイする必要なく 情報が伝達されていることに 注目してください 開発時間の トレードオフとして 配置の精度については 実世界のオブジェクトの近くで オーバーラップさせるよりも 空中のコンテンツの作成を 検討してください コンテンツを配置するための 推奨事項が 他にもあります オブジェクトを配置する ための緯度と経度の座標を 取得するには AppleマップAppを使用して ６桁の精度で座標を コピーします この手順はARKit4の紹介 ビデオで紹介しています 詳細についてはそちらを ご覧ください Appを作成するときは ロケーションアンカーに対する コンテンツの相対的な高度を 必要に応じて調整することも 重要です より正確なコンテンツの 配置が必要な場合は デバイスがそこから 50ｍ以内のところに ジオアンカーを追加します ARKitがアンカーを正確な 高度で配置すると アンカーの高度ソース フィールドが 更新されます CLLocationクラスには ２点間の距離をメートル単位で 計算するために利用 できるメソッドがあります これはアンカーを追加する 前に誰かが近くにいることを 確認するために 使用できます これでロケーションアンカーに 関するセッションは終了です ARKit 5を使用して AppにARコンテンツを 配置する方法は 他にもあります クリストファーから それについて 説明してもらいましょう ありがとうデビッド クリストファーです ARKitチームの エンジニアです ARKit 5の優れた新機能に ついて お話しできることを うれしく思います ARKitのApp Clipコード から始めましょう 昨年ＷＷＤＣで見た という方もいるでしょう App ClipはAppの特定の コンテキストに応じたワークフローを ユーザーに提供することのできる Appの小さな一部分です App全体をインストール する必要はありません ファイルサイズが小さいため App Clipは ダウンロード時間を節約し すぐにコンテキストに応じたAppの 関連性の高い部分に ユーザーを 誘導できます またユーザーが視覚的に App Clipを発見し 起動できるようにする ために優れた方法である App Clipコードも導入しました App Storeに行く必要は ありません App Clipコードの 見た目はこうなっています さまざまな形や色で設定 できます 開発者はシナリオに 最適な外観を 作成できます またApp Clipコードで エンコードするデータと どのApp Clipをどのコードに 関連付けるかを決定します すべてのApp Clipコードには 視覚的にスキャン可能な 赤青オレンジなどのコードに加え ユーザーの利便性向上のための NFCタグも含まれます ユーザーはカメラでコードを スキャンするか NFCタグにiPhoneを 近づけてスキャンし 関連付けられた App Clipを起動します AR体験の中で App Clipコードを トラッキングもできます このセッションの後半で その方法を確認します まずPrimerが開発した App Clipを見てみましょう App Clipコードを使用して AR体験を開始します PrimerはClayTileと 提携して App Clipコードを使用して ARでサンプルが どのように表示されるかを 確認できるようにしました iPhoneとiPadを App Clipコードの上に置くだけで AR体験を 呼び出すことができます これでAppをダウンロード しなくても壁のタイル見本を プレビューできます なかなかでしょう？ iOSとiPad 14.3以降 AR体験において App Clipを検出し またトラッキングできます App Clipコードのトラッキングには iPhoneXSなどの A12 Bionicプロセッサ以降を 搭載したデバイスが必要です ARKitでApp Clipコードを 使用する方法を詳しく見てみます iOS 14.3では新しいタイプの ARアンカーである ARAppClipCodeAnchorが 導入されました このアンカーには３つの新しい プロパティがあります 埋込みURLと URLデコードステート メートル単位の App Clipコードの半径です 説明しましょう 各App Clipコードには 正しいコンテンツを 表示するためにデコード されるURLが含まれます URLのデコードは瞬時では ありません ARKitはApp Clipコードを すばやく検出できますが ただしユーザーの距離や 照明などの影響によって ARKitがURLを デコードするのに 少し時間がかかる場合が あります これが App Clipコードアンカーに .decodingステート プロパティが含まれる理由で ステートは３つあります 初期ステートの.decodingは ARKitがまだURLを デコード中であることを 示します ARKitがURLのデコードに 成功するとすぐにステートは .decodedに切り替わります URLをデコードできない場合 ステートは .failedに切り替わります これはApp Clipに関連 付けられていない App Clipコードをスキャンした場合 などで発生する可能性があります App Clipコードのトラッキングを 使用するにはまず デバイスでサポートされて いるかどうかを確認します App Clipコードのトラッキングは A12 Bionicプロセッサ以降を 搭載したデバイスでのみ サポートされています 次にappClipCodeTrackingEnabled プロパティを trueに設定して セッションを実行します App ClipコードのURLを 読み取るには ARセッションのdidUpdate アンカーコールバックを監視します 検出されたApp Clipコードアンカーの デコードステートを確認します ARKitがApp Clipコードを デコードしている間 コードが検出されたものの デコードが未処理の場合 App Clipコードの上に 視覚化された プレースホルダを 表示したい場合も あると思います 前述のように App Clipコードのデコードも 失敗する可能性があります たとえば誰かが App Clipに属さない コードで読み出したときなど その場合もフィードバックを 与えることをお勧めします App Clipコードが デコードされると App Clipコードに 関連づけられたコンテンツの 表示を開始できます たとえば前に見たPrimerの App Clipの場合 表示するタイル見本に 関する 情報がURLに 含まれています App Clipコードが デコードされたら 関連コンテンツをどこに 表示するかが問題です App Clipコードアンカーの 上に直接表示するのも 一つのオプションになります ただしユースケースによっては App Clipコード自体の場所が コンテンツを表示するのに 適さない場合もあります そこで相対位置で App Clipコードの近くに コンテンツを配置するという 方法があります これはApp Clipコードが コーヒーメーカーなどの オブジェクトにプリントされて いる場合に適しています マシンのボタンの上に 操作方法に関する 仮想の指示を表示 したいとします あるいはApp Clipコードの トラッキングを ARKitでサポートされている他の トラッキングと組み合わることもできます たとえば画像のトラッキング 実装例を見てみる ことにします 次に表示されるビデオと コードは サイトからダウンロードできる サンプルコード “ARでのApp Clipコードの操作” に基づいています 現在表示されているのは サンプルのAR体験の録画です まずカメラAppから ヒマワリの種の袋を スキャンします ガーデニング店で 買おうとしている植物の種を― 決めようとしているといった 状況でしょう iOSはパッケージ上の App Clipコードを認識し 関連づけられたシードショップ App Clipを起動します App Clipコードを もう一度スキャンすると 成長したヒマワリがシード パッケージに表示されます App Clipはシードパッケージの 画像トラッキングを使用し ひまわりをその上に配置 することに着目してください このユースケースで人が注目 するのはパッケージ全体で 右上のApp Clipコード ではないため このアプローチは理に 叶っていると言えます もし誰かが自分の庭で植物が 成長するのを見たいと 思ったらどうでしょうか？ こんな風になるのかもしれません コードが初めて スキャンされると App Clipのダウンロードが 呼び出されます 次に同じコードがApp Clip内から 再度スキャンされると コードがひまわりの種の箱に 関連付けられ 芝生を軽くたたくと そこにひまわりが現れます App Clipがバラの種の箱の コードを検出したら 芝生にバラの植物が 生えることになります App Clip自体が提供する ワークフローは１つだけですが App Clipは他の植物を確認できる 完全なシードショップAppを ダウンロードするための ボタンを提供して ユーザーがプレビュー できるようすることが可能です App Clipコードの トラッキングは ペアレントAppでも機能します 芝生にひまわりを表示 するために― 必要なコードを見て みましょう まずtapGestureRecognizerを ビューに追加し 画面上のタップを 検出します 人が画面をタップすると デバイスの前の― 水平面上の場所を 取得するために そこにレイキャストするよう 設定できます ここではその場所は芝生です 次にデコードされた最後の App ClipコードのURLを取得し 芝生に新しいARアンカーを 追加します 最後にひまわりの３Ｄモデルを ダウンロードして 芝生に表示します それではARKitの App Clipコードの ベストプラクティスについて 説明します App Clipは さまざまな環境で さまざまなユースケースに 適用できます NFCのApp Clipコードを 作成するオプションが 必要かどうかを考えてください コードに物理的にアクセス できる環境には NFCのApp Clipコードを お勧めします NFCのApp Clipコードを 使用する場合は ユーザーをガイドする テキストを使用して タグをタップするかコードを スキャンするための 明示的なアフォーダンスを 提供します なおApp Clipコードが 適したサイズに 印刷されていることを 確認しておく 必要もあります たとえばレストランのメニューが Ａ４用紙に印刷されていれば そのメニューで2.5センチの App Clipコードを 最大50センチの距離から スキャンします 映画のポスターは はるかに大きいので 十分なスペースとして 12センチの App Clipコードを 最大2.5メートル離れた ところからスキャンします App Clipコードに関する 推奨コードサイズなどの詳細は Human Interfaceガイドラインを 確認してください このようにARKitで App Clipコードを使用できます App ClipとApp Clipコードに 関する詳細情報は “App Clipの新機能”と “軽量で高速なApp Clip の製作”をどうぞ フェイストラッキングに移ります フェイストラッキング機能で 顔を検出できます フロントカメラで仮想 コンテンツをオーバーレイしたり リアルタイムで顔の表情を アニメートしたりできます iPhone Xの発売以来 ARKitで フェイストラッキングを利用する 素晴らしいAppを見てきました 複数のフェイストラッキングから フロントカメラとバックカメラの 同時使用の場合における フェイストラッキングまで このAPIは何年にもわたって 多くの進歩を遂げてきました 昨年TrueDepth センサー非搭載でも A12 Bionicプロセッサ以降が 搭載されている デバイスであれば フェイストラッキング可能となり 今年の初頭に ARフェイストラッキングのために iPad Proに 超広角フロント カメラを 搭載しました ご紹介します これが従来の フロントカメラの画角です これが新しい超広角の 新しいiPad Proです かなり違いますよね？ 既存のAppでフェイストラッキングに 使われるのは 通常のカメラです UXをiPad Proの 超広角向けに アップグレード したい場合 どのビデオフォーマットが 利用可能であるかを チェックします これはサポートされている すべてのビデオ形式を bultInUltraWideCameraオプションを 繰り返し処理して確認します 次にAR構成でこの形式を 設定し セッションを実行します 注意すべきことの１つは 新しいiPad Proの 超広角カメラが TrueDepthセンサーより はるかに広角なことです capturedDepthData バッファが 超広角ビデオフォーマットの ARでは使用できません 最後にモーション キャプチャについて 2019年の発表以来 モーションキャプチャにより シミュレーションで 使用したり― 仮想キャラのアニメ化 など ARシーンへの人物の 統合が可能になりました iOS 15ではモーション キャプチャを改善します iPhone 12などのA14 Bionic プロセッサを搭載した― デバイスの場合 モーションキャプチャは 更なる体のポーズをサポートします しかもコードの変更は 不要です iOS 15のモーションキャプチャ Appは全てこの利点が得られます 最も注目すべきは 回転が正確になり スポーツアクションを 正確にトラッキングできること またデバイスのカメラが 遠くの被写体を トラッキングできるように なったことです 手足の動きの範囲の トラッキングが大幅に 増加しています 例を見てみましょう Driven2win Appを使って 同僚のアイラーの ワークアウトを トラッキングしています iOS 15での結果は これまでになく正確です ARKit5は多くの 新機能と改善を もたらします ロケーションアンカーが 新しい都市で利用可能になり 新コーチングオーバー レイを備えます App Clipコードのトラッキングは App Clip内のARを 簡単に見つけて利用 するのに役立ちます 仮想コンテンツの正確な 配置も同様です フェイストラッキングは 新しいiPad Proの超広角レンズで機能し モーションキャプチャにおいて 精度が向上し 動きの範囲が広がります ぜひすばらしい体験を ARKitで 作成してください [音楽]
-
-
3:29 - Geo Tracking Recap I
// Check device support for geo-tracking guard ARGeoTrackingConfiguration.isSupported else { // Geo-tracking not supported on this device return } // Check current location is supported for geo-tracking ARGeoTrackingConfiguration.checkAvailability { (available, error) in guard available else { // Geo-tracking is not available at this location return } // Run ARSession let arView = ARView() arView.session.run(ARGeoTrackingConfiguration()) } -
3:42 - Geo Tracking Recap II
// Create Location Anchor and add to session let coordinate = CLLocationCoordinate2D(latitude: 37.795313, longitude: -122.393792) let geoAnchor = ARGeoAnchor(name: “Ferry Building”, coordinate: coordinate) arView.session.add(anchor: geoAnchor) // Monitor geo-tracking status updates func session(_ session: ARSession, didChange geoTrackingStatus: ARGeoTrackingStatus) { … } -
6:02 - Geo Tracking Coaching Overlay
// Declare coaching view let coachingOverlay = ARCoachingOverlayView() // Set up coaching view (assuming ARView already exists) coachingOverlay.session = self.arView.session coachingOverlay.delegate = self coachingOverlay.goal = .geoTracking coachingOverlay.translatesAutoresizingMaskIntoConstraints = false self.arView.addSubview(coachingOverlay) NSLayoutConstraint.activate([ coachingOverlay.centerXAnchor.constraint(equalTo: view.centerXAnchor), coachingOverlay.centerYAnchor.constraint(equalTo: view.centerYAnchor), coachingOverlay.widthAnchor.constraint(equalTo: view.widthAnchor), coachingOverlay.heightAnchor.constraint(equalTo: view.heightAnchor), ]) -
8:53 - GeoTracking Distance Method
// Method to compute distance (in meters) between points func distance(from location: CLLocation) -> CLLocationDistance -
12:16 - App Clip Code: check device support
func viewDidLoad() { // Check device support for app clip code tracking guard ARWorldTrackingConfiguration.supportsAppClipCodeTracking else { return } let worldConfig = ARWorldTrackingConfiguration() worldConfig.appClipCodeTrackingEnabled = true arSession.run(worldConfig) } -
12:34 - Accessing the URL of an App Clip Code
/// Accessing the URL of an App Clip Code override func session(_ session: ARSession, didUpdate anchors: [ARAnchor]) { for anchor in anchors { guard let appClipCodeAnchor = anchor as? ARAppClipCodeAnchor, appClipCodeAnchor.isTracked else { return } switch appClipCodeAnchor.urlDecodingState { case .decoding: displayPlaceholderVisualizationOnTopOf(anchor: appClipCodeAnchor) case .failed: displayNoURLErrorMessageOnTopOf(anchor: appClipCodeAnchor) case .decoded: let url = appClipCodeAnchor.url! let anchorEntity = AnchorEntity(anchor: appClipCodeAnchor) arView.scene.addAnchor(anchorEntity) let visualization = AppClipCodeVisualization(url: url, radius: appClipCodeAnchor.radius) anchorEntity.addChild(visualization) } } } -
15:34 - Adding a gesture recognizer
/// Adding a gesture recognizer for user interaction func viewDidLoad() { initializeARView() initializeCoachingOverlays() // Place sunflower on the ground when the user taps the screen let tapGestureRecognizer = UITapGestureRecognizer( target: self, action: #selector(handleTap(recognizer:))) arView.addGestureRecognizer(tapGestureRecognizer) } -
15:45 - Tap to place the sunflower
func handleTap(recognizer: UITapGestureRecognizer) { let location = recognizer.location(in: arView) // Attempt to find a 3D location on a horizontal // surface underneath the user's touch location. let results = arView.raycast( from: location, allowing: .estimatedPlane, alignment: .horizontal) guard let firstResult = results.first else { return } // Fetch the last decoded app clip code URL guard let appClipCodeURL = decodedURLs.last else { return } // Add an ARAnchor & AnchorEntity at the touch location let anchor = ARAnchor(transform: firstResult.worldTransform) arView.session.add(anchor: anchor) let anchorEntity = AnchorEntity(anchor: anchor) arView.scene.addAnchor(anchorEntity) // Download the 3D model associated with this app clip code. downloadAndDisplay(appClipCodeURL, on: anchorEntity) } -
18:33 - Checking for supported video formats for face tracking
// Check if the ultra wide video format is available. // If so, set it on a face tracking configuration & run the session with that. let config = ARFaceTrackingConfiguration() for videoFormat in ARFaceTrackingConfiguration.supportedVideoFormats { if videoFormat.captureDeviceType == .builtInUltraWideCamera { config.videoFormat = videoFormat break } } session.run(config)
-
-
特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。
クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。