Show HN: Mô phỏng thực vật 3D trong trình duyệt

• Plantarium là một hệ thống lắp ráp thực vật 3D bằng các node ngay trong trình duyệt; để tạo ra một cây hoàn chỉnh, cần có một output node
• Khung cơ bản của cây được tạo bởi node Stem; các đầu vào origin, height, thiccness, minThiccness, amount dùng để điều chỉnh vị trí, chiều cao, độ dày và số lượng thân
• Việc lặp lại và biến đổi giá trị do các node Vec3 và Parameter đảm nhiệm; chúng thêm thay đổi ngẫu nhiên vào giá trị mặc định để cây trông bớt đồng đều
• Biến đổi hình dạng được điều khiển bằng các node Rotate, Gravity, Noise; chúng nhận đầu vào là trục và góc xoay, kiểu trọng lực, kích thước và cường độ noise
• Lá được tạo bằng các node Leaf, Shape, Instance và được bố trí dọc theo thân hoặc cành; có thể chỉ định kích thước, phạm vi, số lượng, độ xoay và điều kiện độ sâu

---

Đầu ra cuối cùng của node graph

• Mọi hệ thống node đều cần một node output để tạo kết quả cuối cùng
• output nhận đầu vào plant và cấu thành kết quả toàn bộ cây

Tạo thân và điều khiển vị trí

• Node Stem tạo thân cơ bản của cây
  • _origin_: vị trí đặt thân; có thể nối với node vec3
  • height: chiều cao thân
  • thiccness: độ dày thân
  • minThiccness: độ dày tối thiểu
  • _amount_: số thân sẽ được tạo instance
• Node Vec3 xuất các giá trị x, y, z
  • Để phân bố thân rải rác, có thể nối node random hoặc parameter

Biến đổi giá trị và tính ngẫu nhiên

• Node Parameter xuất ra giá trị đã áp dụng một mức biến đổi ngẫu nhiên nhất định lên giá trị mặc định
  • _value_: giá trị mặc định để áp dụng biến đổi
  • _variation_: lượng biến đổi áp dụng lên giá trị mặc định
• Parameter được dùng lặp lại ở nhiều đầu vào như thân, xoay, trọng lực, đường cong và giá trị slider

Thay đổi hình dạng bằng xoay, trọng lực và noise

• Node Rotate xoay cây theo trục và góc được chỉ định
  • input: đối tượng cần xoay
  • _axis_: trục xoay
  • _aroundOrigin_: có xoay quanh mốc 0,0,0 hay không
  • smooth: đầu vào liên quan đến xoay mượt
  • _spread_: khi nhiều đối tượng được nối vào, quyết định xoay như một khối hay xoay tỏa ra
  • _angle_: góc xoay
• Node Gravity áp dụng trọng lực đơn giản lên cành và thân
  • input: đối tượng áp dụng trọng lực
  • curviness: mức độ uốn cong
  • _type_: phương thức tính trọng lực; hiện chỉ simple và test hoạt động
  • strength: cường độ trọng lực
• Node Noise áp dụng noise lên các cành đầu vào
  • plant: cây đầu vào
  • size: kích thước noise
  • strength: cường độ noise

Tạo lá và bố trí trên thân

• Node Leaf tạo mô hình lá và có thể được tạo instance dọc theo thân bằng node Instance
  • _shape_: hình dạng của từng lá; có thể nối với node shape
  • _curvature_: độ cong của lá theo hướng x/y; có thể nối với node vec2
• Node Shape xuất ra một hình dạng đơn có thể nối với node Leaf
• Node Instance bố trí mô hình đầu vào dọc theo thân hoặc cành
  • input: đầu vào làm chuẩn bố trí
  • model: mô hình cần bố trí
  • alignRotation: căn chỉnh xoay
  • alternateRotation: xoay xen kẽ
  • _size_: kích thước từng lá
  • _instanceRange_: phạm vi đặt instance
  • _amount_: số lá cần bố trí
  • rotation: giá trị xoay
  • offsetBySize: offset theo kích thước
  • _depth_: chỉ định sẽ bố trí lá trên bao nhiêu tầng cành
• Alpha có các giá trị min, max

[GN⁺]

Ý kiến trên Hacker News

• Thật sự hữu ích và tuyệt vời theo nhiều cách
  Trình chỉnh sửa node graph chạy trên trình duyệt được làm rất tốt, có thể tạo mesh 3D theo thủ tục, còn xuất .obj được nữa; giấy phép cũng thoáng nên có vẻ có thể trở thành hạt giống cho nhiều công cụ procedural khác nhau

  • Cảm ơn rất nhiều :)
    Có rất nhiều ý tưởng có thể thử với công cụ này, và có lẽ mình sẽ viết luận văn cử nhân về chủ đề này

• Độ phức tạp thật ấn tượng
  Với ai muốn thử nhanh thì tutorial cũng tốt, nhưng phải mất vài phút mới tới phần thú vị, nên tốt nhất là chỉnh các slider ở panel bên phải để xem cây dương xỉ thay đổi thế nào
  Ngoài ra, nếu nhấn library để tải các model khác, bạn sẽ hiểu ngay có thể làm được những gì
  Việc trong các model do người dùng gửi lên vẫn chưa có model troll nào cho thấy đây đúng là một dự án vừa mới ra mắt

  • Hiện mình đang ở ngoài nên không truy cập được PC, nhưng vừa thấy bài viết đang được chú ý khá nhiều
    Hy vọng nó trụ được ;)

• Trông rất tuyệt, nhưng có một vấn đề nhỏ
  Khi thay đổi giá trị, hình dạng cây thay đổi và camera cứ liên tục được căn lại, trông như camera bị rung, cá nhân mình thấy khá khó chịu
  Sẽ tốt hơn nếu có thể cố định camera trong khi thay đổi tham số

  • Phản hồi hay đấy
    Có lẽ nên thêm debounce cho việc tự động căn giữa camera :)
  • Xử lý việc di chuyển camera bằng animation sau khi thay đổi đã ổn định cũng có vẻ hay

• Dự án rất hay, nhưng hiện tại có vẻ cây không được render
  20 phút trước cây vẫn render được, nên có lẽ đã bị ảnh hưởng bởi lưu lượng từ HN
  Toàn bộ mã đều online và tài liệu cũng rất tốt. Thực ra dự án này còn có cả backend server
  https://github.com/jim-fx/plantarium/tree/main
  https://github.com/jim-fx/plantarium/blob/main/ARCHITECTURE....
  Vài ngày nữa mình sẽ quay lại xem khi nó hoạt động

  • Đã sống lại rồi

• Một năm trước mình đã làm một thứ tương tự vì muốn thử dùng Rust làm engine cho webapp
  Cách làm là compile sang wasm rồi đưa lên webserver Rust, kết quả ở https://blomma.lorentz.app
  Tuy nhiên dự án này tốt hơn nhiều về mặt sản phẩm hóa, đặc biệt trình chỉnh sửa node graph thật sự là điểm mạnh
  Nó hòa vào workflow rất tốt, khiến công cụ không còn giống một công cụ debug mà giống một sản phẩm ai cũng có thể dùng
  Nếu bên mình có điểm nào tốt hơn thì có lẽ là việc dùng đường cong Bézier cho cả hình dạng lá lẫn hình dạng thân
  Việc khớp topology và triangulation cho đúng khá khó, nhưng lại rất tuyệt để nhập môn quaternion và ôn lại lượng giác. Mình khuyên nên thử làm node đường cong Bézier

  • Thật sự rất hay! Cảm ơn vì những lời tốt đẹp :)
    Việc viết lại bộ sinh hình học bằng Rust/Wasm nằm khá nghiêm túc trong roadmap
    Hiện mình đang làm Advent of Code để quen hơn với Rust

• Cực kỳ hay! Mình thích tham số thiccness của thân cây :)

  • Cảm ơn :)
    Mình nghĩ lập trình viên có xu hướng quá nghiêm túc với dự án của họ hoặc với chính bản thân, nên mình thích thêm chút tinh nghịch đây đó

• Mình rất thích!
  Có vài đề xuất cải thiện khả dụng
  Thứ nhất, nếu lỡ di chuột ra ngoài hộp rồi thả ra, thao tác kéo sẽ hoạt động như bị lỗi. Nó không nhận ra mouse-up nên tham số bị kẹt ở trạng thái mouse-down
  Điều này khiến việc vẽ trong trình chỉnh sửa lá hoặc kéo để đổi tham số như slider trở nên khó khăn. Có lẽ chỉ cần đăng ký handler sự kiện mouse-up ở một ancestor chung thay vì ở hộp trình chỉnh sửa node graph
  Thứ hai, các tay nắm tròn port nhỏ dùng để kéo kết nối hơi nhỏ. Đặc biệt là khi zoom out để xem khá nhiều toàn cảnh
  Chỉ cần tăng hit area khoảng 25%, dù không tăng chính phần đồ họa, thì khả dụng có lẽ sẽ tốt hơn
  Nhân tiện, mình đang dùng Firefox. Vấn đề mouse handler cũng xảy ra tương tự trên Chromium, nhưng thao tác kéo kết nối node có vẻ dùng được hơn một chút trên Chromium

  • Cảm ơn phản hồi!
    Mình thường trở nên hơi chai lì với những lỗi khả dụng nhỏ kiểu này, nên phản hồi rất quý
    Cả hai có lẽ sẽ được sửa trong vài ngày tới :)

• Cho những ai chưa biết: panel bên phải có thể kéo trượt để lộ thêm tham số và control

• Tuyệt vời
  Mình rất muốn sớm được thấy cả một khu rừng được tạo từ các cây thuật toán crowdsourcing
  Có liên kết với dự án khoa học nào không? Một tính năng nhà thực vật học AI cho biết khả năng cây sống sót đến đâu, tiêu chí phân loại gần nhất là gì, hay công thức nấu ngon để ăn kèm cơm trắng cũng sẽ rất hay

  • Một trong những ý tưởng của mình là tạo một khu vườn ảo nơi cây lớn lên và người dùng phải chăm sóc như Tamagotchi :)
    Nó không liên kết với dự án khoa học nào cả, chỉ là do một nerd thích cây cối làm ra thôi
    Dù vậy, bạn có thể gắn ID gbif.org cho dự án, khi đó thông tin bổ sung sẽ được tải qua GBIF API :)

• Tuyệt vời! Nếu có thể thêm node time thì có lẽ cũng sẽ làm được animation cơ bản
  Nhìn chung là một dự án đáng yêu

  • Ý tưởng hay đấy!
    Phần khó có lẽ là cách tích hợp animation mà không phải tạo lại toàn bộ mesh mỗi frame
    Tuy nhiên, nếu generator xuất ra skeleton rồi dùng nó để animate cây thì có vẻ sẽ rất dễ