RESEARCH
AR PingPong
If you enjoy playing ping pong (table tennis), but don’t have enough space in your house for a full-sized ping pong table, this AR setup could be a solution for you! With this setup, you’re able to play ping pong with someone else in an Augmented way. This does require some special hardwear, like: AR glasses, Input devices and a powerful computer.
Supermarket in VR
In this video made by Vincente Rosell Roig, a virtual supermarket is shown. The consumer is able to walk through the supermarket, grab products, find info and pay for them! To me this really is the future of shopping; why leave your house if you can experience the same from the comforts of your living room?
3D Printing AR
In this example, Augmented Reality is used to preview a 3d print before it is finished printing. A 3D print can take quite some time and so it also takes some time to see your 3D model in the actual space. With this AR solution, 3D printing enthusiasts can see how the model would look like on the print plate before it’s finished. It can even liven it up by adding elements to the 3D model/print (like flowers in a vase).
Cheap AR Controller
I found this when looking for cheap ways of making a controller for virtual reality, since these can be quite expensive or only work with certain (expensive) vr-goggles. This guy on the other hand found a way to use a printed piece of paper folded into the shape of a rectangle
Augmented Audio
One topic I’m personally intrigued with is Augmented Audio.
AR Drums
AMBEO Sennheiser
Making the room the instrument.
3D Audio
Binaural audio is awesome!
However, I found out that in order to create a binaural audio experience, I would need specific hardware to achieve the best results. This hardware isn’t cheap. For this reason I decided not to go for an Augmented Audio experience.
Best A-Frame example:
When I was looking into using A-frame after discarding Unity, I went out to look at what is possible to make with A-frame and I found this example on the A-frame website. I LOVED IT. The music was good, the lights look amazing, the dancing teddy bear is very creative and actually got some moves.
On this website I found another 10 reasons why I should use A-frame, just for good measure.
Tinkering
UNITY
Instead of Unreal, I want to use Unity to create a VR experience, since the tutorial of this program that is built in is very comprehensive, fun and well designed/written. This way I will know my way around the program better than using the Unreal engine.
DEMO I
First step of my tinkering journey was to do this tutorial by Unity, ending in a sample game, which was made by them but slightly modified by me.
After completing this, I still don’t feel confident at all in this software. The solution for me is to find another tutorial, this time on YouTube. Since I will be using Unity to build a VR experience for a google cardboard like headset, I needed to find a specific tutorial for this, since the steps towards achieving this are different than what Unity is usually used for. I followed this tutorial by ‘Valem’: https://www.youtube.com/watch?v=qZzhXHqXM-g , teaching me how to set up a simple VR setting for use with google cardboard.
After finishing the tutorial, I made myself a very basic VR experience, where if you look at a cube, it would turn blue and if you click on it, it will become black. However, when I wanted to test it on my phone, I found out that in order to use it on an iPhone, I would need xCode and that only works on mac. Since I’m on windows, this wasn’t an option and made me very disappointed and made me lose a lot of the initial motivation that came from my excitement to create something that I could then view in Virtual Reality! Even if it isn’t VR, I will use this as one of my demo’s.
DEMO II
For the sake of my own motivation which has its roots in the kick of creating and testing my very own VR experience (being able to actually view it in VR), I decided to switch to another tool since that would be the only way for me to test from Windows computer to iPhone. I plan on doing this using A-Frame, since this is Web-VR. This means I should be able to simply access the website from my iPhone and view it in VR.
Something I really didn’t like about A-frame during the workshop, was the fact that I had to display it through GitHub. Meaning that for every change I made to the code and I wanted to check how it looked, I would have to save the file, commit and push to GitHub and then wait around 20 seconds to be able to see the change I made. Being a very visual coder, I looked for solutions to this. On the A-frame website, I found a recommendation for Glitch.com, which is an online code editor that can display your page almost instantly.
While working with A-frame I discovered an element called A-Sky which allows you to color the sky/background. There is also the option to place an image as the sky instead of a color. Since I already have an idea for my final experience, I figured I might as well work towards it during this tinkering phase. So what I did was look up 360 images of supermarkets and tried to place these as a sky. After a few tries, I found the perfect image (could be higher resolution, but I don’t want to pay for stock images) and after removing my floor plane it felt extremely immersive. I was in a virtual supermarket now.
DEMO III
I wanted to be able to use Gaze with the google cardboard and click touching the screen to ‘grab’ objects and move them around. But after hours of reading GitHub pages and documentations (there aren’t a lot of tutorials for the current version of A-frame out there), I realized this would be near impossible with my level of knowledge of the JavaScript and A-Frame. Using JavaScript was a solution I found a few times. People made these components that allow you to click and drag objects with the mouse, but since they use a mouse or the touchscreen, they wouldn’t work with the Google Cardboard and this is something I really wanted. So after the process of accepting that things weren’t going to be exactly how I was hoping it would be, I went out to look for the next best thing. Some form of interaction that would replicate grabbing and moving objects was needed and I ended up replacing the dragging part with an animation that is activated when the user exits gazing at the object. While the user enters the object with its gaze, it will change color, indicating that the object has been selected.
DESIGN AND BUILD
Since I used the Tinkering phase to solve some problems I would have towards my final idea. The only thing left to learn in A-Frame is how to import 3D models.
For the topic I already had an idea in mind and extra research wasn’t necessary. My father has a creative agency and he does a lot of in-store communication in retail and one of his visions is to be able to test, prototype and research these in-store communication methods/displays in a virtual 3d environment.
He showed me this video which got me extremely excited!
This is supposed to be a Tesco supermarket and it was made for an Heineken shopper-case.
Inspired by the guest lecture from Marcello and my father's business, I wanted to create a supermarket where people could have the usual shopping experience from the comforts of their home.
I highly believe there is a future for VR in online retail (especially in these weird Covid-19 times), since retailers prefer to have customers walk around in their physical store where they can influence consumers choices and where customers are familiar with. From personal experience, I can say that I don’t like online (supermarket) shopping, I prefer walking through a store where I can see the products as I walk around and remind me what I want to buy or do impulse shopping. VR could be the solution of making online shopping feel like the physical experience.
This is what I tried to entice with my very own (amateur) VR experience. I would prefer to call this a sketch than the actual final design of the idea.
LINK: https://virtual-supermarket.glitch.me/
SHOWCASE VIDEO
Footage from Iphone (Magic-window)
Footage from Iphone (STEREO)
As you might be able to see on the footage, is the fact that when in stereo mode (cardboard), the shopping-list is not in view. Unfortunately I wasn't able to find a way to make the shopping-list responsive and stick to the bottom right of the screen; no matter the aspect ratio of the screen...
A-FRAME CODE
Reflection
In the chapter before I already kind of reflected on my vision of AR/VR in the future, but to re-cap:
I think VR isn't going to be as big as we all hope/think it will be...
In my opinion, AR will be a more natural step for us humans to integrate technology into our vision/world. However, for the one application of online shopping, I do see a future in VR. As the son of a marketing, shopper-orientated mind, I see the potential of this technology in this field. A field where product manufacturers are always trying to sell more of their products, to consumers, but also to the stores themselves. Where in-store activation and communication is key, where shops are always trying to differentiate themselves from others and where the consumer is king. In this field VR has a major potential to thrive (in my opinion), by giving consumers the experience they're used to from the comforts of their home, the opportunity for stores to differentiate themselves by offering a unique way of shopping and it even offers an opportunity to producers to market and communicate their products in a similar way they're used to. Online shopper marketing is currently in the very early stages and there aren't a lot of ways for the producers to grab the customers attention on a website, but this is prone to change. Especially with Virtual Reality.
My product is not perfect. However, I think I did an okay job at proving my concept. I don't see myself as an A-frame expert after this, but for me this could be a useful tool for sketching ideas/concepts. The downsides are that not a lot of documentation is out there and WebVR seems to be disappearing. Even with my limited knowledge of A-frame, I did manage to make something visually presentable and functioning (even by avoiding the use of JavaScript, which I struggled with).
If I would be an A-frame expert, I would have added an animation that scratches off the items off the shopping list when it is collected into the cart. I would also incorporate sounds and a way of moving around the space. Overall I'm pleased with what I achieved, however, it took me way more time then I initially expected. This was mostly due to the lack of tutorials and documentation of the current version of A-frame.