Les dessous de Space Planner, l’app qui vous aide à trouver le meuble parfait

Le besoin

Lorsqu’on cherche à parfaire l’aménagement de son chez soi, on devient facilement sélectif. On cherche cette petite table basse qui serait idéale pour poser son café après diner ou le canapé qui fait pile l’angle du salon sans déborder sur la salle à manger.
 

On peut alors trouver cela contraignant et chronophage de devoir faire des allers-retours au magasin pour prendre et comparer mesures, couleurs, et designs.
 

De grandes enseignes se sont déjà intéressées à la problématique, IKEA notamment avec IKEA place, une application de réalité augmentée qui permet de visualiser virtuellement les articles de leur catalogue dans le monde réel.
 

Cependant, même si on peut mieux se projeter sur leurs produits, cela ne facilite toujours pas la recherche d’un meuble qui rentrerait spécifiquement dans un espace.
 

​

Notre approche est donc de partir de la réalité de l’utilisateur et de lui présenter uniquement les meubles qui tiennent dans l’espace qui lui est disponible.
 

Ainsi l’utilisateur peut visualiser son intérieur plus rapidement et être assuré d’avoir fait le bon choix.

Notre réponse

Nous avons prototypé cette idée avec ARKit d’iOS.
 

Le principe est de profiter des capacités de mesure d’ARKit et d’utiliser les dimensions des meubles afin de filtrer le catalogue présent sur l’application.
 

​

Les moyens

Pour réaliser cette application, il suffit d’assembler différentes briques pour lesquelles il existe déjà des tutoriels.
 

Pour autant certains points ont quand même nécessité un peu de réflexion.
 

La mesure

Mesurer au sol est assez simple. Il y a beaucoup de tutoriels qui montrent comment ARKit permet de mesurer des dimensions réelles. A l’époque nous nous étions inspirés de celui-là.
 

Cela dit, mesurer une hauteur sans pouvoir s’appuyer à un mur demande un peu plus d’imagination. Nous avons dû cacher des plans verticaux tout autour de la zone et projeter la position du doigt sur ce mur afin d’en déduire la hauteur souhaitée par l’utilisateur.
 

​

La recherche

Nous connaissons déjà toutes les dimensions des meubles de notre catalogue. Comment pouvons-nous les comparer à notre espace sachant que ce dernier peut-être de n’importe quelle forme ?
 

Grâce au dessin de l’utilisateur, nous connaissons les positions exactes de chaque coin de l’espace auquel nous sommes contraints.
 

L’astuce est de dessiner une courbe de Bézier qui passe par chacun de ces points sur un plan horizontal et de vérifier si elle contient tous les sommets de la bounding box de chaque meuble.
 

​

L'affichage

Le continu

Il est assez simple d’afficher des modèles en AR. ARKit se base sur SceneKit donc il suffit de charger une scène et d’ajouter son contenu à la « scène ARKit ».
 

Le véritable enjeu est d’avoir de beaux meubles à afficher qui fassent réels, qui trompent suffisamment pour qu’ils se fondent naturellement dans la réalité.
 

Compte tenu du fait qu’il s’agisse de meubles, les géométries des éléments ne devraient pas être très compliquées. Si jamais l’objet présente de légers reliefs, ceux-ci peuvent être gérés avec une normal map pour réduire le nombre de polygones.
 

Cette étape clé ne s’improvise pas et nécessite de pouvoir faire appel à des artistes 3D ou à acheter des assets de bonne qualité.
 

Au final sur notre projet les assets les plus volumineux sont les normal maps. Elles sont détaillées au point de donner l’illusion que nos meubles sont en velours, en bois, en laine ou en cuir.
 

L'éclairage

Pour que la scène ait l’air encore plus réaliste, nous ancrons les meubles dans le monde réel en affichant leurs ombres.
 

Pour ce faire nous pouvons par exemple inclure dans la scène de chaque meuble un sol avec une ombre projetée dessus. Cette solution est assez simple à mettre en place.
 

Une autre façon de faire est de laisser ARKit calculer et afficher cette ombre. Pour cela il faut :
 

• Une lumière ambiante qu’on peut configurer pour qu’elle corresponde à la lumière ambiante réelle détectée par ARKit.

• Une lumière directionnelle qui produit l’ombre.
   

La lumière directionnelle produit une ombre pour tout élément 3D de la scène donc il faut bien penser à désactiver les ombres pour tout élément qui ne devrait pas être concerné par les ombres (les éléments d’UI par exemple).

...et tout le reste

Une fois que notre application prévoit la base de ce qui est primordial pour son utilisation, on peut ajouter les fonctionnalités qu’on attendrait dans ce type d’application (déplacer l’objet, prendre des photos, ajouter le produit à un panier…etc)

​

Les prochaines étapes