While fiddling around with Vue.js, the single best Javascript Framework, I wanted to use vuetify to – well just because I wanted to. Vuetify can be compared to bootstrap enhanced with the google material design. It is made specifically for Vue.js which makes it very easy to use.

I wanted to build a form. A part of a website, that usually feels clunky. Especially bigger forms overstrain users just by looking at them. To battle this, I made some tweaks:

The cherry on my cake

We’ve recently launched a website for a franchise that specialized on removing mold within buildings. This topic brings a wide range of users: home owners, tenants and industrial companies. These personas have individual problems like a damp cellar or leakage in a flat roof hall. To guide the different usertypes through a navigation results in a complex navigation very quickly.

General Navigation, specialized user guidance

The analytics data shows that the chance is twice as high of a user clicking on that header element than a navigation item. This shows that the users can identify themselves and their problems through the illustration and are moke likely to engage with the site that way.

Going a step further

The data also shows that most website users are home owners who have a problem with damp walls. The number of these users is so high, that we are going to change the header to guide them quicker and easier.

This post was supposed to be a bigger post (Yes I am an expert in advertising my posts), explaining how I went on and did the amazing thing of fitting my AR object into the real world without having it “pop out” too much. My thought was that when an object is rendered into the real world, we need to account real world camera problems (in reverse) like the white balance.

Finding the color temperature

The color temperature expresses what kind of light color comes from a light source. A warm light lets a scene appear in orange tones. A cold or very bright light dyes the scene in blueish colors. Calculating the correct color temperature and making a correct white balance is a very complex thing. There are some algorithms online but doing this calculation from an RGB value is not ideal. Just imagine a picture of a very blue car. Just because the pixels are blue, does not mean that the light is warm or cold. Sure, in a sunset the blue would be desaturated but it also just could be the car paint that is older on a cloudy day.

Manual testing

I did the one thing a good developer would do in this situation: Just don’t do it, try something else first. My initial thought was not “I have to be able to do an automated white balance”. I wanted to know if a white balance would help setting an object into the world at all. So I made myself a little interface so that I was able to change the lighting of my scene by clicking on a sun, cloud, candle or lightbulb icon. Just like a camera interface.

The result

You can see the result above. The left lion has a pure white light shining at it and the left one has an adjusted one to the room I was in. It does not seem to be any big different if the light of my unity scene is set to white, yellowish or blueish. The object just looks different, but not more or less fitting. What seems to be more important is the overall brightness and a shadow that lets the object stay on something.

All in all this testcase did not confirm my expectation but that is not a bad thing at all. I now know that we can play around with different lighting and just have to keep an eye on the brightness.

Below you can see an image of the objects in a darker environment. They definitely should have been darker to fit in.

In 2015 Google introduced a new API for Chrome which made it possible to connect to bluetooth devices – through the browser (Link).

For a browser thats a big step. Why would you need to connect a browser to a physical thing? Well, physical web things are coming fast (There is a smart pillow that tracks your sleep!). In order to use them correctly, you always have to install a companion app. This sucks. Once these physical devices are here for the mass marked and not just a funny gadget, you will have a massive load of apps whose only purpose is to connect to a thing. Google is going to change this.

How exactly this can work is nicely explained by Scott Jenson, employee at google and one of the fathers of all this:

360° tracked AR

Google offers an Unity Framework if you want to use the accelerometer data to track the head movement. In a first test, this worked perfectly well. I had a box floating in front of me. Even the cardboard push button worked and I was able to interact with the box. To make this whole thing go Augmented- instead of Virtual Reality, I cut the hole and put a video feed into the background of my scene. By the way, my test Phone is a Samsung Galaxy S7. Here is a list why this did not work at all:

• the camera resolution was way too bad, so the background was fading completely
• the accelerometer tracking is not fast and accurate enough to turn the ingame camera as fast as the camera screen was
• the phone couldn’t keep up with the needed CPU power to display the video feed while continiously calculating the position of the box (I had like 10 fps)

To sum it up: A todays phone is not capable to generate a nice AR 360° experience. Sure, there might be tweaks here to improve the performance but not in a way that the outcome would be a satisfying experience. Is this the reason google didn’t make their Daydream View AR ready?

Augmented Reality without 360° tracking

This seemed like traveling back in time several years. First I tried that new fancy VR/AR Headset tracking stuff and now I am going back to hold your phone in your hand and look at it normally. Okay, who needs a Headset to use 360° AR? You obviously can look at it normally too, just like a youtube 360° Video. Sadly, the problem with the tracking speed of the accelerometer stays. The object was moving too slowly to keep up with the camera. Additionally, if you shake your phone slightly, the object wiggles a bit more than the camera. It just felt like its attached to a rubberband.

I had to go one step further back. Augmented reality with your phone, without 360° tracking. The key point here is, that it is possible to track objects through your phone. So unlike the floating cube, you are able to pin a gameobject directly on a surface or object. No wiggles, no rubberband. The magical tracking of images or objects can be archieved through the vuforia plugin.

With this technique I was able to create a very nice application in no time. We are creating a custom advent calendar every year and send them to our customers. One was just lying around. Take a look at what I did with it here.

If you want to see how I made this app, please come back later or hit me up. The tutorial is on its way.