RealityKitによる空間描画アプリの構築

RealityKitによる空間描画アプリの構築

空間描画アプリの構築プロセスで、RealityKitを使いこなしましょう。RealityKitとARKitおよびSwiftUIの統合により生まれる、印象的で魅力的な空間体験の構築について、RealityKitにおいてリソースが動作する仕組みや、ユーザーのブラシの線の更新を高速化する低レベルのメッシュおよびテクスチャのAPIなどの機能を使用する方法を解説します。

関連する章
- 0:00 - Introduction
- 2:43 - Set up spatial tracking
- 5:42 - Build a spatial  user interface
- 13:57 - Generate brush geometry
- 26:11 - Create a splash screen
リソース
関連ビデオ

WWDC24
WWDC23
- 空間コンピューティングにおけるレンダリングの詳細
こんにちは Adrianです RealityKitチームのエンジニアですこのセッションでは RealityKitの新機能を使用して visionOS用の空間描画アプリを構築するプロセスについて説明します
RealityKitは高性能な 3Dシミュレーションとレンダリング機能を iOS macOS visionOSに提供するフレームワークです visionOSでは RealityKitはアプリの空間機能の基盤となります
Apple Vision Proの発表以来デベロッパの皆さんから有益なフィードバックを多数受け取っておりプラットフォームの機能を進化させながらそのフィードバックに対応するために懸命に取り組んできました
本日は RealityKitで作成できるアプリの限界を押し上げる新しいAPIを紹介します詳細を確認しましょう
Appleの空間描画アプリは RealityKitのパワフルな3Dの機能を SwiftUIおよびARKitと統合し優れたユーザー体験を実現しますカスタマイズされたメッシュやテクスチャシェーダを構築して洗練されたビジュアルデザインを実現するのは楽しい作業です
アプリを起動すると目を引くスプラッシュ画面が表示されます
簡単な設定プロセスの後作成の準備が整います
空中で指をつまむだけですぐに描画を開始できます
ブラシストロークの外観はパレットビューで変更できます
このアプリはチューブのようなソリッドブラシタイプと
きらめくスパークルブラシをサポートしています
ブラシストロークはカスタマイズ可能でストロークの色や太さを変更できます
他にもいろいろありますこのアプリを一緒に構築していきましょうそれでは始めましょうまず空間トラッキングを設定してアプリが手と環境のデータを認識できるようにします
次にUIを作成してブラシとキャンバスを制御できるようにしますまたパワフルな新機能を使ってホバー時のUIの外観をカスタマイズします
RealityKitでのメッシュの仕組みを詳しく確認しアプリで新しいRealityKit APIを使用して Metalでブラシジオメトリを効率的に生成する方法を紹介します
動的なテクスチャと空間UI要素を使用して魅力的なスプラッシュ画面を作成しアプリに最後の仕上げを施します
描画アプリにはつまんで手を動かして描くときの手のポーズを認識させる必要がありますそのためにはハンドアンカーの空間トラッキングを設定します
visionOSではアプリは SwiftUIまたはRealityKitコンテンツをウインドウボリュームスペースに配置できます
アプリでイマーシブ空間を使用するとアンカーを使用して空間トラッキング情報を受け取ることができます
これにはワールドアンカーとプレーンアンカーを使用したシーンの理解に関する情報とハンドアンカーを使用したポーズに関する情報が含まれます
visionOS 1.0では ARKitを使ってこのデータにアクセスできました
visionOS 2.0ではRealityKitアプリで空間トラッキングを使用するためのより簡単な方法を導入していますこのAPIを使って描画アプリで空間ハンドトラッキングを設定しましょう
RealityKitでは AnchorEntityを使って RealityKitエンティティを ARアンカーに固定できます
この描画アプリではそれぞれの手に 2つのAnchorEntityが作成されます 1つは親指の先端に固定されもう1つは人差し指の先端に固定されます
空間トラッキングデータにアクセスするにはアプリはユーザーからの許可を必要としますこの描画アプリでユーザーがをタップすると関連する承認が要求されます
重要なのはユーザーに許可を求めるタイミングです
承認はアプリが必要なときにのみ要求しますここではユーザーが描画を開始するときです
RealityKitでトラッキングデータの承認を要求するには SpatialTrackingSessionを使用しますこれはvisionOS 2.0の新しいAPIです
アプリに必要なトラッキング機能を宣言しますこの場合アプリには手のデータが必要です
次にSpatialTrackingSessionで runを呼び出しますこの時点でこのトラッキングを承認するためのアラートが表示されます
run関数は未承認のトラッキング機能のリストを返しますこのリストをチェックして許可の有無を確認できます
空間トラッキングが承認された場合は AnchorEntityのtransformを介してトラッキングデータにアクセスできます
許可が拒否された場合 AnchorEntityのtransformは更新されませんただし AnchorEntityはポーズを視覚的に更新します
要点をまとめましょう ImmersiveSpaceをアプリで使用すると RealityKitコンテンツを現実世界に固定できます
AnchorEntityを使用すると RealityKitコンテンツでアンカーを設定できます
そして今年からはアプリでAnchorEntityの transformにアクセスする必要がある場合 SpatialTrackingSessionを使用できます
さらにSpatialTrackingSessionを使用すると AnchorEntitiesは RealityKitの物理システムと対話できます
次はこのアプリのユーザーインターフェイスについて説明します
スプラッシュ画面でをタップするとイマーシブ空間に移動し描画キャンバスが表示されます
キャンバスのサイズや位置は球形のハンドルをドラッグすることで変更できます
描画を開始する準備ができたらパレットビューが表示されます
ここでブラシの形状と色を設定できます
描画の準備ができたらキャンバス内に足を踏み入れるだけで開始できます
このインターフェイスの構築方法を詳しく見ていきましょう
まずキャンバス配置インターフェイスから始めますこのインターフェイスを使用すると描画領域を定義できます
キャンバス配置中にイマーシブ空間を構成する要素は 2つあります床には3D形状でキャンバスの端が描かれハンドルを使用するとキャンバスの位置を変更できます
まず境界メッシュについて考えてみましょうこのメッシュはリアルタイムで生成されます境界のサイズはスライダをドラッグして変更できるためです
メッシュは2つの円で定義されます左の図に示すように外側の円が緑色内側の円が赤色になります
この形状をSwiftUIパスとして定義できます
円は360度広がる円弧ですそのため半径が異なる円弧を2つ作成します
次に正規化された偶奇の塗りつぶしモードを指定して作成する形状を定義しています
RealityKitでメッシュを生成するには今年の新しいAPIを使用できます MeshResource extrudingです MeshResource extrudingはパワフルなAPIで 2Dベクトルコンテンツを 3Dモデルに変換できます
必要なのはシェイプの奥行と解像度を指定することだけです
覚えておくべき重要な考慮事項が 1つあります visionOSでは RealityKitはフォビエーションされたレンダラを使用します周辺視野内の画像の領域は低解像度でレンダリングされますこれによりアプリのパフォーマンスが最適化されますシーンに高コントラストの薄いジオメトリが含まれているとアーティファクトのちらつきに気づくかもしれませんこの例ではリングが薄すぎますこのような薄いジオメトリック要素は避けてください
高コントラストの領域では特に注意が必要です
この問題に対処するにはジオメトリの厚みを増やし高コントラストの薄いエッジを削除します左側ではアーチファクトのちらつきが軽減されています
空間コンテンツのエイリアシングについて詳しくは WWDC23の「Explore rendering for spatial computing」をご覧ください
次にキャンバスハンドルについて説明します 1つ指摘しておきたいことがありますこのハンドルを見つめると青いハイライト効果が生じます
visionOSでは HoverEffectComponentはユーザーがRealityKitのコンテンツを見つめたときに視覚効果を追加します
visionOS 1.0では HoverEffectComponentはデフォルトのスポットライト効果を使用します
今年はさらに2種類のホバー効果を HoverEffectComponentに導入しますハイライト効果はエンティティに均一なハイライト色を適用します
HoverEffectComponentを ShaderGraphシェーダと併用できるようになりましたシェーダベースのホバー効果は非常に柔軟性が高いためホバー時のエンティティの外観を正確に制御できます
ハンドルの青いハイライトを実現できるのはハイライトホバー効果のおかげですハイライト効果を使用するにはドットハイライトを使用して HoverEffectComponentを初期化しハイライト色を指定します
強度の値を変更してハイライトをより鮮やかにすることもできます
キャンバス配置のUI要素が背後の環境の上で光っているように見えることに気付いたかもしれませんこれは加算ブレンドモードで設定されているためです今年 RealityKitは UnlitMaterialや PhysicallyBasedMaterialなどの組み込みマテリアルで加算ブレンドモードを新たにサポートするようになりましたこれを使うにはまずProgramを作成しブレンドモードをaddに設定します
ユーザーが描画キャンバスを選択したらいよいよメインイベントですパレットビューが表示されユーザーはブラシの設定を開始できます
パレットビューはSwiftUIで構築されておりブラシのタイプとスタイルをカスタマイズできますパレットの下部には選択できるプリセットブラシのセットがあります
ブラシプリセットビューに特に注目したいと思います各ブラシプリセットサムネールは実際に完全な3次元形状であることに注意してください
このメッシュは実際のブラシストロークと同じ方法で生成されます SwiftUIとRealityKitはシームレスに統合されますここでは各サムネールに RealityViewを使用しますこれにより RealityKitのすべての機能を活用できます
ブラシプリセットを見つめると目を引くホバー効果がアクティブになりブラシに沿って紫色の光が流れます
これは先ほど説明したシェーダベースのホバー効果です
この効果をどのように実現したかを詳しく見ていきましょう
シェーダベースのホバー効果はシェーダグラフの Hover Stateノードで実現しますこのノードはシェーダにホバー効果を統合するための便利なツールを提供します
例えば Intensityはシステムが提供する値で視線の状態に基づいて 0から1の間でアニメーション化されます Intensity値を使用するとキャンバスハンドルで先ほど説明したようなハイライト効果を再現できます
ただしプリセットビューではもっと高度な効果を作りたいと思っています
グロー効果はブラシストロークの最初から最後までブラシメッシュに沿って流れる必要があります
この複雑な効果を実現するためにシェーダグラフマテリアルを使いますシェーダグラフを一緒に見ていきましょう
Hover Stateノードの Time Since Hover Start プロパティを使用しますこれはホバーイベントが始まってからの秒単位での値です
これを使ってグローハイライトの曲線に沿った位置を定義しますホバーイベントが始まるとグローの位置が曲線に沿って移動し始めます
ブラシストロークのメッシュを生成する際アプリはCurveDistanceという属性を提供しますアプリはUV1チャネルを介して各頂点のCurveDistance値を提供します
これはブラシストロークの曲線距離を視覚化したものですこの値はストロークの長さに応じて増加します
シェーダはグローハイライトの位置を曲線距離と比較します
こうすることでシェーダは現在のジオメトリに対するグローの位置を把握できます
次にグロー効果のサイズを定義します
現在のジオメトリはグロー位置の範囲内にあるときに光ります
これでイージング曲線を追加できますこれはグローがジオメトリ上を移動するときのホバー効果のIntensityを定義します
最後の手順は計算したIntensity値に応じてホバー効果の色と元のブラシストロークの色を混合することです
これは良くできています
シェーダベースのホバー効果を使用するにはますシェーダ設定を使用して HoverEffectComponentを作成します
次にShaderGraphMaterialを使用しますこれがHover Stateノードの更新を受け取ります
ユーザーがブラシを設定する方法を構築したので次はアプリのコアについて説明します各ブラシストロークのジオメトリを生成します
大まかに言うとメッシュは頂点とそれらを接続する三角形などのプリミティブの集合です
各頂点はその頂点の位置やテクスチャ座標など様々な属性に関連付けられています
これらの属性はデータによって記述されます例えば各頂点の位置は3次元ベクトルです
頂点データはGPUに送信できるようにバッファに整理する必要があります
ほとんどのRealityKitメッシュではデータはメモリ内で連続して整理されますしたがってメモリ内では頂点位置0の次に頂点位置1が続きその次に頂点2というように続きます他のすべての頂点属性についても同様ですインデックスバッファは別々に配置されこれにはメッシュ内の各三角形の頂点インデックスが含まれます
RealityKitの標準メッシュレイアウトは汎用性が高く様々なユースケースに対応しますただし場合によってはドメイン固有のアプローチの方が効率的です
描画アプリはカスタムビルドのジオメトリ処理パイプラインを使用してユーザーのブラシストロークのメッシュを作成します
例えば各ブラシストロークを滑らかにしてメッシュの曲率を改善します
このアルゴリズムは最適化されているためブラシストロークの末尾に点を追加する処理が可能な限り高速になりますレイテンシを最小限に抑えることが重要です
ブラシストロークメッシュでは頂点のレイアウトに 1つのバッファが使用されます
ただし標準的なメッシュレイアウトとは異なり各頂点はその個々の全体が順に記述されます
そのため属性はインターリーブされます最初の頂点の位置の次にその頂点の法線が続き次に従接線が続くというようにすべての属性が記述されるまで続きますその後で初めてバッファは 2番目以降の頂点の記述を開始します
これとは対照的に標準の頂点バッファは各属性のすべてのデータを連続してレイアウトしますブラシ頂点バッファのレイアウトは描画アプリに特に便利です
ブラシストロークを生成するときアプリは常に頂点バッファの末尾に頂点を追加しますブラシ頂点バッファは古いデータの位置を変更せずに新しい頂点を追加できることに注意してくださいただし標準の頂点バッファでこれを行うとバッファの増大に伴いほとんどのデータを移動する必要がありますブラシ頂点には標準レイアウトで表示されるものとは異なる属性もあります
位置法線従接線などの一部の属性は標準です
色マテリアルプロパティ曲線距離などはカスタム属性です
アプリのコードではブラシの頂点は Metal Shading Languageのこの構造体として表されます
構造体の各エントリは頂点の属性に対応します
そこで問題に直面します一方では高性能ジオメトリエンジンの頂点レイアウトを保持し不要な変換やコピーを避けたいと考えていますしかし一方でジオメトリエンジンのレイアウトは RealityKitの標準レイアウトと互換性がありません必要なのは GPUバッファをそのままRealityKitに取り込み RealityKitにその読み取り方法を指示する方法です
そして今 LowLevelMeshという新しいAPIでそれが可能になりました
LowLevelMeshを使うと様々な方法で頂点データを配置できます
頂点データには 4つの異なる Metalバッファを使用できますそのためRealityKitの標準レイアウトに似たレイアウトを使うことができます
ただしバッファを複数用意すると便利な場合もあります例えばテクスチャ座標を他の属性よりも頻繁に更新する必要があるとしますその場合この動的データを独自のバッファに移動する方が効率的です
頂点バッファをインターリーブするように並べ替えることができますインターリーブと非インターリーブの組み合わせも可能です
また三角形ストリップなどの Metalプリミティブタイプも使用できます
LowLevelMeshとそのカスタムバッファレイアウトがアプリにどのようなメリットをもたらすか考えてみてください
メッシュデータは独自のカスタムレイアウトを持つバイナリファイルから取得されているかもしれませんこれでそのデータを変換のオーバーヘッドなしで直接RealityKitに転送できます
またはデジタルコンテンツ作成ツールや CADアプリケーションで見られるようなバッファレイアウトが事前定義された既存のメッシュ処理パイプラインを RealityKitにブリッジする場合もあります
LowLevelMeshはゲームエンジンから RealityKitにメッシュデータを効率的にブリッジする方法としても使用できます
LowLevelMeshによりメッシュデータをRealityKitに提供する方法の可能性が広がります皆さんのアプリで何が実現できるか楽しみにしていますではコードでLowLevelMeshを作成する方法について見ていきましょう
これでアプリは余分な変換や不要なコピーなしで頂点バッファをそのまま LowLevelMeshに提供できます
LowLevelMesh属性を使用して頂点のレイアウト方法を記述します迅速な拡張機能で属性リストを SolidBrushVertex構造体に設定します
まず位置の属性を宣言します
詳しく見ていきましょう最初のステップはセマンティクスの定義ですこれはLowLevelMeshに属性の解釈方法を指示します
この場合属性は位置なのでそのセマンティクスを使います
次にこの属性の Metal頂点形式を定義しますこの場合 SolidBrushVertexの定義と一致するように float3を選択する必要があります
次に属性のオフセットをバイト単位で指定します
最後にレイアウトのインデックスを指定します頂点レイアウトのリストにインデックスを付けますこれについては後で説明します描画アプリは単一のレイアウトのみを使うためインデックス0を使用します
次にその他のメッシュ属性を宣言します
法線属性と従接線属性は異なるメモリオフセットとセマンティクスが使用されることを除いて位置に似ています
色属性には半精度浮動小数点値を使用します今年は任意のMetal頂点形式を LowLevelMeshで使用できますこれには圧縮された頂点形式が含まれます
他の2つのパラメータにはセマンティクスUV1とUV3を使用しますまた今年新たに最大8つのUVチャネルをLowLevelMesh で使用できるようになりましたシェーダグラフのマテリアルはこれらの値にアクセスできますこれでLowLevelMeshオブジェクト自体を作成できますこれを行うには LowLevelMesh記述子を作成します LowLevelMesh記述子は概念的には Metalの MTLVertexDescriptorに似ていますが RealityKitがメッシュを取り込むために必要な情報も含まれています
まず頂点とインデックスバッファに必要な容量を宣言します
次に頂点属性のリストを渡しますこれは前のスライドでまとめたリストです
次に頂点レイアウトのリストを作成します各頂点属性はレイアウトの1つを使用します
LowLevelMeshは頂点データ用に最大4つのMetalバッファを提供しますバッファインデックスはどのバッファを使用するかを宣言します
次にバッファオフセットと各頂点のストライドを指定しますほとんどの場合ここで行ったように 1つのバッファのみを使用します
これでLowLevelMeshを初期化できます
最後のステップはパーツのリストを入力することです各パーツはインデックスバッファの領域にまたがります
各メッシュパーツに異なるRealityKit マテリアルインデックスを割り当てることができます
またここではメモリ効率を向上させるため三角形のストリップトポロジを使用します
最後に LowLevelMeshから MeshResourceを作成しそれをエンティティの ModelComponentに割り当てます
LowLevelMeshの頂点データを更新するときは withUnsafeMutableBytes APIを使用できます
このAPIを使用すると実際のバッファにアクセスできますさらに GPUに渡されてレンダリングされますそのためメッシュデータを更新する際のオーバーヘッドは最小限です
例えばメッシュのメモリレイアウトが事前にわかっているため bindMemoryを使用して提供された生のポインタをバッファポインタに変換できます
インデックスバッファデータについても同様です LowLevelMeshインデックスバッファは withUnsafeMutableIndicesを使用して更新できます
LowLevelMeshがアプリのメッシュ処理パイプラインを高速化する強力なツールであることは既に説明しました LowLevelMeshを使用すると頂点またはインデックスバッファの更新を GPU演算でバックアップすることもできます例を見てみましょう
これは描画アプリのスパークルブラシですブラシストロークに追従するパーティクルフィールドを生成しますこのパーティクルフィールドはフレームごとに動的に更新されるためソリッドブラシの場合とは異なる更新スキームを使用します
メッシュ更新の頻度と複雑さを考えると GPUを使うのは理にかなっています
詳しく見ていきましょうスパークルブラシには位置や色などのパーティクルごとの属性のリストが含まれています前と同様に curveDistanceパラメータとパーティクルのサイズも含まれています
GPUパーティクルシミュレーションでは SparkleBrushParticle型を使用して各パーティクルの属性と速度を追跡しますアプリはシミュレーションに SparkleBrushParticlesの補助バッファを使用します
SparkleBrushVertex構造体はメッシュの頂点データに使用されますこれには各頂点のUV座標が含まれておりシェーダは3D空間でパーティクルを方向付ける方法を理解できますパーティクルごとに 4つの頂点を持つ平面が作成されます
スパークルブラシメッシュの更新用に 2つのバッファを維持する必要があります SparkleBrushParticleで埋められたパーティクルシミュレーションバッファと SparkleBrushVerticesを含む LowLevelMesh頂点バッファです
ソリッドブラシと同様に頂点バッファの仕様を LowLevelMesh属性のリストと共に提供します
属性のリストは SparkleBrushVertexのメンバーに対応します
GPUでLowLevelMeshを設定するときは Metalコマンドバッファと演算コマンドエンコーダを使用します
バッファが処理を終えると RealityKitは自動的に変更を適用しますコードでは次のようになります前に述べたようにここではパーティクルシミュレーションに Metalバッファを使用し頂点バッファにLowLevelMeshを使用します
Metalコマンドバッファと演算コマンドエンコーダを設定しますこれでアプリは GPU演算カーネルを実行してメッシュを構築できるようになります
LowLevelMeshでreplaceを呼び出してコマンドバッファを提供します
Metalバッファが返されますこの頂点バッファはRealityKitがレンダリングのために直接使用します
シミュレーションをGPUにディスパッチした後コマンドバッファをコミットしますコマンドバッファの処理が完了すると RealityKitは更新された頂点データの使用を自動的に開始します
高速で応答性の高いブラシストローク生成によりアプリの見た目が向上しますでは魅力的なスプラッシュ画面でアプリの最後の仕上げをしましょう
スプラッシュ画面はユーザーをアプリの世界へ迎え入れる最適な方法です楽しみながらアプリのビジュアルスタイルを披露する機会にもなります
アプリのスプラッシュ画面には 4つの視覚的要素があります
ロゴタイプには 2つの異なるフォントを使用した「RealityKit Drawing App」という 3Dテキストが含まれています
ロゴマークも3D形状です
下部にはユーザーに描画の開始を促すボタンがあります
そして背景にはユーザーの環境で光る印象的なグラフィックがあります
ロゴタイプの作成から始めましょう
まずデフォルトのシステムフォントで「RealityKit」のAttributed Stringを作成します
今年新たに RealityKitのMeshResourceを MeshResource extrudingを使用して AttributedStringから作れるようになりました
AttributedStringを使用しているので異なるプロパティを持つテキスト行を簡単に追加できます「Drawing App」というテキストを別のフォントでサイズを大きくして描きましょう
次に段落スタイルを使用してテキストを中央揃えにします
AttributedStringを使用してテキストのスタイルを設定する方法については WWDC21の「What’s new in Foundation」をご覧ください
これまでに作成したテキストを拡大してみましょう現時点では3Dモデルが少し平坦に見えるのでカスタマイズしましょうこれを行うには ShapeExtrusionOptions構造体を MeshResource extrudingに渡します
より厚い3D形状を作成するためにまず奥行きを大きくします次にメッシュに 2つ目のマテリアルを追加します前面背面側面に割り当てるマテリアルインデックスを指定できます
最後にテキストを正面から見たときアウトラインマテリアルがより目立つように微細な面取りを施しますここでは面取り半径を 0.1ポイントに指定します
このアプリでは MeshResource extrudingを使用してロゴマークも生成します SwiftUIパスを使用するので形状の定義方法には非常に柔軟性がありますロゴマークは一連のベジエ曲線として設定されます
SwiftUIパスの詳細については SwiftUIチュートリアル「Drawing paths and shapes」をご覧ください
次にスプラッシュ画面の背景について説明しますこれはアプリの中でも最も印象的な美的要素の1つですこれを構築するために LowLevelTextureという新しいAPIを使いました LowLevelTextureは LowLevelMeshと同じ高速リソース更新セマンティクスを提供しますがテクスチャアセット用です
スプラッシュ画面では LowLevelTextureを使用してピル型シェイプが連なる一種の形状記述を生成しますこの形状記述はテクスチャの赤チャネルに保存されます
各ピルの内部には暗い領域がありピルの外側は明るい領域です
テクスチャの緑チャネルにはスプラッシュ画面のビネットの記述が保存されます
このテクスチャは Reality Composer Proのシェーダグラフシェーダを介して最終画像に解釈されます
LowLevelTextureはそのDescriptorから作成します LowLevelTexture記述子は Metalの MTLTextureDescriptorに相当します LowLevelMeshと同様に LowLevelTextureはピクセル形式とテクスチャの使用を詳細に制御しますそしてRealityKitで圧縮ピクセル形式を使用できるようになりましたこのスプラッシュ画面で必要なのは赤と緑のチャネルだけなのでピクセル形式RG16Floatを使用します
記述子から LowLevelTextureを初期化できます次に LowLevelTextureから RealityKitテクスチャリソースを作成します
これでこのテクスチャをマテリアルで使用する準備ができました
LowLevelMeshと同じように GPUでLowLevelTextureを更新しますまず Metalコマンドバッファと演算コマンドエンコーダを設定します
次にコマンドバッファを使って LowLevelTexture.replaceを呼び出します演算シェーダで書き込むことができる Metalテクスチャが返されます
最後に GPU演算をディスパッチしコマンドバッファをコミットしますコマンドバッファの処理が完了すると Metalテクスチャが自動的に RealityKitに表示されますこうして完成したスプラッシュ画面の見た目に非常に満足しています目を引く背景とパーソナライズされた 3Dジオメトリを組み合わせることで非常に独特な外観になっていますこのアプリに最適な仕上げを施すことができました
以上で終わりです今日は RealityKitでインタラクティブな空間描画アプリを構築しました RealityKit 空間トラッキングAPIを使用してユーザーが空間のどこに描画するかをアプリで検出できるようにしました SwiftUIと高度なホバー効果を使用してブラシとスタイルをカスタマイズするためのインタラクティブな空間UIを構築しました RealityKitでのリソース更新の仕組みを学び高度な低レベルAPIを使用してメッシュとテクスチャをインタラクティブに生成しました最後に新しいAPIを使って空間体験向けに 2Dベクトルグラフィックスをインポートしました
今年のRealityKitの新機能の詳細については「Discover RealityKit APIs for iOS, macOS and visionOS」と「Enhance your spatial computing app with RealityKit audio」をどうぞ
皆さんの成果に期待しています WWDC24の他のセッションもお楽しみください

// Retain the SpatialTrackingSession while your app needs access

let session = SpatialTrackingSession()

// Declare needed tracking capabilities 
let configuration = SpatialTrackingSession.Configuration(tracking: [.hand])

// Request authorization for spatial tracking
let unapprovedCapabilities = await session.run(configuration)
        
if let unapprovedCapabilities, unapprovedCapabilities.anchor.contains(.hand) {
    // User has rejected hand data for your app.
    // AnchorEntities will continue to remain anchored and update visually
    // However, AnchorEntity.transform will not receive updates
} else {
    // User has approved hand data for your app.
    // AnchorEntity.transform will report hand anchor pose
}

7:07 - Use MeshResource extrusion

// Use MeshResource(extruding:) to generate the canvas edge

let path = SwiftUI.Path { path in
    // Generate two concentric circles as a SwiftUI.Path
    path.addArc(center: .zero, radius: outerRadius,
        startAngle: .degrees(0), endAngle: .degrees(360),
        clockwise: true)
    path.addArc(center: .zero, radius: innerRadius,
        startAngle: .degrees(0), endAngle: .degrees(360),
        clockwise: true)
}.normalized(eoFill: true)
var options = MeshResource.ShapeExtrusionOptions()
options.boundaryResolution 
    = .uniformSegmentsPerSpan(segmentCount: 64)
options.extrusionMethod = .linear(depth: extrusionDepth)

return try MeshResource(extruding: path, 
                        extrusionOptions: extrusionOptions)

9:33 - Highlight HoverEffectComponent

// Use HoverEffectComponent with .highlight

let placementEntity: Entity = // ...
 
let hover = HoverEffectComponent(
    .highlight(.init(
        color: UIColor(/* ... */),
        strength: 5.0)
    )
)

placementEntity.components.set(hover)

9:54 - Using Blend Modes

// Create an UnlitMaterial with Additive Blend Mode

var descriptor = UnlitMaterial.Program.Descriptor()
descriptor.blendMode = .add

let prog = await UnlitMaterial.Program(descriptor: descriptor)
var material = UnlitMaterial(program: prog)

material.color 
    = UnlitMaterial.BaseColor(tint: UIColor(/* ... */))

13:45 - Shader based hover effects

// Use shader-based hover effects

let hoverEffectComponent = HoverEffectComponent(.shader(.default))
entity.components.set(hoverEffectComponent)

let material = try await ShaderGraphMaterial(named: "/Root/SolidPresetBrushMaterial",
                                             from: "PresetBrushMaterial",
                                             in: realityKitContentBundle)

entity.components.set(ModelComponent(mesh: /* ... */, materials: [material]))

16:56 - Defining a vertex buffer struct for the solid brush

struct SolidBrushVertex {
    packed_float3 position;
    packed_float3 normal;
    packed_float3 bitangent;
    packed_float2 materialProperties;
    float curveDistance;
    packed_half3 color;
};

19:27 - Defining LowLevelMesh Attributes for solid brush

extension SolidBrushVertex {
    static var vertexAttributes: [LowLevelMesh.Attribute] {
        typealias Attribute = LowLevelMesh.Attribute
        return [
            Attribute(semantic: .position, format: MTLVertexFormat.float3, layoutIndex: 0,
                      offset: MemoryLayout.offset(of: \Self.position)!),
            Attribute(semantic: .normal, format: MTLVertexFormat.float3, layoutIndex: 0,
                      offset: MemoryLayout.offset(of: \Self.normal)!),
            Attribute(semantic: .bitangent, format: MTLVertexFormat.float3, layoutIndex: 0,
                      offset: MemoryLayout.offset(of: \Self.bitangent)!),
            Attribute(semantic: .color, format: MTLVertexFormat.half3, layoutIndex: 0,
                      offset: MemoryLayout.offset(of: \Self.color)!),
            Attribute(semantic: .uv1, format: MTLVertexFormat.float, layoutIndex: 0,
                      offset: MemoryLayout.offset(of: \Self.curveDistance)!),
            Attribute(semantic: .uv3, format: MTLVertexFormat.float2, layoutIndex: 0,
                      offset: MemoryLayout.offset(of: \Self.materialProperties)!)
        ]
    }
}

21:14 - Make LowLevelMesh

private static func makeLowLevelMesh(vertexBufferSize: Int, indexBufferSize: Int, 
                                     meshBounds: BoundingBox) throws -> LowLevelMesh
{
    var descriptor = LowLevelMesh.Descriptor() // Similar to MTLVertexDescriptor
    
    descriptor.vertexCapacity = vertexBufferSize
    descriptor.indexCapacity = indexBufferSize
    descriptor.vertexAttributes = SolidBrushVertex.vertexAttributes
        
    let stride = MemoryLayout<SolidBrushVertex>.stride
    descriptor.vertexLayouts = [LowLevelMesh.Layout(bufferIndex: 0, 
                                                    bufferOffset: 0, bufferStride: stride)]
   
    let mesh = try LowLevelMesh(descriptor: descriptor)
    
    mesh.parts.append(LowLevelMesh.Part(indexOffset: 0, indexCount: indexBufferSize,
                                        topology: .triangleStrip, materialIndex: 0,
                                        bounds: meshBounds))
    return mesh
}

22:28 - Creating a MeshResource

let mesh: LowLevelMesh

let resource = try MeshResource(from: mesh)

entity.components[ModelComponent.self] = ModelComponent(mesh: resource, materials: [...])

22:37 - Updating vertex data of LowLevelMesh using withUnsafeMutableBytes API

let mesh: LowLevelMesh

mesh.withUnsafeMutableBytes(bufferIndex: 0) { buffer in
    let vertices: UnsafeMutableBufferPointer<SolidBrushVertex>
        = buffer.bindMemory(to: SolidBrushVertex.self)

    // Write to vertex buffer `vertices`
}

23:07 - Updating LowLevelMesh index buffers using withUnsafeMutableBytes API

let mesh: LowLevelMesh

mesh.withUnsafeMutableIndices { buffer in
    let indices: UnsafeMutableBufferPointer<UInt32>
        = buffer.bindMemory(to: UInt32.self)

    // Write to index buffer `indices`
}

23:58 - Creating a particle brush using LowLevelMesh

struct SparkleBrushAttributes {
    packed_float3 position;
    packed_half3 color;
    float curveDistance;
    float size;
};

// Describes a particle in the simulation
struct SparkleBrushParticle {
    struct SparkleBrushAttributes attributes;
    packed_float3 velocity;
};

// One quad (4 vertices) is created per particle
struct SparkleBrushVertex {
    struct SparkleBrushAttributes attributes;
    simd_half2 uv;
};

24:58 - Defining LowLevelMesh Attributes for sparkle brush

extension SparkleBrushVertex {
    static var vertexAttributes: [LowLevelMesh.Attribute] {
        typealias Attribute = LowLevelMesh.Attribute
        return [
            Attribute(semantic: .position, format: .float3, layoutIndex: 0,
                      offset: MemoryLayout.offset(of: \Self.attributes.position)!),

            Attribute(semantic: .color, format: .half3, layoutIndex: 0,
                      offset: MemoryLayout.offset(of: \Self.attributes.color)!),
            
            Attribute(semantic: .uv0, format: .half2, layoutIndex: 0,
                      offset: MemoryLayout.offset(of: \Self.uv)!),
            
            Attribute(semantic: .uv1, format: .float, layoutIndex: 0,
                      offset: MemoryLayout.offset(of: \Self.attributes.curveDistance)!),
            
            Attribute(semantic: .uv2, format: .float, layoutIndex: 0,
                      offset: MemoryLayout.offset(of: \Self.attributes.size)!)
        ]
    }
}

25:28 - Populate LowLevelMesh on GPU

let inputParticleBuffer: MTLBuffer
let lowLevelMesh: LowLevelMesh

let commandBuffer: MTLCommandBuffer
let encoder: MTLComputeCommandEncoder
let populatePipeline: MTLComputePipelineState

commandBuffer.enqueue()
encoder.setComputePipelineState(populatePipeline)

let vertexBuffer: MTLBuffer = lowLevelMesh.replace(bufferIndex: 0, using: commandBuffer)

encoder.setBuffer(inputParticleBuffer, offset: 0, index: 0)
encoder.setBuffer(vertexBuffer, offset: 0, index: 1)
encoder.dispatchThreadgroups(/* ... */)

// ...
encoder.endEncoding()
commandBuffer.commit()

27:01 - Use MeshResource extrusion to generate 3D text

// Use MeshResource(extruding:) to generate 3D text

var textString = AttributedString("RealityKit")
textString.font = .systemFont(ofSize: 8.0)

let secondLineFont = UIFont(name: "ArialRoundedMTBold", 
                            size: 14.0)
let attributes = AttributeContainer([.font: secondLineFont])

textString.append(AttributedString("\nDrawing App", 
                                   attributes: attributes))

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .center
let centerAttributes 
    = AttributeContainer([.paragraphStyle: paragraphStyle])
textString.mergeAttributes(centerAttributes)

var extrusionOptions = MeshResource.ShapeExtrusionOptions()
extrusionOptions.extrusionMethod = .linear(depth: 2)
extrusionOptions.materialAssignment
        = .init(front: 0, back: 0, extrusion: 1,
                frontChamfer: 1, backChamfer: 1)
extrusionOptions.chamferRadius = 0.1

let textMesh = try await MeshResource(extruding: textString
                          extrusionOptions: extrusionOptions)

28:25 - Use MeshResource extrusion to turn a SwiftUI Path into 3D mesh

// Use MeshResource(extruding:) to bring SwiftUI.Path to 3D

let graphic = SwiftUI.Path { path in
    path.move(to: CGPoint(x: -0.7, y: 0.135413))
    path.addCurve(to: CGPoint(x: -0.7, y: 0.042066),
                  control1: CGPoint(x: -0.85, y: 0.067707),
                  control2: CGPoint(x: -0.85, y: 0.021033))
    // ...
}

var options = MeshResource.ShapeExtrusionOptions()
// ...

let graphicMesh = try await MeshResource(extruding: graphic
                          extrusionOptions: options)

29:44 - Defining a LowLevelTexture

let descriptor = LowLevelTexture.Descriptor(pixelFormat: .rg16Float,
                                            width: textureResolution, 
                                            height: textureResolution,
                                            textureUsage: [.shaderWrite, .shaderRead])

let lowLevelTexture = try LowLevelTexture(descriptor: descriptor)
var textureResource = try TextureResource(from: lowLevelTexture)

var material = UnlitMaterial()
material.color = .init(tint: .white, texture: .init(textureResource))

30:27 - Update a LowLevelTexture on the GPU

let lowLevelTexture: LowLevelTexture

let commandBuffer: MTLCommandBuffer
let encoder: MTLComputeCommandEncoder
let computePipeline: MTLComputePipelineState

commandBuffer.enqueue()
encoder.setComputePipelineState(computePipeline)

let writeTexture: MTLTexture = lowLevelTexture.replace(using: commandBuffer)
encoder.setTexture(writeTexture, index: 0)

// ...

encoder.dispatchThreadgroups(/* ... */)
encoder.endEncoding()
commandBuffer.commit()

関連する章

リソース

関連ビデオ

WWDC24

WWDC23