Social WebXR applications, and particularly Mozilla Hubs has an awesome opportunity to unify 3D social worlds with Augmented Reality applications, and in this example, Snapchat! I recently experimented with their Snap Lens Studio to build a photo booth for virtual spaces.
A concept: What if I could take IRL pictures in virtual spaces? Project reality into virtual worlds instead of the other way around.
At least for the purpose of taking a cool selfie! 😀 This only scratches the surface.
Hubs Snap Lens Activations
There are great examples of Snap Lenses in the real world activated by Snapcodes. Often they enhance the location or provide some type of interactive elements. I’ve been wondering what opportunity exists in virtual events and 3D web experiences using Snapcode entry points.
Organizations and IRL events are going to maintain a virtual component for the foreseeable future. Many leave it to the attendee to decide how to show their friends they were at the experience, or guide attendees with things like hashtags. We often get a cartoonized version of ourself to share with our friends, and that’s really cool! Taking something away from an experience is an important part of making it memorable. I often look back on screenshots in Hubs and instant recall the moment.
The 3D assets used for creating Hubs rooms are very compatible with the Snap Lens editor! For this project, I recreated a simple version of a popular Austin landmark in Blender and used it in both Hubs and Lens Studio. In the Hubs room I placed a Snapcode image near the statue to activate a “photo booth” at the 3D location projecting my real self into the same 3D space. You could have many of these activations in a much more complicated virtual space!
Lens Studio
Lens Studio offered a variety of templates to get me building quickly. In a single click I was shooting lenses over to my phone. Very quick to iterate!
In Lens Studio it was as easy as:
- Create new segmentation template project
- Import the room GLFT file
- Add a device tracking component set to
rotationon the imported object. - Publish to Snapchat.
That’s really it. One thing to pay special attention to is your center point and how your device tracking relates. For this project, I needed to be very mindful of where the statue was in scale and position relative to the masked subject. It is definitely not a 1:1 with the Hubs room, but I don’t see why it couldn’t be with a little bit of polish. Luckily the segmentation template keeps the subject in one location so you can hide a lot. 🙂
I didn’t incorporate audio, but that and interactivity are the biggest areas of opportunity to really make the capture memorable.
3D Model Considerations
Keep it simple, make the surrounding world a skybox render if you can, use one focal point 3D object, and animate the hell out of it for photo variation! 2048×2048 is the texture maximum which is way more than enough for WebXR experiences as well as Snap Lenses.
Hubs World Considerations
Theres a famous Hubs/Spoke trick where you can put a link slightly behind an image to make it clickable. Be sure to hide a link behind your Snapcode so mobile users have a way to enter.
If you know how to customize Spoke and Hubs, it might be useful to not show the Snapcode in VR devices as it really doesn’t translate to headsets. You could add a condition based on device to display an image based on a custom spoke property you develop on top of the Hubs image component. (maybe hideXR=true)
Here’s a link to the Hubs room to test the experience. 😉
Want one for your experience?
If you’d like a Hubs Cloud instance of your own, join our Alpha program and we’ll be happy to get your account set up!
Leave a Reply