Converting a Stop Motion Animation to usdz

Hi @denis_wo

I'm a big fan of stop motion! I'll go over a code and no code way to use the meshes to create a stop motion-like effect. Both approaches involve displaying each frame's mesh on an interval.

Here's how I recommend writing code to solve the problem:

• Create a single entity.
• On an interval, replace the entity's mesh with the mesh for the next frame.

Here's a snippet:

import SwiftUI
import RealityKit
 
struct ImmersiveView: View {
    private let meshNames = ["box", "sphere", "cylinder"]
    @State private var updateSubscription: EventSubscription?
    
    var body: some View {
        RealityView { content in
            let animationDurationInSeconds = 3.0
            var frameIndex = 0
            let entity = ModelEntity(mesh: loadMeshForIndex(frameIndex)!, materials: [SimpleMaterial(color: .red, isMetallic: false)])
            var timeSinceLastUpdate:TimeInterval = 0
            let updateEveryNSeconds:TimeInterval = animationDurationInSeconds / Double(meshNames.count)
            
            entity.position = [0, 1.2, -1]
            content.add(entity)
 
            updateSubscription = content.subscribe(to: SceneEvents.Update.self) { event in
                timeSinceLastUpdate += event.deltaTime
                if timeSinceLastUpdate >= updateEveryNSeconds {
                    frameIndex += 1
                    timeSinceLastUpdate = 0
                    
                    guard let nextFrame = loadMeshForIndex(frameIndex) else {
                        updateSubscription?.cancel()
 
                        return
                    }
                    
                    entity.model?.mesh = nextFrame
                }
            }
        }
    }
    
    // This is a placeholder.
    // Load the real mesh.
    func loadMeshForIndex(_ index: Int) -> MeshResource? {
        guard index >= 0 && index < meshNames.count else {
            return nil
        }
        
        if meshNames[index] == "box" {
            return MeshResource.generateBox(size: 0.1)
        }
        
        if meshNames[index] == "sphere" {
            return MeshResource.generateSphere(radius: 0.05)
        }
         
        if meshNames[index] == "cylinder" {
            return MeshResource.generateCylinder(height: 0.1, radius: 0.05)
        }
        
        return nil
    }
}

For a more modular approach consider refactoring the code to use ECS. Create a custom StopMotionComponent with an array of mesh names and a custom StopMotionSystem to iterate through the mesh names and update the entity's active mesh.

Next, let's review the no code option. It's a bit cumbersome and ideal if your animation is only a few frames. If you have lots of mesh data you may run into performance issues since the approach requires you to keep lots of mesh data loaded.

• In Reality Composer Pro, create an entity for each frame using the corresponding mesh.
• Position the entities in the same place.
• At the beginning of the timeline use a "Disable Entity" action to disable each of the entities. Then overtime, for each frame, enable the active frame's entity using an "Enable Entity" action. In parallel disable the previously enabled entity using a "Disable Entity" action. My timeline had 2 lanes, one for "Enable Entity" actions and another for "Disable Entity" actions.

To learn more about Timelines in Reality Composer Pro, watch Compose interactive 3D content in Reality Composer Pro.

Please accept this answer if it answers your question. Otherwise, follow up and I'll do my best to help you achieve stop motion!

Hello,

Thanks so much for the detailed explanation! I'm pretty new to Swift and have just started developing my first app for the Vision Pro, so I really appreciate your code snippet and the effort you put into explaining the options I have. I'll definitely try out the code approach since I have quite a bit of mesh data and performance issues are likely.

Hope you have a great day! Best, Denis