Retour d’expérience client : Application Intéractive sous Unreal Engine

Last updated on août 21st, 2023 at 10:29 pm

Introduction

Présentation du client :

Pour ce projet, j’ai travaillé avec la société française Dampere, avec qui je travaille déjà depuis quelque temps sur des visualisations 3D de leurs produits pour le web. Leur savoir-faire consiste à mettre en valeur vos projets d’architecture avec de la tôle perforée sur mesure et attrayante visuellement. Du recouvrement de façade ajourée au cœur de corps un de la clôture des brises vues, du mobilier urbain ou des éléments de décoration intérieure.

Présentation du contexte :

Avant de commencer ce nouveau projet sous André l’angine, la société présentait déjà depuis quelque temps des modèles 3D nus sur fond blanc, que le client pouvait visualiser sous tous les angles. Mais pour ce type de produit, je leur ai proposé d’aller plus loin et de les intégrer dans un univers réaliste aux dimensions de leurs produits.

Objectifs du projet :

L’objectif concret du client est d’avoir une application interne utilisable par les commerciaux et de pouvoir présenter à ces prospects une expérience nouvelle en 3D temps-réel interactive réaliste, connectée à leur catalogue produit en temps réel et ainsi augmenter leur taux de conversion et leur chiffre d’affaires. Cela vous intéresse ? Lisez la suite de l’article, je vous explique tout en détail.

Voici un teaser vidéo de l’application dans sa V1 :

Présentation du Projet

Les bases du projet :

La base du projet part du fait que j’avais déjà construit avec eux une base de produits avec une interface utilisateur simple pour gérer les différents types de produits et les différents types de motifs techniques et créatifs qu’ils proposent à leur clientèle à travers des configurateurs simples pour leur site internet. Voici l’aperçu de l’un d’entre eux :

Le problème du web GL et des sites internet en général, c’est que l’on est limité au niveau de la puissance de rendu et donc difficile d’obtenir des visuels complets avec des environnements en temps réel, souvent contraints de se tourner vers le précalculé à travers des clips vidéo.

Ayant une grande expérience dans la production 3D, il me manquait encore une flèche à mon arc : Unreal Engine. J’avais déjà utilisé le logiciel pour des travaux personnels ou pour suivre des tutos pour apprendre son maniement. Mais quoi de mieux que de travailler sur un projet concret de grande envergure pour apprendre davantage et gagner en compétence.

Stratégie adoptée :

Ne doutant plus de mes capacités et de mes compétences dans le domaine de la visualisation 3D, j’ai mis en avant le fait que nous allions pouvoir produire une application 3D autonome exécutable sur un ordinateur portable équipé d’une carte 3D décente ou sur mon ordinateur portable connecté à internet utilisant un hébergeur d’applications Unreal Engine pour interagir via un streaming vidéo (je reviendrai plus tard sur cette option).

De plus, nous pouvions mutualiser le développement de la base de données catalogue et de son API réalisé sur mesure pour la connecter à cette application Unreal Engine, et ainsi répondre à un besoin essentiel du client en termes de cohérence et de mise à jour de l’application sans avoir à revenir à la compilation de l’exécutable !

Alors, quand j’ai proposé à Dampere de réaliser pour eux une application 3D pour mettre en avant leurs produits où les clients allaient pouvoir se promener dans un environnement urbain contemporain lié à la nature, observer les produits dans un cadre réel, les personnaliser à volonté, ils ont dit oui sans hésiter.

Développement du Projet

Phases de réalisation :

La première étape du projet a consisté à définir un cahier des charges précis et des périmètres pour voir ce que nous allions implémenter. Nous avons défini un type de device minimum pour exécuter l’application, la nécessité d’être connecté ou non à internet, le type d’art rendu attendu, les interactions possibles, les modes de déplacement et l’expérience utilisateur dans sa globalité.

La première grosse étape de production a consisté à travailler sur un proxy 3D pour valider les dimensions de l’environnement par rapport aux différents produits, puis de travailler sur la partie blueprint qui nous permettrait de connecter l’API privée du client à l’application 3D pour récupérer les variations produits et le catalogue de motifs.

Quand cette première étape de production a été validée, nous avons pu passer à la création du level design en détail et pouvoir construire un storytelling et un univers qui correspondait aux attentes de la marque. Clairement, cette partie fut la plus amusante du projet car j’ai eu carte blanche et j’ai pu exprimer ma créativité. L’utilisation d’assets 3D de la marketplace d’Unreal Engine tels que des façades ou des arbres a permis d’accélérer ce processus.

Outils utilisés :

Côté 3D, j’ai travaillé avec Blender pour tout ce qui est modélisation des produits et de leurs variations. Pour les motifs du catalogue, j’ai travaillé sur des profils matériaux PBR dans Blender en travaillant les textures dans Photoshop également. Mes importations FBX dans Unreal Engine étaient donc prêtes à l’emploi.

Pour les plans larges de l’application, j’ai réalisé une importation d’un quartier de Paris (3D Google Earth), via une capture réalisée avec l’application Render Doc, que j’ai optimisée en lowpoly. Cela m’a permis de gagner du temps en apportant un petit plus de réalisme pour les plans aériens.

Côté base de données, nous avons utilisé le plugin Unreal Engine “VA Rest” pour communiquer avec l’API, récupérer les dernières données, gérer les téléchargements et le cache dans l’application.

Défis et Solutions

Difficultés rencontrées :

Pour moi, la plus grande difficulté rencontrée sur ce projet a été de pouvoir recruter un nouveau freelance expert en blueprint Unreal Engine. Même avec mon background de développeur et ma facilité à utiliser la partie 3D d’Unreal Engine, je n’avais jamais pris le temps de creuser davantage les blueprints, et je savais que dans le cadre de ce projet, j’allais avoir besoin d’un expert pour réaliser la connexion à la PI et les différentes interactions.

Le deuxième défi était lié au fait que chaque commercial n’avait pas un PC équipé d’une carte 3D. Il nous fallait donc trouver une solution pour exécuter l’application pour ces derniers.

Comment ces défis ont-ils été surmontés ?

Pour les blueprints, après avoir sélectionné 8 profils, puis échangé plus longuement avec 4 d’entre eux, j’ai pu mettre au défi les 2 meilleurs pour retenir mon nouveau développeur avec qui la collaboration s’est très bien passée avec beaucoup de professionnalisme.

Pour les PC qui n’étaient pas équipés d’une carte 3D, nous avons testé plusieurs solutions de virtualisation serveur qui permettent d’héberger des applications Unreal Engine dans le cloud et de permettre aux utilisateurs de vivre l’expérience à travers un streaming vidéo qui réagit aux inputs clavier, souris ou manette. Cette technologie existant déjà dans le cloud gaming, certaines sociétés se sont spécialisées dans des services du même type pour les professionnels.

Ces deux grands défis m’ont permis de pousser la réalisation du projet plus loin que ce que j’avais imaginé initialement, pour la plus grande satisfaction du client.

Résultats du Projet

Atteinte des objectifs :

Les objectifs ont été atteints avec succès et je dirais même dépassés, car le résultat visuel était au-delà des espérances du client et la fonctionnalité 2, qui permet des mises à jour en toute autonomie des variations et des motifs, fonctionne parfaitement. La prise en main par l’équipe de commerciaux a été un vrai jeu d’enfant, similaire à celle d’un jeu vidéo. L’utilisation de l’application par les commerciaux chez le client ou sur les stands de salon a permis d’asseoir davantage la notoriété du client, de surprendre les acheteurs et donc d’augmenter leur chiffre d’affaires.

Voici un aperçu de l’utilisation de l’application :

Aller plus loin !

L’application Dampere City a évolué depuis sa première version et présente à présent, au sein de son environnement, un immeuble présentant des garde-corps évolutifs. Il est également prévu d’ajouter d’autres produits à l’avenir.

L’application permet également de réaliser des visuels et des clips vidéo précalculés dans le but de produire du contenu marketing pour le site internet du client et ses réseaux sociaux. Ce point n’avait pas été identifié dans le scope originel du projet, mais s’est imposé comme une évidence avec son utilisation.

Voici des rendus précalculés pour le site internet réalisé avec l’application :

Satisfaction du Client

Comme tous les projets réalisés en collaboration avec ce client, l’application Dampere City a été un vrai succès et continue sa vie et son développement à travers les années. Le résultat a dépassé de loin les attentes du client et de sa direction. Voici le témoignage laissé par la responsable commerciale de l’entreprise :

Citation d’Olivia :

Conclusion

Ce que j’ai appris de cette expérience ?

Cette expérience pour moi fut très enrichissante et m’a permis de débloquer un premier niveau en termes de conception d’application Unreal Engine. Je m’étais déjà associé avec d’autres free-lances ou d’autres prestataires sur d’autres projets mais j’ai beaucoup apprécié cette collaboration avec mon nouveau développeur de blueprint. Savoir tout faire c’est bien mais s’entourer des experts de chaque savoir-faire c’est beaucoup mieux ^^. Je suis à présent prêt pour relever de nouveaux défis et construire de nouvelles expériences 3D avec d’autres clients, pour promouvoir leur univers de marque à travers des expériences réalistes ou conceptuelles. De la présentation de produits en réalité virtuelle à l’exposition d’œuvres d’art dans des environnements hors du commun, dans des métavers sociaux et interactifs.

Laissez-moi votre commentaire :

N’hésitez pas à partager votre propre expérience ou à nous contacter pour discuter de vos propres besoins en matière d’expérience 3D. Nous serions ravis de travailler avec vous pour créer des expériences immersives qui mettent en valeur votre univers de marque de manière innovante et captivante.