Campfire Space with Mathew Spendlove
A conversation with Mathew about the design and development of his new app.
Mathew is a frequent attendee at our weekly Office Hours. I’ve had the privilege of watching this project take shape over the last few months.
If you haven’t already, go get Campfire Space from the App Store.
Interview with Mathew Spendlove
Joseph: Tell us a bit about yourself and Campfire Space.
Mathew: I’m Mathew Spendlove. I’m a motion graphics designer and director from London. Campfire Space is a my first app for visionOS. In fact, it is the first app I’ve ever made. It was a huge leap, going all the way from purchasing the Vision Pro June last year. I didn’t really get started playing with it until August. Then I went to an Apple Workshop in November. That was pretty much the first time I touched Xcode or Swift. I knew I wanted to make an Apple Vision app so I had to really focus on learning.
Joseph: So it’s an interesting choice for a first app because on the one hand, it’s easier to make something for a single device or platform. On the other hand, you chose the most difficult device! That’s impressive.
Mathew: I can believe that for sure. Honestly, with some of the documentation, it’s impossible to figure out some issues. Attending Office Hours helped a lot. I got a lot of help from other developers, which was a lot easier than trying to decipher the docs on my own.
The whole project was a baptism of fire. I was completely out of my comfort zone with coding. I come from a background in the 3D world so I had some strong skills in that area, but the coding side with Swift was my weakest part.
I decided on making an app and came up with Campfire Space. It just came to me because on Apple Vision Pro you’ve got a few meditation apps and I wanted to make something like that. A nice calming place with relaxing animations.
Joseph: What was the tagline you used for the app?
Mathew: It was “a quiet moment brought to life”. I really wanted to make something in that genre, just a little escape from reality. Something you can get a little bit lost in, leaning on the magic of Apple Vision Pro.
a quiet moment brought to life
Campfire Space
Joseph: So a lot of the apps in this space ask you to do something. They guide you through a meditation or tell you how to breathe. Campfire Spaces doesn’t do that. It’s just a nice place to get a couple moments of silence and peace. I appreciate that because sometimes I just need to rest my brain a bit. I don’t want instructions or tasks to go along with that.
Mathew: I thought about that as well at the very start of the project. I was thinking a campfire is very hypnotic–a real one anyway–and same with a digital one. If you’re just watching it, you can sit there for a long time, watching the embers and listening to the crackling sounds and relax. So that was the starting point for the app itself. I thought about adding a minute-long timer or some kind of breathing exercise, but I thought those would take away from that experience of watching a fire. So I just left it completely open.
Joseph: So let’s talk about the fire itself. The app has an immersive space where I can hang out next to a fire. There is a nice little wooded area and an exit sign when I’m ready to leave. The star of the show is the fire. It’s almost as if the fire were a cartoon character. How did you create it? Is it some sort of custom shader or a mesh you’re deforming on the fly?
Mathew: The fire itself was modelled in ZBrush on the iPad. I had a basic shape to start, but I changed it a lot over the course of the design phase. It started very complex-using displacements and features that didn’t port well to RealityKit. I had to think about simplifying it and reworking the animations. I ended up using Blender to create IK rigged animations that I could loop. The fire also has an unlit material that uses a gradient texture. I might try out shader graph later, but for this project that felt out of my depth. The embers of the fire are their own elements with keyframe animations.
Joseph: I also noticed the audio playing in the app is little piano notes here and there. There’s not really a song itself but just kind of using a piano as a calming sound. It seems like the piano notes are somehow related to the fire. Are they somehow connected or synced up?
Mathew: I think you and one other person are the only people who have noticed that. Basically I synced the animations and the sounds so that a note is played for each ember. It was tricky to get the timing right. I ran the animations at 60 frames per second and adjusted the audio file to play notes at set times/frames. I just start the animations and audio playback at the same time.
Joseph: Something I like about the app is that you didn’t limit it to the immersive space. I like to spend a few minutes in a space from time to time but sometimes I want to get work done. You created a version of the campfire that works in a volume, so I can have it with me in the shared space.
The volume just has the campfire itself. I can scale up to make it bigger, to scale it down to have a little fire on my desk. What were some of the challenges to taking the fire out of the immersive space?
Mathew: I wanted to have like push the capabilities of the device and not just be immersive experience. I wanted users to be able take the fire with them in the shared space, where you can have other apps open, look at your surroundings, or use environments. I had to really think about the bare essentials for the volume. I settled on the campfire, the animations, and the audio. There are a few gestures attached to the fire too. You can scale it or rotate it.
Spatial Audio played a nice part of this. Obviously the further you move it away, the quieter it gets. But if you have it on your desk and you make it really small, you won’t hear it as loudly as when you scale it up. Spatial Audio can do so much to bring things to life.
Joseph: Were there any challenges to making the app?
Mathew: Oh yeah, so many challenges with the project. Starting off with the fire I had to figure out how to get the assets from Blender to USDZ that I could load with RealityKit. Once I modeled and UV mapped all the assets for the immersive space I baked in the lighting. When I loaded the assets in Reality Kit, I kept getting artifacts around the edges of everything. It took a lot of research but I eventually found that I had to disable the denoise option in Blender.
Another issue was on the code side of things. Once I had the campfire loading in the volume, I could not scale it when I resized the volume. It would get clipped when I made the volume too small. You sent me an article that showed me how to fix that.
If you’ve created a visionOS app with a volume, you probably did it wrong. by Drew Olbrich.
Joseph: Yeah, that article by Drew is awesome. I used the same approach in Project Graveyard.
Mathew: Ivan from Office Hours helped me with another one. When I was getting the app ready to launch, my app icon wasn’t getting the layered effect that we see in visionOS. He told me to make sure all three images with the same exact size. One of them had somehow gotten sized a few pixels off. I fixed it and my app icon worked.
I had to learn about input targets and collisions to be able to set up the gestures. Another challenge was Timelines, figuring out where to place the animations and how to fire them.
Back on the 3D side, I had to adjust the scene so the nearby assets were more detailed than the ones in the background. The “hero” assets have higher polygon counts.
Joseph: That’s definitely the advantage of having a fixed point of view versus a scene that people can move around in.
Mathew: Yeah, if you could teleport in this experience, that would cause some issues, but it works well for a fixed position.
Joseph: What gets you most excited about Spatial Computing and visionOS?
Mathew: Big Question! I’ve always kind of been in love with augmented reality, going back from the filters on Snapchat or Instagram or the early days of Oculus with VR. I love the experience in general, just having windows or apps open in my space. Being able to arrange them relative to me or relative to my room or desk, being able to move stuff around. Having that freedom with 2D content, but also getting to break out of the 2D rectagles with volumes and immersive spaces.
I want to thank Mathew for taking the time to share his project and process with us. You can find Mathew around there internet.
Follow Step Into Vision