La route de brique. Toulouse dessinée au trait, dans le navigateur

Ce qu'il y a derrière

Où dans Toulouse ? montrait une carte servie par une infrastructure publique, tuile par tuile. Cette page montre l'inverse : une scène qui ne demande rien au réseau après son chargement, et qui n'a aucun fichier d'image à télécharger, parce qu'il n'y en a pas.

Tout est géométrie, rien n'est image

Les façades, les arcades, la voiture et la poussière sont des arêtes calculées à l'exécution, pas des modèles importés. Le seul dégradé lumineux de la scène est dessiné dans un canevas de 64 pixels de côté au démarrage, en mémoire, et partagé par tous les points lumineux. Le ciel n'est même pas dans la scène 3D : c'est un dégradé CSS derrière une surface transparente, ce qui évite d'avoir à peindre un décor de fond à chaque image.

La couleur comme mesure de progression

Chaque matériau connaît deux états, sa couleur et le gris de même luminance, et une seule valeur les fait basculer ensemble. C'est la même mécanique qu'une jauge dans une application métier : une valeur unique, calculée à un endroit, et toute l'interface qui se met à jour sans que rien d'autre ne décide. Le gris de départ n'est pas choisi à la main, il est calculé depuis la couleur d'arrivée.

Le repli à plat, dix lignes de trigonométrie

À mi-parcours, l'angle de champ de la caméra se ferme de 62 à 8 degrés pendant qu'elle s'éloigne d'une distance calculée pour compenser exactement. Le point regardé garde sa taille à l'écran, mais la perspective s'aplatit jusqu'à ce que la ville ressemble à un dessin. Aucun sommet n'est déplacé, et l'effet se calcule dans la boucle en une dizaine de lignes. C'est le principe du travelling compensé, employé ici dans l'autre sens que d'habitude.

La marge est visible, pas seulement annoncée

Trois compteurs accompagnent la scène, sous les curseurs qui la règlent. Ils ne sont pas décoratifs et rien n'y est simulé : le nombre d'objets vient du contenu réel de la scène, les appels de rendu sont lus dans le moteur à chaque image, et la cadence est la médiane des cent vingt dernières, une médiane et non une moyenne pour qu'une image longue isolée ne la fasse pas clignoter. Triplez le contenu de la ville et vous verrez ce que la cadence devient.

Cette marge n'a pas été découverte après coup. Avant d'écrire la scène, un banc de mesure a fait tourner ses briques séparément, avec un multiplicateur de densité : à quatre fois le contenu, un iPhone de 2017 tenait sa cadence d'écran sur douze cents images consécutives. C'est ce résultat qui a décidé du contenu de la page, et non l'inverse.

Le mouvement se coupe si on le demande

Le grain de film, le balancement de la caméra et le voile blanc du basculement disparaissent quand le système signale une préférence pour un mouvement réduit. Le jeu reste jouable, il devient simplement calme. La boucle s'arrête aussi complètement quand l'onglet passe en arrière-plan, plutôt que de tourner au ralenti dans le vide.

Notre façon de travailler est détaillée dans notre approche du développement sur mesure, et les autres démonstrateurs sont regroupés dans la section jeux.