Yalnızca CSS ile çalışan arazi oluşturucu Layoutit Terra

• Yalnızca CSS ile 3D arazi oluşturabilen web tabanlı bir araçtır; ek bir grafik motoru olmadan tarayıcıda çalışır
• Kullanıcılar arazi boyutu, kara oranı, arazi türü, biyom gibi ayarları değiştirerek çeşitli arazi biçimleri oluşturabilir
• Kamera döndürme, eğme, yakınlaştırma, kaydırma, animasyon gibi görsel kontrol özellikleri sunar
• Ortaya çıkan çıktılar Heightmap, VOX, TXT, PNG formatlarında dışa aktarılabilir veya Codepen'e gömülebilir
• Yalnızca CSS teknolojisiyle görsel 3D ortamı hayata geçiren deneysel bir proje olarak, web grafik anlatımının olanaklarını genişletir

---

Genel bakış

• Layoutit Terra, tarayıcı içinde yalnızca CSS ile arazi üreten bir CSS Terrain Generator aracıdır
• Ayrı bir JavaScript 3D motoru veya harici kütüphane olmadan saf CSS tabanlı görselleştirme sunar

Başlıca özellikler

• Arazi üretim kontrolü:
  • world size, landmass coverage, terrain type, biome gibi çeşitli parametreler ayarlanabilir
  • temperate, arctic, desert gibi üç biyom için önizleme sunulur
• Kamera ayarları:
  • rotate x(45°), tilt y(60°), zoom(34%), pan x(0px), lift y(0px) gibi ayrıntılı ayarlar yapılabilir
  • animasyonu etkinleştirme seçeneği sunulur

Dışa aktarma ve paylaşım

• Oluşturulan arazi Heightmap, VOX, TXT, PNG formatlarında dışa aktarılabilir
• Copy, Embed, Codepen'de aç, Download işlevleriyle çıktıların paylaşılması ve yeniden kullanılması desteklenir

Arayüz yapısı

• Regenerate, Restart, Undo, Redo gibi düzenleme kontrol düğmeleri sunulur
• Import / Export işleviyle proje yükleme ve kaydetme yapılabilir
• Minimap, Heightmap, Matrix görüntüleme modları desteklenir

Görsel öğeler

• Arazide görsel öğeler oluşturmak için çeşitli ağaç görselleri (tree2, tree4, tree5 vb.) kullanılır
• Her öğe CSS tabanlı olarak yerleştirilir ve yalnızca tarayıcı render'ıyla 3D etki oluşturulur

Sürüm bilgisi

• Mevcut sürüm v0.0.1 olarak gösterilir
• Ek açıklama veya geliştirme yol haritasından kaynak metinde bahsedilmez

[GN⁺]

Hacker News yorumları

• JS kapatılınca arazi yerine sadece yükleyici görünüyor. Bunun gerçekten CSS-Only olup olmadığını merak ettim
  JS olsa bile etkileyici bir başarı, ama JS olmadan da çalışmasını beklemiştim
  Örneğin bu proje gerçekten JS olmadan çalışıyor

  • Görünüşe göre render motoru saf CSS. Statik bir harita CSS ile gösterilebilir, ama araziyi düzenleyen araç için JS gerekiyor
  • Sanırım kastedilen şey, tamamlandıktan sonra indirilen çıktının JS olmadan da çalışması
    Bir şey oluşturup Download Code düğmesine bastığınızda, o HTML paketi yerelde JS olmadan render ediliyor

• Gerçekten Roller Coaster Tycoon havası veriyor. Birçok kişi kendi sevdiği simülasyon oyununu hatırlayacaktır. Harika iş

  • Böyle izometrik (isometric) tabanlı inşa oyunlarını özlüyorum. RC Tycoon, Zoo Tycoon, Sim City, TTD vb.
    Daha az gerçekçiydiler ama tüm yapılar kusursuz hizalanıyor ve haritayı tertemiz doldurabiliyordunuz; bu da çalışmayı keyifli kılıyordu
    Buna karşılık Cities Skylines ya da Planet Coaster'da yol veya patika yapmak bana hep hantal ve sinir bozucu gelmişti
  • Benim aklıma daha çok OpenTTD geldi
  • Bana da çok Populous'u hatırlattı. Bu arada Populous wiki sayfasına bakarsanız nasıl bir oyun olduğunu görebilirsiniz

• “CSS-only” denecek kadar çok JS var. Galiba sadece render kısmı CSS ile yapılıyor

  • CodePen'de sadece CSS/HTML ile de araziyi açabiliyorsunuz. Ancak etkileşim ya da sürükleme mümkün değil
    JS yalnızca araziyi veya kamera açısını ayarlayan bir UI görevi görüyor gibi. Yine de şaşırtıcı bir başarı
  • Buna “CSS-Only Terrain oluşturan bir Generator” demek daha doğru olabilir
  • Çok sayıda HTML etiketi ve görsel de var; bu açıkça CSS-only değil. Biraz abartılı bir başlık gibi duruyor
  • JS'yi kapatınca çalışmıyor. Başlık yanıltıcı olduğu için hayal kırıklığı yaratıyor

• Gerçekten etkileyici. SimCity 2000'e bakıyormuşum hissi verdi

  • Ama SimCity 2000'de genelde daha çok sarımsı kahverengi karo yok muydu? Yeşil arazinin 3000 sürümünde olduğunu hatırlıyorum

• Bana Populous'u hatırlattı. Gerçekten çok güzel

  • Teşekkürler! Populous ve Transport Tycoon büyük ilham kaynakları oldu
  • Ben de aynı şeyi düşündüm. Özellikle araziyi yükseltip alçaltan araç Populous'u çağrıştırdı
    Oyunu bilmeyenler için Populous wiki bağlantısını bırakıyorum

• Birçok arazi oluşturucu kullandım ama en çok bunu beğendim
  “CSS only” kısıtı var ama buna rağmen fazlasıyla çekici
  Tam da 2D'den 3D oyun geliştirmeye geçerken böyle bir proje bana çok yardımcı oluyor

• Araziyi döndürebildiğinizi ve yakınlaştırıp uzaklaştırabildiğinizi fark ettiğim an gerçekten çok etkileyiciydi

• CSS-Only sanatıyla ilgilenenler için Lynn Fisher'ın işleri de tavsiye edilir
  https://a.singlediv.com/

• İnsana Roller Coaster Tycoon(RCT)'yi hatırlatıyor. Çok güzel

• Etkileyici, ama arazi düzenledikten ya da kamerayı hareket ettirdikten sonra bir gecikme (lag) hissediliyor
  Tarayıcının GPU mu yoksa CPU mu kullandığını ve kare başına milisaniyeyi görmenin bir yolu olup olmadığını merak ediyorum

  • Bu daha çok tarayıcı motorunun layout/style/composition meselesi gibi görünüyor
    Safari'de CPU süresinin %91'i paint'e, %6'sı layout'a, %2'si style'a gidiyor. Her durum değişikliği yaklaşık 100~200ms sürüyor
    Safari'de bunu Web Inspector'ın Timelines sekmesinde görebilirsiniz; Chrome'da da benzer bir özellik var