Show HN: Simulación 3D de plantas en el navegador

• Plantarium es un sistema para ensamblar plantas 3D con nodos en el navegador, y para crear una planta terminada se necesita un output node
• El esqueleto básico de la planta lo crea el nodo Stem, y las entradas origin, height, thiccness, minThiccness, amount permiten ajustar la posición, altura, grosor y cantidad de tallos
• La repetición y variación de valores están a cargo de los nodos Vec3 y Parameter, que agregan cambios aleatorios a los valores predeterminados para que las plantas se vean menos uniformes
• Los cambios de forma se controlan con los nodos Rotate, Gravity y Noise, que reciben como entrada el eje y ángulo de rotación, el método de gravedad, y el tamaño e intensidad del ruido
• Las hojas se crean con los nodos Leaf, Shape e Instance, y se colocan a lo largo de tallos o ramas; se pueden especificar condiciones de tamaño, rango, cantidad, rotación y profundidad

---

Salida final del grafo de nodos

• Todo sistema de nodos necesita un nodo output para generar el resultado final
• output recibe la entrada plant y compone el resultado completo de la planta

Creación de tallos y control de posición

• El nodo Stem crea el tallo básico de la planta
  • _origin_: posición donde se coloca el tallo; se puede conectar un nodo vec3
  • height: altura del tallo
  • thiccness: grosor del tallo
  • minThiccness: grosor mínimo
  • _amount_: cantidad de tallos a instanciar
• El nodo Vec3 devuelve valores x, y, z
  • Para distribuir los tallos, se puede conectar un nodo random o parameter

Variación de valores y aleatoriedad

• El nodo Parameter devuelve un valor con cierta variación aleatoria aplicada al valor predeterminado
  • _value_: valor base al que se aplicará la variación
  • _variation_: cantidad de variación que se aplicará al valor base
• Parameter se usa repetidamente en varias entradas, como tallos, rotación, gravedad, curvas y valores de sliders

Cambiar la forma con rotación, gravedad y ruido

• El nodo Rotate rota la planta según el eje y el ángulo especificados
  • input: objeto a rotar
  • _axis_: eje de rotación
  • _aroundOrigin_: si rota con respecto a 0,0,0
  • smooth: entrada relacionada con una rotación suave
  • _spread_: si hay varios objetos conectados, determina si se rotan como uno solo o si se dispersan al rotar
  • _angle_: ángulo de rotación
• El nodo Gravity aplica gravedad simple a ramas y tallos
  • input: objeto al que se aplica la gravedad
  • curviness: grado de curvatura
  • _type_: método de cálculo de gravedad; actualmente solo funcionan simple y test
  • strength: intensidad de la gravedad
• El nodo Noise aplica ruido a las ramas de entrada
  • plant: planta de entrada
  • size: tamaño del ruido
  • strength: intensidad del ruido

Creación de hojas y colocación en tallos

• El nodo Leaf genera un modelo de hoja, que puede instanciarse a lo largo de un tallo mediante el nodo Instance
  • _shape_: forma de cada hoja; se puede conectar un nodo shape
  • _curvature_: curvatura de la hoja en dirección x/y; se puede conectar un nodo vec2
• El nodo Shape devuelve una forma única que puede conectarse al nodo Leaf
• El nodo Instance coloca el modelo de entrada a lo largo de tallos o ramas
  • input: entrada de referencia para la colocación
  • model: modelo a colocar
  • alignRotation: alineación de la rotación
  • alternateRotation: rotación alternada
  • _size_: tamaño de cada hoja
  • _instanceRange_: rango donde se colocan las instancias
  • _amount_: cantidad de hojas a colocar
  • rotation: valor de rotación
  • offsetBySize: desplazamiento según el tamaño
  • _depth_: especifica en cuántas capas de ramas se colocarán hojas
• Alpha tiene valores min y max

[GN⁺]

Opiniones de Hacker News

• Realmente útil y genial en muchos sentidos.
  El editor de grafos de nodos basado en navegador está muy bien hecho, permite crear mallas 3D procedurales, incluso tiene exportación a .obj, y la licencia es permisiva, así que parece que podría ser la semilla de muchas herramientas procedurales.

  • ¡Muchas gracias! :)
    Tengo muchas ideas de cosas que se podrían hacer con esta herramienta, y probablemente termine escribiendo mi tesis de licenciatura sobre esto.

• La complejidad es impresionante.
  Para quienes quieran probarlo rápido, el tutorial está bueno, pero toma unos minutos llegar a lo interesante; conviene ajustar los sliders del panel derecho para ver cómo cambia el helecho.
  Además, si haces clic en library y cargas otros modelos, enseguida te das una idea de lo que se puede hacer.
  Que todavía no haya modelos de broma enviados por usuarios da la sensación de que el proyecto acaba de salir.

  • Estoy fuera de casa ahora y no tengo acceso a la PC, pero acabo de ver que la publicación está recibiendo bastante atención.
    Espero que aguante bien ;)

• Se ve muy bien, pero hay un pequeño problema.
  Al cambiar valores, la forma de la planta cambia y la cámara se reajusta constantemente, así que parece que la cámara tiembla, y en lo personal me resulta bastante molesto.
  Sería bueno poder fijar la cámara mientras se modifican parámetros.

  • Buen feedback.
    Creo que convendría agregar debounce al centrado automático de la cámara :)
  • También estaría bueno manejar el movimiento de la cámara con una animación cuando ya se estabilizó después del cambio.

• Proyecto genial, pero ahora parece que las plantas no se están renderizando.
  Hace 20 minutos sí se renderizaban, así que probablemente se vio afectado por el tráfico de HN.
  Todo el código está en línea y la documentación también es excelente. De hecho, este proyecto también tiene un backend de servidor.
  https://github.com/jim-fx/plantarium/tree/main
  https://github.com/jim-fx/plantarium/blob/main/ARCHITECTURE....
  Volveré en unos días para verlo cuando funcione.

  • Ya volvió.

• Hace un año hice algo parecido porque quería probar Rust como motor de una webapp.
  Lo compilaba a wasm y lo servía desde un servidor web en Rust; el resultado está en https://blomma.lorentz.app.
  Pero este proyecto es mucho mejor en cuanto a convertirse en producto, y en especial el editor de grafos de nodos es una verdadera fortaleza.
  Se integra tan bien al flujo de trabajo que deja de sentirse como una herramienta de depuración y pasa a sentirse como un producto que cualquiera puede usar.
  Si hay algo mejor de mi lado, quizá sea que uso curvas de Bézier tanto para la forma de las hojas como para la de los tallos.
  Hacer que la topología y la triangulación quedaran bien fue bastante difícil, pero fue excelente como introducción a los cuaterniones y repaso de trigonometría. Recomiendo intentar hacer un nodo de curvas de Bézier.

  • ¡Está buenísimo! Y gracias por las palabras amables :)
    Reescribir el generador de geometría en Rust/Wasm está bastante en serio en el roadmap.
    Por ahora estoy haciendo Advent of Code para familiarizarme con Rust.

• ¡Está increíble! Me gusta el parámetro de thiccness del tallo :)

  • Gracias :)
    Creo que los programadores tienden a tomarse demasiado en serio a sí mismos o a sus proyectos, así que me gusta meter un poco de juego por aquí y por allá.

• ¡Me encanta!
  Tengo algunas sugerencias para mejorar la usabilidad.
  Primero, si mueves el mouse accidentalmente fuera de la caja y luego lo sueltas, el arrastre se comporta como si tuviera un bug. No detecta el mouse-up, así que el parámetro queda stuck en estado de mouse-down.
  Eso dificulta dibujar en el editor de hojas o cambiar parámetros arrastrando como con un slider. Probablemente bastaría con registrar el event handler de mouse-up en un ancestro común, no en la caja del editor de nodos del grafo.
  Segundo, los pequeños handles circulares de puerto de parámetros para arrastrar conexiones son algo pequeños. Se nota especialmente al hacer zoom out para ver buena parte de toda la escena.
  Creo que si se agranda solo el hit area, aunque no el elemento gráfico en sí, alrededor de un 25%, mejoraría la usabilidad.
  Como referencia, estoy usando Firefox. En Chromium también aparece el mismo problema con el mouse handler, pero arrastrar conexiones entre nodos parece un poco más usable en Chromium.

  • ¡Gracias por el feedback!
    Suelo volverme insensible a estos pequeños bugs de usabilidad, así que esto es muy valioso.
    Creo que ambos quedarán corregidos en unos días :)

• Para quienes no lo sabían: el panel derecho se puede deslizar para revelar más parámetros y controles.

• Fantástico.
  Muero por ver un bosque entero creado con plantas algorítmicas crowdsourced.
  ¿Está conectado con algún proyecto científico? También sería genial una función de botánico IA que te diga qué probabilidad tendría la planta de sobrevivir, cuál sería su clasificación taxonómica más cercana, o una buena receta para acompañarla con arroz blanco.

  • Una de mis ideas es crear un jardín virtual donde las plantas crezcan y el usuario tenga que cuidarlas como un Tamagotchi :)
    No está conectado con ningún proyecto científico; solo lo hizo un nerd al que le gustan las plantas.
    Aun así, se puede asociar un ID de gbif.org al proyecto, y entonces se carga información adicional mediante la API de gbif :)

• ¡Excelente! Si también se pudiera agregar un nodo time, sería posible hacer animaciones básicas.
  En conjunto, es un proyecto encantador.

  • ¡Buena idea!
    La parte difícil probablemente sea cómo integrar la animación sin reconstruir toda la malla en cada frame.
    Pero creo que exportar un skeleton desde el generador y luego animar la planta con eso sería muy sencillo.