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.

Si vous en avez marre de confier vos notes perso à Notion ou Evernote et que vous voulez reprendre le contrôle de vos données, Alexandrie va vous plaire ! C'est une app open source française qui permet de prendre des notes en Markdown au travers d'une interface plutôt moderne, tout en gardant vos données là où vous voulez qu'elles soient : Chez vous.

Alexandrie, c'est avant tout un éditeur Markdown amélioré qui vous permet d'organiser vos notes par workspaces, catégories et tags. L'interface est clean, la recherche instantanée, et vous pouvez exporter vos notes en PDF ou Markdown !

Ce qui est cool, c'est que l'app fonctionne aussi hors ligne grâce à la technologie PWA. Vous pouvez donc bosser sur vos notes dans le train ou l'avion, et tout se synchronise dès que vous avez du réseau. Et si vous voulez partager des notes avec d'autres personnes, y'a un système de permissions pour gérer qui peut voir et modifier quoi.

Côté technique, Alexandrie tourne sur Vue/Nuxt pour le frontend et Go pour le backend, avec une base MySQL et un stockage compatible S3 et comme d'hab, tout ça se déploie avec un simple "docker compose up".

La grosse différence avec Notion ou Obsidian, c'est que vous contrôlez tout. Vos données restent sur votre serveur ou votre machine, rien ne transite par des serveurs américains. C'est donc de l'auto-hébergé, 100% hors ligne si vous voulez, et c'est compatible avec plein d'autres apps Markdown si vous souhaitez migrer plus tard.

C'est bien de voir une app française qui mise sur la souveraineté des données plutôt que sur le cloud américain ! C'est en train de devenir quelque chose de très recherché en ce moment. Bon après, faut être prêt à gérer soi-même l'hébergement, mais avec Docker c'est pas la mer à boire non plus.

Et si vous appréciez ce genre de découvertes, vous pouvez me soutenir sur le Patreon de Korben .

Voilà, si vous cherchez une alternative open source à Notion qui respecte votre vie privée, c'est par ici .