Show HN : simulation de plantes 3D dans le navigateur

 (plant.max-richter.dev)
3 points par GN⁺ 2023-12-04 | 1 commentaires | Partager sur WhatsApp
  • Plantarium est un système qui permet d’assembler des plantes 3D sous forme de nœuds dans le navigateur ; pour créer une plante complète, un output node est nécessaire
  • La structure de base de la plante est générée par le nœud Stem, et les entrées origin, height, thiccness, minThiccness, amount permettent d’ajuster la position, la hauteur, l’épaisseur et le nombre de tiges
  • La répétition et la variation des valeurs sont prises en charge par les nœuds Vec3 et Parameter, qui ajoutent des variations aléatoires aux valeurs par défaut afin de rendre la plante moins uniforme
  • Les changements de forme sont contrôlés par les nœuds Rotate, Gravity et Noise, qui reçoivent en entrée l’axe et l’angle de rotation, le mode de gravité, ainsi que la taille et l’intensité du bruit
  • Les feuilles sont créées avec les nœuds Leaf, Shape et Instance, puis placées le long des tiges ou des branches ; il est possible de spécifier la taille, la plage, la quantité, la rotation et les conditions de profondeur

Sortie finale du graphe de nœuds

  • Tout système de nœuds nécessite un nœud output pour générer le résultat final
  • output reçoit l’entrée plant et compose le résultat complet de la plante

Génération des tiges et contrôle de la position

  • Le nœud Stem crée la tige principale de la plante
    • _origin_ : position où la tige est placée ; un nœud vec3 peut y être connecté
    • height : hauteur de la tige
    • thiccness : épaisseur de la tige
    • minThiccness : épaisseur minimale
    • _amount_ : nombre de tiges à instancier
  • Le nœud Vec3 renvoie les valeurs x, y, z
    • Pour répartir les tiges, il est possible de connecter un nœud random ou parameter

Variation des valeurs et aléatoire

  • Le nœud Parameter renvoie une valeur en appliquant une variation aléatoire donnée à une valeur par défaut
    • _value_ : valeur par défaut à laquelle appliquer la variation
    • _variation_ : quantité de variation à appliquer à la valeur par défaut
  • Parameter est utilisé de manière répétée pour diverses entrées, notamment les tiges, la rotation, la gravité, les courbes et les valeurs de sliders

Modifier la forme avec rotation, gravité et bruit

  • Le nœud Rotate fait pivoter la plante selon un axe et un angle spécifiés
    • input : cible de la rotation
    • _axis_ : axe de rotation
    • _aroundOrigin_ : indique si la rotation se fait par rapport à 0,0,0
    • smooth : entrée liée à une rotation fluide
    • _spread_ : détermine, lorsque plusieurs objets sont connectés, s’ils pivotent comme un seul objet ou s’ils sont répartis pendant la rotation
    • _angle_ : angle de rotation
  • Le nœud Gravity applique une gravité simple aux branches et aux tiges
    • input : cible à laquelle appliquer la gravité
    • curviness : degré de courbure
    • _type_ : mode de calcul de la gravité ; actuellement, seuls simple et test fonctionnent
    • strength : intensité de la gravité
  • Le nœud Noise applique du bruit aux branches en entrée
    • plant : plante en entrée
    • size : taille du bruit
    • strength : intensité du bruit

Création des feuilles et placement sur les tiges

  • Le nœud Leaf génère un modèle de feuille, qui peut être instancié le long d’une tige avec le nœud Instance
    • _shape_ : forme de chaque feuille ; un nœud shape peut y être connecté
    • _curvature_ : courbure de la feuille dans les directions x/y ; un nœud vec2 peut y être connecté
  • Le nœud Shape renvoie une forme unique pouvant être connectée au nœud Leaf
  • Le nœud Instance place le modèle en entrée le long de tiges ou de branches
    • input : entrée servant de base au placement
    • model : modèle à placer
    • alignRotation : alignement de la rotation
    • alternateRotation : rotation alternée
    • _size_ : taille de chaque feuille
    • _instanceRange_ : plage dans laquelle les instances sont placées
    • _amount_ : nombre de feuilles à placer
    • rotation : valeur de rotation
    • offsetBySize : décalage en fonction de la taille
    • _depth_ : indique sur combien de niveaux de branches placer les feuilles
  • Alpha possède des valeurs min et max

À lire aussi

1 commentaires

 
GN⁺ 2023-12-04
Commentaires sur Hacker News

  • Vraiment utile et superbe à bien des égards
    L’éditeur de graphe de nœuds dans le navigateur est très bien conçu, il permet de créer des maillages 3D procéduraux, d’exporter en .obj, et la licence est permissive, donc cela semble pouvoir devenir la graine de nombreux outils procéduraux différents

    • Merci beaucoup :)
      J’ai plein d’idées de choses à faire avec cet outil, et je vais probablement écrire mon mémoire de licence sur ce sujet

  • Le niveau de complexité est impressionnant
    Pour ceux qui veulent tester rapidement, le tutoriel est bien, mais il faut quelques minutes pour arriver aux parties amusantes, donc mieux vaut ajuster les curseurs dans le panneau de droite pour voir comment la fougère change
    En cliquant aussi sur la library pour charger d’autres modèles, on comprend tout de suite ce qu’il est possible de faire
    Le fait qu’il n’y ait pas encore de modèles farfelus soumis par les utilisateurs donne bien l’impression qu’il s’agit d’un projet tout juste lancé

    • Je suis loin de chez moi en ce moment, donc je n’ai pas accès à mon PC, mais je viens de voir que le post attire pas mal d’attention
      J’espère que ça va tenir ;)

  • Ça a l’air très bien, mais il y a un petit problème
    Quand on change une valeur, la forme de la plante change et la caméra se recadre en permanence, ce qui donne l’impression que la caméra tremble, et personnellement je trouve ça assez gênant
    Ce serait bien de pouvoir verrouiller la caméra pendant qu’on modifie les paramètres

    • Bon retour
      Ajouter un debounce au centrage automatique de la caméra semble être une bonne idée :)
    • Animer le déplacement de la caméra une fois que tout s’est stabilisé après les changements semble aussi une bonne idée

  • Super projet, mais en ce moment les plantes ne semblent pas se rendre
    Elles s’affichaient encore il y a 20 minutes, donc j’imagine que le trafic HN a eu un effet
    Le code est entièrement en ligne et la documentation est excellente. En fait, ce projet a aussi un backend serveur
    https://github.com/jim-fx/plantarium/tree/main
    https://github.com/jim-fx/plantarium/blob/main/ARCHITECTURE....
    Je reviendrai dans quelques jours pour le voir fonctionner

    • C’est revenu

  • Il y a un an, j’ai fait quelque chose de similaire parce que je voulais essayer Rust comme moteur de webapp
    C’était compilé en wasm et déployé sur un serveur web Rust, et le résultat est ici : https://blomma.lorentz.app
    Mais ce projet-ci est bien meilleur du point de vue produit, et en particulier l’éditeur de graphe de nœuds est un vrai point fort
    Il s’intègre très bien au workflow, au point de dépasser l’outil de débogage pour ressembler à un produit que n’importe qui peut utiliser
    S’il y a un point où le mien est meilleur, c’est peut-être l’usage de courbes de Bézier à la fois pour la forme des feuilles et celle des tiges
    Faire correspondre correctement la topologie et la triangulation était assez difficile, mais c’était un excellent exercice d’introduction aux quaternions et de révision de la trigonométrie. Je recommande d’essayer un nœud de courbe de Bézier

    • Vraiment génial ! Et merci pour les gentils mots :)
      Réécrire le générateur géométrique en Rust/Wasm fait très sérieusement partie de la roadmap
      En ce moment, je me familiarise avec Rust en faisant Advent of Code

  • Vraiment excellent ! J’aime beaucoup le paramètre de thiccness de la tige :)

    • Merci :)
      Je trouve que les programmeurs ont tendance à prendre leurs projets ou eux-mêmes trop au sérieux, donc j’aime bien glisser un peu de fantaisie ici et là

  • J’aime vraiment beaucoup !
    J’ai quelques suggestions d’amélioration de l’ergonomie
    D’abord, si on déplace accidentellement la souris hors du cadre puis qu’on relâche, le comportement du drag devient bogué. Le mouse-up n’est pas détecté, donc le paramètre reste bloqué en état mouse-down
    Ça rend difficile le dessin dans l’éditeur de feuilles ou la modification des paramètres par glisser-déposer comme avec les curseurs. Il faudrait sans doute enregistrer le gestionnaire d’événement mouse-up sur un ancêtre commun plutôt que sur la boîte de l’éditeur de nœuds du graphe
    Ensuite, les petites poignées circulaires de port de paramètre qu’on attrape pour tirer les connexions sont un peu petites. C’est particulièrement vrai quand on a zoomé pour voir une plus grande partie de la scène
    Même sans agrandir l’élément graphique lui-même, augmenter au moins la zone de hit d’environ 25 % améliorerait l’ergonomie
    Pour info, j’utilise Firefox. Le problème du gestionnaire de souris se produit aussi sous Chromium, mais le drag des connexions de nœuds semble un peu plus utilisable dans Chromium

    • Merci pour le retour !
      J’ai tendance à devenir aveugle à ces petits bugs d’ergonomie, donc c’est très précieux
      Les deux devraient être corrigés dans les prochains jours :)

  • Pour ceux qui ne l’avaient pas remarqué : le panneau de droite peut être élargi en le faisant glisser pour révéler davantage de paramètres et contrôles

  • Fantastique
    J’ai hâte de voir toute une forêt générée à partir de plantes algorithmiques issues du crowdsourcing
    Est-ce lié à un projet scientifique ? Une fonction de botaniste IA qui dirait les chances de survie de la plante, son taxon le plus proche, ou une bonne recette pour l’accompagner avec du riz blanc serait aussi sympa

    • Une de mes idées est de créer un jardin virtuel où les plantes poussent et où l’utilisateur doit s’en occuper comme dans un Tamagotchi :)
      Ce n’est pas lié à un projet scientifique, c’est juste fait par un nerd qui aime les plantes
      Cela dit, on peut associer au projet un ID gbif.org, et dans ce cas des informations supplémentaires sont chargées via l’API gbif :)

  • Excellent ! Si on pouvait aussi ajouter un nœud time, cela permettrait probablement des animations de base
    Globalement, c’est un projet adorable

    • Bonne idée !
      La partie délicate serait sans doute d’intégrer l’animation sans reconstruire tout le maillage à chaque frame
      Cela dit, exporter un skeleton depuis le générateur puis animer la plante à partir de ça semble très simple