CSS専用の地形ジェネレーター Layoutit Terra

 (terra.layoutit.com)
3 ポイント 投稿者 GN⁺ 2025-11-06 | 1件のコメント | WhatsAppで共有
  • CSSだけで3D地形を生成できるWebベースのツールで、別途グラフィックエンジンなしにブラウザ上で動作
  • ユーザーは 地形サイズ、陸地の割合、地形タイプ、バイオーム などを調整して、さまざまな形の地形を生成可能
  • カメラの回転、傾き、ズーム、移動、アニメーション などの視覚操作機能を提供
  • 結果は Heightmap、VOX、TXT、PNG 形式で書き出すか、Codepenに埋め込み可能
  • CSS技術だけで視覚的な3D環境を実装した実験的プロジェクトで、Webグラフィックス表現の可能性を広げる

概要

  • Layoutit Terraは CSS Terrain Generator で、ブラウザ内でCSSだけを使って地形を生成するツール
  • JavaScriptの3Dエンジンや外部ライブラリを使わず、純粋なCSSベースの可視化を実現

主な機能

  • 地形生成の制御:
    • world size、landmass coverage、terrain type、biome など多様なパラメータを調整可能
    • temperate、arctic、desert の 3種類のバイオーム のプレビューを提供
  • カメラ設定:
    • 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 と表示
  • 追加説明や開発ロードマップについては原文で言及なし

関連記事

1件のコメント

 
GN⁺ 2025-11-06
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のWikipedia記事を見ると、どんなゲームかわかる

  • “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のWikipediaリンクを置いておく

  • いろいろな 地形ジェネレーター を使ってきたが、これがいちばん気に入った
    “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にも似た機能がある