LoginSignup
6
1

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

Last updated at Posted at 2024-05-10

本記事では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

スクリーンショット 2024-05-10 11.48.40.png
引用: Principles of spatial design - WWDC2023

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

デモ

影なし

スクリーンショット 2024-05-09 19.51.41.png

影あり

スクリーンショット 2024-05-09 19.51.00.png

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

実装

ModelEntityGroundingShadowComponent(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モデルはこちらのギャラリーからダウンロードできます。

参考資料

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1