La plupart des sites de campagne affichent la progression avec une barre. Elle se remplit de gauche à droite. Tout le monde applaudit poliment.
On nous a demandé de montrer un million de miles de conduite plus verte répartis sur tout le Vietnam, et une barre de progression nous a semblé du gâchis pour un aussi beau pays.
Alors on a construit le pays.
Le voici. Ce n'est ni une vidéo ni une capture d'écran — c'est la scène elle-même. Faites-la tourner, zoomez sur les montagnes. Puis attrapez le curseur en bas et regardez les forêts pousser.
Prenez votre temps. La suite ne va pas s'envoler.
Une barre de progression, c'est une occasion manquée
Voilà ce qu'il y a de curieux avec la géographie en marketing : les marques sont posées dessus en permanence et ne s'en servent presque jamais.
Vos clients sont quelque part. Vos magasins sont quelque part. Votre campagne cartonne à Hanoï et ne décolle pas à Cần Thơ, et quelqu'un a ce fait dans un tableur, dans une colonne, à côté d'une autre colonne. Un pays est le graphique le plus intuitif jamais inventé, et on s'obstine à l'aplatir en barres.
Dès que le lieu réel apparaît à l'écran, trois choses se produisent sans qu'on ait rien demandé :
L'objection habituelle, c'est qu'une carte est décorative. Elle ne l'est pas. Elle est l'interface.
Ce que vous faites réellement tourner
Le Vietnam de cette fenêtre est un vrai modèle d'élévation, pas une illustration de modèle d'élévation. Le Fansipan est haut parce que le Fansipan est haut.
Sur un ordinateur correct, le relief est rendu en 58 296 triangles. Les routes et les rivières qui le parcourent viennent des données OpenStreetMap : c'est pour ça que le réseau routier passe vraiment là où il passe, et c'est pour ça qu'il y a une ligne d'attribution dans le coin de la carte — les données OSM sont libres d'utilisation, elles ne sont pas libres de faire croire qu'on les a produites.
Tout tient dans un seul fichier HTML autonome. Le maillage du terrain y est cuit sous forme de blob binaire, les polices sont embarquées, les modèles aussi. Aucun serveur de tuiles à payer, aucune clé d'API à faire tourner, rien qui cassera dans dix-huit mois parce qu'un prestataire aura changé sa grille tarifaire. Vous pouvez mettre le fichier sur une clé USB : il fonctionne encore en avion.
Ce dernier point n'est pas un gadget. C'est exactement la situation d'un client qui regarde un pitch dans une salle de réunion au wi-fi hostile.
Rendre un pays reconnaissable n'est pas une question d'exactitude
C'est la partie qui nous a surpris la première fois.
On peut modéliser un littoral au mètre près et voir les gens plisser les yeux quand même. La reconnaissance ne vient pas de la précision, elle vient des quatre ou cinq endroits pour lesquels une personne éprouve vraiment quelque chose. La carte nomme donc le Fansipan, la baie d'Ha Long, Hué et le delta du Mékong, et laisse le reste être beau et anonyme.
Même logique pour les décors. Les arbres ne sont pas botaniquement exacts. Il y a un toit de pagode au nord, quelques maisons sur pilotis, un amas de bâtiments là où une ville devrait être — tout en low-poly, tout peu coûteux à dessiner, et tout cela travaille énormément à vous convaincre que vous regardez un endroit plutôt qu'un objet.
Une carte exacte à 100 % et lisible à 0 % est un export SIG. On ne nous a pas demandé un export SIG.
Le curseur, c'est là que vit la campagne
Tout ce qui précède est du décor. Le mécanisme, c'est le curseur.
Tirez-le et le pays verdit : les collines nues se couvrent de forêt, les couleurs changent, le compteur grimpe vers le million. Ramenez-le à zéro et l'endroit redevient pâle et vide. C'est tout le récit de la campagne en un seul geste, et il faut environ quatre secondes pour le comprendre, sans une ligne de texte.
On revient sans cesse à ce schéma parce qu'il inverse la relation habituelle. D'ordinaire, le public lit la progression de la campagne. Ici, il la manipule, donc il doit découvrir à quoi ressemble le maximum. Tout le monde pousse le curseur jusqu'au bout. Tout le monde.
Ensuite, on ajoute les numéros de cirque
Une fois qu'un pays est à l'écran et tourne à une bonne cadence, le spectacle coûte presque rien, alors on ne s'est pas retenus :
Rien de tout cela n'est techniquement difficile une fois la scène en place. C'est justement le sujet. Ce qui coûte, c'est le pays ; les moments de bravoure, c'est un week-end.
Faire tenir 16 Mo à carreau
Passons à la moitié ingrate, parce qu'une carte que personne ne peut charger est une carte que personne n'a vue.
Ce fichier unique pèse environ 16 Mo, en grande partie du relief. Ce qu'on fait pour ça :
Ce qu'une carte comme celle-ci ne sait pas faire
Soyons honnêtes.
Ce n'est pas du SIG en direct. Les données de la démo sont simulées — ce compteur est un curseur, pas une base de données, et une vraie campagne a besoin d'un serveur derrière, avec de vrais trajets, de vraies identités et un vrai dispositif anti-fraude avant d'annoncer publiquement le moindre chiffre.
Ce n'est pas non plus un moteur d'itinéraires. Il ne vous dira pas le chemin le plus rapide de Hué à Đà Nẵng. Il dessine les routes ; il ne réfléchit pas dessus.
Le relief est stylisé. Élévation réelle, mais dramatisée : les hauteurs sont exagérées, parce qu'un Vietnam géographiquement honnête vu depuis l'orbite est assez plat et assez ennuyeux.
Et c'est une page lourde. Magnifique, mais lourde. Tout ce qui vise un large public mobile reçoit une version allégée, un palier plus bas et un repli en 2D — un vrai compromis, pas une note de bas de page.
Les cartes qu'on peut construire pour vous
Si votre campagne contient un où, elle veut probablement une carte. Quelques formes qu'on aime :
On les construit en Three.js, avec de vraies données d'élévation, de la vraie géométrie OpenStreetMap et des modèles faits dans Blender — le même pipeline que celui décrit dans notre process de proposition de campagne. Si vous préférez voir ce qu'on fait d'autre en WebGL, il y a tout un studio par ici et un catalogue de jeux de marque.
Ou sautez la lecture et envoyez-nous un brief. S'il y a un pays dedans, on est déjà intéressés.
La carte du Vietnam est un prototype conceptuel conçu et développé par Code Crush pour un pitch de campagne Toyota Vietnam. Les chiffres de miles, récompenses et progressions de la démo sont illustratifs. Géométrie des routes et des rivières © les contributeurs d'OpenStreetMap.
Mots-clés
