Show HN: Simulasi tanaman 3D di browser

 (plant.max-richter.dev)
3 poin oleh GN⁺ 2023-12-04 | 1 komentar | Bagikan ke WhatsApp
  • Plantarium adalah sistem untuk merakit tanaman 3D dengan node di browser, dan untuk membuat tanaman akhir dibutuhkan satu output node
  • Kerangka dasar tanaman dibuat oleh node Stem, dan posisi, tinggi, ketebalan, serta jumlah batang diatur melalui input origin, height, thiccness, minThiccness, amount
  • Pengulangan dan variasi nilai ditangani oleh node Vec3 dan Parameter, dengan menambahkan perubahan acak ke nilai default agar tanaman terlihat tidak terlalu seragam
  • Perubahan bentuk dikendalikan oleh node Rotate, Gravity, dan Noise, yang menerima input seperti sumbu dan sudut rotasi, metode gravitasi, serta ukuran dan kekuatan noise
  • Daun dibuat dengan node Leaf, Shape, dan Instance, lalu ditempatkan di sepanjang batang atau cabang; ukuran, rentang, jumlah, rotasi, dan kondisi kedalaman dapat ditentukan

Output akhir graf node

  • Semua sistem node memerlukan satu node output untuk menghasilkan hasil akhir
  • output menerima input plant dan menyusun hasil tanaman secara keseluruhan

Pembuatan batang dan kontrol posisi

  • Node Stem membuat batang dasar tanaman
    • _origin_: posisi tempat batang ditempatkan, dan dapat dihubungkan ke node vec3
    • height: tinggi batang
    • thiccness: ketebalan batang
    • minThiccness: ketebalan minimum
    • _amount_: jumlah batang yang akan diinstansiasi
  • Node Vec3 mengeluarkan nilai x, y, z
    • Untuk menyebarkan penempatan batang, node random atau parameter dapat dihubungkan

Variasi nilai dan keacakan

  • Node Parameter mengeluarkan nilai yang menerapkan variasi acak tertentu pada nilai default
    • _value_: nilai default yang akan diberi variasi
    • _variation_: besaran variasi yang diterapkan pada nilai default
  • Parameter digunakan berulang kali pada berbagai input seperti batang, rotasi, gravitasi, kurva, dan nilai slider

Mengubah bentuk dengan rotasi, gravitasi, dan noise

  • Node Rotate memutar tanaman sebesar sumbu dan sudut yang ditentukan
    • input: objek yang akan diputar
    • _axis_: sumbu rotasi
    • _aroundOrigin_: apakah rotasi dilakukan terhadap acuan 0,0,0
    • smooth: input terkait rotasi yang halus
    • _spread_: menentukan apakah beberapa objek yang terhubung diputar sebagai satu kesatuan atau diputar menyebar
    • _angle_: sudut rotasi
  • Node Gravity menerapkan gravitasi sederhana pada cabang dan batang
    • input: objek yang akan diberi gravitasi
    • curviness: tingkat kelengkungan
    • _type_: metode perhitungan gravitasi; saat ini hanya simple dan test yang berfungsi
    • strength: kekuatan gravitasi
  • Node Noise menerapkan noise pada cabang input
    • plant: tanaman input
    • size: ukuran noise
    • strength: kekuatan noise

Pembuatan daun dan penempatan pada batang

  • Node Leaf membuat model daun, dan dapat diinstansiasi di sepanjang batang dengan node Instance
    • _shape_: bentuk masing-masing daun, dan dapat dihubungkan ke node shape
    • _curvature_: kelengkungan daun pada arah x/y, dan dapat dihubungkan ke node vec2
  • Node Shape mengeluarkan satu bentuk yang dapat dihubungkan ke node Leaf
  • Node Instance menempatkan model input di sepanjang batang atau cabang
    • input: input acuan penempatan
    • model: model yang akan ditempatkan
    • alignRotation: penyelarasan rotasi
    • alternateRotation: rotasi bergantian
    • _size_: ukuran masing-masing daun
    • _instanceRange_: rentang tempat instance ditempatkan
    • _amount_: jumlah daun yang akan ditempatkan
    • rotation: nilai rotasi
    • offsetBySize: offset berdasarkan ukuran
    • _depth_: menentukan pada berapa lapisan cabang daun akan ditempatkan
  • Alpha memiliki nilai min dan max

Bacaan terkait

1 komentar

 
GN⁺ 2023-12-04
Komentar Hacker News

  • Sangat berguna dan keren dalam banyak hal
    Editor graph node berbasis browser-nya dibuat dengan sangat baik, bisa membuat mesh 3D prosedural, bahkan mendukung ekspor .obj, dan lisensinya juga longgar, jadi terlihat bisa menjadi benih untuk berbagai alat prosedural

    • Terima kasih banyak :)
      Ada banyak ide yang bisa dicoba dengan alat ini, dan sepertinya saya akan menulis skripsi sarjana tentang ini

  • Tingkat kompleksitasnya mengesankan
    Buat yang ingin cepat mencobanya, tutorialnya bagus, tapi butuh beberapa menit untuk sampai ke bagian yang seru, jadi lebih baik atur slider di panel kanan dan lihat bagaimana paku-pakuan berubah
    Lalu tekan library untuk memuat model lain, dan langsung terasa apa saja yang bisa dilakukan
    Fakta bahwa belum ada model kiriman pengguna yang iseng juga memberi kesan bahwa ini benar-benar proyek yang baru dirilis

    • Saya sedang di luar rumah sekarang jadi tidak bisa mengakses PC, tapi saya baru lihat postingan ini mendapat cukup banyak perhatian
      Semoga kuat menahannya ;)

  • Terlihat sangat bagus, tapi ada satu masalah kecil
    Saat mengubah nilai, bentuk tanaman berubah dan kamera terus disesuaikan ulang sehingga terlihat seperti kamera bergetar, dan secara pribadi itu cukup mengganggu
    Akan bagus kalau kamera bisa dikunci saat parameter sedang diubah

    • Masukan yang bagus
      Sepertinya menambahkan debounce pada auto-centering kamera akan bagus :)
    • Kelihatannya bagus juga kalau perpindahan kamera diproses dengan animasi setelah perubahan selesai dan stabil

  • Proyek yang keren, tapi saat ini tanamannya tampaknya tidak dirender
    Dua puluh menit lalu tanamannya masih dirender, jadi mungkin terdampak trafik HN
    Kodenya semuanya tersedia online dan dokumentasinya juga sangat bagus. Nyatanya proyek ini juga punya backend server
    https://github.com/jim-fx/plantarium/tree/main
    https://github.com/jim-fx/plantarium/blob/main/ARCHITECTURE....
    Saya akan kembali beberapa hari lagi saat sudah berfungsi

    • Sudah hidup lagi

  • Setahun lalu saya membuat sesuatu yang mirip karena ingin mencoba Rust sebagai engine webapp
    Pendekatannya adalah compile ke wasm lalu di-deploy ke webserver Rust, dan hasilnya ada di https://blomma.lorentz.app
    Namun proyek ini jauh lebih baik dari sisi productization, terutama editor graph node-nya yang benar-benar menjadi kekuatan utama
    Itu menyatu dengan baik ke alur kerja sehingga terasa bukan sekadar alat debugging, tapi seperti produk yang bisa dipakai siapa saja
    Kalau ada satu hal yang lebih baik di versi saya, mungkin hanya penggunaan kurva Bézier baik untuk bentuk daun maupun bentuk batang
    Menyamakan topologi dan triangulasi dengan benar ternyata cukup sulit, tapi sangat bagus sebagai pengantar quaternion dan penyegaran trigonometri. Saya sarankan mencoba node kurva Bézier

    • Keren sekali! Terima kasih juga atas kata-kata baiknya :)
      Menulis ulang generator geometri ke Rust/Wasm sudah cukup serius masuk roadmap
      Untuk sekarang saya sedang membiasakan diri dengan Rust sambil mengerjakan Advent of Code

  • Sangat keren! Saya suka parameter thiccness untuk batangnya :)

    • Terima kasih :)
      Menurut saya programmer cenderung terlalu serius terhadap proyek mereka atau diri mereka sendiri, jadi saya suka menyelipkan sedikit keisengan di sana-sini

  • Saya sangat suka ini!
    Ada beberapa saran peningkatan usability
    Pertama, kalau kursor tanpa sengaja keluar dari kotak lalu dilepas, penanganan drag jadi terasa bug. Ia gagal mendeteksi mouse-up sehingga parameter tetap stuck dalam status mouse-down
    Ini membuat sulit menggambar di editor daun atau mengubah parameter dengan drag seperti slider. Mungkin solusinya adalah mendaftarkan event handler mouse-up pada ancestor bersama, bukan pada kotak editor node graph
    Kedua, handle lingkaran port parameter kecil yang dipakai untuk drag koneksi agak terlalu kecil. Apalagi saat di-zoom out untuk melihat cukup banyak bagian dari keseluruhan adegan
    Bahkan kalau bukan elemen grafisnya, setidaknya area hit-nya diperbesar sekitar 25% sepertinya akan meningkatkan usability
    Sebagai catatan, saya memakai Firefox. Di Chromium masalah mouse handler yang sama juga terjadi, tapi drag koneksi node tampak sedikit lebih enak dipakai di Chromium

    • Terima kasih atas masukannya!
      Saya cenderung jadi kebal terhadap bug usability kecil seperti ini, jadi ini sangat berharga
      Keduanya sepertinya akan diperbaiki dalam beberapa hari :)

  • Untuk yang belum sadar: panel kanan bisa digeser untuk menampilkan lebih banyak parameter dan kontrol

  • Fantastis
    Saya tidak sabar melihat seluruh hutan dibuat dari tanaman algoritmik hasil crowdsourcing
    Apakah ini terhubung ke proyek ilmiah? Fitur AI botanist yang memberi tahu seberapa besar kemungkinan tanaman itu bisa bertahan hidup, kriteria taksonomi terdekatnya apa, dan resep yang cocok disantap dengan nasi putih hangat juga terdengar keren

    • Salah satu ide saya adalah membuat taman virtual tempat tanaman tumbuh dan pengguna harus merawatnya seperti Tamagotchi :)
      Ini tidak terhubung dengan proyek ilmiah, hanya dibuat oleh seorang nerd yang suka tanaman
      Meski begitu, proyek ini bisa diberi ID gbif.org, lalu informasi tambahan akan dimuat melalui API gbif :)

  • Hebat! Kalau node time juga bisa ditambahkan, sepertinya animasi dasar pun akan jadi memungkinkan
    Secara keseluruhan ini proyek yang menggemaskan

    • Ide yang bagus!
      Bagian yang rumit mungkin bagaimana mengintegrasikan animasi tanpa harus membangun ulang seluruh mesh setiap frame
      Meski begitu, mengekspor skeleton dari generator lalu memakai itu untuk menganimasikan tanaman sepertinya akan sangat mudah