Recently I bought a HTC Vive Virtual Reality headset. It’s a lot of fun for games (my kids love it because they move the whole body rather than just a mouse or touching a screen – much more fun), but how useful is it for ecommerce?

The VR field is still in its infancy, the tools are a bit clunky still and not always predictable. My first investigation into trying to create a VR store was frankly pretty scary – looking at game engine tools like Unity and Unreal Engine for creating a store space were pretty complicated.

Then I discovered WebGL and JavaScript libraries like A-Frame.

WebGL and A-Frame

“WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins.” (Wikipedia.) I had heard of it before, but the “3D” part had not really registered. Cool. Web browsers can already render 3D images.

Then I came across A-Frame. There are other libraries around, so I cannot say which is “the best” one to use, but A-Frame allows you to create scenes with simple HTML like markup. Have a look at the “shopping demo” on their site. It’s a rotating 3D image of a person with a few screen assets, but it gives a hint of what is possible. And for me it worked in every web browser I tried.

What was particularly cool was my iPhone/iPad also supported tilting the device to look around in the room.

You can look at the full markup behind this page here: https://github.com/aframevr/aframe/blob/master/examples/showcase/shopping/index.html. The markup is not that scary – it’s pretty easy to see how the different elements align with visual elements on the screen. <a-curvedimage>, <a-animation>, <a-cylinder> – fairly intuitive, pretty easy to tweak and code.

Looking at the markup, you can see it would be pretty easy to say replace the <img> reference on a Magento product view page with a 3D scene with a rotating picture. Interesting!

Web Browsing and a VR Headset

So how to take the next step? Could I use my VR headset to “get inside” the 3D landscape? Move around, interact? The default above is basically a 3D model being rendered onto a flat monitor. You could rotate side to side, but not much more. (This was still useful – seeing the clothes the model was wearing from all sides was a nice experience.)

Well, this is where you hit the “newness” of the field. Here are some examples.

• The HTC Vive is pretty cool, but I am still getting used to it. I start up programs, but nothing appears on the screen. I am not really sure what is running yet. I click again and it says “you cannot do that – its already running”, even when nothing is on the screen. I am sure these minor problems will get improved over time as the overall UX flow gets a bit more work.
• Inside the HTC Vive you can bring up a web browser and use it. It’s a flat panel inside the world. Kinda cool, but the A-Frame site did not work so well for me. Button clicks did not seem to do anything at times. Maybe I cannot do 3D rendering inside 3D rendering…

I did find an important cool project however. There is a site https://iswebvrready.org/ which includes links off to an experimental Chrome build with a new “WebVR” setting you can turn on. I installed that, jumped back to the A-Frame shopping demo page on my desktop, and clicked the VR icon on the screen.

Inside the Store Demo

With my VR headset on I was interested to see my first reaction would be being “inside” the store instead of just looking at a flat screen. It was going to be the same image.

I must say, I was impressed.

It just “felt” so much better. Having the headset track my movements just “felt good” (like normal VR). For the same scene, it did feel nicer and more immersive walking around, looking at things from different angles. The model was full size rather than a tiny image on the screen. While getting into the environment was a bit clunky, once inside it was nice – and this was for a very simple demo.

The demo is pretty simple – I could not use my controllers to click anything. All the assets were outside my “play area” (the area I could walk around in without hitting a wall in my real-life house), so I could not get behind anything – just look at from different angles.

What quickly became apparent however was inside VR it felt like there was a lot more “screen real estate”. It was trivial to rotate my head and look behind me. The demo was all blank. I could image navigating through a store by having a series of objects (a handbag on a pedestal, a picture of a guy in hiking clothes, etc) to use instead of the on screen category tree navigation.

Having objects rotate slowly also worked well – you could see the back of it without trouble. You could just stand there and watch without having to move around. (This is important as some VR users are sitting in a chair, not walking around a room.)

The 3D model was a bit blurry for me (that is, not as high res as the photo on a monitor). It was okay, and maybe it’s more my eyes getting old, but I quickly wanted a magnifying glass view to be able to zoom into details. (Don’t ask me how big a high resolution 3D model would be!)  Of course getting the images could be an issue – it will take a while to get 3D scans as common as normal photos of inventory.  You can put flat images in the 3D world as a stop gap, but investing into 3D cameras is a time and money commitment.

A quick side note on cameras, you can take 3D photos with just an iPhone and a free app (123D Capture). But if you are serious, there are serious rigs around as well with proper lighting like http://web.twindom.com/. There was a surprising number of options around, indicating how hot this space is going to be. Most however were focusing on the idea of taking a photo of yourself and getting back a 3D “self-portrait”. Anyone want to buy a 3D printer to go with that scanner?

With the VR headset I was completely ready “grab” things on a shelf and toss into my “basket” I was holding in my other hand. Then jump over to a viewing area to see how they looked together. Or hold a handbag from my cart up against some clothing to see what it might look like. I did not need the model to wear it – clothes in a real store are on a rack. I am used to holding things near each other and adding a bit of imagination.  None of this could be done in the simple A-Frame demo, and I have no idea how hard to take that extra step. Interesting future areas to look into.

The demo store was clean and minimal – but it made me think more about atmosphere. In the real world we are used to seeing a lot around us. I don’t think it would be that distracting having additional items in the background (in the distance). Great way to get recommendations into the experience perhaps. In the real world we are used to having very “high definition” surroundings – it is easy to focus on one thing and ignore things in our peripheral vision. So it feels like there is the opportunity to put a lot more content into a VR store than you would want on a single web page.

Another observation was it felt like there was a lot of opportunity for branding. Mood lighting, logos dangling from the ceiling, inside the VR environment feels like lots of creative opportunities to support the brand image, more than you would do on a simple web page. And much cheaper to do than in your physical store.

Conclusions

It was really nice to see a way to create a 3D scene that could be viewed in a web browser and viewed in VR. It gave a transition of experience – you can invest in 3D images and have people use them today from a standard web browser, but you could also “step into” the picture and get a deeper immersive experience.

How much a VR experience needs to be different to a simple web browser page I am not sure. Being inside I wanted to manipulate the objects, click on things, interact more. Whether this fits still transitioning from a simple web page to a full VR experience is unclear to me.

It reminds me of when JavaScript was first introduced. You needed a web site to work without JavaScript, with JavaScript enriching the user’s experience. The same may be true with VR. If I have a headset, I want a richer experience. If in a standard web browser, I still want some experience but it is okay for it to be less capable.

So, is VR shopping going to take off? I think it is still blocked by equipment availability. You can use existing devices like a phone to view it, which helps. You do need to be serious about doing the shopping – putting a headset on is a commitment (not something you do while watching TV at home). It may be that a gaming web site selling merchandise might find it worthwhile, or a high end theatre wanting you to understand what the different seats feel like. Consumers need to be willing to put up with friction before it will be worth a merchant investing in a VR store. In the short term, it will be probably more the razzle dazzle effect. I would guess a few years still before it became more mainline.

But the ability to transition from a page on a web browser over to a full VR experience feels like a good way to go. All users can access your 3D imagery, with VR users getting the deeper experience.