自分の世界を拡張現実に

自分の世界を拡張現実に

Object CaptureやRealityKitを使用して、現実世界のオブジェクトを拡張現実ゲームに取り込む方法を紹介します。さらに、Object Captureフレームワークで詳細なアイテムをキャプチャしたり、これらをXcodeのRealityKitプロジェクトに追加したり、定型化されたシェーダやアニメーションを適用したり、ARエクスペリエンスの一部としてこれらを使用したりする方法を紹介します。また、ARKit、RealityKit、Object Captureと連携させる際のベストプラクティスも紹介します。このセッションを最大限に活用するには、WWDC21の「RealityKit 2の詳細」と「Object Captureによる3Dコンテンツの作成」を最初にご確認ください。

リソース
関連ビデオ

WWDC22
- ARKit 6について
- WWDC22（1日目）のまとめ
WWDC21
ダウンロード

♪ メロウなインスト曲ヒップホップ ♪ ♪ こんにちは Haoです Object Captureチームのエンジニアです今日は同僚のRisaと一緒に Object Capture APIと RealityKitを使用して現実世界の物体の 3Dモデルを作成し ARに取り込む方法をご紹介しますでは始めましょうまずは Object Captureのおさらいからこれは昨年 RealityKit APIとして macOSで公開されました次に ARKitで強化されたいくつかのカメラ機能をご紹介しますこれは高解像度の被写体の写真を撮影して Object Captureを AR Appに取り込む際に役立ちますその後は今後もこのテクノロジーを最大限に活用いただくために Object Captureのベストプラクティスをご紹介します最後のセクションでは Risaが RealityKitの Object Captureを使ったエンドツーエンドのワークフローを紹介し現実世界の物をAR体験に取り込む方法を説明します Object Captureの簡単なおさらいから始めましょう Object Captureはコンピュータビジョン技術で現実の被写体の画像を簡単に詳細な3Dモデルに変換することができますまずiPhone iPad DSLR等で様々な角度から被写体の写真を撮影するところから始めますその後でその写真を Object Capture対応の Macにコピーします RealityKitは Photogrammetry APIを使用してほんの数分で写真を3Dモデルに変換できます出力モデルには幾何学的なメッシュとテクスチャを含む様々なマテリアルマップが含まれ自動的にモデルに適用されます Object Capture APIの詳細については昨年のWWDCの Object Captureのセッションを視聴する事を強くお勧めします多くのデベロッパが Object Captureで素晴らしい Appを作成しています： Unity Cinema4D Qlone PolyCam PhotoCatch などがありますさらにこのAPIを使って作成された美しい見た目のモデルもありますこれはEthan Saadiaが PhotoCatch Appの Object Captureの力を使って作成したモデルですそしてShopifyの友人 Mikko HaapojaもこのAPIを使って素敵な3Dモデルをたくさん作りました Object Captureで出力される 3Dモデルのきめ細やかな画質は電子商取引では非常に効果的です例えばこのGOAT Appでは様々な靴を試着することができます靴のモデルは全てObject Capture APIで作成したものです細部をしっかりと捉えるこだわりのデザインとなっていますこれは製品の購入を決める際にも自分の空間でぴったりとしたフィット感を試す際にも大いに役立ちます例えば Plant Story Appでは自分の空間で本物そっくりの植物の3D モデルをプレビューできます全てObject Captureで作られています植物にどれぐらいのスペースが必要かを把握したり自室でリアルなディテールを確認できますリアリズムと言えばこのビデオで本物の植物を見つけられましたか？そうこの白いプランターの植物ですこのテーブルの左端にあるやつですね 2021年の公開以来 Object Capture APIがこのように幅広く使われていることを嬉しく思っています次は ARKitで強化されたカメラ機能についてですこれはObject Captureで行う再構築の品質を高めるのに大いに役立つはずです Object Capture体験を成功させるにはまずはあらゆる方向から物体の写真を撮影します高解像度のカメラであれば何を使っても構いません iPhoneでもiPadでも DSLRやミラーレスカメラでも良いです iPhoneやiPadのカメラAppを使えば深度や重力情報を含む高画質の写真が撮影でき Object Capture APIで物体の実際のスケールや向きを自動的に復元することができますさらにiPhoneやiPadをお使いの場合は ARKitのトラッキング機能を活用してモデルの上に3Dガイダンス UIを重ねあらゆる方向から物体を満遍なく捉える事ができますもう１つ重要な点は画像の解像度が高いほど Object Captureで生成できる 3Dモデルの質も上がりますそのため今年のARKitでは高解像度のバックグラウンドフォトAPIが新たに導入されていますこのAPIを使用すると ARSessionを実行しながらカメラのネイティブ解像度で写真を撮影できますデバイスでカメラのセンサーをフル活用しながら 3D UIを重ねて表示することもできます iPhone 13の場合ですと 1200万画素ネイティブ解像度のワイドカメラになりますこのAPIは非侵入型なものです ARSessionの連続的なビデオストリームが中断されないため Appは引き続きスムーズな AR体験をユーザーに届けることができますさらにARKitではEXIF メタデータが利用可能になりホワイトバランス露出その他の設定などポストプロセスに役立つ可能性がある有益な情報を Appから読み取ることができるようになりました ARKitがあれば新しいAPIの使い方は非常に簡単です高解像度のフレームキャプチャをサポートするビデオフォーマットを ARWorldTrackingConfgurationでクエリし成功したら新しいビデオフォーマットを設定しARSessionを実行します高解像度写真のキャプチャについては ARSessionの新しい captureHighResolutionFrame API 関数を呼び出すとコンプリーションハンドラ経由で非同期で高解像度写真が返されますそれだけでOKですまた手動でカメラ設定を行う方が望ましい場合があることも事実ですフォーカス露出ホワイトバランスなどそのためAVCaptureDeviceに直接アクセスしプロパティを変更してきめ細やかなカメラ制御を行うための便利な方法も提供していますこのコード例からもわかるとおり ARWorldTrackingConfigurationで configurableCaptureDevice ForPrimaryCameraを呼び出し基盤のAVCaptureDeviceにアクセスしますこれらの強化機能の詳細については今年のWWDCの "ARKit 6について"のセッションをご確認いただくことを強くお勧めしますでは Object Captureのベストプラクティスガイドラインを見ていきましょう何よりもまず先に Object Captureの特性に適した被写体を選ぶ必要があります表面に適度な質感がある物体がお勧めです領域の一部のテクスチャがなかったり透明だとその領域の細部が上手く再構築されない事があります反射や強い光が当たっていないことも大切ですマットな表面がない被写体の場合は拡散光を使って鏡面反射を減らすことができます被写体をひっくり返して底面を撮影する時は被写体が動かないように注意して下さい反転させても形が変わらないように気を付けます最後にすぐれた被写体はある程度細かい構造を持ち合わせてはいますが被写体の細部を復元するには高解像度カメラでアップの写真を撮る必要があります次に重要なことは理想的な撮影環境を整えることです撮影環境に均一で良質の拡散光があることを確認して下さい被写体の周囲に十分な空間があり背景が安定していることも重要です部屋が暗い場合は明るいターンテーブルを使います次に被写体を上手に撮影するためのガイドラインを紹介しますこれに従えば Object Captureから質の高い3Dモデルを作成できます例として同僚のMauneshが iPhoneを使ってどのように美しい海賊船の写真を撮影したかをご紹介しますこの船は ARKitエンジニアの Christian Lipskiが作ってくれたものです Mauneshはまず海賊船をきれいなテーブルの中央に置きましたこれによって船がはっきりと浮かび上がります彼はiPhoneを両手でしっかりと持ちます船の周囲をゆっくりと回りながら様々な高さで写真を撮影しますカメラの視野の中心に十分な大きさで船が収まるようにし細部を最大限に捉えられるようにしますまた隣接した２枚の写真の重なり具合が高いことも確認しましょう十分な数の写真が撮れたらここでは80枚ほどですが船を横向きにして船底も再構築できるように撮影します船を横向きにした状態でさらにもう20枚ほど写真を撮ります彼はiPhoneをランドスケープモードで持っていますねこれは横に長い被写体を撮影しているからでランドスケープモードなら被写体の細部を最大限に捉える事ができるからですでも縦に長い被写体を撮影する場合はポートレートモードが必要になるかもしれません
これだけです最後のステップでは写真を Macにコピーし Object Capture APIを使って処理します４つの詳細レベルから選ぶことができ様々な用途に合わせて最適化されています reducedレベルやmediumレベルは AR QuickLookで 3Dコンテンツを閲覧する場合など Webベースやモバイルでの体験に最適ですこの詳細レベルで再構築されたモデルは三角形やマテリアルチャンネルが少なく消費メモリが少なくて済みます fullやrawの詳細レベルはコンピューターゲームやポストプロセスのワークフローなどインタラクティブな事例で使われます最高レベルの幾何学的詳細が含まれておりベイク処理とベイクなしから自由に選べますが再構築にはより多くのメモリが必要です用途に応じて正しい出力レベルを選ぶことが大切ですこの海賊船には“medium”の詳細レベルを選んだので M1 Macでの処理には数分しかかかりませんでした出力された3Dモデルがあまりに見事だったのでこの海賊船が波の高い海を航海する動画クリップを作りました Object Captureの威力はこんなにすごいのです！ “おーい！” ここからRisaにバトンタッチ RealityKitでObject Captureを使ったエンドツーエンドのワークフローを紹介してもらいますありがとう Hao Object Capture APIの説明が終わった所でエンドツーエンドの開発ワークフローに移り RealityKitで現実の物を ARに取り込みましょう各ステップはサンプルワークフローを使って詳しく説明しますのでまずは早速デモをご覧下さい同僚のZachは木工細工が趣味で先日６つの巨大な木製のチェスの駒を作りましたこのチェスの駒を見ていたらインタラクティブなARチェスゲームを作りたくなりましたこれまで現実世界の物の高品質な3Dモデルを作るには 3Dモデラ―とマテリアルの専門家が必要でしたでもObject Capture APIがあればチェスの駒を直接撮影し拡張現実に取り込むだけでいいのですまずはルークの撮影から始めましょうここでは同僚のBryanが前述のベストプラクティスを念頭に置いてプロフェッショナルなセットを使用していますここでBryanはルークをこのターンテーブルに置きプロ仕様の照明を当てて最終出力に強い影が出るのを防ぎます iPhoneのカメラをターンテーブルで使うと出力したUSDZに自動スケール推定と重力ベクトル情報が含められますこの件の詳細は2021年の Object Captureのセッションを参照して下さいもちろんBryanのような凝ったセットがない場合は iOSデバイスを手に持ち被写体の周りを歩いて撮影することもできますこれでルークの駒の写真が全て揃ったのでこれをMacに転送します写真の処理には2021年に導入された PhotogrammetrySession APIを使用しますベストプラクティスに従って再構築にはreducedの詳細レベルを使用して AR Appの性能が落ちないようにします APIの最終出力は USDZ ファイルタイプのモデルですこれが再構築したルークのチェスの駒の最終出力です時間節約のために他の５つの駒の写真も先に撮影しておきましたチェスの駒に１つの配色だけを使ってどうやってゲームを作るのかしらと思う方もいるかもしれません６つの駒を複製して Reality Converterにドラッグしましょう元のテクスチャの色を反転させて複製セットを新たに反転したテクスチャに置き換えましたこうすればプレイヤーごとに明るいバージョンの駒と暗いバージョンの駒のセットができます “書き出し”メニューで圧縮テクスチャのオプションをオンにしてモデルを書き出しますこれでテクスチャのメモリのフットプリントを減らすことができます
チェスの駒のセットが全て揃ったのでモデルをXcodeプロジェクトに取り込みます私はRealityKitを使ってチェス盤を作りました Y軸のプリミティブ立方体を縮小し白と黒を交互に入れ替えました再構築した全てのチェス駒をチェス盤に置くとこうなります実物をAppの中で見るだけでもワクワクですがさらに機能を追加してインタラクティブなゲームを作りましょうこの部分のデモでは既存のテクノロジーをいくつかご紹介したいと思いますそうすればご希望の出力を作成するにはどのようにテクノロジーを組み合わせるべきか例を示せると思います RealityKitの高度なトピックの実践的な活用事例を説明するにあたって APIの知識がまだ少ない方は 2021年のRealityKit セッションをご確認されることをお勧めしますまずはApp起動時のアニメーションを追加したいと思いますチェッカーのタイルが上からゆっくりと落ちてきて最終位置に収まると同時にチェスの駒も一緒に変換されるアニメーションを作りますこの効果をコードで再現するのに必要なのは２つのステップだけです最初のステップではＹ軸に沿って両方のエンティティを上に移動し同時にチェスの駒を縮小します２番目と最後のステップでは両方のエンティティを元のトランスフォームにアニメ―トしますこれを行うコードは極めてシンプルですまずはチェッカータイルを繰り返し処理していきます各エンティティに対してチェッカータイルの現在のトランスフォームを保存しますこれが最終的な着地位置になるからです次に各正方形をＹ軸沿いに 10 cm上に移動させますこのmove関数を使ってこれをアニメートさせ元のトランスフォームに戻しますまたチェッカー盤の輪郭を描くこのボーダーUSDZIにアニメーションが組込まれていることもわかっているので playAnimation APIを使用して同時にアニメーションを開始しましょうチェスの駒にも全く同じアニメーションを追加ただし駒の変換に伴ってスケールを変更しましたこれで出来上がりです数行コードを追加するだけで起動アニメーションが完成しましたしかし実際にチェスの駒を動かせなければチェスをすることはできません次は駒を動かしましょうチェスの駒を動かし始める前に駒を選択できるようにする必要がありますそこで UITapGestureRecognizerを ARViewに追加しましたユーザーが特定の場所をタップするとカメラの起点からその2Dポイントを通過するレイを定義します次にそのレイに対して 3Dシーンへのレイキャストを実行しエンティティに当たるか確認しますチェスの駒だけを選択できるようにしたいのでチェスの駒のコリジョングループをマスクとして指定しました raycast関数では CollisionComponentを持たないすべてのエンティティが無視されることにご注意下さいこれでチェスの駒が見つかった時に選択できますどの駒を選択するかがわかったので今度はその駒が光っているように見える効果を追加しますそれを実現するためにカスタムマテリアルのサーフェスシェーダを使用しますサーフェスシェーダでは Metalを通じてマテリアルパラメータの計算や指定を行うことができそれがRealityKitのフラグメントシェーダから１ピクセルごとに呼び出されます Metalでこのような炎の効果を表現するサーフェスシェーダを作成することができます次にこのサーフェスシェーダでカスタムマテリアルを長方形のプリズムに適用しエンティティの外観にシェーダ効果をかけますこの効果を作るためのコードを書いてみましょうこのサーフェスシェーダで使用するノイズテクスチャをすでにプロジェクトに追加してありますテクスチャを２回サンプリングします１つは全体の形状もう１つはディテールに使いますさらにRGB値を取り出し再マッピングして外観の色を変更しますそして先ほど抽出した処理値の y位置を画像の値と比較してサンプルポイントの不透明度を計算しますこの効果に動きを与えるためにテクスチャのY軸を時間の関数として動かしていきますさらに各サンプルポイントの対面角度とカメラの視野角を組み合わせて側面での効果をフェードアウトさせますこれによりエッジが柔らかくなり基盤となるモデルの性質が目立たなくなります最後にサーフェスパラメータ関数を使用して先ほど計算した色と不透明度を設定しますこちらが選択シェーダを適用したチェスの駒となります本当に内側から光っているように見えますそしてこれを３つの変換アニメーションと組み合わせるとこのようになりますチェスの駒を動かせる機能を実装したので相手の駒を捉えることもできるようになりましたサーフェスシェーダと同様ジオメトリモディファイアもカスタムマテリアルを使って実装できます位置法線テクスチャの座標など頂点データを変更できる非常にパワフルなツールですこれらのMetal関数は RealityKitの頂点シェーダによって頂点ごとに１回ずつ呼び出されますこれらの変更は一過性のものであり実際のエンティティの頂点情報には影響を及ぼしません駒が捉えられた時に押しつぶされるような楽しいジオメトリモディファイアを追加しますチェスの駒のプロパティに capturedProgressというものがあり捕獲時のアニメーションの0から1への進行状況を表しています駒の捕獲はユーザー主導のアクションなのでジオメトリモディファイアにアニメーションを開始するタイミングを伝える必要がありますそのためcustomMaterialにカスタムプロパティを設定しますこうするとCPUとGPU間のデータ共有が可能になりますここではカスタム値のプロパティを使用してアニメーションの進行状況をモディファイアに渡します Metal側からアニメーションの進行状況を抽出するためにユニフォームにカスタムパラメータを使用しますこのオブジェクトを縦にスケールし他の駒に潰されるようにしたいのでスケールの軸をy方向に設定しますアニメーションを少し複雑化するために x軸のジオメトリも変更して波のような効果も加えたいと思います頂点のオフセットは set_model_position_ offset 関数を使用して設定できますジオメトリモディファイアの最終成果はこちらです潰される前に x軸に沿って縦に伸びてから少し大きくなっているのがわかるでしょう自分がチェスの初心者なので選択した駒をどこに動かせるか教えてくれる機能を追加したらゲームを覚えるのに役立つと思いましたチェッカーの駒は独自の Model Componentを持つ個別のエンティティなのでサーフェスシェーダで駒の動きの候補にパルス効果をかけて他の駒と区別します次に“ブルーム”と言うポストプロセス効果を追加してこの効果をさらに強化しますグロー効果を出す時にサーフェスシェーダで使用したカスタムパラメータをここでも使用しますこの場合はCPU側から Booleanを Metalサーフェスシェーダに渡しますこのチェッカーが可能な動きである場合に色を変えることでパルス効果を加えたいと思いますここの光っている色にパルスを追加します最後にビュー全体にブルーム効果を追加しますブルームとは明るい部分の境界から光の羽を生み出すポストプロセス効果ですこれを行うにはARViewでレンダーコールバックプロパティを使用しますブルーム効果の作成にはすでに組み込まれている Metalパフォーマンスシェーダ関数を使います次に renderCallbacks.postProcess クロージャをブルーム関数として設定しますチェッカーにパルスをかけると白色が強調されこれがブルーム効果によりさらに強調されますサーフェスシェーダとブルーム効果の併用により駒をどこに動かせば良いかがはっきりわかります最後にこれらをすべて組み合わせて AR Appで現実のチェスの駒に命を吹き込みましょう追加した全ての機能がどのように見えるかご覧下さいご参考までにセッションリソースにこのサンプルプロジェクトのリンクを貼りましたぜひダウンロードしてお使いの環境で試してみて下さいとてもシンプルです巨大なチェスの駒を撮影して再構築し AR Appに取り込むまでをご説明しました今日のセッションは盛り沢山だったので重要なポイントをまとめたいと思いますまず 2021年に発表した Object Capture APIのおさらいから開始しました続いてARSessionがアクティブな時にカメラのネイティブ解像度で必要な時に写真が撮れる ARKitの新しいAPIについて紹介しました Object Captureテクノロジーを最大限に活用できるように再構築に適した被写体のタイプや高画質を得るための理想的環境また撮影時に従うべき推奨フローなども説明しましたセッションの後半ではエンドツーエンドの開発ワークフローの例を紹介巨大なチェスの駒の写真を撮影しこの画像をPhotogrammetrySession API への入力に使用して 3Dモデルを作成しました次にそのモデルをReality Converterにインポートしテクスチャを置き換え最後にチェスゲームを少しずつ構築し ARでチェスの駒の動きを確認しました本日のセッションは以上ですご視聴ありがとうございました “おーい！” ♪

if let hiResCaptureVideoFormat = ARWorldTrackingConfiguration.recommendedVideoFormatForHighResolutionFrameCapturing {
    // Assign the video format that supports hi-res capturing.
config.videoFormat = hiResCaptureVideoFormat
}
// Run the session.
session.run(config)

session.captureHighResolutionFrame { (frame, error) in
   if let frame = frame {
      // save frame.capturedImage 
      // …   
   }
}

17:00 - Chessboard animation

// Board Animation
class Chessboard: Entity {
    func playAnimation() {
        checkers
            .forEach { entity in
                let currentTransform = entity.transform
        // Move checker square 10cm up
                entity.transform.translation += SIMD3<Float>(0, 0.1, 0)
                entity.move(to: currentTransform,
                    relativeTo: entity.parent,
                    duration: BoardGame.startupAnimationDuration)
            }
        
        // Play built-in animation for board border
        border.availableAnimations.forEach {
            border.playAnimation($0)
        }
    }
}

18:00 - select chess piece

// Select chess piece
class ChessViewport: ARView {
    @objc
    func handleTap(sender: UITapGestureRecognizer) {
        guard let ray = ray(through: sender.location(in: self)) else { return }

        // No piece is selected yet, we want to select one
        guard let raycastResult = scene.raycast(origin: ray.origin,
                                                direction: ray.direction,
                                                length: 5,
                                                query: .nearest,
                                                mask: .piece).first,
              let piece = raycastResult.entity.parentChessPiece else {
            return
        }
        boardGame.select(piece)
        gameManager.selectedPiece = piece
    }
}

21:16 - capture geometry modifier

// Capture Geometry Modifier
class ChessPiece: Entity, HasChessPiece {
    var capturedProgress: Float
        get {
            (pieceEntity?.model?.materials.first as? CustomMaterial)?.custom.value[0] ?? 0
        }
        set {
            pieceEntity?.modifyMaterials { material in
                guard var customMaterial = material as? CustomMaterial else {
                    return material
                }
                customMaterial.custom.value = SIMD4<Float>(newValue, 0, 0, 0)
                return customMaterial
            }
        }
    }
}

23:00 - highlight potential moves using bloom

// Checker animation to show potential moves
void checkerSurface(realitykit::surface_parameters params,
                    float amplitude,
                    bool isBlack = false)
{
    // ...
    bool isPossibleMove = params.uniforms().custom_parameter()[0];
    if (isPossibleMove) {
        const float a = amplitude * sin(params.uniforms().time() * M_PI_F) + amplitude;
        params.surface().set_emissive_color(half3(a));
        if (isBlack) {
            params.surface().set_base_color(half3(a));
        }
    }
}

23:20 - Import MetalPerformanceShaders

import MetalPerformanceShaders

class ChessViewport: ARView {
    init(gameManager: GameManager) {
        /// ...
        renderCallbacks.postProcess = postEffectBloom
    }

    func postEffectBloom(context: ARView.PostProcessContext) {
        let brightness = MPSImageThresholdToZero(device: context.device,
                                                 thresholdValue: 0.85,
                                                 linearGrayColorTransform: nil)
        brightness.encode(commandBuffer: context.commandBuffer,
                          sourceTexture: context.sourceColorTexture,
                          destinationTexture: bloomTexture!)
        /// ...
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC22

WWDC21