RealityKitによる空間コンピューティンングアプリの拡張

RealityKitによる空間コンピューティンングアプリの拡張

RealityKitを使い、ウインドウの枠を超えて魅力的でイマーシブな3Dコンテンツを実現する方法を学びましょう。SwiftUIシーンとRealityViewの連携機能や、コンテンツをエンティティ階層に埋め込む方法について紹介します。また、アンカーを使って仮想コンテンツと実世界をブレンドさせたり、アプリにパーティクルエフェクトを取り入れたり、動画コンテンツを追加したり、ポータルでよりイマーシブな体験を作成する方法についても説明します。

関連する章
- 0:00 - Introduction
- 2:05 - RealityView attachments
- 6:11 - Video playback
- 10:59 - Portals
- 15:04 - Particle emitters
- 17:06 - Anchors
- 19:28 - Wrap-up
リソース
- Diorama
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
ダウンロード

♪ 心地よいヒップホップ音楽 ♪ ♪ こんにちは Yujinです RealityKitチームのエンジニアです本日は空間コンピューティングアプリを強化するための RealityKitの新しい機能をご紹介します RealityKitが2019年にリリースされて以来豊富な機能セットを活用するアプリがすばらしい体験を提供しているのを見てきました空間コンピューティングは RealityKitにさらに機能を追加しましたポータルパーティクルエミッタ RealityViewアタッチメントや他にもたくさんあります「Build spatial experiences with RealityKit」のセッションでは RealityKitの基本要素コンテナオブジェクトであるエンティティエンティティで特定の動作を定義するコンポーネントエンティティとコンポーネントの両方に従って機能を追加するシステムについて説明しました RealityView APIは SwiftUIとRealityKitの橋渡しの役割をすることを説明しインタラクションアニメーション空間オーディオを RealityKitシーンに追加する方法も説明しましたまだご覧でない場合はこのセッションをぜひご覧ください本日のセッションではアプリをさらに魅力的でイマーシブにするために役立つ RealityKitの新機能をご紹介しますまず RealityViewのアタッチメントを使用して SwiftUIビューを RealityKitに埋め込む方法を学びます次にRealityKitシーン内に動画再生機能を追加する方法を説明しポータルを使用して異次元へのウインドウを開く方法を説明しますパーティクルエミッタAPIを使って視覚効果でシーンを向上する方法をお見せしますそして最後にRealityKitのアンカーを使って 3Dコンテンツを壁などの実世界の場所に配置する方法をお見せしますでは RealityViewアタッチメントから始めましょうアタッチメントはSwiftUIコンテンツを RealityKitシーンに埋め込むための便利な方法ですこの例のアプリではアタッチメントを使用して地球と月のモデルの下にテキストラベルを加えますまた月が私たちの海の波にどう影響を及ぼすかを説明するビューもアタッチしましたこれをコードで行う方法を見てみましょうアプリ内でRealityViewを使って地球モデルをレンダリングします RealityViewは RealityKitエンティティを追加するためのビューですエンティティはレンダリングアニメーションシミュレーションを行うために RealityViewに追加される必要がありますここでは地球のエンティティを読み込み RealityViewのコンテンツに追加しましたではアタッチメントを使用するために RealityViewに変更を加えましょうアタッチメントは RealityKitコンテンツに関連する特定の場所に配置されるビューですアタッチメントの設定には 2つの要素があります 1つはRealityViewの makeクロージャに追加されたパラメータがあります 2つ目はRealityViewに追加されたアタッチメントビュービルダーです最初にアタッチメントビュービルダーから説明しましょうここではRealityKitコンテンツに追加したい SwiftUIビューを提供しますこの例では地球にラベルを付けるためにテキストビューを追加しましたまたビューがエンティティとして makeクロージャに送信されたときに特定できるようにタグ修飾子をビューに追加しますこのタグは任意のハッシュ値にできますここではearth_labelという文字列を使用しました RealityViewのmakeクロージャにはアタッチメントのパラメータにはビューが含まれエンティティとして表現されましたビューをエンティティの形にするには「entity(for:)」をアタッチメントで呼出しビュービルダーで提供した同じタグ earth_labelをパスしますその結果ビューアタッチメントエンティティを取得しそれを他のエンティティと同じように RealityKitコンテンツに追加できますラベルを地球の下に表示するにはアタッチメントを地球エンティティの子として追加し少し下に配置します追加したい他のすべてのアタッチメントにもそれぞれに異なるタグを使用してこのプロセスを繰り返します Xcodeで見てみましょうこのサンプルのアプリでは 3つのアタッチメントをRealityViewに追加します地球の下にラベルを追加し月にもラベルを付けますそして潮汐に及ぼす月の軌道の影響を説明する短い文章を追加しますこれはSwiftUIの glassBackgroundEffectでスタイルづけます RealityViewのmakeクロージャにコンテンツに対応するエンティティを追加しますまず地球の下にearthAttachmentを追加します月にも同じことを行います最後に潮汐の説明をコンテナエンティティの左に追加しますアプリを構築して実行すると作成したアタッチメントがモデルの隣に表示されていますアタッチメントのデータの流れをおさらいしましょうアタッチメントはRealityViewのアタッチメントビュービルダーで始まりますここでRealityKitシーンに追加したい SwiftUIビューを追加できます RealityViewのmakeクロージャでそのアタッチメントをエンティティとして取得しシーンに追加します更新クロージャ内のエンティティを更新することもできますこのクロージャはSwiftUIビューの状態が変更した場合に呼び出されますこれはRealityViewで動的に変更するコンテンツに応答する場合に使用しますアタッチメントの使用方法の詳細については「Work with Reality Composer Pro content in Xcode」のセッションをご覧ください RealityViewアタッチメントはその他のUI要素のテキストコンテンツをシーンに追加するのに便利な方法ですさらに動画を追加してアプリをより魅了的なものにすることができますこれを行うには VideoPlayerComponentを使用します動画再生コンポーネントはRealityKitの新しいコンポーネントタイプで 3Dシーン内に動画コンテンツを埋め込む場合に使用しますご存知かと思いますがコンポーネントはエンティティに追加できる特定の動作を定義します VideoPlayerComponentを使って動画を再生するには最初に動画ファイルをリソースバンドルから読み込みます次にそれを使って AVPlayerインスタンスを作成しますこれでVideoPlayerComponentを作成できるようになります VideoPlayerComponentをエンティティに添付すると動画のアスペクト比に合致する正方形のメッシュが自動的に生成されますこの動作は SwiftUIのVideoPlayerや Core AnimationのAVPlayerLayerなど既存の動画再生APIと類似していますしかしRealityKitは 3Dフレームワークであるため動画は3D空間で移動したり配置したりできるようにメッシュのあるエンティティとして表現されます AV Foundationによりサポートされるすべての動画形式は VideoPlayerComponentで機能しますこれにはMV-HEVCを使用する 2D動画形式と3D動画が含まれます最後に VideoPlayerComponentは AVPlayerを介して提供されるキャプションを自動的に表示します 3D動画を含む自身の動画コンテンツを作成する方法については「Deliver video content for spatial experiences」のセッションをご覧ください RealityKitシーンに動画を追加するにはまず動画アセットへのURLを使用して AVPlayerItemを作成します次にAVPlayerを作成しますエンティティに作成したばかりのAVPlayerで初期化されたVideoPlayerComponentを追加します VideoPlayerComponentは動画のアスペクト比に基づいたサイズのメッシュを自動的に生成します RealityKitは実世界の単位で機能するため動画はデフォルトで高さが1メートルになります異なるサイズの動画にするにはエンティティをスケーリングします私は高さ40センチの動画にしたいのでエンティティを0.4で乗算しますこれで動画を再生する準備ができました現在のアイテムをAVPlayerItemに設定し AVPlayerで再生を呼び出しますこのコードでアプリを再構築して実行してみましょうアプリに動画エンティティをシーンに追加する「詳細」ボタンを追加しましたボタンをクリックすると不透明度コンポーネントと fromToByAnimationを使って動画にフェードインします例として動画のコンテンツに地球の潮汐に対する月の引力の役割を説明する短いクリップを作成しました見てみましょう月は地球を周回します月の引力は海に大きな影響を及ぼし月に向かってわずかに隆起させます VideoPlayerComponentはキャプションに対するシステム全体の設定を尊重しますアクセシビリティセクションにある「設定」アプリでオンにしてみましょう地球と月の間の絶え間ない相互作用により 1日に二度潮の満ち引きが起こりますまた VideoPlayerComponentはパススルーティントもサポートしますこの機能が有効になるとパススルーコンテンツは動画の色と一致するように調整されますこれはこのプラットフォームで TVアプリ内の映画やTV番組を視聴する場合に使用されるのと同じ処理ですパススルーティントを使用するには isPassthroughTintingEnabled プロパティを「true」に設定しますコンテンツタイプ視聴モード動画サイズなど VideoPlayerComponentのプロパティが変更された場合に通知を受けるようにVideoPlayerEventsをサブスクライブできますイベントをサブスクライブするには RealityViewコンテンツのサブスクライブ機能を呼び出しイベントタイプとエンティティを指定しますイベントハンドラクロージャ内のイベントに応答することができます VideoPlayerComponentの追加は 3Dシーンに最適です今のところアプリは地球と月のモデルを特徴としていますが宇宙を背景にして表示したいと思います宇宙に存在する月の軌道を部屋のマジックウインドウに表示できればすごくかっこよくなると思いますこれはポータルを使ってシーンをレンダリングすることで実現しますポータルはメッシュサーフェスを介して見ることのできる別世界へのオープニングを作成しますこの世界の中にあるエンティティは別の照明を使用しポータルの幾何学でマスキングされていますこの例ではRealityKitの特徴的な3つの機能を実演していますまず宇宙のシーンのレンダリングにはポータルが使用されています次にポータルの縁を装飾するためにパーティクルエフェクトが使用され最後に部屋の壁にポータルを配置するためにアンカーが使用されていますではポータルから始めましょうポータルを作成するには最初にWorldを作る必要がありますこれを行うためには Worldコンポーネントを持つシーンにエンティティを追加しますこのコンポーネントはそのエンティティツリーが別世界に属することを示しています Worldエンティティはポータルサーフェスを介してのみ見ることができますコンテンツをWorldに追加するにはエンティティをWorldエンティティの子として追加しますここでは空地球月のモデルに加え ImageBasedLightを追加して Worldの中の照明を定義します Worldエンティティのすべての子孫はこのWorldの中にのみ現れます次にポータルを作成しますそのためにはモデルコンポーネントのあるエンティティを追加しますモデルコンポーネントにはメッシュとマテリアルの 2つのプロパティがありますメッシュには円形の平面を生成してポータルの表面にしますマテリアルにはメッシュがポータルとして表示されるように新しいポータルマテリアルを割り当てますポータルをWorldとつなげるためにポータルコンポーネントをエンティティに追加し Worldエンティティのターゲットプロパティを設定しますこれによりポータルはマスクとして機能し Worldの中のコンテンツを明らかにしますこれをコードで見てみましょう RealityViewで makeWorldとmakePortalを実装する 2つの関数の呼び出しを追加しました makeWorld関数では Worldエンティティを作成しポータルのコンテンツを追加します makePortal関数ではポータルと今作成したWorldへのリンクを作成します最後にこの2つのエンティティを RealityViewのコンテンツに追加しますそれぞれの関数を詳細に見てみましょう makeWorld関数内にエンティティを作成し WorldComponentをアタッチしました次に EnvironmentResourceをロードし ImageBasedLightとして使用します ImageBasedLightコンポーネントと ImageBasedLight ReceiverComponentを使用してこれをWorldに適用します RealityKitの画像ベースの照明の詳細については「Explore rendering for spatial computing」のセッションをご覧ください次にWorldにコンテンツを追加します地球月空のモデルをロードして子としてWorldに追加しますこれらのエンティティはWorldの子であるためポータルを介してのみ見ることができますでは makePortal関数に移りましょうポータルを作成するにはまずメッシュが必要ですエンティティのモデルコンポーネントを作成してメッシュを作成しますポータルを円状にするためにディメンションが等しくコーナー半径の大きさが半分の平面を作成しますまた PortalMaterialを作成して ModelComponentのマテリアルとして使用します最後に先程作成したWorldエンティティで初期化されたポータルコンポーネントをアタッチしますこれによりポータルとWorldがつながりメッシュを介してWorldのコンテンツを見れるようになりますではパーティクルエフェクトでポータルの縁を装飾しましょうこれはRealityKitで提供される ParticleEmitterComponentで行いますパーティクルエミッタはRealityKitのさまざまな視覚効果を表現するのに使用できますスパークススノーインパクトエフェクトなどがそうですパーティクルエミッタは Reality Composer Proを使うか RealityKitを使用してランタイムで ParticleEmitterComponentを介して作成できますここでは Reality Composer Proを使用してパーティクルアセットを用意しましたこれを使って先程作成したポータルを装飾できますこれをシーンにロードし RealityKitを使用してランタイムでパーティクルプロパティを変更してみましょうパーティクルを経時的に更新するために ParticleTransitionSystemというカスタムシステムを作成しましたここでは EntityQueryを使用して ParticleEmitterComponentを持つエンティティを見つけますシステム更新内でクエリを実行し結果のエンティティを反復します各エンティティでupdateParticles 関数を呼び出しますこれは次に実装します RealityKitのカスタムシステムの詳細については「Build spatial experiences with RealityKit」のセッションをご覧ください updateParticles関数内で ParticleEmitterComponentをエンティティから取得します ParticleEmitterComponentにはパーティクルの外観と動作のさまざまな側面を制御する多くのプロパティが含まれていますここでエンティティのスケールに基づいて lifeSpanとvortexStrength プロパティを作成しますそうすることでエンティティのサイズが大きくなるとともにポータルでパーティクルがより速く回転するようになります最後にコンポーネントをエンティティに再割り当てして変更を適用しますこれで完了しましたパーティクルエミッタの異なるプロパティの詳細については「Meet Reality Composer Pro」をご覧くださいあともう少しでアプリの最終仕上げが完了します最後に部屋の壁のポータルを取り付けましょうこれはRealityKitのアンカーを使って行いますアンカーは壁や床または頭や手の近くにコンテンツを配置するために使用できます RealityKitのアンカーは .continuousと.once.の 2つのトラッキングモードをサポートします連続トラッキングモードを使用する場合アンカーエンティティは頭が動いた場合などアンカーとともに経時的に移動します 1回トラッキングモードを使用する場合アンカーエンティティは一度配置されると動かなくなりますエンティティが固定されたことを聞きたい場合は RealityKitで AnchoredStateChangedイベントをサブスクライブします 3Dコンテンツを配置するために親エンティティにアンカーを使うことは可能ですがアンカー自体が明確に変換されるのはユーザーのプライバシーを保護するためにアプリでは可視化されませんアンカーの変換にアクセスするには ARKitを使用する必要がありますこれについての詳細は「Meet ARKit for spatial computing」をご覧くださいアプリでアンカーを使用するにはイマーシブスペースで使用できるように最初にアプリを変更する必要がありますイマーシブスペースは特別なタイプのコンテナでアプリがウインドウ枠外でコンテンツをレンダリングするのを可能にしますこれを行うには ImmersiveSpaceを SwiftUIシーンに追加しますまた「.immersionStyle」修飾子を追加し「in: .mixed」に設定します ImmersiveSpace内に RealityViewを使用してアンカーされるコンテンツを配置しますイマーシブスペースの詳細については「Go beyond the window with SwiftUI」のセッションをご覧ください RealityView内でアンカーエンティティをポータルのコンテナとして使用できますアンカーエンティティをアンカーしたいコンテンツの表面のタイプの仕様で初期化しますここでは最小サイズが 1平方メートルの縦の壁にしたいと思います仕様に一致するアンカーが見つかると RealityKitはコンテンツを自動的に壁に配置しますこれで完了ですアプリを実行すると壁に配置されたポータルが表示されましたポータルとパーティクルからアンカーとアタッチメントまで RealityKitはイマーシブ体験を構築するためのさまざまな機能を提供してくれますでは今日のセッションの内容をおさらいしましょう RealityViewのアタッチメントは SwiftUIコンテンツをエンティティ階層内に埋め込み UI要素と3D要素の配置を可能にします VideoPlayerComponent ポータルパーティクルエフェクトは RealityKitのシーンを向上するための動的な要素です最後にアンカーは 3Dコンテンツを床や壁などの実世界の表面に配置することができます「Build spatial experiences with RealityKit」のセッションではエンティティコンポーネント RealityViewなどの主要な概念を説明しています「Work with Reality Composer Pro content in Xcode」では Reality Composer Proと RealityKitを使用してイマーシブアプリを構築するためのプロセスを説明しています RealityKitのこれらの新機能を使って皆さんが作成するアプリが楽しみですご視聴ありがとうございました ♪

import SwiftUI
import RealityKit

struct MoonOrbit: View {
    var body: some View {
        RealityView { content, attachments in
            guard let earth = try? await Entity(named: "Earth") else {
                return
            }
            content.add(earth)

            if let earthAttachment = attachments.entity(for: "earth_label") {
                earthAttachment.position = [0, -0.15, 0]
                earth.addChild(earthAttachment)
            }
        } attachments: {
            Attachment(id: "earth_label") {
                Text("Earth")
            }
        }
    }
}

8:03 - VideoPlayerComponent

public func makeVideoEntity() -> Entity {
    let entity = Entity()

    let asset = AVURLAsset(url: Bundle.main.url(forResource: "tides_video",
                                                withExtension: "mp4")!)
    let playerItem = AVPlayerItem(asset: asset)

    let player = AVPlayer()
    entity.components[VideoPlayerComponent.self] = .init(avPlayer: player)

    entity.scale *= 0.4

    player.replaceCurrentItem(with: playerItem)
    player.play()

    return entity
}

10:05 - Passthrough tinting

var videoPlayerComponent = VideoPlayerComponent(avPlayer: player)
    videoPlayerComponent.isPassthroughTintingEnabled = true

    entity.components[VideoPlayerComponent.self] = videoPlayerComponent

10:40 - VideoPlayerEvents

content.subscribe(to: VideoPlayerEvents.VideoSizeDidChange.self,
                      on: entity) { event in
        // ...
    }

13:12 - Portal

struct PortalView : View {
    var body: some View {
        RealityView { content in
            let world = makeWorld()
            let portal = makePortal(world: world)

            content.add(world)
            content.add(portal)
        }
    }
}

public func makeWorld() -> Entity {
    let world = Entity()
    world.components[WorldComponent.self] = .init()

    let environment = try! EnvironmentResource.load(named: "SolarSystem")
    world.components[ImageBasedLightComponent.self] = .init(source: .single(environment),
                                                            intensityExponent: 6)
    world.components[ImageBasedLightReceiverComponent.self] = .init(imageBasedLight: world)

    let earth = try! Entity.load(named: "Earth")
    let moon = try! Entity.load(named: "Moon")
    let sky = try! Entity.load(named: "OuterSpace")
    world.addChild(earth)
    world.addChild(moon)
    world.addChild(sky)

    return world
}

public func makePortal(world: Entity) -> Entity {
    let portal = Entity()

    portal.components[ModelComponent.self] = .init(mesh: .generatePlane(width: 1,
                                                                        height: 1,
                                                                        cornerRadius: 0.5),
                                                   materials: [PortalMaterial()])
    portal.components[PortalComponent.self] = .init(target: world)

    return portal
}

15:50 - Adding particles around the portal

public class ParticleTransitionSystem: System {
    private static let query = EntityQuery(where: .has(ParticleEmitterComponent.self))

    public func update(context: SceneUpdateContext) {
        let entities = context.scene.performQuery(Self.query)
        for entity in entities {
            updateParticles(entity: entity)
        }
    }
}

public func updateParticles(entity: Entity) {
    guard var particle = entity.components[ParticleEmitterComponent.self] else {
        return
    }

    let scale = max(entity.scale(relativeTo: nil).x, 0.3)

    let vortexStrength: Float = 2.0
    let lifeSpan: Float = 1.0
    particle.mainEmitter.vortexStrength = scale * vortexStrength
    particle.mainEmitter.lifeSpan = Double(scale * lifeSpan)

    entity.components[ParticleEmitterComponent.self] = particle
}

18:19 - Anchoring the portal

import SwiftUI
import RealityKit

struct PortalApp: App {

    @State private var immersionStyle: ImmersionStyle = .mixed

    var body: some SwiftUI.Scene {
        ImmersiveSpace {
            RealityView { content in
                let anchor = AnchorEntity(.plane(.vertical, classification: .wall,
                                                 minimumBounds: [1, 1]))
                content.add(anchor)

                anchor.addChild(makePortal())
            }
        }
        .immersionStyle(selection: $immersionStyle, in: .mixed)
    }
}

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

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

関連する章

リソース

関連ビデオ

WWDC23