Présentations web 3D : ce que sept decks concept de VITON13 révèlent du format

Sept decks concept sur un seul moteur

En septembre 2026, VITON13 Studio a ajouté à son portfolio un ensemble de sept concepts de présentation. Chacun répond à une mission que les clients confient encore et encore à un studio : le club de football Avrora qui vend une offre de sponsoring, la start-up logistique NEXORA qui lève une série A, le lancement de la bague connectée NOVA, les logements de la tour résidentielle NORD 81, l’entreprise spatiale ORBITA, les offres partenaires du festival PULSE 2027 et la clinique génomique HELIX. Chaque marque, chiffre, nom et numéro de téléphone y est inventé, et la dernière diapositive de chaque deck le précise.

Ensemble, ils totalisent 78 diapositives en russe : douze dans le pitch destiné aux investisseurs et onze dans chacun des six autres. Une page d’index présente les decks avec leur nombre de diapositives, leur transition et un PDF à télécharger. Les sept tournent à l’adresse tarasovvitalii.com/demos/presentations/, le portfolio du fondateur du studio, et le studio les documente dans une étude de cas, avec leurs écrans et leurs mesures.

Des diapositives qui font voler la caméra au lieu de couper

Dans cet ensemble, une présentation web 3D est une page web à deux couches. À l’arrière se trouve une scène three.js en direct : un stade de nuit, une tour de verre, un satellite au-dessus de la Terre. Au premier plan viennent des diapositives HTML ordinaires, avec des titres, des chiffres et des graphiques. Chaque diapositive possède sa propre station de caméra dans la scène ; quand le présentateur avance, la caméra vole donc vers le plan suivant pendant que le texte change par-dessus.

Les diapositives s’enchaînent avec l’une des sept transitions 3D choisies pour chaque marque : un sprint avec des traînées de vitesse pour le club de football, un cube qui pivote pour le pitch d’investissement, une traversée pour la bague, une page de livre qui se tourne pour la résidence, une orbite pour l’entreprise spatiale, un retournement glitch pour le festival et une montée en douceur pour la clinique. À l’ouverture d’une diapositive, les chiffres défilent jusqu’à leur valeur, les histogrammes grandissent et de petites légendes 3D s’accrochent à des parties de la scène.

Comme le texte reste du HTML, on peut le sélectionner, le copier et le faire lire par un lecteur d’écran, et il reste net sur n’importe quel affichage. C’est la principale différence avec une vidéo ou un export animé, où chaque mot se transforme en pixels.

Des scènes générées par le code plutôt que des images de banque

Aucun des sept decks n’utilise de modèle 3D téléchargé, de photo ou de vidéo. Le stade est construit à partir d’environ 43 000 sièges et supporters, la tour NORD 81 s’élève étage par étage sur la diapositive du chantier, la bague se décompose en six pièces légendées et la Terre sous le satellite d’ORBITA est générée par des shaders. Les objets répétés, comme les sièges et les fenêtres, sont dessinés avec InstancedMesh de three.js, qui affiche de nombreuses copies d’un même objet en un seul appel de dessin, et le bloom est le seul post-traitement.

Générer les scènes permet de garder des fichiers légers et laisse une diapositive modifier la scène elle-même : les lumières s’allument, une foule bouge à 124 BPM, une hélice change de matériau. Cela signifie aussi qu’aucun élément d’un deck n’est une image sous licence qui pourrait expirer ou exiger une mention de crédit.

Des commandes de présentateur empruntées aux logiciels de diaporama

Un deck doit survivre à une salle de réunion ; le moteur conserve donc les habitudes que les gens ont déjà. Les touches fléchées, la barre d’espace, PageDown et PageUp font passer d’une diapositive à l’autre, et c’est ce qu’envoient la plupart des télécommandes de présentation ; la molette de la souris et un balayage du doigt font de même. La touche O ouvre une vue d’ensemble de toutes les diapositives sous forme de cartes inclinées sur une grille 3D, F passe en plein écran et A lance la lecture automatique.

Chaque diapositive a sa propre adresse : un commercial peut donc envoyer un lien qui s’ouvre directement sur la cinquième. Sur téléphone, la scène reste en haut de l’écran et le texte de la diapositive passe dans un panneau défilant en dessous, si bien que les diapositives longues restent lisibles sur un écran étroit. Un script distinct rend chaque deck en PDF 16:9, ce qui couvre les pièces jointes, l’impression et toute personne qui ouvre le deck sur une machine qui peine avec la 3D.

Poids et fréquence d’images relevés le 28 septembre 2026

Le 28 septembre 2026, le studio a compté les images avec requestAnimationFrame, l’appel du navigateur qui s’exécute une fois à chaque rafraîchissement de l’écran, pendant trois secondes sur deux diapositives de chaque deck. Le test a tourné dans Chrome en mode headless sur un MacBook doté d’une puce Apple M5, dans une fenêtre de 1600 × 1000 à l’échelle Retina. Les 14 relevés sont tous ressortis à 60 fps, entre 60,1 et 60,2.

Chaque deck charge entre 235 et 252 Ko de JavaScript compressé en gzip, three.js et GSAP compris. L’ensemble du build pèse 27 Mo, dont 14 Mo pour les sept versions PDF, qu’un visiteur ne télécharge que s’il les demande. Ce sont des chiffres de laboratoire issus d’une seule machine récente : ils ne disent rien d’un vieil ordinateur portable de bureau ni d’un téléphone d’entrée de gamme, qui n’ont pas été mesurés.

Quand un deck dans le navigateur l’emporte sur un PDF, et quand il perd

Un deck dans le navigateur justifie son coût quand la présentation est envoyée par lien et ouverte sur un écran correct : une offre de sponsoring qui doit faire ressentir l’ambiance d’un soir de match, un projet résidentiel où le bâtiment est le produit, un pitch où un graphique qui grandit se suit plus facilement qu’un graphique figé. Il est utile aussi quand le même deck est présenté en direct puis transféré, car le destinataire voit exactement ce que la salle a vu.

Il perd quand le deck sera surtout imprimé, lu sur un vieil ordinateur, modifié par plusieurs personnes dans un logiciel de diaporama ou ouvert sans connexion internet. Dans ces cas-là, c’est la copie PDF qui porte le contenu, et un fichier de diapositives classique peut tout simplement être le meilleur choix. La question honnête à se poser avant d’en commander un est donc la suivante : où ce deck sera-t-il réellement ouvert ?

Il existe aussi une voie intermédiaire. Une entreprise peut garder son fichier de diapositives habituel pour l’édition interne et ne commander une présentation web 3D que pour la version destinée aux sponsors, aux investisseurs ou aux acheteurs. Le deck web devient alors l’édition soignée d’un récit déjà validé, ce qui raccourcit la partie coûteuse du travail et évite de reconstruire des scènes chaque fois qu’un chiffre change dans le tableur.

Limites de l’ensemble concept

Les sept decks sont un concept qui montre un format, pas un travail réalisé pour un client. Le club de football, la start-up, la bague, la tour, l’entreprise spatiale, le festival et la clinique n’existent pas : l’ensemble ne prouve donc rien en matière de fonds levés, de sponsorings vendus ou d’appartements réservés. Les decks sont uniquement en russe, et la démo est volontairement tenue à l’écart des moteurs de recherche, pour que ce soit la page de l’étude de cas, et non la démo, que les gens trouvent.

La fréquence d’images a été mesurée sur une seule machine, un seul jour. Un vrai projet ajouterait des tests sur les appareils que le public utilise réellement, un mode allégé pour les puces graphiques modestes et les chiffres propres au client à la place des chiffres inventés.

Éléments à réunir avant de commander un deck 3D

La scène est la partie la plus visible d’un tel deck, mais ce sont toujours les diapositives qui portent l’argumentation. Le travail avance plus vite quand le client arrive avec un récit déjà ordonné : la phrase unique que le public doit retenir, les cinq à sept chiffres qui la prouvent, les fichiers du logo et les couleurs, et une idée de l’objet que la scène doit montrer, qu’il s’agisse d’un bâtiment, d’un produit, d’un lieu ou d’un itinéraire sur une carte.

Il est utile aussi de décider tôt qui présentera le deck, et où. Un deck projeté depuis un ordinateur portable, un deck envoyé par e-mail à des investisseurs et un deck ouvert sur un téléphone pendant un événement n’appellent pas la même quantité de texte par diapositive, ni le même équilibre entre la scène et les mots.