CSS 전용 지형 생성기 Layoutit Terra

• CSS만으로 3D 지형을 생성할 수 있는 웹 기반 도구로, 별도의 그래픽 엔진 없이 브라우저에서 작동
• 사용자는 지형 크기, 육지 비율, 지형 유형, 생물군계(biome) 등을 조정해 다양한 형태의 지형 생성 가능
• 카메라 회전, 기울기, 줌, 이동, 애니메이션 등 시각적 조작 기능을 제공
• 결과물은 Heightmap, VOX, TXT, PNG 형식으로 내보내거나 Codepen에 임베드 가능
• CSS 기술만으로 시각적 3D 환경을 구현한 실험적 프로젝트로, 웹 그래픽 표현의 가능성 확장

개요

• Layoutit Terra는 CSS Terrain Generator로, 브라우저 내에서 CSS만으로 지형을 생성하는 도구
• 별도의 자바스크립트 3D 엔진이나 외부 라이브러리 없이 순수 CSS 기반 시각화를 구현

주요 기능

• 지형 생성 제어:
  • world size, landmass coverage, terrain type, biome 등 다양한 매개변수 조정
  • temperate, arctic, desert 등 세 가지 생물군계 미리보기 제공
• 카메라 설정:
  • rotate x(45°), tilt y(60°), zoom(34%), pan x(0px), lift y(0px) 등 세부 조정 가능
  • 애니메이션 활성화 옵션 제공

내보내기 및 공유

• 생성된 지형은 Heightmap, VOX, TXT, PNG 형식으로 내보내기 가능
• Copy, Embed, Codepen 열기, 다운로드 기능을 통해 결과물 공유 및 재활용 지원

인터페이스 구성

• Regenerate, Restart, Undo, Redo 등 편집 제어 버튼 제공
• Import / Export 기능으로 프로젝트 불러오기 및 저장 가능
• Minimap, Heightmap, Matrix 보기 모드 지원

시각 요소

• 다양한 나무 이미지(tree2, tree4, tree5 등) 를 사용해 지형 내 시각적 요소 구성
• 각 요소는 CSS 기반으로 배치되어, 브라우저 렌더링만으로 3D 효과 구현

버전 정보

• 현재 버전은 v0.0.1로 표시
• 추가 설명이나 개발 로드맵은 원문에 언급 없음