Client

DMI

Technologies
  • Three.js
Le rôle de LittleBox

Architecture de solution et développement web

Kia Motors est un constructeur automobile dont le siège est en Corée du Sud, reconnu pour sa production de véhicules vendus dans le monde entier. Au-delà de son travail automobile, Kia investit dans des initiatives culturelles et de style de vie qui mettent en valeur la créativité, la diversité et la communauté. Pour la saison des fêtes, Kia a désiré mettre de l’avant une vitrinr numérique interactive célébrant les fêtes et traditions multiculturelles du monde entier.

Notre rôle

La pièce maîtresse de cette campagne était une animation 3D sur mesure conçue pour incarner l’enthousiasme précédant la saison des fêtes. Le brief demandait une visualisation de style bokeh de lumières festives multicolores et flottantes qui évolueraient dynamiquement en intensité à l’approche de la fin décembre.

Notre rôle comprenait :

  • La conception et le développement complets du moteur d’animation en Three.js et Blender.
  • La modélisation mathématique du comportement des lumières bokeh et de la dynamique des particules.
  • L’intégration d’un système de compte à rebours qui augmentait progressivement la complexité et l’éclat de l’animation à mesure que le mois de décembre progressait.
  • La livraison de l’animation pour le microsite interactif ainsi que d’une extension de navigateur redirigeant les nouveaux onglets vers l’expérience.

Conception et défis de l’animation

Lumières bokeh et dynamique des particules

Aucune bibliothèque existante ne fournissait le visuel dont nous avions besoin ; la simulation bokeh a donc été conçue à partir de zéro.

  • Chaque particule possédait des propriétés de taille, d’opacité, de flou et de mélange de couleurs, en respectant les règles de la couleur additive.
  • Un effet de scintillement a été introduit par un cycle rapide d’activation/désactivation de l’opacité, simulant l’étincelle d’une étoile.

Modèle de mouvement

Nous avons combiné deux facteurs pour obtenir un mouvement naturel et évolutif :

  • Vecteurs radiaux linéaires (particules s’éloignant de l’origine).
  • Mouvement organique / Brownien (dérive semblable à la neige, aléatoire subtile).

Le rapport entre ces deux forces changeait avec le temps : au début du compte à rebours, le mouvement était calme et erratique ; à l’approche de la fête, la composante linéaire dominait, rendant les particules plus énergiques et directionnelles.

Ingénierie des performances

À mesure que le compte à rebours s’intensifiait, plus de particules, des fréquences d’images plus élevées et une luminosité accrue étaient ajoutées par couches.

  • Une optimisation minutieuse a été nécessaire pour garantir une performance fluide sur tous les navigateurs, y compris la gestion de la mémoire et l’équilibrage de la charge GPU.
  • Des variables telles que le nombre de particules, les niveaux de flou et les intervalles de mise à jour ont été ajustées pour augmenter l’agitation visuelle sans compromettre l’expérience et la lisibilité.

Composant d’extension de navigateur

Parallèlement à l’animation, nous avons livré une extension pour Chrome et Firefox :

  • Chaque nouvel onglet redirigeait automatiquement les utilisateurs vers le microsite des fêtes de Kia.
  • Ceci a assuré que l’expérience soit mise en évidence de manière répétée pendant la période de la campagne.

Résultats clés

Le résultat du projet fut une vitrine saisonnière immersive qui a combiné avec succès l’art et l’ingénierie, présentant un système d’animation 3D sur mesure qui évoluait précisément au rythme du compte à rebours des fête. Cette réalisation finale, performante et agnostique au navigateur, a démontré comment le rendu 3D complexe et les calculs derrière le mouvement des particules pouvaient efficacement traduire l’image de marque, soulignant la position de Kia en tant qu’entreprise qui valorise la créativité, l’inclusivité et l’innovation, tout en nous donnant l’occasion de pousser Three.js et Blender dans de nouveaux territoires.