Creating a Snow Globe in visionOS: From Idea to Reality Composer Pro

@iosconfsg 2025

Transcript

1. Creating a Snow Globe in visionOS From Idea to Reality Composer Pro Jane Chao
2. From Idea to Model: Start With all Perspectives
3. Thanks to Mia for sharing all the prototyping images!
4. ⛰ ⛰ 🏰 🌲 🌲 🌲 🐑 🐑
5. ⛰ ⛰ 🏰 🌲 🌲 🌲 🐑 🐑
7. Modeling Foundation • Extrusion • Box Modeling
8. Extrusion Extending a 2D shape along a path to create a 3D object.
10. SwiftUI Path Extrusion var options = MeshResource.ShapeExtrusionOptions() options.extrusionMethod = .linear(depth: 0.1) options.chamferRadius = 0.05 let mesh = try await MeshResource(extruding: path, extrusionOptions: options) Code will be shared at the end
11. Box Modeling Modify a primitive 3D shape by adjusting faces, edges, and vertices.
12. Start With a Primitive 3D Shape
13. Modify It by Adjusting Face
14. Modify It by Adjusting Edge
15. Modify It by Adjusting Vertex
16. Creates new faces, edges, and vertices for fi ner adjustments Loop Cut
17. 🏠 ???
18. 🏠
19. 🏠
21. Reality Composer Pro 2.0
23. Particle E ff ects ❄ Snowfall 🚂 Steam from the train
24. Particles Are in World Space
25. Particles in Local Space
26. Particles in Local Space
27. 􀳈 Spotlight 􀄯 Directional Light 􀇯 Point Light Light
28. 􀳈 Spot Light
29. 􀄯 Directional Light
30. 􀇯 Point Light
32. Audio 􀎫 Spatial Audio 􀄯 Ambient Audio 􀃲 Channel Audio
33. Spatial Audio: Rollo ff Factor = 1 default
34. Spatial Audio: Rollo ff Factor = 5 maximum
35. Button Interaction
36. Behavior 􀬂 On Tap 􀅆 On Collision 􀑍 On Added to Scene 􀖀 On Noti fi cation
37. Timeline Action Editing Tracks
38. Add Force 􀊖 Animation 􀄯 Billboard 􀃳 Disable / Enable Entity 􀇯 Emphasize 􀋮 Hide / Show 􀖀 Noti fi cation 􁹠 Orbit 􀙫 Play Audio 􀅌 Replace Behaviors 􀊯 Spin 􀢅 Transform By/To Action
39. 􀖀 Noti fi Center Source Subscribe to Noti fi Timeline Noti fi “PrintHello” Handle
40. Receive Noti fi cations let realityKitNotifications = NotificationCenter.default .notifications( named: Notification.Name( "RealityKit.NotificationTrigger" ) ) for await notification in realityKitNotifications { guard let triggerID = notification.userInfo?[“RealityKit.NotificationTrigger.Identifier"] else { ... } switch triggerID { case "PrintHello": print("Hello") ... } } Code will be shared at the end
41. Behavior Source 􀖀 Noti fi Center Post noti fi “PleaseStopTrain” onNoti fi “PleaseStopTrain” Action StopTheTrain Trigger
42. Post Noti fi cation @Environment(\.realityKitScene) private var scene guard let scene else { print(“❌ Cannot post notification without a scene") return } NotificationCenter.default.post( name: Notification.Name("RealityKit.NotificationTrigger"), object: nil, userInfo: [ "RealityKit.NotificationTrigger.Scene": scene as Any, "RealityKit.NotificationTrigger.Identifier": "PleaseStopTrain" ] ) Code will be shared at the end
43. RealityView { content in guard let snowGlobe = try? await Entity(named: "Scene", in: realityKitContentBundle), let button = scene.findEntity(named: "Button"), let steamParticleEmitter = scene.findEntity(named: "Steam_ParticleEmitter") else { print("❌ model not found.") return } content.add(snowGlobe) self.snowGlobe = snowGlobe self.button = button self.steamParticleEmitter = steamParticleEmitter } Add &
44. .onReceive(burstNotificationPublisher) { _ in configParticle(source: steamParticleEmitter) { emitter in emitter.burst() } } Burst fi
45. .gesture( TapGesture() .targetedToEntity(button) .onEnded { _ in // you may have some logic check here guard button.applyTapForBehaviors() else { print("❌ OnTap Behavior not found") return } } ) Trigger
46. Recap • Create some simple 3D icon or object with extrusion & box modeling • Snow globe is a fun weekend project • Special thanks to my teammate Mia ❤ Slides & code