paint-brush
VisionOS Development: Tips and Tricks for Building Apple Vision Pro Appsby@dvaluev
2,845 reads
2,845 reads

VisionOS Development: Tips and Tricks for Building Apple Vision Pro Apps

by Dmitrii ValuevApril 15th, 2024
Read on Terminal Reader
Read this story w/o Javascript

Too Long; Didn't Read

Vision Pro is a new version of Apple's virtual reality operating system. It allows users to interact with their virtual world in a more immersive way. Here are some tips and tricks to help you make your own application. Use these tips to make your application significantly different from the rest of VisionOS.
featured image - VisionOS Development: Tips and Tricks for Building Apple Vision Pro Apps
Dmitrii Valuev HackerNoon profile picture


Recently, Apple released the Vision Pro, and I was fortunate enough to become a proud owner. Since then, I've been deeply engaged in developing my application and exploring various apps and trends within the Vision Pro App Store.


One thing that grabbed my attention is that new apps are coming out every day, but only a few fit well with the immersive virtual reality experience. I guess many developers struggle to find documentation and examples for Vision Pro features. However, utilizing the capabilities of Vision Pro can set your application apart and provide users with an enhanced experience.


In this article, I'll be sharing some tips and tricks I've uncovered while crafting my application. These tips will not only help your application to stand out but also ensure its seamless integration and native feel within VisionOS.


Dark Surroundings Effect

I'm sure you've noticed that when viewing a video or photo, the background behind the window is darkened, in the settings it's called "auto-dimming". To get the same effect you need to use .preferredSurroundingsEffect(.systemDark) on your view and then the space around the user will darken and your window will remain bright, this will help to keep the focus on the content.


SystemDark effect


Hidden Window Controls Line

When viewing a video or content, you want the user to have no distractions and create the effect of a window floating in the air, for this Apple has given us the ability to hide the bottom bar of the window that is used to move or close the current window. With .persistentSystemOverlays(.hidden) you can hide this control bar on your window, it will disappear with the default animation and only appear when the user interacts with the window.


Hidden window bar

Video Reflection Effect

If you open the standard Apple TV application and turn on a movie, you will notice that the movie window has a reflection that changes with each frame, giving a more immersive effect. To get a glow effect around your video, you need to use VideoPlayerComponent and enable isPassthroughTintingEnabled, then the effect will be the same as in Apple TV or HBO Max. Here is what the documentation says:


This is to enable passthrough tinting during video playback that shows up around the video taking the average color of the frame and tinting the passthrough with that color to emphasize the video.


Reflection effect

Window Resizing

You may want to prevent the user from resizing the window, there is a way to do that:

onAppear {
    guard let windowScene = UIApplication.shared.connectedScenes.first as?UIWindowScene else { return }
    windowScene.requestGeometryUpdate(.Vision(resizingRestrictions: UIWindowScene.ResizingRestrictions.none))
} 


You can also specify additional size settings in this method The full signature of the method looks like this:

windowScene.requestGeometryUpdate(.Vision(size:, minimumSize:, maximumSize:, resizingRestrictions:))


Hands Visibility

If your application uses immersive space and you don’t want the user to see their hands, or you want to replace them with virtual hands, as is done in AmazeVR, then you need to use .upperLimbVisibility(.hidden)


.upperLimbVisibility(.hidden)


        .upperLimbVisibility(.visible)


Ornament

I'm sure you've seen sidebars in VisionOS applications that look like TabBars. Apple has introduced a new View method for VisionOS that allows you to "expand" the window and add ornaments on either side of it.


.ornament(
    visibility: .visible,
    attachmentAnchor: .scene(.bottom),
    contentAlignment: .center
) {
    HStack {
        Button("Play", systemImage: "play.fill") {
        }
        Button("Stop", systemImage: "stop.fill") {
        }
        
    }
    .labelStyle(.iconOnly)
    .padding(.all)
    .glassBackgroundEffect()
}


Bottom ornament

Сore location

An interesting fact that I was able to verify experimentally is that CMMotionManager's methods only work in immersive space and not in the normal window view.


Conclusion

VisionOS provides many tools to create immersive applications that bring users into the virtual world and make them feel part of it. While more and more applications are being released for Vision Pro, only a few utilize its full range of features. That's where your chance to distinguish comes in — use them and take advantage. Unfortunately, developers struggle to find easily accessible documentation and examples. That's why I'm writing this article. I hope my tips will help you make your application better.