▲

CSS 전용 지형 생성기 Layoutit Terra

 (terra.layoutit.com)
3P by GN⁺ 4일전 | ★ favorite | 댓글 1개
  • 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로 표시
  • 추가 설명이나 개발 로드맵은 원문에 언급 없음
▲
GN⁺ 4일전  [-]
Hacker News 의견

  • JS를 끄면 지형 대신 로더만 보임. 정말 CSS-Only인지 궁금했음
    JS가 있어도 대단한 성취이긴 하지만, JS 없이도 동작하길 기대했음
    예를 들어 이 프로젝트는 진짜로 JS 없이 작동함

    • 렌더 엔진이 순수 CSS로 되어 있는 것 같음. 정적인 맵은 CSS로 표시할 수 있지만, 지형을 수정하는 도구는 JS가 필요함
    • 의도는 완성 후 다운로드한 결과물이 JS 없이도 작동한다는 의미 같음
      무언가를 만든 뒤 Download Code 버튼을 누르면, 그 HTML 패키지는 JS 없이도 로컬에서 렌더링됨

  • 정말 Roller Coaster Tycoon 같은 느낌이 남. 많은 사람들이 자신이 좋아하는 시뮬레이션 게임을 떠올릴 듯함. 멋진 작업임

    • 이런 등각 투영(isometric) 기반의 건설 게임이 그리움. RC Tycoon, Zoo Tycoon, Sim City, TTD 등
      현실감은 덜하지만, 모든 구조물이 완벽히 정렬되고 지도를 깔끔히 채울 수 있어서 작업이 즐거웠음
      반면 Cities Skylines나 Planet Coaster에서는 도로나 경로를 만드는 게 늘 어색하고 답답했음
    • 나는 오히려 OpenTTD가 떠올랐음
    • Populous도 많이 생각남. 참고로 Populous 위키 문서를 보면 어떤 게임인지 알 수 있음

  • “CSS-only”라기엔 JS가 꽤 많음. 렌더링만 CSS로 하는 것 같음

    • CodePen에서 CSS/HTML만으로도 지형을 열어볼 수 있음. 단, 인터랙션이나 드래그는 불가능함
      JS는 단지 지형이나 카메라 각도를 조정하는 UI 역할을 하는 듯함. 그래도 놀라운 성취임
    • “CSS-Only Terrain을 생성하는 Generator”라고 부르는 게 더 정확할 듯함
    • HTML 태그와 이미지도 많은데, 이건 분명 CSS-only가 아님. 약간 과장된 제목 같음
    • JS를 끄면 작동하지 않음. 제목이 오해를 불러일으켜 실망스러움

  • 정말 놀라움. SimCity 2000을 보는 듯한 느낌임

    • 그런데 SimCity 2000은 보통 노란빛 갈색 타일이 많지 않음? 3000 버전이 초록색 땅이었던 걸로 기억함

  • Populous가 떠오름. 정말 멋짐

    • 고마움! Populous와 Transport Tycoon이 큰 영감이 되었음
    • 나도 같은 생각이었음. 특히 지형을 올리고 내리는 도구가 Populous를 떠올리게 했음
      게임을 모르는 사람을 위해 Populous 위키 링크를 남김

  • 여러 지형 생성기를 써봤지만, 이게 제일 마음에 듦
    “CSS only”라는 제약이 있긴 하지만 충분히 매력적임
    마침 2D에서 3D 게임 개발로 전환 중이라 이런 프로젝트가 큰 도움이 됨

  • 지형을 회전하거나 줌인/줌아웃할 수 있다는 걸 깨달았을 때 정말 멋졌음

  • CSS-Only 아트에 관심 있는 사람이라면 Lynn Fisher의 작품도 추천함
    https://a.singlediv.com/

  • Roller Coaster Tycoon(RCT) 을 떠올리게 함. 아주 멋짐

  • 인상적이지만, 지형 수정이나 카메라 이동 후 지연(lag) 이 느껴짐
    브라우저가 GPU를 쓰는지 CPU를 쓰는지, 프레임당 밀리초를 확인할 방법이 있는지 궁금함

    • 브라우저 엔진의 레이아웃/스타일/컴포지션 문제로 보임
      Safari에서는 paint에 91%, layout에 6%, style에 2%의 CPU 시간이 걸림. 상태 변경마다 약 100~200ms 정도 소요됨
      Safari에서는 Web Inspector의 Timelines 탭에서 확인할 수 있고, Chrome에도 비슷한 기능이 있음
답변달기