Layoutit Terra, generator medan khusus CSS

• Alat berbasis web yang dapat membuat medan 3D hanya dengan CSS, berjalan di browser tanpa engine grafis terpisah
• Pengguna dapat menyesuaikan ukuran medan, rasio daratan, jenis medan, biome dan lainnya untuk menghasilkan berbagai bentuk medan
• Menyediakan fitur manipulasi visual seperti rotasi kamera, kemiringan, zoom, pergeseran, animasi
• Hasilnya dapat diekspor dalam format Heightmap, VOX, TXT, PNG atau di-embed ke Codepen
• Proyek eksperimental yang mewujudkan lingkungan 3D visual hanya dengan teknologi CSS, memperluas kemungkinan ekspresi grafis web

---

Ringkasan

• Layoutit Terra adalah CSS Terrain Generator, alat untuk membuat medan hanya dengan CSS di dalam browser
• Menghadirkan visualisasi berbasis CSS murni tanpa engine 3D JavaScript terpisah atau library eksternal

Fitur utama

• Kontrol pembuatan medan:
  • Berbagai parameter seperti world size, landmass coverage, terrain type, biome dapat disesuaikan
  • Menyediakan pratinjau tiga biome seperti temperate, arctic, desert
• Pengaturan kamera:
  • Penyesuaian detail seperti rotate x(45°), tilt y(60°), zoom(34%), pan x(0px), lift y(0px)
  • Menyediakan opsi untuk mengaktifkan animasi

Ekspor dan berbagi

• Medan yang dihasilkan dapat diekspor dalam format Heightmap, VOX, TXT, PNG
• Mendukung berbagi dan penggunaan ulang hasil melalui fitur Copy, Embed, buka Codepen, download

Komposisi antarmuka

• Menyediakan tombol kontrol pengeditan seperti Regenerate, Restart, Undo, Redo
• Mendukung pemuatan dan penyimpanan proyek melalui fitur Import / Export
• Mendukung mode tampilan Minimap, Heightmap, Matrix

Elemen visual

• Menyusun elemen visual di dalam medan menggunakan berbagai gambar pohon (tree2, tree4, tree5, dll.)
• Setiap elemen ditempatkan berbasis CSS sehingga efek 3D diwujudkan hanya melalui rendering browser

Informasi versi

• Versi saat ini ditampilkan sebagai v0.0.1
• Tidak ada penjelasan tambahan atau roadmap pengembangan yang disebutkan dalam teks asli

[GN⁺]

Komentar Hacker News

• Jika JS dimatikan, yang terlihat hanya loader alih-alih terrain. Jadi saya sempat bertanya-tanya apakah ini benar-benar CSS-Only
  Walau tetap pencapaian yang mengesankan meski memakai JS, saya berharap ini juga berjalan tanpa JS
  Misalnya, proyek ini benar-benar berfungsi tanpa JS

  • Sepertinya mesin render-nya dibuat dengan CSS murni. Peta statis bisa ditampilkan dengan CSS, tetapi alat untuk mengedit terrain memerlukan JS
  • Maksudnya tampaknya adalah hasil akhir yang diunduh akan tetap berfungsi tanpa JS
    Setelah membuat sesuatu lalu menekan tombol Download Code, paket HTML itu akan dirender secara lokal tanpa JS

• Benar-benar terasa seperti Roller Coaster Tycoon. Banyak orang mungkin akan teringat pada game simulasi favorit mereka. Keren sekali

  • Saya rindu game pembangunan berbasis isometrik (isometric) seperti ini. RC Tycoon, Zoo Tycoon, Sim City, TTD, dan lainnya
    Memang terasa kurang realistis, tetapi semua struktur bisa sejajar sempurna dan peta dapat diisi dengan rapi, jadi proses membangunnya menyenangkan
    Sebaliknya, di Cities Skylines atau Planet Coaster, membuat jalan atau jalur selalu terasa canggung dan bikin frustrasi
  • Saya malah langsung teringat OpenTTD
  • Saya juga sangat teringat Populous. Sebagai referensi, artikel wiki Populous menjelaskan game seperti apa itu

• Untuk disebut “CSS-only”, JS-nya cukup banyak. Sepertinya hanya rendering-nya saja yang memakai CSS

  • Di CodePen, terrain-nya bisa dibuka hanya dengan CSS/HTML. Hanya saja, interaksi atau drag tidak bisa dilakukan
    JS tampaknya hanya berperan sebagai UI untuk menyesuaikan terrain atau sudut kamera. Meski begitu, ini tetap pencapaian yang luar biasa
  • Mungkin akan lebih akurat jika disebut Generator untuk Terrain CSS-Only
  • Ada banyak tag HTML dan gambar juga, jadi ini jelas bukan CSS-only. Judulnya terasa agak berlebihan
  • Jika JS dimatikan, ini tidak berjalan. Judulnya menyesatkan dan cukup mengecewakan

• Benar-benar mengejutkan. Rasanya seperti melihat SimCity 2000

  • Tapi bukankah SimCity 2000 biasanya punya banyak tile cokelat kekuningan? Kalau tidak salah, versi 3000 justru tanahnya hijau

• Ini mengingatkan pada Populous. Keren sekali

  • Terima kasih! Populous dan Transport Tycoon adalah sumber inspirasi besar
  • Saya juga berpikir begitu. Terutama alat untuk menaikkan dan menurunkan terrain benar-benar mengingatkan pada Populous
    Untuk yang belum kenal gamenya, saya tinggalkan tautan wiki Populous

• Saya sudah mencoba banyak generator terrain, dan ini yang paling saya suka
  Memang ada batasan karena “CSS only”, tetapi tetap sangat menarik
  Kebetulan saya sedang beralih dari pengembangan game 2D ke 3D, jadi proyek seperti ini sangat membantu

• Saat saya sadar terrain-nya bisa diputar atau zoom in/zoom out, rasanya keren sekali

• Kalau tertarik dengan seni CSS-Only, karya Lynn Fisher juga layak direkomendasikan
  https://a.singlediv.com/

• Ini mengingatkan pada Roller Coaster Tycoon(RCT). Sangat keren

• Mengesankan, tetapi setelah mengubah terrain atau memindahkan kamera terasa ada lag
  Saya penasaran apakah browser menggunakan GPU atau CPU, dan apakah ada cara untuk memeriksa milidetik per frame

  • Ini tampaknya terkait masalah layout/style/composition pada mesin browser
    Di Safari, 91% waktu CPU dipakai untuk paint, 6% untuk layout, dan 2% untuk style. Setiap perubahan status memakan sekitar 100~200ms
    Di Safari ini bisa dilihat di tab Timelines pada Web Inspector, dan Chrome juga punya fitur serupa