HYPERSOLID : un site concept de studio conçu comme une seule scène 3D en temps réel

VITON¹³ conçoit des sites concepts pour montrer sa palette dans des secteurs où elle n’a pas encore de projet client à présenter. HYPERSOLID est le plus technique d’entre eux : le site d’un studio fictif de technologie créative qui réalise du web immersif, de la 3D en temps réel, de la XR et des installations, dans le genre où toute la page est une scène 3D et où l’interface n’est que du texte posé dessus. Le studio, ses projets et son adresse sont inventés, et le site est en anglais.

La commande que nous nous sommes donnée avait deux moitiés. La scène devait plaider seule la cause du studio : un emblème, des mondes, des transitions et une musique créés pour ce site et calculés sur l’appareil du visiteur, pas lus depuis une vidéo. Et il fallait que cela reste un vrai site : du texte réel au-dessus du canevas, une navigation au clavier, une version plus calme pour qui demande moins d’animations et une version statique pour les navigateurs sans WebGL.

Une seule adresse et 12 vues : un récit au défilement en cinq chapitres, la galerie des projets, huit pages de projet, About et Contact, chacune avec sa propre route hash (#/work, #/work/aurora-dome, etc.) pour pouvoir y renvoyer et l’ouvrir directement. L’emblème est un tesseract, un cube à quatre dimensions qui tourne en 4D et se projette en 3D à chaque image. Ses arêtes sont des tubes de verre aux reflets irisés de couche mince, entourés de particules calculées par la carte graphique (7 000 sur ordinateur, 2 400 sur téléphone) et de rayons de lumière volumétrique.

Les cinq chapitres sont la déclaration du studio, le tesseract qui se déplie en six panneaux de savoir-faire, un tunnel fait de ses arêtes, les projets et une invitation à écrire. La galerie est un anneau 3D de huit projets inventés : une aurore pour un planétarium, un jeu d’arène pour la sortie d’une paire de baskets, un musée WebXR des sons disparus, une identité générative de festival, une sculpture météo, un configurateur de parfum, un océan de données et un menu holographique. Chaque carte est un monde en shaders calculé en direct par raymarching. Une transition en shader emporte la carte vers le projet en plein écran, avec l’idée, le rôle, la stack, trois paragraphes, trois images capturées dans le monde lui-même et un lien vers le projet suivant.

La bande-son se compose de quatre morceaux procéduraux générés avec la Web Audio API. Le son reste coupé jusqu’à ce que le visiteur l’active, et le code audio ne se charge qu’à ce moment-là. About réunit un manifeste de cinq lignes et quatre étapes de travail ; Contact affiche une adresse d’exemple signalée comme non consultée et un lien vers le portfolio de l’auteur pour les vraies demandes.

Le site est écrit avec three.js 0.186 et assemblé par esbuild en un dossier statique aux URL relatives : il fonctionne depuis n’importe quel chemin, et sur le portfolio il vit dans /demos/hypersolid/. Le post-traitement ajoute du bloom, une aberration chromatique, une profondeur de champ, des rayons de lumière, un mappage des tons, un vignettage et du grain. L’appareil détermine l’un des trois niveaux de qualité : la scène complète sur ordinateur, une scène allégée sur téléphone et sur les machines modestes, et une page statique au même contenu quand WebGL manque. Quand les images ralentissent, le moteur baisse la résolution des mondes les plus lourds au lieu de sauter des images, et le rendu se met en pause quand l’onglet est masqué.

Chaque vue porte du vrai texte HTML au-dessus du canevas : titres, liens et textes de projet qu’un lecteur d’écran peut lire et qu’un clavier peut atteindre, avec Tab, Entrée, Échap et les flèches dans la galerie. Avec la réduction des animations, les vols de caméra deviennent des fondus. Le premier affichage est un préchargeur écrit dans le HTML lui-même, avant l’arrivée du moindre script ou de la moindre feuille de style ; il dessine le logo arête par arête en comptant les fichiers chargés. Le build ne contient aucun fichier de texture, de modèle 3D, de vidéo ou de son : seulement du code, deux polices variables, les icônes et une image d’aperçu pour les réseaux sociaux.

Il existe aujourd’hui un concept qui fonctionne, à l’adresse tarasovvitalii.com/demos/hypersolid/ : une adresse et 12 vues, huit mondes en shaders et quatre morceaux procéduraux, réalisés les 23 et 24 septembre 2026. Le 24 septembre, le compteur d’images du moteur a été relevé dans 14 états (les cinq chapitres, la galerie et les huit mondes) dans Chrome en mode headless, sur un MacBook doté d’une puce Apple M5, en 1600 × 1000 à l’échelle Retina : la médiane est de 60 fps et le relevé le plus bas de 55,7. Le script principal, three.js compris, pèse 0,77 Mo, soit 0,21 Mo en gzip ; tout le dossier publié fait 1,1 Mo.

Lighthouse, lancé trois fois par appareil sur l’adresse réelle le même jour, a donné 100 en accessibilité et 100 en bonnes pratiques sur mobile comme sur ordinateur, et une performance de 91 sur mobile et de 94 sur ordinateur (médianes). La page transfère 0,4 Mo au chargement, le CLS est de 0 et le LCP de 2,8 s sur mobile et de 0,9 s sur ordinateur. Le score SEO de 63 est voulu : la démo porte un noindex, car la page destinée aux moteurs de recherche est la fiche du projet sur le portfolio.

HYPERSOLID est un concept réalisé par VITON¹³ pour montrer sa palette, pas une commande de client. Le studio, ses huit projets et son adresse d’exemple sont fictifs : le site n’a ni client, ni domaine propre, ni utilisateurs, ni trafic, ni demandes, et il ne revendique ni clients, ni prix, ni presse. Il n’a ni formulaire de demande ni outil d’analyse d’audience : il ne prouve donc rien sur la conversion, ni que nous ayons livré de la WebXR, une installation ou l’un des autres projets inventés : ils n’existent que sous forme de mondes en shaders sur ce site.

La fréquence d’images provient d’une seule machine équipée d’une puce Apple récente, dans Chrome en mode headless, un seul jour. Elle ne dit rien des ordinateurs portables plus anciens ni des téléphones, et elle tient en partie parce que le moteur baisse la résolution des mondes lourds. Lighthouse mesure le chargement, pas la fluidité de la scène 3D, et son test mobile ralentit le processeur et le réseau, mais pas la carte graphique. La démo est volontairement tenue à l’écart des moteurs de recherche : elle n’a donc aucun résultat de recherche à montrer.

Comment vérifier le portfolio d’une agence web →