Build Realistic Particle Effects for visionOS

Effects such as fireworks, rain, confetti, and balloons in FaceTime and Messages on iOS, and their availability through other video calling apps like Zoom, make one-on-one and group calling more fun. These effects allow users to express their emotions in various ways. For example, users can use two fingers to form a victory or peace sign to emit a confetti effect in the background of the screen.

Using these effects is fun. What about learning to create them yourself? That is an even more enjoyable experience. This tutorial will guide you through creating and configuring these effects in Reality Composer Pro, integrating and using them seamlessly in a visionOS app.

Discover Tools and Technologies Involved

After reading this article, you will better understand simulations in iOS and visionOS. In particular, you can use the Particle Emitter Component to create different simulations for your future projects. Additionally, you will understand:

Reality Composer Pro: For assembling 3D models and particle effects for visionOS projects.
The Reality Composer package structure in a visionOS project.
The Universal Scene Description (USDz) file format: Allowing developers to bring 3D assets and animations to visionOS projects.
How to display Reality Composer Pro projects in visionsOS.

Note: To avoid confusing you, we are not using Reality Composer (for iOS and iPadOS) but Reality Composer Pro, which is designed explicitly for visionOS.

Particle Animations/Effects: Overview

Have you ever been in a FaceTime or Zoom call where a participant uses a hand gesture to render 3D reaction effects to fill the video frame to express feelings? These effects are called particle simulations. There are several places where these effects can be found on iOS, for instance. The Messages app has these animations as both full-screen and bubble effects. In the Weather app, these effects emulate real-time natural occurrences in a particular location, such as rain and snow, making them realistic and believable.

Let's begin building similar particle effects ourselves for visionOS.

Install the Following

You can install macOS Monterey or Sonoma 14.3 on an Intel Mac to work along with completing this tutorial. However, I recommend using an M-series Mac for better and smoother rendering of the animations in the visionOS project.

Xcode 15.2 or a later version: To allow you to get access to the visionOS SDK.
Vision Pro simulator: For testing and previewing the project. You will see a prompt to install the simulated Vision Pro device when installing Xcode. You can also use the #Preview in Xcode for testing.
Reality Composer Pro: This does not require a separate installation. A newly created visionOS project contains a Swift package with a Reality Composer Pro project.

Download the Source Code

This tutorial's projects are not only limited to visionOS. After creating the effects in Reality Composer Pro, you can easily add them to iOS, watchOS, and macOS projects. To use the finished effects to apps on the above platforms, you can export them as .usdz files from Reality Composer Pro or use SwiftUI' RealityView to display them. There are three different particle effects in the finished project. Download each from GitHub, and test and modify them to suit your use case.

Reality Composer Pro: Overview

Reality Composer Pro is a tool that allows developers to assemble 3D compositions and create Physics-based particle effects for the Apple ecosystem. It is embedded in Xcode. So, when you download Xcode 15 and above, it is accessible by selecting Xcode -> Open Developer Tools -> Reality Composer Pro. Additionally, it allows developers to add audio to compositions and bring and preview 3D content from other professional 3D creation tools like Spline, Unity, and Blender. To learn more, check out Meet Reality Composer Pro.

Particle Emitter: Overview

A particle emitter renders and animates repeated particle effects on objects or in their background. These effects are animated rain, glittering, fire, confetti, explosion, smoke, fireworks, snow, and more. To add them to visionOS apps, we create and configure them in Reality Composer Pro. A benefit of using Reality Composer Pro is that any effect you make is already embedded in Xcode and can be effortlessly integrated with non-visionOS projects. Behind the scenes, Reality Composer Pro renders the particle animations using the Particle Emitter Component.

Creating Particle Effects for visionOS

Generally, developers can create particle animations for visionOS in two ways.

A stand-alone Reality Composer Pro project: Using this approach, you can create a particle animation in a separate Reality Composer Pro project and import it into a visionOS app. In this case, you can save your project with .realitycomposerpro extension and load it into a visionOS project. Another option is to export the effects from Reality Composer Pro as a Universal Scene Description file .usdz and add it to your project's bundle in the Xcode Navigator. Watch Explore the USD ecosystem on Apple Developers to learn more. We will look at this aspect later in this tutorial.
A new visionOS project: When you create a new visionOS project, a Reality Composer Pro package is embedded in the project by default. Starting with a visionOS project is excellent because you can load the effects you build directory into any SwiftUI view using Model 3D View. Let's proceed with this approach in the following sections.

Start With a New visionOS Project

Ensure you have Xcode 15.2 or a later version. Create a new app by selecting the visionOS template.
Open the project in Xcode and launch Reality Composer Pro from there.
In the Xcode’s Project Navigator, click the Packages folder and select Package.realitycomposerpro.

From the top-right of the 3D preview area, click Open in Reality Composer Pro to begin adding our particle effects.

Add an Effect Using a Particle Component

There are two ways to add particle effects in Reality Composer Pro. The first option is using the Particle Component. When you add a 3D element to a scene, you can render particle emissions from its surface using the particle emitter component. To demonstrate this step:

Go to the Objects Library on the top right in Reality Composer Pro and drag or double-click any 3D object to add it to the scene.
Select the object and click the Add Component button on the bottom-right of the Properties Inspector.
Scroll through the list of options and choose Particle Emitter. Congratulations 👏. You have added your first particle effect in Reality Composer Pro. In our demo, we have a realistic 3D toy rocket. Let's change the particle type and choose an effect similar to smoke (Impact) from the ParticleEmitterComponent in the Properties Inspector.

How To Add a Particle Emitter

An alternative way to emit particles as components in Reality Composer Pro is to add a Particle Emitter. With a particle emitter option, you do not need to place any object in a scene to render a particle effect from it. To add a particle emitter, click the plus + button at the bottom left of the Hierarchy Pane, just above the Project Browser, and select Particle Emitter.

Building your own app? Get early access to our Livestream or Video Calling API and launch in days!

After adding a particle emitter to a scene, you can see its animation and visual appearance by clicking the play button ▶ in the Properties Inspector.

Explore Default Particle Effects in Reality Composer Pro

There are six default particle effects you can add to your visionOS projects.

Fireworks: Suitable for dazzling effects similar to real-life celebratory fireworks.
Impact: Suitable for simulating a collision, smoke, cloud, and explosion.
Magic: For perceiving enchantment and wonder. You can also use it to create decorative effects.
Rain: Mimics natural raindrops. It is suitable for simulating realistic weather conditions in a visionOS app.
Snow: Mimics a falling snow. It is excellent for simulating real-time snowfall in a particular location when used in a visionOS app.
Spackle: For creating decorative, dynamic, and energetic effects.

Understanding Emitter Configurations: Parent Layer

An emitter layer provides two main configuration options: Parent-level and individual particles. Each of these configurations has sophisticated and complex settings. Let's cover only the most important setting to get your particle effects running. To customize parent (Emitter) settings, head to the Particle Emitter section in the Project Inspector and select the Emitter tab.

The Emitter settings are categorized into three.

Timing: A control of how and when the particles are ejected. You can use the timing parameters to control the particle's idle, warm-up durations, and more.
Shape: The shape category has several parameters for defining the particles' emitted regions. You can, for example, change the emitter shape, birth location, direction, and speed. To get the desired outcome, you should experiment with different values.
Spawning: Spawning defines how the particles are released or ejected from the source. The available options are spawn occasion, velocity factor, and spread radius. The video below demonstrates the effect of different spawn occasions on the particles.

The setting above is just an overview of a particle configuration at the emitter (parent) level. Download the demo project from GitHub or create a new project and explore the emitter configurations and parameters in more detail. In the next section, let's look at an overview of adjusting the individual particles.

Understanding Particle Configurations: Sublayers

When you create a particle effect with an emitter, the particles become the children or sublayers of the emitter. The emitter passes its behaviors to the children through inheritance. You can also customize the individual particles just like the parent layer. Configuring the particles is more complex than the emitter. Let's look at a few essential ones and leave the rest for you to experiment with. Going through these particle attributes in more detail will allow you to build sophisticated effects for your visionOS projects.

Birth Rate: Determines the rate at which the particles are born. Increasing this attribute results in ejecting more particles.
Burst Count: Determines the number of particles that can be released in a single burst. A large number generates more particles.
Spreading Angle: Defines the direction in which the particles are released from a source. You can use this property to emulate the direction of the wind in a snow or rain simulation. This will allow you to make the rain or snowfall in a particular direction to perceive windy conditions.
Color: Allows you to adjust evolution power, opacity over life, and start and end colors. You can also change the particle’s image and texture in this parameter category. Check out the several other attributes to learn more.
Properties: In this category, you can adjust the life span, mass, angular velocity, size, and more.
Force Fields: Use this category to set noise, attraction, and vortex.
Rendering: Rendering controls the particle's sort order, blend mode, and stretch factor.

The example here uses a custom image, increased birth rate, and burst count.

The following section will preview this example in the visionOS' window.

Add Particle Effects to visionOS Compositions

When we added the particle emitter in the previous section in Reality Composer Pro, it created the particle effects as a scene named Scene. You can rename it to whatever you want, but we did not do that for a purpose. When you create a new visionOS project, the generated ContentView.swift file loads the Scene file from the Reality Composer Pro package into the body computed property. So once we leave the particle effect name as Scene and save it in Reality Composer Pro, it will be automatically displayed in our ContentView.swift using the SwiftUI's Model3D view as demonstrated in the above video preview.

swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//
//  ContentView.swift
//  VisionParticleEffects

import SwiftUI
import RealityKit
import RealityKitContent

struct ContentView: View {
    var body: some View {
        VStack {
            Model3D(named: "Scene", bundle: realityKitContentBundle)
                .padding(.bottom, 50)

            Text("Hello, Particle Effects!")
                .font(.largeTitle)
        }
        .padding()
    }
}

#Preview(windowStyle: .automatic) {
    ContentView()
}

In the code above, the Model3D view loads the Reality Composer Pro file from the Packages folder. The RealityContent project bundle is declared in RealityContent.swift under the Packages folder.

public let realityKitContentBundle = Bundle.module

Display .usdz Particle Effects in visionOS

This section will show you how to create a particle effect in Reality Composer Pro, export it as .usdz, and display it in the visionOS’ window. Let's create a snow effect using the embedded Reality Composer Pro file in our visionOS project from the previous section.

Open the Packages folder in the Xcode’s Project Navigator and click Package.realitycomposerpro.
Click Open in Reality Composer Pro on the top-right of the Xcode's UI.
Select File -> New -> Scene and name the scene Snow. Then, save it to get a blank scene.
Add a Particle Emitter as in the previous section and change the emitter type to Snow. Experiment with the Emitter and Particle configurations to adjust the snow effect to your taste.
When satisfied with the snow effect, click File -> Export, name it Snow, and save it to a location. The export action you just performed here will save the file as Snow.usdz.
Go back to the visionOS project in Xcode and drag Snow.usdz to the Navigator as shown in the image below.

Add a new Swift file SnowView.swift and use the Model3D view to display Snow.usdz using the code below.

swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//
//  SnowView.swift
//  VisionParticleEffects

import SwiftUI
import RealityKit
import RealityKitContent

struct SnowView: View {
    var body: some View {
        NavigationStack {
            ZStack {
                Model3D(named: "Snow") { model in
                    model
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                } placeholder: {
                    ProgressView()
                }
            }
        }
    }
}

#Preview {
    SnowView()
}

The code above uses SwiftUI's Model3D view to load Snow.usdz as a 3D scene. The only requirement for the Model3D view is to specify the object’s name you want to display. It can identify the object with its name without the file extension. So in our example, we have Model3D(named: "Snow"). When loading the file, it displays a ProgressView() until the loading is complete.

The preview below demonstrates our snow particle effect.

Conclusion

We covered a lot in this article, from Reality Composer Pro, Universal Scene Description (.usdz) file format, creating a particle effect, to bringing them into a visionOS project. With the techniques and knowledge obtained from this tutorial, you can now start incorporating these sophisticated particle animations into your future visionOS projects. Check out the related links to learn more about the different use cases and practical examples of where you can integrate these effects into other Apple platforms.