Spatial Image Gallery demonstrates how to upload a flat photo and receive a 3D spatialized mesh using the Snap Spatial Image API. The sample showcases depth animation, angle-based depth flattening, and multi-image gallery navigation using the Specs Interaction Kit. Viewing angle is continuously monitored so the image flattens gracefully when observed from extreme perspectives. Learn more about Spatial Images in the Snap developer docs.
NOTE: This project will only work for the Specs platform.
Designing Lenses for Specs offers all-new possibilities to rethink user interaction with digital spaces and the physical world. Get started using our Design Guidelines
- Lens Studio: v5.15.4+
Note: Ensure Lens Studio is compatible with Specs for your Specs device and OS versions.
- Specs OS Version: v5.64+
- Specs App iOS: v0.64+
- Specs App Android: v0.64+
To update your Specs device and mobile app, please refer to this guide.
You can download the latest version of Lens Studio from here.
To obtain the project folder, clone the repository.
IMPORTANT: This project uses Git Large Files Support (LFS). Downloading a zip file using the green button on GitHub will not work. You must clone the project with a version of git that has LFS. You can download Git LFS here.
The project should be pre-configured to get you started without any additional steps. However, if you encounter issues in the Logger Panel, please ensure your Lens Studio environment is set up for Specs.
Remote Service Gateway To access the spatialization service, a gateway credential is required. Follow the instructions here to obtain a credential and enter it in the RemoteServiceGatewayCredentials SceneObject.
SpatialGallery.ts - Drives gallery navigation, wires up the loading indicator, and calls setImage on the frame when the user pages through images.
SpatialImageFrame.ts - Acts as the central manager, sizing the SIK ContainerFrame to match each image's aspect ratio and coordinating the spatializer, swapper, and focal-point tracking.
SpatialImageSwapper.ts - Handles the visual swap between the flat placeholder image and the returned spatialized mesh once loading completes.
SpatialImageDepthAnimator.ts - Animates the depth scale of the spatialized image, easing it in on load and flattening it when the viewing angle becomes invalid.
SpatialImageAngleValidator.ts - Continuously measures the camera angle relative to the image and fires callbacks when the user enters or exits the valid viewing zone.
- Open the project in Lens Studio and ensure the RemoteServiceGatewayCredentials SceneObject has a valid API token.
- Select the Preview panel and set the device type to Specs.
- Press Play — the first image in the gallery will be spatialized and the depth effect will animate in.
- Use the left and right pinch buttons in the scene to navigate between gallery images and observe the loading indicator while each image is being processed.
- Push the Lens to your Specs using the Lens Studio push workflow.
- Ensure your device has an active internet connection so the spatialization service can be reached.
- Launch the Lens and wait for the first image to spatialize — the flat placeholder will be replaced by the 3D mesh.
- Pinch the left or right navigation buttons to browse the gallery, and physically move your head to observe the angle-based depth flattening.
If you have any questions or need assistance, please don't hesitate to reach out. Our community is here to help, and you can connect with us and ask for support here. We look forward to hearing from you and are excited to assist you on your journey!
Feel free to provide improvements or suggestions or directly contributing via merge request. By sharing insights, you help everyone else build better Lenses.
Built with <3 by the Specs team