Space planner: How we make your furniture fit in ?

Why?

Time has become more and more invaluable. So, when it comes to looking for the perfect sofa in your living room, or just that coffee table you need when you read your book after diner, you might feel that it’s a waste of time to go back and forth to the Furniture store to compare measurements, color tones or designs.
 

Brands such as IKEA have addressed this matter with an AR app that enables people to virtually materialize the items of their catalog into the real world.
 

However, even if you can see the actual piece of furniture in your home, it still takes quite some time to find the specific item that would fit in your environment.
 

​

Our approach is to start from the user’s environment and pull from the catalog only the items that fit in its available space.
 

Thus, the user can visualize how his future home will look like even faster and be assured that his choice is the right one.
 

What?

We prototyped our idea on iOS with ARKit.
 

The global idea is to benefit from ARKit’s measuring abilities and to use the known dimensions of furniture in order to filter the catalog to display in the app.
 

​

[ SCREENCAST ]

How?

Implementing this idea is basically assembling different modules for which tutorials have already been published.

However, some parts are not so obvious and represent a good deal of work.
 

Measuring

Measuring on the floor is quite simple. There are many tutorials showing how ARKit enables you to measure real life distances. At the time, we used this example as inspiration.
 

Measuring a desired height, however, needed a bit more imagination. It required using hidden vertical planes as “walls” for the drawn area and projecting the finger location against those walls to understand what height the user wants.

​

Searching

For each item of our catalog, we already know the official dimensions. How do we test them against the limits of our space?
 

Well, not only do we have the measurements of each side of our space, but we also know the vertices which represent the exact position of each corner of our space.
 

So, our trick is to draw a Bezier Path that follows those vertices on a 2D plane and check for every item if the vertices of its bounding box can be contained in this Bezier Path.
 

​

Displaying

Loading

Loading an asset from its scene file is fairly simple.

The tricky part is to have really nice-looking pieces of furniture that would seem real.

Given the type of objects we want to display, the geometries involved shouldn’t be complicated. If the object shows small reliefs, they can be handled with the normal map to reduce the number of polygons.

In our prototype, the normal maps textures are the heaviest of our assets as they are detailed enough to make the surfaces look wooden, woolen, velvety or leathery.
 

Lighting

In order to make our scene look even more realistic we need to add shadows to our assets so that they would visually anchor into the real world.

One method, the simplest and most economic one, is to include into each item’s 3D scene a 2D shadow on the floor. Another one is to let ARKit calculate and display this shadow.

We chose to try the latter.

First, we have an ambient light which temperature and intensity depends on the light detected by the camera.

Secondly, we add a directional light above directed downwards. With this light, any 3D geometry will cast a shadow. If there are elements that shouldn’t cast a shadow (such as UI elements) you need to specify it for each node.

And so much more

Now our app contains the basics of our requirements, we can add the features that would be expected in such an app (moving object, taking pictures, adding to cart or wish list).

​

Next steps