Many ecommerce stores are stuck in a rut, relying on the same experience to drive customer engagement and sales.
But what if you could break out of the mold and create an immersive, interactive experience that would revolutionize customer engagement and drive sales?
With the help of augmented reality (AR) and 3D models, you can do just that. In this blog post, I share our client's success story of how we incorporated AR and 3D models into the Magento 2 store and created an immersive experience that stands out from the competition.
Why you shouldn't neglect the impact of Augmented Reality?
As the world continues to embrace the benefits of technology, the use of augmented reality (AR) and 3D in e-commerce increases. Investing in the metaverse may seem risky at this early stage of its development.
However, as a responsible merchant, you must consider the future of 3D and VR technologies and not ignore their disruptive potential.
By understanding the impact of these technologies and taking steps to incorporate them into their operations, businesses can position themselves for success in the coming years.
A brilliant inventor and futurist, Nikola Tesla, predicted many of the technological advancements we enjoy today. He envisioned a world where people could carry devices in their pockets and communicate with each other regardless of the distance.
While his predictions may have seemed far-fetched, they have come to fruition as smartphones and other portable devices.
The world has changed since Tesla’s time, with advancements in technology and communication providing endless possibilities for innovation. If the past is any sign, the future of AR, VR, and the metaverse may be even brighter than we can imagine.
With the rise of augmented reality technology, it is impossible to ignore the ever-growing impact it has on our lives. From the entertainment industry to the medical field, augmented reality has already revolutionized the way businesses operate and people interact with the world around them.
Nevertheless, many people still remain oblivious to the potential of this technology.
Why we’ve implemented AR
After implementing AR for our client’s e-commerce store, we were able to take advantage of the unique challenges and opportunities presented by their in-house furniture design and production process.
Their graphic designers had already prepared models for renders, but some needed minor fixes in order to be suitable for the web.
Fortunately, Blender’s Remesh and Decimate modifiers provided a quick and effective way to simplify the model topography.
In addition, the use of real-photo generated materials allowed us to create a consistent scale and apply it to a single UV map. The World UV addon for Blender proved to be an essential tool in this process.
By utilizing shared, dynamic materials and the ability to set dynamic material sheen colors, we could represent the luxurious velvet textures used in many of the furniture pieces. We generated the sheen color on the fly from the average texture color with increased lightness to create a more realistic and striking visual effect.
Overall, implementing AR allowed us to enhance the customer experience and showcase the high-quality craftsmanship of our client’s furniture designs.
Our WEB 3D technology stack
To create an immersive AR experience on our client’s e-commerce store, we leveraged the power of 3 elements:
- model-viewer
- PBR materials
- HDRI maps
The model-viewer library is built on Three.js. This innovative tool allows for seamless integration of 3D experiences using just a single HTML tag.
WIth the new standard for 3D models - glTF 2.0 - we were able to easily integrate high-quality models into the website.
PBR materials are the future of 3D graphics, enabling us to create more realistic and visually appealing images. By simulating real-world physics and capturing a wide range of surface qualities, we can create immersive experiences that feel true to life.
And with their adaptability to different lighting conditions, PBR materials bring remarkable 3D visuals.
HDRI maps, on the other hand, allow us to capture and reproduce the full range of light intensities, providing accurate and realistic lighting in our 3D scenes.
We combine these two techniques to create a stunning 3D experiences that truly captivate the properties of indoor lighting.
Assumptions
As we developed the AR experience for our client’s e-commerce store, we made several assumptions about the technology and how it would affect customers’ experience.
One of the key assumptions was that models with over 1 million vertices would run smoothly on 3D, but may crash on AR, especially on older mobile devices. Based on this, we kept model complexity under 250-500k vertices to ensure optimal performance.
We also assumed that texture compression would be necessary to reduce file sizes and improve load times. We used imagemagick and pngquant for this purpose, but noted that pngquant should not compress normal maps as it can damage the quality of the map.
Finally, we assumed that each model would have a separate variant that could reflect its physical properties, such as velvet, polyester, or wood.
This allowed us to represent the materials and textures used in the furniture designs and create a more realistic AR experience for customers.
Challenges and limitations
While implementing AR on our client’s e-commerce store was successful, there were a few challenges and limitations that we encountered. One of the key challenges was that the models sometimes appeared too dark when viewed using AR QuickLook on iOS.
This was because of the Safari capabilities on iOS, which is out of our control and maybe Apple will add it in the future.
Users on the iOS face another issue when it comes to previewing AR in the browser.
Safari’s inability to launch the AR experience directly impacts UX negatively, forcing customer to open the model in AR QuickLook to see how it will appear in their space.
Switching between browser and iOS AR preview is automatic, yet it’s still a less than ideal experience.
Fortunately, materials set up in the 3D preview are transferred properly.
Why should you consider a custom solution for 3D/AR?
E-commerce companies must weigh the benefits of a custom 3D and AR solution against existing options like Verge 3D.
These pre-made implementations can be inefficient and too rigid, leading to clunky user experiences and potential difficulties in website integration.
Investing in a custom solution can streamline operations and provide the level of control needed for a seamless experience.
For example, they often require a separate model to be generated for each material, leading to multiple models being downloaded for a single product.
This can be time-consuming for both merchants and customers. Merchants have to create and maintain more files while customers browser downloads same model in slightly different arrangement.
It is inefficient and not ecologic.
Investing in a custom solution allows businesses to craft a 3D and AR experience that’s perfectly aligned with your needs goals.
You get more control over the presentation of the model and seamless integration with the store design.
Better customer experiences always convert to higher sales.
Conclusions
By leveraging the power of AR and the latest web technologies, we were able to create a truly immersive and engaging experience for our client’s e-commerce store.
The ability to showcase their furniture designs in a realistic way demonstrates the potential of this technology to revolutionize the e-commerce industry.
We are excited to continue pushing the boundaries of AR and driving innovation in this space.
Contact us if you would like to improve your e-commerce with AR and 3D experiences.
References
- our client's implementation on real store: 3D and AR Chesterfield Sofa on slf24.co.uk
- the awesome library for creating AR and 3D experiences model-viewer website
- the library that makes it easy to integrate 3D worlds into web: Three.js website
- open source Swiss Army Knife tool for 3D modellers: Blender 3D software
