Noow

Introduction

Ever wondered how Apple lets you visualize their products in your own space? That magic is thanks to Augmented Reality (AR). AR overlays computer-generated images onto the real world, creating a composite view that opens up exciting possibilities for businesses and consumers alike. Imagine being able to see how a new piece of furniture fits into your living room before you buy it — that’s the power of AR.In our journey to develop a new website using Gatsby, we faced the challenge of incorporating 3D models in AR mode. In this article, we’ll share the insights we gained during this process and guide you on how to integrate this functionality into your Gatsby/React site.

Why Gatsby?

Gatsby and React are both JavaScript frameworks, but they serve different purposes yet complement each other seamlessly. React is excellent for dynamic user interfaces, while Gatsby, built on top of React, excels in creating fast, optimized websites by generating static HTML files.These reasons may also compel you to use Gatsby instead of React or any other web framework.

A static website
High performance e.g. fast loading times. You do not want your users to wait for ages when accessing your site, otherwise you risk losing them so Gatsby will help and have faster loading times
Search Engine Optimization (SEO), if it’s a high priority for the site. Due to the fact that most likely your app will be a website, you need it to appear to potential customers or stakeholders. Gatsby supports SEO which aids your site to appear when searched for among top results.

Benefits of AR

AR technology offers a wide range of benefits across different sectors and applications. Here are some of the key benefits of AR

Enhanced User Experience: AR provides immersive and interactive experiences, enhancing user engagement and satisfaction. It bridges the gap between the digital and physical worlds, offering a more engaging experience than traditional interfaces
Improved Learning and Training: AR applications in education and training help learners visualize complex concepts. AR simulations and interactive modules enhance understanding and retention, making learning more effective and engaging
Increased Interactivity: AR allows users to interact with digital elements in real-world environments. This interactivity enhances user engagement and participation, leading to a more dynamic user experience.Virtual Try-Ons and Product Visualization: In e-commerce, AR enables virtual try-ons for clothing, accessories, and other products. Customers can visualize products in real time, leading to higher confidence in purchasing decisions. It’s also used for visualizing furniture and home décor in the user’s space before making a purchase.

Implementation

If you want to display a word that links to the AR view, follow the code below:

‍

If you would like to display the AR straight from the jpg image, follow this

‍

Implementing AR with Quick Look does come with challenges:

You may face the following challenges when implementing this feature;

Limited Platform Support: Quick Look with AR capabilities is primarily available on Apple devices (iOS and macOS) that support ARKit and USDZ files. If your target audience includes users on other platforms, they won’t be able to experience AR content through Quick Look.
Content Creation Complexity: Creating high-quality 3D models and AR experiences can be complex and might require expertise in 3D modeling and animation software. Ensuring that the content is optimized for AR and looks good from various angles is crucial.
File Size and Performance: AR experiences, especially those with detailed 3D models, textures, and animations, can lead to large file sizes. Balancing high-quality visuals with reasonable file sizes is essential to ensure quick downloads and smooth AR interactions.

On a personal level, I faced the following challenges;

QuickLook fails to load the model displaying “Object requires a newer version of iOS”. From what I have encountered, this can mean two things, first is that obviously you need to update your IOS version and the second is that there could be a problem with your USDZ file. To confirm that it is not a problem with the IOS version, use available USDZ files online.
Converting the 3D model to the USDZ file. For this we found a tool on the apple site that converts the models to the required format, it is called Reality Converter. Downside is that it is for mac os.

‍

Conclusion