Sans conteste l’un des sites web 3D les plus impressionnants

 (bruno-simon.com)
30 points par GN⁺ 2025-12-10 | 4 commentaires | Partager sur WhatsApp
  • Un site portfolio 3D créé par le développeur web Bruno Simon, qui propose un environnement interactif où l’utilisateur explore en conduisant une voiture
  • Construit sur Three.js, il met en œuvre un rendu 3D en temps réel en exploitant à la fois WebGL et WebGPU
  • Le site intègre des éléments ludiques comme un système de succès, des éléments secrets et une fonction de messages visiteurs (Whisper)
  • L’intégralité du code et les fichiers Blender sont publiés sur GitHub sous licence MIT, et la musique peut être utilisée librement sous licence CC0
  • Exemple marquant de la combinaison entre technologies web et interaction créative, il illustre les possibilités de l’expérience web 3D

Présentation du portfolio 3D de Bruno Simon

  • Un portfolio interactif qui permet d’explorer un monde 3D dans le navigateur tout en découvrant les projets et expérimentations de son créateur
    • L’utilisateur peut piloter une voiture dans un espace virtuel et interagir avec différents objets
    • La phrase « Don’t break anything! » instaure une ambiance d’exploration légère et amusante
  • Prend en charge à la fois les commandes clavier comme WASD, les flèches, espace, entrée, ainsi que les entrées tactiles et manette
    • Propose diverses actions : déplacement, saut, freinage, booster, klaxon, suspension, etc.

Éléments ludiques et système de succès

  • Le site comprend 38 succès (Achievements), débloqués via certaines actions
    • Ex. : « Traveler » (visiter toutes les zones), « Cookie Clicker » (accepter 1000 cookies), « Flip of faith » (réussir un backflip), etc.
    • Les conditions incluent aussi la distance parcourue, l’expérience de différentes météos ou encore la destruction de caisses explosives
  • Le temps d’obtention des succès et la progression s’affichent en temps réel, avec aussi une fonction de classement serveur (Leaderboard)
    • En revanche, si le serveur est hors ligne, l’enregistrement des scores est impossible

Whisper et fonctions communautaires

  • Les visiteurs peuvent laisser de courts messages via la fonction Whisper
    • 30 caractères maximum, avec un seul message par utilisateur
    • Lorsqu’un nouveau message est ajouté, les plus anciens sont supprimés
    • Les insultes sont interdites et il est possible de choisir un drapeau par pays
  • Si le serveur Whisper est hors ligne, la fonction de messagerie est désactivée

Stack technique et composition open source

  • Le rendu 3D est réalisé avec Three.js
    • Three.js est une bibliothèque créée par mr.doob, avec prise en charge de WebGL et WebGPU grâce à TSL (Three.js Shading Language) ajouté par Sunag
  • Le moteur physique est Rapier, l’audio utilise Howler.js, et les polices sont Amatic SC et Nunito
  • L’ensemble du code source est publié sur GitHub (brunosimon/folio-2025) sous licence MIT
    • Les fichiers Blender sont également inclus, ce qui permet de les modifier librement et de s’en servir pour apprendre
    • Le code serveur reste privé pour des raisons de sécurité, mais le portfolio fonctionne aussi sans serveur

Musique et ressources supplémentaires

  • La musique de fond a été spécialement composée pour le portfolio par Kounine
    • Distribuée sous licence CC0, elle peut être téléchargée et réutilisée librement
    • Disponible dans le dépôt GitHub à l’emplacement /static/sounds/musics
  • Des ressources d’apprentissage Three.js sont aussi proposées via le cours en ligne Three.js Journey
    • Il couvre tout le processus de création d’un site web 3D avec Three.js
  • Le processus de développement du portfolio est documenté dans une série de devlogs YouTube
    • Même après la mise en ligne, la création de la dernière vidéo est toujours en cours

Portée globale

  • Le portfolio de Bruno Simon est un exemple mêlant technologies web, interaction de jeu et expression artistique
  • Grâce à l’open source et à des licences libres, il peut servir de projet web 3D réutilisable et pédagogique
  • En tant qu’exemple concret d’implémentation de l’écosystème Three.js et du rendu basé sur WebGPU, il montre la direction prise par les graphismes web de nouvelle génération

À lire aussi

4 commentaires

 
m00nlygreat 2025-12-10

C’est juste un jeu, en fait..
 
wedding 2025-12-10

Le directeur du développement qui a ignoré l’avis d’utiliser tjs pour le projet principal de l’entreprise et a insisté pour utiliser babylon.js… Le directeur du développement qui, loin d’assumer sa décision, a emporté l’entreprise et des effectifs pour créer une nouvelle société… Vous allez bien, j’espère ?
 
xguru 2025-12-10

Je l’avais laissé ouvert un moment pour faire des tests... et mon MacBook M1 est sur le point de décoller. Mais il est excellent, c’est vrai.
 
GN⁺ 2025-12-10
Avis Hacker News
  • Le cercle de chargement était rempli, mais en réalité il a encore fallu attendre quelques secondes
    Après 1 ou 2 rafraîchissements, ça s’est bien lancé, et dans l’ensemble c’est un super boulot
    Cela dit, ce serait bien de pouvoir dézoomer davantage. Bravo à Bruno
  • Pour ceux chez qui le chargement est lent : c’est un site portfolio conçu comme une exploration où l’on se déplace en conduisant un véhicule type jeep avec des commandes AWSD dans un style de jeu cozy
    Il y a de petits objets en forme de sanctuaire représentant chaque réseau social, et si on les percute avec la voiture ils tombent, mais les liens restent cliquables
    Il existe aussi un état global, par exemple foncer dans un portail augmente le compteur « sacrifice au dieu du chaos »
    Dans l’ensemble, le style artistique est cohérent, et après environ 5 minutes d’exploration, le tout m’a semblé très abouti
    Cela dit, plutôt que « le site 3D le plus cool » comme dans le titre HN, il vaut mieux y voir un site portfolio extrêmement bien réalisé
    • Je l’ai contrôlé au toucher sur iPhone et ça m’a rappelé Genshin Impact
    • Ça fonctionnait étonnamment bien même dans le navigateur ddg sur iOS. Assez impressionnant
    • J’avais envie de demander si AWSD était une faute de frappe pour WASD
  • Si je revenais 25 ans en arrière, mon moi de 15 ans aurait sans doute passé des dizaines d’heures sur un « jeu » comme ça
    J’avais fait pareil avec le jeu gratuit Chex Quest qu’on trouvait dans les boîtes de céréales
    Mais aujourd’hui, j’ai regardé le site pendant environ 30 secondes, j’ai pensé « sympa », puis je l’ai fermé aussitôt
    C’est probablement dû à (A) l’évolution de la valeur du temps, (B) des critères d’immersion plus élevés pour les jeux, ou (C) au fait d’avoir déjà passé beaucoup trop de temps à jouer
    • J’adorais aussi vraiment ChexQuest. J’y ai même rejoué récemment, et j’ai trouvé le CD pour 1 dollar chez RE-PC à Seattle, donc je l’ai acheté immédiatement
    • À l’époque, l’accès aux jeux était bien plus limité qu’aujourd’hui. Maintenant, il existe des jeux bien plus riches comme Lonely Mountain: Downhill
    • Ces temps-ci, j’ai tellement de culpabilité à l’idée de ne rien faire que, finalement, je n’arrive plus à faire grand-chose correctement
    • Au fond, la raison est peut-être tout simplement qu’on a vieilli
    • Ce site m’a rappelé The Messenger, déjà passé sur HN auparavant. Il est possible que je préfère celui-là
  • Le site est cool, mais il n’a rien de révolutionnaire
    Il y a eu d’innombrables démos three.js/babylon.js ces 10 dernières années, et celle-ci se situe à peu près dans le top 10 %
    C’est amusant et très bien exécuté, mais ça n’apporte rien de nouveau et l’efficacité de transmission de l’information est faible
    Comparé à un jeu 3D indé, il reste encore un écart en termes de finition
    • Mon onglet de navigateur a planté
    • L’OP a parlé du site « le plus cool », pas du plus innovant. Je serais curieux de voir d’autres démos d’un niveau comparable que tu pourrais partager
  • Les cours Threejs de Bruno sont excellents. J’en suis à environ 2/3 du cursus, et c’est structuré, avec une documentation de qualité
    Si l’avis d’un débutant en threejs a le moindre poids, je recommande vivement
  • Sous Chrome, ça ne fonctionnait pas et l’onglet s’est figé
    • Sur mon W11 et sur MacOS 15.7.2, ça marchait bien dans Chrome
    • Ça fonctionnait parfaitement aussi dans Firefox sous Linux
    • Dans Chrome sous Linux, la prise en charge de WebGPU est désactivée. Voir le document sur l’état de l’implémentation
    • Dans Edge, ça s’est figé un instant puis c’est revenu, avec la scène 3D affichée
    • Aucun problème dans Chrome version 142.0.7444.177 sous Windows
  • J’ai été surpris de voir que ça fonctionnait bien aussi sur mobile
    En revanche, quand on conduit avec les doigts, le menu d’appui long d’iOS s’affiche souvent et casse l’immersion
  • C’était un site incroyablement amusant et inventif
    On sentait le soin du détail et le plaisir, et j’ai joué au mini-jeu de course avec mon fils
    Je me demandais comment ceux qui ont fait 20 secondes s’y étaient pris. Y a-t-il un boost de vitesse ?
    • La touche Shift sert de boost. On peut voir les commandes sur le clavier près du point de départ
  • Les cours sont excellents, mais ce site ne me fait pas autant d’effet
    Je pense que la vraie valeur d’une technologie, c’est de savoir si elle permet de faire ce qu’on ne pouvait pas faire avant
    Par exemple, quand un homme de l’âge de pierre découvre une hache en acier, l’important n’est pas la hache elle-même mais la métallurgie
    De la même manière, plus que le bitcoin, c’est la cryptographie qui compte ; plus que threejs, c’est ce qu’on peut créer de nouveau avec
    Personnellement, j’ai l’impression qu’on peut faire bien plus avec threejs, react-three-fiber, les shaders, etc.
    Pour moi, ce qui est « cool », c’est ce qui nous fait voir le monde autrement
    On peut citer en exemple cette démo CodePen
  • C’est cool, mais en tant que site web, l’UX laisse à désirer
    J’espérais une innovation dans l’expérience de navigation qui justifie l’usage de la 3D, et c’est là que ça déçoit