【visionOS】RealityViewで描画した3Dモデルに影をつける

本記事ではRealityViewで描画した3Dモデルに影をつけるを紹介します。
(※技適特例届け出済み)

はじめに

WWDC2023のセッションにある『空間デザインの原則(Principles of spatial design)』では、影の重要性について以下のように述べられています。

Depth needs to be reinforced with visual cues like light and shadow. Some objects emit light, like the movie screen we just saw. The light shines onto the floor and ceiling, highlighting its position in the room. Any object that appears to emit light should shine color onto nearby objects. And most other objects should cast a shadow, like this window over the table. This grounds them and makes them look more integrated into the space. Any custom objects in your app should cast shadows too

引用: Principles of spatial design - WWDC2023

影は、物体が実際の空間に存在しているように見せるためにも重要な役割を果たします。空間デザインを行う際には、影の効果を意識することが大切になってきます。

デモ

影なし

影あり

オブジェクトに影を追加することで、スニーカーの奥行き感と現実感が向上しました。影は、3Dモデルをより自然に空間に統合するために重要な役割を果たしていることがわかります。

実装

ModelEntityにGroundingShadowComponent(castsShadow: true)をセットするだけで影が追加されます。

var body: some View {
    RealityView { content in
        if let entity = try? await ModelEntity(named: "sneaker_pegasustrail") {
            ...
            // GroundingShadowComponent(castsShadow: true)を追加する
            entity.components.set(GroundingShadowComponent(castsShadow: true))
            ...
            content.add(entity)
        }
    }
}

※3Dモデルはこちらのギャラリーからダウンロードできます。

参考資料