Layoutit Terra, un générateur de terrain entièrement en CSS

• Un outil web capable de générer des terrains 3D uniquement avec du CSS, fonctionnant dans le navigateur sans moteur graphique distinct
• Les utilisateurs peuvent créer des terrains de formes variées en ajustant la taille du terrain, la proportion de terres, le type de relief et le biome
• Propose des fonctions de manipulation visuelle comme la rotation de la caméra, l’inclinaison, le zoom, le déplacement et l’animation
• Le résultat peut être exporté aux formats Heightmap, VOX, TXT, PNG ou intégré dans Codepen
• Un projet expérimental qui met en œuvre un environnement visuel 3D uniquement avec des technologies CSS et élargit les possibilités de représentation graphique sur le web

---

Aperçu

• Layoutit Terra est un CSS Terrain Generator, un outil qui génère des terrains uniquement en CSS dans le navigateur
• Il réalise une visualisation en pur CSS, sans moteur 3D JavaScript distinct ni bibliothèque externe

Principales fonctionnalités

• Contrôle de la génération du terrain :
  • ajustement de nombreux paramètres comme world size, landmass coverage, terrain type et biome
  • aperçu de trois biomes : temperate, arctic et desert
• Réglages de la caméra :
  • ajustements détaillés possibles, comme rotate x(45°), tilt y(60°), zoom(34%), pan x(0px), lift y(0px)
  • option d’activation de l’animation

Export et partage

• Le terrain généré peut être exporté aux formats Heightmap, VOX, TXT, PNG
• Les fonctions Copy, Embed, Open in Codepen, Download permettent de partager et réutiliser le résultat

Structure de l’interface

• Boutons de contrôle d’édition comme Regenerate, Restart, Undo, Redo
• Fonction Import / Export pour charger et enregistrer des projets
• Prise en charge des modes d’affichage Minimap, Heightmap, Matrix

Éléments visuels

• Utilise diverses images d’arbres (tree2, tree4, tree5, etc.) pour composer les éléments visuels du terrain
• Chaque élément est placé sur une base CSS, ce qui permet d’obtenir un effet 3D via le seul rendu du navigateur

Informations de version

• La version actuelle est indiquée comme v0.0.1
• Aucune explication supplémentaire ni feuille de route de développement n’est mentionnée dans le texte source

[GN⁺]

Commentaires sur Hacker News

• Si on désactive JS, on ne voit qu’un loader au lieu du terrain. Je me suis demandé si c’était vraiment CSS-Only
  Même avec du JS, ça reste une belle prouesse, mais je m’attendais à ce que ça fonctionne aussi sans JS
  Par exemple, ce projet marche vraiment sans JS

  • Le moteur de rendu semble être en pur CSS. Une carte statique peut être affichée en CSS, mais un outil pour modifier le terrain a besoin de JS
  • L’idée semble être que le résultat téléchargé une fois terminé fonctionne sans JS
    Après avoir créé quelque chose et cliqué sur le bouton Download Code, ce paquet HTML se rend en local sans JS

• Ça dégage vraiment une ambiance Roller Coaster Tycoon. Beaucoup de gens penseront sans doute à leur jeu de simulation préféré. Beau travail

  • Ces jeux de construction en projection isométrique (isometric) me manquent. RC Tycoon, Zoo Tycoon, Sim City, TTD, etc.
    C’était moins réaliste, mais le fait que toutes les structures soient parfaitement alignées et qu’on puisse remplir proprement la carte rendait la construction agréable
    À l’inverse, dans Cities Skylines ou Planet Coaster, créer des routes ou des chemins m’a toujours semblé maladroit et frustrant
  • Moi, ça m’a plutôt fait penser à OpenTTD
  • Ça m’évoque aussi beaucoup Populous. Pour info, l’article Wikipédia sur Populous permet de voir de quel jeu il s’agit

• Pour du “CSS-only”, il y a quand même pas mal de JS. On dirait que seul le rendu est en CSS

  • Sur CodePen, on peut ouvrir le terrain avec uniquement CSS/HTML. En revanche, l’interaction et le glisser-déposer ne sont pas possibles
    Le JS semble seulement servir d’UI pour ajuster le terrain ou l’angle de la caméra. Cela reste malgré tout une prouesse impressionnante
  • Ce serait plus exact de l’appeler un générateur qui produit un terrain CSS-Only
  • Il y a aussi beaucoup de balises HTML et d’images, donc ce n’est clairement pas du CSS-only. Le titre semble un peu exagéré
  • Si on désactive JS, ça ne marche pas. Le titre est trompeur, ce qui est décevant

• Vraiment impressionnant. On dirait SimCity 2000

  • Cela dit, SimCity 2000 n’avait pas surtout des tuiles brun-jaune ? Il me semble que la version 3000 avait un terrain vert

• Ça fait penser à Populous. Vraiment superbe

  • Merci ! Populous et Transport Tycoon ont été de grandes sources d’inspiration
  • J’ai pensé la même chose. En particulier, l’outil pour monter et descendre le terrain rappelait Populous
    Je laisse le lien Wikipédia sur Populous pour ceux qui ne connaissent pas le jeu

• J’ai essayé plusieurs générateurs de terrain, et c’est celui que je préfère
  Il y a bien la contrainte du “CSS only”, mais c’est largement assez séduisant
  Je suis justement en train de passer du développement de jeux 2D à la 3D, donc ce genre de projet m’aide beaucoup

• Le moment où j’ai compris qu’on pouvait faire pivoter le terrain et zoomer/dézoomer était vraiment génial

• Pour ceux qui s’intéressent à l’art en CSS-Only, je recommande aussi le travail de Lynn Fisher
  https://a.singlediv.com/

• Ça rappelle Roller Coaster Tycoon (RCT). Très cool

• Impressionnant, mais on sent du lag après avoir modifié le terrain ou déplacé la caméra
  Je me demande si le navigateur utilise le GPU ou le CPU, et s’il existe un moyen de vérifier les millisecondes par frame

  • Ça semble venir d’un problème de layout/style/composition du moteur du navigateur
    Dans Safari, 91 % du temps CPU part dans le paint, 6 % dans le layout et 2 % dans le style. Chaque changement d’état prend environ 100 à 200 ms
    Dans Safari, on peut le voir dans l’onglet Timelines du Web Inspector, et Chrome a une fonction similaire