Layoutit Terra, trình tạo địa hình chỉ bằng CSS

 (terra.layoutit.com)
3 điểm bởi GN⁺ 2025-11-06 | 1 bình luận | Chia sẻ qua WhatsApp
  • Công cụ nền web có thể tạo địa hình 3D chỉ bằng CSS, hoạt động ngay trong trình duyệt mà không cần engine đồ họa riêng
  • Người dùng có thể điều chỉnh kích thước địa hình, tỷ lệ đất liền, loại địa hình, biome để tạo ra nhiều dạng địa hình khác nhau
  • Cung cấp các tính năng thao tác trực quan như xoay camera, nghiêng, thu phóng, di chuyển, hoạt ảnh
  • Có thể xuất kết quả dưới các định dạng Heightmap, VOX, TXT, PNG hoặc nhúng vào Codepen
  • Đây là một dự án thử nghiệm hiện thực hóa môi trường 3D trực quan chỉ bằng công nghệ CSS, mở rộng khả năng biểu đạt đồ họa trên web

Tổng quan

  • Layoutit Terra là một CSS Terrain Generator, công cụ tạo địa hình chỉ bằng CSS ngay trong trình duyệt
  • Hiện thực hóa trực quan hóa thuần CSS mà không cần engine 3D JavaScript riêng hay thư viện bên ngoài

Tính năng chính

  • Điều khiển tạo địa hình:
    • điều chỉnh nhiều tham số như world size, landmass coverage, terrain type, biome
    • cung cấp bản xem trước của ba biome gồm temperate, arctic, desert
  • Thiết lập camera:
    • có thể tinh chỉnh chi tiết như rotate x(45°), tilt y(60°), zoom(34%), pan x(0px), lift y(0px)
    • có tùy chọn bật hoạt ảnh

Xuất và chia sẻ

  • Địa hình được tạo có thể xuất dưới các định dạng Heightmap, VOX, TXT, PNG
  • Hỗ trợ chia sẻ và tái sử dụng kết quả thông qua các tính năng Copy, Embed, mở Codepen, tải xuống

Cấu trúc giao diện

  • Cung cấp các nút điều khiển chỉnh sửa như Regenerate, Restart, Undo, Redo
  • Có thể tải và lưu dự án qua tính năng Import / Export
  • Hỗ trợ các chế độ xem Minimap, Heightmap, Matrix

Yếu tố hình ảnh

  • Sử dụng nhiều hình ảnh cây (tree2, tree4, tree5, v.v.) để tạo các yếu tố trực quan trong địa hình
  • Mỗi yếu tố đều được bố trí dựa trên CSS, tạo hiệu ứng 3D chỉ bằng khả năng render của trình duyệt

Thông tin phiên bản

  • Phiên bản hiện tại được hiển thị là v0.0.1
  • Nguyên bản không đề cập thêm mô tả hay lộ trình phát triển

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-11-06
Ý kiến Hacker News

  • Nếu tắt JS thì chỉ thấy bộ nạp thay vì địa hình. Tôi đã tự hỏi liệu nó có thực sự CSS-Only hay không
    Dù có JS thì đây vẫn là một thành tựu ấn tượng, nhưng tôi đã kỳ vọng nó hoạt động cả khi không có JS
    Ví dụ, dự án này thực sự chạy mà không cần JS

    • Có vẻ engine dựng hình là CSS thuần. Bản đồ tĩnh có thể được hiển thị bằng CSS, nhưng công cụ chỉnh sửa địa hình thì cần JS
    • Có lẽ ý là kết quả tải xuống sau khi hoàn thành sẽ hoạt động không cần JS
      Sau khi tạo xong thứ gì đó và nhấn nút Download Code, gói HTML đó sẽ render cục bộ mà không cần JS

  • Thực sự gợi cảm giác như Roller Coaster Tycoon. Có lẽ nhiều người sẽ nghĩ tới những game mô phỏng mình yêu thích. Làm rất tuyệt

    • Tôi nhớ những game xây dựng dựa trên phối cảnh đẳng cự (isometric) như thế này. RC Tycoon, Zoo Tycoon, Sim City, TTD, v.v.
      Dù kém chân thực hơn, nhưng việc mọi công trình được căn chỉnh hoàn hảo và có thể lấp đầy bản đồ gọn gàng khiến trải nghiệm xây dựng rất thích thú
      Trong khi đó ở Cities Skylines hay Planet Coaster, việc làm đường hay lối đi lúc nào cũng thấy vụng và bực bội
    • Còn tôi thì lại nghĩ ngay tới OpenTTD
    • Tôi cũng nghĩ nhiều tới Populous. Nhân tiện, có thể xem bài wiki về Populous để biết đó là game gì

  • Nói là “CSS-only” thì có khá nhiều JS. Có vẻ chỉ phần render là CSS

    • Trên CodePen, vẫn có thể mở địa hình chỉ với CSS/HTML. Tuy nhiên, tương tác hay kéo thả thì không thể
      Có vẻ JS chỉ đóng vai trò UI để điều chỉnh địa hình hoặc góc camera. Dù vậy vẫn là một thành tựu đáng kinh ngạc
    • Có lẽ gọi là “Generator tạo Terrain CSS-Only” sẽ chính xác hơn
    • Cũng có rất nhiều thẻ HTML và hình ảnh, nên rõ ràng đây không phải CSS-only. Tiêu đề có phần cường điệu
    • Nếu tắt JS thì nó không hoạt động. Tiêu đề gây hiểu lầm nên khá đáng thất vọng

  • Thật sự đáng kinh ngạc. Cho cảm giác như đang nhìn SimCity 2000

    • Nhưng SimCity 2000 thường không phải có nhiều ô đất nâu vàng sao? Tôi nhớ bản 3000 mới là đất màu xanh

  • Nó làm tôi nhớ tới Populous. Thực sự rất đẹp

    • Cảm ơn! Populous và Transport Tycoon là nguồn cảm hứng lớn
    • Tôi cũng nghĩ vậy. Đặc biệt là công cụ nâng hạ địa hình khiến tôi nhớ tới Populous
      Để những ai không biết game này có thể tham khảo, xin để lại liên kết wiki Populous

  • Tôi đã thử nhiều trình tạo địa hình, nhưng đây là cái tôi thích nhất
    Dù có ràng buộc là “CSS only”, nó vẫn đủ cuốn hút
    Đúng lúc tôi đang chuyển từ phát triển game 2D sang 3D nên những dự án như thế này rất hữu ích

  • Khi nhận ra có thể xoay địa hình hoặc phóng to/thu nhỏ, tôi thấy thật sự rất ngầu

  • Nếu bạn quan tâm tới nghệ thuật CSS-Only thì cũng nên xem tác phẩm của Lynn Fisher
    https://a.singlediv.com/

  • Nó gợi nhớ tới Roller Coaster Tycoon (RCT). Rất tuyệt

  • Ấn tượng thật, nhưng sau khi chỉnh sửa địa hình hoặc di chuyển camera có cảm giác độ trễ (lag)
    Tôi tự hỏi trình duyệt đang dùng GPU hay CPU, và có cách nào kiểm tra số mili giây mỗi khung hình hay không

    • Có vẻ đây là vấn đề về layout/style/composition của engine trình duyệt
      Trên Safari, paint chiếm 91%, layout 6%, style 2% thời gian CPU. Mỗi lần đổi trạng thái mất khoảng 100~200ms
      Trên Safari có thể xem trong tab Timelines của Web Inspector, và Chrome cũng có tính năng tương tự