Overview
The article discusses the development of Size.link, a tool created by Shopify's Augmented Reality team to help visualize product dimensions using AR technology. It outlines the challenges faced in implementing AR on the web and the innovative solutions devised to dynamically generate 3D models for both iOS and Android devices.
What You'll Learn
1
How to utilize AR Quick Look for iOS to display 3D models
2
Why modifying binary data can optimize 3D model generation
3
How to dynamically generate 3D models in .glTF and .usdz formats
Prerequisites & Requirements
- Understanding of 3D graphics and file formats
- Familiarity with AR technologies and JavaScript(optional)
Key Questions Answered
How does Size.link help visualize product dimensions?
Size.link allows users to view product dimensions in their environment using augmented reality through a smartphone camera. By providing a link on product pages, users can access an AR view that displays the size of a product accurately without needing a dedicated app.
What are the challenges of implementing AR on the web?
Implementing AR on the web faces challenges such as lack of support for WebAR on iOS. However, using AR Quick Look on iOS and Scene Viewer on Android provides workarounds to display 3D models directly in the browser.
What file formats are used for 3D models in Size.link?
Size.link uses .glTF and .usdz file formats for 3D models. .glTF is becoming a standard in the industry, while .usdz is Apple's format based on Pixar's USD, both serving different platforms effectively.
How does the dynamic generation of 3D models work?
Dynamic generation of 3D models involves modifying the binary data of existing .usdz files to change their scale properties without creating new files. This method allows for fast and efficient model generation tailored to user-defined dimensions.
Key Statistics & Figures
Number of models needed for size variations
128,000,000,000
This number reflects the potential models required if each dimension was generated in increments of 25mm for a range of 1cm to 1000cm.
Time to create .usdz files
well under 1 millisecond
This performance metric highlights the efficiency achieved through the binary data modification approach compared to traditional methods.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
AR Quick Look
Used for displaying 3D models in augmented reality on iOS devices.
Frontend
Scene Viewer
Used for displaying 3D models in augmented reality on Android devices.
3d Format
Gltf
A file format used for representing 3D models, becoming a standard in the industry.
3d Format
Usdz
Apple's file format for 3D models, based on Pixar's USD, used for AR experiences.
Backend
Ruby
Used for server-side processing to generate and serve 3D models.
Key Actionable Insights
1Implementing AR Quick Look can significantly enhance user experience in e-commerce by allowing customers to visualize products in their space.This approach is particularly useful for online retailers looking to improve customer engagement and reduce return rates by providing a better understanding of product sizes.
2Modifying binary data directly for 3D models can save time and resources compared to traditional model generation methods.This technique is especially beneficial in scenarios where multiple variations of a model are needed, as it allows for rapid adjustments without the overhead of generating new files.
Common Pitfalls
1
Assuming that generating 3D models dynamically is always faster than pre-generating them.
While dynamic generation can be efficient, it may introduce latency if not implemented correctly. It's crucial to evaluate the specific use case and test performance to ensure optimal user experience.
Related Concepts
Augmented Reality
3d Model Formats
Web Development
E-commerce Solutions