AstroClick, c'est un simulateur interactif du système solaire en 3D, 100% gratuit et open source, qui tourne dans le navigateur. Ce projet a été développé par Charlie, un lecteur du blog (merci !), et perso je trouve que ça mérite un petit coup de projecteur.

AstroClick, le système solaire en cubes

Quand vous débarquez sur le site, vous avez le Soleil au centre avec toutes les planètes qui gravitent autour en temps réel. Vous pouvez donc zoomer, dézoomer, tourner autour... et même accélérer le temps pour voir les orbites défiler plus vite. Le rendu est en voxel (oui, des petits cubes), ce qui donne un côté Minecraft spatial pas dégueu du tout.

Et c'est pas juste joli puisque chaque planète est cliquable et vous donne des infos astronomiques réelles. On retrouve aussi l'ISS, Hubble et même le télescope James Webb dans le lot. Vous pouvez même basculer entre une vue simplifiée (pour que ce soit lisible) et une vue à l'échelle réelle des distances... et là vous comprendrez VRAIMENT à quel point l'espace c'est grand. Genre, IMMENSE 😱.

La navigation dans AstroClick, plutôt fluide

Côté technique, c'est du React Three Fiber avec Next.js 14, le tout sous licence MIT sur GitHub ( github.com/sartilas/AstroClick si vous voulez fouiller le code). Les textures viennent de la NASA, y'a même de l'audio ambiant pour l'immersion. Hop, vous activez le son et vous vous la jouez Thomas Pesquet depuis votre canapé. L'appli est traduite en 6 langues (français, anglais, espagnol, russe, chinois et hindi) donc tout le monde peut en profiter.

Si vous avez des gamins curieux ou si vous êtes vous-même un peu geek de l'espace, c'est un super outil pédagogique, je trouve. Attention par contre, sur mobile c'est pas ouf... le WebGL rame un peu sur les petits écrans (sauf si vous avez un flagship récent), mais sur un PC ça envoie par contre. Pas d'abonnement, pas de tracking, juste de la science accessible en un clic. Si vous avez envie de explorer le système solaire dans votre navigateur , c'est le genre de projet qu'on ne voit pas assez.

Bref, merci Charlie pour le taf. Allez voir AstroClick et amusez-vous bien !

Y'a un truc qui me rend joyeux avec le web, c'est quand des devs décident de pousser les technos dans leurs retranchements juste pour prouver que c'est possible.

Et VoxCSS , c'est totalement ça : une bibliothèque JavaScript qui permet de faire du rendu voxel complet en utilisant uniquement le DOM et le CSS. Alors attention, quand je dis "uniquement", je veux dire sans WebGL et sans l'élément <canvas>. Juste des éléments HTML empilés intelligemment qui tirent parti de l'accélération matérielle du navigateur pour les transformations 3D.

Pour cela, VoxCSS utilise des grilles CSS superposées sur l'axe Z pour créer un espace volumétrique. Chaque niveau de profondeur est une grille CSS classique, décalée avec des translations 3D. Les voxels eux-mêmes sont des cuboïdes HTML composés de plusieurs faces positionnées avec des rotations CSS.

Par défaut, la scène utilise une perspective de 8000px et le fameux transform-style: preserve-3d pour que la magie opère... Un pur hack de génie qui transforme votre navigateur en moteur 3D sans passer par les API habituelles !

Et le rendu n'est pas dégueu du tout puisque le moteur gère les couleurs, les textures, et même différentes formes comme des rampes, des pointes ou des coins pour sortir du simple cube de base. Pour ceux qui se demandent comment ça se passe pour les ombres, VoxCSS simule également un éclairage en jouant sur l'opacité des faces, ce qui donne ce petit relief indispensable au style voxel. Vous pouvez même choisir entre différentes projections (cubique ou dimétrique) pour donner le look que vous voulez à votre scène.

Côté performances, même si on parle de manipuler potentiellement des milliers d'éléments DOM, l'équipe de Layoutit Studio a bien bossé. Y'a un système de "culling" pour ne pas calculer les faces cachées (on n'affiche que la surface extérieure, quoi) et une option de fusion (le mergeVoxels) qui permet de regrouper les cubes adjacents pour alléger la structure HTML. C'est pas activé par défaut, mais c'est indispensable dès que votre château Minecraft commence à prendre de l'embonpoint.

L'installation se fait via

npm install @layoutit/voxcss

La lib est hyper flexible puisqu'elle propose des wrappers pour React, Vue et Svelte, tout en restant utilisable en vanilla JS.

Vous posez votre caméra (<voxcamera>) pour gérer le zoom et la rotation, vous injectez votre scène (<voxscene>), et roule ma poule. Cerise sur le gâteau pour les artistes, VoxCSS inclut un parser pour charger directement vos fichiers .vox créés dans MagicaVoxel.

Si vous voulez tâter la bête sans coder, allez faire un tour sur Layoutit Voxels, l'éditeur qui sert de démo technique. Ils ont aussi sorti Layoutit Terra qui génère des terrains entiers avec la même techno.

Franchement, pour un gros jeu en prod, OK pour du WebGL, mais pour créer des éléments interactifs stylés, des petites scènes 3D ou juste pour la beauté du geste technique, c'est un sacré bel outil.

Et puis, faire de la 3D sans toucher à un seul shader, ça a un petit côté cool je trouve.