Many ecommerce stores are stuck in a rut, relying on the same boring experiences to drive customer engagement and sales.
But what if you could break out of the mold and create an 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 with Augmented Reality and 3D models used for immersive product presentation in the Magento 2 store.
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. Google, Meta, Apple - all major tech players released their VR headsets. This is the next big thing for the years to come.
Moreover, modern smartphones ship with powerful processors and GPUs capable of displaying realtime simulations.
Understand the impact of these technologies and take first step to incorporate a 3D viewer. You will position your business 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.
Day in and day out, she sold her grains, and millet to passersby who were drawn not only by the quality of her crops but also by her warm, inviting smile and the stories she shared from a lifetime of harvests. Her presence at the market was as constant as the seasons, and she cherished the community and support it provided her.
Today we are on a quarter way past 21st century. Things have changed since times when my grandma had to take care of both production and sales process.
We can't predict how blending of the Virtual and Real worlds will happen. But it is impossible to ignore the impact it will have. 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.
How did we implement AR in Magento 2
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 provide a quick and effective way to simplify the model topography.
In addition, the use of real photographs of materials allowed us to create a consistent scale and apply it to a single UV map. The World UV addon for Blender is an essential tool in this process.
Products covered with velvet, have unique, shiny property. Dynamic materials can define the sheen colors, which is used to represent the luxurious velvet fiber. The sheen value is generated on the fly by averaging texture color and increasing the lightness.
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 and enables embedding 3D experiences with a single HTML tag <model-viewer>.
With the universal 3D file format - glTF 2.0 - we were able to easily integrate high-quality models into the website.
PBR materials are the industry standard for 3D rendering, 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 harms user experience.
Investing in a custom solution allows you 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.
You can prepare for the future today or wake up surprised when your competition has already replaced photographs with 3D models.
Contact us if you would like to improve your e-commerce with AR and 3D experiences.
View furniture prepared for AR on SLF24
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
