空間コンピューティングにおけるレンダリングの詳細

空間コンピューティングにおけるレンダリングの詳細

RealityKitレンダリングでvision OSにおけるアプリとゲームの外観や感触を向上させましょう。コンテンツの照明をカスタマイズし、grounding shadowsを足し、tone mappingを制御する方法を学びます。またこのプラットフォームにおける2つの鍵となる処置のベストプラクティス"rasterization rate maps"と"dynamic content scaling"をご紹介します。

関連する章
- 0:00 - Introduction
- 1:15 - Lighting and shadows
- 5:05 - Materials
- 10:09 - Rasterization rate maps
- 13:13 - Dynamic content scaling
- 16:01 - Wrap-up
リソース
- Rendering at Different Rasterization Rates
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
ダウンロード

♪ ♪ ♪ こんにちは！ RealityKitチームのエンジニアのIvaですようこそ「Explore rendering for spatial computing」へ RealityKitは3Dモデルのレンダリングやアニメーションシミュレーションのフレームワークです RealityKitの強力な特徴の一つがコンテンツへのリアルなレンダリングの適用です RealityKitのレンダリング能力を活用しコンテンツの見た目を充実させるため空間コンピューティングのためのアプリ開発においてレンダリングにおける考慮点をシェアしたいと思いますまず3Dコンテンツの lightingとshadowsからですそして新しいRealityKit materialsについて次にシステム性能を向上させる rasterization rate mapsをご紹介しこの最適化にコンテンツが適応するようどう調整すべきかについて説明します最後にインターフェイスを常に鮮明にさせる dynamic content scalingをご紹介しますまずはlightingとshadowsからですもしiOSとmacOSのRealityKitを熟知しているならほとんどの知識が空間体験の構築にも当てはまりますコンテンツをリアルに見せる image-based lightingが RealityKitに登場しました Image-based lighting及びIBLは右側のようなテクスチャーでリアルな反射を作り出します Shadowsはobjectsがお互いどのような位置かを理解させてくれます新機能を見る前に image-based lightingの構成要素を見てみましょう IBLには2つの主要要素があります ARKitに供給され部屋の物理空間に特有の Environment probe textureと OSに含まれるsystem IBL textureです System IBL textureはコンテンツがどの環境でもよく見えるようhighlightsを加えますこれらの要素が足され combined IBL textureになります環境がアクティブなら combined IBL textureにも影響があります今年からRealityKitに lightingのカスタマイズのため system IBL textureをオーバーライドできるようになりますでは例を見てみましょうこれは「Hello World」という太陽系を探検できるものですデフォルトではRealityKitが system IBLで灯りを照らしますしかし新しいIBLを新しいIBL componentに適用すれば system IBLに変わり surrounding immersive environmentで objectsを照らしますその過程をお見せしましょうまず3Dコンテンツを読み込みますこの場合衛星モデルです次にSunlightという環境リソースを読み込みます地球を取り囲む太陽と星々のイメージが含まれていますモデルと環境リソースの両方に IBLの設定が必要ですので読み込みが完了するのを待ちます次にImageBasedLightComponentを足します今読み込んだ環境リソースを参照します最後にImageBasedLightReceiverComponentを衛星に足しますこれらのreceiver componentsをほかのものにも足し同じIBLを使って照らすことができますこのようにRealityKitでは簡単に lightingをカスタマイズできます次にどうやってshadowsを足すか見てみましょうではこのような3Dの花瓶を宙の平面に置く簡単な例を見てみましょう Shadowsがオフの状態では花瓶と平面の位置関係がわかりませんしかしRealityKitの grounding shadowを足せば花瓶が平面中央の上にあることがわかりますではこれをコードで見てみましょうまず花瓶のモデルを読み込みますここではflower_tulipがこのプロジェクトの 3Dモデルの名前です次にgrounding shadow componentを足します castsShadow flagをtrueに設定しますそれだけです！これで花瓶にgrounding shadowsができます簡単でしょう？ Grounding shadowsは3Dモデルと物理的環境の上に現れますシーンの照明にcustom IBLを使い grounding shadowsを足すことで objectsのルックスがよくなりますが materialsの調整で直接objectsに手をつけることもできます macOSとiOSで利用できるたいていのRealityKit materialsは xrOSでも利用できますそれらを見てみましょうよく使用されるmaterialは PhysicallyBasedMaterialです RealityKitのPhysicallyBasedMaterialは光に反応しプラスチックやメタルなど様々な実世界のmaterialsを描写することができます SimpleMaterialも光に反応しますが小さいパラメータの部分集合を使用します簡潔な実験に向いています UnlitMaterialは光に反応しませんつまり光の状況が変わっても一定のルックスを維持します VideoMaterialはUnlitMaterialの変種でその表面にmovie fileをマップできますこれらのmaterialsに加えRealityKitに新しくShaderGraphMaterialが加わります新しいShaderGraphMaterialは Reality Composer Proで作成するか MaterialXファイルから読み込めます ShaderGraphMaterialについて詳しくは「Explore materials in Reality Composer Pro」をご覧くださいすべてのmaterialsのcolor outputは tone mappingという特別のステップを通します Tone mappingはmaterialsのcolor outputsにデフォルトとしてRealityKitが適応する transformationです数々のテクニックを使いより自然な色を可能にしますその一つが1以上の値をvisible rangeにリマッピングします例を使って見てみましょうここにtone mappingをオフにした TVの3Dレンダーがあります画面に非常に明るいtextureを適用しましたここでtone mappingをonにすればこれらの花びらのように明るい部分の詳細が鮮明になります Tone mappingは通常問題なく美しくレンダリングしますが場合によって objectの実際の色を表示したい場合は tone mappingをオプトアウトせねばなりません例を見てみましょうここに信号機を示す簡単なアプリがあり「Stop」「Wait」「Go」のラベルのボタンがあります信号機自体は3DモデルでボタンはSwiftUIで追加されましたランプとボタンの色をマッチさせるためランプにunlit materialを使用しますこれはunlit materialsは照明の状況に関わらずルックスを一定に保つからですしかしunlit materialのoutputはまだtone mappingに影響されます RealityKit materialsに対しデフォルトでオンだからですですのでSwiftUIボタンとランプのmaterialに同じ色が適用されても少し違って見えるかもしれませんこのイメージは tone mappingがオンの状態でランプのmaterialに tone mappingをオフにした場合をお見せしますランプとボタンの色が正確にマッチしましたもう一度ランプmaterialの tone mappingをトグルしますこれがtone mappingがオンの状態これがオフの場合ですではコードサンプルで tone mappingをコードでトグルする方法を見てみますまず信号機モデルを読み込みますこのプロジェクトではtraffic_lightが信号機の3Dモデルです次にred_lightというentityを探しますこのentityは信号機の一番上のランプですいざentityが見つかれば model componentにアクセスします次に新しいunlit materialを作ります希望する色と applyPostProcessToneMapという新しいBoolean parameterをパスします Tone mappingをオフにするためこのBoolean parameterを falseに設定します最後にmodel componentの materialを取り換え model componentを entityに当て直しますランプそれぞれに行いますこれでボタンとランプの色がマッチするはずです applyPostProcessToneMap flagをシーンでの実際の色の表示に使用できますこれはRealityKitでメニューやヘッドアップ表示の作成に役立ちますこの新しいpropertyはまた Reality Composer Proの material editorでも表されます次は質について見てみましょうまず空間コンピューティングの rasterization rate mapsからですヘッドセットの画面は高画質で OSは1秒に何度も画面を更新せねばなりません絵を使って説明します既にご存知の通りヘッドセットはどこに視線が向いているかを感知することができますこれはこの人物が目を右に動かし中央に戻した場合のシミュレーションです黄色い円は焦点の中央を示していますその周辺がglowでハイライトされその周りは暗くなっています Rasterization rate mapは暗くなったエリアでの計算を少なくしますご覧のように常にハイライトされたエリアはその周辺より小さいエリアですこれによりシステムはメモリと性能の削減を実現できます RealityKitではこの最適化が自動的に行われますシステム性能が大幅に向上しますが場合によってはコンテンツを調整し最適化がうまくいくようせねばなりません例えばここにシュロの葉のアセットがあります画面中央に置くと鮮明に詳細が見えますしかし左側に動かし先程の目の動きを実行するとシュロの葉がチラチラしますこのチラチラは視線を示す黄色い円が画面の右端に寄ると非常に激しくなりますこのチラチラは rasterization rate mapにより視点の焦点周辺を高画質でレンダーし視点が遠ざかるためシュロの葉の周辺を低画質でレンダーするために生じますこのチラチラはコンテンツのパラメータを調整すれば少なくなりますそれを見てみましょう先程のシュロの葉のアセットに赤のwireframe overlayを乗せていますたくさんの小さい三角形があります周囲でチラチラするのはこの三角形のためですこの三角形を大きくし詳細をopacity textureに保存することでチラチラを減らすことができますアセットの調整後のシミュレーションです調整後のモデルはよくなりましたこれはアセットが読み込まれる時 RealityKitが低画質のopacity mapを自動的に生成するためです低画質版のtextureは mipmapsと呼ばれ低画質エリアのルックスを向上させるため GPUが自動的にこれを使用します Rasterization rate mapsの詳細は documentationである「Rendering at Different Rasterization Rates」をお読みください Rasterization rate mapsに似た dynamic content scalingと呼ばれるテクニックがありこれはSwiftUIで書かれたコンテンツのルックスを自動的に向上させますでは見てみましょうここに基盤上に月々をリストで記したアプリがあります各月はテキストラベルで示されています視点がJuneに行くとシステムはその周辺のテキストを最高レベルの詳細でラスター化します Juneの周辺の青いエリアはやや詳細が減少したレベルでラスター化されますがまだ高画質を保っていますしかし紫で示されたエリアは人間の視覚システムが周辺では詳細を捉えず目立たないためかなり詳細が落ちたレベルでラスター化されます見ているものにより詳細度が変わるラスタライゼーションを dynamic content scalingと呼びますコンテンツを正しいスケールで描くため dynamic content scalingでシステムは鮮明さを保ちます Dynamic content scalingはラスター化されたコンテンツに比例するメモリに影響しますつまりどこを見ているかによってテキストラベルは違ったサイズにスケーリングされるということです例えばここにあるJuneのラベルは一番大きく最も多くの画質と詳細を持っていますその周りの8つの月 JanuaryやFebruaryなどは詳細が少し欠けています最後に3つの月 AprilとAugustとDecemberは視点から最も遠くにありますこのグループはメモリに最も小さいイメージで描かれますではdynamic content scalingをどう作動させるか見てみましょう UIKitとSwiftUIを使用しているならあなたのアプリは自動的にこのテクニックを使用しますもしCore Animation frameworkを使用しているなら dynamic content scalingを作動させる新しいAPIがありますこのAPIを見てみましょう Dynamic content scalingは CALayerのプロパティを wantsDynamicContentScalingで trueにして設定しますこのテクニックは高画質でのラスター化に依拠するのでbitmapベースのコンテンツへの使用はお勧めできません Dynamic content scalingのお勧めリストは developer.apple.comにありますそれではおさらいです RealityKitアプリに image-based lightsと grounding shadowsを加える方法を学びましたそしてShaderGraphMaterialなど空間体験に利用できる materialsをレビューしましたまたunlit materialsにおける tone mappingの調整について学びました次にrasterization rate mapsが空間コンピューティングでどう使用されるか学び視界周辺での3Dモデルのチラチラを減らす方法も検証しました最後にdynamic content scalingとその使い方を学びました今年のリリースを使ってみなさんがxrOSでどのような美しい空間体験を作るか楽しみにしていますありがとう ♪

RealityView { content in
    async let satellite = Entity(named: "Satellite", in: worldAssetsBundle)
    async let environment = EnvironmentResource(named: "Sunlight")

    if let satellite = try? await satellite, let environment = try? await environment {
        content.add(satellite)

        satellite.components.set(ImageBasedLightComponent(
           source: .single(environment)))

        satellite.components.set(ImageBasedLightReceiverComponent(
           imageBasedLight: satellite))
   }
}

4:28 - Grounding shadows

RealityView { content in
    if let vase = try? await Entity(named: "flower_tulip") {
        content.add(vase)

        vase.components.set(GroundingShadowComponent(castsShadow: true))
    }
}

8:48 - Disable tone mapping

RealityView { content in
    if let trafficLight = try? await Entity(named: "traffic_light") {
        content.add(trafficLight)

        if let lamp = trafficLight.findEntity(named: "red_light") {
            if var model = lamp.components[ModelComponent.self] {
                let material = UnlitMaterial(color: .init(color), 
                                             applyPostProcessToneMap: false)

                model.materials = [material]

                lamp.components[ModelComponent.self] = model
            }
        }
    }
}

15:34 - Dynamic content scaling

// Enable dynamic content scaling on CALayer with:

var wantsDynamicContentScaling: Bool { get set }

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

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

関連する章

リソース

関連ビデオ

WWDC23