Add light to a RealityView on visionOS

I am working on a fully immersive RealityView for visionOS and I need to add light from the sun to my scene. I see that DirectionalLight, PointLight, and SpotLight are not available on visionOS. Does anyone know how to add light to fully immersive scene on visionOS?

My scene is really dark right now without any additional light.

Accepted Reply

Hello, you could make use of an ImageBasedLightComponent. I recommend that you watch this WWDC video, which covers image-based lighting in RealityKit on visionOS: https://developer.apple.com/videos/play/wwdc2023/10095/?time=160

Replies

Hello, you could make use of an ImageBasedLightComponent. I recommend that you watch this WWDC video, which covers image-based lighting in RealityKit on visionOS: https://developer.apple.com/videos/play/wwdc2023/10095/?time=160

@gchiste Do you have other examples of IBL that I can reference to try and understand how to better add lighting to my scenes for the full immersion mode?

I have a scene with a bunch of lights in Blender, but none of them auto translate to IBL and I'm not sure how/where to start learning about how to convert my Blender lights to IBL for visionOS.

I can't find any other examples to better understand how to create an IBL for a lantern here or the sun there as I can see it in my Blender scene. Any official direction from Apple would be greatly appreciated!

I used this code that I got from https://blog.learnxr.io/xr-development/getting-started-with-apple-vision-os-development-part-2

extension Entity {
    /// Adds an image-based light that emulates sunlight.
    ///
    /// This method assumes that the project contains a folder called
    /// `Sunlight.skybox` that contains an image of a white dot on a black
    /// background. The position of the dot in the image dictates the direction
    /// from which the sunlight appears to originate. Use a small dot
    /// to maximize the point-like nature of the light source.
    ///
    /// Tune the intensity parameter to get the brightness that you need.
    /// Set the intensity to `nil` to remove the image-based light (IBL)
    /// from the entity.
    ///
    /// - Parameter intensity: The strength of the sunlight. Tune
    ///   this value to get the brightness you want. Set a value of `nil` to
    ///   remove the image based light from the entity.
    func setSunlight(intensity: Float?) {
        if let intensity {
            Task {
                guard let resource = try? await EnvironmentResource(named: "Sunlight") else { return }
                var iblComponent = ImageBasedLightComponent(
                    source: .single(resource),
                    intensityExponent: intensity)

                // Ensure that the light rotates with its entity. Omit this line
                // for a light that remains fixed relative to the surroundings.
                iblComponent.inheritsRotation = true

                components.set(iblComponent)
                components.set(ImageBasedLightReceiverComponent(imageBasedLight: self))
            }
        } else {
            components.remove(ImageBasedLightComponent.self)
            components.remove(ImageBasedLightReceiverComponent.self)
        }
    }
}

For my sunlight I used this image that I put into Sunlight.skybox.

That added light to my scene above.

I noticed the other day on Xcode 15.1.0b2 if you create a new VisionOS app project with a progressive immersive scene, it includes code with a light box example.

    var body: some View {
        RealityView { content in
            // Add the Model content
            if let modelEntity = try? await Entity(named: "Victorian_Living_Room", in: realityKitContentBundle) {
                content.add(immersiveContentEntity)

                // Add an ImageBasedLight for the immersive content
                guard let resource = try? await EnvironmentResource(named: "shiwai_a") else { return }
                //An ImageBasedLightReceiverComponent has been set up for this entity, which enables the entity to receive image-based lighting.
                let iblComponent = ImageBasedLightComponent(source: .single(resource), intensityExponent: 0.25)
                modelEntity.components.set(iblComponent)
                modelEntity.components.set(ImageBasedLightReceiverComponent(imageBasedLight: modelEntity))

                
            }
        }
    }
}

@mzoob Can you please share the image you used for "shiwai_a" ? I'm having difficulties creating the correct .exr/.hdr/.png System IBL Texture to achieve the same lighting as I see it in Blender in my room & garden. 😅