Layoutit Terra, ein Terrain-Generator nur mit CSS

• Ein webbasiertes Tool, mit dem sich 3D-Terrain ausschließlich mit CSS erzeugen lässt und das ohne separate Grafik-Engine direkt im Browser läuft
• Nutzer können Terrain-Größe, Landanteil, Terrain-Typ und Biom anpassen, um Gelände in unterschiedlichsten Formen zu erzeugen
• Bietet visuelle Steuerungen wie Kameradrehung, Neigung, Zoom, Verschiebung und Animation
• Ergebnisse lassen sich in den Formaten Heightmap, VOX, TXT und PNG exportieren oder in Codepen einbetten
• Ein experimentelles Projekt, das mit CSS-Technik allein eine visuelle 3D-Umgebung umsetzt und die Möglichkeiten der Webgrafik erweitert

---

Überblick

• Layoutit Terra ist ein CSS Terrain Generator, ein Tool zur Erzeugung von Terrain ausschließlich mit CSS im Browser
• Es realisiert eine Visualisierung auf reiner CSS-Basis ohne separate JavaScript-3D-Engine oder externe Bibliotheken

Hauptfunktionen

• Steuerung der Terrain-Erzeugung:
  • Anpassung verschiedener Parameter wie world size, landmass coverage, terrain type und biome
  • Vorschau für drei Biome: temperate, arctic und desert
• Kameraeinstellungen:
  • Detaillierte Anpassungen wie rotate x(45°), tilt y(60°), zoom(34%), pan x(0px) und lift y(0px) möglich
  • Option zum Aktivieren von Animationen

Export und Teilen

• Das erzeugte Terrain kann in den Formaten Heightmap, VOX, TXT und PNG exportiert werden
• Funktionen wie Copy, Embed, Codepen öffnen und Download unterstützen das Teilen und die Weiterverwendung der Ergebnisse

Aufbau der Benutzeroberfläche

• Bietet Bearbeitungssteuerungen wie Regenerate, Restart, Undo und Redo
• Mit Import / Export können Projekte geladen und gespeichert werden
• Unterstützt die Ansichtsmodi Minimap, Heightmap und Matrix

Visuelle Elemente

• Verwendet verschiedene Baumbilder (tree2, tree4, tree5 usw.) als visuelle Elemente im Terrain
• Jedes Element wird CSS-basiert platziert, sodass der 3D-Effekt allein durch das Rendering im Browser entsteht

Versionsinformationen

• Die aktuelle Version wird als v0.0.1 angezeigt
• Zusätzliche Erklärungen oder eine Entwicklungs-Roadmap werden im Original nicht erwähnt

[GN⁺]

Hacker-News-Kommentare

• Wenn man JS deaktiviert, sieht man statt des Terrains nur einen Loader. Ich habe mich gefragt, ob es wirklich CSS-Only ist.
  Selbst wenn JS dabei ist, ist es immer noch eine beeindruckende Leistung, aber ich hatte erwartet, dass es auch ohne JS funktioniert.
  Zum Beispiel funktioniert dieses Projekt tatsächlich ganz ohne JS.

  • Die Rendering-Engine scheint aus reinem CSS zu bestehen. Eine statische Map lässt sich mit CSS darstellen, aber ein Tool zum Bearbeiten des Terrains braucht JS.
  • Gemeint ist wohl, dass das heruntergeladene Endergebnis nach der Fertigstellung auch ohne JS funktioniert.
    Wenn man etwas erstellt und dann auf Download Code klickt, rendert dieses HTML-Paket lokal ohne JS.

• Das erinnert wirklich an Roller Coaster Tycoon. Viele werden dabei wohl an ihre Lieblings-Simulationsspiele denken. Tolle Arbeit.

  • Ich vermisse solche auf isometrischer Projektion basierenden Aufbauspiele. RC Tycoon, Zoo Tycoon, Sim City, TTD usw.
    Sie waren zwar weniger realistisch, aber weil alle Strukturen perfekt ausgerichtet waren und man die Karte sauber füllen konnte, hat das Bauen Spaß gemacht.
    Dagegen fühlte sich das Anlegen von Straßen oder Wegen in Cities Skylines oder Planet Coaster immer etwas unbeholfen und frustrierend an.
  • Mich hat es eher an OpenTTD erinnert.
  • Ich musste auch oft an Populous denken. Wer wissen will, was das für ein Spiel ist, kann in diesem Populous-Wiki-Artikel nachsehen.

• Für „CSS-only“ steckt da ziemlich viel JS drin. Es scheint eher so zu sein, dass nur das Rendering in CSS erfolgt.

  • Auf CodePen kann man das Terrain sogar nur mit CSS/HTML ansehen. Allerdings sind Interaktion oder Dragging nicht möglich.
    JS scheint nur als UI zum Anpassen des Terrains oder des Kamerawinkels zu dienen. Trotzdem ist es eine erstaunliche Leistung.
  • „Ein Generator, der CSS-Only-Terrain erzeugt“ wäre wohl die genauere Bezeichnung.
  • Es gibt auch viele HTML-Tags und Bilder, also ist das eindeutig nicht CSS-only. Der Titel ist etwas übertrieben.
  • Wenn man JS deaktiviert, funktioniert es nicht. Der Titel ist irreführend und dadurch enttäuschend.

• Wirklich erstaunlich. Es fühlt sich an, als würde man SimCity 2000 ansehen.

  • Hatte SimCity 2000 aber nicht meistens eher gelblich-braune Kacheln? Ich erinnere mich, dass in Version 3000 das Land eher grün war.

• Das erinnert an Populous. Wirklich großartig.

  • Danke! Populous und Transport Tycoon waren große Inspirationsquellen.
  • Das dachte ich auch, besonders das Werkzeug zum Anheben und Absenken des Terrains erinnerte mich an Populous.
    Für Leute, die das Spiel nicht kennen, hier der Populous-Wiki-Link.

• Ich habe verschiedene Terrain-Generatoren ausprobiert, aber dieser gefällt mir am besten.
  Es gibt zwar die Einschränkung „CSS only“, aber er ist trotzdem attraktiv genug.
  Ich wechsle gerade von 2D- zu 3D-Spieleentwicklung, und solche Projekte helfen mir sehr.

• Als ich gemerkt habe, dass man das Terrain drehen sowie hinein- und herauszoomen kann, fand ich es richtig großartig.

• Wer sich für CSS-Only-Art interessiert, dem empfehle ich auch die Arbeiten von Lynn Fisher.
  https://a.singlediv.com/

• Das erinnert an Roller Coaster Tycoon (RCT). Sehr cool.

• Beeindruckend, aber nach dem Bearbeiten des Terrains oder dem Bewegen der Kamera ist eine Verzögerung (Lag) spürbar.
  Ich frage mich, ob der Browser die GPU oder die CPU verwendet und ob es eine Möglichkeit gibt, die Millisekunden pro Frame zu überprüfen.

  • Das scheint ein Problem bei Layout/Style/Compositing der Browser-Engine zu sein.
    In Safari entfallen 91 % der CPU-Zeit auf Paint, 6 % auf Layout und 2 % auf Style. Pro Statusänderung dauert es etwa 100–200 ms.
    In Safari kann man das im Timelines-Tab des Web Inspectors sehen, und Chrome hat eine ähnliche Funktion.