Show HN: 3D-Pflanzensimulation im Browser

 (plant.max-richter.dev)
3 Punkte von GN⁺ 2023-12-04 | 1 Kommentare | Auf WhatsApp teilen
  • Plantarium ist ein System zum Zusammenbauen von 3D-Pflanzen aus Nodes im Browser; um eine fertige Pflanze zu erzeugen, wird ein output node benötigt
  • Das grundlegende Gerüst der Pflanze wird vom Stem-Node erstellt, und über die Eingaben origin, height, thiccness, minThiccness, amount werden Position, Höhe, Dicke und Anzahl der Stängel angepasst
  • Vec3- und Parameter-Nodes übernehmen die Wiederholung und Variation von Werten und fügen den Standardwerten zufällige Veränderungen hinzu, damit die Pflanze weniger einheitlich aussieht
  • Formveränderungen werden mit den Nodes Rotate, Gravity und Noise gesteuert; dabei werden Rotationsachse und -winkel, die Art der Schwerkraft sowie Größe und Stärke des Rauschens eingegeben
  • Blätter werden mit den Nodes Leaf, Shape und Instance erstellt und entlang von Stängeln oder Zweigen platziert; dabei lassen sich Größe, Bereich, Anzahl, Rotation und Tiefenbedingungen festlegen

Finale Ausgabe des Node-Graphen

  • Jedes Node-System benötigt einen output-Node, um ein Endergebnis zu erzeugen
  • output nimmt die Eingabe plant entgegen und setzt daraus das Gesamtergebnis der Pflanze zusammen

Erzeugung von Stängeln und Positionssteuerung

  • Der Stem-Node erzeugt den grundlegenden Stängel der Pflanze
    • _origin_: die Position, an der der Stängel platziert wird; ein vec3-Node kann verbunden werden
    • height: Höhe des Stängels
    • thiccness: Dicke des Stängels
    • minThiccness: Mindestdicke
    • _amount_: Anzahl der zu instanzierenden Stängel
  • Der Vec3-Node gibt die Werte x, y, z aus
    • Um Stängel verteilt zu platzieren, können random- oder parameter-Nodes verbunden werden

Wertvariation und Zufälligkeit

  • Der Parameter-Node gibt einen Wert aus, auf den eine feste zufällige Variation zum Standardwert angewendet wurde
    • _value_: der Basiswert, auf den die Variation angewendet wird
    • _variation_: die Stärke der auf den Basiswert angewendeten Variation
  • Parameter wird wiederholt in verschiedenen Eingaben verwendet, etwa für Stängel, Rotation, Schwerkraft, Kurven und Slider-Werte

Form mit Rotation, Schwerkraft und Noise verändern

  • Der Rotate-Node rotiert die Pflanze um die angegebene Achse und den angegebenen Winkel
    • input: das zu rotierende Objekt
    • _axis_: Rotationsachse
    • _aroundOrigin_: ob relativ zu 0,0,0 rotiert wird
    • smooth: Eingabe für sanfte Rotation
    • _spread_: legt fest, ob bei mehreren verbundenen Objekten gemeinsam rotiert oder verteilt rotiert wird
    • _angle_: Rotationswinkel
  • Der Gravity-Node wendet einfache Schwerkraft auf Zweige und Stängel an
    • input: Ziel der Schwerkraftanwendung
    • curviness: Grad der Biegung
    • _type_: Methode zur Schwerkraftberechnung; aktuell funktionieren nur simple und test
    • strength: Stärke der Schwerkraft
  • Der Noise-Node wendet Noise auf den Eingabe-Zweig an
    • plant: Eingabepflanze
    • size: Größe des Noise
    • strength: Stärke des Noise

Erzeugung von Blättern und Platzierung an Stängeln

  • Der Leaf-Node erzeugt ein Blattmodell, das mit dem Instance-Node entlang eines Stängels instanziiert werden kann
    • _shape_: die Form eines einzelnen Blatts; ein shape-Node kann verbunden werden
    • _curvature_: die Krümmung des Blatts in x/y-Richtung; ein vec2-Node kann verbunden werden
  • Der Shape-Node gibt eine einzelne Form aus, die mit dem Leaf-Node verbunden werden kann
  • Der Instance-Node platziert das Eingabemodell entlang eines Stängels oder Zweigs
    • input: Eingabe als Grundlage der Platzierung
    • model: zu platzierendes Modell
    • alignRotation: Rotationsausrichtung
    • alternateRotation: alternierende Rotation
    • _size_: Größe einzelner Blätter
    • _instanceRange_: Bereich, in dem Instanzen platziert werden
    • _amount_: Anzahl der zu platzierenden Blätter
    • rotation: Rotationswert
    • offsetBySize: Offset abhängig von der Größe
    • _depth_: legt fest, auf wie vielen Zweigebenen Blätter platziert werden
  • Alpha hat die Werte min, max

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-12-04
Meinungen auf Hacker News

  • In vielerlei Hinsicht wirklich nützlich und großartig
    Der browserbasierte Node-Graph-Editor ist gut gemacht, man kann prozedurale 3D-Meshes erstellen, es gibt sogar einen .obj-Export, und die Lizenz ist großzügig. Das wirkt, als könnte es der Ausgangspunkt für viele verschiedene prozedurale Tools werden

    • Vielen Dank wirklich :)
      Ich habe viele Ideen, was man mit diesem Tool ausprobieren könnte, und werde darüber wahrscheinlich meine Bachelorarbeit schreiben

  • Die Komplexität ist beeindruckend
    Wer schnell damit herumspielen möchte: Das Tutorial ist gut, aber bis zu den interessanten Stellen dauert es ein paar Minuten. Besser ist es, im rechten Panel die Slider zu verstellen und zu beobachten, wie sich der Farn verändert
    Wenn man außerdem auf library klickt und andere Modelle lädt, bekommt man sofort ein Gefühl dafür, was möglich ist
    Dass es unter den von Nutzern eingereichten Modellen noch keine Scherzmodelle gibt, zeigt, dass das Projekt wirklich gerade erst erschienen ist

    • Ich bin gerade nicht zu Hause und habe keinen Zugriff auf meinen PC, habe aber eben gesehen, dass der Beitrag ziemlich viel Aufmerksamkeit bekommt
      Ich hoffe, es hält durch ;)

  • Sieht sehr gut aus, aber es gibt ein kleines Problem
    Wenn man Werte ändert, verändert sich die Pflanzenform und die Kamera wird ständig neu ausgerichtet, sodass es aussieht, als würde die Kamera wackeln. Mich persönlich stört das ziemlich
    Es wäre schön, wenn man die Kamera beim Ändern von Parametern fixieren könnte

    • Gutes Feedback
      Ich glaube, es wäre sinnvoll, dem automatischen Zentrieren der Kamera ein Debounce hinzuzufügen :)
    • Es wäre auch gut, die Kamerabewegung als Animation umzusetzen, sobald sich nach der Änderung alles stabilisiert hat

  • Cooles Projekt, aber im Moment scheinen die Pflanzen nicht gerendert zu werden
    Vor 20 Minuten wurden sie noch gerendert, also liegt es vermutlich am HN-Traffic
    Der gesamte Code ist online und die Dokumentation ist ebenfalls hervorragend. Tatsächlich hat dieses Projekt auch ein Server-Backend
    https://github.com/jim-fx/plantarium/tree/main
    https://github.com/jim-fx/plantarium/blob/main/ARCHITECTURE....
    Ich komme in ein paar Tagen wieder und schaue es mir an, wenn es funktioniert

    • Es ist wieder da

  • Vor einem Jahr habe ich etwas Ähnliches gebaut, weil ich Rust als Webapp-Engine ausprobieren wollte
    Es wurde nach wasm kompiliert und auf einem Rust-Webserver bereitgestellt; das Ergebnis ist unter https://blomma.lorentz.app zu finden
    Dieses Projekt ist allerdings in Sachen Produktreife viel besser, und besonders der Node-Graph-Editor ist eine echte Stärke
    Er fügt sich gut in den Workflow ein und lässt es über ein Debugging-Tool hinaus wie ein Produkt wirken, das jeder benutzen kann
    Falls meine Version irgendwo besser ist, dann wohl darin, dass sie sowohl für Blattformen als auch für Stängelformen Bézier-Kurven verwendet
    Topologie und Triangulation sauber hinzubekommen war ziemlich schwierig, aber als Einstieg in Quaternionen und Auffrischung der Trigonometrie war es hervorragend. Ich empfehle, einmal einen Bézier-Kurven-Node auszuprobieren

    • Wirklich cool! Danke auch für die netten Worte :)
      Den Geometrie-Generator in Rust/Wasm neu zu schreiben, steht ziemlich ernsthaft auf der Roadmap
      Im Moment mache ich Advent of Code und gewöhne mich dabei an Rust

  • Unglaublich cool! Mir gefällt der Parameter für die thiccness des Stängels :)

    • Danke :)
      Ich finde, Programmierer neigen dazu, ihre Projekte oder sich selbst zu ernst zu nehmen, deshalb baue ich gern hier und da ein bisschen Verspieltheit ein

  • Gefällt mir wirklich sehr!
    Ich habe ein paar Vorschläge zur Verbesserung der Bedienbarkeit
    Erstens: Wenn man die Maus versehentlich aus der Box herausbewegt und dann loslässt, verhält sich das Dragging fehlerhaft. Das mouse-up wird nicht erkannt, sodass der Parameter im mouse-down-Zustand hängen bleibt
    Dadurch wird es schwierig, im Blatt-Editor zu zeichnen oder Parameter per Dragging wie bei einem Slider zu ändern. Vermutlich würde es reichen, den mouse-up-Event-Handler an einem gemeinsamen Vorfahren zu registrieren statt an der Box des Graph-Node-Editors
    Zweitens sind die kleinen runden Port-Handles für Parameter, an denen man Verbindungen zieht, etwas klein. Besonders, wenn man herauszoomt, um einen größeren Teil der gesamten Szene zu sehen
    Wenn man zumindest die Hit Area, nicht unbedingt das grafische Element selbst, um etwa 25 % vergrößert, dürfte die Bedienbarkeit besser werden
    Zur Info: Ich nutze Firefox. In Chromium tritt das Problem mit dem mouse handler ebenfalls auf, aber das Ziehen von Node-Verbindungen scheint dort etwas brauchbarer zu sein

    • Danke für das Feedback!
      Für solche kleinen Usability-Bugs wird man selbst leicht blind, daher ist das sehr wertvoll
      Beides dürfte in den nächsten Tagen behoben werden :)

  • Für alle, die es nicht bemerkt haben: Das rechte Panel lässt sich verschieben, um weitere Parameter und Controls sichtbar zu machen

  • Fantastisch
    Ich kann es kaum erwarten, ganze Wälder aus crowdsourcten algorithmischen Pflanzen zu sehen
    Ist das mit einem wissenschaftlichen Projekt verbunden? Ein Feature mit einem KI-Botaniker, der einem sagt, wie wahrscheinlich die Pflanze überleben würde, welche taxonomische Einordnung am nächsten liegt oder welches gute Rezept mit weißem Reis dazu passt, wäre auch cool

    • Eine meiner Ideen ist, einen virtuellen Garten zu bauen, in dem Pflanzen wachsen und Nutzer sich wie bei einem Tamagotchi darum kümmern müssen :)
      Es ist nicht mit einem wissenschaftlichen Projekt verbunden, sondern wurde einfach von einem Nerd gebaut, der Pflanzen mag
      Man kann dem Projekt aber eine gbif.org-ID zuweisen, dann werden über die gbif API zusätzliche Informationen geladen :)

  • Großartig! Wenn man auch einen time node hinzufügen könnte, wären wohl einfache Animationen möglich
    Insgesamt ein liebenswertes Projekt

    • Gute Idee!
      Der schwierige Teil dürfte sein, Animationen zu integrieren, ohne in jedem Frame das gesamte Mesh neu zu erstellen
      Allerdings wäre es vermutlich sehr einfach, aus dem Generator ein Skeleton zu exportieren und damit die Pflanze zu animieren