Layoutit Terra, generador de terrenos solo con CSS

• Herramienta web para generar terrenos 3D solo con CSS, que funciona en el navegador sin necesidad de un motor gráfico independiente
• Los usuarios pueden ajustar el tamaño del terreno, la proporción de tierra, el tipo de terreno y el bioma para crear terrenos de distintas formas
• Ofrece funciones de manipulación visual como rotación de cámara, inclinación, zoom, desplazamiento y animación
• El resultado se puede exportar en formatos Heightmap, VOX, TXT y PNG o embeber en Codepen
• Proyecto experimental que implementa entornos visuales 3D solo con tecnología CSS y amplía las posibilidades de la representación gráfica en la web

---

Resumen

• Layoutit Terra es un CSS Terrain Generator, una herramienta para generar terrenos únicamente con CSS dentro del navegador
• Implementa una visualización basada en CSS puro sin motores 3D de JavaScript ni bibliotecas externas

Funciones principales

• Control de generación del terreno:
  • ajuste de varios parámetros como world size, landmass coverage, terrain type y biome
  • ofrece vista previa de tres biomas: temperate, arctic y desert
• Configuración de cámara:
  • permite ajustes detallados como rotate x(45°), tilt y(60°), zoom(34%), pan x(0px) y lift y(0px)
  • incluye opción para activar animación

Exportación y uso compartido

• El terreno generado se puede exportar en formatos Heightmap, VOX, TXT y PNG
• Incluye funciones de Copy, Embed, abrir en Codepen y descarga para compartir y reutilizar el resultado

Composición de la interfaz

• Ofrece botones de control de edición como Regenerate, Restart, Undo y Redo
• La función Import / Export permite cargar y guardar proyectos
• Soporta modos de visualización Minimap, Heightmap y Matrix

Elementos visuales

• Usa varias imágenes de árboles (tree2, tree4, tree5, etc.) para componer elementos visuales dentro del terreno
• Cada elemento se coloca con base en CSS, logrando un efecto 3D solo con el renderizado del navegador

Información de versión

• La versión actual aparece como v0.0.1
• El texto original no menciona explicaciones adicionales ni una hoja de ruta de desarrollo

[GN⁺]

Comentarios en Hacker News

• Si desactivas JS, solo se ve el cargador en lugar del terreno. Me hizo preguntarme si de verdad es CSS-Only
  Incluso si usa JS, sigue siendo un logro impresionante, pero esperaba que funcionara también sin JS
  Por ejemplo, este proyecto sí funciona realmente sin JS

  • Parece que el motor de renderizado está hecho en CSS puro. Un mapa estático puede mostrarse con CSS, pero la herramienta para editar el terreno sí necesita JS
  • La intención parece ser que el resultado descargado, una vez terminado, funcione sin JS
    Después de crear algo y pulsar el botón Download Code, ese paquete HTML se renderiza localmente sin JS

• De verdad transmite una vibra muy de Roller Coaster Tycoon. Seguro que a mucha gente le recordará sus juegos de simulación favoritos. Gran trabajo

  • Extraño este tipo de juegos de construcción basados en proyección isométrica (isometric). RC Tycoon, Zoo Tycoon, Sim City, TTD, etc.
    Eran menos realistas, pero era divertido trabajar porque todas las estructuras quedaban perfectamente alineadas y podías llenar el mapa de forma ordenada
    En cambio, en Cities Skylines o Planet Coaster siempre se sentía incómodo y frustrante construir carreteras o caminos
  • A mí más bien me recordó a OpenTTD
  • También me hace pensar mucho en Populous. Por cierto, si ves el artículo de Populous en Wikipedia, te haces una idea de qué tipo de juego es

• Para llamarse “CSS-only”, hay bastante JS. Parece que solo el renderizado está hecho en CSS

  • En CodePen se puede abrir el terreno solo con CSS/HTML. Eso sí, no se puede interactuar ni arrastrar
    JS parece cumplir únicamente el papel de UI para ajustar el terreno o el ángulo de la cámara. Aun así, es un logro sorprendente
  • Sería más preciso llamarlo un Generator para crear terreno “CSS-Only”
  • También hay muchas etiquetas HTML e imágenes, así que claramente esto no es CSS-only. El título se siente un poco exagerado
  • Si desactivas JS, no funciona. El título lleva a confusión y eso decepciona

• Muy impresionante. Se siente como estar viendo SimCity 2000

  • Pero ¿SimCity 2000 no solía tener muchos mosaicos marrón amarillentos? Recuerdo que la versión 3000 tenía el terreno verde

• Me recuerda a Populous. Está muy bueno

  • ¡Gracias! Populous y Transport Tycoon fueron grandes inspiraciones
  • Yo pensé lo mismo. En especial, la herramienta para subir y bajar el terreno me recordó a Populous
    Dejo el enlace de Wikipedia de Populous para quienes no conozcan el juego

• He probado varios generadores de terreno, pero este es el que más me gusta
  Tiene la limitación de ser “CSS only”, pero aun así resulta muy atractivo
  Justo estoy pasando del desarrollo de juegos 2D a 3D, así que un proyecto así me ayuda bastante

• Fue genial darme cuenta de que se puede rotar el terreno y hacer zoom in/zoom out

• Si te interesa el arte CSS-Only, también recomiendo el trabajo de Lynn Fisher
  https://a.singlediv.com/

• Me hace pensar en Roller Coaster Tycoon (RCT). Muy bueno

• Es impresionante, pero se siente algo de lag después de modificar el terreno o mover la cámara
  Me pregunto si el navegador está usando GPU o CPU, y si hay alguna forma de ver los milisegundos por frame

  • Parece un problema de layout/style/composition del motor del navegador
    En Safari, el 91% del tiempo de CPU se va en paint, 6% en layout y 2% en style. Cada cambio de estado tarda unos 100~200 ms
    En Safari se puede revisar en la pestaña Timelines de Web Inspector, y Chrome tiene una función parecida