Layoutit Terra, gerador de terrenos feito só com CSS

• Ferramenta web capaz de gerar terrenos 3D apenas com CSS, funcionando no navegador sem necessidade de um motor gráfico separado
• O usuário pode ajustar tamanho do terreno, proporção de terra, tipo de terreno e bioma para criar terrenos em diversos formatos
• Oferece recursos de manipulação visual como rotação da câmera, inclinação, zoom, movimento e animação
• O resultado pode ser exportado nos formatos Heightmap, VOX, TXT e PNG ou incorporado no Codepen
• Projeto experimental que implementa um ambiente visual 3D apenas com tecnologia CSS, ampliando as possibilidades de expressão gráfica na web

---

Visão geral

• Layoutit Terra é um CSS Terrain Generator, uma ferramenta que gera terrenos no navegador usando apenas CSS
• Implementa uma visualização baseada em CSS puro sem motor 3D em JavaScript nem bibliotecas externas

Principais recursos

• Controle de geração do terreno:
  • ajuste de vários parâmetros como world size, landmass coverage, terrain type e biome
  • oferece pré-visualização de três biomas como temperate, arctic e desert
• Configurações da câmera:
  • permite ajustes detalhados como rotate x(45°), tilt y(60°), zoom(34%), pan x(0px) e lift y(0px)
  • inclui opção para ativar animação

Exportação e compartilhamento

• O terreno gerado pode ser exportado nos formatos Heightmap, VOX, TXT e PNG
• Dá suporte ao compartilhamento e reaproveitamento do resultado por meio das funções Copy, Embed, Open in Codepen e Download

Estrutura da interface

• Oferece botões de controle de edição como Regenerate, Restart, Undo e Redo
• Permite carregar e salvar projetos com a função Import / Export
• Suporta os modos de visualização Minimap, Heightmap e Matrix

Elementos visuais

• Usa várias imagens de árvores (tree2, tree4, tree5 etc.) para compor elementos visuais no terreno
• Cada elemento é posicionado com base em CSS, produzindo um efeito 3D apenas com a renderização do navegador

Informações de versão

• A versão atual aparece como v0.0.1
• O texto original não menciona explicações adicionais nem roadmap de desenvolvimento

[GN⁺]

Comentários no Hacker News

• Se desativar o JS, só aparece o loader em vez do terreno. Fiquei me perguntando se era mesmo CSS-Only
  Ainda seria um grande feito mesmo com JS, mas eu esperava que funcionasse sem JS também
  Por exemplo, este projeto realmente funciona sem JS

  • Parece que o motor de renderização é puro CSS. Um mapa estático pode ser exibido com CSS, mas a ferramenta para editar o terreno precisa de JS
  • A intenção parece ser que o resultado baixado depois de concluído funcione sem JS
    Depois de criar algo e clicar no botão Download Code, aquele pacote HTML renderiza localmente sem JS

• Passa muito a sensação de Roller Coaster Tycoon. Muita gente deve lembrar dos seus jogos de simulação favoritos. Belo trabalho

  • Sinto falta desses jogos de construção baseados em projeção isométrica (isometric). RC Tycoon, Zoo Tycoon, Sim City, TTD etc.
    Eles eram menos realistas, mas era divertido trabalhar porque todas as estruturas ficavam perfeitamente alinhadas e dava para preencher o mapa de forma limpa
    Já em Cities Skylines ou Planet Coaster, fazer estradas ou caminhos sempre pareceu estranho e frustrante
  • Para mim, lembrou mais OpenTTD
  • Também me faz pensar bastante em Populous. Aliás, dá para ver que tipo de jogo é pela página da Wikipédia de Populous

• Para algo dito como “CSS-only”, tem bastante JS. Parece que só a renderização é em CSS

  • No CodePen, dá para abrir o terreno só com CSS/HTML. Só que interação ou arrastar não funcionam
    O JS parece servir apenas como UI para ajustar o terreno ou o ângulo da câmera. Ainda assim, é uma conquista impressionante
  • Seria mais preciso chamar de um generator que cria Terrain CSS-Only
  • Também há muitas tags HTML e imagens, então claramente isso não é CSS-only. Parece um título exagerado
  • Se desativar o JS, não funciona. O título é enganoso e decepciona

• Realmente impressionante. Dá a sensação de estar vendo SimCity 2000

  • Mas o SimCity 2000 normalmente não tinha mais tiles marrom-amarelados? Lembro da versão 3000 com terreno verde

• Lembra Populous. Muito legal

  • Obrigado! Populous e Transport Tycoon foram grandes inspirações
  • Pensei a mesma coisa. Principalmente a ferramenta de subir e descer o terreno me lembrou Populous
    Para quem não conhece o jogo, deixo o link da Wikipédia de Populous

• Já usei vários geradores de terreno, mas este foi o de que mais gostei
  Há a limitação de ser “CSS only”, mas ainda assim é atraente o bastante
  Justamente agora estou migrando do desenvolvimento de jogos 2D para 3D, então um projeto assim ajuda muito

• Foi muito legal quando percebi que dava para rotacionar o terreno e fazer zoom in/zoom out

• Para quem se interessa por arte CSS-Only, também recomendo os trabalhos da Lynn Fisher
  https://a.singlediv.com/

• Lembra Roller Coaster Tycoon (RCT). Muito legal

• É impressionante, mas dá para sentir lag depois de editar o terreno ou mover a câmera
  Fico curioso para saber se o navegador está usando GPU ou CPU, e se há alguma forma de verificar os milissegundos por frame

  • Parece ser um problema de layout/style/composition do motor do navegador
    No Safari, 91% do tempo de CPU vai para paint, 6% para layout e 2% para style. Cada mudança de estado leva cerca de 100~200 ms
    No Safari, dá para verificar isso na aba Timelines do Web Inspector, e o Chrome tem um recurso parecido