You`ve probably been in this situation before: you look at a product online and hesitate to buy it because you`d rather see it in person. Does that look familiar to you?
Wouldn`t it be convenient if this product could magically appear in front of you? Virtual Reality (VR) does exactly that, believe it or not, today`s browser generation already supports this kind of presentation. The use of 3D configurators in VR is becoming more and more important.
This year`s Shopify Unite conference demonstrated how 3D and VR can be seamlessly embedded into Shopify stores using a new technology called WebVR.
WebVR is an open standard that is integrated into experimental browser builds. It enables the display of interactive 3D graphics within a web page in any available VR headset without the need to download an app or special plugin.
For Unite, Shopify has built a Proof on Concepts around a StandDesk desk for the Shopify retailer StandDesk. Directly from the online shop, users could put on a VR headset and see the desk in front of them.
They could raise and lower the desk to see what it would be like to use it. Users can also customize the desktop in VR, and when they remove their headset, their desktop is ready to buy. You can try it out for yourself.
This project shows what is possible for eCommerce with VR and Web. With this in mind, we go through the considerations we have made in building this experience, including the possibilities of turning a product in 3D and what development tools are available.
Why the web?
It can be frustrating to visit an online shop and end up just being asked to download the mobile app. The same frustation can occur with VR shopping when you need to download quite a large app for every store you want to visit.
It`s also a pretty serious entry barrier for a retailer, as he has to take care of creating and marketing an app and can also offer it on a marketplace like Steam or Oculus Home.
That`s why WebVR is so effective. The 3D experience enlivens the online shopping experience and can take advantage of all other benefits of the internet.
Shopify reports experiences where a checkout in VR was not needed because the normal Shopify checkout process had to be used. Customers would take off their headsets after viewing the desktop, so it was better to let you go through a proven and optimized checkout, rather than overhelm you with the process of entering a credit card in VR.
Responsive VR.
One of the first things to consider in any VR experience is the type of headset it runs on. With web-based VR, we believe that implementations should adapt to as many devices as possible, just as a website needs to respond to different devices and screen resolutions. Below are some examples of how we have balanced each scenario.
Mobile headsets.
Mobile headsets like Daydream VR and GearVR support WebVR natively. These types of headsets don`t allow you to walk around with them, because they only need to move your head accordingly. The associated controller can be used as a laser pointer for basic interactions with the scene and the movement can be done by pointing and clicking.
A google cardboard viewer can also be used, but the user experience is limited because you don`t have a controller.
Desktop headsets.
Headsets like the Vive and the Rift provide the most immersive experiences by tracking the rotation as well as the position of your head. Customers can explore a product on foot while interacting with a motion controller in each hand.
Without headset.
Most online shoppers don`t have VR headsets yet. The good news is that you can also interact with a 3D model without a headset. This functionality does not require WebVR and is supported by all popular browsers.
It`s true… You`d rather see the desk in a real situation than in a virtual void. Hopefully Apple`s ARKit will support it sooner rather than later.
For new, AR is mostly phone based and although it is intuitive and convenient, the disadvantage is that it is not as immersive as VR. Instead of feeling like a desk in front of you, where you can go and interact with, you feel like looking at a photo of a desk on your mobile phone. That`s why we`re excited that AR headsets with gesture tracking will be available in stores.
Turn products into 3D.
Transforming products into 3D is one of the biggest hurdles to getting started with this technology and there are several ways developers can meet that challenge.
Photogrammetry/Scanning.
Photogrammetry is a technique where you take a bunch of photos of an object from different angles and then use special algorithms to try put them all together into a 3D model. The results can be great, but the process of doing it right requires a good portion of skill. Highly reflective or transparent surfaces can also interfere with the result.
Set up a 3D designer.
3D designers can create incredibly photorealistic models of just about anything. For the StandDesk example at Unite, several photos and measurements of the table were taken before they were modeled. The process tool a few days until all the variants were ready.
The catch with this option is that it can be an expensive undertaking to model many SKUs. But for a shop that only has one main product or a selection of a few, it should be a piece of cake considering how versatile the resulting 3D model is.
Convert CAD data.
Many products require CAD (Computer-Aided Design) data for the manufacturing process. These data can be extremely large and contain an incredible amount of detail, making them too complex to render in real time for VR. CAD models often need to be simplified before they can be converted to a real time format, sometimes automatically.
Development of WebVR experiences.
The tools for creating WebVR experiences are still very limited and Shopify tested several before choosing StandDesk. The first one that was considered was Sketchfab, which can be considered as YouTube for 3D models. You upload a 3D model an then embed the viewer with a snippet of code on any web page. It even supports displaying the model in VR at the correct sake.
It is a really simple process and the perfect solution for many use cases, especially as there is an API that goes with it. Unfortunately, it`s too limited for the desktop example, as Shopify wanted to add its own VR controls to customize the desktop with the headset turned on.
Shopify also considered the use of Mozilla`s excellent VR framework A-Frame and Clara.io, but in the end they chose PlayCanvas because it speeds up the workflow and provides a lot of functionality.
PlayCanvas feels like Unity for the web, but with the collaborative features of Google Docs. Any changes you make to the scene or code will be reflected on all connected clients. This has greatly accelerated debugging as someone could be in VR and see the changes in real time as ever else has optimized the scene on their laptop.
Our project is based on the PlayCanvas WebVR example, Shopify a basic scene with.
Support for mobile and desktop VR controls. It has also shown Shopify that it is possible to achieve 90 frames per second (60fps for mobile phones) on the web.
We are very excited to see how tools will evolve to make it easier to publish immersive virtual experiences in the browser. It would be amazing to use well-known and powerful game engines like Unity and Unreal Engine, but their export capabilities to the web are very limited by a lack of WebVR support for the most part.
Small outlook.
Shopify is always looking for new ways to advance VR and AR technology in the world of eCommerce. The next steps are to make it easier for merchants and partners to get started with this technology on the Shopify platform.
Shopify integration.
Shopify`s Unite Proof of Concept incorporates a lot of custom work. Shopify wants to provide parts of it so developers don`t have to start scratch when using VR technology for their eCommerce site. Here you will find some of the common functionalities Shopify wants to make available to you.
In the not too distant future you might even have the possibility to upload 3D models for a product to the Shopify Admin.
Data Analysis.
While it is nice to inform retailers about the PR benefits of the VR hype, it would be even better to show them how the technology can reduce returns by x% or increase sales by y%. That`s why we`re working to provide Shopify vendors and partners with the data they need to secure this type of development work.
Shopify will closely monitor ARKit, AR.js and WebVR to see how AR can be seamlessly integrated into the mix.
Shopify partner for 3D/VR/AR.
Retailers can`t do it all themselves. Just as merchants can rely on Shopify`s network of partners and experts to help with design, code, SEO, marketing, photography etc. Shopify wants to build a category of trusted partners for creating 3D models and building AR/VR experiences.
The future of VR.
We are very excited to see how immersion in virtual reality will evolve with the power and accessibility of the internet. This is just the beginning and there is still so much to learn and develop.
Thank you very much for reading.