Swift and Firebase
Loading 3D Models from Firebase
This story is about another project I’ve done in the Apple Developer Academy @BINUS. Today, I want to share my learning journey in this project. First, let’s meet my app that our team created, Fitze!
Fitze — Imagine easier than ever
About Fitze.
Fitze was born from a common issue we all experience when shopping online: it is difficult to visualize how a product looks in real life by just looking at a flat image. This results in many returned orders when people are unsatisfied with what a product they ordered looks like in real life.
We saw an opportunity to improve online shopping by enabling buyers to visualize fashion items differently. We achieve this by having our app display a 360-degree view of the product and using a size calculator view. These features can give a next-level visualization experience and help potential customers make a more accurate buying decision.
Problem?
Once we started implementing the application using Swift and Firebase, we realized that we needed to learn how to download 3D models from the cloud. Or, to be more precise — how to load 3D models directly into SceneKit.
Since all products need to be displayed in a 3D view, this is an essential capability of our app — see this screenshot from the final app:
All our 3D models are stored in Cloud Storage. In the following, I will explain how we connected Cloud Storage to Apple’s SceneKit.
Solution?
First of all, we are using Apple’s SceneKit to display our model. But when I checked SCNScene’s initializer, I couldn’t find any that can interact with a network.
Eventually, I decided to download and store the 3D models locally using the following code:
As you can see, I construct a local URL, and then check if this file has been downloaded before.
Once this is established, we can start the download process:
All 3D models are stored in the Product3DAsset folder in Cloud Storage, so I first create a reference to that folder, and then use storageRef.write(toFile: fileUrl) to download the asset to a local file.
Great! But what else can we improve?
3D models can be quite large, so it’s worth showing a progress indicator. We can achieve this by using the .observe progress listener on the downloadTask.
Here is the final code:
Note: I saved all the files in the .cachesDirectory of the phone to make it easier to purge them.
Bonus Tip: Erasing all your cache
To clear the cache, use the following code snippet:
Conclusion
And that’s it. You have successfully downloaded 3D models from Cloud Storage, using the cache to make it easier to remove them when they’re no longer needed.
—
Thank you for reading!
© 2022 Kevin Harijanto. All Rights Reserved.
