VR and AR solutions for e-commerce

Porn leverages new technologies the fastest and can easy bury outdated ones. But don’t forget that e-commerce is the second and final frontier for technology to prove that it isn’t just immersed and exciting but also can really bring extra value. I didn’t hear a lot about AR projects in porn, but there are already few studios that focused only on VR content. That means that it’s time to have the first acid test of VR and AR in the e-commerce field.

It isn’t secret that to developing high-quality VR or AR experience needs a lot of resources. There are some tech giants like Google, Apple or Mozilla that doing huge leaps in utilizing those platforms. But from e-commerce field, I cant point only on IKEA. They released first 3d planner 4 years ago. They released IKEA VR Experience on Steam one day before official release HTC VIVE headset. Also, they showed the demo of AR application before official release ARKit.

But what to do for people who aren’t able to have huge R&D teams?
Luckily there are guys like Mozzila team, that make our lives and development process simpler. Here are few options that require a different level of code knowledge.

Solutions for Virtual Reality

Sketchfab

This is the simplest solution. Practically Sketchfab is like youtube for 3d models. So it allows you to upload your model and embed it on your website. And of course, it supports VR mode on the mobile device.

Cons here are that user can get an idea of how a model looks in volume but can’t interact with it. But it’s definitely the simplest way, for now, to show a 3d model in VR.

Cost: 100% Free
Result: Embeddable VR player

A frame

In short, A-Frame is the initiative by Mozilla VR team to bring VR to a browser. It makes experiences shareable and accessible to everyone.
The best thing that it’s web-based, what means that your customer doesn’t need to install any applications. Just old good URL, that you can open on any VR device. With a basic understanding of HTML, you can easily create different animations and interactions.

(A-Frame Example)

Cost: 100% Free
Result: Direct URL or embeddable experience

Playcanvas

Playcanvas is originally the tool for building 3D browser games. And it’s suitable for our case because it can support VR mode. But it has design editor, that allows you create a scene and add interactions without code. Also, it has the option to export it to for using on WEB, desktop or app. Honestly, I haven’t tried to export it, so can’t say about performance and other drawbacks. If you had a chance to play with it, please describe your experience in comments.

Great example by Shopify

Cost: Have free plan
Result: Link to experience

360 content

This is the wide topic, but common here is that it’s not a 3d scene. It’s simple panoramic picture that allows you looking around and get understanding or environment. So for creating 360° content, you can use 360° cameras, set up of cameras that take 360° photos, single camera + software or just panoramic renders. You can even draw 360° experience on paper (Check this tutorial).
Except for Youtube VR videos, and panoramas on Facebook, there are a lot of different applications. That services allow you create, host, and share panoramas and tours. Last year I found around 20 of different tools for creating 360 tours. For now, I use only VR view by Google and Roundme for building tours. Feel free to google any other service and leave a comment with your experience.

(Source)

Cost: There are free and paid services
Result: Direct URL or embeddable experience

Unity + Plugins

Unity is one of two the most popular game engines. There are few plugins that make a building of experience absolutely not painful. For example, VRTK will help easily set up any natural interactions without code, and Steam VR plugin will help create room scale VR experience for VIVE. Good is that from Unity you can export experience to any platform. Unfortunately except web, what makes your app not easy shareable and embeddable.

Applications made in Unity using free plugin VRTK

Cost: Free version available
Result: Application for Android, iOS, Gear VR, Google Cardboard, Google Daydream, HTC Vive, Oculus Rift, or PlayStation VR

Unreal

As it’s second most popular game engine I had to mention it here. But it’s more enhanced and complicated as Unity. I wouldn’t recommend using it if you’re not making game AAA class.

Some cool stuff made by Unreal Engine

Cost: Free version available
Result: Application for Android, iOS, Gear VR, Google Cardboard, Google Daydream, HTC Vive, Oculus Rift, or PlayStation VR

Solutions for Augmented Reality

Sketchfab

For AR as well as for VR Sketchfab is in favorites. You can’t embed AR view on your website and unfortunately can’t open your model from your app. But Sketchfab made already the first step by allowing to open models from its iOS app. At least you can host your model on its servers.

Release video about AR update of Sketchfab iOS app

Cost: 100% Free
Result: Link to your model in Sketchfab iOS app

ARKit ARCore
ARkit and ARCore are two platforms for iOS and Android respectively. They help place objects on any flat surface and interact with them.
It’s not so easy to make native applications.

Screenshots from IKEA Place app

Cost: Free to try
Result: Native iOS or Android application

Unity + ARKit ARCore

And again before mentioned game engine Unity. It can be leveraged to create scenes for ARKit and ARCore. Without knowing a code you can build an app for iOS or Android and show how your product can look in real life.

My test to build app for presentation custom furniture

Cost: Free version available
Result: iOS or Android app

UnityVuforia

Vuforia help create different AR experiences. With Unity, it allows you connect scene to any in advance defined marker. For example 3d model that appears on photo of your product.

My concept of promo site made using Vuforia

Cost: Free version available
Result: iOS, Android or Microsoft HoloLens app

AR.js

This is library by Jerome Etienne. It built on top of A-frame, mentioned before. So if you figured out how to play with A-frame. You’ll easily create a scene using AR.js. The best thing is that it’s web-based. So you can share just direct link that can be opened on almost any modern device. Unfortunately, it uses a marker to place your model in the real world. For some cases it’s advantage. For example for learncalligraphy.today I used it to place art on paper and allow user draw on it without distracting trackable area. This is practically un-possible with ARKit. But there is light at the end of the tunnel. Jerome Etienne just posted first successful markerless test of AR.js with ARCore.

My test of restaurant menu with augmented food

Cost: 100% Free
Result: Direct URL

Web-based markerless

This is set of technologies that leverage ARCore, ARKit, three.js and modern browsers to get an augmented scene. As for me, it’s the best state of AR. There are already few successful examples. But for now, there isn’t any builder that allows you create a scene without having solid code experience.

Web-based experience Super Charge by Nexus studios

Cost: 100% Free
Result: Direct URL

Thank you that you finished reading this article. Message me if you need advice or any help.

Feel free to leave in comments your experience with any of described solutions. I understand that this article will become outdated very fast. Please add to comments your suggestions of new platforms.


If you found this article useful, hit that clap button below 👏 to help others find it!