केवल CSS से बना भू-भाग जनरेटर Layoutit Terra

• यह एक वेब-आधारित टूल है जो सिर्फ CSS से 3D भू-भाग बना सकता है, और किसी अलग ग्राफ़िक्स इंजन के बिना ब्राउज़र में चलता है
• उपयोगकर्ता भू-भाग का आकार, भूमि अनुपात, terrain type, biome आदि को समायोजित करके अलग-अलग प्रकार के भू-भाग बना सकते हैं
• यह camera rotation, tilt, zoom, move, animation जैसी विज़ुअल नियंत्रण सुविधाएँ देता है
• परिणामों को Heightmap, VOX, TXT, PNG फ़ॉर्मैट में export किया जा सकता है या Codepen में embed किया जा सकता है
• केवल CSS तकनीक से विज़ुअल 3D environment लागू करने वाला यह एक प्रयोगात्मक प्रोजेक्ट है, जो वेब ग्राफ़िक्स अभिव्यक्ति की संभावनाओं को बढ़ाता है

---

अवलोकन

• Layoutit Terra एक CSS Terrain Generator है, जो ब्राउज़र के भीतर केवल CSS से भू-भाग बनाने का टूल है
• यह अलग JavaScript 3D engine या बाहरी लाइब्रेरी के बिना pure CSS आधारित visualization लागू करता है

प्रमुख सुविधाएँ

• भू-भाग निर्माण नियंत्रण:
  • world size, landmass coverage, terrain type, biome जैसे विभिन्न parameters को समायोजित किया जा सकता है
  • temperate, arctic, desert जैसी तीन biome की preview उपलब्ध है
• camera settings:
  • rotate x(45°), tilt y(60°), zoom(34%), pan x(0px), lift y(0px) जैसे विस्तृत समायोजन संभव
  • animation enable करने का विकल्प उपलब्ध

export और साझा करना

• बनाए गए भू-भाग को Heightmap, VOX, TXT, PNG फ़ॉर्मैट में export किया जा सकता है
• Copy, Embed, Codepen खोलें, Download सुविधाओं के माध्यम से परिणामों को साझा और पुन: उपयोग किया जा सकता है

इंटरफ़ेस संरचना

• Regenerate, Restart, Undo, Redo जैसे editing control बटन उपलब्ध हैं
• Import / Export सुविधा से प्रोजेक्ट लोड और सेव किए जा सकते हैं
• Minimap, Heightmap, Matrix view mode का समर्थन है

विज़ुअल तत्व

• भू-भाग के भीतर विज़ुअल तत्व बनाने के लिए विभिन्न tree images (tree2, tree4, tree5 आदि) का उपयोग किया गया है
• प्रत्येक तत्व CSS आधारित रूप से रखा गया है, जिससे केवल ब्राउज़र rendering के ज़रिए 3D प्रभाव बनाया जाता है

संस्करण जानकारी

• वर्तमान संस्करण v0.0.1 के रूप में दिखाया गया है
• अतिरिक्त विवरण या development roadmap का मूल पाठ में उल्लेख नहीं है

[GN⁺]

Hacker News टिप्पणियाँ

• JS बंद करने पर भू-भाग की जगह सिर्फ़ loader दिखाई देता है। इसलिए यह सच में CSS-Only है या नहीं, यह जानने की जिज्ञासा हुई
  JS हो तब भी यह एक बड़ी उपलब्धि है, लेकिन उम्मीद थी कि यह JS के बिना भी चलेगा
  उदाहरण के लिए यह प्रोजेक्ट सच में JS के बिना काम करता है

  • लगता है rendering engine पूरी तरह CSS में बना है। static map को CSS से दिखाया जा सकता है, लेकिन भू-भाग को modify करने वाला tool JS मांगता है
  • शायद आशय यह है कि पूरा होने के बाद डाउनलोड किया गया output JS के बिना भी काम करता है
    कुछ बनाने के बाद Download Code बटन दबाने पर वह HTML package local में JS के बिना render हो जाता है

• इसमें सचमुच Roller Coaster Tycoon जैसा एहसास आता है। बहुत से लोगों को अपनी पसंदीदा simulation game याद आ सकती है। शानदार काम है

  • ऐसे isometric construction game की कमी महसूस होती है। RC Tycoon, Zoo Tycoon, Sim City, TTD वगैरह
    यथार्थवाद थोड़ा कम था, लेकिन सारी संरचनाएँ एकदम ठीक से align हो जाती थीं और map को साफ़-सुथरे ढंग से भरा जा सकता था, इसलिए बनाना मज़ेदार था
    दूसरी ओर Cities Skylines या Planet Coaster में road या path बनाना हमेशा थोड़ा अटपटा और frustrating लगा
  • मुझे तो उल्टा OpenTTD याद आया
  • Populous भी बहुत याद आता है। वैसे Populous wiki article देखने पर समझ आएगा कि यह कैसा game है

• “CSS-only” कहने के लिए इसमें JS काफ़ी ज़्यादा है। शायद सिर्फ़ rendering ही CSS में है

  • CodePen में सिर्फ़ CSS/HTML से भी भू-भाग खोला जा सकता है। लेकिन interaction या drag संभव नहीं है
    लगता है JS सिर्फ़ भू-भाग या camera angle को adjust करने वाले UI की भूमिका निभा रहा है। फिर भी यह चौंकाने वाली उपलब्धि है
  • इसे “CSS-Only Terrain बनाने वाला Generator” कहना ज़्यादा सटीक होगा
  • इसमें HTML tag और image भी बहुत हैं, इसलिए यह साफ़ तौर पर CSS-only नहीं है। थोड़ा बढ़ा-चढ़ाकर लिखा गया शीर्षक लगता है
  • JS बंद करने पर यह काम नहीं करता। शीर्षक भ्रामक है, इसलिए निराशा होती है

• यह सचमुच हैरान करने वाला है। SimCity 2000 देखने जैसा एहसास होता है

  • लेकिन SimCity 2000 में आम तौर पर पीले-भूरे tile ज़्यादा नहीं होते थे क्या? मुझे याद है कि 3000 version में हरी ज़मीन थी

• Populous याद आता है। सच में बहुत शानदार

  • धन्यवाद! Populous और Transport Tycoon बड़ी प्रेरणा रहे हैं
  • मैंने भी यही सोचा था। खासकर भू-भाग को ऊपर-नीचे करने वाला tool Populous की याद दिलाता है
    जो लोग game नहीं जानते, उनके लिए Populous wiki link छोड़ रहा हूँ

• मैंने कई terrain generator इस्तेमाल किए हैं, लेकिन यह सबसे ज़्यादा पसंद आया
  “CSS only” की सीमा है, फिर भी यह काफ़ी आकर्षक है
  मैं अभी 2D से 3D game development की ओर जा रहा हूँ, इसलिए ऐसा प्रोजेक्ट बहुत मददगार है

• जब पता चला कि terrain को rotate किया जा सकता है और zoom in/zoom out भी किया जा सकता है, तो वह सच में बहुत शानदार लगा

• अगर किसी की रुचि CSS-Only art में है, तो Lynn Fisher का काम भी सुझाऊँगा
  https://a.singlediv.com/

• यह Roller Coaster Tycoon(RCT) की याद दिलाता है। बहुत बढ़िया

• प्रभावशाली है, लेकिन terrain modify करने या camera move करने के बाद lag महसूस होता है
  जानना चाहता हूँ कि browser GPU इस्तेमाल कर रहा है या CPU, और क्या per-frame milliseconds देखने का कोई तरीका है

  • यह browser engine के layout/style/composition की समस्या लगती है
    Safari में CPU time का 91% paint, 6% layout, और 2% style में जा रहा है। हर state change पर लगभग 100~200ms लगता है
    Safari में यह Web Inspector के Timelines tab में देखा जा सकता है, और Chrome में भी ऐसा ही feature है