Layoutit Terra เครื่องมือสร้างภูมิประเทศด้วย CSS ล้วน

 (terra.layoutit.com)
3 คะแนน โดย GN⁺ 2025-11-06 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เป็นเครื่องมือบนเว็บที่สามารถ สร้างภูมิประเทศ 3D ได้ด้วย CSS เพียงอย่างเดียว โดยทำงานในเบราว์เซอร์โดยไม่ต้องใช้กราฟิกเอนจินแยกต่างหาก
  • ผู้ใช้สามารถปรับ ขนาดภูมิประเทศ, สัดส่วนพื้นที่ดิน, ประเภทภูมิประเทศ, biome และอื่น ๆ เพื่อสร้างภูมิประเทศได้หลากหลายรูปแบบ
  • มีความสามารถในการควบคุมภาพ เช่น การหมุนกล้อง, การเอียง, การซูม, การเลื่อน, แอนิเมชัน
  • สามารถส่งออกผลลัพธ์เป็นไฟล์ Heightmap, VOX, TXT, PNG หรือ ฝังลงใน Codepen ได้
  • เป็นโปรเจ็กต์เชิงทดลองที่ สร้างสภาพแวดล้อม 3D เชิงภาพด้วยเทคโนโลยี CSS เพียงอย่างเดียว และขยายขอบเขตความเป็นไปได้ของงานกราฟิกบนเว็บ

ภาพรวม

  • Layoutit Terra คือ CSS Terrain Generator เครื่องมือที่สร้างภูมิประเทศด้วย CSS ภายในเบราว์เซอร์
  • สร้างงานภาพแบบ pure CSS โดยไม่ใช้ JavaScript 3D engine หรือไลบรารีภายนอก

ฟีเจอร์หลัก

  • การควบคุมการสร้างภูมิประเทศ:
    • ปรับพารามิเตอร์ได้หลากหลาย เช่น world size, landmass coverage, terrain type, biome
    • มีพรีวิว 3 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
  • ต้นฉบับไม่ได้กล่าวถึงคำอธิบายเพิ่มเติมหรือโรดแมปการพัฒนา

บทความที่เกี่ยวข้อง

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 ถ้าอยากรู้ว่าเป็นเกมแบบไหน

  • จะเรียกว่า “CSS-only” ก็ดูมี JS อยู่ไม่น้อย เหมือนจะใช้ CSS แค่ในส่วนเรนเดอร์

    • บน CodePen สามารถเปิดดูภูมิประเทศได้ด้วย CSS/HTML อย่างเดียว แต่จะ โต้ตอบ หรือ drag ไม่ได้
      ดูเหมือน JS จะทำหน้าที่เป็น UI สำหรับปรับภูมิประเทศหรือมุมกล้องเท่านั้น ถึงอย่างนั้นก็ยังเป็นความสำเร็จที่น่าทึ่ง
    • ถ้าเรียกว่า “Generator สำหรับสร้าง CSS-Only Terrain” น่าจะตรงกว่า
    • มีทั้งแท็ก 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 อยู่ และมีวิธีดูค่าเวลาต่อเฟรมเป็นมิลลิวินาทีหรือไม่

    • ดูเหมือนจะเป็นปัญหาด้าน layout/style/composition ของเอนจินเบราว์เซอร์
      บน Safari ใช้เวลา CPU ไปกับ paint 91%, layout 6%, style 2% โดยแต่ละครั้งที่สถานะเปลี่ยนจะใช้เวลาราว 100~200ms
      ใน Safari ดูได้จาก แท็บ Timelines ของ Web Inspector และ Chrome ก็มีฟีเจอร์คล้ายกัน