Comment la démonstration a été fabriquée

La démonstration de ce site est un film de vingt secondes dans un atelier au coucher du soleil. Vous n'appuyez sur aucun bouton de lecture : c'est votre molette qui fait avancer la caméra, en avant comme en arrière. Voici comment il est fait, combien il a coûté, et ce que nous avons cassé avant que ça marche.

L'atelier n'existe pas

Il n'y a ni studio, ni photographe, ni décor. La pièce est une scène en trois dimensions calculée dans un navigateur avec Three.js, la bibliothèque 3D du web.

Tout y est construit à partir de formes simples : des boîtes pour les murs, les montants de la baie vitrée et le plateau de la table, des cylindres pour les pieds, des plans pour le sol et les vitres. Les matières font le reste, avec un sol brillant qui renvoie la lumière, du verre traité en matériau physique et le métal mat des montants. Les documents posés sur la table, le plan du site et la fiche d'automatisation, sont dessinés à la volée sur une toile puis appliqués comme textures. C'est pour cela qu'ils restent nets à n'importe quelle distance et qu'on peut en changer le texte sans rien recalculer.

Toute la lumière vient d'une seule image

La scène n'est pas éclairée par des projecteurs posés un par un. Elle est éclairée par une image de ciel à 360 degrés, ce qu'on appelle une HDRI : un coucher de soleil dont chaque pixel porte une vraie valeur d'énergie lumineuse. Le moteur s'en sert à la fois comme fond visible derrière la baie et comme source unique d'éclairage.

C'est ce qui donne la chaleur du rendu, les reflets orange sur le sol et le contre-jour des montants. Une scène éclairée par une lumière ponctuelle a l'air d'un rendu 3D. Une scène éclairée par un vrai ciel a l'air d'une photographie.

L'image utilisée est « The Sky Is On Fire », de Greg Zaal, prise sur Poly Haven. Licence CC0, usage commercial libre, sans attribution obligatoire. Nous la citons quand même, parce que c'est elle qui fait le travail. Le fichier en 4K pèse 22,7 Mo ; il sert au calcul et n'est jamais envoyé au visiteur.

Six cents images, calculées une fois pour toutes

Faire tourner une scène 3D en direct dans le navigateur du visiteur, c'est demander à sa machine ce qu'elle ne peut pas toujours donner. Sur un ordinateur sans carte graphique dédiée, ou sur un téléphone, la scène saccade ou refuse de démarrer.

Nous avons donc fait l'inverse. La scène est calculée une fois, chez nous, image par image : 600 images en 2560 par 1440, avec accélération matérielle, à raison d'une position de caméra par image. Ces 600 images deviennent un film de vingt secondes à trente images par seconde. Le visiteur ne calcule rien du tout, il regarde une vidéo.

Le film est décliné en quatre fichiers pour ne jamais envoyer plus que nécessaire : 720 pixels de large pour 3,8 Mo, 1100 pixels pour 9,3 Mo, 1600 pixels pour 20,4 Mo, et une version verticale de 5,6 Mo servie aux téléphones, parce qu'un film au format cinéma sur un écran debout ne montre plus rien.

Le détail qui rend le défilement possible

Un film ordinaire ne se parcourt pas. Il est compressé en gardant une image complète de temps en temps et en ne stockant entre elles que les différences. Demandez-lui de sauter à la seconde 7,3 et il doit repartir de l'image complète précédente puis rejouer toutes les différences. Cela prend du temps, et cela se voit sous la forme d'un à-coup à chaque mouvement de molette.

Notre film est encodé avec chaque image en image clé. Les 600 images sont complètes et indépendantes. Vérification faite sur le fichier livré : 600 images, 600 images clés. Il pèse plus lourd qu'un encodage classique, et c'est le prix à payer pour que n'importe quelle position s'affiche immédiatement, dans les deux sens, aussi vite qu'on tourne la molette.

Deux pièges qui nous ont coûté du temps

Le premier : le film doit être entièrement chargé avant de démarrer. Un film que l'on parcourt à la molette ne se comporte pas comme un film que l'on regarde. Le lecteur ne peut pas deviner où le visiteur ira ensuite, donc il ne peut pas anticiper le téléchargement, et tant que le fichier n'est pas complet, sauter en avant donne une image figée. Nous affichons donc un pourcentage de chargement, et le film ne prend la main sur le défilement qu'une fois prêt. C'est moins élégant qu'un démarrage immédiat et beaucoup moins frustrant qu'un film qui bloque au milieu.

Le second : une capture d'écran pleine page casse le film. En vérifiant le rendu avec un navigateur piloté, nous avons découvert que l'outil redimensionne la fenêtre pour photographier toute la page d'un coup, ce qui modifie la hauteur de référence utilisée par le film et le désynchronise. Les vérifications se font donc en tranches, à taille d'écran réelle. Le genre de détail qui n'a rien à voir avec le produit et qui mange une soirée.

Ce que ça a coûté

Zéro euro de licence. Three.js est libre, la HDRI est en CC0, le calcul s'est fait sur la machine de l'atelier, l'encodage avec un outil libre. Le seul coût est du temps, et il était intéressant à dépenser : la même chaîne sert maintenant à produire des visuels de produit sans photographe ni banque d'images.

C'est aussi la réponse à une question que les clients posent souvent sans la poser vraiment, celle de savoir si nous savons faire autre chose que brancher des outils les uns aux autres.

À voir ici : la démonstration.