3D car interior, une expérience mobile en WebGL

01 décembre 2015   by Oleg Gasioshyn
Back
Cet article a été rédigé par Oleg Gasioshyn, Directeur de Création chez Eleks Digital, l'agence à l'origine du 3D Car Interior
Une façon plus concrète de découvrir l’intérieur d’une voiture en utilisant le WebGL


La réalité virtuelle nous a tous toujours fascinés et inspirés en tant que professionnels. Nous avons expérimenté plusieurs sessions de jeux sur Oculus Rift ainsi que les capacités des solutions réalisées en WebGL. Cette attirance s’est métamorphosée en détermination : nous devions créer une expérience en VR.

Notre but était de créer une expérience qui ne serait pas seulement une publicité, mais une partie de l’écosystème digital d’une entreprise et un outil utile pour les utilisateurs, comme le Penny Skateboard Customizer ou le Moto X Build Tool.




Pour notre expérimentation, nous avons choisi l’industrie automobile car la plupart des clients potentiels ont tendance à faire leurs choix d’achat de voiture en ligne. C’est pourquoi les marques de voiture font tout pour fournir de nombreux supports d’information aux consommateurs afin de les motiver à se rendre dans une concession. De plus, n’importe quelle voiture virtuelle est aujourd’hui modélisée en 3D, donc nous n’avions pas à commencer notre travail en partant de zéro. Et, oui, nous adorons tout simplement les voitures.



Le concept


Regardons une voiture du point de vue d’une personne lambda :


 
Voilà ce que nous avons :

Nous évaluons l’extérieur de la voiture par les moyens de la perception visuelle, ce qui répond à cette question : « Est-ce que je l’apprécie ?’ ». Photos et vidéos fonctionnent le mieux pour répondre à ce critère.

La performance est un critère d’évaluation totalement logique. « Est-ce que la voiture répond à mes besoins ? Est-ce qu’elle est assez puissante pour moi ? ». Combiner les données avec des images est une très bonne manière de représenter la performance digitalement.


Le naturel statique des photos ne peut pas entièrement montrer toutes les possibilités d’interaction et de customisation de l’intérieur.


En général, les marques de voiture utilisent des photos panoramas en 360 afin de montrer l’intérieur de leurs voitures. Cependant, le naturel statique des photos ne peut pas entièrement montrer toutes les possibilités d’interaction et de customisation de l’intérieur.

En d’autres termes, il n’existe aucune façon de découvrir les options de customisation d’une voiture afin de vous aider à vous décider d’aller ou non visiter une concession et de tester la voiture ou de continuer à chercher d’autres options. Nous avons donc décidé d’accepter ce challenge de « manque d’interaction » et…



Entrez dans le WebGL

La modélisation 3D offre des possibilités infinies pour la personnalisation de voitures. Elle apporte une interaction concrète d’une façon très naturelle avec les éléments de l’intérieur. Cependant, toucher des éléments de cet intérieur via un ordinateur ne semble pas aussi naturel que nous le voudrions. La souris crée de la distance entre l’utilisateur et la voiture. Tourner l’angle de vue de la caméra avec la souris est vraiment moins immersif qu’un mouvement physique.


Presque tout le monde possède un support mobile, et même les machines les moins performantes sont assez puissantes pour faire fonctionner de la 3D sous navigateur.



Nous avons donc pimenté l’expérience avec de la réalité virtuelle

Certaines marques automobiles importantes ont déjà fait leur premier pas dans le monde de la réalité virtuelle.  Des tests de conduite en vidéos VR ont été réalisés pour la Volvo XC90 et la Lexus RC F. Mais les casques de réalité virtuelle sont encore à l’état de démo, et ne seront sûrement pas en état de toucher le marché avant le premier semestre 2016 (la date de sortie officielle de l’Oculus Rift). En gardant ça en tête, nous avons réfléchi sur les options d’autres supports.
La solution est littéralement venue de nos poches : les gadgets sur mobile ! Presque tout le monde possède un support mobile, et même les machines les moins performantes sont assez puissantes pour faire fonctionner de la 3D sous navigateur.
En plus, en utilisant l’accéléromètre, nous pouvons créer une expérience profondément engageante, même sans machine comme le Google Cardboard. Un site mobile peut aussi être aisément intégré dans le site principal d’une marque de voiture en tant qu’expérience multi-écrans. Ou il peut fonctionner séparément avec un lien court imprimé sur une publicité print ou intégré dans un QR code.



Ok, ça semble plutôt bien, mais qu’en est-il de la mise en œuvre ?

La mise en oeuvre

Au sein de ELEKS Digital, nous avons une limite de 4 semaines pour toutes nos expérimentations. Cela nous stimule et nous oblige à nous concentrer sur la définition des fonctionnalités de l’expérience et mettre de côté toute tâche trop chronophage. Nous aimons par dessus tout faire une course contre la montre et créer quelque chose de nouveau avec notre équipe, petite mais polyvalente.

Après quelques sessions de brainstorming plutôt intenses, nous avons limité notre to-do-list afin d’y inclure seulement les fonctionnalités les plus importantes, ce qui nous a permis de valider le concept général et de finir le projet dans les 4 semaines originellement allouées.

La vue 360° en utilisant un gyroscope – la façon la plus captivante de regarder l’intérieur d’une voiture.

Changer l’angle de vue de la caméra – la capacité à observer l’intérieur d’une voiture depuis différents angles en percevant l’espace d’une façon très naturelle. C’est le plus gros avantage de la 3D comparée à la photo panoramique en 360°.





Changer les textures des sièges et du tableau de bord – l’option de configuration de l’intérieur d’une voiture par excellence qui permet la combinaison des préférences en matière de design et donc l’évaluation de celles-ci qui intervient dans une étape précoce du processus de décision.

Eléments interactifs. Nous avons rendu l’expérience plus évidente et naturelle en donnant au processus de découverte de la voiture un caractère réaliste au niveau des interactions de l’utilisateur.

Une interface utilisateur évidente et naturelle. La meilleure des interfaces n’est pas une interface. Nous refusons catégoriquement d’ajouter des contrôles entre les détails de l’intérieur et un utilisateur dans le but de rendre le processus d’exploration totalement homogène. Certes, à cause du support digital, l’interaction est limitée au tapotement, au déplacement et d’autres gestes, mais sans contrôles ou boutons intermédiaires. En combinant ces fonctionnalités, nous avons créé un modèle 3D réaliste, et nous nous sommes assurés qu’il fonctionnait avec fluidité sur divers smartphones. Quand on parle de web mobile, le challenge c’est toujours d’avoir de bonnes performances, spécifiquement dans le but de rendre la 3D compatible avec les navigateurs mobiles. Et ça, pour être honnête, c’est ce qui nous a le plus donné mal à la tête sur ce projet !


Nous avons donc redoublé d’astuce pour qu’un modèle pauvre en polygones ressemble finalement à un modèle riche en polygones !


Les graphismes vs la performance

Apparemment, les rendus les plus réalistes d’intérieurs de voiture sont aussi les plus lourds. Pour notre projet, nous devions créer un modèle 3D compatible avec les navigateurs, nous devions donc l’optimiser. Nous avons commencé avec un modèle 3D qui possédait énormément de polygones. Une fois importé en WebGL, notre modèle aurait aisément pu fonctionner sur des applications desktop, mais la plupart des supports mobiles refusaient de le télécharger. Nous avons donc redoublé d’astuce pour qu’un modèle pauvre en polygones ressemble finalement à un modèle riche en polygones ! A la fin, nous avons donc un intérieur de voiture très réaliste mais peu gourmand en ressources et qui permet à l’utilisateur de personnaliser les textures et le design des éléments de la voiture en un seul tapotement.





L’approche en Réalité Virtuelle a fait de cette prévisualisation une expérience plus naturelle et immersive, qui amène presque l’utilisateur dans la voiture. Nous n’avons eu aucun problème à convertir la 3D en VR. En fait, c’était même plus facile que de convertir depuis des vidéos ou des visuels. Nous avons séparé l’angle de vue en deux caméras, une pour chaque œil, et nous avons utilisé les données de accéléromètre pour les contrôler.


Le WebGL est la meilleure option quand vous voulez que votre expérience soit interactive.

Bien que le web immersif soit encore un compromis entre les graphismes et les performances, le WebGL est la meilleure option quand vous voulez que votre expérience soit interactive. Et vice versa : si le réalisme est crucial pour votre projet, vous devriez probablement opter pour une vidéo ou des images.

Avec Google Cardboard, vous pouvez prévisualiser l’intérieur de la voiture et interagir avec les éléments en les fixant du regard pendant plusieurs secondes. Ou vous pouvez connecter votre mobile à un ordinateur via websocket et utiliser les boutons du clavier pour interagir. Quand un téléphone est utilisé comme un objet complémentaire et que l’ordinateur agit comme le device principal, c’est une pratique inversée à la plupart des expériences multi-écrans


Pour résumer

La technologie a radicalement changé l’expérience utilisateur. Même au sein d’une démo, nous ressentons tout le potentiel du WebGL et de la VR pour l’écosystème digital des marques. Néanmoins, la faisabilité technologique devrait être établie pour chaque idée, peu importe combien elle peut paraître super ou simple au premier abord. En créant un petit espace de travail par le biais d’une démo, vous pouvez voir l’expérience de façon concrète et comprendre si le concept a du potentiel pour une future évolution et en quoi consistent les contraintes technologiques. Bien que nous n’ayons pas implémenté énormément de fonctionnalités dans notre projet, l’idée générale semble avoir fait ses preuves !


- Oleg Gasioshyn
Directeur de Création chez Eleks Digital


3D Car Interior


logo ultranoir
logo ultranoir