カスタム環境でのよりイマーシブなメディア視聴体験の実現

カスタム環境でのよりイマーシブなメディア視聴体験の実現

Docking Region、Reverb、Virtual Environment ProbeなどのReality Composer Proのコンポーネントを使用して、メディア視聴体験を拡張できます。Reflections、Tint Surroundings Effect、SharePlay、Immersive Environment Pickerを活用して、よりイマーシブな体験を実現する方法を確認しましょう。

関連する章
- 0:00 - Introduction
- 1:48 - Immersive playback
- 3:33 - Custom Docking Region
- 7:56 - Media reflections
- 10:14 - Grounding the experience
- 14:34 - Immersive environment picker
- 15:33 - SharePlay
リソース
関連ビデオ

WWDC24
ダウンロード

こんにちは Jonathanです Appleの visionOS Programチームの一員です今日は Apple Vision Proでのメディア視聴体験に映画館のスケールと驚きをもたらす方法を紹介します
映画館で照明が暗くなった瞬間にかけられる魔法のようにカスタム環境に美しいメディアの反射を投影することでよりイマーシブな体験を実現できますここでは Destination Videoのサンプルにある新しいStudio環境での例を見ています照明が暗くなった後ユーザーの手が環境の照明に合うようにパススルーを色調整したりリバーブプリセットを設定して環境が音に包み込まれるようにすることで視覚的な雰囲気を高めることができますメディアと環境がスムーズに切り替わっているのがわかりますか？また複数のバリエーションを提供してシーンの外観と雰囲気を多様化しながらシステムの照明機能と影の統合をカスタム環境での視聴体験全体の基盤にすることができます
このセッションではよりイマーシブなメディア視聴体験を構築するための基盤について説明します次に Reality Composer Proの新しいカスタムドッキングコンポーネントを使用しカスタム環境でのビデオ再生に最適な場所を定義する方法とカスタム環境で再生されるビデオからのメディア反射について説明しますさらにビジュアルとサウンドを使用してカスタム環境全体の体験の基盤を構築する方法について説明しますその後イマーシブ環境ピッカーを使用してカスタム環境を見つけやすくする方法を紹介します最後に SharePlay対応アプリで環境を同期し複数のユーザーがイマーシブな視聴体験を共有できるようにする方法について説明しますまず空間とメディア視聴体験の基本的な要素から始めましょう
サイズや位置を変更できるウインドウ内でのメディア視聴はそれ自体が素晴らしい体験ですが Apple Vision Proのイマーシブな機能はそれ以上のものを実現しますビデオ視聴体験をよりイマーシブなものにするにはまずimmersiveSpaceシーンタイプから始めて AVKitの機能を活用する必要があります immersiveSpaceシーンタイプはメディアアプリがユーザーにカスタマイズ可能な段階的イマーシブ感を提供できるため非常に効果的ですつまりユーザーはApple Vision Proの Digital Crownを回してイマーシブのない状態からフルイマーシブまで希望するイマーシブレベルを設定できます immersiveSpaceシーンタイプには他にも利点があります例えばカスタムの色合いやパススルーの明るさなどですがこれらについてはこのセッションの後半で説明します
イマーシブ空間のカスタマイズについて詳しくはセッション「Dive deep into volumes and immersive spaces」をご覧ください
visionOSで素晴らしいメディア視聴体験を実現するには AVKitの機能特にAVPlayerViewControllerを活用することをお勧めしますこれによりシステムとの統合でビデオ再生機能が強化されます
AVPlayerViewControllerを使用すると HLSストリーミングがサポートされ TVやミュージックなどのシステムアプリに一致する使い慣れた再生体験を簡単に提供できます再生コントロールが簡素化されるためユーザーはメディアに集中できます visionOSでは AVPlayerViewControllerを全画面で表示すると様々な優れた機能を利用できますその1つはシステムのドッキング動作への関与ですドッキングするとビデオ画面が固定位置に配置されるためイマーシブ空間でのフルスクリーン体験が向上しますデフォルトではドッキング位置はシステムが決定しますが Custom Docking Regionを指定することでカスタマイズできるようになりましたカスタムドッキング領域の使用については Destination Videoサンプルで確認できますこのサンプルはAVKitと ImmersiveSpaceの基盤で構築されています Reality Composer Proの Docking Regionコンポーネントを使用してビデオをカスタム環境の最適な場所に配置する方法を説明しますここでは Reality Composer Proを使います 3Dコンテンツを準備して体験を視覚化するには Reality Composer Proを使う必要があります Reality Composer Proを使用してこの新しいプロジェクトに Video Dockプリセットを追加します左側はScene Navigatorです Scene Navigatorの下部には挿入ボタンであるプラス記号があります挿入ボタンを選択しメニューでプリセットを選択します
ビューポートにVideo Dockプリセットの一部が表示されていますビューポートを使用すると 3Dシーンの視覚化ナビゲートプレビューを行えますメニューの Frame Sceneを使用すると Video Dockプリセット全体がよく見えるようになります Scene Navigatorに戻り Video Dockエンティティを展開して Playerエンティティがあることを確認します
Playerエンティティを選択するとインスペクタの右側に新しいプロパティが表示されますインスペクタでは位置や回転など Playerエンティティのプロパティを簡単に編集できます
Playerエンティティのインスペクタの下部には Docking RegionコンポーネントもありますここでDocking Regionをカスタマイズできます
Docking Regionをカスタマイズする前にメニューでを選択します
これによりカメラが移動して原点が見えるようになります
immersiveSpaceはシーンなので暗黙的に独自の座標系を定義します immersiveSpaceに配置するものはすべてその原点を基準にして相対的に配置されます immersiveSpaceの原点は immersiveSpaceが最初に開かれたときユーザーの下つまり足元近くにありますビューポートの中央に dockingRegionが表示されています dockingRegionの位置によってビデオプレーヤーの位置が決まります
原点を基準にして dockingRegionを配置しましょう
インスペクタに戻るとで幅プロパティを確認できます Docking Regionの幅が定義するのは境界領域で 2.4:1のアスペクト比を使用したメディア再生の最大サイズです最大幅より大きいビデオは境界領域内に収まるようにサイズ変更されます幅プロパティを変更すると Docking Regionのサイズをカスタマイズできますご覧のとおり Docking Regionの幅を変更すると高さもそれに従います
これでDocking Regionの幅と高さが広くなったので Playerエンティティを上に移動させる必要があります位置のTransformを変更してエンティティを上げますプレーヤーは地面の少し上にあると快適で映画館のスクリーンのように感じられます
これはプロジェクトの始まりにすぎませんもっと完成度の高いものを見てみましょう Destination Videoサンプルには Studioという名前のフォルダがありその中にReality Composer Pro プロジェクトがあります Studioプロジェクトを開いてセットアップを表示しメニューでを選びプレビューできるようにします
StudioのDocking Regionの配置を見るとユーザーとメディア再生との間にほとんどオブジェクトがないことがわかりますその目的はユーザーにクリアな視界を提供することです
Studioには対称性があり Docking Regionが空間のこの位置にあることには建築的な思考が働いていますこの配置は空間を際立たせメディア再生を部屋に適合させよりイマーシブな体験を提供することを目的としています
Docking Regionに対応するようにカスタム環境をデザインしてください長時間の視聴中に負担や不快感が生じないように快適な視聴角度を提供することをお勧めします Reality Composer Proはプレビューとして役立ちますが Apple Vision Proで実際の環境とドッキングの配置を必ず確認してくださいモニターとApple Vision Proではスケールとレイアウトの認識が大きく異なる場合があるためデバイスでテストするのが一番です dockingRegionは理想的な位置にあるのでビデオ再生がカスタム環境にどのように反射するかを見てみましょう
Destination Videoに戻ると Studioサーフェス上のメディア反射はメディアが再生されている場所を示しこの空間にメディアを固定するのに役立ちますメディア反射をカスタム環境に合わせて調整するとバーチャル空間のどこでビデオが再生されているかをユーザーが理解しやすくなります
Reality Composer Proの ShaderGraphノードには 2種類のメディア反射があります鏡面反射と拡散反射です反射によりメディアコンテンツとバーチャル空間の間に相互作用が生じ現実感とイマーシブ感が高まりますこれらの反射を奥行きの手がかりとして使用してユーザーがカスタム環境の画面の位置を理解できるようにしますこれによりビデオ再生に集中できます鏡面反射はビデオコンテンツを直接反射するため金属、鏡、水など非常に光沢のある表面に適しています
メディアの鏡面反射を設定する場合必要なのはシーン内のdockingRegion コンポーネントを持つエンティティと Reflection_Specularノードが接続された表面上のマテリアルだけです RealityKitは dockingRegionの位置と地面のテクスチャ座標を使用して反射を計算し反射されたメディアを表面にレンダリングします拡散反射はビデオコンテンツのソフトな減衰を提供し
木製の床やコンクリートのようなより粗くて有機的な表面に適しています Video Dockプリセットで提供されている実装はほんの一例です Docking Regionや地面エンティティを移動するまたは独自のメッシュを使用する場合は Reflection_Diffuseのテクスチャ座標を再計算しそのデータをReality Composer Proにインポートする必要があります
Studioは拡散反射を使用します減衰がソフトなほど床のマテリアルプロパティに適しているからです Studioには鏡面反射が含まれていますがあくまでデモンストレーション目的ですメディアと環境を補完しながら邪魔にならないようによりバランスの取れた方法で反射を統合する例については visionOSシステム環境を確認してください学ぶべきことはまだ沢山あるので Destination Videoサンプルと補足資料をご覧ください鏡面反射を有効にして拡散反射を構成する方法について詳しく説明しています次にビジュアルとサウンドを使用してカスタム環境全体の体験の基盤を構築する方法について説明しますいくつかの新機能を使用します Virtual Environment Probe BrightnessとTint Reverbなどです Virtual Environment Probeから始めましょう
Virtual Environment Probeは色の変化と照明の強度の観点から位置を記述しますシステムはこの情報を使用して物理ベースのレンダリングマテリアルを自動的にシェーディングし光がオブジェクトから反射する様子を正確に近似しますプローブを使用すると ImmersiveSpace内のオブジェクトに環境照明を当てることができます段階的なイマーシブスタイルで環境を作成している場合このバーチャル環境照明は ImmersiveSpace外のオブジェクトの現実世界の照明を徐々に置き換えます例えばこの金属球は Studioと現実世界を取り巻く環境が混ざり合ったものを反射していますこのエフェクトは段階的イマーシブで自然に見えるリアルなオブジェクトです
またシーンが2つのバリアントをサポートしている場合例えばDestination Videoの暗いStudioと明るいStudioをサポートしている場合 2つの事前生成された環境リソースとそれらの間のブレンド係数を使用して Virtual Environment Probeを構成できますこの場合暗いリソースと明るいリソース間のスムーズなトランジションをアプリコードが担いイマーシブ感の混合をシステムが担いますトランジションは短くすることをお勧めします visionOSシステム環境では暗いリソースから明るいリソースへのトランジションは1.5秒です次はBrightnessとTintですカスタム環境の外観に応じてユーザーの手の照明を環境照明とうまく融合させたい場合があります映画館で照明が暗くなるような感じです visionOSでは色合いと明るさをカスタマイズしてユーザーの周囲環境とメディア再生の境界をぼかしながらユーザーの手がイマーシブ体験に属しているように見せることができます
Studioの暗いバージョンに合わせて手の外観が変化しているのがわかりますか？これによりカスタム環境のイマーシブ感が高まり視聴体験に集中できます
Destination Videoの immersiveContentBrightnessと surroundingsEffectのコードサンプルを見てメディアアプリでこれらの機能をどのように使用するかの参考にしてくださいユーザーの気を散らすことなくイマーシブ感を高める微妙な色合いを試してみてくださいビジュアルを改善したことで環境の見た目がよくなりましたさらにReality Composer Proの新しいReverbコンポーネントを使って作成した空間サウンドとシステムサウンドをカスタム環境により適合させイマーシブ感をいっそう高めることもできます
現実の世界では音は反響し人の耳に届く前に壁や家具に跳ね返りますデフォルトではvisionOSは人の現実世界の環境の音響をシミュレートすることで空間オーディオソースを反響させます
反響はバーチャル環境でもシミュレートできます Mount Hoodシステム環境を訪れたことがあるなら夜のカエルの鳴き声を聞いたことがあるでしょうこれらの空間サウンドには屋外環境をシミュレートするリバーブがありますこれでカスタム環境の空間サウンドとシステムサウンドにリバーブを適用できるようになりましたリバーブを有効にするにはインスペクタのボタンを使用して新しいプロジェクトに Reverbコンポーネントを追加します
次にインスペクタに移動し最適なリバーブプリセットを選択しますプリセットは高品質で自然なリバーブ設定の厳選されたセットです共鳴を追加しカスタム環境に似た環境で空間サウンドを聞く体験をシミュレートしますカスタム環境でリバーブプリセットを選択することをお勧めしますカスタムオーディオがない場合でもこれを選択することでシステムはプリセットを使用して UIやボタンなどのシステムサウンドを空間化できますこれらのシステムサウンドは実行時に存在するオーディオソースです
例えば微妙なリバーブを適用して最適なリスニング体験を追加するには Medium Room (Treated)プリセットを使用しますカスタム環境が屋外スペースの場合は Outdoorプリセットを使用しますまたは大規模な屋内環境の場合は Very large roomリバーブプリセットを使って大規模に展開しますこれはStudioで使用されるプリセットですリバーブの実装と調整方法の詳細については「Enhance your spatial computing app with RealityKit audio」セッションをご覧くださいカスタム環境でメディア再生のイマーシブ感を高める方法を習得したので次はImmersive Environment Pickerを利用して visionOSシステム環境と同じリストにカスタム環境を表示する方法を詳しく見ていきましょう Immersive Environment Pickerに Studio環境のDestination Videoの新しいセクションが追加されました
Studioを選択するとこの環境が開きメディアがDocking Regionにドッキングされますこのリストにカスタム環境を追加することもできますタイトルや画像などのメタデータでカスタム環境を記述して宣言するだけでユーザーがドッキングしたときに環境を認識できるようになります
ビューで.immersiveEnvironmentPicker 修飾子を使用してそのビュー内のビデオプレーヤーにイマーシブ環境を追加しますここで各カスタム環境がピッカーにどのように表示されるかを宣言できます各環境にはタイトル、画像、選択されたときに開くイマーシブ空間を含めます
SharePlayについて説明しますすでにSharePlayを使用してメディアを同期している場合は AVKitによって環境の状態も同期されるようになりイマーシブな視聴体験をさらに共有できるようになります仕組みを見てみましょうこのコードスニペットでは GroupSessionを使って共有可能なコンテンツをデバイス間で同期しますセッションでメディアを同期するには AVPlayerのAVPlaybackCoordinatorに渡します同じセッションで視聴環境を同期するにはまずAVKitとGroupActivitiesの両方をインポートし次にセッションをAVPlayerViewControllerの AVGroupExperienceCoordinatorに渡しますこれでアクティビティ参加者がフルスクリーンで視聴するときに同じ視聴環境を共有できます
ここまで Immersive SpaceシーンタイプとAVKitを再生体験の基盤として使用する方法 Custom Docking Regionとメディア反射を使用してイマーシブ感を高める方法 Virtual Environment Probe、Reverb BrightnessとTintを使用して体験の基盤を構築する方法を紹介しましたこれらの機能を使用してイマーシブ感を高めるとユーザーはその空間にいるように感じ意図したとおりのリアルな体験を楽しんでもらうことができますユーザーが気を散らすことなく体験に集中できるようにメディアをはっきりと快適に見えるようにしてくださいまたImmersive Environment Pickerと SharePlayの使い方も紹介しましたこのセッションがよりイマーシブ感のあるメディア再生体験を実現するための入門書として役立つことを願っています Destination Videoサンプルと関連するセッションを詳しくご覧ください皆さんが構築するイマーシブなカスタム環境でメディアを視聴するのを楽しみにしています

15:14 - Add environments to the Immersive Environment Picker

WindowGroup {
            ContentView()
                .immersiveEnvironmentPicker {
                    ForEach(viewModel.environmentItems) { item in
                        Button(item.title, image: item.thumbnail) {
                            Task { 
                                await openImmersiveSpace(id: item.id)
                            }
                        }
                    }
                }
        }

15:47 - Synchronization of an environment state using SharePlay

import AVKit
import GroupActivities

   for await session in MyActivity.sessions() {
        
        // join the session, activate the activity, etc.

        playerViewController
            .player?
            .playbackCoordinator
            .coordinateWithSession(session)

        playerViewController
            .groupExperienceCoordinator
            .coordinateWithSession(session)
    }

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

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

関連する章

リソース

関連ビデオ

WWDC24