- 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
Aucun commentaire pour le moment.